atom/town
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home: css cleanup

Browse Source
This commit is contained in:
futile
2026-07-23 09:33:20 +01:00
parent 1098ba0c38
commit bba89d706a
3 changed files with 35 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
home/index.html
+5 -5
View File
@@ -10,15 +10,15 @@
<link rel="icon" type="image/png" href="assets/logo_icon.png" /> <link rel="icon" type="image/png" href="assets/logo_icon.png" />
</head> </head>
<body> <body>
<img src="assets/logo.png" class="img" /> <img src="assets/logo.png" class="logo" />
<div class="flex flex-col gap-8 mt-4"> <div class="flex flex-col gap-8 mt-4">
<p>hello, and welcome to atom.town. here, you will be at home.</p> <p class="font-light">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 big heavy">webmail</a> <a href="https://mail.atom.town" target="_blank" class="font-normal pop big">webmail</a>
<a href="https://git.atom.town" target="_blank" class="pop big heavy">git</a> <a href="https://git.atom.town" target="_blank" class="font-normal pop big">git</a>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<a href="terms-privacy.html" class="pop big heavy">terms & privacy</a> <a href="terms-privacy.html" class="font-normal pop big">terms & privacy</a>
</div> </div>
</div> </div>
</body> </body>
home/style.css
+19 -28
View File
@@ -17,32 +17,18 @@ body {
padding: 20px; padding: 20px;
} }
* { p, a, li, ul, h2 {
font-style: italic;
color: white; color: white;
font-weight: 300; font-style: italic;
}
.heavy {
font-weight: 400;
}
.heavier {
font-weight: 500;
}
p, a, li, ul {
font-size: 20px; font-size: 20px;
@media (max-width: 1024px) { @media (max-width: 1024px) {
font-size: 40px; font-size: 40px;
} }
} }
.big { ul {
font-size: 24px; list-style-type: "» ";
@media (max-width: 1024px) { padding-left: 1em;
font-size: 48px;
}
} }
/* tailwind lite */ /* tailwind lite */
@@ -57,18 +43,28 @@ p, a, li, ul {
.mt-4 { margin-top: calc(var(--space) * 4); } .mt-4 { margin-top: calc(var(--space) * 4); }
.self-start { align-self: flex-start; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-heavy { font-weight: 500; }
.max-w-md { .max-w-md {
max-width: calc(var(--space) * 160); max-width: calc(var(--space) * 160);
@media (max-width: 1024px) { @media (max-width: 1024px) {
max-width: calc(var(--space) * 320); max-width: calc(var(--space) * 320);
} }
} }
.self-start { align-self: flex-start; }
/* tailwind lite */ /* tailwind lite */
.big {
font-size: 24px;
@media (max-width: 1024px) {
font-size: 48px;
}
}
.pop { .pop {
display: inline-block;
transform-origin: left center; transform-origin: left center;
transition: transform 0.1s ease; transition: transform 0.1s ease;
} }
@@ -77,7 +73,7 @@ p, a, li, ul {
transform: scale(1.25); transform: scale(1.25);
} }
.img { .logo {
object-fit: contain; object-fit: contain;
align-self: flex-start; align-self: flex-start;
max-height: 64px; max-height: 64px;
@@ -85,8 +81,3 @@ p, a, li, ul {
max-height: 128px; max-height: 128px;
} }
} }
ul {
list-style-type: "» ";
padding-left: 1.2em;
}
home/terms-privacy.html
+11 -11
View File
@@ -10,26 +10,26 @@
<link rel="icon" type="image/png" href="assets/logo_icon.png" /> <link rel="icon" type="image/png" href="assets/logo_icon.png" />
</head> </head>
<body> <body>
<img src="assets/logo.png" class="img" /> <img src="assets/logo.png" class="logo" />
<div class="flex flex-col gap-8 mt-4 max-w-md"> <div class="flex flex-col gap-8 mt-4 max-w-md">
<p>here you can learn some things</p> <p class="font-light">here you can learn some things</p>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<h2 class="big heavier">terms</h2> <h2 class="font-heavy big">terms</h2>
<ul> <ul>
<li>the fitnessgram pacer test is a multistage aerobic capacity test</li> <li class="font-light">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 class="font-light">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> <li class="font-light">will begin in 30 seconds. line up at the start. the running speed starts slowly,</li>
</ul> </ul>
</div> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<h2 class="big heavier">privacy</h2> <h2 class="font-heavy big">privacy</h2>
<ul> <ul>
<li>but gets faster each minute after you hear this signal *boop*. a single lap should be completed</li> <li class="font-light">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 class="font-light">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> <li class="font-light">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> </ul>
</div> </div>
<a href="##" onclick="history.go(-1)" class="self-start pop heavy">← back</a> <a href="##" onclick="history.go(-1)" class="self-start font-normal pop">← back</a>
</div> </div>
</body> </body>
</html> </html>