Merge pull request #58 from yoanmarchal/fix--font-foic

improve font load & sizes
yoanmarchal · Mar 9, 2019 · d882f90 · d882f90
2 parents 9bd30ac + 6423704
commit d882f90
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 80 deletions.
diff --git a/components/BaelFooter.vue b/components/BaelFooter.vue
@@ -1,5 +1,5 @@
 <template>
-  <footer class="fill-gray-lighter xs-text-6 md-text-5">
+  <footer class="fill-gray-lighter xs-text-2 md-text-2">
     <div class="r no-gap">
       <div v-if="pagination" class="c-12 xs-text-left xs-p2 xs-border-right">
         <div class="item xs-text-center">
@@ -106,7 +106,7 @@
         </div>
       </div>
       <div class="c-12 xs-text-left xs-p2 xs-border">
-        <div class="item xs-text-6">
+        <div class="item xs-text-2">
           An open source design by
           <a href="https://jake101.com">
             jake101

diff --git a/components/BaelGrid.vue b/components/BaelGrid.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="xs-text-6 md-text-5">
+  <div class="xs-text-2 md-text-2">
     <div
       v-if="elements"
       class="r full-height browse"

diff --git a/components/BaelHeader.vue b/components/BaelHeader.vue
@@ -24,7 +24,7 @@
       <div
         v-if="blogtitle"
         style="z-index:55;"
-        class="c-12 xs-border-top  xs-p2 xs-text-6 titlebar"
+        class="c-12 xs-border-top  xs-p2 xs-text-2 titlebar"
       >
         <div class="item">
           <nuxt-link to="/" exact>
@@ -104,7 +104,7 @@ export default {
   }
 }
 </script>
-<style>
+<style lang="scss">
 #navbar {
   z-index: 999;
 }
@@ -129,10 +129,15 @@ nav {
 }
 .sitename {
   color: #000;
-  font-family: "Archivo Black", sans-serif;
+  font-family: arial, sans-serif;
   text-transform: uppercase;
-  font-weight: 400;
-  font-size: 18px;
+  font-weight: 900;
+  font-size: 2rem;
+
+  .wf-active & {
+    font-family: "Archivo Black";
+    font-weight: 400;
+  }
 }
 @media only screen and (max-width: 40rem) {
   .results {

diff --git a/components/SlideOut.vue b/components/SlideOut.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="zap-slideout xs-border xs-text-6 md-text-5"
+    class="zap-slideout xs-border xs-text-2 md-text-2"
     :class="{ isOpen: $store.state.menuIsActive }"
   >
     <div class="zap-slideout-opener">

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -68,19 +68,35 @@ export default {
 }
 </script>
 
-<style>
-html,
+<style lang="scss">
+:root {
+  font-size: 62.5%;
+}
+
 body {
+  font-size: 1rem;
+  image-rendering: optimizeQuality;
+  text-rendering: optimizeLegibility;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
+
+main {
+  font-size: 1.8rem;
+}
+
 .main-title {
-  font-size: 3rem;
-  font-family: "Archivo Black", sans-serif;
-  font-weight: 400;
+  font-size: 4.3rem;
+  font-family: arial, sans-serif;
+  font-weight: 900;
   line-height: 1;
+
+  .wf-active & {
+    font-family: "Archivo Black";
+    font-weight: 400;
+  }
 }
 .feat-wrapper {
   max-height: 55vh;

diff --git a/nuxt.config.js b/nuxt.config.js
@@ -31,7 +31,17 @@ module.exports = {
       }
     ],
     link: [
-      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" }
+      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
+      {
+        rel: "preconnect",
+        href: "https://fonts.googleapis.com/",
+        crossorigin: true
+      },
+      {
+        rel: "preconnect",
+        href: "https://fonts.gstatic.com/",
+        crossorigin: true
+      }
     ]
   },
   css: ["~/assets/grid.css", "bf-solid/dist/solid.latest.css"],

diff --git a/pages/blog/_slug.vue b/pages/blog/_slug.vue
@@ -1,52 +1,50 @@
 <template>
-  <main class="xs-border-bottom">
-    <div
-      class="full-height single xs-border-left xs-border-right"
-      :style="
-        `min-height:calc(100vh - ${navbarheight}px);margin-top:${navbarheight}px`
-      "
-    >
-      <div class="xs-mt2 xs-p2 bcg-item">
-        <div class="item xs-block xs-full-height">
-          <div v-if="theThumb" class="feat-wrapper">
-            <transition appear name="fade">
-              <img class="featured-image" :src="thumbnail" :alt="title" >
-            </transition>
-          </div>
-          <h1 class="xs-py3 main-title">
-            {{ title }}
-          </h1>
-          <no-ssr>
-            <div class="xs-mt-5 bold">
-              <ul class="list-unstyled xs-flex xs-flex-align-center">
-                <li
-                  v-if="this.$store.state.theCategory"
-                  class="xs-inline-block xs-mr1"
-                >
-                  <div class="tag fill-gray-darker xs-border">
-                    <nuxt-link
-                      :to="
-                        `/category/${this.$store.state.theCategory.toLowerCase()}`
-                      "
-                      class="tag__link text-white"
-                    >
-                      {{ this.$store.state.theCategory }}
-                    </nuxt-link>
-                  </div>
-                </li>
-                <li class="xs-inline-block">
-                  {{ date }}
-                </li>
-              </ul>
-            </div>
-          </no-ssr>
-          <div class="xs-py3 post-content text-gray-lighter">
-            <div v-html="$md.render(body)" />
+  <div
+    class="full-height single xs-border-left xs-border-right xs"
+    :style="
+      `min-height:calc(100vh - ${navbarheight}px);margin-top:${navbarheight}px`
+    "
+  >
+    <div class="xs-mt2 xs-p2 bcg-item">
+      <div class="item xs-block xs-full-height">
+        <div v-if="theThumb" class="feat-wrapper">
+          <transition appear name="fade">
+            <img class="featured-image" :src="thumbnail" :alt="title" >
+          </transition>
+        </div>
+        <h1 class="xs-py3 main-title">
+          {{ title }}
+        </h1>
+        <no-ssr>
+          <div class="xs-mt-5 bold">
+            <ul class="list-unstyled xs-flex xs-flex-align-center">
+              <li
+                v-if="this.$store.state.theCategory"
+                class="xs-inline-block xs-mr1"
+              >
+                <div class="tag fill-gray-darker xs-border">
+                  <nuxt-link
+                    :to="
+                      `/category/${this.$store.state.theCategory.toLowerCase()}`
+                    "
+                    class="tag__link text-white"
+                  >
+                    {{ this.$store.state.theCategory }}
+                  </nuxt-link>
+                </div>
+              </li>
+              <li class="xs-inline-block">
+                {{ date }}
+              </li>
+            </ul>
           </div>
+        </no-ssr>
+        <div class="xs-py3 post-content text-gray-lighter">
+          <div v-html="$md.render(body)" />
         </div>
       </div>
     </div>
-  </main>
+  </div>
 </template>
 <script>
 import MdWrapper from "~/components/MdWrapper"

diff --git a/pages/page/_slug.vue b/pages/page/_slug.vue
@@ -1,28 +1,26 @@
 <template>
-  <main>
-    <div
-      class="full-height single xs-border-left xs-border-right"
-      :style="
-        `min-height:calc(100vh - ${navbarheight}px);margin-top:${navbarheight}px`
-      "
-    >
-      <div class="xs-mt2 xs-p2 bcg-item">
-        <div class="item xs-block xs-full-height">
-          <div v-if="theThumb" class="fill-gray-lighter feat-wrapper">
-            <transition appear name="fade">
-              <img class="featured-image" :src="thumbnail" :alt="title">
-            </transition>
-          </div>
-          <h1 class="xs-py3 main-title">
-            {{ title }}
-          </h1>
-          <div class="xs-py3 post-content text-gray">
-            <div v-html="$md.render(body)" />
-          </div>
+  <div
+    class="full-height single xs-border-left xs-border-right"
+    :style="
+      `min-height:calc(100vh - ${navbarheight}px);margin-top:${navbarheight}px`
+    "
+  >
+    <div class="xs-mt2 xs-p2 bcg-item">
+      <div class="item xs-block xs-full-height">
+        <div v-if="theThumb" class="fill-gray-lighter feat-wrapper">
+          <transition appear name="fade">
+            <img class="featured-image" :src="thumbnail" :alt="title">
+          </transition>
+        </div>
+        <h1 class="xs-py3 main-title">
+          {{ title }}
+        </h1>
+        <div class="xs-py3 post-content text-gray">
+          <div v-html="$md.render(body)" />
         </div>
       </div>
     </div>
-  </main>
+  </div>
 </template>
 
 <script>