168 lines
2.5 KiB
CSS
168 lines
2.5 KiB
CSS
/* CSS Reset based on https://piccalil.li/blog/a-more-modern-css-reset/ */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
/* Kill all default margins and paddings */
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
-moz-text-size-adjust: none;
|
|
-webkit-text-size-adjust: none;
|
|
text-size-adjust: none;
|
|
}
|
|
|
|
:is(ul, ol)[role="list"] {
|
|
list-style: none;
|
|
}
|
|
|
|
h1, h2, h3, h4, button, input, label {
|
|
line-height: 1.1;
|
|
}
|
|
|
|
img, svg, picture {
|
|
max-width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
input, button, textarea, select {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
}
|
|
|
|
textarea:not([rows]) {
|
|
min-height: 10em;
|
|
}
|
|
|
|
:target {
|
|
scroll-margin-block: 2.5em;
|
|
}
|
|
|
|
/* Overall styling */
|
|
html {
|
|
color-scheme: light dark;
|
|
font-family: sans-serif;
|
|
overflow-wrap: break-word;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
hgroup :is(h1, h2, h3, h4) {
|
|
margin-block-start: 0;
|
|
margin-block-end: 0.1em;
|
|
}
|
|
hgroup p {
|
|
font-style: italic;
|
|
}
|
|
|
|
h1, h2, h3, h4 {
|
|
margin-block-start: 1.25em;
|
|
margin-block-end: 0.5em;
|
|
}
|
|
|
|
:is(hgroup, p, blockquote, ol, ul, li) + :is(hgroup, blockquote, p, ol, ul, li) {
|
|
margin-block-start: var(--block-space, 1em);
|
|
}
|
|
.tight {
|
|
--block-space: 0.35em;
|
|
}
|
|
|
|
blockquote {
|
|
padding-inline: 1.25em;
|
|
}
|
|
blockquote::before {
|
|
content: "“";
|
|
}
|
|
blockquote::after {
|
|
content: "”";
|
|
}
|
|
|
|
:is(ol, ul):not([role]) {
|
|
padding-inline-start: 1.25em;
|
|
}
|
|
|
|
/* 3d viewport */
|
|
.in3d {
|
|
transform-style: preserve-3d;
|
|
}
|
|
.viewport {
|
|
pointer-events: none;
|
|
perspective: 300vmax;
|
|
}
|
|
.viewport * {
|
|
pointer-events: initial;
|
|
}
|
|
|
|
/* Base Page Layout */
|
|
body {
|
|
max-width: 50rem;
|
|
padding-inline: 0.5em;
|
|
padding-block-end: 2em;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.header {
|
|
padding-block: 1em;
|
|
}
|
|
|
|
.hero {
|
|
height: 30em;
|
|
background-color: grey;
|
|
}
|
|
|
|
/* about */
|
|
.author {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
align-items: center;
|
|
gap: 1em;
|
|
margin-block: 1em;
|
|
}
|
|
.author p {
|
|
margin-block-end: 0;
|
|
}
|
|
|
|
/* links */
|
|
.no-break {
|
|
display: inline-block;
|
|
max-width: 100%;
|
|
}
|
|
.link {
|
|
background-color: color-mix(in oklab, Canvas 90%, white);
|
|
padding: 0.5em;
|
|
border-radius: 0.5em;
|
|
}
|
|
.link>* {
|
|
--block-space: 0.5em;
|
|
}
|
|
|
|
/* sandbox */
|
|
.sandbox-inset-3d {
|
|
contain: paint;
|
|
background: black;
|
|
}
|
|
.sandbox-inset-3d .content {
|
|
background: grey;
|
|
transform: translateZ(-10rem);
|
|
padding: 1rem 1rem;
|
|
width: 80%;
|
|
margin-inline: auto;
|
|
}
|
|
.sandbox-inset-3d div:where(.floor, .ceiling) {
|
|
position: absolute;
|
|
inset-inline: 0;
|
|
height: 20rem;
|
|
}
|
|
.sandbox-inset-3d .floor {
|
|
bottom: 0;
|
|
background: blue;
|
|
transform: rotateX(90deg);
|
|
transform-origin: 0 100%;
|
|
}
|
|
.sandbox-inset-3d .ceiling {
|
|
top: 0;
|
|
background: green;
|
|
transform: rotateX(-90deg);
|
|
transform-origin: 0 0;
|
|
}
|