Skip to content

Commit 920355a

Browse files
ThatOneCalculatorThatOneCalculator
committed
Fix fonts
1 parent 9587edd commit 920355a

1 file changed

Lines changed: 145 additions & 135 deletions

File tree

‎frontend/css/style.scss‎

Lines changed: 145 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1,189 +1,199 @@
1+
@font-face {
2+
font-family: "Cartograph CF";
3+
src: url("../fonts/CartographCF-Regular.woff2") format("woff2"),
4+
url("../fonts/CartographCF-Regular.woff") format("woff"),
5+
url("../fonts/CartographCF-Regular.ttf") format("truetype");
6+
font-weight: normal;
7+
font-style: normal;
8+
font-display: swap;
9+
}
10+
111
$color_1: #908caa;
212
$color_2: #ebbcba;
313
$color_3: #e0def4;
414
$color_4: #31748f;
515
$color_5: #c4a7e7;
616
$color_6: #9ccfd8;
717
$color_7: #6e6a86;
8-
$font-family_1: var(--font-mono);
918
$background-color_1: #191724;
1019
$background-color_2: transparent;
1120
$background-color_3: #1f1d2e;
1221
$background-color_4: rgba(31, 29, 46, 0.8);
22+
$font-mono: "Cartograph CF", ui-monospace, SFMono-Regular, Menlo, Monaco,
23+
Consolas, "Liberation Mono", "Courier New", monospace;
1324

14-
@font-face {
15-
font-family: 'Cartograph CF';
16-
src: url('../fonts/CartographCF-Regular.woff2') format('woff2'), url('../fonts/CartographCF-Regular.woff') format('woff'), url('../fonts/CartographCF-Regular.ttf') format('truetype');
17-
font-weight: normal;
18-
font-style: normal;
19-
font-display: swap;
20-
}
2125
@keyframes rainbow {
22-
0%,100% {
23-
background-position: 0 0;
24-
}
25-
50% {
26-
background-position: 100% 0;
27-
}
28-
}
29-
&:root {
30-
--font-mono: "Cartograph CF", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
26+
0%,
27+
100% {
28+
background-position: 0 0;
29+
}
30+
50% {
31+
background-position: 100% 0;
32+
}
3133
}
3234
body {
33-
height: 100%;
34-
background-color: $background-color_1;
35-
margin: 0;
35+
height: 100%;
36+
background-color: $background-color_1;
37+
margin: 0;
3638
}
3739
html {
38-
height: 100%;
40+
height: 100%;
3941
}
4042
pre {
41-
margin: 0;
43+
margin: 0;
4244
}
4345
.noselect {
44-
user-select: none;
45-
-webkit-user-select: none;
46-
-khtml-user-select: none;
47-
-moz-user-select: none;
48-
-ms-user-select: none;
46+
user-select: none;
47+
-webkit-user-select: none;
48+
-khtml-user-select: none;
49+
-moz-user-select: none;
50+
-ms-user-select: none;
4951
}
5052
.wrapper {
51-
display: flex;
52-
padding: 1rem 0.5rem;
53-
font-size: 1rem;
54-
height: calc(100% - 2rem);
53+
display: flex;
54+
padding: 1rem 0.5rem;
55+
font-size: 1rem;
56+
height: calc(100% - 2rem);
5557
}
5658
.line-numbers {
57-
color: $color_1;
58-
font-family: $font-family_1;
59-
text-align: end;
60-
user-select: none;
61-
font-size: 15px;
62-
padding-right: 8px;
63-
line-height: 1.5em;
59+
color: $color_1;
60+
font-family: $font-mono;
61+
text-align: end;
62+
user-select: none;
63+
font-size: 15px;
64+
padding-right: 8px;
65+
line-height: 1.5em;
6466
}
6567
#code-view-pre {
66-
font-family: $font-family_1;
67-
padding-top: 0;
68-
padding-bottom: 0;
69-
font-size: 15px;
70-
-webkit-text-size-adjust: none;
71-
line-height: 1.5em;
68+
font-family: $font-mono;
69+
padding-top: 0;
70+
padding-bottom: 0;
71+
font-size: 15px;
72+
-webkit-text-size-adjust: none;
73+
line-height: 1.5em;
7274
}
7375
#code-view {
74-
font-family: $font-family_1;
75-
padding-top: 0;
76-
padding-bottom: 0;
77-
line-height: 1.5em;
76+
font-family: $font-mono;
77+
padding-top: 0;
78+
padding-bottom: 0;
79+
line-height: 1.5em;
7880
}
7981
.viewcounter {
80-
font-size: 12px;
81-
font-family: $font-family_1;
82-
margin-top: 0px;
83-
margin-bottom: 0px;
82+
font-size: 12px;
83+
font-family: $font-mono;
84+
margin-top: 0px;
85+
margin-bottom: 0px;
8486
}
8587
#viewcounter-label {
86-
color: $color_1;
88+
color: $color_1;
8789
}
8890
#viewcounter-count {
89-
color: $color_2;
91+
color: $color_2;
9092
}
9193
code {
92-
color: $color_3;
94+
color: $color_3;
9395
}
9496
textarea {
95-
background-color: $background-color_2;
96-
resize: none;
97-
width: 100%;
98-
height: 100%;
99-
padding: 0;
100-
padding-left: 1rem;
101-
margin: 0;
102-
border: none;
103-
outline: 0;
104-
color: $color_3;
105-
font-size: 15px;
97+
background-color: $background-color_2;
98+
resize: none;
99+
width: 100%;
100+
height: 100%;
101+
padding: 0;
102+
padding-left: 1rem;
103+
margin: 0;
104+
border: none;
105+
outline: 0;
106+
color: $color_3;
107+
font-size: 15px;
106108
}
107109
.button-wrapper {
108-
position: fixed !important;
109-
top: 0;
110-
right: 0;
111-
padding: 1rem 1rem 0.5rem 1rem;
112-
background-color: $background-color_3;
113-
z-index: 10;
110+
position: fixed !important;
111+
top: 0;
112+
right: 0;
113+
padding: 1rem 1rem 0.5rem 1rem;
114+
background-color: $background-color_3;
115+
z-index: 10;
114116
}
115117
.buttons {
116-
display: flex;
117-
>* {
118-
+ {
119-
* {
120-
padding: .10rem .10rem .10rem .10rem;
121-
}
122-
}
123-
}
118+
display: flex;
119+
> * {
120+
+ {
121+
* {
122+
padding: 0.1rem 0.1rem 0.1rem 0.1rem;
123+
}
124+
}
125+
}
124126
}
125127
a {
126-
color: $color_4;
127-
&:visited {
128-
color: $color_5;
129-
}
130-
&:hover {
131-
&:not(.logo) {
132-
color: $color_6;
133-
}
134-
}
128+
color: $color_4;
129+
&:visited {
130+
color: $color_5;
131+
}
132+
&:hover {
133+
&:not(.logo) {
134+
color: $color_6;
135+
}
136+
}
135137
}
136138
.btn {
137-
cursor: pointer;
138-
background: 0 0;
139-
color: $color_6;
140-
padding: 5px 5px 5px 5px;
141-
font-size: 1rem;
142-
border: none;
143-
transition: background-color 0.2s ease-in-out;
144-
display: inline-block;
145-
text-decoration: none;
146-
&:hover {
147-
color: $color_3;
148-
}
149-
&:disabled {
150-
color: $color_7;
151-
}
139+
cursor: pointer;
140+
background: 0 0;
141+
color: $color_6;
142+
padding: 5px 5px 5px 5px;
143+
font-size: 1rem;
144+
border: none;
145+
transition: background-color 0.2s ease-in-out;
146+
display: inline-block;
147+
text-decoration: none;
148+
&:hover {
149+
color: $color_3;
150+
}
151+
&:disabled {
152+
color: $color_7;
153+
}
152154
}
153155
.btn[disabled] {
154-
color: $color_7;
156+
color: $color_7;
155157
}
156158
.logo {
157-
font-size: 1.8rem;
158-
font-weight: 700;
159-
text-align: center;
160-
text-decoration: none;
161-
width: 100%;
162-
font-family: $font-family_1;
163-
display: inline-block;
164-
background: linear-gradient( to right, #eb6f92, #c9b065, #ebbcba, #31748f, #9ccfd8, #c4a7e7 );
165-
-webkit-background-clip: text;
166-
background-clip: text;
167-
color: transparent;
168-
animation: rainbow 120s linear infinite;
169-
background-size: 400% 100%;
170-
&:hover {
171-
animation: rainbow 3s ease infinite !important;
172-
}
159+
font-size: 1.8rem;
160+
font-weight: 700;
161+
text-align: center;
162+
text-decoration: none;
163+
width: 100%;
164+
font-family: $font-mono;
165+
display: inline-block;
166+
background: linear-gradient(
167+
to right,
168+
#eb6f92,
169+
#c9b065,
170+
#ebbcba,
171+
#31748f,
172+
#9ccfd8,
173+
#c4a7e7
174+
);
175+
-webkit-background-clip: text;
176+
background-clip: text;
177+
color: transparent;
178+
animation: rainbow 120s linear infinite;
179+
background-size: 400% 100%;
180+
&:hover {
181+
animation: rainbow 3s ease infinite !important;
182+
}
173183
}
174184
#messages {
175-
position: absolute;
176-
top: 0;
177-
right: 168px;
178-
z-index: 1000;
179-
padding: 0;
180-
margin: 0;
181-
list-style: none;
182-
width: 400px;
183-
li {
184-
background-color: $background-color_4;
185-
font-family: $font-family_1;
186-
color: $color_3;
187-
padding: 7px;
188-
}
185+
position: absolute;
186+
top: 0;
187+
right: 168px;
188+
z-index: 1000;
189+
padding: 0;
190+
margin: 0;
191+
list-style: none;
192+
width: 400px;
193+
li {
194+
background-color: $background-color_4;
195+
font-family: $font-mono;
196+
color: $color_3;
197+
padding: 7px;
198+
}
189199
}

0 commit comments

Comments
 (0)