Gabriel Kaszewski
1ba5ee1b41
Some checks failed
Build and Deploy Blog / build-and-deploy-local (push) Failing after 11s
Reviewed-on: #1
143 lines
3.3 KiB
CSS
143 lines
3.3 KiB
CSS
@import "tailwindcss";
|
|
@plugin "@tailwindcss/typography";
|
|
|
|
:root {
|
|
--background: #ffffff;
|
|
--foreground: #171717;
|
|
}
|
|
|
|
@theme {
|
|
--color-aero-blue: #7cb9e8;
|
|
--color-aero-green: #8ff0a4;
|
|
--color-sky-blue: #87ceeb;
|
|
--color-grass-green: #7cfc00;
|
|
--color-water: #00bfff;
|
|
--color-window-title: #0058e1;
|
|
|
|
--background-start: var(--color-sky-blue);
|
|
--background-end: var(--color-lime-300);
|
|
|
|
--font-display: var(--font-frutiger), "Arial", "Helvetica", "sans-serif";
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--background: #0a0a0a;
|
|
--foreground: #ededed;
|
|
}
|
|
}
|
|
|
|
body {
|
|
background-color: #3cb1e7;
|
|
background-image:
|
|
/* A subtle white radial gradient for a "lens flare" or glossy spot effect */ radial-gradient(
|
|
circle at 10% 20%,
|
|
rgba(255, 255, 255, 0.4) 0%,
|
|
rgba(255, 255, 255, 0) 25%
|
|
),
|
|
/* The main blue sky gradient */
|
|
linear-gradient(to bottom, #54c5f9 0%, #87e0fd 70%),
|
|
/* The green hill at the bottom */
|
|
radial-gradient(circle at 50% 100%, #9cff9c 0%, #3cdc5c 40%, #24a844 80%);
|
|
background-attachment: fixed;
|
|
min-height: 100vh;
|
|
color: #333;
|
|
}
|
|
|
|
::selection {
|
|
background-color: #0058e1;
|
|
color: white;
|
|
}
|
|
|
|
.window-shadow {
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.hide-native-cursor,
|
|
.hide-native-cursor * {
|
|
cursor: none;
|
|
}
|
|
|
|
/* ── Code blocks (syntax highlighted via rehype-pretty-code) ── */
|
|
.prose pre {
|
|
background: rgba(0, 20, 60, 0.72) !important;
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255, 255, 255, 0.13);
|
|
border-radius: 0.6rem;
|
|
box-shadow:
|
|
0 4px 24px rgba(0, 0, 0, 0.3),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
|
padding: 1.25rem 1.5rem;
|
|
overflow-x: auto;
|
|
position: relative;
|
|
}
|
|
|
|
/* Language badge */
|
|
.prose pre[data-language]::before {
|
|
content: attr(data-language);
|
|
position: absolute;
|
|
top: 0.45rem;
|
|
right: 0.75rem;
|
|
font-size: 0.68rem;
|
|
font-family: var(--font-mono), monospace;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: rgba(135, 200, 240, 0.65);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.prose pre code {
|
|
background: transparent !important;
|
|
border: none !important;
|
|
padding: 0 !important;
|
|
font-size: 0.875em;
|
|
color: inherit;
|
|
}
|
|
|
|
/* Scrollbar inside code blocks */
|
|
.prose pre::-webkit-scrollbar {
|
|
height: 5px;
|
|
}
|
|
.prose pre::-webkit-scrollbar-track {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 3px;
|
|
}
|
|
.prose pre::-webkit-scrollbar-thumb {
|
|
background: rgba(100, 180, 255, 0.35);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* ── Inline code ── */
|
|
.prose :not(pre) > code {
|
|
background: rgba(100, 180, 255, 0.18) !important;
|
|
border: 1px solid rgba(100, 180, 255, 0.38) !important;
|
|
color: #0048c8 !important;
|
|
border-radius: 0.3rem !important;
|
|
padding: 0.1em 0.4em !important;
|
|
font-size: 0.88em !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
.prose :not(pre) > code::before,
|
|
.prose :not(pre) > code::after {
|
|
content: none !important;
|
|
}
|
|
|
|
/* ── Corner ribbon animation ── */
|
|
@keyframes blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.4; }
|
|
}
|
|
|
|
@utility animate-blink {
|
|
animation: blink 0.8s ease-in-out infinite;
|
|
}
|