static, scriptless homepage for my pds (pds.jeanmachine.dev)
refined mobile layout
+84
-17
+1
.gitignore
+1
.gitignore
···
1
+
.DS_Store
+41
assets/mobile-ascii.svg
+41
assets/mobile-ascii.svg
···
1
+
<?xml version="1.0" encoding="UTF-8"?>
2
+
<svg xmlns="http://www.w3.org/2000/svg" width="750" height="185">
3
+
<defs>
4
+
<linearGradient id="scan" x1="0" y1="0" x2="2250" y2="0" gradientUnits="userSpaceOnUse">
5
+
<stop class="stop-accent" offset="40%"/>
6
+
<stop class="stop-accent2" offset="47%"/>
7
+
<stop class="stop-accent2" offset="53%"/>
8
+
<stop class="stop-accent" offset="60%"/>
9
+
<animateTransform attributeName="gradientTransform" type="translate"
10
+
values="-1500,0;0,0;0,0"
11
+
keyTimes="0;0.5;1"
12
+
dur="4s"
13
+
repeatCount="indefinite"/>
14
+
</linearGradient>
15
+
</defs>
16
+
<style>
17
+
.stop-accent { stop-color: #d20f39; }
18
+
.stop-accent2 { stop-color: #dd7878; }
19
+
@media (prefers-color-scheme: dark) {
20
+
.stop-accent { stop-color: #e78284; }
21
+
.stop-accent2 { stop-color: #eebebe; }
22
+
}
23
+
.ascii {
24
+
font-family: 'Maple Mono', monospace;
25
+
font-size: 14px;
26
+
font-variant-ligatures: none;
27
+
font-feature-settings: "liga" 0, "calt" 0, "clig" 0, "dlig" 0;
28
+
fill: url(#scan);
29
+
}
30
+
</style>
31
+
<text class="ascii" xml:space="preserve">
32
+
<tspan x="12" y="30"> __</tspan>
33
+
<tspan x="12" dy="19"> ___ ___/ /__</tspan>
34
+
<tspan x="12" dy="19"> / _ \/ _ (_-<_</tspan>
35
+
<tspan x="12" dy="19"> / .__/\_,_/___(_) __ _ __</tspan>
36
+
<tspan x="12" dy="19">/_/ (_)__ ___ ____ __ _ ___ _____/ / (_)__ ___ ___/ /__ _ __</tspan>
37
+
<tspan x="12" dy="19"> / / -_) _ `/ _ \/ ' \/ _ `/ __/ _ \/ / _ \/ -_)/ _ / -_) |/ /</tspan>
38
+
<tspan x="12" dy="19"> __/ /\__/\_,_/_//_/_/_/_/\_,_/\__/_//_/_/_//_/\__(_)_,_/\__/|___/</tspan>
39
+
<tspan x="12" dy="19">|___/</tspan>
40
+
</text>
41
+
</svg>
+40
-15
index.css
+40
-15
index.css
···
19
19
--subtext: light-dark(#6c6f85, #b5bfe2);
20
20
--overlay: light-dark(#8c8fa1, #949cbb);
21
21
--accent: light-dark(#d20f39, #e78284);
22
+
--accent2: light-dark(#dd7878, #eebebe);
22
23
}
23
24
24
25
html,
···
49
50
}
50
51
51
52
.ascii {
52
-
color: var(--accent);
53
-
font-size: 13px;
54
53
font-variant-ligatures: none;
55
54
margin: 0;
56
55
}
57
56
58
-
.mobile-title {
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%;
59
78
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;
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
+
}
69
94
}
70
95
71
96
@media (max-width: 600px) {
72
-
.ascii {
97
+
.ascii-desktop {
73
98
display: none;
74
99
}
75
100
76
-
.mobile-title {
101
+
.ascii-mobile {
77
102
display: block;
78
103
}
79
104
80
105
header img {
81
-
max-height: 100px;
106
+
max-width: 20%;
82
107
}
83
108
}
84
109
+2
-2
index.html
+2
-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>
14
-
<pre class="ascii">
13
+
<pre class="ascii ascii-desktop">
15
14
__ _ __ _ __
16
15
___ ___/ /__ (_)__ ___ ____ __ _ ___ _____/ / (_)__ ___ ___/ /__ _ __
17
16
/ _ \/ _ (_-<_ / / -_) _ `/ _ \/ ' \/ _ `/ __/ _ \/ / _ \/ -_)/ _ / -_) |/ /
···
19
18
/_/ |___/
20
19
</pre
21
20
>
21
+
<img class="ascii ascii-mobile" src="assets/mobile-ascii.svg" />
22
22
</header>
23
23
<hr />
24
24