eti.tf
everything ✶
i.want.to.be.foreveryou.ng
1---
2import Head from "@/components/head.astro";
3import List from "@/components/list.astro";
4import Socials from "@/components/socials.astro";
5import "minireset.css";
6import "@fontsource/special-gothic";
7---
8
9<html lang="en">
10 <Head />
11 <body>
12 <h1 class="title">
13 everything so far<code>$ ls /Users/eti/Desktop/**</code>
14 </h1>
15 <List />
16 <div class="footer">
17 <Socials />
18 <!-- <span class="footer-author">eti / sds</span> -->
19 <span class="footer-timestamp"
20 >generated on {new Date().toLocaleDateString("en-FR")} at
21 {new Date().toLocaleTimeString("en-FR")}
22 </span>
23 </div>
24 </body>
25</html>
26
27<style is:global>
28 html {
29 font-family: "Special Gothic", sans-serif;
30 display: flex;
31 padding: 12px;
32 min-height: 100vh;
33 min-height: 100dvh;
34 min-height: -webkit-fill-available;
35 }
36
37 body {
38 display: flex;
39 flex-direction: column;
40 width: 500px;
41 gap: 12px;
42 }
43
44 a {
45 color: blue;
46
47 &:visited {
48 color: darkblue;
49 }
50
51 &:hover {
52 text-decoration: dotted underline;
53 }
54 }
55
56 .title {
57 display: inline-flex;
58 justify-content: space-between;
59 align-items: center;
60 }
61
62 .footer {
63 height: 100%;
64 max-height: -webkit-fill-available;
65 display: flex;
66 flex-direction: column;
67 justify-content: end;
68 align-items: end;
69 }
70
71 @media screen and (min-width: 700px) {
72 .footer {
73 height: inherit;
74 flex-direction: row;
75 justify-content: space-between;
76 }
77
78 body {
79 width: 600px;
80 }
81 }
82
83 @media screen and (min-width: 1000px) {
84 body {
85 width: 700px;
86 }
87 }
88</style>