Merge pull request #73 from yanosea/71-change-all-fonts

✨feat: change all fonts

front/package.json

@@ -16,6 +16,8 @@
     "@astrojs/rss": "^4.0.5",
     "@astrojs/sitemap": "^3.1.1",
     "@astrojs/tailwind": "^5.1.0",
+    "@fontsource/dotgothic16": "^5.0.19",
+    "@fontsource/zen-kaku-gothic-new": "^5.0.19",
     "@iconify-json/file-icons": "^1.1.8",
     "@iconify-json/mdi": "^1.1.64",
     "@iconify-json/ph": "^1.1.11",

front/src/components/FontToggleButton.astro

@@ -26,20 +26,22 @@ import { Icon } from "astro-icon/components";
   }
 
   function initializeFont() {
-    setFont("MaruMonica", false);
+    setFont("default", false);
   }
 
   function setFont(font, isToggle) {
-    if (font === "MaruMonica") {
-      document.body.style.fontFamily = "MaruMonica";
-      localStorage.setItem("currentFont", "MaruMonica");
+    if (font === "default") {
+      document.body.classList.add("font-default");
+      document.body.classList.remove("font-normal");
+      localStorage.setItem("currentFont", "default");
       document.getElementById("pixelizeButton").classList.add("hidden");
       document.getElementById("pixelizeButton").classList.remove("block");
       document.getElementById("unpixelizeButton").classList.remove("hidden");
       document.getElementById("unpixelizeButton").classList.add("block");
-    } else if (font === "PlemolJP") {
-      document.body.style.fontFamily = "PlemolJP";
-      localStorage.setItem("currentFont", "PlemolJP");
+    } else if (font === "normal") {
+      document.body.classList.add("font-normal");
+      document.body.classList.remove("font-default");
+      localStorage.setItem("currentFont", "normal");
       document.getElementById("unpixelizeButton").classList.add("hidden");
       document.getElementById("unpixelizeButton").classList.remove("block");
       document.getElementById("pixelizeButton").classList.remove("hidden");
@@ -68,10 +70,10 @@ import { Icon } from "astro-icon/components";
 
   function toggleFont() {
     let currentFont = localStorage.getItem("currentFont");
-    if (currentFont === "MaruMonica") {
-      setFont("PlemolJP", true);
-    } else if (currentFont === "PlemolJP") {
-      setFont("MaruMonica", true);
+    if (currentFont === "default") {
+      setFont("normal", true);
+    } else if (currentFont === "normal") {
+      setFont("default", true);
     } else {
       initializeFont();
     }

front/src/components/Footer.astro

@@ -6,9 +6,9 @@ import SpotifyStatus from "@/components/SpotifyStatus.astro";
 <div class="sticky top-[100vh] w-full items-center px-6 py-6 space-y-4">
   <SpotifyStatus />
   <span class="flex justify-center text-center w-full space-x-4">
-    <span id="yanopPortfolioCopyRight" class="text-lg" transition:persist
+    <span id="yanopPortfolioCopyRight" class="text-sm" transition:persist
     ></span>
-    <span id="yanopPortfolioVersion" class="text-lg" transition:persist></span>
+    <span id="yanopPortfolioVersion" class="text-sm" transition:persist></span>
     <span
       class="flex space-x-4 border-main dark:border-main-dark border-l pl-4"
     >

front/src/components/IconTextLink.astro

@@ -20,5 +20,5 @@ const { href, icon, icon_color, text, text_color, targetBlank } = Astro.props;
   rel={targetBlank ? "noopener noreferrer" : undefined}
 >
   <Icon class=`w-6 h-6 ${icon_color}` name={icon} />
-  <span class=`ml-2 text-lg tracking-widest ${text_color}`>{text}</span>
+  <span class=`ml-2 text-sm tracking-widest ${text_color}`>{text}</span>
 </a>

front/src/components/SpotifyStatus.astro

@@ -26,7 +26,7 @@ import { Icon } from "astro-icon/components";
         </span>
       </a>
     </span>
-    <span class="flex flex-col justify-center">
+    <span class="flex flex-col justify-center space-y-1">
       <a
         href="https://open.spotify.com/user/314sfaf6ikzxgxpur7hwflapmc4m"
         target="_blank"
@@ -82,7 +82,7 @@ import { Icon } from "astro-icon/components";
         </span>
       </a>
     </span>
-    <span class="flex flex-col justify-center">
+    <span class="flex flex-col justify-center space-y-1">
       <a
         href="https://open.spotify.com/user/314sfaf6ikzxgxpur7hwflapmc4m"
         target="_blank"

front/src/components/Title.astro

@@ -12,6 +12,6 @@ const { icon, title } = Astro.props;
 <div class="flex flex-col items-center">
   <span class="flex justify-center items-center mx-auto my-auto">
     <Icon class="w-8 sm:w-16 h-8 sm:h-16" name={icon} />
-    <p class="font-bold text-3xl sm:text-6xl ml-2 sm:ml-4">{title}</p>
+    <p class="font-bold text-xl sm:text-4xl ml-2 sm:ml-4">{title}</p>
   </span>
 </div>

front/src/layouts/BaseLayout.astro

@@ -1,4 +1,7 @@
 ---
+import "@fontsource/dotgothic16/japanese-400.css";
+import "@fontsource/zen-kaku-gothic-new/japanese-400.css";
+
 import { ViewTransitions } from "astro:transitions";
 
 export interface Props {
@@ -45,9 +48,10 @@ const url = new URL(Astro.props.url || "", "https://yanosea.org/").toString();
     <meta name="twitter:image" content={imageUrl} />
     <ViewTransitions fallback="swap" />
     <script
+      is:inline
       type="text/partytown"
       src="https://www.googletagmanager.com/gtag/js?id=G-SDLQKC1YPM"></script>
-    <script type="text/partytown">
+    <script is:inline type="text/partytown">
       window.dataLayer = window.dataLayer || [];
       function gtag() {
         dataLayer.push(arguments);
@@ -57,7 +61,7 @@ const url = new URL(Astro.props.url || "", "https://yanosea.org/").toString();
     </script>
   </head>
   <body
-    class="min-h-screen font-default font-normal text-main dark:text-main-dark bg-background dark:bg-background-dark"
+    class="min-h-screen font-default text-sm text-main dark:text-main-dark bg-background dark:bg-background-dark"
   >
     <script is:inline>
       (function () {
@@ -89,22 +93,5 @@ const url = new URL(Astro.props.url || "", "https://yanosea.org/").toString();
       })();
     </script>
     <slot />
-    <style>
-      @font-face {
-        font-family: "MaruMonica";
-        src: url("/fonts/x12y16pxMaruMonica.woff2") format("woff2");
-        font-weight: normal;
-        font-style: normal;
-        font-display: swap;
-      }
-      @font-face {
-        font-family: "PlemolJP";
-        src: url("/fonts/PlemolJPConsoleNF.woff2") format("woff2");
-        font-weight: normal;
-        font-style: normal;
-        font-display: swap;
-        size-adjust: 75%;
-      }
-    </style>
   </body>
 </html>

front/src/pages/about/index.astro

@@ -20,7 +20,7 @@ const { Content } = await about[0].render();
             class="object-fill mx-auto"
           />
           <li>
-            <p class="text-4xl font-bold">
+            <p class="text-2xl font-bold">
               {about.data.greeting.subject}
             </p>
           </li>
@@ -29,7 +29,7 @@ const { Content } = await about[0].render();
           </li>
           {about.data.likes.map((like) => (
             <li>
-              <p class="text-2xl font-bold">
+              <p class="text-xl font-bold">
                 {like.subject}
               </p>
             </li>

front/src/pages/links/index.astro

@@ -13,7 +13,7 @@ const linksData = await getCollection("links");
   <ul>
     {
       linksData.map((links) => (
-        <li class="flex flex-col items-center justify-center space-y-8">
+        <li class="flex flex-col items-center justify-center space-y-10">
           {links.data.links.map((link) => (
             <IconTextLink
               href={link.url}

front/tailwind.config.cjs

@@ -5,8 +5,8 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        default: ["MaruMonica", "sans-serif"],
-        PlemolJP: ["PlemolJP", "sans-serif"]
+        default: ["DotGothic16", "sans-serif"],
+        normal: ["Zen Kaku Gothic New", "sans-serif"]
       },
       colors: {
         "main": "#3B4252",
@@ -27,10 +27,11 @@ module.exports = {
         "blue": "#5E81AC",
         "gray": "#D8DEE9",
         "gray-dark": "#4C566A",
-     },
+      },
       typography: (theme) => ({
         DEFAULT: {
           css: {
+            fontSize: '14px',
             maxWidth: "100%",
             color: theme("colors.main"),
             "h1, h2, h3, h4, h5, h6, strong": {
@@ -62,6 +63,7 @@ module.exports = {
         },
         dark: {
           css: {
+            fontSize: '14px',
             maxWidth: "100%",
             color: theme("colors.main-dark"),
             "h1, h2, h3, h4, h5, h6, strong": {