denizk0461/pages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styled status on main page. don't like how it looks though

Browse Source
This commit is contained in:
denizk0461
2026-04-01 11:09:16 +02:00
parent 866e7413aa
commit 3484efc498
3 changed files with 69 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/routes/+layout.svelte
View File

@@ -127,6 +127,8 @@
--border-style: dashed;
--border-dash-size: 2px;
--underline-dash-size: 1px;
--border-radius: 24px;
/* durations */
--duration-blur: 0.2s;

89
src/routes/+page.svelte
View File

@@ -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 @@
</div>
<div class="split-container">
<div class="info-container">
<h4 class="update-header">heads-up</h4>
<p>This website works best on Firefox and other Gecko-based browsers! All pages <i>should</i> be responsive and work on mobile.</p>
<p>Also, this place is a constant work-in-progress and things may move around. If anything's outright <a href="/blog/2026/0131">broken</a> though, please do let me know.</p>
<div class="meta-vertical-container">
<div class="meta-container info-container">
<a class="status-header-link" href="/"><h4 class="update-header">latest status</h4></a>
<p class="status-content">{latestStatusContent}</p>
<span class="status-timestamp">:: {latestStatusTimestamp}</span>
</div>
<div class="meta-container info-container">
<h4 class="update-header">heads-up</h4>
<p>This website works best on Firefox and other Gecko-based browsers! All pages <i>should</i> be responsive and work on mobile.</p>
</div>
</div>
<div class="update-container">
<div class="meta-container update-container">
<a class="update-header-link" href="/meta/updates"><h4 class="update-header">website updates <span class="small-supertext">(new!)</span></h4></a>
{#each updateEntriesTrimmed as entry}
<UpdateEntry {entry} />
@@ -122,8 +129,6 @@
</div>
</div>
<p>{latestStatusTimestamp} :: {latestStatusContent}</p>
<GalleryRow entries={galleryTopRow} />
<GalleryRow entries={galleryBottomRow} />
@@ -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 {