diff --git a/main.js b/main.js index 5dd8606..a84f3e4 100644 --- a/main.js +++ b/main.js @@ -1,109 +1,29 @@ -/* 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} 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 whatever you\'re going to develop.
Then enjoy!', - }; + data() { + return { + title: "Vue-Boilerplate", + content: + "Fill this page with whatever you're going to develop.
Then enjoy!", + }; + }, + computed: { + currentYear() { + return new Date().getFullYear(); }, - computed: { - currentYear() { - return new Date().getFullYear(); - }, - }, - methods: { - showApp() { - document.getElementById('app').setAttribute('style', ''); - }, - }, - mounted: function () { - console.log('app mounted'); - setTimeout(this.showApp); + }, + methods: { + showApp() { + document.getElementById("app").setAttribute("style", ""); }, + }, + mounted: function () { + console.log("app mounted"); + setTimeout(this.showApp); + }, }; window.onload = () => { - app = Vue.createApp(app); - app.mount('#app'); + app = Vue.createApp(app); + app.mount("#app"); }; diff --git a/style.css b/style.css index 108a155..f9c1b60 100644 --- a/style.css +++ b/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) {