static, scriptless homepage for my pds (pds.jeanmachine.dev)
mobile compatibility changes
+36
-1
+34
-1
index.css
+34
-1
index.css
···
32
32
font-family: "Maple Mono", monospace;
33
33
font-size: 14px;
34
34
margin: 5px;
35
+
margin-top: 13px;
35
36
}
36
37
37
38
header {
38
39
display: flex;
39
40
align-items: center;
40
41
width: 100%;
41
-
border-bottom: 1px solid var(--overlay);
42
42
}
43
43
44
44
header img {
···
53
53
font-size: 13px;
54
54
font-style: initial;
55
55
margin: 0;
56
+
}
57
+
58
+
.mobile-title {
59
+
display: none;
60
+
color: var(--bg);
61
+
text-decoration: underline;
62
+
font-style: italic;
63
+
text-shadow:
64
+
-1px -1px 0 var(--accent),
65
+
1px -1px 0 var(--accent),
66
+
-1px 1px 0 var(--accent),
67
+
1px 1px 0 var(--accent);
68
+
margin: 0;
69
+
}
70
+
71
+
@media (max-width: 600px) {
72
+
.ascii {
73
+
display: none;
74
+
}
75
+
76
+
.mobile-title {
77
+
display: block;
78
+
}
79
+
80
+
header img {
81
+
max-height: 100px;
82
+
}
83
+
}
84
+
85
+
hr {
86
+
border: none;
87
+
border-top: 4px double var(--overlay);
88
+
overflow: visible;
56
89
}
57
90
58
91
.links {
+2
index.html
+2
index.html
···
10
10
<body>
11
11
<header>
12
12
<img src="assets/logo.svg" alt="logo" />
13
+
<h1 class="mobile-title">pds.<wbr />jeanmachine.dev</h1>
13
14
<pre class="ascii">
14
15
__ _ __ _ __
15
16
___ ___/ /__ (_)__ ___ ____ __ _ ___ _____/ / (_)__ ___ ___/ /__ _ __
···
19
20
</pre
20
21
>
21
22
</header>
23
+
<hr />
22
24
23
25
<p style="font-style: italic">
24
26
This is an AT Protocol Personal Data Server (aka, an atproto PDS)