home: update website
This commit is contained in:
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
+7
-3
@@ -9,11 +9,15 @@
|
|||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="flex flex-col gap-4">
|
<img src="assets/logo_text.png" class="img" />
|
||||||
|
<div class="flex flex-col gap-8 mt-4">
|
||||||
<p>hello, and welcome to atom.town. here, you will be at home.</p>
|
<p>hello, and welcome to atom.town. here, you will be at home.</p>
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<a href="https://mail.atom.town" target="_blank" class="pop">webmail</a>
|
<a href="https://mail.atom.town" target="_blank" class="pop big heavy">webmail</a>
|
||||||
<a href="https://git.atom.town" target="_blank" class="pop">git</a>
|
<a href="https://git.atom.town" target="_blank" class="pop big heavy">git</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<a href="terms-privacy.html" class="pop big heavy">terms & privacy</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
+53
-22
@@ -1,46 +1,63 @@
|
|||||||
|
:root {
|
||||||
|
font-family: Inter, sans-serif;
|
||||||
|
font-feature-settings: 'liga' 1, 'calt' 1;
|
||||||
|
@supports (font-variation-settings: normal) {
|
||||||
|
font-family: InterVariable, sans-serif;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background: url("clouds_test.png"), linear-gradient(180deg, hwb(224 30% 0%) 0%, hwb(226 90% 0%) 100%);
|
background: url("assets/clouds.png"), linear-gradient(180deg, hwb(230 20% 0%) 0%, hwb(230 90% 0%) 110%);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover, cover;
|
background-size: cover, cover;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
font-family: Inter, sans-serif;
|
|
||||||
color: white
|
|
||||||
}
|
|
||||||
|
|
||||||
p, a {
|
|
||||||
font-size: 20px;
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
font-size: 30px
|
|
||||||
}
|
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
color: white;
|
||||||
|
|
||||||
p {
|
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
.heavy {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex {
|
.heavier {
|
||||||
display: flex;
|
font-weight: 500;
|
||||||
width: fit-content;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-col {
|
p, a, li, ul {
|
||||||
flex-direction: column;
|
font-size: 20px;
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:root { --space: 4px }
|
.big {
|
||||||
.gap-1 { gap: calc(var(--space) * 1); }
|
font-size: 24px;
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
font-size: 36px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* tailwind lite */
|
||||||
|
:root { --space: 4px; }
|
||||||
|
|
||||||
|
.flex { display: flex; width: fit-content; }
|
||||||
|
.flex-col { flex-direction: column; }
|
||||||
|
|
||||||
.gap-2 { gap: calc(var(--space) * 2); }
|
.gap-2 { gap: calc(var(--space) * 2); }
|
||||||
.gap-3 { gap: calc(var(--space) * 3); }
|
|
||||||
.gap-4 { gap: calc(var(--space) * 4); }
|
.gap-4 { gap: calc(var(--space) * 4); }
|
||||||
|
.gap-8 { gap: calc(var(--space) * 8); }
|
||||||
|
|
||||||
|
.mt-4 { margin-top: calc(var(--space) * 4); }
|
||||||
|
|
||||||
|
.max-w-160 { max-width: calc(var(--space) * 160) }
|
||||||
|
|
||||||
|
.self-start { align-self: flex-start; }
|
||||||
|
/* tailwind lite */
|
||||||
|
|
||||||
.pop {
|
.pop {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@@ -51,3 +68,17 @@ a {
|
|||||||
.pop:hover {
|
.pop:hover {
|
||||||
transform: scale(1.25);
|
transform: scale(1.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.img {
|
||||||
|
object-fit: contain;
|
||||||
|
align-self: flex-start;
|
||||||
|
max-height: 64px;
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
max-height: 96px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style-type: "» ";
|
||||||
|
padding-left: 1.2em;
|
||||||
|
}
|
||||||
|
|||||||
@@ -0,0 +1,34 @@
|
|||||||
|
<!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>
|
||||||
|
<img src="assets/logo_text.png" class="img" />
|
||||||
|
<div class="flex flex-col gap-8 mt-4 max-w-160">
|
||||||
|
<p>here you can learn some things</p>
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
<h2 class="big heavier">terms</h2>
|
||||||
|
<ul>
|
||||||
|
<li>the fitnessgram pacer test is a multistage aerobic capacity test</li>
|
||||||
|
<li>that progressively gets more difficult as it continues. the 20 meter pacer test</li>
|
||||||
|
<li>will begin in 30 seconds. line up at the start. the running speed starts slowly,</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
<h2 class="big heavier">privacy</h2>
|
||||||
|
<ul>
|
||||||
|
<li>but gets faster each minute after you hear this signal *boop*. a single lap should be completed</li>
|
||||||
|
<li>each time you hear this sound *ding*. remember to run in a straight line, and run as long as possible.</li>
|
||||||
|
<li>the second time you fail to complete a lap before the sound, your test is over. the test will begin on the word start. on your mark, get ready, start.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<a href="" onclick="history.back()" class="self-start pop heavy">← back</a>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user