diff --git a/src/lib/banner2.svelte b/src/lib/banner2.svelte index 831bef4..ea57f6b 100644 --- a/src/lib/banner2.svelte +++ b/src/lib/banner2.svelte @@ -57,11 +57,18 @@ flex-direction: row; align-items: flex-end; gap: 12px; + margin: var(--margin-header-top) 0 var(--margin-header-bottom) 0; + } + + .title-container + hr { + /* Add top margin if no date element exists */ + margin-top: 16px; } .title { box-sizing: border-box; height: fit-content; + margin: 0; } .date { @@ -75,5 +82,6 @@ font-family: var(--font-mono); font-weight: 500; font-size: 1.0rem; + margin: 0; } \ No newline at end of file diff --git a/src/lib/header.svelte b/src/lib/header.svelte index 1220c2b..21edea3 100644 --- a/src/lib/header.svelte +++ b/src/lib/header.svelte @@ -1,47 +1,28 @@ {#snippet headerContent()} - - Favicon - + Home Projects Project N5 Blog About {/snippet} - + \ No newline at end of file + \ No newline at end of file diff --git a/src/lib/table-of-contents.svelte b/src/lib/table-of-contents.svelte index 88bcdf9..52bbf45 100644 --- a/src/lib/table-of-contents.svelte +++ b/src/lib/table-of-contents.svelte @@ -2,9 +2,9 @@ import {onMount} from 'svelte'; let { - disableStickyScrolling, + stickyScrolling, }: { - disableStickyScrolling?: boolean; + stickyScrolling?: boolean; } = $props(); let idCounter: number = 0; @@ -64,12 +64,12 @@ } -{#if disableStickyScrolling} -
+{#if stickyScrolling} +
{@render tocList()}
{:else} -
+
{@render tocList()}
{/if} diff --git a/src/lib/webrings/gamedev.svelte b/src/lib/webrings/gamedev.svelte index 1c3b391..c80dbca 100644 --- a/src/lib/webrings/gamedev.svelte +++ b/src/lib/webrings/gamedev.svelte @@ -6,10 +6,10 @@
〔 - ↫ PREV + << PREV RAND LIST - NEXT ↬ + NEXT >> 〕
@@ -26,7 +26,7 @@ margin: 0 4px; text-decoration: none; } - a:link, a:visited { + a:link, a:visited, span { color: var(--color-highlight); } a:hover { @@ -40,5 +40,6 @@ } span { margin: 0; + font-weight: bold; } \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 6732518..fd0110c 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -131,6 +131,9 @@ --font-size-h3: 1.3rem; --font-size-h4: 1.2rem; + --margin-header-top: 16px; + --margin-header-bottom: 8px; + /* page sizing */ --page-width: 1000px; --screen-width-mobile: 800px; @@ -181,27 +184,6 @@ margin: 12px 0; font-weight: 400; } - ul { - padding: 0; - } - - li::before { - content: "–"; - font-weight: 900; - color: var(--color-highlight); - padding-right: 8px; - } - li { - display: flex; - padding-left: 0; - margin-top: 4px; - margin-bottom: 4px; - transition: background-color 0.2s ease-in-out; - padding: 2px 12px; - } - li a { - display: inline; - } /* #region Headers */ /* All headers */ @@ -209,8 +191,8 @@ font-weight: 700; font-family: var(--font-mono); color: var(--color-highlight); - margin-top: 16px; - margin-bottom: 8px; + margin-top: var(--margin-header-top); + margin-bottom: var(--margin-header-bottom); width: fit-content; } @@ -259,6 +241,7 @@ height: 1px; border: none; border-top: 2px dashed var(--color-highlight); + margin: 8px 0; } code, .code-block { @@ -342,59 +325,58 @@ ); } - .project-subtitle { - color: var(--color-highlight); - font-weight: 700; - font-style: italic; - margin-top: 0; - font-family: var(--font-mono); - } - - .project-banner-container { - position: relative; - width: 80%; - margin-left: auto; - margin-right: auto; - display: flex; - } - - .project-banner { - margin: 0; /* reset left/right margins */ - width: 100%; - } - - .project-icon { - float: left; - margin: 16px 16px 16px 0; - width: 20%; - } - - .project-date { - font-size: 1rem; - font-weight: 700; - line-height: 1rem; - width: fit-content; - margin: 0; - padding: 0; - - color: var(--color-text-dark); - background-color: var(--color-highlight); - font-family: var(--font-stylised); - padding: 4px; - } - - .project-date-embed { - position: absolute; - left: 0; - bottom: 0; - } - .pixelated-img { image-rendering: pixelated; } + + /* #region Lists (ul and LinkList) */ + .list, ul { + display: flex; + flex-direction: column; + padding: 0; + } + + .list a, li { + width: 100%; + /* transition: color 0.1s ease-in-out; */ + margin: 0; + padding: 4px 0; + list-style-type: none; + } + .list a::before, li::before { + content: "–"; + font-family: var(--font-mono); + font-weight: bold; + color: var(--color-highlight); + margin: 0 4px 0 12px; + } + li::before { + padding-right: 8px; + } + .list a:hover::before { + content: ">"; + } + .list a:link, .list a:visited, li { + color: var(--color-text); + text-decoration: none; + } + .list a:hover { + color: var(--color-highlight); + } + + .list img { + filter: var(--color-text-img); + margin-top: 4px; + margin-bottom: -4px; + width: fit-content !important; + margin-left: 0; + margin-right: 0; + display: inline; + } + /* #endregion */ @media screen and (max-width: 800px) { - h1 { + /* h1 { font-size: 2.3rem; line-height: 2.4rem; } @@ -412,7 +394,7 @@ h4, h5, h6 { font-size: 1.4rem; line-height: 1.4rem; - } + } */ /* p, span, li, pre, a { } */ diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index aa25f86..b8985d4 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -1,6 +1,6 @@ @@ -8,19 +8,20 @@ Daisy FM Synth | denizk0461 - - + + Top view of the Daisy FM synth

A friend showed me the Daisy Seed, an Arduino-compatible microcontroller made for developing audio equipment. With a little bit of motivation and absolutely no experience in either programming synthesisers or electronics in general, I quickly got my hands on one and started to toy around.

So... how did we get here?

- +

How did I make this?

diff --git a/src/routes/projects/projectn5/devlog/+page.svelte b/src/routes/projects/projectn5/devlog/+page.svelte index 58fd073..848d759 100644 --- a/src/routes/projects/projectn5/devlog/+page.svelte +++ b/src/routes/projects/projectn5/devlog/+page.svelte @@ -1,5 +1,5 @@