diff --git a/src/lib/lists/blog-gallery.svelte b/src/lib/lists/blog-gallery.svelte index 92cfad3..6761f96 100644 --- a/src/lib/lists/blog-gallery.svelte +++ b/src/lib/lists/blog-gallery.svelte @@ -44,7 +44,7 @@ border-radius var(--duration-animation) var(--anim-curve); border: var(--border-dash-size) var(--border-style) transparent; text-decoration: none; - border-radius: 24px; + border-radius: var(--border-radius); } .entry:hover { @@ -59,8 +59,8 @@ .entry:hover .entry-banner-container { /* border-radius: 24px 24px 0 0; */ - border-top-left-radius: 16px; - border-top-right-radius: 16px; + border-top-left-radius: calc(var(--border-radius) - 8px); + border-top-right-radius: calc(var(--border-radius) - 8px); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 81e1682..7ab9585 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -127,6 +127,8 @@ --border-style: dashed; --border-dash-size: 2px; --underline-dash-size: 1px; + + --border-radius: 24px; /* durations */ --duration-blur: 0.2s; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index aa4e068..3dbf575 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -13,7 +13,7 @@ let latestDevlogDate = devlogPosts[0].post.date; let latestBlogDate = blogPosts[0].post.date; - let updateEntriesTrimmed = updateEntries.slice(0, 4); + let updateEntriesTrimmed = updateEntries.slice(0, 5); let latestStatusContent = $state("fetching status..."); let latestStatusTimestamp = $state("?"); @@ -74,7 +74,7 @@ title: "Files", description: "Find things I've put for download on my Copyparty instance", img: "main/hypertext.webp", - altText: "Screenshot of Hypertext Unity level. Crates are strewn across the floor, Waluigi is flying in front of the camera, and text such as 'COME AND TRY OUR ALL-NEW BLENDER' and 'omg! it's the brandenburg er tor!' is displayed.", + altText: "Screenshot of Hypertext Unity level. Crates are strewn across the floor, Waluigi is flying in front of the camera, and text such as 'COME AND TRY OUR ALL-NEW BLENDER' and 'omg! it's the brandenbur ger tor!' is displayed.", link: "https://files.natconf.dev/public/", }, { @@ -109,12 +109,19 @@
-
-

heads-up

-

This website works best on Firefox and other Gecko-based browsers! All pages should be responsive and work on mobile.

-

Also, this place is a constant work-in-progress and things may move around. If anything's outright broken though, please do let me know.

+
+
+

latest status

+

{latestStatusContent}

+ :: {latestStatusTimestamp} +
+
+

heads-up

+

This website works best on Firefox and other Gecko-based browsers! All pages should be responsive and work on mobile.

+
-
+ +

website updates (new!)

{#each updateEntriesTrimmed as entry} @@ -122,8 +129,6 @@
-

{latestStatusTimestamp} :: {latestStatusContent}

- @@ -173,7 +178,7 @@ width: 100%; display: flex; flex-direction: row; - gap: 16px; + gap: 8px; margin: 16px 0; } @@ -214,29 +219,51 @@ margin-right: 12px; } - .update-container, .info-container, .button-container, .webring-container { + .meta-vertical-container { + flex: 3; + display: flex; + flex-direction: column; + gap: 8px; + } + + .meta-container { padding: 8px 24px; backdrop-filter: blur(var(--blur-radius-background)); - flex: 2; + border-width: var(--border-dash-size); + border-style: var(--border-style); + /* transition: border-radius var(--duration-animation) var(--anim-curve); */ + /* border-radius: var(--border-radius); */ } - .update-container, .button-container, .webring-container { - border: var(--border-dash-size) var(--color-highlight) var(--border-style); - } - - .info-container, .button-container { - border: var(--border-dash-size) var(--color-highlight-alt) var(--border-style); - } .info-container { - flex: 1; - } - .info-container > h4, .button-container > h4 { - color: var(--color-highlight-alt); + border-color: var(--color-highlight-alt); } .info-container p, .info-container a { font-size: 1.0rem; line-height: 1.4rem; } + .info-container > h4 { + color: var(--color-highlight-alt); + } + + .update-container { + border-color: var(--color-highlight); + flex: 4; + } + + .status-content { + margin-bottom: 8px; + } + + .status-timestamp { + font-family: var(--font-mono); + font-size: 0.8rem; + line-height: 0.8rem; + display: block; + color: var(--color-text-highlight-alt); + font-weight: 600; + margin-top: 0; + } .webring-container { display: flex; @@ -251,11 +278,23 @@ padding-bottom: 16px; } - .update-header-link { + .update-header-link, .status-header-link { text-decoration: none; } .update-header-link:hover { - text-decoration: underline var(--border-style) var(--border-dash-size) var(--color-highlight); + text-decoration-color: var(--color-highlight); + } + .status-header-link:hover { + text-decoration-color: var(--color-highlight-alt); + } + .update-header-link:hover, .status-header-link:hover { + text-decoration-line: underline; + text-decoration-style: dashed; + text-decoration-thickness: var(--border-dash-size); + } + + .status-header-link .update-header { + color: var(--color-highlight-alt); } .update-header {