Skip to content

Commit 26e8c12

Browse files
realstomanrealstoman
committed
Header and banner fonts appplied
1 parent 02fe2c3 commit 26e8c12

File tree

3 files changed

+206
-15
lines changed

3 files changed

+206
-15
lines changed

‎src/assets/css/app.css

Lines changed: 197 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,204 @@
1212
/* Custom Styles Below */
1313

1414
body {
15-
font-family: 'Poppins', sans-serif !important;
15+
font-family: 'GeneralSans-Regular';
1616
}
1717

18-
h1,
19-
h2,
20-
h3,
21-
h4 {
22-
font-family: 'Poppins', sans-serif !important;
23-
font-weight: 500 !important;
18+
/* Theme Colors */
19+
20+
/* Fonts */
21+
@font-face {
22+
font-family: 'GeneralSans-Variable';
23+
src: url('../fonts/GeneralSans-Variable.woff2') format('woff2'),
24+
url('../fonts/GeneralSans-Variable.woff') format('woff'),
25+
url('../fonts/GeneralSans-Variable.ttf') format('truetype');
26+
font-weight: 200 700;
27+
font-display: swap;
28+
font-style: normal;
2429
}
2530

26-
/* Theme Colors */
31+
.font-general-variable {
32+
font-family: 'GeneralSans-Variable';
33+
}
34+
35+
@font-face {
36+
font-family: 'GeneralSans-VariableItalic';
37+
src: url('../fonts/GeneralSans-VariableItalic.woff2') format('woff2'),
38+
url('../fonts/GeneralSans-VariableItalic.woff') format('woff'),
39+
url('../fonts/GeneralSans-VariableItalic.ttf') format('truetype');
40+
font-weight: 200 700;
41+
font-display: swap;
42+
font-style: italic;
43+
}
44+
45+
.font-general-variable-italic {
46+
font-family: 'GeneralSans-VariableItalic';
47+
}
48+
49+
@font-face {
50+
font-family: 'GeneralSans-Extralight';
51+
src: url('../fonts/GeneralSans-Extralight.woff2') format('woff2'),
52+
url('../fonts/GeneralSans-Extralight.woff') format('woff'),
53+
url('../fonts/GeneralSans-Extralight.ttf') format('truetype');
54+
font-weight: 200;
55+
font-display: swap;
56+
font-style: normal;
57+
}
58+
59+
.font-general-extralight {
60+
font-family: 'GeneralSans-Extralight';
61+
}
62+
63+
@font-face {
64+
font-family: 'GeneralSans-ExtralightItalic';
65+
src: url('../fonts/GeneralSans-ExtralightItalic.woff2') format('woff2'),
66+
url('../fonts/GeneralSans-ExtralightItalic.woff') format('woff'),
67+
url('../fonts/GeneralSans-ExtralightItalic.ttf') format('truetype');
68+
font-weight: 200;
69+
font-display: swap;
70+
font-style: italic;
71+
}
72+
73+
.font-general-extralight-italic {
74+
font-family: 'GeneralSans-ExtralightItalic';
75+
}
76+
77+
@font-face {
78+
font-family: 'GeneralSans-Light';
79+
src: url('../fonts/GeneralSans-Light.woff2') format('woff2'),
80+
url('../fonts/GeneralSans-Light.woff') format('woff'),
81+
url('../fonts/GeneralSans-Light.ttf') format('truetype');
82+
font-weight: 300;
83+
font-display: swap;
84+
font-style: normal;
85+
}
86+
87+
.font-general-light {
88+
font-family: 'GeneralSans-Light';
89+
}
90+
91+
@font-face {
92+
font-family: 'GeneralSans-LightItalic';
93+
src: url('../fonts/GeneralSans-LightItalic.woff2') format('woff2'),
94+
url('../fonts/GeneralSans-LightItalic.woff') format('woff'),
95+
url('../fonts/GeneralSans-LightItalic.ttf') format('truetype');
96+
font-weight: 300;
97+
font-display: swap;
98+
font-style: italic;
99+
}
100+
101+
.font-general-light-italic {
102+
font-family: 'GeneralSans-LightItalic';
103+
}
104+
105+
@font-face {
106+
font-family: 'GeneralSans-Regular';
107+
src: url('../fonts/GeneralSans-Regular.woff2') format('woff2'),
108+
url('../fonts/GeneralSans-Regular.woff') format('woff'),
109+
url('../fonts/GeneralSans-Regular.ttf') format('truetype');
110+
font-weight: 400;
111+
font-display: swap;
112+
font-style: normal;
113+
}
114+
115+
.font-general-regular {
116+
font-family: 'GeneralSans-Regular';
117+
}
118+
119+
@font-face {
120+
font-family: 'GeneralSans-Italic';
121+
src: url('../fonts/GeneralSans-Italic.woff2') format('woff2'),
122+
url('../fonts/GeneralSans-Italic.woff') format('woff'),
123+
url('../fonts/GeneralSans-Italic.ttf') format('truetype');
124+
font-weight: 400;
125+
font-display: swap;
126+
font-style: italic;
127+
}
128+
129+
.font-general-italic {
130+
font-family: 'GeneralSans-Italic';
131+
}
132+
133+
@font-face {
134+
font-family: 'GeneralSans-Medium';
135+
src: url('../fonts/GeneralSans-Medium.woff2') format('woff2'),
136+
url('../fonts/GeneralSans-Medium.woff') format('woff'),
137+
url('../fonts/GeneralSans-Medium.ttf') format('truetype');
138+
font-weight: 500;
139+
font-display: swap;
140+
font-style: normal;
141+
}
142+
143+
.font-general-medium {
144+
font-family: 'GeneralSans-Medium';
145+
}
146+
147+
@font-face {
148+
font-family: 'GeneralSans-MediumItalic';
149+
src: url('../fonts/GeneralSans-MediumItalic.woff2') format('woff2'),
150+
url('../fonts/GeneralSans-MediumItalic.woff') format('woff'),
151+
url('../fonts/GeneralSans-MediumItalic.ttf') format('truetype');
152+
font-weight: 500;
153+
font-display: swap;
154+
font-style: italic;
155+
}
156+
157+
.font-general-medium-italic {
158+
font-family: 'GeneralSans-MediumItalic';
159+
}
160+
161+
@font-face {
162+
font-family: 'GeneralSans-Semibold';
163+
src: url('../fonts/GeneralSans-Semibold.woff2') format('woff2'),
164+
url('../fonts/GeneralSans-Semibold.woff') format('woff'),
165+
url('../fonts/GeneralSans-Semibold.ttf') format('truetype');
166+
font-weight: 600;
167+
font-display: swap;
168+
font-style: normal;
169+
}
170+
171+
.font-general-semibold {
172+
font-family: 'GeneralSans-Semibold';
173+
}
174+
175+
@font-face {
176+
font-family: 'GeneralSans-SemiboldItalic';
177+
src: url('../fonts/GeneralSans-SemiboldItalic.woff2') format('woff2'),
178+
url('../fonts/GeneralSans-SemiboldItalic.woff') format('woff'),
179+
url('../fonts/GeneralSans-SemiboldItalic.ttf') format('truetype');
180+
font-weight: 600;
181+
font-display: swap;
182+
font-style: italic;
183+
}
184+
185+
.font-general-semibold-italic {
186+
font-family: 'GeneralSans-SemiboldItalic';
187+
}
188+
189+
@font-face {
190+
font-family: 'GeneralSans-Bold';
191+
src: url('../fonts/GeneralSans-Bold.woff2') format('woff2'),
192+
url('../fonts/GeneralSans-Bold.woff') format('woff'),
193+
url('../fonts/GeneralSans-Bold.ttf') format('truetype');
194+
font-weight: 700;
195+
font-display: swap;
196+
font-style: normal;
197+
}
198+
199+
.font-general-bold {
200+
font-family: 'GeneralSans-Bold';
201+
}
202+
203+
@font-face {
204+
font-family: 'GeneralSans-BoldItalic';
205+
src: url('../fonts/GeneralSans-BoldItalic.woff2') format('woff2'),
206+
url('../fonts/GeneralSans-BoldItalic.woff') format('woff'),
207+
url('../fonts/GeneralSans-BoldItalic.ttf') format('truetype');
208+
font-weight: 700;
209+
font-display: swap;
210+
font-style: italic;
211+
}
212+
213+
.font-general-bold-italic {
214+
font-family: 'GeneralSans-BoldItalic';
215+
}

‎src/components/shared/AppBanner.vue

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@
66
<!-- Banner left contents -->
77
<div class="w-full md:w-1/3 text-left">
88
<h1
9-
class="text-3xl md:text-4xl xl:text-5xl text-center sm:text-left font-semibold text-ternary-dark dark:text-primary-light uppercase"
9+
class="font-general-semibold text-3xl md:text-3xl xl:text-4xl text-center sm:text-left font-semibold text-ternary-dark dark:text-primary-light uppercase"
1010
>
1111
Hi, Iam Stoman
1212
</h1>
1313
<p
14-
class="mt-4 text-xl md:text-2xl xl:text-4xl text-center sm:text-left font-semibold leading-none text-gray-400"
14+
class="font-general-regular mt-2 text-lg sm:text-xl xl:text-2xl text-center sm:text-left font-semibold leading-none text-gray-400"
1515
>
1616
A Full-Stack Developer & Design Enthusiast
1717
</p>
@@ -26,7 +26,9 @@
2626
data-feather="arrow-down-circle"
2727
class="ml-0 sm:ml-1 mr-2 sm:mr-3 w-5 sm:w-6"
2828
></i>
29-
<span class="text-sm sm:text-lg">Download CV</span></a
29+
<span class="text-sm sm:text-lg font-general-medium"
30+
>Download CV</span
31+
></a
3032
>
3133
</div>
3234
</div>

‎src/components/shared/AppHeaderLinks.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,27 @@
66
>
77
<router-link
88
to="/projects"
9-
class="block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light sm:mx-4 mb-2 sm:py-2"
9+
class="font-general-medium block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light sm:mx-4 mb-2 sm:py-2 "
1010
aria-label="Projects"
1111
>Projects</router-link
1212
>
1313
<router-link
1414
to="/about"
15-
class="block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light sm:mx-4 mb-2 sm:py-2 border-t-2 pt-3 sm:pt-2 sm:border-t-0 border-primary-light dark:border-secondary-dark"
15+
class="font-general-medium block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light sm:mx-4 mb-2 sm:py-2 border-t-2 pt-3 sm:pt-2 sm:border-t-0 border-primary-light dark:border-secondary-dark"
1616
aria-label="About Me"
1717
>About Me</router-link
1818
>
1919
<router-link
2020
to="/contact"
21-
class="block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light sm:mx-4 mb-2 sm:py-2 border-t-2 pt-3 sm:pt-2 sm:border-t-0 border-primary-light dark:border-secondary-dark"
21+
class="font-general-medium block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light sm:mx-4 mb-2 sm:py-2 border-t-2 pt-3 sm:pt-2 sm:border-t-0 border-primary-light dark:border-secondary-dark"
2222
aria-label="Contact"
2323
>Contact</router-link
2424
>
2525
<div
2626
class="border-t-2 pt-3 sm:pt-0 sm:border-t-0 border-primary-light dark:border-secondary-dark"
2727
>
2828
<button
29-
class="sm:hidden block text-left text-md font-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-sm px-4 py-2 mt-2"
29+
class="font-general-medium sm:hidden block text-left text-md font-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-sm px-4 py-2 mt-2"
3030
@click="showModal()"
3131
aria-label="Hire Me Button"
3232
>

0 commit comments

Comments
 (0)