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:
		
							parent
							
								
									2b613de769
								
							
						
					
					
						commit
						d5296995de
					
				
					 10 changed files with 206 additions and 45 deletions
				
			
		
							
								
								
									
										100
									
								
								assets/css/099_nethack.css
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										100
									
								
								assets/css/099_nethack.css
									
										
									
									
									
										Normal 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;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue