update style

main.js

@@ -1,90 +1,10 @@
-/* exported app, utils */
-
-const utils = {
-    ajax: {
-        proxy: 'cors-anywhere.herokuapp.com',
-        /**
-         * Define a get HTTP request to be executed with .then/.catch
-         * @param {string} url
-         * @param {Object} data
-         * @param {boolean} proxy - use cors proxy
-         * @returns {Promise<Object|string>} return JSON parsed data or string
-         */
-        get: (url, data, proxy = false) => {
-            return new Promise((resolve, reject) => {
-                if (data && Object.keys(data).length) {
-                    url += '?' + Object.keys(data)
-                        .map(k => k + '=' + encodeURIComponent(data[k]))
-                        .join('&')
-                        .replace(/%20/g, '+');
-                }
-                const xhr = new XMLHttpRequest();
-                if (proxy) {
-                    const http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
-                    url = `${http}//${utils.ajax.proxy}/${url}`;
-                }
-                xhr.open('GET', url);
-                xhr.onload = () => {
-                    try {
-                        resolve(JSON.parse(xhr.responseText));
-                    } catch (ignored) {
-                        resolve(xhr.responseText);
-                    }
-                };
-                xhr.onerror = () => reject(xhr);
-                xhr.send();
-            });
-        },
-    },
-    cookies: {
-    /**
-     * Save a value in a cookie
-     * @param {string} name
-     * @param {string} value
-     * @param {number | undefined} days
-     */
-        set: function (name, value, days = undefined) {
-            const maxAge = !days ? undefined : days * 864e2;
-            document.cookie = `${name}=${encodeURIComponent(value)}${maxAge ? `;max-age=${maxAge};` : ''}`;
-        },
-        /**
-         * Get a value from a cookie
-         * @param {string} name
-         * @return {string} value from cookie or empty if not found
-         */
-        get: function (name) {
-            return document.cookie.split('; ').reduce(function (r, v) {
-                const parts = v.split('=');
-                return parts[0] === name ? decodeURIComponent(parts[1]) : r;
-            }, '');
-        },
-        /**
-         * Delete a cookie
-         * @param {string} name
-         */
-        delete: function (name) {
-            this.set(name, '', -1);
-        },
-        /**
-         * Clear all cookies
-         */
-        clear: function () {
-            const cookies = document.cookie.split(';');
-            for (let i = 0; i < cookies.length; i++) {
-                const cookie = cookies[i];
-                const eqPos = cookie.indexOf('=');
-                const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
-                document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT`;
-            }
-        },
-    },
-};
-
+/* exported app */
 let app = {
   data() {
     return {
-            title: 'Vue-Boilerplate',
-            content: 'Fill this page with <i>whatever</i> you\'re going to develop.<br><b>Then enjoy!</b>',
+      title: "Vue-Boilerplate",
+      content:
+        "Fill this page with <i>whatever</i> you're going to develop.<br><b>Then enjoy!</b>",
     };
   },
   computed: {
@@ -94,16 +14,16 @@ let app = {
   },
   methods: {
     showApp() {
-            document.getElementById('app').setAttribute('style', '');
+      document.getElementById("app").setAttribute("style", "");
     },
   },
   mounted: function () {
-        console.log('app mounted');
+    console.log("app mounted");
     setTimeout(this.showApp);
   },
 };
 
 window.onload = () => {
   app = Vue.createApp(app);
-    app.mount('#app');
+  app.mount("#app");
 };

style.css

@@ -80,12 +80,16 @@ CUSTOM STYLE
 ================================================= 
 */
 
+@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+
 :root {
   /* https://materialui.co/colors/ */
   --hue-primary: 65.52;
-  --sat-primary: 69.96%;
+  --sat-primary: 20%;
   --background: hsl(var(--hue-primary), var(--sat-primary), 96.08%);
   --background-primary: hsl(var(--hue-primary), var(--sat-primary), 93.33%);
+  --background-secondary: hsl(var(--hue-primary), var(--sat-primary), 90%);
   --color-primary: hsl(var(--hue-primary), var(--sat-primary), 50%);
   --text-primary: hsl(var(--hue-primary), var(--sat-primary), 25%);
   --text-secondary: hsl(var(--hue-primary), var(--sat-primary), 30%);
@@ -99,16 +103,12 @@ https://gist.github.com/JoeyBurzynski/617fb6201335779f8424ad9528b72c41
 ================================================= 
 */
 
-* {
-  box-sizing: border-box;
-  font-family: Verdana, serif;
-  color: var(--text-primary);
-}
-
 html,
 body {
   padding: 0;
   max-width: 100%;
+  color: var(--text-primary);
+  font-family: "Roboto", Verdana, serif;
 }
 
 body {
@@ -122,10 +122,6 @@ main {
   min-height: 100%;
 }
 
-h1 {
-  margin-bottom: 0.5em;
-}
-
 table {
   border-collapse: collapse;
   width: 100%;
@@ -138,7 +134,7 @@ h3,
 h4,
 h5,
 h6 {
-  margin: 1.5em 0 0.5em;
+  margin: 1em 0 0.5em;
 }
 
 p,
@@ -146,7 +142,23 @@ ul,
 ol {
   margin-bottom: 2em;
   color: var(--text-secondary);
-  font-family: sans-serif;
+}
+
+textarea,
+input,
+select,
+.mono {
+  font-family: "Roboto Mono", monospace;
+}
+
+textarea {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+}
+
+a {
+  color: inherit;
 }
 
 @media only screen and (min-width: 768px) {