feat: update fonts

package.json

@@ -14,7 +14,6 @@
         "@divriots/jampack": "^0.21.1",
         "astro": "^3.4.0",
         "astro-seo": "^0.8.0",
-        "gotham-fonts": "github:SergioFloresG/gotham-fonts",
         "modern-normalize": "^2.0.0",
         "preact": "^10.6.5",
         "vite-plugin-pwa": "^0.16.5"

src/layouts/Layout.astro

@@ -3,8 +3,6 @@ import { SEO } from "astro-seo";
 import "modern-normalize/modern-normalize.css";
 import "../main.css";
 import { seoConfig, manifest } from "../../utils/seo.ts";
-import gothamBook from "gotham-fonts/webfonts/Gotham-Book.woff2";
-import gothamBold from "gotham-fonts/webfonts/Gotham-Bold.woff2";
 
 export interface Props {
     title?: string;
@@ -46,14 +44,14 @@ const ogTitle = Astro.props.ogTitle ?? title;
         />
         <link
             rel="preload"
-            href={gothamBook}
+            href="/fonts/URWGothic-Demi.woff2"
             as="font"
             type="font/woff2"
             crossorigin
         />
         <link
             rel="preload"
-            href={gothamBold}
+            href="/fonts/URWGothic-Book.woff2"
             as="font"
             type="font/woff2"
             crossorigin

src/main.css

@@ -1,13 +1,24 @@
 @import "./loading.css";
-@import "gotham-fonts/css";
+
+@font-face {
+    src: url("/fonts/URWGothic-Demi.woff2") format("woff2");
+    font-family: "URW Gothic";
+    font-weight: bold;
+}
+
+@font-face {
+    src: url("/fonts/URWGothic-Book.woff2") format("woff2");
+    font-family: "URW Gothic";
+    font-weight: normal;
+}
 
 html,
 body {
     height: 100%;
 }
 
 body {
-    font-family: "Gotham", system-ui, -apple-system, BlinkMacSystemFont,
+    font-family: "URW Gothic", system-ui, -apple-system, BlinkMacSystemFont,
         "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
         "Helvetica Neue", sans-serif;
     display: flex;
@@ -19,6 +30,12 @@ body {
     padding: 5rem;
 }
 
+@media (max-width: 600px) {
+    body {
+        padding: 3rem 5rem;
+    }
+}
+
 a {
     color: white;
     font-weight: bold;
@@ -32,6 +49,7 @@ h2 {
     font-size: 1.6rem;
 }
 
-.bottom {
+.footer {
     margin: auto 0 0 0;
+    text-align: center;
 }

src/pages/index.astro

@@ -33,7 +33,7 @@ import Layout from "../layouts/Layout.astro";
             <p>(Are you a nerd? Check the developer console.)</p>
         </div>
     </div>
-    <p class="bottom">
+    <p class="footer">
         Contact me:
         <a href="mailto:[email protected]">[email protected]</a>
     </p>