Skip to content

Commit b4e0ba3

Browse files
NullVoxPopuliNullVoxPopuli
committed
New home
1 parent db5d6a0 commit b4e0ba3

File tree

1 file changed

+218
-7
lines changed

1 file changed

+218
-7
lines changed

‎apps/home/index.html‎

Lines changed: 218 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,232 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<meta http-equiv="X-UA-Compatible" content="ie=edge">
88
<title>Glimdown</title>
9+
<style>
10+
@import url('https://fonts.googleapis.com/css2?family=Racing+Sans+One&family=Yellowtail&display=swap');
11+
12+
html,
13+
body {
14+
padding: 0 !important;
15+
margin: 0;
16+
}
17+
18+
19+
.why {
20+
padding: 1rem;
21+
margin-top: 1rem;
22+
font-family: sans-serif;
23+
}
24+
25+
#app {
26+
height: 100vh;
27+
width: 100vw;
28+
perspective: 800px;
29+
overflow: hidden;
30+
background-image: linear-gradient(to top,
31+
#0f0209,
32+
#23061d,
33+
#330531,
34+
#3e024b,
35+
#41056a,
36+
#520578,
37+
#640385,
38+
#770092,
39+
#9b0089,
40+
#b8007e,
41+
#ce1173,
42+
#e03168);
43+
44+
.background {
45+
background-size: 40px 40px;
46+
background-image:
47+
linear-gradient(to right, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
48+
linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
49+
height: inherit;
50+
transform: rotateX(20deg);
51+
transform-origin: top center;
52+
animation: 20s linear infinite crawlingWall;
53+
background-position-y: top;
54+
}
55+
56+
.shadow-box {
57+
background: rgba(20, 20, 20, 0.6);
58+
color: white;
59+
padding: 3vmin;
60+
margin: 1rem;
61+
border-radius: 0.5rem;
62+
font-family: sans-serif;
63+
backdrop-filter: blur(5px);
64+
border: 1px solid rgba(0, 0, 0, 0.75);
65+
/* https://www.joshwcomeau.com/css/designing-shadows/ */
66+
box-shadow:
67+
0 1px 1px hsl(0deg 0% 0% / 0.075),
68+
0 2px 2px hsl(0deg 0% 0% / 0.075),
69+
0 4px 4px hsl(0deg 0% 0% / 0.075),
70+
0 8px 8px hsl(0deg 0% 0% / 0.075),
71+
0 16px 16px hsl(0deg 0% 0% / 0.075);
72+
text-align: center;
73+
line-height: 1.5rem;
74+
75+
}
76+
77+
.message {
78+
aspect-ratio: 3 / 1;
79+
width: 50vmax;
80+
position: fixed;
81+
top: 40%;
82+
left: 50%;
83+
transform: translateY(-50%) translateX(-50%);
84+
font-size: 1.5vmax;
85+
line-height: 1.5vmax;
86+
line-height: calc(2vmin);
87+
88+
h1 {
89+
margin: 0;
90+
font-size: 8vmax;
91+
line-height: 7vmax;
92+
transform: translateX(-15vmin) translateY(-10vmin);
93+
94+
font-family: "Racing Sans One", sans-serif;
95+
transition: all 0.5s;
96+
-webkit-text-stroke: 4px #ededed;
97+
font-variation-settings: "wght" 900, "ital" 1;
98+
text-align: center;
99+
color: transparent;
100+
text-shadow:
101+
10px 10px 0px #09ddcc,
102+
15px 15px 0px #e600d0,
103+
20px 20px 0px #e9018a,
104+
25px 25px 0px #ff0070,
105+
45px 45px 10px #4035bb;
106+
}
107+
108+
.offset-text {
109+
transform: translateY(-4vmin);
110+
}
111+
112+
a,
113+
a:visited {
114+
transition: 0.2s all;
115+
cursor: pointer;
116+
color: white;
117+
font-size: 4vmax;
118+
line-height: 4vmax;
119+
max-width: 90dvw;
120+
font-family: 'Yellowtail', serif;
121+
}
122+
123+
.horizontal {
124+
position: absolute;
125+
display: grid;
126+
width: 100%;
127+
gap: 1rem;
128+
grid-template-columns: 1fr 0.2fr 1fr;
129+
}
130+
131+
132+
.repl {
133+
transform: rotate(-6deg);
134+
text-align: right;
135+
136+
code {
137+
font-family: Arial, sans-serif;
138+
}
139+
140+
&:hover {
141+
transform: rotate(-6deg) scale(1.2);
142+
}
143+
}
144+
145+
.tutorial {
146+
transform: rotate(6deg);
147+
text-align: left;
148+
149+
&:hover {
150+
transform: rotate(6deg) scale(1.2);
151+
}
152+
}
153+
}
154+
155+
}
156+
157+
@media (prefers-reduced-motion: reduce) {
158+
* {
159+
transition-duration: 0.05s !important;
160+
}
161+
162+
.background {
163+
animation: 60s linear infinite crawlingWall;
164+
}
165+
}
166+
167+
@media (max-width: 800px) {
168+
#app .message .offset-text {
169+
margin-top: 1rem;
170+
}
171+
172+
#app .message .horizontal {
173+
display: flex;
174+
gap: 3rem;
175+
flex-direction: column;
176+
align-items: center;
177+
178+
a {
179+
text-align: center;
180+
}
181+
}
182+
}
183+
184+
@media (max-width: 1000px) {
185+
#app .message h1 {
186+
transform: translateX(-5vmin) translateY(-10vmin);
187+
font-size: 6vmax;
188+
line-height: 5vmax;
189+
}
190+
}
191+
192+
@keyframes crawlingWall {
193+
to {
194+
background-position-y: bottom;
195+
}
196+
}
197+
</style>
9198
</head>
10199

11200
<body>
201+
<div id="app">
202+
<div class="background"></div>
203+
<div class="message shadow-box">
204+
205+
<h1 class="shadow-dance-text">Welcome to Glimdown</h1>
12206

13-
<h1>Welcome to Glimdown</h1>
207+
<div class="offset-text">
208+
You may be looking for:
209+
<br><br>
14210

15-
<br><br>
16-
You may be looking for:
17-
<br><br>
211+
<div class="horizontal">
212+
<a class="repl" href="https://limber.glimdown.com">The <code>REPL</code> Playground</a>
18213

19-
<a href="https://limber.glimdown.com">The REPL / Playground: Limber</a>
214+
<span>or</span>
20215

21-
<br><br>or<br><br>
216+
<a class="tutorial title" href="https://tutorial.glimdown.com">The Tutorial
217+
<div class="aurora">
218+
<div class="aurora__item"></div>
219+
<div class="aurora__item"></div>
220+
<div class="aurora__item"></div>
221+
<div class="aurora__item"></div>
222+
</div>
223+
</a>
224+
</div>
225+
</div>
226+
</div>
227+
</div>
228+
<p class="why">Why is this site like this?
229+
<br>
230+
Some security tool, a DNS Filter, flagged this site as a parked domain. Which, technically it is, since the real
231+
apps are on subdomains... but ugh 😩
232+
<br>
22233

23-
<a href="https://tutorial.glimdown.com">The Tutorial</a>
234+
</p>
24235
</body>
25236

26237
</html>

0 commit comments

Comments
 (0)