Skip to content

Commit e70c712

Browse files
leviaristaleviarista
committed
Test fonts
1 parent 9b3137c commit e70c712

File tree

7 files changed

+242
-11
lines changed

7 files changed

+242
-11
lines changed

‎index.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,19 @@
1414
<load src="partials/toolbox/result.html" />
1515

1616
<div class="tab">
17-
<!-- <button class="tablinks" data-name="presets-section" id="defaultOpenTag">Presets</button> -->
17+
<button class="tablinks" data-name="presets-section" id="defaultOpenTag">Presets</button>
1818
<button class="tablinks" data-name="main-section" id="defaultOpenTag">Main</button>
1919
<button class="tablinks" data-name="background-section">Background</button>
2020
<button class="tablinks" data-name="decorations-section">Decorations</button>
21+
<!-- <button class="tablinks" data-name="test-fonts-section">Test Fonts</button> -->
2122
</div>
2223

2324
<div class="toolbox-tools scrollable">
24-
<!-- <load src="partials/toolbox/presets.html" /> -->
25+
<load src="partials/toolbox/presets.html" />
2526
<load src="partials/toolbox/main.html" />
2627
<load src="partials/toolbox/background.html" />
2728
<load src="partials/toolbox/decorations.html" />
29+
<load src="partials/toolbox/test-fonts.html" style="display: none" />
2830
</div>
2931
</section>
3032

‎partials/head.html‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,15 @@
3737
<link rel="preconnect" href="https://fonts.googleapis.com">
3838
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
3939
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap"
40-
rel="preload" as="style">
40+
rel="preload" as="style" crossorigin="anonymous">
4141
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap"
42+
rel="stylesheet" crossorigin="anonymous">
43+
<link href="https://fonts.googleapis.com/css2?family=Kalam&display=swap" rel="preload" as="style"
44+
crossorigin="anonymous">
45+
<link href="https://fonts.googleapis.com/css2?family=Kalam&display=swap" rel="stylesheet" crossorigin="anonymous">
46+
<link
47+
href="https://fonts.googleapis.com/css2?family=Anonymous+Pro&family=Athiti&family=Della+Respira&family=Electrolize&family=Kalam&family=Lancelot&family=Life+Savers&family=Passero+One&family=Pixelify+Sans&family=Playball&family=Poppins&family=Quattrocento&family=Red+Hat+Display&family=Source+Code+Profamily=Ubuntu&display=swap"
4248
rel="stylesheet">
43-
<link href="https://fonts.googleapis.com/css2?family=Kalam&display=swap" rel="preload" as="style">
44-
<link href="https://fonts.googleapis.com/css2?family=Kalam&display=swap" rel="stylesheet">
4549

4650
<!-- Favicon -->
4751
<link rel="icon" type="image/x-icon" href="./images/favicon.ico" />

‎partials/toolbox/test-fonts.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!-- <link
2+
href="https://fonts.googleapis.com/css2?family=Anonymous+Pro&family=Athiti&family=Courgette&family=Dancing+Script&family=Della+Respira&family=Electrolize&family=Fira+Code&family=Inconsolata&family=Istok+Web&family=Kalam&family=Lancelot&family=Lato&family=Life+Savers&family=Martel&family=Maven+Pro&family=Open+Sans&family=Passero+One&family=Pixelify+Sans&family=Playball&family=Playwrite+HU&family=Poppins&family=Quattrocento&family=Red+Hat+Display&family=Source+Code+Profamily=Ubuntu&family=Ubuntu+Sans&
3+
display=swap"
4+
rel="stylesheet"> -->
5+
<div id="test-fonts-section" class="tabcontent scrollable">
6+
<div class="red-hat-display"> Hey! I'm Facundo Martínez nadzyak/hackme - red-hat-display</div>
7+
<!-- <div class="open-sans"> Hey! I'm Facundo Martínez nadzyak/hackme - open-sans</div> -->
8+
<!-- <div class="maven-pro"> Hey! I'm Facundo Martínez nadzyak/hackme - maven-pro</div> -->
9+
<!-- <div class="lato"> Hey! I'm Facundo Martínez nadzyak/hackme - lato</div> -->
10+
<!-- <div class="ubuntu-sans"> Hey! I'm Facundo Martínez nadzyak/hackme - ubuntu-sans</div> -->
11+
<div class="ubuntu"> Hey! I'm Facundo Martínez nadzyak/hackme - ubuntu</div>
12+
<!-- <div class="istok-web"> Hey! I'm Facundo Martínez nadzyak/hackme - istok-web [X]</div> -->
13+
<!-- <div class="inconsolata"> Hey! I'm Facundo Martínez nadzyak/hackme - inconsolata [x]</div> -->
14+
<div class="poppins"> Hey! I'm Facundo Martínez nadzyak/hackme - poppins</div>
15+
<div class="anonymous-pro"> Hey! I'm Facundo Martínez nadzyak/hackme - anonymous-pro</div>
16+
<div class="source-code-pro"> Hey! I'm Facundo Martínez nadzyak/hackme - source-code-pro</div>
17+
<!-- <div class="fira-code"> Hey! I'm Facundo Martínez nadzyak/hackme - fira-code [x]</div> -->
18+
<!-- <div class="playwrite-hu"> Hey! I'm Facundo Martínez nadzyak/hackme - playwrite-hu [x]</div> -->
19+
<!-- <div class="martel"> Hey! I'm Facundo Martínez nadzyak/hackme - martel [x]</div> -->
20+
<div class="quattrocento"> Hey! I'm Facundo Martínez nadzyak/hackme - quattrocento</div>
21+
<div class="della-respira"> Hey! I'm Facundo Martínez nadzyak/hackme - della-respira</div>
22+
<div class="lancelot"> Hey! I'm Facundo Martínez nadzyak/hackme - lancelot</div>
23+
<div class="life-savers"> Hey! I'm Facundo Martínez nadzyak/hackme - life-savers</div>
24+
<div class="athiti"> Hey! I'm Facundo Martínez nadzyak/hackme - athiti</div>
25+
<div class="electrolize"> Hey! I'm Facundo Martínez nadzyak/hackme - electrolize</div>
26+
<div class="passero-one"> Hey! I'm Facundo Martínez nadzyak/hackme - passero-one</div>
27+
<div class="pixelify-sans"> Hey! I'm Facundo Martínez nadzyak/hackme - pixelify-sans</div>
28+
<div class="kalam"> Hey! I'm Facundo Martínez nadzyak/hackme - kalam</div>
29+
<div class="playball"> Hey! I'm Facundo Martínez nadzyak/hackme - playball</div>
30+
<!-- <div class="dancing-script"> Hey! I'm Facundo Martínez nadzyak/hackme - dancing-script</div> -->
31+
<!-- <div class="courgette"> Hey! I'm Facundo Martínez nadzyak/hackme - courgette [X]</div> -->
32+
</div>

‎styles/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,6 @@
66
@use "toolbox-main";
77
@use "toolbox-background";
88
@use "toolbox-decorations";
9+
@use "toolbox-test-fonts";
910
@use "tabs";
1011
@use "modals";

‎styles/tabs.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
background: #6E5494;
1515
border-radius: 0 0 10px 10px;
1616
box-shadow: 0px 0px 5px 2px rgba(255, 255, 255, 0.25);
17-
overflow: hidden;
17+
// overflow: hidden;
1818
z-index: 10;
1919
user-select: none;
2020
}

‎styles/toolbox-main.scss‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
background: var(--github-dark-mode-color);
66
transition: 0.5s ease;
77
user-select: none;
8+
position: relative;
9+
z-index: 10;
810

911
&.light-mode {
1012
background: var(--github-light-mode-color);
@@ -32,7 +34,7 @@
3234

3335
#github-header-image {
3436
width: 100%;
35-
height: 250px;
37+
height: 200px;
3638
padding: 25px;
3739
position: relative;
3840
display: flex;
@@ -67,7 +69,7 @@
6769
gap: 35px;
6870
justify-content: space-between;
6971
// flex-wrap: wrap;
70-
padding: 0.5rem 0 0 0;
72+
padding: 1rem 0 0.5rem 0;
7173

7274
>div:first-child {
7375
display: flex;
@@ -108,7 +110,8 @@
108110
}
109111
}
110112

111-
.download-button {
113+
.download-button,
114+
.display-button {
112115
background-color: #2D8655 !important;
113116
// border: 1px solid #ffffff;
114117
border-radius: var(--button-border-radius);
@@ -118,9 +121,9 @@
118121
}
119122

120123
.toolbox-tools {
121-
height: calc(100vh - 250px - 3rem - 35px - 1rem);
124+
height: calc(100vh - 200px - 3rem - 35px - 1rem);
122125
overflow: auto;
123-
padding: 0.5rem 1rem 2rem 1rem;
126+
padding: 1rem 1rem 5rem 1rem;
124127
}
125128

126129
.toolbox {

‎styles/toolbox-test-fonts.scss‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
.tablinks[data-name="test-fonts-section"] {
2+
position: fixed;
3+
right: 0;
4+
transform: translateX(100%);
5+
z-index: 100
6+
}
7+
8+
#test-fonts-section {
9+
font-size: 20px;
10+
padding: 50px 0 100px 50px;
11+
background-color: #222;
12+
color: white;
13+
}
14+
15+
.red-hat-display {
16+
font-family: "Red Hat Display", sans-serif;
17+
font-optical-sizing: auto;
18+
font-weight: 400;
19+
font-style: normal;
20+
}
21+
22+
.kalam {
23+
font-family: "Kalam", cursive;
24+
font-weight: 400;
25+
font-style: normal;
26+
}
27+
28+
.poppins {
29+
font-family: "Poppins", sans-serif;
30+
font-weight: 400;
31+
font-style: normal;
32+
}
33+
34+
35+
.maven-pro {
36+
font-family: "Maven Pro", sans-serif;
37+
font-optical-sizing: auto;
38+
font-weight: 400;
39+
font-style: normal;
40+
}
41+
42+
.athiti {
43+
font-family: "Athiti", sans-serif;
44+
font-weight: 400;
45+
font-style: normal;
46+
}
47+
48+
.ubuntu-sans {
49+
font-family: "Ubuntu Sans", sans-serif;
50+
font-optical-sizing: auto;
51+
font-weight: 400;
52+
font-style: normal;
53+
font-variation-settings:
54+
"wdth" 100;
55+
}
56+
57+
.ubuntu {
58+
font-family: "Ubuntu", sans-serif;
59+
font-weight: 400;
60+
font-style: normal;
61+
}
62+
63+
.istok-web {
64+
font-family: "Istok Web", sans-serif;
65+
font-weight: 400;
66+
font-style: normal;
67+
}
68+
69+
70+
.courgette {
71+
font-family: "Courgette", cursive;
72+
font-weight: 400;
73+
font-style: normal;
74+
}
75+
76+
.quattrocento {
77+
font-family: "Quattrocento", serif;
78+
font-weight: 400;
79+
font-style: normal;
80+
}
81+
82+
.della-respira {
83+
font-family: "Della Respira", serif;
84+
font-weight: 400;
85+
font-style: normal;
86+
}
87+
88+
.lato {
89+
font-family: "Lato", sans-serif;
90+
font-weight: 400;
91+
font-style: normal;
92+
}
93+
94+
.martel {
95+
font-family: "Martel", serif;
96+
font-weight: 400;
97+
font-style: normal;
98+
}
99+
100+
.lancelot {
101+
font-family: "Lancelot", serif;
102+
font-weight: 400;
103+
font-style: normal;
104+
}
105+
106+
.playball {
107+
font-family: "Playball", cursive;
108+
font-weight: 400;
109+
font-style: normal;
110+
}
111+
112+
113+
.life-savers {
114+
font-family: "Life Savers", serif;
115+
font-weight: 400;
116+
font-style: normal;
117+
}
118+
119+
.anonymous-pro {
120+
font-family: "Anonymous Pro", monospace;
121+
font-weight: 400;
122+
font-style: normal;
123+
}
124+
125+
.inconsolata {
126+
font-family: "Inconsolata", monospace;
127+
font-optical-sizing: auto;
128+
font-weight: 400;
129+
font-style: normal;
130+
font-variation-settings:
131+
"wdth" 100;
132+
}
133+
134+
.fira-code {
135+
font-family: "Fira Code", monospace;
136+
font-optical-sizing: auto;
137+
font-weight: 400;
138+
font-style: normal;
139+
}
140+
141+
.open-sans {
142+
font-family: "Open Sans", sans-serif;
143+
font-optical-sizing: auto;
144+
font-weight: 400;
145+
font-style: normal;
146+
font-variation-settings:
147+
"wdth" 100;
148+
}
149+
150+
.playwrite-hu {
151+
font-family: "Playwrite HU", cursive;
152+
font-optical-sizing: auto;
153+
font-weight: 400;
154+
font-style: normal;
155+
}
156+
157+
158+
.dancing-script {
159+
font-family: "Dancing Script", cursive;
160+
font-optical-sizing: auto;
161+
font-weight: 400;
162+
font-style: normal;
163+
}
164+
165+
.passero-one {
166+
font-family: "Passero One", sans-serif;
167+
font-weight: 400;
168+
font-style: normal;
169+
}
170+
171+
.pixelify-sans {
172+
font-family: "Pixelify Sans", sans-serif;
173+
font-optical-sizing: auto;
174+
font-weight: 400;
175+
font-style: normal;
176+
}
177+
178+
.electrolize {
179+
font-family: "Electrolize", sans-serif;
180+
font-weight: 400;
181+
font-style: normal;
182+
}
183+
184+
.source-code-pro {
185+
font-family: "Source Code Pro", monospace;
186+
font-optical-sizing: auto;
187+
font-weight: 400;
188+
font-style: normal;
189+
}

0 commit comments

Comments
 (0)