jeanmachine.dev
static, scriptless homepage for my pds (pds.jeanmachine.dev)
1@font-face {
2 font-family: "Maple Mono";
3 src: url("fonts/maplemono/MapleMono.ttf") format("truetype");
4 font-weight: normal;
5 font-style: normal;
6}
7
8@font-face {
9 font-family: "Maple Mono";
10 src: url("fonts/maplemono/MapleMono-Italic.ttf") format("truetype");
11 font-weight: normal;
12 font-style: italic;
13}
14
15:root {
16 color-scheme: light dark;
17 --bg: light-dark(#e6e9ef, #292c3c);
18 --text: light-dark(#4c4f69, #c6d0f5);
19 --subtext: light-dark(#6c6f85, #b5bfe2);
20 --overlay: light-dark(#8c8fa1, #949cbb);
21 --accent: light-dark(#d20f39, #e78284);
22 --accent2: light-dark(#dd7878, #eebebe);
23}
24
25html,
26body {
27 height: 100%;
28}
29
30body {
31 background: var(--bg);
32 color: var(--text);
33 font-family: "Maple Mono", monospace;
34 font-size: 14px;
35 margin: 5px;
36 margin-top: 13px;
37}
38
39header {
40 display: flex;
41 align-items: center;
42 width: 100%;
43}
44
45header img {
46 max-height: 125px;
47 width: auto;
48 flex-shrink: 0;
49 object-fit: contain;
50}
51
52.ascii {
53 font-variant-ligatures: none;
54 margin: 0;
55}
56
57.ascii-desktop {
58 font-size: 13px;
59 background: linear-gradient(
60 to right,
61 var(--accent) 40%,
62 var(--accent2) 47%,
63 var(--accent2) 53%,
64 var(--accent) 60%
65 );
66 background-size: 300% 100%;
67 background-position: 100% 0;
68 -webkit-background-clip: text;
69 background-clip: text;
70 -webkit-text-fill-color: transparent;
71 color: transparent;
72 animation: ascii-scan 4s linear infinite;
73}
74
75.ascii-mobile {
76 font-size: 10px;
77 max-width: 95%;
78 display: none;
79}
80
81@keyframes ascii-scan {
82 0% {
83 background-position: 100% 0;
84 }
85 50% {
86 background-position: 0% 0;
87 }
88 50.01% {
89 background-position: 100% 0;
90 }
91 100% {
92 background-position: 100% 0;
93 }
94}
95
96@media (max-width: 600px) {
97 .ascii-desktop {
98 display: none;
99 }
100
101 .ascii-mobile {
102 display: block;
103 }
104
105 header img {
106 max-width: 20%;
107 }
108}
109
110hr {
111 border: none;
112 border-top: 4px double var(--overlay);
113 overflow: visible;
114}
115
116.links {
117 margin-top: 1.2rem;
118}
119
120.link-row {
121 display: flex;
122 gap: 0;
123 line-height: 1.8;
124}
125
126.link-label {
127 color: var(--subtext);
128 font-style: italic;
129 min-width: 11ch;
130 text-align: right;
131 padding-right: 1ch;
132 flex-shrink: 0;
133}
134
135a {
136 color: var(--accent);
137 text-decoration: none;
138 transition: text-shadow 0.2s;
139}
140
141a:hover {
142 text-decoration: underline;
143}