Simplify the error handling

Just use normal HTML + static CSS
2025-10-29 17:39:50 +01:00
parent 711c87e0e1
commit 7bebea07b4
15 changed files with 234 additions and 220 deletions
@@ -0,0 +1,128 @@
+: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);
+  }
+}