dangrubbb/dangrubb.net
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

radiance: Private Search menu item (search.dangrubb.net); restyle blog with radiance colors and fonts

Browse Source
This commit is contained in:
dangrubbb
2026-10-22 20:10:52 -04:00
parent ecaa3bbf6a
commit 20d848623f
3 changed files with 104 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/layouts/RadianceBase.astro Normal file
View File

@ -0,0 +1,42 @@
---
import '@fontsource/instrument-sans/latin-400.css';
import '@fontsource/instrument-sans/latin-500.css';
import '@fontsource/geist-mono/latin-500.css';
const { title } = Astro.props;
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{title}</title>
<meta name="theme-color" content="#fff6f4" />
<link rel="icon" href="/src/img/favicon.ico" type="image/x-icon" />
</head>
<body>
<slot />
</body>
</html>
<style is:global>
:root {
--ink: 9 11 17;
--ease: cubic-bezier(0.33, 0, 0.2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
background-color: #f9d9b3;
background-image:
radial-gradient(115% 80% at 50% 30%, transparent 45%, rgb(251 188 166 / 0.65) 100%),
linear-gradient(180deg, #fbddb7 0%, #f9e6bc 14%, #f9ebbc 30%, #f9d9b3 55%, #f3c19e 78%, #ee9972 92%, #ef815c 100%);
background-attachment: fixed;
color: rgb(var(--ink) / 0.8);
font-family: 'Instrument Sans', system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid rgb(var(--ink) / 0.7); outline-offset: 2px; }
</style>

164
src/pages/blog/index.astro
View File

@ -1,18 +1,17 @@
--- ---
import CrushBase from '../../layouts/CrushBase.astro'; import RadianceBase from '../../layouts/RadianceBase.astro';
import posts from '../../data/posts.json'; import posts from '../../data/posts.json';
--- ---
<CrushBase title="dangrubb.net/blog"> <RadianceBase title="dangrubb.net/blog">
<div class="page"> <div class="page">
<header class="blog-header"> <header class="blog-header">
<div class="header-logo"> <a class="header-logo" href="/">
<img src="/src/img/DanGrubbLogoTeal.png" alt="dangrubb" class="logo-img"> <span class="sr-only">dangrubb.net home</span>
</div> <img src="/src/img/DanGrubbLogoDark.png" alt="" width="64" height="64" />
<p class="page-title"> </a>
<span class="title-name">dangrubb</span><span class="title-dot">.</span><span class="title-tld">net</span><span class="title-slash">/</span><span class="title-page">blog</span> <h1 class="page-title">Blog</h1>
</p> <p class="back-link"><a href="/">← Home</a></p>
<p class="back-link"><a href="/">← home</a></p>
</header> </header>
<div class="blogs-container"> <div class="blogs-container">
@ -20,7 +19,7 @@ import posts from '../../data/posts.json';
<article class="blog-post" id={post.slug}> <article class="blog-post" id={post.slug}>
<h2 class="blog-post-title">{post.title}</h2> <h2 class="blog-post-title">{post.title}</h2>
<div class="blog-post-date"> <div class="blog-post-date">
{new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })} {new Date(post.date + 'T12:00:00').toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
</div> </div>
<div class="blog-post-content" set:html={post.content} /> <div class="blog-post-content" set:html={post.content} />
<div class="blog-post-image"> <div class="blog-post-image">
@ -31,65 +30,49 @@ import posts from '../../data/posts.json';
</div> </div>
<footer class="blog-footer"> <footer class="blog-footer">
<a href="/">← home</a> <a href="/">← Home</a>
</footer> </footer>
</div> </div>
</CrushBase> </RadianceBase>
<style> <style>
.page { .page { min-height: 100vh; display: flex; flex-direction: column; }
min-height: 100vh; .sr-only {
display: flex; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
flex-direction: column; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
background: var(--crush-white);
} }
.blog-header { .blog-header { text-align: center; padding: 28px 20px 8px; }
text-align: center; .header-logo { display: inline-block; margin-bottom: 18px; }
padding: 30px 20px 20px; .header-logo img { width: 56px; height: 56px; }
background: linear-gradient(180deg, #e8f5f5 0%, transparent 100%);
border-bottom: 3px solid var(--crush-teal);
}
.header-logo {
display: flex;
justify-content: center;
margin-bottom: 12px;
}
.logo-img {
width: 60px;
height: 60px;
object-fit: contain;
}
.page-title { .page-title {
font-family: 'Alfa Slab One', 'Georgia', serif; margin: 0 0 12px;
font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 400;
letter-spacing: -1px; font-size: clamp(30px, 3.34vw, 56px);
line-height: 1; line-height: 1;
margin-bottom: 8px; letter-spacing: -0.03em;
} }
.title-name { color: var(--crush-teal); } .back-link, .blog-footer a {
.title-dot { color: var(--crush-teal-light); } font-family: 'Geist Mono', ui-monospace, monospace;
.title-tld { color: var(--crush-teal-dark); } font-weight: 500;
.title-slash { color: var(--crush-teal); } font-size: 12px;
.title-page { color: var(--crush-teal-dark); font-size: 0.7em; } text-transform: uppercase;
letter-spacing: 0.02em;
.back-link {
font-size: 0.875rem;
color: var(--crush-teal);
margin-top: 4px;
} }
.back-link a { .back-link { margin: 0; }
color: var(--crush-teal); .back-link a, .blog-footer a {
opacity: 0.7; position: relative; display: inline-block; overflow: hidden;
} }
.back-link a:hover { opacity: 1; } .back-link a::after, .blog-footer a::after {
content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
background: rgb(var(--ink) / 0.3); transform: translateX(-101%); transition: transform 0.4s;
}
.back-link a:hover::after, .blog-footer a:hover::after { transform: none; }
.blogs-container { .blogs-container {
margin: 30px auto; margin: 32px auto;
max-width: 700px; max-width: 700px;
width: 100%; width: 100%;
padding: 0 20px; padding: 0 20px;
@ -99,71 +82,46 @@ import posts from '../../data/posts.json';
} }
.blog-post { .blog-post {
margin-bottom: 40px; margin-bottom: 32px;
padding: 24px; padding: 28px;
border: 1px solid rgba(0, 139, 139, 0.12); background: #fff;
border-radius: 6px;
background: linear-gradient(135deg, #f0faf9, #f8f9fa);
max-width: 700px; max-width: 700px;
width: 100%; width: 100%;
} }
.blog-post-title { .blog-post-title {
color: var(--crush-teal); margin: 0 0 8px;
font-weight: 700; font-weight: 500;
font-size: 1.6rem; font-size: 1.6rem;
letter-spacing: -0.03em;
text-align: center; text-align: center;
margin-bottom: 6px;
} }
.blog-post-date { .blog-post-date {
color: var(--crush-teal-light); font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 0.85rem; font-weight: 500;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.02em;
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 22px;
opacity: 0.7; padding-bottom: 14px;
border-bottom: 1px solid rgb(var(--ink) / 0.15);
color: rgb(var(--ink) / 0.6);
} }
.blog-post-content { .blog-post-content { font-size: 1rem; line-height: 1.55; text-align: center; }
font-size: 0.95rem; .blog-post-content :global(p) { margin: 0 0 15px; }
line-height: 1.6; .blog-post-content :global(a) { text-decoration: underline; text-underline-offset: 3px; }
color: #333;
text-align: center;
}
.blog-post-content :global(p) {
margin: 0 0 15px;
}
.blog-post-image { .blog-post-image { display: flex; justify-content: center; margin-top: 20px; }
display: flex; .blog-post-image img { max-width: 100%; height: auto; max-height: 60vh; }
justify-content: center;
margin-top: 20px;
}
.blog-post-image img {
max-width: 100%;
height: auto;
max-height: 60vh;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 102, 102, 0.15);
}
.blog-footer { .blog-footer { text-align: center; padding: 16px 20px 44px; margin-top: auto; }
text-align: center;
padding: 30px 20px 40px;
border-top: 3px solid var(--crush-teal);
background: linear-gradient(0deg, #e8f5f5 0%, transparent 100%);
margin-top: auto;
}
.blog-footer a {
color: var(--crush-teal);
font-weight: 600;
}
@media (max-width: 768px) { @media (max-width: 768px) {
.blog-header { padding: 20px 15px 15px; } .blogs-container { padding: 0 12px; }
.logo-img { width: 45px; height: 45px; } .blog-post { padding: 18px; margin-bottom: 20px; }
.blogs-container { padding: 0 15px; } .blog-post-title { font-size: 1.35rem; }
.blog-post { padding: 16px; margin-bottom: 24px; }
.blog-post-title { font-size: 1.3rem; }
} }
</style> </style>

2
src/pages/index.astro
View File

@ -8,7 +8,7 @@ const nav = [
{ label: 'Intelligence Platform', href: 'https://ai.dangrubb.net' }, { label: 'Intelligence Platform', href: 'https://ai.dangrubb.net' },
{ label: 'Exclusive Music', href: '/music' }, { label: 'Exclusive Music', href: '/music' },
{ label: 'Multimedia Entertainment', href: 'https://pi.dangrubb.net/jellyfin' }, { label: 'Multimedia Entertainment', href: 'https://pi.dangrubb.net/jellyfin' },
{ label: 'Crypto', href: '#' }, { label: 'Private Search', href: 'https://search.dangrubb.net' },
{ label: 'Storage Solutions', href: 'https://pi.dangrubb.net/nextcloud' }, { label: 'Storage Solutions', href: 'https://pi.dangrubb.net/nextcloud' },
]; ];
const links = [ const links = [