initial version of website

2026-07-22 05:26:19 +01:00
parent 0992e183aa
commit 4527246427
6 changed files with 124 additions and 0 deletions
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <title>atom.town</title>
+    <link rel="preconnect" href="https://rsms.me/">
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+    <link rel="stylesheet" href="reset.css">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="flex flex-col gap-4">
+        <p>hello, and welcome to atom.town. here, you will be at home.</p>
+        <div class="flex flex-col">
+            <a href="https://mail.atom.town" target="_blank" class="pop">webmail</a>
+            <a href="https://git.atom.town" target="_blank" class="pop">git</a>
+        </div>
+    </div>
+</body>
+</html>
@@ -0,0 +1,44 @@
+/* CSS reset (https://www.joshwcomeau.com/css/custom-css-reset) */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+*:not(dialog) {
+  margin: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    interpolate-size: allow-keywords;
+  }
+}
+
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+
+input, button, textarea, select {
+  font: inherit;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+p {
+  text-wrap: pretty;
+}
+h1, h2, h3, h4, h5, h6 {
+  text-wrap: balance;
+}
+
+#root, #__next {
+  isolation: isolate;
+}
+/* CSS reset */
@@ -0,0 +1,53 @@
+body {
+    height: 100vh;
+    background: url("clouds_test.png"), linear-gradient(180deg, hwb(224 30% 0%) 0%, hwb(226 90% 0%) 100%);
+    background-repeat: no-repeat;
+    background-size: cover, cover;
+    padding: 20px;
+}
+
+* {
+    font-family: Inter, sans-serif;
+    color: white
+}
+
+p, a {
+    font-size: 20px;
+    @media (max-width: 1024px) {
+        font-size: 30px
+    }
+    font-style: italic;
+}
+
+p {
+    font-weight: 300;
+}
+
+a {
+    font-weight: 400;
+}
+
+.flex {
+    display: flex;
+    width: fit-content;
+}
+
+.flex-col {
+    flex-direction: column;
+}
+
+:root { --space: 4px }
+.gap-1 { gap: calc(var(--space) * 1); }
+.gap-2 { gap: calc(var(--space) * 2); }
+.gap-3 { gap: calc(var(--space) * 3); }
+.gap-4 { gap: calc(var(--space) * 4); }
+
+.pop {
+    display: inline-block;
+    transform-origin: left center;
+    transition: transform 0.1s ease;
+}
+
+.pop:hover {
+    transform: scale(1.25);
+}