feat: camel crush themed landing page (crush branch)
- New CrushBase.astro layout with teal/silver color palette - Redesigned index.astro with Camel Crush pack-inspired branding: - Alfa Slab One font header (dangrubb.net) - Center circular DG monogram with teal gradient (like Joe Camel) - Animated splatter background effect - 'Hint of Menthol • More Menthol' tagline - Bottom nav links styled like pack text (ai•blog•media•storage•cv•git)
This commit is contained in:
dangrubbb
58
src/layouts/CrushBase.astro
Normal file
58
src/layouts/CrushBase.astro
Normal file
@ -0,0 +1,58 @@
|
||||
---
|
||||
const { title } = Astro.props;
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{title}</title>
|
||||
<link rel="icon" href="/src/img/favicon.ico" type="image/x-icon" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Barlow:wght@400;600;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style is:global>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
/* Camel Crush Smooth Silver color palette */
|
||||
:root {
|
||||
--crush-teal: #008b8b;
|
||||
--crush-teal-light: #20b2aa;
|
||||
--crush-teal-dark: #006666;
|
||||
--crush-silver: #c0c0c0;
|
||||
--crush-white: #ffffff;
|
||||
--crush-bg: #f8f9fa;
|
||||
--crush-cream: #faf8f5;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--crush-white);
|
||||
font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
color: var(--crush-teal-dark);
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--crush-teal);
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--crush-teal-light);
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: var(--crush-teal);
|
||||
}
|
||||
</style>
|
||||
@ -1,154 +1,268 @@
|
||||
---
|
||||
import Base from '../layouts/Base.astro';
|
||||
import GlitchBard from '../components/GlitchBard.astro';
|
||||
import posts from '../data/posts.json';
|
||||
|
||||
const latest = posts[0];
|
||||
const formattedDate = new Date(latest.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
|
||||
import CrushBase from '../layouts/CrushBase.astro';
|
||||
---
|
||||
|
||||
<Base title="dangrubb.net">
|
||||
<div class="page">
|
||||
<GlitchBard />
|
||||
<CrushBase title="dangrubb.net">
|
||||
<div class="crush-page">
|
||||
<!-- Top branding -->
|
||||
<header class="top-banner">
|
||||
<div class="brand">
|
||||
<span class="brand-name">dangrubb</span><span class="brand-dot">.</span><span class="brand-tld">net</span>
|
||||
</div>
|
||||
<p class="tagline">OFFICIAL SITE</p>
|
||||
</header>
|
||||
|
||||
<p class="site-title">dangrubb.net</p>
|
||||
<!-- Center logo circle -->
|
||||
<main class="logo-section">
|
||||
<div class="logo-wrapper">
|
||||
<!-- Splatter behind -->
|
||||
<div class="splatter-bg"></div>
|
||||
<!-- The circle -->
|
||||
<div class="logo-circle">
|
||||
<svg viewBox="0 0 120 120" class="logo-svg">
|
||||
<!-- Stylized DG monogram in teal gradient -->
|
||||
<defs>
|
||||
<linearGradient id="tealGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#006666"/>
|
||||
<stop offset="50%" stop-color="#008b8b"/>
|
||||
<stop offset="100%" stop-color="#20b2aa"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- D letter -->
|
||||
<path d="M35 30 L35 90 L55 90 Q75 90 80 70 Q85 50 75 35 Q65 25 50 25 L35 30 Z"
|
||||
fill="url(#tealGrad)" opacity="0.9"/>
|
||||
<!-- G letter (stylized, overlapping) -->
|
||||
<path d="M55 45 Q45 50 45 65 Q45 82 60 85 Q75 88 82 75 L82 65 L65 65 L65 70 L75 70 L75 77 Q70 80 62 78 Q52 75 52 65 Q52 55 60 50 Q68 47 73 52"
|
||||
fill="none" stroke="url(#tealGrad)" stroke-width="3.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="announcement">
|
||||
<a href="/music">EXCLUSIVE: Leaked mixtape from Darnea's vault</a>
|
||||
<p class="crush-subtitle">
|
||||
<span class="crush-label">HINT OF</span>
|
||||
<span class="crush-highlight">MENTHOL</span>
|
||||
<span class="crush-dot">•</span>
|
||||
<span class="crush-label">MORE</span>
|
||||
<span class="crush-highlight">MENTHOL</span>
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<div class="blog-preview-container">
|
||||
<div class="blog-preview">
|
||||
<a href={`/blog/#${latest.slug}`} class="blog-preview-title">{latest.title}</a>
|
||||
<div class="blog-preview-date">{formattedDate}</div>
|
||||
<img src={latest.image} alt={latest.title} />
|
||||
<p class="blog-preview-excerpt">{latest.excerpt}</p>
|
||||
<a href={`/blog/#${latest.slug}`} class="blog-preview-link">Read more →</a>
|
||||
<!-- Bottom navigation -->
|
||||
<footer class="bottom-nav">
|
||||
<a href="https://ai.dangrubb.net" class="nav-item">
|
||||
<span class="nav-label">AI</span>
|
||||
</a>
|
||||
<span class="nav-dot">•</span>
|
||||
<a href="/blog" class="nav-item">
|
||||
<span class="nav-label">BLOG</span>
|
||||
</a>
|
||||
<span class="nav-dot">•</span>
|
||||
<a href="https://pi.dangrubb.net/jellyfin" class="nav-item">
|
||||
<span class="nav-label">MEDIA</span>
|
||||
</a>
|
||||
<span class="nav-dot">•</span>
|
||||
<a href="https://pi.dangrubb.net/nextcloud" class="nav-item">
|
||||
<span class="nav-label">STORAGE</span>
|
||||
</a>
|
||||
<span class="nav-dot">•</span>
|
||||
<a href="/cv" class="nav-item">
|
||||
<span class="nav-label">CV</span>
|
||||
</a>
|
||||
<span class="nav-dot">•</span>
|
||||
<a href="https://pi.dangrubb.net/dangit" class="nav-item">
|
||||
<span class="nav-label">GIT</span>
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="bottom-nav">
|
||||
<a target="_parent" href="https://ai.dangrubb.net">ai</a>
|
||||
<a target="_parent" href="/blog">blog</a>
|
||||
<a target="_parent" href="https://pi.dangrubb.net/jellyfin">media</a>
|
||||
<a target="_parent" href="https://pi.dangrubb.net/nextcloud">storage</a>
|
||||
<a target="_parent" href="/cv">cv</a>
|
||||
<a target="_parent" href="https://pi.dangrubb.net/dangit">git</a>
|
||||
</nav>
|
||||
</div>
|
||||
</Base>
|
||||
</CrushBase>
|
||||
|
||||
<style>
|
||||
@import '../styles/bard.css';
|
||||
|
||||
.page {
|
||||
padding: 20px 20px 100px;
|
||||
.crush-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background:
|
||||
radial-gradient(ellipse at 20% 20%, rgba(0, 139, 139, 0.05) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 80% 80%, rgba(32, 178, 170, 0.04) 0%, transparent 50%),
|
||||
var(--crush-white);
|
||||
}
|
||||
|
||||
.site-title {
|
||||
margin: 10px auto 0;
|
||||
max-width: 400px;
|
||||
/* === TOP BANNER === */
|
||||
.top-banner {
|
||||
text-align: center;
|
||||
line-height: 1.3;
|
||||
font-size: 0.875rem;
|
||||
padding: 40px 20px 20px;
|
||||
background: linear-gradient(180deg, #e8f5f5 0%, transparent 100%);
|
||||
border-bottom: 3px solid var(--crush-teal);
|
||||
}
|
||||
|
||||
.announcement {
|
||||
margin: 20px auto 0;
|
||||
display: inline-block;
|
||||
border: 1px solid #ffff00;
|
||||
padding: 10px 15px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
.brand {
|
||||
font-family: 'Alfa Slab One', 'Georgia', serif;
|
||||
font-size: clamp(3rem, 10vw, 5rem);
|
||||
color: var(--crush-teal);
|
||||
letter-spacing: -2px;
|
||||
line-height: 1;
|
||||
}
|
||||
.announcement a {
|
||||
color: #ffff00;
|
||||
font-weight: bold;
|
||||
}
|
||||
.announcement a:hover { text-decoration: underline; }
|
||||
|
||||
.blog-preview-container {
|
||||
margin: 30px auto 0;
|
||||
width: 100%;
|
||||
.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 === */
|
||||
.logo-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 20px;
|
||||
}
|
||||
|
||||
.logo-wrapper {
|
||||
position: relative;
|
||||
width: clamp(220px, 50vw, 320px);
|
||||
height: clamp(220px, 50vw, 320px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Animated splatter background */
|
||||
.splatter-bg {
|
||||
position: absolute;
|
||||
inset: -20px;
|
||||
background-image:
|
||||
radial-gradient(circle at 30% 40%, rgba(0, 102, 102, 0.3) 0%, transparent 40%),
|
||||
radial-gradient(circle at 70% 30%, rgba(0, 139, 139, 0.25) 0%, transparent 35%),
|
||||
radial-gradient(circle at 50% 70%, rgba(32, 178, 170, 0.2) 0%, transparent 40%),
|
||||
radial-gradient(circle at 20% 80%, rgba(0, 102, 102, 0.15) 0%, transparent 30%);
|
||||
border-radius: 50%;
|
||||
animation: splatterPulse 4s ease-in-out infinite;
|
||||
filter: blur(20px);
|
||||
}
|
||||
|
||||
@keyframes splatterPulse {
|
||||
0%, 100% { transform: scale(1); opacity: 1; }
|
||||
50% { transform: scale(1.1); opacity: 0.7; }
|
||||
}
|
||||
|
||||
/* The actual circle with the camel/monogram */
|
||||
.logo-circle {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 6px solid var(--crush-teal);
|
||||
background:
|
||||
linear-gradient(135deg, #e0f2f2 0%, #b8e0e0 50%, #99d0d0 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow:
|
||||
0 20px 60px rgba(0, 139, 139, 0.3),
|
||||
inset 0 2px 20px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.logo-svg {
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
filter: drop-shadow(0 4px 12px rgba(0, 102, 102, 0.4));
|
||||
}
|
||||
|
||||
/* Menthol subtitle (inspired by the Camel Crush pack) */
|
||||
.crush-subtitle {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.blog-preview {
|
||||
border: 1px solid rgba(155, 169, 180, 0.3);
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
background: linear-gradient(135deg, rgba(13, 10, 20, 0.6), rgba(50, 30, 80, 0.3));
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
max-width: 350px;
|
||||
width: 100%;
|
||||
.crush-label {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--crush-teal-dark);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.blog-preview img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 150px;
|
||||
object-fit: cover;
|
||||
border-radius: 3px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.blog-preview-title {
|
||||
color: #ffff00;
|
||||
font-weight: bold;
|
||||
font-size: 0.95rem;
|
||||
margin: 10px 0 5px;
|
||||
display: block;
|
||||
}
|
||||
.blog-preview-title:hover { text-decoration: underline; }
|
||||
.blog-preview-date {
|
||||
color: #aa95bd;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.blog-preview-excerpt {
|
||||
color: #9d9aa4;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.4;
|
||||
margin: 8px 0 10px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.blog-preview-link {
|
||||
display: inline-block;
|
||||
color: #6be1e9;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.blog-preview-link:hover { text-decoration: underline; }
|
||||
|
||||
.crush-highlight {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--crush-teal);
|
||||
background: linear-gradient(180deg, transparent 60%, rgba(0, 139, 139, 0.15) 60%);
|
||||
}
|
||||
|
||||
.crush-dot {
|
||||
font-size: 20px;
|
||||
color: var(--crush-teal);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* === BOTTOM NAVIGATION === */
|
||||
.bottom-nav {
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 20px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 20px;
|
||||
}
|
||||
.bottom-nav a {
|
||||
color: #6be1e9;
|
||||
font-size: 0.875rem;
|
||||
gap: 8px;
|
||||
padding: 40px 20px 60px;
|
||||
background: linear-gradient(0deg, #e8f5f5 0%, transparent 100%);
|
||||
border-top: 3px solid var(--crush-teal);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page { padding: 20px 10px 80px; }
|
||||
.site-title { font-size: 0.8rem; max-width: 320px; }
|
||||
.blog-preview { max-width: 300px; }
|
||||
.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;
|
||||
}
|
||||
@media (max-width: 400px) {
|
||||
.site-title { font-size: 0.75rem; }
|
||||
.blog-preview-container { margin-top: 20px; }
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* === RESPONSIVE === */
|
||||
@media (max-width: 768px) {
|
||||
.top-banner { padding: 30px 15px 15px; }
|
||||
.logo-section { padding: 40px 15px; }
|
||||
.crush-subtitle { margin-top: 30px; }
|
||||
.nav-item {
|
||||
font-size: 15px;
|
||||
padding: 6px 12px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.brand { font-size: 2.5rem; }
|
||||
.crush-subtitle {
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.bottom-nav {
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.nav-dot { display: none; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user