Skip to content

Commit c8334c5

Browse files
reedspoolreedspool
committed
Retro-futurism/CRT concept personalization with Tim L. E.
1 parent d1399f1 commit c8334c5

File tree

1 file changed

+190
-0
lines changed

1 file changed

+190
-0
lines changed

‎public/personalizations/retro-futurism.html

+190
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
<style>
2+
@import url("https://fonts.googleapis.com/css2?family=Orbitron:[email protected]&display=swap");
3+
4+
:root {
5+
/* Dark green */
6+
--background-gradient-outer: hsl(105deg 9.3% 16.86% / 90%);
7+
/* Lighter green */
8+
--background-gradient-inner: hsl(105deg 13.33% 23.53% / 90%);
9+
10+
--soft-white: #dbdbdb;
11+
--neonish-green: #51ca30;
12+
color: var(--soft-white);
13+
}
14+
15+
a {
16+
color: var(--neonish-green);
17+
}
18+
19+
html {
20+
/* https://fonts.google.com/specimen/Orbitron */
21+
font-family: "Orbitron", sans-serif;
22+
font-optical-sizing: auto;
23+
font-weight: 400;
24+
font-style: normal;
25+
}
26+
27+
main:before {
28+
content: "";
29+
z-index: -1;
30+
position: fixed;
31+
inset: 0;
32+
background: radial-gradient(
33+
var(--background-gradient-inner),
34+
var(--background-gradient-outer)
35+
);
36+
}
37+
38+
main:after {
39+
content: "";
40+
position: fixed;
41+
inset: 0;
42+
background: repeating-linear-gradient(
43+
0deg,
44+
rgba(0, 0, 0, 0.15),
45+
rgba(0, 0, 0, 0.15) 1px,
46+
transparent 1px,
47+
transparent 2px
48+
);
49+
pointer-events: none;
50+
}
51+
52+
h1,
53+
h2,
54+
h3,
55+
h4,
56+
h5,
57+
h6 {
58+
animation: textShadow 2.6s infinite;
59+
}
60+
61+
/* From https://aleclownes.com/2017/02/01/crt-display.html */
62+
@keyframes textShadow {
63+
0% {
64+
text-shadow:
65+
0.4389924193300864px 0 1px rgba(0, 30, 255, 0.5),
66+
-0.4389924193300864px 0 1px rgba(255, 0, 80, 0.3),
67+
0 0 3px;
68+
}
69+
5% {
70+
text-shadow:
71+
2.7928974010788217px 0 1px rgba(0, 30, 255, 0.5),
72+
-2.7928974010788217px 0 1px rgba(255, 0, 80, 0.3),
73+
0 0 3px;
74+
}
75+
10% {
76+
text-shadow:
77+
0.02956275843481219px 0 1px rgba(0, 30, 255, 0.5),
78+
-0.02956275843481219px 0 1px rgba(255, 0, 80, 0.3),
79+
0 0 3px;
80+
}
81+
15% {
82+
text-shadow:
83+
0.40218538552878136px 0 1px rgba(0, 30, 255, 0.5),
84+
-0.40218538552878136px 0 1px rgba(255, 0, 80, 0.3),
85+
0 0 3px;
86+
}
87+
20% {
88+
text-shadow:
89+
3.4794037899852017px 0 1px rgba(0, 30, 255, 0.5),
90+
-3.4794037899852017px 0 1px rgba(255, 0, 80, 0.3),
91+
0 0 3px;
92+
}
93+
25% {
94+
text-shadow:
95+
1.6125630401149584px 0 1px rgba(0, 30, 255, 0.5),
96+
-1.6125630401149584px 0 1px rgba(255, 0, 80, 0.3),
97+
0 0 3px;
98+
}
99+
30% {
100+
text-shadow:
101+
0.7015590085143956px 0 1px rgba(0, 30, 255, 0.5),
102+
-0.7015590085143956px 0 1px rgba(255, 0, 80, 0.3),
103+
0 0 3px;
104+
}
105+
35% {
106+
text-shadow:
107+
3.896914047650351px 0 1px rgba(0, 30, 255, 0.5),
108+
-3.896914047650351px 0 1px rgba(255, 0, 80, 0.3),
109+
0 0 3px;
110+
}
111+
40% {
112+
text-shadow:
113+
3.870905614848819px 0 1px rgba(0, 30, 255, 0.5),
114+
-3.870905614848819px 0 1px rgba(255, 0, 80, 0.3),
115+
0 0 3px;
116+
}
117+
45% {
118+
text-shadow:
119+
2.231056963361899px 0 1px rgba(0, 30, 255, 0.5),
120+
-2.231056963361899px 0 1px rgba(255, 0, 80, 0.3),
121+
0 0 3px;
122+
}
123+
50% {
124+
text-shadow:
125+
0.08084290417898504px 0 1px rgba(0, 30, 255, 0.5),
126+
-0.08084290417898504px 0 1px rgba(255, 0, 80, 0.3),
127+
0 0 3px;
128+
}
129+
55% {
130+
text-shadow:
131+
2.3758461067427543px 0 1px rgba(0, 30, 255, 0.5),
132+
-2.3758461067427543px 0 1px rgba(255, 0, 80, 0.3),
133+
0 0 3px;
134+
}
135+
60% {
136+
text-shadow:
137+
2.202193051050636px 0 1px rgba(0, 30, 255, 0.5),
138+
-2.202193051050636px 0 1px rgba(255, 0, 80, 0.3),
139+
0 0 3px;
140+
}
141+
65% {
142+
text-shadow:
143+
2.8638780614874975px 0 1px rgba(0, 30, 255, 0.5),
144+
-2.8638780614874975px 0 1px rgba(255, 0, 80, 0.3),
145+
0 0 3px;
146+
}
147+
70% {
148+
text-shadow:
149+
0.48874025155497314px 0 1px rgba(0, 30, 255, 0.5),
150+
-0.48874025155497314px 0 1px rgba(255, 0, 80, 0.3),
151+
0 0 3px;
152+
}
153+
75% {
154+
text-shadow:
155+
1.8948491305757957px 0 1px rgba(0, 30, 255, 0.5),
156+
-1.8948491305757957px 0 1px rgba(255, 0, 80, 0.3),
157+
0 0 3px;
158+
}
159+
80% {
160+
text-shadow:
161+
0.0833037308038857px 0 1px rgba(0, 30, 255, 0.5),
162+
-0.0833037308038857px 0 1px rgba(255, 0, 80, 0.3),
163+
0 0 3px;
164+
}
165+
85% {
166+
text-shadow:
167+
0.09769827255241735px 0 1px rgba(0, 30, 255, 0.5),
168+
-0.09769827255241735px 0 1px rgba(255, 0, 80, 0.3),
169+
0 0 3px;
170+
}
171+
90% {
172+
text-shadow:
173+
3.443339761481782px 0 1px rgba(0, 30, 255, 0.5),
174+
-3.443339761481782px 0 1px rgba(255, 0, 80, 0.3),
175+
0 0 3px;
176+
}
177+
95% {
178+
text-shadow:
179+
2.1841838852799786px 0 1px rgba(0, 30, 255, 0.5),
180+
-2.1841838852799786px 0 1px rgba(255, 0, 80, 0.3),
181+
0 0 3px;
182+
}
183+
100% {
184+
text-shadow:
185+
2.6208764473832513px 0 1px rgba(0, 30, 255, 0.5),
186+
-2.6208764473832513px 0 1px rgba(255, 0, 80, 0.3),
187+
0 0 3px;
188+
}
189+
}
190+
</style>

0 commit comments

Comments
 (0)