Skip to content

Commit d8913c4

Browse files
eibenseibens
committed
Move CSS into external stylesheet
1 parent 90e1e96 commit d8913c4

File tree

2 files changed

+93
-94
lines changed

2 files changed

+93
-94
lines changed

‎index.css‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
@font-face {
2+
font-family: 'Roboto Slab';
3+
font-style: normal;
4+
font-weight: 400;
5+
font-display: swap;
6+
src: url(roboto-slab-latin-ext.woff2) format('woff2');
7+
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
8+
}
9+
@font-face {
10+
font-family: 'Roboto Slab';
11+
font-style: normal;
12+
font-weight: 400;
13+
font-display: swap;
14+
src: url(roboto-slab-latin.woff2) format('woff2');
15+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
16+
}
17+
18+
* {
19+
font-size: inherit;
20+
font-family: inherit;
21+
color: inherit;
22+
margin: initial;
23+
border: initial;
24+
background: initial;
25+
}
26+
html {
27+
background: #222;
28+
font-size: 20px;
29+
font-family: 'Roboto Slab', sans-serif;
30+
color: rgba(255, 255, 255, 0.5);
31+
overflow: hidden;
32+
}
33+
body {
34+
display: flex;
35+
justify-content: center;
36+
align-items: center;
37+
position: absolute;
38+
top: 0;
39+
bottom: 0;
40+
left: 0;
41+
right: 0;
42+
}
43+
.tool {
44+
z-index: 1;
45+
position: absolute;
46+
}
47+
.header {
48+
z-index: 1;
49+
position: absolute;
50+
top: 1rem;
51+
left: 1rem;
52+
}
53+
.nav {
54+
right: 1rem;
55+
bottom: 1rem;
56+
}
57+
.footer {
58+
left: 1rem;
59+
bottom: 1rem;
60+
}
61+
.button {
62+
background: rgba(255, 255, 255, 0.06);
63+
display: inline-block;
64+
transition: all 0.2s;
65+
padding: 0.5rem;
66+
border-radius: 0.25rem;
67+
box-sizing: border-box;
68+
cursor: pointer;
69+
text-transform: uppercase;
70+
}
71+
.button:hover {
72+
color: rgba(255, 255, 255, 0.75);
73+
background: rgba(255, 255, 255, 0.12);
74+
}
75+
#name {
76+
font-weight: normal;
77+
font-size: 2rem;
78+
}
79+
#title {
80+
font-weight: normal;
81+
font-size: 1rem;
82+
}
83+
#next::after {
84+
content: 'Next';
85+
}
86+
#next:hover::after {
87+
content: 'N̶̢͇̹̣̮̟̓̔̋̈̕Ḕ̶̢̘̀̓̅̇͋̽̕X̷̞̯͓̻̖̒T̷̖͈̻͙͆̒̽̍́̂';
88+
}
89+
#link {
90+
position: absolute;
91+
right: 1000px;
92+
}

‎index.html‎

Lines changed: 1 addition & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -9,103 +9,10 @@
99
<meta name="subject" content="Procedural Graphics">
1010
<meta name="copyright" content="Lukas Eibensteiner">
1111
<meta name="author" content="Lukas Eibensteiner, l.eibensteiner@gmail.com">
12+
<link rel="stylesheet" href="index.css"/>
1213
<script src="regl.min.js"></script>
1314
<script defer src="lambda.min.js"></script>
1415
<script defer src="index.js"></script>
15-
<style>
16-
@font-face {
17-
font-family: 'Roboto Slab';
18-
font-style: normal;
19-
font-weight: 400;
20-
font-display: swap;
21-
src: url(roboto-slab-latin-ext.woff2) format('woff2');
22-
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
23-
}
24-
@font-face {
25-
font-family: 'Roboto Slab';
26-
font-style: normal;
27-
font-weight: 400;
28-
font-display: swap;
29-
src: url(roboto-slab-latin.woff2) format('woff2');
30-
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
31-
}
32-
33-
* {
34-
font-size: inherit;
35-
font-family: inherit;
36-
color: inherit;
37-
margin: initial;
38-
border: initial;
39-
background: initial;
40-
}
41-
html {
42-
background: #222;
43-
font-size: 20px;
44-
font-family: 'Roboto Slab', sans-serif;
45-
color: rgba(255, 255, 255, 0.5);
46-
overflow: hidden;
47-
}
48-
body {
49-
display: flex;
50-
justify-content: center;
51-
align-items: center;
52-
position: absolute;
53-
top: 0;
54-
bottom: 0;
55-
left: 0;
56-
right: 0;
57-
}
58-
.tool {
59-
z-index: 1;
60-
position: absolute;
61-
}
62-
.header {
63-
z-index: 1;
64-
position: absolute;
65-
top: 1rem;
66-
left: 1rem;
67-
}
68-
.nav {
69-
right: 1rem;
70-
bottom: 1rem;
71-
}
72-
.footer {
73-
left: 1rem;
74-
bottom: 1rem;
75-
}
76-
.button {
77-
background: rgba(255, 255, 255, 0.06);
78-
display: inline-block;
79-
transition: all 0.2s;
80-
padding: 0.5rem;
81-
border-radius: 0.25rem;
82-
box-sizing: border-box;
83-
cursor: pointer;
84-
text-transform: uppercase;
85-
}
86-
.button:hover {
87-
color: rgba(255, 255, 255, 0.75);
88-
background: rgba(255, 255, 255, 0.12);
89-
}
90-
#name {
91-
font-weight: normal;
92-
font-size: 2rem;
93-
}
94-
#title {
95-
font-weight: normal;
96-
font-size: 1rem;
97-
}
98-
#next::after {
99-
content: 'Next';
100-
}
101-
#next:hover::after {
102-
content: 'N̶̢͇̹̣̮̟̓̔̋̈̕Ḕ̶̢̘̀̓̅̇͋̽̕X̷̞̯͓̻̖̒T̷̖͈̻͙͆̒̽̍́̂';
103-
}
104-
#link {
105-
position: absolute;
106-
right: 1000px;
107-
}
108-
</style>
10916
</head>
11017
<body>
11118
<canvas id="canvas" class="canvas"></canvas>

0 commit comments

Comments
 (0)