Merge pull request #30 from marko-js/design-updates

chore: move away from google fonts

Author: DylanPiercey

package-lock.json

@@ -36,6 +36,8 @@
     "deploy": "marko-run build && gh-pages --cname next.markojs.com --nojekyll -d dist/public -u \"marko-js <noreply@markojs.com>\""
   },
   "devDependencies": {
+    "@fontsource/ubuntu": "^5.2.5",
+    "@fontsource/ubuntu-mono": "^5.2.5",
     "@marko/type-check": "^1.3.21",
     "@types/node": "^22.15.19",
     "autoprefixer": "^10.4.21",

package.json

@@ -5,16 +5,13 @@ html lang="en"
     meta name="viewport" content="width=device-width, initial-scale=1.0"
     meta name="description" content="The Marko programming language"
     title
-      if=hasPageTitle($global.meta) -- ${$global.meta.pageTitle} | 
+      if=typeof ($global.meta as any).pageTitle === "string"
+        -- ${($global.meta as any).pageTitle} | 
       -- Marko
 
     link rel="icon" sizes="32x32" href="/fav.png"
     link rel="icon" type="image/svg+xml" href="/fav.svg"
     link rel="preconnect" href="https://GB0QQV5RQM-dsn.algolia.net" crossorigin
-    link rel="preconnect" href="https://fonts.googleapis.com"
-    link rel="preconnect" href="https://fonts.gstatic.com" crossorigin
-    link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
-    link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap"
 
   body
     #root
@@ -23,7 +20,7 @@ html lang="en"
         app-menu
         ${input.content}
 
-    if=showFooter($global.meta)
+    if=!($global.meta as any).hideFooter
       app-footer
 
     script --
@@ -46,14 +43,3 @@ html lang="en"
         { signal: $signal },
       );
 
-static function hasPageTitle(
-  meta: unknown,
-): meta is { pageTitle: string } {
-  return typeof (meta as any).pageTitle === "string";
-}
-
-static function showFooter(
-  meta: unknown,
-): meta is { hideFooter: boolean } {
-  return !(meta as any).hideFooter;
-}

src/routes/+layout.marko

@@ -1,4 +1,10 @@
 @use "app/styles/colors" as colors;
+@import "@fontsource/ubuntu/300.css";
+@import "@fontsource/ubuntu/400.css";
+@import "@fontsource/ubuntu/500.css";
+@import "@fontsource/ubuntu/700.css";
+@import "@fontsource/ubuntu-mono/400.css";
+
 @include colors.init;
 
 :root {

src/routes/+layout.style.scss

@@ -62,7 +62,7 @@
 
   &Title {
     font-size: 1.4em;
-    font-weight: 600;
+    font-weight: 700;
     display: block;
   }
   &Button {

src/routes/_home/tags/demo-page/demo-page.style.module.scss

@@ -54,10 +54,10 @@ $size: var(--footer-size);
 }
 
 .bold {
-  font-weight: 600;
+  font-weight: 500;
 }
 .light {
-  font-weight: 200;
+  font-weight: 300;
 }
 
 .separator {

src/tags/app-footer/app-footer.style.module.scss

@@ -79,7 +79,6 @@
     padding: 0 var(root-gap);
     justify-content: space-around;
     align-items: center;
-    font-weight: 300;
     font-size: 1.3rem;
     font-weight: 500;
     background-image: linear-gradient(

src/tags/app-header/app-header.style.module.scss

@@ -9,7 +9,7 @@ const/{ on, off, ...checkboxInput }=input
 
 label.${styles.label}
   span -- ${off}
-  span.${styles.switch}
+  span.${styles.appSwitch}
     input ...checkboxInput type="checkbox"
     fa-icon.${styles.off}=faToggleOff
     fa-icon.${styles.on}=faToggleOn

src/tags/app-switch/app-switch.marko

@@ -1,4 +1,4 @@
-.switch {
+.appSwitch {
   width: 1.5rem;
   > input {
     display: none;