Compare commits
19 Commits
ff2a284e64
...
radiance
| Author | SHA1 | Date | |
|---|---|---|---|
| 25a97bf982 | |||
| c98bab9868 | |||
| f2f6bf7708 | |||
| 1645ed76ca | |||
| ea3f061211 | |||
| cfd081abcd | |||
| fcc1326e86 | |||
| aac2bdf2e6 | |||
| a900c5f750 | |||
| 384cb7f7b8 | |||
| d4bfc88be7 | |||
| 0cd5d4c27c | |||
| 20d848623f | |||
| ecaa3bbf6a | |||
| 3a662c8498 | |||
| ba11514dc9 | |||
| a68287e5af | |||
| ca85d297f3 | |||
| bb65104fa5 |
@ -207,6 +207,22 @@
|
||||
<section class="experience section" id="experience">
|
||||
<h2 class="section-title">Experience</h2>
|
||||
<div class="experience__container bd-grid">
|
||||
<div class="experience__content">
|
||||
<div class="experience__time">
|
||||
<span class="experience__rounder"></span>
|
||||
<span class="experience__line"></span>
|
||||
</div>
|
||||
<div class="experience__data bd-grid">
|
||||
<h3 class="experience__title">Service Desk Tech</h3>
|
||||
<span class="experience__company"
|
||||
>2026 to Present | Forterra</span>
|
||||
<p class="experience__description">
|
||||
<ul class="experience__description">
|
||||
<li>• Deliver customer-focused IT support as part of Forterra’s Enterprise Services team, helping maintain reliable day-to-day operations across Linux, Windows, macOS, and Microsoft 365 environments.</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="experience__content">
|
||||
<div class="experience__time">
|
||||
<span class="experience__rounder"></span>
|
||||
@ -215,7 +231,7 @@
|
||||
<div class="experience__data bd-grid">
|
||||
<h3 class="experience__title">IT Consultant and Support Technician</h3>
|
||||
<span class="experience__company"
|
||||
>2025 to Present | Blue Tech Innovation</span>
|
||||
>2025 to 2026 | Blue Tech Innovation</span>
|
||||
<p class="experience__description">
|
||||
<ul class="experience__description">
|
||||
<li>• Provide administration and internal support for company systems, including PCs, Macs, phones, printers, servers, and other related equipment.</li>
|
||||
|
||||
@ -215,6 +215,23 @@
|
||||
|
||||
<div class="experience__container bd-grid">
|
||||
|
||||
<div class="experience__content">
|
||||
<div class="experience__time">
|
||||
<span class="experience__rounder"></span>
|
||||
<span class="experience__line"></span>
|
||||
</div>
|
||||
<div class="experience__data bd-grid">
|
||||
<h3 class="experience__title">Service Desk Tech</h3>
|
||||
<span class="experience__company"
|
||||
>2026 to Present | Forterra</span>
|
||||
<p class="experience__description">
|
||||
<ul class="experience__description">
|
||||
<li>• Deliver customer-focused IT support as part of Forterra’s Enterprise Services team, helping maintain reliable day-to-day operations across Linux, Windows, macOS, and Microsoft 365 environments.</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="experience__content">
|
||||
<div class="experience__time">
|
||||
<span class="experience__rounder"></span>
|
||||
@ -223,7 +240,7 @@
|
||||
<div class="experience__data bd-grid">
|
||||
<h3 class="experience__title">IT Consultant and Support Technician</h3>
|
||||
<span class="experience__company"
|
||||
>2025 to Present | Blue Tech Innovation</span>
|
||||
>2025 to 2026 | Blue Tech Innovation</span>
|
||||
<p class="experience__description">
|
||||
<ul class="experience__description">
|
||||
<li>• Provide administration and internal support for company systems, including PCs, Macs, phones, printers, servers, and other related equipment.</li>
|
||||
@ -248,7 +265,7 @@
|
||||
<div class="experience__data bd-grid">
|
||||
<h3 class="experience__title">Technical Account Manager</h3>
|
||||
<span class="experience__company"
|
||||
>2023 to Present | ITG</span
|
||||
>2023 to 2025 | ITG</span
|
||||
>
|
||||
<p class="experience__description">
|
||||
<ul class="experience__description">
|
||||
|
||||
20
package-lock.json
generated
20
package-lock.json
generated
@ -8,6 +8,8 @@
|
||||
"name": "dangrubb-astro",
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"@fontsource/geist-mono": "^5.3.0",
|
||||
"@fontsource/instrument-sans": "^5.3.0",
|
||||
"astro": "^6.1.9"
|
||||
},
|
||||
"engines": {
|
||||
@ -593,6 +595,24 @@
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@fontsource/geist-mono": {
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@fontsource/geist-mono/-/geist-mono-5.3.0.tgz",
|
||||
"integrity": "sha512-UtJ1BBBCVpMYdIcW7nEB45UAoAw5M53ZXs2t0ciPW+IokuAAIc56M8+kW5tXbRJCTpDw4XTtU7proT6NdQAHTg==",
|
||||
"license": "OFL-1.1",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ayuhito"
|
||||
}
|
||||
},
|
||||
"node_modules/@fontsource/instrument-sans": {
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@fontsource/instrument-sans/-/instrument-sans-5.3.0.tgz",
|
||||
"integrity": "sha512-QwXc4hb/px3XvSPS2CPAOgey8nyrQFxgxrmXQQ+pN+P51hKdAcchxpg8rSbjANFfPu6VKXhDqkVDucXMZ9CM5g==",
|
||||
"license": "OFL-1.1",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ayuhito"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/colour": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
|
||||
|
||||
@ -12,6 +12,8 @@
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource/geist-mono": "^5.3.0",
|
||||
"@fontsource/instrument-sans": "^5.3.0",
|
||||
"astro": "^6.1.9"
|
||||
}
|
||||
}
|
||||
@ -207,6 +207,22 @@
|
||||
<section class="experience section" id="experience">
|
||||
<h2 class="section-title">Experience</h2>
|
||||
<div class="experience__container bd-grid">
|
||||
<div class="experience__content">
|
||||
<div class="experience__time">
|
||||
<span class="experience__rounder"></span>
|
||||
<span class="experience__line"></span>
|
||||
</div>
|
||||
<div class="experience__data bd-grid">
|
||||
<h3 class="experience__title">Service Desk Tech</h3>
|
||||
<span class="experience__company"
|
||||
>2026 to Present | Forterra</span>
|
||||
<p class="experience__description">
|
||||
<ul class="experience__description">
|
||||
<li>• Deliver customer-focused IT support as part of Forterra’s Enterprise Services team, helping maintain reliable day-to-day operations across Linux, Windows, macOS, and Microsoft 365 environments.</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="experience__content">
|
||||
<div class="experience__time">
|
||||
<span class="experience__rounder"></span>
|
||||
@ -215,7 +231,7 @@
|
||||
<div class="experience__data bd-grid">
|
||||
<h3 class="experience__title">IT Consultant and Support Technician</h3>
|
||||
<span class="experience__company"
|
||||
>2025 to Present | Blue Tech Innovation</span>
|
||||
>2025 to 2026 | Blue Tech Innovation</span>
|
||||
<p class="experience__description">
|
||||
<ul class="experience__description">
|
||||
<li>• Provide administration and internal support for company systems, including PCs, Macs, phones, printers, servers, and other related equipment.</li>
|
||||
|
||||
@ -215,6 +215,23 @@
|
||||
|
||||
<div class="experience__container bd-grid">
|
||||
|
||||
<div class="experience__content">
|
||||
<div class="experience__time">
|
||||
<span class="experience__rounder"></span>
|
||||
<span class="experience__line"></span>
|
||||
</div>
|
||||
<div class="experience__data bd-grid">
|
||||
<h3 class="experience__title">Service Desk Tech</h3>
|
||||
<span class="experience__company"
|
||||
>2026 to Present | Forterra</span>
|
||||
<p class="experience__description">
|
||||
<ul class="experience__description">
|
||||
<li>• Deliver customer-focused IT support as part of Forterra’s Enterprise Services team, helping maintain reliable day-to-day operations across Linux, Windows, macOS, and Microsoft 365 environments.</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="experience__content">
|
||||
<div class="experience__time">
|
||||
<span class="experience__rounder"></span>
|
||||
@ -223,7 +240,7 @@
|
||||
<div class="experience__data bd-grid">
|
||||
<h3 class="experience__title">IT Consultant and Support Technician</h3>
|
||||
<span class="experience__company"
|
||||
>2025 to Present | Blue Tech Innovation</span>
|
||||
>2025 to 2026 | Blue Tech Innovation</span>
|
||||
<p class="experience__description">
|
||||
<ul class="experience__description">
|
||||
<li>• Provide administration and internal support for company systems, including PCs, Macs, phones, printers, servers, and other related equipment.</li>
|
||||
@ -248,7 +265,7 @@
|
||||
<div class="experience__data bd-grid">
|
||||
<h3 class="experience__title">Technical Account Manager</h3>
|
||||
<span class="experience__company"
|
||||
>2023 to Present | ITG</span
|
||||
>2023 to 2025 | ITG</span
|
||||
>
|
||||
<p class="experience__description">
|
||||
<ul class="experience__description">
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<body>
|
||||
<div class="music-container">
|
||||
<div class="music-header">
|
||||
<h1><a href="/music">Music</a> / <a href="/music/Darnea">Darnea</a> / DGDN</h1>
|
||||
<h1><a href="/music/">Music</a> / <a href="/music/Darnea/">Darnea</a> / DGDN</h1>
|
||||
</div>
|
||||
|
||||
<div class="album-player">
|
||||
@ -39,7 +39,7 @@
|
||||
</div>
|
||||
|
||||
<div class="music-footer">
|
||||
<p><a href="/music/Darnea">← back to artist</a></p>
|
||||
<p><a href="/music/Darnea/">← back to artist</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
// Album player for DGDN
|
||||
|
||||
const tracks = [
|
||||
{ title: "Dan Beat (bonus)", filename: "Dan Beat (bonus).flac" },
|
||||
{ title: "Neigh V3", filename: "Neigh V3.flac" },
|
||||
{ title: "On Ice", filename: "On Ice.flac" },
|
||||
{ title: "Otish", filename: "Otish.flac" },
|
||||
{ title: "Scan V2", filename: "Scan V2.flac" },
|
||||
{ title: "balance v2", filename: "balance v2.flac" },
|
||||
{ title: "eh ee uhn V2", filename: "eh ee uhn V2.flac" },
|
||||
{ title: "held v3", filename: "held v3.flac" }
|
||||
{ title: "held v3", filename: "held v3.flac" },
|
||||
{ title: "Dan Beat (bonus)", filename: "Dan Beat (bonus).flac" }
|
||||
];
|
||||
|
||||
const audioPlayer = document.getElementById('audio-player');
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<body>
|
||||
<div class="music-container">
|
||||
<div class="music-header">
|
||||
<h1><a href="/music">Music</a> / Darnea</h1>
|
||||
<h1><a href="/music/">Music</a> / Darnea</h1>
|
||||
</div>
|
||||
|
||||
<div class="artist-detail">
|
||||
@ -21,13 +21,13 @@
|
||||
<div class="albums-grid">
|
||||
<div class="album-card">
|
||||
<div class="album-cover">🔥</div>
|
||||
<h3><a href="/music/Darnea/DGDN">DGDN</a></h3>
|
||||
<h3><a href="/music/Darnea/DGDN/">DGDN</a></h3>
|
||||
<p class="album-meta">8 tracks</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="music-footer">
|
||||
<p><a href="/music">← back to music</a></p>
|
||||
<p><a href="/music/">← back to music</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
<div class="artists-grid">
|
||||
<div class="artist-card">
|
||||
<div class="artist-cover">🎤</div>
|
||||
<h2><a href="/music/Darnea">Darnea</a></h2>
|
||||
<h2><a href="/music/Darnea/">Darnea</a></h2>
|
||||
<p class="artist-meta">1 album</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
BIN
public/src/img/DanGrubbLogoDark.png
Normal file
BIN
public/src/img/DanGrubbLogoDark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
42
src/layouts/RadianceBase.astro
Normal file
42
src/layouts/RadianceBase.astro
Normal 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>
|
||||
@ -1,18 +1,17 @@
|
||||
---
|
||||
import CrushBase from '../../layouts/CrushBase.astro';
|
||||
import RadianceBase from '../../layouts/RadianceBase.astro';
|
||||
import posts from '../../data/posts.json';
|
||||
---
|
||||
|
||||
<CrushBase title="dangrubb.net/blog">
|
||||
<RadianceBase title="dangrubb.net/blog">
|
||||
<div class="page">
|
||||
<header class="blog-header">
|
||||
<div class="header-logo">
|
||||
<img src="/src/img/DanGrubbLogoTeal.png" alt="dangrubb" class="logo-img">
|
||||
</div>
|
||||
<p class="page-title">
|
||||
<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>
|
||||
</p>
|
||||
<p class="back-link"><a href="/">← home</a></p>
|
||||
<a class="header-logo" href="/">
|
||||
<span class="sr-only">dangrubb.net home</span>
|
||||
<img src="/src/img/DanGrubbLogoDark.png" alt="" width="64" height="64" />
|
||||
</a>
|
||||
<h1 class="page-title">Blog</h1>
|
||||
<p class="back-link"><a href="/">← Home</a></p>
|
||||
</header>
|
||||
|
||||
<div class="blogs-container">
|
||||
@ -20,7 +19,7 @@ import posts from '../../data/posts.json';
|
||||
<article class="blog-post" id={post.slug}>
|
||||
<h2 class="blog-post-title">{post.title}</h2>
|
||||
<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 class="blog-post-content" set:html={post.content} />
|
||||
<div class="blog-post-image">
|
||||
@ -31,65 +30,49 @@ import posts from '../../data/posts.json';
|
||||
</div>
|
||||
|
||||
<footer class="blog-footer">
|
||||
<a href="/">← home</a>
|
||||
<a href="/">← Home</a>
|
||||
</footer>
|
||||
</div>
|
||||
</CrushBase>
|
||||
</RadianceBase>
|
||||
|
||||
<style>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--crush-white);
|
||||
.page { min-height: 100vh; display: flex; flex-direction: column; }
|
||||
.sr-only {
|
||||
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
|
||||
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
|
||||
}
|
||||
|
||||
.blog-header {
|
||||
text-align: center;
|
||||
padding: 30px 20px 20px;
|
||||
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;
|
||||
}
|
||||
.blog-header { text-align: center; padding: 28px 20px 8px; }
|
||||
.header-logo { display: inline-block; margin-bottom: 18px; }
|
||||
.header-logo img { width: 56px; height: 56px; }
|
||||
|
||||
.page-title {
|
||||
font-family: 'Alfa Slab One', 'Georgia', serif;
|
||||
font-size: clamp(1.8rem, 5vw, 3rem);
|
||||
letter-spacing: -1px;
|
||||
margin: 0 0 12px;
|
||||
font-weight: 400;
|
||||
font-size: clamp(30px, 3.34vw, 56px);
|
||||
line-height: 1;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.title-name { color: var(--crush-teal); }
|
||||
.title-dot { color: var(--crush-teal-light); }
|
||||
.title-tld { color: var(--crush-teal-dark); }
|
||||
.title-slash { color: var(--crush-teal); }
|
||||
.title-page { color: var(--crush-teal-dark); font-size: 0.7em; }
|
||||
|
||||
.back-link {
|
||||
font-size: 0.875rem;
|
||||
color: var(--crush-teal);
|
||||
margin-top: 4px;
|
||||
.back-link, .blog-footer a {
|
||||
font-family: 'Geist Mono', ui-monospace, monospace;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.back-link a {
|
||||
color: var(--crush-teal);
|
||||
opacity: 0.7;
|
||||
.back-link { margin: 0; }
|
||||
.back-link a, .blog-footer a {
|
||||
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 {
|
||||
margin: 30px auto;
|
||||
margin: 32px auto;
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
@ -99,71 +82,46 @@ import posts from '../../data/posts.json';
|
||||
}
|
||||
|
||||
.blog-post {
|
||||
margin-bottom: 40px;
|
||||
padding: 24px;
|
||||
border: 1px solid rgba(0, 139, 139, 0.12);
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(135deg, #f0faf9, #f8f9fa);
|
||||
margin-bottom: 32px;
|
||||
padding: 28px;
|
||||
background: #fff;
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.blog-post-title {
|
||||
color: var(--crush-teal);
|
||||
font-weight: 700;
|
||||
margin: 0 0 8px;
|
||||
font-weight: 500;
|
||||
font-size: 1.6rem;
|
||||
letter-spacing: -0.03em;
|
||||
text-align: center;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.blog-post-date {
|
||||
color: var(--crush-teal-light);
|
||||
font-size: 0.85rem;
|
||||
font-family: 'Geist Mono', ui-monospace, monospace;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.7;
|
||||
margin-bottom: 22px;
|
||||
padding-bottom: 14px;
|
||||
border-bottom: 1px solid rgb(var(--ink) / 0.15);
|
||||
color: rgb(var(--ink) / 0.6);
|
||||
}
|
||||
|
||||
.blog-post-content {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
.blog-post-content :global(p) {
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
.blog-post-content { font-size: 1rem; line-height: 1.55; text-align: center; }
|
||||
.blog-post-content :global(p) { margin: 0 0 15px; }
|
||||
.blog-post-content :global(a) { text-decoration: underline; text-underline-offset: 3px; }
|
||||
|
||||
.blog-post-image {
|
||||
display: flex;
|
||||
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-post-image { display: flex; justify-content: center; margin-top: 20px; }
|
||||
.blog-post-image img { max-width: 100%; height: auto; max-height: 60vh; }
|
||||
|
||||
.blog-footer {
|
||||
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;
|
||||
}
|
||||
.blog-footer { text-align: center; padding: 16px 20px 44px; margin-top: auto; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.blog-header { padding: 20px 15px 15px; }
|
||||
.logo-img { width: 45px; height: 45px; }
|
||||
.blogs-container { padding: 0 15px; }
|
||||
.blog-post { padding: 16px; margin-bottom: 24px; }
|
||||
.blog-post-title { font-size: 1.3rem; }
|
||||
.blogs-container { padding: 0 12px; }
|
||||
.blog-post { padding: 18px; margin-bottom: 20px; }
|
||||
.blog-post-title { font-size: 1.35rem; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,182 +1,97 @@
|
||||
---
|
||||
import CrushBase from '../layouts/CrushBase.astro';
|
||||
import '@fontsource/instrument-sans/latin-400.css';
|
||||
import '@fontsource/instrument-sans/latin-500.css';
|
||||
import '@fontsource/geist-mono/latin-500.css';
|
||||
import '../styles/radiance.css';
|
||||
|
||||
const nav = [
|
||||
{ label: 'Intelligence Platform', href: 'https://ai.dangrubb.net' },
|
||||
{ label: 'Exclusive Music', href: '/music/' },
|
||||
{ label: 'Multimedia Entertainment', href: 'https://pi.dangrubb.net/jellyfin' },
|
||||
{ label: 'Private Search', href: 'https://search.dangrubb.net' },
|
||||
{ label: 'Storage Solutions', href: 'https://pi.dangrubb.net/nextcloud' },
|
||||
];
|
||||
const links = [
|
||||
{ label: 'Blog', href: '/blog' },
|
||||
{ label: 'CV', href: '/cv/' },
|
||||
{ label: 'Git', href: 'https://pi.dangrubb.net/dangit/dangrubbb/dangrubb.net' },
|
||||
];
|
||||
---
|
||||
|
||||
<CrushBase title="dangrubb.net">
|
||||
<div class="crush-page">
|
||||
<header class="top-banner">
|
||||
<div class="brand">
|
||||
<span class="brand-name">dangrubb</span><span class="brand-dot">.</span><span class="brand-tld">net</span>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>dangrubb.net</title>
|
||||
<meta name="description" content="Welcome to dangrubb.net" />
|
||||
<meta name="theme-color" content="#fff6f4" />
|
||||
<link rel="icon" href="/src/img/favicon.ico" type="image/x-icon" />
|
||||
<link rel="preload" as="image" href="/src/img/DanGrubbLogoWhite.png" />
|
||||
</head>
|
||||
<body class="is-loading">
|
||||
<div class="loader" id="loader" aria-hidden="true">
|
||||
<div class="loader__stage">
|
||||
<div class="scene">
|
||||
<div class="cube">
|
||||
<div class="cube__face cube__face--front"><img src="/src/img/DanGrubbLogoWhite.png" alt="" width="140" height="140" /></div>
|
||||
<div class="cube__face cube__face--back"><img src="/src/img/DanGrubbLogoWhite.png" alt="" width="140" height="140" /></div>
|
||||
<div class="cube__face cube__face--right"></div>
|
||||
<div class="cube__face cube__face--left"></div>
|
||||
<div class="cube__face cube__face--top"></div>
|
||||
<div class="cube__face cube__face--bottom"></div>
|
||||
</div>
|
||||
<p class="tagline">OFFICIAL SITE</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="loader__count" id="loader-count">000%</p>
|
||||
</div>
|
||||
|
||||
<header class="bar">
|
||||
<a class="bar__logo" href="/">
|
||||
<span class="sr-only">dangrubb.net home</span>
|
||||
<img src="/src/img/DanGrubbLogoDark.png" alt="" width="48" height="48" />
|
||||
</a>
|
||||
|
||||
<nav class="menu" id="menu" aria-label="Site">
|
||||
<button class="menu__btn" id="menu-btn" type="button" aria-expanded="false" aria-controls="menu-panel">
|
||||
<span class="sr-only">Site navigation</span>
|
||||
<svg class="menu__icon menu__icon--open" viewBox="0 0 18 14" width="18" height="14" aria-hidden="true">
|
||||
<path d="M0 1h2M5 1h13M0 7h10M13 7h5M0 13h2M5 13h13" stroke="currentColor" stroke-width="1.5" fill="none" />
|
||||
</svg>
|
||||
<svg class="menu__icon menu__icon--close" viewBox="0 0 18 18" width="18" height="18" aria-hidden="true">
|
||||
<path d="M1 1l16 16M17 1L1 17" stroke="currentColor" stroke-width="1.5" fill="none" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="menu__panel" id="menu-panel">
|
||||
<ul class="menu__list">
|
||||
{nav.map((item, i) => (
|
||||
<li>
|
||||
<a href={item.href}>
|
||||
<span class="menu__num">{String(i + 1).padStart(2, '0')}</span>
|
||||
<span class="menu__label">{item.label}</span>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div class="menu__links">
|
||||
{links.map((l) => (
|
||||
<a class="menu__link" href={l.href}><span>{l.label}</span></a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="logo-section">
|
||||
<img src="/src/img/pack-splatter.png" alt="" class="splatter-img">
|
||||
<div class="logo-center">
|
||||
<img src="/src/img/DanGrubbLogoTeal.png" alt="DanGrubb" class="logo-img">
|
||||
</div>
|
||||
<main class="hero">
|
||||
<canvas class="hero__orb" id="orb" aria-hidden="true"></canvas>
|
||||
<h1 class="hero__title" id="title">Welcome to dangrubb.net</h1>
|
||||
</main>
|
||||
|
||||
<footer class="bottom-nav">
|
||||
<a href="https://ai.dangrubb.net" class="nav-item">AI</a>
|
||||
<span class="nav-dot">•</span>
|
||||
<a href="/blog" class="nav-item">BLOG</a>
|
||||
<span class="nav-dot">•</span>
|
||||
<a href="/music" class="nav-item">MUSIC</a>
|
||||
<span class="nav-dot">•</span>
|
||||
<a href="https://pi.dangrubb.net/jellyfin" class="nav-item">MEDIA</a>
|
||||
<span class="nav-dot">•</span>
|
||||
<a href="https://pi.dangrubb.net/nextcloud" class="nav-item">STORAGE</a>
|
||||
<span class="nav-dot">•</span>
|
||||
<a href="/cv" class="nav-item">CV</a>
|
||||
<span class="nav-dot">•</span>
|
||||
<a href="https://pi.dangrubb.net/dangit" class="nav-item">GIT</a>
|
||||
</footer>
|
||||
</div>
|
||||
</CrushBase>
|
||||
<script>
|
||||
import { startOrb } from '../scripts/orb.js';
|
||||
import { initUI } from '../scripts/ui.js';
|
||||
|
||||
<style>
|
||||
.crush-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
margin: 0;
|
||||
background: var(--crush-white);
|
||||
}
|
||||
|
||||
.top-banner {
|
||||
text-align: center;
|
||||
padding: 16px 20px 10px;
|
||||
background: linear-gradient(180deg, #e8f5f5 0%, transparent 100%);
|
||||
border-bottom: 3px solid var(--crush-teal);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.brand {
|
||||
font-family: 'Alfa Slab One', 'Georgia', serif;
|
||||
font-size: clamp(3rem, 10vw, 5rem);
|
||||
color: var(--crush-teal);
|
||||
letter-spacing: -2px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.brand-dot { color: var(--crush-teal-light); }
|
||||
.brand-tld { color: var(--crush-teal-dark); }
|
||||
|
||||
.tagline {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 4px;
|
||||
color: var(--crush-teal);
|
||||
margin-top: 8px;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.splatter-img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.logo-center {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
width: 12%;
|
||||
max-width: 160px;
|
||||
aspect-ratio: 1;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 3px 8px rgba(0, 102, 102, 0.3));
|
||||
}
|
||||
|
||||
.bottom-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 20px 20px 28px;
|
||||
background: linear-gradient(0deg, #e8f5f5 0%, transparent 100%);
|
||||
border-top: 3px solid var(--crush-teal);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--crush-teal);
|
||||
letter-spacing: 2px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
background: rgba(0, 139, 139, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: rgba(0, 139, 139, 0.15);
|
||||
color: var(--crush-teal-dark);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 4px 12px rgba(0, 139, 139, 0.2);
|
||||
}
|
||||
|
||||
.nav-dot {
|
||||
font-size: 20px;
|
||||
color: var(--crush-teal);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.brand { font-size: 2.5rem; }
|
||||
.top-banner {
|
||||
flex: 1;
|
||||
flex-shrink: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px 15px;
|
||||
}
|
||||
.logo-section {
|
||||
aspect-ratio: 3 / 4;
|
||||
flex: none;
|
||||
}
|
||||
.splatter-img {
|
||||
object-fit: cover;
|
||||
}
|
||||
.logo-img { width: 36%; }
|
||||
.nav-item { font-size: 16px; padding: 8px 14px; }
|
||||
.bottom-nav {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
.nav-dot { display: none; }
|
||||
}
|
||||
</style>
|
||||
initUI(startOrb);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1063
src/scripts/orb.js
Normal file
1063
src/scripts/orb.js
Normal file
File diff suppressed because it is too large
Load Diff
80
src/scripts/ui.js
Normal file
80
src/scripts/ui.js
Normal file
@ -0,0 +1,80 @@
|
||||
// Loader, title reveal and menu behaviour for the home page.
|
||||
|
||||
export function initUI(startOrb) {
|
||||
const body = document.body;
|
||||
const loader = document.getElementById('loader');
|
||||
const count = document.getElementById('loader-count');
|
||||
const title = document.getElementById('title');
|
||||
const canvas = document.getElementById('orb');
|
||||
const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
// --- title: split into letters (each wrapped per word so lines break cleanly)
|
||||
const text = title.textContent.trim();
|
||||
title.setAttribute('aria-label', text);
|
||||
title.textContent = '';
|
||||
let n = 0;
|
||||
text.split(' ').forEach((word, wi, words) => {
|
||||
const w = document.createElement('span');
|
||||
w.className = 'word';
|
||||
w.setAttribute('aria-hidden', 'true');
|
||||
for (const ch of word) {
|
||||
const mask = document.createElement('span');
|
||||
mask.className = 'ch';
|
||||
const inner = document.createElement('span');
|
||||
inner.textContent = ch;
|
||||
inner.style.transitionDelay = `${0.04 * n++}s`;
|
||||
mask.appendChild(inner);
|
||||
w.appendChild(mask);
|
||||
}
|
||||
title.appendChild(w);
|
||||
if (wi < words.length - 1) title.appendChild(document.createTextNode(' '));
|
||||
});
|
||||
|
||||
// --- loader: counts up while fonts and the first orb frame get ready
|
||||
let orbReady = false;
|
||||
let fontsReady = false;
|
||||
let shown = 0;
|
||||
const started = performance.now();
|
||||
const minimum = reduced ? 0 : 1100;
|
||||
|
||||
const webgl = startOrb(canvas, { onReady: () => { orbReady = true; } });
|
||||
if (!webgl) { document.documentElement.classList.add('no-webgl'); orbReady = true; }
|
||||
(document.fonts ? document.fonts.ready : Promise.resolve()).then(() => { fontsReady = true; });
|
||||
|
||||
function tick(now) {
|
||||
const elapsed = now - started;
|
||||
const real = (orbReady ? 0.5 : 0.1) + (fontsReady ? 0.5 : 0.15);
|
||||
const timed = Math.min(1, elapsed / (minimum || 1));
|
||||
const target = Math.min(real, timed) * 100;
|
||||
shown += (target - shown) * 0.2;
|
||||
if (target - shown < 0.5) shown = target;
|
||||
count.textContent = String(Math.round(shown)).padStart(3, '0') + '%';
|
||||
if (shown >= 99.5 && orbReady && fontsReady && elapsed >= minimum) return done();
|
||||
requestAnimationFrame(tick);
|
||||
}
|
||||
requestAnimationFrame(tick);
|
||||
|
||||
function done() {
|
||||
count.textContent = '100%';
|
||||
body.classList.remove('is-loading');
|
||||
body.classList.add('is-ready');
|
||||
setTimeout(() => loader.remove(), 900);
|
||||
}
|
||||
|
||||
// --- menu
|
||||
const menu = document.getElementById('menu');
|
||||
const btn = document.getElementById('menu-btn');
|
||||
const panel = document.getElementById('menu-panel');
|
||||
|
||||
function setOpen(open) {
|
||||
menu.classList.toggle('is-open', open);
|
||||
btn.setAttribute('aria-expanded', String(open));
|
||||
panel.toggleAttribute('inert', !open);
|
||||
}
|
||||
setOpen(false);
|
||||
btn.addEventListener('click', () => setOpen(!menu.classList.contains('is-open')));
|
||||
addEventListener('keydown', (e) => { if (e.key === 'Escape') { setOpen(false); btn.focus(); } });
|
||||
document.addEventListener('pointerdown', (e) => {
|
||||
if (menu.classList.contains('is-open') && !menu.contains(e.target)) setOpen(false);
|
||||
});
|
||||
}
|
||||
196
src/styles/radiance.css
Normal file
196
src/styles/radiance.css
Normal file
@ -0,0 +1,196 @@
|
||||
/* Radiance home page. Sizes are written in --u units (1u = 1px on a 1600px-wide design). */
|
||||
|
||||
:root {
|
||||
--ink: 9 11 17;
|
||||
--u: clamp(0.5px, 0.0625vw, 1.25px);
|
||||
--ease: cubic-bezier(0.33, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; height: 100%; }
|
||||
body {
|
||||
overflow: hidden;
|
||||
background: #fff6f4;
|
||||
color: rgb(var(--ink) / 0.8);
|
||||
font-family: 'Instrument Sans', system-ui, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; text-decoration: none; }
|
||||
ul { list-style: none; margin: 0; padding: 0; }
|
||||
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
|
||||
img { display: block; }
|
||||
.sr-only {
|
||||
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
|
||||
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
|
||||
}
|
||||
:focus-visible { outline: 2px solid rgb(var(--ink) / 0.7); outline-offset: 2px; }
|
||||
|
||||
/* ---------- hero ---------- */
|
||||
.hero {
|
||||
touch-action: none;
|
||||
position: fixed; inset: 0;
|
||||
background:
|
||||
radial-gradient(115% 80% at 50% 40%, transparent 45%, rgb(251 188 166 / 0.65) 100%),
|
||||
linear-gradient(180deg,
|
||||
#fbddb7 0%, #f9e6bc 14%, #f9ebbc 30%, #f9d9b3 52%,
|
||||
#f7cfac 62%, #f3c19e 70%, #eeae8a 79%, #ee9972 87%, #eb8b63 94%, #ef815c 100%);
|
||||
}
|
||||
.hero__orb { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
|
||||
|
||||
.hero__title {
|
||||
position: absolute; left: 0; right: 0; top: 24%;
|
||||
margin: 0; padding: 0 24px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: clamp(30px, 3.34vw, 64px);
|
||||
line-height: 1;
|
||||
letter-spacing: -0.03em;
|
||||
color: rgb(var(--ink) / 0.8);
|
||||
pointer-events: none;
|
||||
}
|
||||
.word { display: inline-block; white-space: nowrap; }
|
||||
.ch { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
|
||||
.ch > span {
|
||||
display: inline-block;
|
||||
transform: translateY(110%);
|
||||
transition: transform 0.9s var(--ease);
|
||||
}
|
||||
.is-ready .ch > span { transform: none; }
|
||||
|
||||
/* fallback when WebGL is unavailable: a flat glowing sphere */
|
||||
.no-webgl .hero::after {
|
||||
content: ''; position: absolute; left: 50%; top: 52%;
|
||||
width: 52.5vw; max-width: 1100px; aspect-ratio: 1; transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at 35% 30%, #fdd29a, #fb9a63 60%, #f06a4a);
|
||||
box-shadow: 0 0 0 2px rgb(255 235 230 / 0.8), 0 0 80px rgb(255 245 220 / 0.7);
|
||||
}
|
||||
|
||||
/* ---------- top bar ---------- */
|
||||
.bar { position: fixed; z-index: 10; inset: 0 0 auto 0; pointer-events: none; }
|
||||
.bar > * { pointer-events: auto; }
|
||||
.bar__logo {
|
||||
position: absolute; left: calc(14 * var(--u)); top: calc(14 * var(--u));
|
||||
opacity: 0; transition: opacity 0.8s var(--ease) 0.2s;
|
||||
}
|
||||
.bar__logo img { width: calc(80 * var(--u)); height: calc(80 * var(--u)); min-width: 48px; min-height: 48px; }
|
||||
.is-ready .bar__logo { opacity: 1; }
|
||||
|
||||
/* ---------- menu ---------- */
|
||||
.menu {
|
||||
position: absolute; right: calc(20 * var(--u)); top: calc(30 * var(--u));
|
||||
opacity: 0; transition: opacity 0.8s var(--ease) 0.3s;
|
||||
}
|
||||
.is-ready .menu { opacity: 1; }
|
||||
.menu__btn {
|
||||
position: relative; z-index: 2;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
width: 40px; height: 40px;
|
||||
background: #fff;
|
||||
}
|
||||
@media (min-width: 768px) { .menu__btn { width: calc(64 * var(--u)); height: calc(64 * var(--u)); min-width: 40px; min-height: 40px; } }
|
||||
.menu__icon { position: absolute; transition: opacity 0.25s, transform 0.4s var(--ease); }
|
||||
.menu__icon--close { opacity: 0; transform: rotate(-45deg); }
|
||||
.is-open .menu__icon--open { opacity: 0; transform: rotate(45deg); }
|
||||
.is-open .menu__icon--close { opacity: 1; transform: none; }
|
||||
|
||||
.menu__panel {
|
||||
position: absolute; top: 0; right: 0; z-index: 1;
|
||||
background: #fff;
|
||||
width: max-content; max-width: calc(100vw - 24px);
|
||||
padding: calc(50 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u));
|
||||
clip-path: inset(0 0 100% 0);
|
||||
visibility: hidden;
|
||||
transition: clip-path 0.5s var(--ease), visibility 0s 0.5s;
|
||||
}
|
||||
.is-open .menu__panel { clip-path: inset(0); visibility: visible; transition: clip-path 0.5s var(--ease); }
|
||||
@media (max-width: 767px) { .menu__panel { width: calc(100vw - 24px); padding: 64px 16px 16px; } }
|
||||
|
||||
.menu__list li { border-bottom: 1px solid rgb(var(--ink) / 0.15); }
|
||||
.menu__list a {
|
||||
display: flex; align-items: baseline;
|
||||
padding: calc(6.5 * var(--u)) calc(60 * var(--u)) calc(6.5 * var(--u)) 0;
|
||||
font-weight: 500; font-size: calc(18 * var(--u)); line-height: 1.2; white-space: nowrap;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.menu__num {
|
||||
margin-right: calc(16 * var(--u));
|
||||
font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500;
|
||||
font-size: calc(14 * var(--u)); text-transform: uppercase; letter-spacing: 0.02em;
|
||||
}
|
||||
.menu__list:hover a:not(:hover), .menu__list:focus-within a:not(:focus-visible):not(:hover) { opacity: 0.45; }
|
||||
.menu__list li, .menu__links { transform: translateY(8px); opacity: 0; transition: transform 0.5s var(--ease), opacity 0.4s; }
|
||||
.is-open .menu__list li, .is-open .menu__links { transform: none; opacity: 1; }
|
||||
.is-open .menu__list li:nth-child(1) { transition-delay: 0.10s; }
|
||||
.is-open .menu__list li:nth-child(2) { transition-delay: 0.14s; }
|
||||
.is-open .menu__list li:nth-child(3) { transition-delay: 0.18s; }
|
||||
.is-open .menu__list li:nth-child(4) { transition-delay: 0.22s; }
|
||||
.is-open .menu__list li:nth-child(5) { transition-delay: 0.26s; }
|
||||
.is-open .menu__links { transition-delay: 0.32s; }
|
||||
|
||||
.menu__links { display: flex; gap: calc(24 * var(--u)); padding-top: calc(39 * var(--u)); }
|
||||
.menu__link {
|
||||
position: relative; display: inline-block; overflow: hidden;
|
||||
font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500;
|
||||
font-size: calc(14 * var(--u)); line-height: 1; text-transform: uppercase; letter-spacing: 0.02em;
|
||||
}
|
||||
.menu__link::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;
|
||||
}
|
||||
.menu__link:hover::after, .menu__link:focus-visible::after { transform: none; }
|
||||
@media (max-width: 767px) {
|
||||
.menu__list a { padding: 10px 40px 10px 0; font-size: 18px; }
|
||||
.menu__num { font-size: 12px; margin-right: 14px; }
|
||||
.menu__links { gap: 20px; padding-top: 28px; }
|
||||
.menu__link { font-size: 12px; }
|
||||
.bar__logo { left: 12px; top: 12px; }
|
||||
.bar__logo img { width: 44px; height: 44px; }
|
||||
.menu { right: 12px; top: 12px; }
|
||||
}
|
||||
|
||||
/* ---------- loader ---------- */
|
||||
.loader {
|
||||
position: fixed; inset: 0; z-index: 1000;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
padding: 32px;
|
||||
background: #fff6f4;
|
||||
transition: opacity 0.7s var(--ease) 0.1s, visibility 0s 0.8s;
|
||||
}
|
||||
.is-ready .loader { opacity: 0; visibility: hidden; }
|
||||
.loader__stage { flex-grow: 1; display: flex; align-items: center; }
|
||||
.scene { margin: 80px; width: 140px; height: 140px; perspective: 400px; transform: translateZ(0); }
|
||||
.cube {
|
||||
position: relative; width: 140px; height: 140px;
|
||||
transform-style: preserve-3d; transform: translateZ(-100px);
|
||||
animation: spin 3s var(--ease) infinite;
|
||||
}
|
||||
.cube__face {
|
||||
position: absolute; width: 140px; height: 140px;
|
||||
background: rgb(var(--ink)); border: 2px solid rgb(var(--ink));
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.cube__face img { width: 100%; height: 100%; padding: 14px; }
|
||||
.cube__face--front { transform: rotateY(0) translateZ(70px); }
|
||||
.cube__face--right { transform: rotateY(90deg) translateZ(70px); }
|
||||
.cube__face--back { transform: rotateY(180deg) translateZ(70px); }
|
||||
.cube__face--left { transform: rotateY(-90deg) translateZ(70px); }
|
||||
.cube__face--top { transform: rotateX(90deg) translateZ(70px); }
|
||||
.cube__face--bottom { transform: rotateX(-90deg) translateZ(70px); }
|
||||
.is-ready .cube { animation: none; }
|
||||
@keyframes spin {
|
||||
0% { transform: translateZ(-100px) rotateY(0); }
|
||||
40%, 50% { transform: translateZ(-100px) rotateY(-180deg); }
|
||||
90%, 100% { transform: translateZ(-100px) rotateY(-360deg); }
|
||||
}
|
||||
.loader__count {
|
||||
margin: 0; flex-shrink: 0;
|
||||
font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500;
|
||||
font-size: 16px; line-height: 1; text-transform: uppercase; color: rgb(var(--ink) / 0.8);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.cube { animation: none; }
|
||||
.ch > span { transform: none; transition: none; }
|
||||
* { transition-duration: 0.01s !important; }
|
||||
}
|
||||
Reference in New Issue
Block a user