Hornwitser
e62b947c42
Prefer breaking words instead of overflowing the containers they are inside of. This prevents the site from scrolling to the right on extraordinarily narrow screens.
141 lines
2.1 KiB
CSS
141 lines
2.1 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;
|
|
}
|
|
|
|
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 h1 {
|
|
margin-bottom: 0.1em;
|
|
}
|
|
hgroup p {
|
|
font-style: italic;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
h1, h2, h3, h4 {
|
|
margin-block-start: 1.25em;
|
|
margin-block-end: 0.5em;
|
|
}
|
|
|
|
:is(p, ol, ul) + :is(p, ol, ul) {
|
|
padding-block-start: 1em;
|
|
}
|
|
|
|
ol, ul {
|
|
padding-inline-start: 1.25em;
|
|
}
|
|
|
|
/* 3d viewport */
|
|
.in3d {
|
|
transform-style: preserve-3d;
|
|
}
|
|
.viewport {
|
|
pointer-events: none;
|
|
perspective: 300vmax;
|
|
perspective-origin: 50% var(--y-offset);
|
|
}
|
|
.viewport * {
|
|
pointer-events: initial;
|
|
}
|
|
|
|
/* Base Page Layout */
|
|
body {
|
|
max-width: 50rem;
|
|
padding: 0;
|
|
margin-block: 0;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.header {
|
|
padding-block: 1em;
|
|
}
|
|
|
|
.hero {
|
|
height: 30em;
|
|
background-color: grey;
|
|
}
|
|
|
|
/* index */
|
|
.author {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
align-items: center;
|
|
gap: 1em;
|
|
margin-block: 1em;
|
|
}
|
|
.author h1 {
|
|
margin-block-start: 0;
|
|
}
|
|
.author p {
|
|
margin-block-end: 0;
|
|
}
|
|
|
|
/* 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;
|
|
}
|