change main font
This commit is contained in:
+9
-5
@@ -58,7 +58,7 @@
|
|||||||
--color-mc-container-top: 90, 91, 92;
|
--color-mc-container-top: 90, 91, 92;
|
||||||
--color-mc-container-bottom: 50, 51, 52;
|
--color-mc-container-bottom: 50, 51, 52;
|
||||||
|
|
||||||
--font-sans: NotoSansVariable, NotoSansThai, sans-serif;
|
--font-sans: TikTokSans, NotoSansThai, sans-serif;
|
||||||
--font-mono: NotoSansMono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
--font-mono: NotoSansMono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||||
|
|
||||||
--ease-fluid: 0.2, 0, 0, 1;
|
--ease-fluid: 0.2, 0, 0, 1;
|
||||||
@@ -66,12 +66,12 @@
|
|||||||
}
|
}
|
||||||
@supports (font-variation-settings: normal) {
|
@supports (font-variation-settings: normal) {
|
||||||
:root {
|
:root {
|
||||||
--font-sans: NotoSansVariable, NotoSansThaiVariable, sans-serif;
|
--font-sans: TikTokSansVariable, NotoSansThaiVariable, sans-serif;
|
||||||
--font-monospace: NotoSansMonoVariable, NotoSansThaiVariable, sans-serif;
|
--font-monospace: NotoSansMonoVariable, NotoSansThaiVariable, sans-serif;
|
||||||
font-optical-sizing: auto;
|
font-optical-sizing: auto;
|
||||||
font-variation-settings:
|
font-variation-settings:
|
||||||
"slnt" 0,
|
"slnt" 0,
|
||||||
"wdth" 100;
|
"wdth" 92.5;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.dark-mode {
|
.dark-mode {
|
||||||
@@ -121,8 +121,8 @@ body,main {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
color: var(--ui-text-muted);
|
color: var(--ui-text-muted);
|
||||||
background-color: var(--ui-bg);
|
background-color: var(--ui-bg);
|
||||||
/* font-size: 20px;
|
font-size: 20px;
|
||||||
line-height: 1.35; */
|
line-height: 1.35;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
.web-header, .web-footer, main, footer {
|
.web-header, .web-footer, main, footer {
|
||||||
@@ -173,12 +173,16 @@ p {
|
|||||||
}
|
}
|
||||||
.font-hero {
|
.font-hero {
|
||||||
@apply text-6xl sm:text-7xl md:text-8xl font-bold my-[.2em];
|
@apply text-6xl sm:text-7xl md:text-8xl font-bold my-[.2em];
|
||||||
|
font-variation-settings:
|
||||||
|
"wdth" 125;
|
||||||
}
|
}
|
||||||
.font-hero-desc {
|
.font-hero-desc {
|
||||||
@apply text-2xl font-medium;
|
@apply text-2xl font-medium;
|
||||||
}
|
}
|
||||||
.web-title {
|
.web-title {
|
||||||
@apply text-5xl sm:text-6xl my-[.2em] transition-[color] ease-fluid duration-100;
|
@apply text-5xl sm:text-6xl my-[.2em] transition-[color] ease-fluid duration-100;
|
||||||
|
font-variation-settings:
|
||||||
|
"wdth" 125;
|
||||||
a {
|
a {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|||||||
+2
-2
@@ -57,8 +57,8 @@ export default defineNuxtConfig({
|
|||||||
// { rel: 'stylesheet', href: '/style.css' },
|
// { rel: 'stylesheet', href: '/style.css' },
|
||||||
// TYPEFACES
|
// TYPEFACES
|
||||||
// { rel: 'stylesheet', href: '/fonts/roboto/roboto.css' },
|
// { rel: 'stylesheet', href: '/fonts/roboto/roboto.css' },
|
||||||
// { rel: 'stylesheet', href: '/fonts/tiktoksans/tiktoksans.css' },
|
{ rel: 'stylesheet', href: '/fonts/tiktoksans/tiktoksans.css' },
|
||||||
{ rel: 'stylesheet', href: '/fonts/noto/thai/noto+sans.css' },
|
// { rel: 'stylesheet', href: '/fonts/noto/thai/noto+sans.css' },
|
||||||
{ rel: 'stylesheet', href: '/fonts/noto/mono/noto+sans+mono.css' },
|
{ rel: 'stylesheet', href: '/fonts/noto/mono/noto+sans+mono.css' },
|
||||||
// { rel: 'stylesheet', href: '/fonts/roboto/mono/mono.css' },
|
// { rel: 'stylesheet', href: '/fonts/roboto/mono/mono.css' },
|
||||||
// { rel: 'stylesheet', href: '/fonts/roboto/serif/serif.css' },
|
// { rel: 'stylesheet', href: '/fonts/roboto/serif/serif.css' },
|
||||||
|
|||||||
Reference in New Issue
Block a user