forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
First attempt at using variable fonts
+35
-20
+2
-1
src/Css/Application.css
+2
-1
src/Css/Application.css
···
24
24
25
25
26
26
body {
27
-
@apply text-base01 font-body;
27
+
@apply text-base01;
28
28
29
29
background-color: rgb(2, 7, 14);
30
30
background-image: url(images/ep_naturalblack_pattern.jpg);
31
31
font-feature-settings: kern, liga;
32
+
font-weight: 400;
32
33
min-width: 300px;
33
34
text-rendering: optimizeLegibility;
34
35
}
+32
-17
src/Css/Fonts.css
+32
-17
src/Css/Fonts.css
···
3
3
4
4
@font-face {
5
5
font-family: "Hack";
6
-
src: url("fonts/hack/regular-subset.woff2") format("woff2");
6
+
src: url("fonts/Hack/regular-subset.woff2") format("woff2");
7
7
font-weight: 400;
8
8
font-stretch: normal;
9
9
font-style: normal;
···
13
13
14
14
@font-face {
15
15
font-family: "Hack";
16
-
src: url("fonts/hack/bold-subset.woff2") format("woff2");
16
+
src: url("fonts/Hack/bold-subset.woff2") format("woff2");
17
17
font-weight: 700;
18
18
font-stretch: normal;
19
19
font-style: normal;
···
27
27
28
28
@font-face {
29
29
font-family: "Source Sans Pro";
30
-
src: url("fonts/sourcesanspro/light.woff2") format("woff2");
30
+
src: url("fonts/Source Sans Pro/Variable/roman.woff2") format("woff2-variations"),
31
+
url("fonts/Source Sans Pro/Old/light.woff2") format("woff2");
31
32
font-weight: 300;
32
33
font-stretch: normal;
33
34
font-style: normal;
···
37
38
38
39
@font-face {
39
40
font-family: "Source Sans Pro";
40
-
src: url("fonts/sourcesanspro/light-italic.woff2") format("woff2");
41
+
src: url("fonts/Source Sans Pro/Variable/italic.woff2") format("woff2-variations"),
42
+
url("fonts/Source Sans Pro/Old/light-italic.woff2") format("woff2");
41
43
font-weight: 300;
42
44
font-stretch: normal;
43
45
font-style: italic;
···
47
49
48
50
@font-face {
49
51
font-family: "Source Sans Pro";
50
-
src: url("fonts/sourcesanspro/regular.woff2") format("woff2");
52
+
src: url("fonts/Source Sans Pro/Variable/roman.woff2") format("woff2-variations"),
53
+
url("fonts/Source Sans Pro/Old/regular.woff2") format("woff2");
51
54
font-weight: 400;
52
55
font-stretch: normal;
53
56
font-style: normal;
···
57
60
58
61
@font-face {
59
62
font-family: "Source Sans Pro";
60
-
src: url("fonts/sourcesanspro/italic.woff2") format("woff2");
63
+
src: url("fonts/Source Sans Pro/Variable/italic.woff2") format("woff2-variations"),
64
+
url("fonts/Source Sans Pro/Old/italic.woff2") format("woff2");
61
65
font-weight: 400;
62
66
font-stretch: normal;
63
67
font-style: italic;
···
67
71
68
72
@font-face {
69
73
font-family: "Source Sans Pro";
70
-
src: url("fonts/sourcesanspro/semibold.woff2") format("woff2");
74
+
src: url("fonts/Source Sans Pro/Variable/roman.woff2") format("woff2-variations"),
75
+
url("fonts/Source Sans Pro/Old/semibold.woff2") format("woff2");
71
76
font-weight: 600;
72
77
font-stretch: normal;
73
78
font-style: normal;
···
77
82
78
83
@font-face {
79
84
font-family: "Source Sans Pro";
80
-
src: url("fonts/sourcesanspro/semibold-italic.woff2") format("woff2");
85
+
src: url("fonts/Source Sans Pro/Variable/italic.woff2") format("woff2-variations"),
86
+
url("fonts/Source Sans Pro/Old/semibold-italic.woff2") format("woff2");
81
87
font-weight: 600;
82
88
font-stretch: normal;
83
89
font-style: italic;
···
87
93
88
94
@font-face {
89
95
font-family: "Source Sans Pro";
90
-
src: url("fonts/sourcesanspro/bold.woff2") format("woff2");
96
+
src: url("fonts/Source Sans Pro/Variable/roman.woff2") format("woff2-variations"),
97
+
url("fonts/Source Sans Pro/Old/bold.woff2") format("woff2");
91
98
font-weight: 700;
92
99
font-stretch: normal;
93
100
font-style: normal;
···
97
104
98
105
@font-face {
99
106
font-family: "Source Sans Pro";
100
-
src: url("fonts/sourcesanspro/bold-italic.woff2") format("woff2");
107
+
src: url("fonts/Source Sans Pro/Variable/italic.woff2") format("woff2-variations"),
108
+
url("fonts/Source Sans Pro/Old/bold-italic.woff2") format("woff2");
101
109
font-weight: 700;
102
110
font-stretch: normal;
103
111
font-style: italic;
···
107
115
108
116
@font-face {
109
117
font-family: "Source Sans Pro";
110
-
src: url("fonts/sourcesanspro/black.woff2") format("woff2");
118
+
src: url("fonts/Source Sans Pro/Variable/roman.woff2") format("woff2-variations"),
119
+
url("fonts/Source Sans Pro/Old/black.woff2") format("woff2");
111
120
font-weight: 900;
112
121
font-stretch: normal;
113
122
font-style: normal;
···
121
130
122
131
@font-face {
123
132
font-family: "Montserrat";
124
-
src: url("fonts/montserrat/light.woff2") format("woff2");
133
+
src: url("fonts/Montserrat/Variable/variable.woff2") format("woff2-variations"),
134
+
url("fonts/Montserrat/Old/light.woff2") format("woff2");
125
135
font-weight: 300;
126
136
font-stretch: normal;
127
137
font-style: normal;
···
131
141
132
142
@font-face {
133
143
font-family: "Montserrat";
134
-
src: url("fonts/montserrat/regular.woff2") format("woff2");
144
+
src: url("fonts/Montserrat/Variable/variable.woff2") format("woff2-variations"),
145
+
url("fonts/Montserrat/Old/regular.woff2") format("woff2");
135
146
font-weight: 400;
136
147
font-stretch: normal;
137
148
font-style: normal;
···
141
152
142
153
@font-face {
143
154
font-family: "Montserrat";
144
-
src: url("fonts/montserrat/medium.woff2") format("woff2");
155
+
src: url("fonts/Montserrat/Variable/variable.woff2") format("woff2-variations"),
156
+
url("fonts/Montserrat/Old/medium.woff2") format("woff2");
145
157
font-weight: 500;
146
158
font-stretch: normal;
147
159
font-style: normal;
···
151
163
152
164
@font-face {
153
165
font-family: "Montserrat";
154
-
src: url("fonts/montserrat/semibold.woff2") format("woff2");
166
+
src: url("fonts/Montserrat/Variable/variable.woff2") format("woff2-variations"),
167
+
url("fonts/Montserrat/Old/semibold.woff2") format("woff2");
155
168
font-weight: 600;
156
169
font-stretch: normal;
157
170
font-style: normal;
···
161
174
162
175
@font-face {
163
176
font-family: "Montserrat";
164
-
src: url("fonts/montserrat/bold.woff2") format("woff2");
177
+
src: url("fonts/Montserrat/Variable/variable.woff2") format("woff2-variations"),
178
+
url("fonts/Montserrat/Old/bold.woff2") format("woff2");
165
179
font-weight: 700;
166
180
font-stretch: normal;
167
181
font-style: normal;
···
171
185
172
186
@font-face {
173
187
font-family: "Montserrat";
174
-
src: url("fonts/montserrat/extrabold.woff2") format("woff2");
188
+
src: url("fonts/Montserrat/Variable/variable.woff2") format("woff2-variations"),
189
+
url("fonts/Montserrat/Old/extrabold.woff2") format("woff2");
175
190
font-weight: 800;
176
191
font-stretch: normal;
177
192
font-style: normal;
src/Static/Fonts/Montserrat/Variable/variable.woff2
src/Static/Fonts/Montserrat/Variable/variable.woff2
This is a binary file and will not be displayed.
src/Static/Fonts/Source Sans Pro/Variable/italic.woff2
src/Static/Fonts/Source Sans Pro/Variable/italic.woff2
This is a binary file and will not be displayed.
src/Static/Fonts/Source Sans Pro/Variable/roman.woff2
src/Static/Fonts/Source Sans Pro/Variable/roman.woff2
This is a binary file and will not be displayed.
src/Static/Fonts/montserrat/bold.woff2
src/Static/Fonts/Montserrat/Old/bold.woff2
src/Static/Fonts/montserrat/bold.woff2
src/Static/Fonts/Montserrat/Old/bold.woff2
src/Static/Fonts/montserrat/extrabold.woff2
src/Static/Fonts/Montserrat/Old/extrabold.woff2
src/Static/Fonts/montserrat/extrabold.woff2
src/Static/Fonts/Montserrat/Old/extrabold.woff2
src/Static/Fonts/montserrat/light.woff2
src/Static/Fonts/Montserrat/Old/light.woff2
src/Static/Fonts/montserrat/light.woff2
src/Static/Fonts/Montserrat/Old/light.woff2
src/Static/Fonts/montserrat/medium.woff2
src/Static/Fonts/Montserrat/Old/medium.woff2
src/Static/Fonts/montserrat/medium.woff2
src/Static/Fonts/Montserrat/Old/medium.woff2
src/Static/Fonts/montserrat/regular.woff2
src/Static/Fonts/Montserrat/Old/regular.woff2
src/Static/Fonts/montserrat/regular.woff2
src/Static/Fonts/Montserrat/Old/regular.woff2
src/Static/Fonts/montserrat/semibold.woff2
src/Static/Fonts/Montserrat/Old/semibold.woff2
src/Static/Fonts/montserrat/semibold.woff2
src/Static/Fonts/Montserrat/Old/semibold.woff2
src/Static/Fonts/playfairdisplay/bold.woff2
src/Static/Fonts/Playfair Display/bold.woff2
src/Static/Fonts/playfairdisplay/bold.woff2
src/Static/Fonts/Playfair Display/bold.woff2
src/Static/Fonts/sourcesanspro/black.woff2
src/Static/Fonts/Source Sans Pro/Old/black.woff2
src/Static/Fonts/sourcesanspro/black.woff2
src/Static/Fonts/Source Sans Pro/Old/black.woff2
src/Static/Fonts/sourcesanspro/bold-italic.woff2
src/Static/Fonts/Source Sans Pro/Old/bold-italic.woff2
src/Static/Fonts/sourcesanspro/bold-italic.woff2
src/Static/Fonts/Source Sans Pro/Old/bold-italic.woff2
src/Static/Fonts/sourcesanspro/bold.woff2
src/Static/Fonts/Source Sans Pro/Old/bold.woff2
src/Static/Fonts/sourcesanspro/bold.woff2
src/Static/Fonts/Source Sans Pro/Old/bold.woff2
src/Static/Fonts/sourcesanspro/italic.woff2
src/Static/Fonts/Source Sans Pro/Old/italic.woff2
src/Static/Fonts/sourcesanspro/italic.woff2
src/Static/Fonts/Source Sans Pro/Old/italic.woff2
src/Static/Fonts/sourcesanspro/light-italic.woff2
src/Static/Fonts/Source Sans Pro/Old/light-italic.woff2
src/Static/Fonts/sourcesanspro/light-italic.woff2
src/Static/Fonts/Source Sans Pro/Old/light-italic.woff2
src/Static/Fonts/sourcesanspro/light.woff2
src/Static/Fonts/Source Sans Pro/Old/light.woff2
src/Static/Fonts/sourcesanspro/light.woff2
src/Static/Fonts/Source Sans Pro/Old/light.woff2
src/Static/Fonts/sourcesanspro/regular.woff2
src/Static/Fonts/Source Sans Pro/Old/regular.woff2
src/Static/Fonts/sourcesanspro/regular.woff2
src/Static/Fonts/Source Sans Pro/Old/regular.woff2
src/Static/Fonts/sourcesanspro/semibold-italic.woff2
src/Static/Fonts/Source Sans Pro/Old/semibold-italic.woff2
src/Static/Fonts/sourcesanspro/semibold-italic.woff2
src/Static/Fonts/Source Sans Pro/Old/semibold-italic.woff2
src/Static/Fonts/sourcesanspro/semibold.woff2
src/Static/Fonts/Source Sans Pro/Old/semibold.woff2
src/Static/Fonts/sourcesanspro/semibold.woff2
src/Static/Fonts/Source Sans Pro/Old/semibold.woff2
+1
-2
src/Static/Html/Application.html
+1
-2
src/Static/Html/Application.html
···
1
1
<!DOCTYPE html>
2
-
<html class="fixed h-screen left-0 overflow-hidden top-0 w-full" lang="en">
2
+
<html class="fixed font-body h-screen left-0 overflow-hidden top-0 w-full" lang="en">
3
3
<head>
4
4
5
5
<meta charset="utf-8" />
···
27
27
28
28
<!-- Preload some assets -->
29
29
<link rel="preload" href="images/diffuse__icon-dark.svg" as="image" crossorigin />
30
-
<link rel="preload" href="fonts/sourcesanspro/semibold.woff2" as="font" crossorigin />
31
30
32
31
</head>
33
32
<body>