html

webassets/css/fonts.css

@@ -0,0 +1,20 @@
+@font-face { font-display: swap; font-family: 'MonaspaceArgon';     font-weight: bold;     font-style: normal;    src: url('/fonts/MonaspaceArgon-Bold.woff')          format('woff2')  }
+@font-face { font-display: swap; font-family: 'MonaspaceArgon';     font-weight: bold;     font-style: italic;    src: url('/fonts/MonaspaceArgon-BoldItalic.woff')    format('woff2')  }
+@font-face { font-display: swap; font-family: 'MonaspaceArgon';     font-weight: normal;   font-style: italic;    src: url('/fonts/MonaspaceArgon-Italic.woff')        format('woff2')  }
+@font-face { font-display: swap; font-family: 'MonaspaceArgon';     font-weight: normal;   font-style: normal;    src: url('/fonts/MonaspaceArgon-Regular.woff')       format('woff2')  }
+@font-face { font-display: swap; font-family: 'MonaspaceKrypton';   font-weight: bold;     font-style: normal;    src: url('/fonts/MonaspaceKrypton-Bold.woff')        format('woff2')  }
+@font-face { font-display: swap; font-family: 'MonaspaceKrypton';   font-weight: bold;     font-style: italic;    src: url('/fonts/MonaspaceKrypton-BoldItalic.woff')  format('woff2')  }
+@font-face { font-display: swap; font-family: 'MonaspaceKrypton';   font-weight: normal;   font-style: italic;    src: url('/fonts/MonaspaceKrypton-Italic.woff')      format('woff2')  }
+@font-face { font-display: swap; font-family: 'MonaspaceKrypton';   font-weight: normal;   font-style: normal;    src: url('/fonts/MonaspaceKrypton-Regular.woff')     format('woff2')  }
+@font-face { font-display: swap; font-family: 'MonaspaceNeon';      font-weight: bold;     font-style: normal;    src: url('/fonts/MonaspaceNeon-Bold.woff')           format('woff2')  }
+@font-face { font-display: swap; font-family: 'MonaspaceNeon';      font-weight: bold;     font-style: italic;    src: url('/fonts/MonaspaceNeon-BoldItalic.woff')     format('woff2')  }
+@font-face { font-display: swap; font-family: 'MonaspaceNeon';      font-weight: normal;   font-style: italic;    src: url('/fonts/MonaspaceNeon-Italic.woff')         format('woff2')  }
+@font-face { font-display: swap; font-family: 'MonaspaceNeon';      font-weight: normal;   font-style: normal;    src: url('/fonts/MonaspaceNeon-Regular.woff')        format('woff2')  }
+@font-face { font-display: swap; font-family: 'MonaspaceRadon';     font-weight: bold;     font-style: normal;    src: url('/fonts/MonaspaceRadon-Bold.woff')          format('woff2')  }
+@font-face { font-display: swap; font-family: 'MonaspaceRadon';     font-weight: bold;     font-style: italic;    src: url('/fonts/MonaspaceRadon-BoldItalic.woff')    format('woff2')  }
+@font-face { font-display: swap; font-family: 'MonaspaceRadon';     font-weight: normal;   font-style: italic;    src: url('/fonts/MonaspaceRadon-Italic.woff')        format('woff2')  }
+@font-face { font-display: swap; font-family: 'MonaspaceRadon';     font-weight: normal;   font-style: normal;    src: url('/fonts/MonaspaceRadon-Regular.woff')       format('woff2')  }
+@font-face { font-display: swap; font-family: 'MonaspaceXenon';     font-weight: bold;     font-style: normal;    src: url('/fonts/MonaspaceXenon-Bold.woff')          format('woff2')  }
+@font-face { font-display: swap; font-family: 'MonaspaceXenon';     font-weight: bold;     font-style: italic;    src: url('/fonts/MonaspaceXenon-BoldItalic.woff')    format('woff2')  }
+@font-face { font-display: swap; font-family: 'MonaspaceXenon';     font-weight: normal;   font-style: italic;    src: url('/fonts/MonaspaceXenon-Italic.woff')        format('woff2')  }
+@font-face { font-display: swap; font-family: 'MonaspaceXenon';     font-weight: normal;   font-style: normal;    src: url('/fonts/MonaspaceXenon-Regular.woff')       format('woff2')  }

webassets/css/reset.css

@@ -0,0 +1,51 @@
+
+
+/* https://meyerweb.com/eric/tools/css/reset/ */
+
+
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+/*
+  2. Remove default margin
+*/
+* {
+    margin: 0;
+}
+/*
+  Typographic tweaks!
+  3. Add accessible line-height
+  4. Improve text rendering
+*/
+body {
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+}
+/*
+  5. Improve media defaults
+*/
+img, picture, video, canvas, svg {
+    display: block;
+    max-width: 100%;
+}
+/*
+  6. Remove built-in form typography styles
+*/
+input, button, textarea, select {
+    font: inherit;
+}
+/*
+  7. Avoid text overflows
+*/
+p, h1, h2, h3, h4, h5, h6 {
+    overflow-wrap: break-word;
+}
+/*
+  8. Create a root stacking context
+*/
+#root, #__next {
+    isolation: isolate;
+}

webassets/css/styles.css

@@ -0,0 +1,55 @@
+
+* {
+    font-family: 'MonaspaceXenon';
+}
+
+html, body {
+    width: 100%;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+
+    margin: 1rem;
+}
+
+h1 {
+    margin-bottom: 1rem;
+}
+
+#maincontent {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+
+    padding: 0 1rem;
+}
+
+.server {
+    background-color: #CCC;
+    text-align: center;
+    padding: 2px 0.5rem;
+
+    color: black;
+    text-decoration: none;
+
+    border-radius: 6px;
+    border: 1px solid #888;
+
+    box-shadow: 0 0 4px #888;
+
+    transition: all 0.2s;
+}
+
+.server:hover {
+    box-shadow: 0 0 4px #000;
+    background-color: #AAA;
+    color: #00F;
+}
+