less busy, back to basics
This commit is contained in:
Joshua Seigler
parent
c1c8e8a2e1
commit
31ad3ee1ea
6 changed files with 86 additions and 314 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 260 KiB |
BIN
assets/cloud.png
BIN
assets/cloud.png
Binary file not shown.
|
Before Width: | Height: | Size: 213 KiB |
339
assets/site.css
339
assets/site.css
|
|
@ -16,8 +16,9 @@
|
|||
body {
|
||||
--c-highlight: hsl(0 0% 100% / 87.5%);
|
||||
--c-dark: hsl(217 17% 21%);
|
||||
--c-accent: hsl(14 62% 53%);
|
||||
--c-light: #859cc4;
|
||||
--c-accent: white;
|
||||
/* --c-accent: hsl(14 62% 53%); */
|
||||
--c-body-background: hsl(0 0% 85%);
|
||||
--c-text-background-light: hsl(0 0% 95% / 60%);
|
||||
|
||||
--c-text-light: var(--c-highlight);
|
||||
|
|
@ -37,142 +38,42 @@ body {
|
|||
--s5: calc(var(--s4) * var(--ratio));
|
||||
--content-width: clamp(75vw, 40rem, 100vw - 3rem);
|
||||
--inset: calc(50vw - var(--content-width) / 2);
|
||||
--cloudyHeaderBottom: max(35vh, 10rem);
|
||||
background-size: 100% 80vh;
|
||||
background-position: top;
|
||||
background-repeat: no-repeat;
|
||||
background-color: var(--c-light);
|
||||
background-image: linear-gradient(to bottom, #4379ef, #859cc4);
|
||||
}
|
||||
body[data-theme="dark"] {
|
||||
background: var(--c-light);
|
||||
}
|
||||
|
||||
body[data-theme="dark"] {
|
||||
background-color: var(--c-body-background);
|
||||
}
|
||||
[data-theme="dark"] {
|
||||
--c-highlight: hsl(60 20% 60% / 50%);
|
||||
--c-highlight: hsl(60 20% 30% / 50%);
|
||||
--c-dark: hsl(217 9% 8%);
|
||||
--c-accent: hsl(220 20% 35%);
|
||||
--c-light: hsl(220 50% 10%);
|
||||
--c-body-background: hsl(220 50% 5%);
|
||||
|
||||
--c-text-background-light: hsl(220 40% 10% / 40%);
|
||||
--c-text-light: hsl(60 50% 86.67%);
|
||||
--c-text-dark: hsl(60 50% 86.67%);
|
||||
}
|
||||
|
||||
@media screen {
|
||||
.scene {
|
||||
--durationSeconds: 120;
|
||||
--duration: calc(var(--durationSeconds) * 1s);
|
||||
--viewPointDelta: min(
|
||||
1px * var(--scrollLengthPx, 0),
|
||||
var(--cloudyHeaderBottom)
|
||||
);
|
||||
--travelDistance: 90vh;
|
||||
z-index: -2;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100lvh;
|
||||
overflow: hidden;
|
||||
perspective: calc(0.25 * var(--cloudyHeaderBottom) + 0.75 * 35vmax);
|
||||
perspective-origin: 50vw calc(15vh + 1.2 * var(--viewPointDelta));
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.sky {
|
||||
transform-style: preserve-3d;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
body[data-theme="auto"] {
|
||||
background-color: var(--c-body-background);
|
||||
}
|
||||
[data-theme="auto"] {
|
||||
--c-highlight: hsl(60 20% 30% / 50%);
|
||||
--c-dark: hsl(217 9% 8%);
|
||||
--c-accent: hsl(220 20% 35%);
|
||||
--c-body-background: hsl(220 50% 5%);
|
||||
|
||||
.cloud {
|
||||
--height: 90vh;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
left: -205vw;
|
||||
right: -205vw;
|
||||
top: calc(8vh - var(--viewPointDelta));
|
||||
height: var(--height);
|
||||
background-image: url("/cloud.png");
|
||||
background-size: auto 100%;
|
||||
background-repeat: repeat-x;
|
||||
background-position: calc(50% + cos(230 * var(--n)) * var(--height)) 50%;
|
||||
animation-name: zoom;
|
||||
animation-duration: var(--duration);
|
||||
animation-timing-function: steps(calc(var(--durationSeconds) * 30));
|
||||
animation-delay: calc(-0.1 * var(--duration) * var(--n));
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
& {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
[data-theme="dark"] & {
|
||||
background-image: url("/cloud-night.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen {
|
||||
#brand {
|
||||
position: absolute;
|
||||
left: var(--inset);
|
||||
right: var(--inset);
|
||||
padding: 0.5rem;
|
||||
bottom: calc(-1 * var(--cloudyHeaderBottom));
|
||||
transform: translateY(calc(-1 * var(--viewPointDelta)));
|
||||
will-change: translateY;
|
||||
}
|
||||
[data-theme="dark"] #brand > * {
|
||||
text-shadow: 0 0 0.5em currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoom {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(
|
||||
0,
|
||||
calc(4 * var(--viewPointDelta)),
|
||||
calc(-0.66667 * var(--travelDistance))
|
||||
);
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
56.6% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
66.66667% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
76.6% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate3d(
|
||||
0,
|
||||
calc(-1 * var(--viewPointDelta) + calc(var(--cloudyHeaderBottom) - 35vh)),
|
||||
calc(0.33333 * var(--travelDistance))
|
||||
);
|
||||
--c-text-background-light: hsl(220 40% 10% / 40%);
|
||||
--c-text-light: hsl(60 50% 86.67%);
|
||||
--c-text-dark: hsl(60 50% 86.67%);
|
||||
}
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--c-accent);
|
||||
color: var(--c-text-light);
|
||||
background: var(--c-highlight);
|
||||
color: var(--c-text-dark);
|
||||
}
|
||||
|
||||
*,
|
||||
|
|
@ -182,7 +83,6 @@ body[data-theme="dark"] {
|
|||
font-family: inherit;
|
||||
text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
|
||||
text-decoration-thickness: 0.1rem;
|
||||
transition: color ease 0.1s;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -194,92 +94,26 @@ body {
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: Inter, sans-serif;
|
||||
background-color: var(--c-light);
|
||||
background-color: var(--c-body-background);
|
||||
color: var(--c-text-dark);
|
||||
}
|
||||
|
||||
@media screen {
|
||||
body {
|
||||
border: 0.5rem solid var(--c-accent);
|
||||
&::before {
|
||||
content: "";
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
inset: -0.5rem;
|
||||
bottom: calc(1px - 0.5rem);
|
||||
border-radius: 1.3rem 1.3rem 1rem 1rem;
|
||||
border: 0.5rem solid var(--c-accent);
|
||||
outline: 0.5rem solid var(--c-accent);
|
||||
}
|
||||
}
|
||||
body > footer {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: var(--c-accent);
|
||||
color: var(--c-text-light);
|
||||
padding: 0 1ch 0;
|
||||
border-radius: 0.5rem 0.5rem 0 0;
|
||||
}
|
||||
body > footer::before {
|
||||
content: "";
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
height: calc(1rem - 1px);
|
||||
width: 1rem;
|
||||
margin: 0 0 -0.5rem -0.5rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
bottom: 1px;
|
||||
border: 0.5rem solid var(--c-accent);
|
||||
left: 100%;
|
||||
border-width: 0 0 0.5rem 0.5rem;
|
||||
}
|
||||
body > footer::after {
|
||||
content: "";
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
height: calc(1rem - 1px);
|
||||
width: 1rem;
|
||||
margin: 0 -0.5rem -0.5rem 0;
|
||||
border-bottom-right-radius: 1rem;
|
||||
bottom: 1px;
|
||||
border: 0.5rem solid var(--c-accent);
|
||||
right: 100%;
|
||||
border-width: 0 0.5rem 0.5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
a[href] {
|
||||
text-decoration-line: underline;
|
||||
box-decoration-break: clone;
|
||||
}
|
||||
a[href]:hover,
|
||||
a[href]:focus-visible,
|
||||
label:hover,
|
||||
label:focus-visible,
|
||||
label:has(input:focus-visible) {
|
||||
text-decoration-color: var(--c-accent);
|
||||
}
|
||||
|
||||
main {
|
||||
position: relative;
|
||||
@media screen {
|
||||
margin-top: var(--cloudyHeaderBottom);
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -2;
|
||||
top: -1rem;
|
||||
bottom: -1rem;
|
||||
left: calc(var(--inset) - 1rem);
|
||||
right: calc(var(--inset) - 1rem);
|
||||
border-radius: 1rem;
|
||||
background-color: var(--c-text-background-light);
|
||||
}
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
label:has(input:focus-visible),
|
||||
.nav-toggle-button:has(input[type="radio"]:checked) {
|
||||
background-color: var(--c-accent);
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 0 0.2rem var(--c-accent);
|
||||
}
|
||||
|
||||
main p img {
|
||||
|
|
@ -300,16 +134,13 @@ section {
|
|||
}
|
||||
|
||||
.footnotes-sep {
|
||||
margin-top: 4rem;
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
margin: 4rem -1rem -4rem;
|
||||
height: 4.1rem;
|
||||
border: none;
|
||||
height: 0.1rem;
|
||||
background-image: repeating-linear-gradient(
|
||||
to right,
|
||||
var(--c-accent),
|
||||
var(--c-accent) 0.5em,
|
||||
transparent 0.5em,
|
||||
transparent 1em
|
||||
);
|
||||
background-image: radial-gradient(ellipse farthest-side at 50% 0%, var(--c-highlight), transparent);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@keyframes ping {
|
||||
|
|
@ -352,9 +183,21 @@ p {
|
|||
}
|
||||
}
|
||||
blockquote {
|
||||
position: relative;
|
||||
margin: 1lh 0;
|
||||
padding: 0 1em;
|
||||
border-left: 0.2rem solid var(--c-accent);
|
||||
border-left: 1px solid var(--c-accent);
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: -0.5lh;
|
||||
bottom: -0.5lh;
|
||||
left: -0.1em;
|
||||
width: 10rem;
|
||||
background: radial-gradient(ellipse farthest-side at 0% 50%, var(--c-highlight), transparent);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
sup {
|
||||
|
|
@ -375,6 +218,12 @@ body > header > nav {
|
|||
flex-wrap: wrap;
|
||||
gap: 1ch;
|
||||
}
|
||||
.nav-categories > a {
|
||||
white-space: nowrap;
|
||||
& + a {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
.nav-toggles {
|
||||
margin-left: auto;
|
||||
font-size: var(--s-1);
|
||||
|
|
@ -386,7 +235,7 @@ body > header > nav {
|
|||
body {
|
||||
--c-highlight: white --c-dark: white;
|
||||
--c-accent: black;
|
||||
--c-light: white;
|
||||
--c-body-background: white;
|
||||
|
||||
--c-text-light: black;
|
||||
--c-text-dark: black;
|
||||
|
|
@ -414,6 +263,7 @@ body > footer {
|
|||
text-align: center;
|
||||
font-size: var(--s-1);
|
||||
margin: auto var(--inset) 0 auto;
|
||||
padding-top: 4rem;
|
||||
}
|
||||
|
||||
.header-meta {
|
||||
|
|
@ -427,46 +277,6 @@ body > footer {
|
|||
}
|
||||
}
|
||||
|
||||
.nav-categories {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 1ch;
|
||||
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: var(--c-accent);
|
||||
color: var(--c-text-light);
|
||||
padding: 0 1ch 0.25rem;
|
||||
border-radius: 0 0 0.5rem 0.5rem;
|
||||
&::before {
|
||||
content: "";
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
height: calc(1rem - 1px);
|
||||
width: 1rem;
|
||||
margin: -0.5rem 0 0 -0.5rem;
|
||||
border-top-left-radius: 1rem;
|
||||
top: 0;
|
||||
border: 0.5rem solid var(--c-accent);
|
||||
left: 100%;
|
||||
border-width: 0.5rem 0 0 0.5rem;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
height: calc(1rem - 1px);
|
||||
width: 1rem;
|
||||
margin: -0.5rem -0.5rem 0 0;
|
||||
border-top-right-radius: 1rem;
|
||||
top: 0;
|
||||
border: 0.5rem solid var(--c-accent);
|
||||
right: 100%;
|
||||
border-width: 0.5rem 0.5rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
text-decoration-line: underline;
|
||||
|
|
@ -478,23 +288,9 @@ label {
|
|||
}
|
||||
.nav-toggle-button {
|
||||
margin-left: 0.5ch;
|
||||
margin-right: 0.5ch;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
&:has(input[type="radio"]:checked) {
|
||||
padding-inline: 0.25rem;
|
||||
color: var(--c-text-dark);
|
||||
&::before {
|
||||
content: "";
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: -0.25rem;
|
||||
right: 0;
|
||||
bottom: -0.25rem;
|
||||
left: 0;
|
||||
border-radius: 0.25rem;
|
||||
background-color: var(--c-highlight);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-language="aurebesh"] {
|
||||
|
|
@ -512,12 +308,25 @@ h1,
|
|||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
position: relative;
|
||||
font-weight: 700;
|
||||
margin: 1rem calc(-0.5rem - var(--inset)) 0;
|
||||
padding: 0 calc(0.5rem + var(--inset));
|
||||
text-shadow: 0 0 0.2em var(--c-highlight);
|
||||
&:hover .header-anchor {
|
||||
opacity: 1;
|
||||
}
|
||||
&::after {
|
||||
opacity: 0.5;
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
bottom: 0;
|
||||
left: -4rem;
|
||||
height: 4em;
|
||||
width: 30rem;
|
||||
max-width: 100%;
|
||||
/* outline: 1px solid red; */
|
||||
background: radial-gradient(ellipse farthest-side at 50% 100%, var(--c-highlight), transparent);
|
||||
}
|
||||
}
|
||||
main {
|
||||
h1,
|
||||
|
|
@ -525,12 +334,6 @@ main {
|
|||
h3,
|
||||
h4 {
|
||||
clear: both;
|
||||
background-image: linear-gradient(
|
||||
50deg,
|
||||
var(--c-highlight) 0%,
|
||||
var(--c-highlight) calc(var(--inset) * 0.25),
|
||||
transparent calc(var(--inset) + 12rem)
|
||||
);
|
||||
margin-bottom: 0.25lh;
|
||||
}
|
||||
padding: 0 var(--inset);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue