header on relative width, made toc clip under
This commit is contained in:
		
							parent
							
								
									2d68d8b526
								
							
						
					
					
						commit
						0a69344f98
					
				
					 2 changed files with 14 additions and 17 deletions
				
			
		| 
						 | 
					@ -35,7 +35,7 @@
 | 
				
			||||||
  font-size: 1.614rem;
 | 
					  font-size: 1.614rem;
 | 
				
			||||||
  max-height: 500px;
 | 
					  max-height: 500px;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  & > svg {
 | 
					  &>svg {
 | 
				
			||||||
    height: 100%;
 | 
					    height: 100%;
 | 
				
			||||||
    width: 24px;
 | 
					    width: 24px;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
| 
						 | 
					@ -64,12 +64,11 @@
 | 
				
			||||||
      display: none;
 | 
					      display: none;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    transition:
 | 
					    transition: width 0.3s ease,
 | 
				
			||||||
      width 0.3s ease,
 | 
					    height 0.3s ease,
 | 
				
			||||||
      height 0.3s ease,
 | 
					    background-color 0.3s ease,
 | 
				
			||||||
      background-color 0.3s ease,
 | 
					    backdrop-filter 0.3s ease,
 | 
				
			||||||
      backdrop-filter 0.3s ease,
 | 
					    padding 0.3s ease;
 | 
				
			||||||
      padding 0.3s ease;
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
    &.shown {
 | 
					    &.shown {
 | 
				
			||||||
      overflow-y: scroll;
 | 
					      overflow-y: scroll;
 | 
				
			||||||
| 
						 | 
					@ -109,7 +108,7 @@
 | 
				
			||||||
    width: max-content;
 | 
					    width: max-content;
 | 
				
			||||||
    max-height: calc(100svh - 8rem);
 | 
					    max-height: calc(100svh - 8rem);
 | 
				
			||||||
    overflow-y: scroll;
 | 
					    overflow-y: scroll;
 | 
				
			||||||
    z-index: 10;
 | 
					    z-index: 9;
 | 
				
			||||||
    margin-right: 1.272rem;
 | 
					    margin-right: 1.272rem;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    & .toc_a {
 | 
					    & .toc_a {
 | 
				
			||||||
| 
						 | 
					@ -125,7 +124,7 @@
 | 
				
			||||||
      list-style: none;
 | 
					      list-style: none;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      &.active {
 | 
					      &.active {
 | 
				
			||||||
        & > .toc_a {
 | 
					        &>.toc_a {
 | 
				
			||||||
          color: hsl(var(--green) 72 60);
 | 
					          color: hsl(var(--green) 72 60);
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -62,7 +62,7 @@ html.dark {
 | 
				
			||||||
.header {
 | 
					.header {
 | 
				
			||||||
  position: fixed;
 | 
					  position: fixed;
 | 
				
			||||||
  top: 0;
 | 
					  top: 0;
 | 
				
			||||||
  width: 100svw;
 | 
					  width: 100%;
 | 
				
			||||||
  z-index: 10;
 | 
					  z-index: 10;
 | 
				
			||||||
  display: flex;
 | 
					  display: flex;
 | 
				
			||||||
  align-items: center;
 | 
					  align-items: center;
 | 
				
			||||||
| 
						 | 
					@ -122,13 +122,11 @@ footer {
 | 
				
			||||||
  display: flex;
 | 
					  display: flex;
 | 
				
			||||||
  justify-content: space-between;
 | 
					  justify-content: space-between;
 | 
				
			||||||
  padding-inline: 1rem;
 | 
					  padding-inline: 1rem;
 | 
				
			||||||
  background: linear-gradient(
 | 
					  background: linear-gradient(150deg,
 | 
				
			||||||
    150deg,
 | 
					      hsla(var(--blue) 60 5 / 1) 10%,
 | 
				
			||||||
    hsla(var(--blue) 60 5 / 1) 10%,
 | 
					      hsla(var(--blue) 75 6 / 1) 25%,
 | 
				
			||||||
    hsla(var(--blue) 75 6 / 1) 25%,
 | 
					      hsla(var(--blue) 80 8 / 1) 55%,
 | 
				
			||||||
    hsla(var(--blue) 80 8 / 1) 55%,
 | 
					      hsla(var(--blue) 77 7 / 1) 80%);
 | 
				
			||||||
    hsla(var(--blue) 77 7 / 1) 80%
 | 
					 | 
				
			||||||
  );
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
  & ._credits {
 | 
					  & ._credits {
 | 
				
			||||||
    display: flex;
 | 
					    display: flex;
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue