fix module listing style
This commit is contained in:
		
							parent
							
								
									cafdf14928
								
							
						
					
					
						commit
						84703e3117
					
				
					 3 changed files with 22 additions and 60 deletions
				
			
		| 
						 | 
					@ -31,7 +31,7 @@ const details = route.data.details
 | 
				
			||||||
---
 | 
					---
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<DocsLayout
 | 
					<DocsLayout
 | 
				
			||||||
  title={route.type + " Type Documentation"}
 | 
					  title={route.type + " Module Types"}
 | 
				
			||||||
  description="Quickshell Type Documentation"
 | 
					  description="Quickshell Type Documentation"
 | 
				
			||||||
>
 | 
					>
 | 
				
			||||||
  <div class="docs-content">
 | 
					  <div class="docs-content">
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -6,9 +6,13 @@ const routes = await getTypeData();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const modules = [...new Set(routes.map(route => route.type))];
 | 
					const modules = [...new Set(routes.map(route => route.type))];
 | 
				
			||||||
---
 | 
					---
 | 
				
			||||||
<DocsLayout title="Quickshell Type Definitions" description="Quickshell Type Documentation">
 | 
					<DocsLayout title="Quickshell Module Listing" description="Quickshell Type Documentation">
 | 
				
			||||||
  <h2>Type Definitions</h2>
 | 
					  <div class="docs-content">
 | 
				
			||||||
  <div class="root-nav">
 | 
					    <hr/>
 | 
				
			||||||
 | 
					    <h2>Module Listing</h2>
 | 
				
			||||||
 | 
					    <section>
 | 
				
			||||||
 | 
					      <span>All modules included with Quickshell</span>
 | 
				
			||||||
 | 
					      <div class="root-nav" data-pagefind-ignore>
 | 
				
			||||||
        {modules.map(moduleEntry => {
 | 
					        {modules.map(moduleEntry => {
 | 
				
			||||||
          const indexData = routes.filter(route => route.name === "index")
 | 
					          const indexData = routes.filter(route => route.name === "index")
 | 
				
			||||||
          const indexSingled = indexData.filter(indexEntry => indexEntry.type === moduleEntry)[0]
 | 
					          const indexSingled = indexData.filter(indexEntry => indexEntry.type === moduleEntry)[0]
 | 
				
			||||||
| 
						 | 
					@ -22,4 +26,6 @@ const modules = [...new Set(routes.map(route => route.type))];
 | 
				
			||||||
          </div>)
 | 
					          </div>)
 | 
				
			||||||
        })}
 | 
					        })}
 | 
				
			||||||
      </div>
 | 
					      </div>
 | 
				
			||||||
 | 
					    </section>
 | 
				
			||||||
 | 
					  </div>
 | 
				
			||||||
</DocsLayout>
 | 
					</DocsLayout>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -19,29 +19,6 @@
 | 
				
			||||||
    &:not(:last-child) {
 | 
					    &:not(:last-child) {
 | 
				
			||||||
      border-bottom: 1px solid hsla(var(--blue) 10 15 / 0.6);
 | 
					      border-bottom: 1px solid hsla(var(--blue) 10 15 / 0.6);
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					 | 
				
			||||||
    & .root-nav-link {
 | 
					 | 
				
			||||||
      font-size: 1.137rem;
 | 
					 | 
				
			||||||
      max-height: 2rem;
 | 
					 | 
				
			||||||
      position: relative;
 | 
					 | 
				
			||||||
      text-decoration: none;
 | 
					 | 
				
			||||||
      text-align: center;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      &::before {
 | 
					 | 
				
			||||||
        content: "";
 | 
					 | 
				
			||||||
        position: absolute;
 | 
					 | 
				
			||||||
        bottom: 0;
 | 
					 | 
				
			||||||
        left: 0;
 | 
					 | 
				
			||||||
        width: 100%;
 | 
					 | 
				
			||||||
        height: 1px;
 | 
					 | 
				
			||||||
        background: linear-gradient(
 | 
					 | 
				
			||||||
          90deg,
 | 
					 | 
				
			||||||
          transparent 25%,
 | 
					 | 
				
			||||||
          hsla(var(--accent-500) / 0.88) 50%,
 | 
					 | 
				
			||||||
          transparent 75%
 | 
					 | 
				
			||||||
        );
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -353,27 +330,6 @@ html.dark .typevariants {
 | 
				
			||||||
      display: grid;
 | 
					      display: grid;
 | 
				
			||||||
      grid-template-columns: 0.60fr 1.40fr;
 | 
					      grid-template-columns: 0.60fr 1.40fr;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      & .root-nav-link {
 | 
					 | 
				
			||||||
        justify-self: start;
 | 
					 | 
				
			||||||
        height: max-content;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
        &::before {
 | 
					 | 
				
			||||||
          width: 0;
 | 
					 | 
				
			||||||
          background: linear-gradient(
 | 
					 | 
				
			||||||
            to right,
 | 
					 | 
				
			||||||
            hsla(var(--accent-400) / 0.5) var(--percent),
 | 
					 | 
				
			||||||
            hsla(var(--accent-400) / 0) 100%
 | 
					 | 
				
			||||||
          );
 | 
					 | 
				
			||||||
          animation: percentToZero 250ms ease-in-out forwards;
 | 
					 | 
				
			||||||
          transition: width 0.25s ease-in-out;
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
        &:hover::before {
 | 
					 | 
				
			||||||
          animation: percentToFifty 250ms ease-in-out forwards;
 | 
					 | 
				
			||||||
          width: 100%;
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      & .root-nav-desc {
 | 
					      & .root-nav-desc {
 | 
				
			||||||
        padding-left: 1rem;
 | 
					        padding-left: 1rem;
 | 
				
			||||||
        border-left: 1px solid hsl(var(--blue) 10 15 / 0.6);
 | 
					        border-left: 1px solid hsl(var(--blue) 10 15 / 0.6);
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue