-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
22 changed files
with
1,221 additions
and
1,059 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| <script lang="ts"> | ||
| import MiniLogo from '$lib/icons/miniLogo.svelte'; | ||
| export let title: string; | ||
| export let details: string; | ||
| export let version: string; | ||
| export let liveDemo: string; | ||
| export let learnMore: string; | ||
| </script> | ||
|
|
||
| <div class="details-card"> | ||
| <div class="details-info"> | ||
| <div> | ||
| <MiniLogo /> | ||
| <h3>{title}</h3> | ||
| </div> | ||
| <a href={version} target="_blank" class="version">v 3.0.0</a> | ||
| </div> | ||
| <p> | ||
| {details} | ||
| </p> | ||
| <div class="details-info"> | ||
| <a href={liveDemo} class="live-demo" target="_blank">Live demo</a> | ||
| <a href={learnMore} class="learn-btn">Learn more</a> | ||
| </div> | ||
| </div> | ||
|
|
||
| <style lang="scss"> | ||
| .details-card { | ||
| background-color: rgba(26, 26, 26, 0.48); | ||
| padding: 1.5rem; | ||
| border-radius: 1.5rem; | ||
| p { | ||
| color: rgba(245, 245, 245, 0.8); | ||
| font-size: 16px; | ||
| min-height: 100px; | ||
| margin-top: 28px; | ||
| } | ||
| } | ||
| .details-info { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| flex-wrap: nowrap; | ||
| div { | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-items: center; | ||
| gap: 4px; | ||
| } | ||
| h3 { | ||
| color: rgba(245, 245, 245, 0.96); | ||
| position: relative; | ||
| top: 0.2rem; | ||
| font-size: 24px; | ||
| } | ||
| .version { | ||
| border: 1px solid rgba(245, 245, 245, 0.96); | ||
| padding: 4px 12px; | ||
| border-radius: 1.5rem; | ||
| } | ||
| a { | ||
| border: 1px solid rgba(245, 245, 245, 0.96); | ||
| border-radius: 1.5rem; | ||
| color: rgba(245, 245, 245, 0.96); | ||
| padding: 12px 16px; | ||
| white-space: nowrap; | ||
| text-decoration: none; | ||
| font-size: 16px; | ||
| } | ||
| .live-demo { | ||
| background-color: rgba(255, 49, 0, 1); | ||
| } | ||
| .learn-btn { | ||
| background-color: transparent; | ||
| border: none; | ||
| padding-left: 6px; | ||
| text-decoration: underline; | ||
| white-space: nowrap; | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| <!-- TableOfContents.svelte --> | ||
| <script lang="ts"> | ||
| import { onMount } from 'svelte'; | ||
| interface Section { | ||
| name: string; | ||
| id: string; | ||
| } | ||
| export let sections: Section[] = []; | ||
| export let activeSection = ''; | ||
| const handleScroll = () => { | ||
| const scrollPosition = window.scrollY + 0; // Adjust based on offset | ||
| sections.forEach((section) => { | ||
| const sectionElement = document.getElementById(section.id); | ||
| if (sectionElement) { | ||
| const offsetTop = sectionElement.offsetTop; | ||
| const offsetHeight = sectionElement.offsetHeight; | ||
| if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) { | ||
| activeSection = section.id; | ||
| } | ||
| } | ||
| }); | ||
| }; | ||
| onMount(() => { | ||
| if (sections.length > 0) { | ||
| activeSection = sections[0].id; | ||
| } | ||
| window.addEventListener('scroll', handleScroll); | ||
| return () => { | ||
| window.removeEventListener('scroll', handleScroll); | ||
| }; | ||
| }); | ||
| </script> | ||
|
|
||
| <nav class="sticky-nav"> | ||
| <ul> | ||
| {#each sections as section} | ||
| <li class={section.id === activeSection ? 'active' : ''}> | ||
| <a href={'#' + section.id}>{section.name}</a> | ||
| </li> | ||
| {/each} | ||
| </ul> | ||
| </nav> | ||
|
|
||
| <style lang="scss"> | ||
| @import '$lib/scss/breakpoints.scss'; | ||
| .sticky-nav { | ||
| background: rgba(26, 26, 26, 1); | ||
| width: 350px; /* Set width for the nav */ | ||
| padding-inline: 0; /* Padding around nav */ | ||
| position: sticky; /* Keep it sticky within the viewport */ | ||
| top: 40px; /* Adjust this to control when it becomes sticky */ | ||
| z-index: 900; /* Ensure it stays on top */ | ||
| } | ||
| .sticky-nav ul { | ||
| list-style: none; /* Remove default list styling */ | ||
| padding: 0; /* Remove padding */ | ||
| margin: 0; /* Remove margin */ | ||
| } | ||
| .active { | ||
| font-weight: bold; /* Highlight the active section */ | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.