CSS - Clean Slate, Supposedly
I've been moving things around somewhat on this site. I'm currently working on a fancy new home page, outside of the Bear Blog system entirely. This blog itself has moved to a subdomain in preparation for that. The design of the new home page is one that's been really fun, and I'm excited for when it's finally done, but the styling of the blog doesn't really match up like at all. So I'm switching out the CSS theme here for one of the basic ones, for the time being. Later in the year when I have more time I'll give another custom theme a go, so it can match a bit better.
Until then, I do still like how the old theme here looked, so I'm just posting it here for posterity - maybe I'll fix it up again later! And maybe others would like to use it, or take something cool from it. Feel free to message me if you have any questions about any of this, I'm happy to help teach what I know!
Screenshots
Header Code
<script src="https://esm.sh/css-doodle/css-doodle.min.js?raw"></script>
<style>
css-doodle {
--rule: (
:doodle {
@grid: 50x1 / 60vmin;
perspective: 90vmin;
position: @var(--void-positioning);
left: @var(--left-coords);
top: @var(--top-coords);
transform: translate(-50%, -50%);
pointer-events: none;
z-index: -1;
}
background:
@multi(@r(40, 20),
(radial-gradient(@p(@var(--color-1), @var(--color-2), @var(--color-3)) 15%, transparent 50%)
@r(100%) @r(100%) / @r(1%, 3%, .1) @lr() no-repeat));
@size: 100%;
@place-cell: center;
border-radius: 50%;
transform-style: preserve-3d;
animation: scale-up @var(--duration) linear infinite;
animation-delay: calc(@i() * -.4s);
@keyframes scale-up {
0% {
opacity: 0;
transform: translate3d(0, 0, 0) rotate(0);
}
10% {
opacity: 1;
}
95% {
transform: translate3d(0, 0, @r(40vmin, 85vmin)) rotate(@r(-360deg, 360deg));
}
100% {
opacity: 0;
transform: translate3d(0, 0, 1vmin);
}
}
);
}
</style>
<css-doodle use="var(--rule)"></css-doodle>
Theme CSS
@font-face {
font-family: 'Hobo';
src: url(shhh🤫) format("opentype");
}
@property --left-coords {
syntax: "<length>";
inherits: true;
initial-value: 0;
}
@property --top-coords {
syntax: "<length>";
inherits: true;
initial-value: 0;
}
@property --text {
syntax: "<color>";
inherits: true;
initial-value: transparent;
}
@property --pink {
syntax: "<color>";
inherits: true;
initial-value: transparent;
}
@property --orange {
syntax: "<color>";
inherits: true;
initial-value: transparent;
}
@property --teal {
syntax: "<color>";
inherits: true;
initial-value: transparent;
}
@property --color-1 {
syntax: "<color>";
inherits: true;
initial-value: transparent;
}
@property --color-2 {
syntax: "<color>";
inherits: true;
initial-value: transparent;
}
@property --color-3 {
syntax: "<color>";
inherits: true;
initial-value: transparent;
}
:root {
color-scheme: dark light;
--teal: light-dark(oklch(0.6778 0.1098 188.74), oklch(0.2033 0.1098 188.74));
--pink: light-dark(oklch(0.5487 0.2112 15.56), oklch(0.2893 0.1027 15.56));
--orange: light-dark(oklch(0.8097 0.0937 48.87), oklch(0.4347 0.0203 48.87));
--text: light-dark(black, antiquewhite);
--color-1: light-dark(#53d9d1ff, #53d9d166);
--color-2: light-dark(#f27b9bff, #f27b9b66);
--color-3: light-dark(#eb7132ff, #eb713266);
--left-coords: 66vw;
--top-coords: 50svh;
--void-positioning: fixed;
--duration: 15s;
--top-spacing: 0;
}
@media (max-width: 800px) {
:root {
--left-coords: 100vw;
--top-coords: 0svh;
--top-spacing: calc(100svh - 200px - 1.5em);
--void-positioning: absolute;
}
body.home {
--left-coords: 50vw;
--top-coords: 40svh;
margin-block-start: var(--top-spacing);
}
body.home > header {
block-size: 200px;
}
}
@media (prefers-reduced-motion: reduce) {
:root {
--duration: 60s; /* Much slower animation */
}
}
* {
transition-property:
--text, --pink, --orange, --teal,
--color-1, --color-2, --color-3;
transition-duration: .3s;
}
body {
max-width: 720px;
min-height: 100svh;
margin: 2em min(10em, 5vw);
font-family: 'hobo', monospace;
background-color: var(--teal);
color: var(--text);
font-size: 20px;
background-image: radial-gradient(circle at var(--left-coords) var(--top-coords), var(--pink), var(--orange) 20vmin, transparent 50vmin, transparent);
background-attachment: var(--void-positioning);
a {
color: var(--text);
}
}
body > header {
display: flex;
flex-flow: column;
justify-content: flex-end;
gap: 1em;
margin-block-end: 5em;
h1, p { margin: 0; }
}
body > footer {
margin-block-start: 5em;
display: flex;
flex-flow: column;
gap: 2em;
.h-card {
display: grid;
grid-template-columns: 250px 1fr;
grid-auto-flow: dense;
gap: 1em;
text-align: left;
p { margin: 0; }
}
.u-photo {
width: 100%;
max-width: 300px;
grid-column: 1 / 2;
grid-row: 1 / span 2;
border-radius: 40px;
overflow: hidden;
}
}
@media (max-width: 800px) {
body > footer {
.h-card { grid-template-columns: 1fr; }
}
}