use circle logo and cache fonts

layouts/secondLevel.vue

@@ -46,6 +46,8 @@
           display: inline-block;
           margin-right: 5px;
           @include arrow(12px, -90deg, white);
+
+          transition: border-color 400ms;
         }
 
         &:hover {

nuxt.config.js

@@ -21,9 +21,15 @@ module.exports = {
     author: "Moritz Ruth",
     mobileAppIOS: false,
     nativeUI: true,
-    "short_name": "ctexxx",
-    "background_color": "#212121",
-    "theme_color": "#212121"
+    shortName: "ctexxx",
+    backgroundColor: "#212121",
+    themeColor: "#212121"
+  },
+
+  workbox: {
+    importScripts: [
+      "fontSW.js"
+    ]
   },
 
   /*

static/fontSW.js

@@ -0,0 +1,24 @@
+// Cache the Google Fonts stylesheets with a stale-while-revalidate strategy.
+workbox.routing.registerRoute(
+  /^https:\/\/fonts\.googleapis\.com/,
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: 'google-fonts-stylesheets',
+  })
+);
+
+// Cache the underlying font files with a cache-first strategy for 1 year.
+workbox.routing.registerRoute(
+  /^https:\/\/fonts\.gstatic\.com/,
+  new workbox.strategies.CacheFirst({
+    cacheName: 'google-fonts-webfonts',
+    plugins: [
+      new workbox.cacheableResponse.Plugin({
+        statuses: [0, 200],
+      }),
+      new workbox.expiration.Plugin({
+        maxAgeSeconds: 60 * 60 * 24 * 365,
+        maxEntries: 30,
+      }),
+    ],
+  })
+);