Skip to content

Commit 9bbc92e

Browse files
henriksenhenriksen
committed
Lett rydding
1 parent b1b35c0 commit 9bbc92e

File tree

3 files changed

+67
-169
lines changed

3 files changed

+67
-169
lines changed

‎index.html

+6-8
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@
1010
</head>
1111

1212
<body>
13-
<div class="content-wrapper">
13+
<div class="page1">
1414
<div class="center-container crt">
1515
<div class="console-text">
1616
</div>
17-
<div class="additional-div">
17+
<div class="more-info">
1818
<!-- Content for the new div goes here -->
1919
<a id="revealLink" href="#">Finn ut mer
2020
<svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200"
@@ -26,21 +26,19 @@
2626
</div>
2727
</div>
2828
</div>
29-
<div class="new-content-div">
29+
<div class="page2">
3030
<h1>Hei, Stavanger!</h1>
3131
<p>Vi lager en ny konferanse i Stavanger.</p>
32-
<p>Av utviklere og for utviklere. <br>Har du lyst til å hjelpe til?<br>Eller bare følge med på hva som
33-
skjer?<br>Meld deg
34-
på nyhetsbrevet vårt under her!</p>
32+
<p>For alle som lager programvare,<br>av folk som lager programvare.</p>
33+
<p>Har du lyst til å hjelpe til?<br>
34+
Eller bare følge med på hva som skjer?</p>
3535
<div id="mc_embed_shell">
36-
3736
<div id="mc_embed_signup">
3837
<form
3938
action="https://github.us21.list-manage.com/subscribe/post?u=eb9cf08e02a498d6493d157cc&amp;id=3274148d27&amp;f_id=005865e1f0"
4039
method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate"
4140
target="_self" novalidate="">
4241
<div id="mc_embed_signup_scroll">
43-
<h2>Hold deg oppdatert!</h2>
4442
<p>Legg igjen e-postadressen din for å<br>få beskjed når noe nytt skjer!</p>
4543
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
4644
<div class="mc-field-group"><label for="mce-EMAIL">E-postadresse <span

‎script.js

+5-12
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,19 @@
22

33
const textElement = document.createElement("span");
44
const fillElement = document.createElement("span");
5+
const cursor = document.createElement("span");
6+
cursor.classList.add("cursor");
7+
cursor.innerHTML = "&nbsp;";
58

6-
const additionalDiv = document.querySelector(".additional-div");
7-
const bodyElement = document.querySelector("body");
8-
9-
const originalText = ' World");';
109
const stavanger = "Stavanger";
1110
const initialText = 'printf("Hello World");';
1211

13-
let eraseIndex = originalText.length;
1412
let typeIndex = 0;
1513
const typeWriterPause = 200;
1614

1715
const bufferLength = 28;
1816
let buffer = Array(bufferLength).join(" ");
1917
let cursorIndex = 0;
20-
let cursor = document.createElement("span");
21-
cursor.classList.add("cursor");
22-
cursor.innerHTML = "&nbsp;";
2318

2419
const displayElement = document.querySelector(".console-text");
2520
displayElement.appendChild(textElement);
@@ -43,7 +38,6 @@ function printBuffer() {
4338

4439
function typeInitialText() {
4540
if (typeIndex < initialText.length) {
46-
// Type the text
4741
buffer =
4842
buffer.slice(0, typeIndex) +
4943
initialText.slice(typeIndex, typeIndex + 1) +
@@ -70,7 +64,6 @@ function typeWriterEffect() {
7064
}
7165
} else if (phase === "erasing") {
7266
if (cursorIndex > 13) {
73-
// Erase one character
7467
cursorIndex--;
7568
buffer =
7669
buffer.slice(0, cursorIndex) + buffer.slice(cursorIndex + 1) + " ";
@@ -125,7 +118,7 @@ document
125118
.addEventListener("click", function (event) {
126119
event.preventDefault();
127120

128-
document.querySelector(".new-content-div").scrollIntoView({
121+
document.querySelector(".page2").scrollIntoView({
129122
block: "start",
130123
inline: "nearest",
131124
behavior: "smooth",
@@ -135,6 +128,6 @@ document
135128
window.onload = function () {
136129
setTimeout(typeInitialText, 500);
137130
setTimeout(() => {
138-
additionalDiv.classList.add("fade-in");
131+
document.querySelector(".more-info").classList.add("fade-in");
139132
}, 1000);
140133
};

‎styles.css

+56-149
Original file line numberDiff line numberDiff line change
@@ -19,29 +19,37 @@ input {
1919
body {
2020
font-size: 8pt;
2121
}
22-
.additional-div {
22+
.more-info {
2323
font-size: 1.5em;
2424
}
2525

26-
.new-content-div {
26+
.page2 {
2727
padding: 0 40px;
2828
}
29+
.console-text {
30+
font-size: 1.5em;
31+
padding: 5px 8px;
32+
}
2933
}
3034
@media only screen and (min-width: 601px) {
31-
.new-content-div {
35+
.page2 {
3236
padding: 0 200px;
3337
}
38+
.console-text {
39+
font-size: 2em;
40+
padding: 10px 20px;
41+
}
3442
}
3543

36-
.content-wrapper {
44+
.page1 {
3745
height: 100vh;
3846
display: flex;
3947
justify-content: center;
4048
align-items: center;
4149
transition: transform 1s ease-in-out;
4250
}
4351

44-
.new-content-div {
52+
.page2 {
4553
height: 100vh;
4654
display: flex;
4755
justify-content: center;
@@ -55,28 +63,25 @@ input {
5563
display: inline-block;
5664
}
5765

58-
.console-text {
59-
font-size: 2em;
60-
padding: 10px 20px;
61-
}
62-
63-
.additional-div {
66+
.more-info {
6467
margin-top: 10px;
6568
text-align: center;
6669
opacity: 0;
6770
transition: opacity 1s ease-in-out;
68-
}
69-
.additional-div a {
70-
color: var(--green-color);
71-
}
72-
.additional-div a svg {
73-
width: 15px;
74-
height: 15px;
75-
}
7671

77-
.additional-div a svg path {
78-
stroke: var(--green-color);
79-
stroke-width: 60;
72+
& a {
73+
color: var(--green-color);
74+
75+
& svg {
76+
width: 15px;
77+
height: 15px;
78+
79+
& path {
80+
stroke: var(--green-color);
81+
stroke-width: 60;
82+
}
83+
}
84+
}
8085
}
8186

8287
.fade-in {
@@ -91,50 +96,38 @@ input {
9196
}
9297

9398
#mc_embed_shell {
94-
margin-top: 20px;
95-
}
96-
#mc_embed_shell .indicates-required {
97-
display: none;
98-
}
99-
100-
#mc_embed_shell .asterisk {
101-
display: none;
102-
}
103-
104-
#mc_embed_shell .asterisk {
105-
display: none;
99+
.indicates-required {
100+
display: none;
101+
}
102+
.asterisk {
103+
display: none;
104+
}
106105
}
107106

108-
#mc_embed_signup .mc-field-group {
109-
clear: left;
110-
position: relative;
111-
width: 96%;
112-
padding-bottom: 3%;
113-
min-height: 50px;
114-
display: grid;
115-
}
107+
#mc_embed_signup {
108+
.mc-field-group {
109+
clear: left;
110+
position: relative;
111+
width: 96%;
112+
padding-bottom: 3%;
113+
display: grid;
114+
}
116115

117-
#mc_embed_signup .button {
118-
clear: both;
119-
background-color: var(--green-color);
120-
border: 0 none;
121-
border-radius: 4px;
122-
transition: all 0.23s ease-in-out 0s;
123-
color: var(--background-color);
124-
cursor: pointer;
125-
display: inline-block;
126-
font-size: 15px;
127-
font-weight: normal;
128-
height: 32px;
129-
line-height: 32px;
130-
margin: 0 5px 10px 0;
131-
padding: 0 22px;
132-
text-align: center;
133-
text-decoration: none;
134-
vertical-align: top;
135-
white-space: nowrap;
136-
width: fit-content;
137-
width: -moz-fit-content;
116+
.button {
117+
clear: both;
118+
background-color: var(--green-color);
119+
border: 0 none;
120+
border-radius: 4px;
121+
color: var(--background-color);
122+
cursor: pointer;
123+
display: inline-block;
124+
font-size: 15px;
125+
height: 32px;
126+
line-height: 32px;
127+
margin: 0 5px 10px 0;
128+
padding: 0 22px;
129+
text-align: center;
130+
}
138131
}
139132

140133
/* CRT effect by Alec Lownes: http://aleclownes.com/2017/02/01/crt-display.html */
@@ -192,92 +185,6 @@ input {
192185
}
193186
}
194187

195-
@keyframes boxShadow {
196-
0% {
197-
box-shadow: 0.4389924193300864px 0 1px rgba(0, 30, 255, 0.5),
198-
-0.4389924193300864px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
199-
}
200-
5% {
201-
box-shadow: 2.7928974010788217px 0 1px rgba(0, 30, 255, 0.5),
202-
-2.7928974010788217px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
203-
}
204-
10% {
205-
box-shadow: 0.02956275843481219px 0 1px rgba(0, 30, 255, 0.5),
206-
-0.02956275843481219px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
207-
}
208-
15% {
209-
box-shadow: 0.40218538552878136px 0 1px rgba(0, 30, 255, 0.5),
210-
-0.40218538552878136px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
211-
}
212-
20% {
213-
box-shadow: 3.4794037899852017px 0 1px rgba(0, 30, 255, 0.5),
214-
-3.4794037899852017px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
215-
}
216-
25% {
217-
box-shadow: 1.6125630401149584px 0 1px rgba(0, 30, 255, 0.5),
218-
-1.6125630401149584px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
219-
}
220-
30% {
221-
box-shadow: 0.7015590085143956px 0 1px rgba(0, 30, 255, 0.5),
222-
-0.7015590085143956px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
223-
}
224-
35% {
225-
box-shadow: 3.896914047650351px 0 1px rgba(0, 30, 255, 0.5),
226-
-3.896914047650351px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
227-
}
228-
40% {
229-
box-shadow: 3.870905614848819px 0 1px rgba(0, 30, 255, 0.5),
230-
-3.870905614848819px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
231-
}
232-
45% {
233-
box-shadow: 2.231056963361899px 0 1px rgba(0, 30, 255, 0.5),
234-
-2.231056963361899px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
235-
}
236-
50% {
237-
box-shadow: 0.08084290417898504px 0 1px rgba(0, 30, 255, 0.5),
238-
-0.08084290417898504px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
239-
}
240-
55% {
241-
box-shadow: 2.3758461067427543px 0 1px rgba(0, 30, 255, 0.5),
242-
-2.3758461067427543px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
243-
}
244-
60% {
245-
box-shadow: 2.202193051050636px 0 1px rgba(0, 30, 255, 0.5),
246-
-2.202193051050636px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
247-
}
248-
65% {
249-
box-shadow: 2.8638780614874975px 0 1px rgba(0, 30, 255, 0.5),
250-
-2.8638780614874975px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
251-
}
252-
70% {
253-
box-shadow: 0.48874025155497314px 0 1px rgba(0, 30, 255, 0.5),
254-
-0.48874025155497314px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
255-
}
256-
75% {
257-
box-shadow: 1.8948491305757957px 0 1px rgba(0, 30, 255, 0.5),
258-
-1.8948491305757957px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
259-
}
260-
80% {
261-
box-shadow: 0.0833037308038857px 0 1px rgba(0, 30, 255, 0.5),
262-
-0.0833037308038857px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
263-
}
264-
85% {
265-
box-shadow: 0.09769827255241735px 0 1px rgba(0, 30, 255, 0.5),
266-
-0.09769827255241735px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
267-
}
268-
90% {
269-
box-shadow: 3.443339761481782px 0 1px rgba(0, 30, 255, 0.5),
270-
-3.443339761481782px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
271-
}
272-
95% {
273-
box-shadow: 2.1841838852799786px 0 1px rgba(0, 30, 255, 0.5),
274-
-2.1841838852799786px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
275-
}
276-
100% {
277-
box-shadow: 2.6208764473832513px 0 1px rgba(0, 30, 255, 0.5),
278-
-2.6208764473832513px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
279-
}
280-
}
281188
@keyframes textShadow {
282189
0% {
283190
text-shadow: 0.4389924193300864px 0 1px rgba(0, 30, 255, 0.5),

0 commit comments

Comments
 (0)