Get the nethack page looking good again

Update all the CSS classes and fix the layout so it looks good in the new theme.
Convert a bunch of CSS classes to BEM style.
This commit is contained in:
Eryn Wells 2024-10-27 09:56:46 -06:00
parent 2b613de769
commit d5296995de
10 changed files with 206 additions and 45 deletions

100
assets/css/099_nethack.css Normal file
View file

@ -0,0 +1,100 @@
/******************
* NETHACK LOGFILE
******************/
#dungeon-background {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: -1;
filter: brightness(0.3);
}
.nethack-logfile {
margin-inline-start: 0;
padding-inline-start: 0;
.nethack-logentry {
align-items: first baseline;
display: grid;
grid-template-columns: min-content min-content auto min-content;
grid-template-areas:
"list-marker entry-marker entry-date entry-character-descriptor"
". . entry-description entry-description"
". . entry-stats entry-stats";
gap: var(--space-xs);
margin-inline-start: 0;
}
}
.nethack-logentry {
&:not(:last-child) {
margin-block-end: var(--space-l);
}
&::before {
grid-area: list-marker;
}
.nethack-logentry__marker {
grid-area: entry-marker;
}
.nethack-logentry__date {
grid-area: entry-date;
line-height: 1;
margin: 0;
padding: 0;
}
.nethack-logentry__character-descriptor {
font-family: var(--font-family-monospace);
font-size: var(--text-s);
grid-area: entry-character-descriptor;
line-height: 1;
white-space: nowrap;
}
.nethack-logentry__description {
grid-area: entry-description;
margin: 0;
}
.nethack-logentry__stats {
border: 0;
color: var(--text-color-secondary);
font-family: var(--font-family-monospace);
font-size: var(--text-s);
grid-area: entry-stats;
margin-block: 0;
width: 100%;
-webkit-border-horizontal-spacing: 0;
-webkit-border-vertical-spacing: 0;
}
.nethack-logentry__stats {
padding: 0;
text-transform: uppercase;
vertical-align: bottom;
white-space: nowrap;
thead {
font-weight: bolder;
}
.nethack-logentry__score,
.nethack-logentry__hp,
.nethack-logentry__level {
width: 16rem;
text-align: right;
}
}
}