mirror of
				https://github.com/alrayyes/wiki.git
				synced 2025-08-07 15:21:03 +00:00 
			
		
		
		
	fix(layout): grid triage and regression (#1440)
* fix(table of contents): multiple scrollbars (https://github.com/jackyzha0/quartz/issues/1388) * fix(center): Main content mininum width (https://github.com/jackyzha0/quartz/issues/1439) * fix(code block): Horizontal overflow fix (https://github.com/jackyzha0/quartz/issues/1438, https://github.com/jackyzha0/quartz/issues/1353) * WIP fix for ul/ol .overflow * Fix: restore former scrollbar behavior for overflow lists (https://github.com/jackyzha0/quartz/issues/1437) * Fix: code block overflow-x * fix: Table of Content overflow (https://github.com/jackyzha0/quartz/issues/1437) * Address feedback * Move max-height toggle from js to css
This commit is contained in:
		
					parent
					
						
							
								921f45cf70
							
						
					
				
			
			
				commit
				
					
						a7a0dcad22
					
				
			
		
					 6 changed files with 34 additions and 23 deletions
				
			
		quartz/components/styles
| 
						 | 
				
			
			@ -1,9 +1,10 @@
 | 
			
		|||
@use "../../styles/variables.scss" as *;
 | 
			
		||||
 | 
			
		||||
.backlinks {
 | 
			
		||||
  @media all and not ($desktop) {
 | 
			
		||||
  @media all and not ($mobile) {
 | 
			
		||||
    overflow-y: auto;
 | 
			
		||||
    display: initial;
 | 
			
		||||
    display: flex;
 | 
			
		||||
    flex-direction: column;
 | 
			
		||||
    &:after {
 | 
			
		||||
      pointer-events: none;
 | 
			
		||||
      content: "";
 | 
			
		||||
| 
						 | 
				
			
			@ -17,10 +18,6 @@
 | 
			
		|||
      background: linear-gradient(transparent 0px, var(--light));
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    &:has(> .overflow) {
 | 
			
		||||
      position: unset;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    & > h3 {
 | 
			
		||||
      font-size: 1rem;
 | 
			
		||||
      margin: 0;
 | 
			
		||||
| 
						 | 
				
			
			@ -39,10 +36,6 @@
 | 
			
		|||
    }
 | 
			
		||||
 | 
			
		||||
    & > .overflow {
 | 
			
		||||
      max-height: unset;
 | 
			
		||||
      & > li:last-of-type {
 | 
			
		||||
        margin-bottom: 0;
 | 
			
		||||
      }
 | 
			
		||||
      &:after {
 | 
			
		||||
        display: none;
 | 
			
		||||
      }
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,8 +1,13 @@
 | 
			
		|||
@use "../../styles/variables.scss" as *;
 | 
			
		||||
 | 
			
		||||
.explorer {
 | 
			
		||||
  display: flex;
 | 
			
		||||
  flex-direction: column;
 | 
			
		||||
  overflow-y: hidden;
 | 
			
		||||
  &.desktop-only {
 | 
			
		||||
    overflow-y: auto;
 | 
			
		||||
    @media all and not ($mobile) {
 | 
			
		||||
      display: flex;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  &:after {
 | 
			
		||||
    pointer-events: none;
 | 
			
		||||
| 
						 | 
				
			
			@ -62,7 +67,8 @@ button#explorer {
 | 
			
		|||
#explorer-content {
 | 
			
		||||
  list-style: none;
 | 
			
		||||
  overflow: hidden;
 | 
			
		||||
  max-height: none;
 | 
			
		||||
  overflow-y: auto;
 | 
			
		||||
  max-height: 100%;
 | 
			
		||||
  transition:
 | 
			
		||||
    max-height 0.35s ease,
 | 
			
		||||
    visibility 0s linear 0s;
 | 
			
		||||
| 
						 | 
				
			
			@ -70,6 +76,7 @@ button#explorer {
 | 
			
		|||
  visibility: visible;
 | 
			
		||||
 | 
			
		||||
  &.collapsed {
 | 
			
		||||
    max-height: 0;
 | 
			
		||||
    transition:
 | 
			
		||||
      max-height 0.35s ease,
 | 
			
		||||
      visibility 0s linear 0.35s;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,5 +1,10 @@
 | 
			
		|||
.toc {
 | 
			
		||||
  overflow-y: auto;
 | 
			
		||||
  display: flex;
 | 
			
		||||
  flex-direction: column;
 | 
			
		||||
  &.desktop-only {
 | 
			
		||||
    display: flex;
 | 
			
		||||
    max-height: 40%;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
button#toc {
 | 
			
		||||
| 
						 | 
				
			
			@ -32,17 +37,19 @@ button#toc {
 | 
			
		|||
#toc-content {
 | 
			
		||||
  list-style: none;
 | 
			
		||||
  overflow: hidden;
 | 
			
		||||
  max-height: none;
 | 
			
		||||
  overflow-y: auto;
 | 
			
		||||
  max-height: 100%;
 | 
			
		||||
  transition:
 | 
			
		||||
    max-height 0.5s ease,
 | 
			
		||||
    max-height 0.35s ease,
 | 
			
		||||
    visibility 0s linear 0s;
 | 
			
		||||
  position: relative;
 | 
			
		||||
  visibility: visible;
 | 
			
		||||
 | 
			
		||||
  &.collapsed {
 | 
			
		||||
    max-height: 0;
 | 
			
		||||
    transition:
 | 
			
		||||
      max-height 0.5s ease,
 | 
			
		||||
      visibility 0s linear 0.5s;
 | 
			
		||||
      max-height 0.35s ease,
 | 
			
		||||
      visibility 0s linear 0.35s;
 | 
			
		||||
    visibility: hidden;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -65,6 +72,9 @@ button#toc {
 | 
			
		|||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  > ul.overflow {
 | 
			
		||||
    max-height: none;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  @for $i from 0 through 6 {
 | 
			
		||||
    & .depth-#{$i} {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue