-
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.
19437dd Fix conflict issues (Graeme Byrne) 5c2e1df fix issues with v2 (Graeme Byrne) Pull request description: * moved posts for index and tracker into `TorrustIndexPost.svelte` and `TorrustTrackerPost.svelte` * [Key features list width should be 100% #6](#6) * [Review design for table of contents #8](#8) * [Minor bugs in homepage #12](#12) * [Homepage cards don't have the same padding as design #25](#25) * [Top menu padding is not the same as the design #26](#26) * [Related Post section does not look like the standard blog post list #27](#27) * [Ask the designer how we should implement navigation between blog posts #28](#28) * [Ask the designer how to implement share links in blog posts #29](#29) * [Remove # prefix from titles #30](#30) * [Ask the designer how to implement highlighted terms or sentences in markdown #36](#36) * [Font style in feature card is not the same as in the original design #43](#43) ACKs for top commit: josecelano: ACK 19437dd Tree-SHA512: a60b8ee60753f8517ddd53ae1073d97b481b9badbc75938f364b0c239ab561a6b2eece7d01f5c4ff4e97af9804facfb04e8266377a32ce4a27c531dcf5263044
- Loading branch information
Showing
22 changed files
with
1,035 additions
and
877 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
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.