modern toc tweaks
This commit is contained in:
		
							parent
							
								
									9d2024b11c
								
							
						
					
					
						commit
						917d5791ac
					
				
					 17 changed files with 318 additions and 58 deletions
				
			
		
							
								
								
									
										27
									
								
								quartz/components/styles/legacyToc.scss
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										27
									
								
								quartz/components/styles/legacyToc.scss
									
										
									
									
									
										Normal file
									
								
							| 
						 | 
				
			
			@ -0,0 +1,27 @@
 | 
			
		|||
details.toc {
 | 
			
		||||
  & summary {
 | 
			
		||||
    cursor: pointer;
 | 
			
		||||
 | 
			
		||||
    &::marker {
 | 
			
		||||
      color: var(--dark);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    & > * {
 | 
			
		||||
      padding-left: 0.25rem;
 | 
			
		||||
      display: inline-block;
 | 
			
		||||
      margin: 0;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
    
 | 
			
		||||
  & ul {
 | 
			
		||||
    list-style: none;
 | 
			
		||||
    margin: 0.5rem 1.25rem;
 | 
			
		||||
    padding: 0;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  @for $i from 1 through 6 {
 | 
			
		||||
    & .depth-#{$i} {
 | 
			
		||||
      padding-left: calc(1rem * #{$i});
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -2,24 +2,36 @@ details.toc {
 | 
			
		|||
  & summary {
 | 
			
		||||
    cursor: pointer;
 | 
			
		||||
 | 
			
		||||
    &::marker {
 | 
			
		||||
      color: var(--dark);
 | 
			
		||||
    list-style: none;
 | 
			
		||||
    &::marker, &::-webkit-details-marker {
 | 
			
		||||
      display: none;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    & > * {
 | 
			
		||||
      padding-left: 0.25rem;
 | 
			
		||||
      display: inline-block;
 | 
			
		||||
      margin: 0;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    & > h3 {
 | 
			
		||||
      font-size: 1rem;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
    
 | 
			
		||||
  & ul {
 | 
			
		||||
    list-style: none;
 | 
			
		||||
    margin: 0.5rem 1.25rem;
 | 
			
		||||
    margin: 0.5rem 0;
 | 
			
		||||
    padding: 0;
 | 
			
		||||
    & > li > a {
 | 
			
		||||
      color: var(--dark);
 | 
			
		||||
      opacity: 0.35;
 | 
			
		||||
      transition: 0.5s ease opacity;
 | 
			
		||||
      &.in-view {
 | 
			
		||||
        opacity: 0.75;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  @for $i from 1 through 6 {
 | 
			
		||||
  @for $i from 0 through 6 {
 | 
			
		||||
    & .depth-#{$i} {
 | 
			
		||||
      padding-left: calc(1rem * #{$i});
 | 
			
		||||
    }
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue