David Heinemeier Hansson
129 lines
2.8 KiB
CSS
129 lines
2.8 KiB
CSS
:root {
|
|
--color-canvas: white;
|
|
--color-ink: oklch(26% 0.05 264);
|
|
--color-accent: oklch(57.02% 0.1895 260.46);
|
|
|
|
--text-large: 6rem;
|
|
--text-medium: 2rem;
|
|
--text-normal: 1rem;
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
--color-canvas: oklch(20% 0.0195 232.58);
|
|
--color-ink: oklch(96.02% 0.0034 260);
|
|
--color-accent: oklch(74% 0.1293 256);
|
|
}
|
|
}
|
|
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
}
|
|
|
|
html {
|
|
font-size: 1.5rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-font-smoothing: antialiased;
|
|
-webkit-text-size-adjust: none;
|
|
align-items: center;
|
|
background-color: var(--color-canvas);
|
|
color: var(--color-ink);
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-family: system-ui;
|
|
font-size: var(--text-normal);
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
gap: 2rem;
|
|
line-height: 1.375;
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
padding-inline: 1rem;
|
|
justify-content: center;
|
|
text-align: center;
|
|
text-rendering: optimizeLegibility;
|
|
text-size-adjust: none;
|
|
|
|
/* Cool wavy striped lines */
|
|
&:before {
|
|
--mask:
|
|
radial-gradient(6px at 50% calc(100% + 3px), #0000 calc(99% - 2px), #000 calc(101% - 2px) 99%, #0000 101%) calc(50% - 8px) calc(50% - 3px + .5px)/16px 6px ,
|
|
radial-gradient(6px at 50% -3px, #0000 calc(99% - 2px), #000 calc(101% - 2px) 99%, #0000 101%) 50% calc(50% + 3px)/16px 6px ;
|
|
-webkit-mask: var(--mask);
|
|
mask: var(--mask);
|
|
background: var(--color-accent);
|
|
content: "";
|
|
inset: 0;
|
|
opacity: 0.15;
|
|
position: absolute;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
.error-page__stamp {
|
|
--padding: 1rem 2rem;
|
|
--stroke-width: 0.25rem;
|
|
|
|
align-items: center;
|
|
background-color: color-mix(in oklch, var(--color-canvas), transparent 50%);
|
|
background-color: var(--color-canvas);
|
|
border-radius: calc(var(--stroke-width) * 2);
|
|
border: calc(var(--stroke-width) * 1) dashed var(--color-accent);
|
|
color: var(--color-accent);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
line-height: 1.25;
|
|
max-inline-size: 36ch;
|
|
rotate: -5deg;
|
|
padding: var(--padding);
|
|
position: relative;
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--text-large);
|
|
font-weight: 900;
|
|
line-height: 1;
|
|
position: relative;
|
|
text-transform: uppercase;
|
|
|
|
@supports (-webkit-text-stroke: 1px black) {
|
|
-webkit-text-stroke: var(--stroke-width) var(--color-accent);
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
font-size: var(--text-normal);
|
|
font-weight: inherit;
|
|
}
|
|
|
|
hr {
|
|
inline-size: 100%;
|
|
border: 0;
|
|
border-block-start: calc(var(--stroke-width) / 2) solid currentcolor;
|
|
color: currentcolor;
|
|
margin: 1ch auto;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
line-height: 2rem;
|
|
display: inline-block;
|
|
padding-inline: 1ch;
|
|
border-radius: 99rem;
|
|
text-decoration: none;
|
|
|
|
span {
|
|
text-decoration: underline;
|
|
text-underline-offset: 0.25ch;
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
}
|