Update fonts and styles

AstroCorp · Sep 28, 2024 · 34aa07c · 34aa07c
1 parent 1e9c5ef
commit 34aa07c
Show file tree

Hide file tree

Showing 32 changed files with 237 additions and 9 deletions.
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
@@ -2,8 +2,224 @@
 @tailwind components;
 @tailwind utilities;
 
-html {
-	@apply antialiased scroll-smooth;
+@layer base {
+	/* Wittgenstein */
+	@font-face {
+		font-family: 'Wittgenstein';
+		src: url('/fonts/Wittgenstein-Black.ttf') format('truetype');
+		font-weight: 900;
+		font-style: normal;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: 'Wittgenstein';
+		src: url('/fonts/Wittgenstein-BlackItalic.ttf') format('truetype');
+		font-weight: 900;
+		font-style: italic;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: 'Wittgenstein';
+		src: url('/fonts/Wittgenstein-Bold.ttf') format('truetype');
+		font-weight: 700;
+		font-style: normal;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: 'Wittgenstein';
+		src: url('/fonts/Wittgenstein-BoldItalic.ttf') format('truetype');
+		font-weight: 700;
+		font-style: italic;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: 'Wittgenstein';
+		src: url('/fonts/Wittgenstein-ExtraBold.ttf') format('truetype');
+		font-weight: 800;
+		font-style: normal;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: 'Wittgenstein';
+		src: url('/fonts/Wittgenstein-ExtraBoldItalic.ttf') format('truetype');
+		font-weight: 800;
+		font-style: italic;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: 'Wittgenstein';
+		src: url('/fonts/Wittgenstein-Italic.ttf') format('truetype');
+		font-weight: 400;
+		font-style: italic;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: 'Wittgenstein';
+		src: url('/fonts/Wittgenstein-Medium.ttf') format('truetype');
+		font-weight: 500;
+		font-style: normal;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: 'Wittgenstein';
+		src: url('/fonts/Wittgenstein-MediumItalic.ttf') format('truetype');
+		font-weight: 500;
+		font-style: italic;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: 'Wittgenstein';
+		src: url('/fonts/Wittgenstein-Regular.ttf') format('truetype');
+		font-weight: 400;
+		font-style: normal;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: 'Wittgenstein';
+		src: url('/fonts/Wittgenstein-SemiBold.ttf') format('truetype');
+		font-weight: 600;
+		font-style: normal;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: 'Wittgenstein';
+		src: url('/fonts/Wittgenstein-SemiBoldItalic.ttf') format('truetype');
+		font-weight: 600;
+		font-style: italic;
+		font-display: swap;
+	}
+
+	/* Rubik */
+	@font-face {
+		font-family: 'Rubik';
+		src: url('/fonts/Rubik-Black.ttf') format('truetype');
+		font-weight: 900;
+		font-style: normal;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: 'Rubik';
+		src: url('/fonts/Rubik-BlackItalic.ttf') format('truetype');
+		font-weight: 900;
+		font-style: italic;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: 'Rubik';
+		src: url('/fonts/Rubik-Bold.ttf') format('truetype');
+		font-weight: 700;
+		font-style: normal;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: 'Rubik';
+		src: url('/fonts/Rubik-BoldItalic.ttf') format('truetype');
+		font-weight: 700;
+		font-style: italic;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: 'Rubik';
+		src: url('/fonts/Rubik-ExtraBold.ttf') format('truetype');
+		font-weight: 800;
+		font-style: normal;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: 'Rubik';
+		src: url('/fonts/Rubik-ExtraBoldItalic.ttf') format('truetype');
+		font-weight: 800;
+		font-style: italic;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: 'Rubik';
+		src: url('/fonts/Rubik-Italic.ttf') format('truetype');
+		font-weight: 400;
+		font-style: italic;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: 'Rubik';
+		src: url('/fonts/Rubik-Light.ttf') format('truetype');
+		font-weight: 300;
+		font-style: normal;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: 'Rubik';
+		src: url('/fonts/Rubik-LightItalic.ttf') format('truetype');
+		font-weight: 300;
+		font-style: italic;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: 'Rubik';
+		src: url('/fonts/Rubik-Medium.ttf') format('truetype');
+		font-weight: 500;
+		font-style: normal;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: 'Rubik';
+		src: url('/fonts/Rubik-MediumItalic.ttf') format('truetype');
+		font-weight: 500;
+		font-style: italic;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: 'Rubik';
+		src: url('/fonts/Rubik-Regular.ttf') format('truetype');
+		font-weight: 400;
+		font-style: normal;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: 'Rubik';
+		src: url('/fonts/Rubik-SemiBold.ttf') format('truetype');
+		font-weight: 600;
+		font-style: normal;
+		font-display: swap;
+	}
+
+	@font-face {
+		font-family: 'Rubik';
+		src: url('/fonts/Rubik-SemiBoldItalic.ttf') format('truetype');
+		font-weight: 600;
+		font-style: italic;
+		font-display: swap;
+	}
+
+	html {
+		@apply antialiased scroll-smooth font-Rubik;
+	}
+}
+
+.logo {
+	@apply text-logo font-Wittgenstein font-semibold;
 }
 
 .nuxt-icon svg {

diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -44,7 +44,7 @@ onBeforeMount(() => {
 			<nav class="flex items-center p-4 flex-wrap">
 				<NuxtLinkLocale
 					to="/"
-					class="p-2 mr-4 inline-flex items-center text-4xl cursor-pointer text-white text-shadow shadow-black/70"
+					class="mr-4 inline-flex items-center logo cursor-pointer text-white text-shadow shadow-black/70"
 				>
 					Ace Books
 				</NuxtLinkLocale>

diff --git a/src/pages/auth/login.vue b/src/pages/auth/login.vue
@@ -80,8 +80,9 @@ const submitForm = async (event: Event) => {
 
 			<div class="flex flex-row items-center lg:px-8 w-full min-h-svh sm:w-1/2 md:w-2/5 xl:w-2/6 bg-white">
 				<form class="w-full px-6 py-4" @submit="submitForm">
-					<NuxtLinkLocale to="/" class="flex w-1/3 mx-auto mb-4 xl:mb-5">
-						<nuxt-icon name="logo" class="w-full" />
+					<NuxtLinkLocale to="/" class="flex flex-col items-center mb-4 xl:mb-5">
+						<nuxt-icon name="logo" class="w-1/3" />
+						<p class="mt-3 logo">Ace Books</p>
 					</NuxtLinkLocale>
 
 					<label class="block text-sm font-medium text-gray-700">{{ t('login.email') }}</label>

diff --git a/src/pages/auth/register.vue b/src/pages/auth/register.vue
@@ -101,8 +101,9 @@ const submitForm = async (event: Event) => {
 
 			<div class="flex flex-row items-center lg:px-8 w-full min-h-svh sm:w-1/2 md:w-2/5 xl:w-2/6 bg-white">
 				<form class="w-full px-6 py-4" @submit="submitForm">
-					<NuxtLinkLocale to="/" class="flex w-1/3 mx-auto mb-4 xl:mb-5">
-						<nuxt-icon name="logo" class="w-full" />
+					<NuxtLinkLocale to="/" class="flex flex-col items-center mb-4 xl:mb-5">
+						<nuxt-icon name="logo" class="w-1/3" />
+						<p class="mt-3 logo">Ace Books</p>
 					</NuxtLinkLocale>
 
 					<label class="block text-sm font-medium text-gray-700">{{ t('register.email') }}</label>

diff --git a/src/pages/auth/reset.vue b/src/pages/auth/reset.vue
@@ -32,8 +32,9 @@ useHead({
 
 			<div class="flex flex-row items-center lg:px-8 w-full min-h-svh sm:w-1/2 md:w-2/5 xl:w-2/6 bg-white">
 				<form class="w-full px-6 py-4">
-					<NuxtLinkLocale to="/" class="flex w-1/3 mx-auto mb-4 xl:mb-5">
-						<nuxt-icon name="logo" class="w-full" />
+					<NuxtLinkLocale to="/" class="flex flex-col items-center mb-4 xl:mb-5">
+						<nuxt-icon name="logo" class="w-1/3" />
+						<p class="mt-3 logo">Ace Books</p>
 					</NuxtLinkLocale>
 
 					<label class="block text-sm font-medium text-gray-700">{{ t('reset.email') }}</label>

diff --git a/src/public/fonts/Rubik-Black.ttf b/src/public/fonts/Rubik-Black.ttf
diff --git a/src/public/fonts/Rubik-BlackItalic.ttf b/src/public/fonts/Rubik-BlackItalic.ttf
diff --git a/src/public/fonts/Rubik-Bold.ttf b/src/public/fonts/Rubik-Bold.ttf
diff --git a/src/public/fonts/Rubik-BoldItalic.ttf b/src/public/fonts/Rubik-BoldItalic.ttf
diff --git a/src/public/fonts/Rubik-ExtraBold.ttf b/src/public/fonts/Rubik-ExtraBold.ttf
diff --git a/src/public/fonts/Rubik-ExtraBoldItalic.ttf b/src/public/fonts/Rubik-ExtraBoldItalic.ttf
diff --git a/src/public/fonts/Rubik-Italic.ttf b/src/public/fonts/Rubik-Italic.ttf
diff --git a/src/public/fonts/Rubik-Light.ttf b/src/public/fonts/Rubik-Light.ttf
diff --git a/src/public/fonts/Rubik-LightItalic.ttf b/src/public/fonts/Rubik-LightItalic.ttf
diff --git a/src/public/fonts/Rubik-Medium.ttf b/src/public/fonts/Rubik-Medium.ttf
diff --git a/src/public/fonts/Rubik-MediumItalic.ttf b/src/public/fonts/Rubik-MediumItalic.ttf
diff --git a/src/public/fonts/Rubik-Regular.ttf b/src/public/fonts/Rubik-Regular.ttf
diff --git a/src/public/fonts/Rubik-SemiBold.ttf b/src/public/fonts/Rubik-SemiBold.ttf
diff --git a/src/public/fonts/Rubik-SemiBoldItalic.ttf b/src/public/fonts/Rubik-SemiBoldItalic.ttf
diff --git a/src/public/fonts/Wittgenstein-Black.ttf b/src/public/fonts/Wittgenstein-Black.ttf
diff --git a/src/public/fonts/Wittgenstein-BlackItalic.ttf b/src/public/fonts/Wittgenstein-BlackItalic.ttf
diff --git a/src/public/fonts/Wittgenstein-Bold.ttf b/src/public/fonts/Wittgenstein-Bold.ttf
diff --git a/src/public/fonts/Wittgenstein-BoldItalic.ttf b/src/public/fonts/Wittgenstein-BoldItalic.ttf
diff --git a/src/public/fonts/Wittgenstein-ExtraBold.ttf b/src/public/fonts/Wittgenstein-ExtraBold.ttf
diff --git a/src/public/fonts/Wittgenstein-ExtraBoldItalic.ttf b/src/public/fonts/Wittgenstein-ExtraBoldItalic.ttf
diff --git a/src/public/fonts/Wittgenstein-Italic.ttf b/src/public/fonts/Wittgenstein-Italic.ttf
diff --git a/src/public/fonts/Wittgenstein-Medium.ttf b/src/public/fonts/Wittgenstein-Medium.ttf
diff --git a/src/public/fonts/Wittgenstein-MediumItalic.ttf b/src/public/fonts/Wittgenstein-MediumItalic.ttf
diff --git a/src/public/fonts/Wittgenstein-Regular.ttf b/src/public/fonts/Wittgenstein-Regular.ttf
diff --git a/src/public/fonts/Wittgenstein-SemiBold.ttf b/src/public/fonts/Wittgenstein-SemiBold.ttf
diff --git a/src/public/fonts/Wittgenstein-SemiBoldItalic.ttf b/src/public/fonts/Wittgenstein-SemiBoldItalic.ttf
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -12,6 +12,15 @@ export default {
 	],
 	theme: {
 		extend: {
+			fontFamily: {
+				'Rubik': ['Rubik', 'sans-serif'],
+				'Wittgenstein': ['Wittgenstein', 'serif'],
+			},
+			fontSize: {
+				'logo': ['2.5rem', {
+					lineHeight: '1',
+				}],
+			},
 			textShadow: {
 				DEFAULT: '0 2px 5px var(--tw-shadow-color)',
 			},