Initial commit
This commit is contained in:
Klemek
@@ -0,0 +1 @@
|
||||
.idea
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title><!-- TODO -->Change this you moron</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<script type="text/javascript" src="main.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- card related -->
|
||||
<!--
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta property="og:title" content="">
|
||||
<meta property="twitter:title" content="">
|
||||
<meta property="og:description" content="">
|
||||
<meta property="twitter:description" content="">
|
||||
<meta property="og:image" content="https://.../preview_640x320.jpg">
|
||||
<meta property="twitter:image" content="">
|
||||
<meta property="org:url" content="https://...">
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<main id="app" style="display:none">
|
||||
<h1>{{title}}</h1>
|
||||
<br>
|
||||
<p v-html="content"></p>
|
||||
<br>
|
||||
<small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a href="" target="_blank">Github Repository</a> - {{currentYear}}</small>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,109 @@
|
||||
/* 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`;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
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>',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
currentYear() {
|
||||
return new Date().getFullYear();
|
||||
},
|
||||
},
|
||||
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');
|
||||
};
|
||||
@@ -0,0 +1,159 @@
|
||||
/*
|
||||
=================================================
|
||||
https://www.joshwcomeau.com/css/custom-css-reset/
|
||||
=================================================
|
||||
*/
|
||||
|
||||
/*
|
||||
1. Use a more-intuitive box-sizing model.
|
||||
*/
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/*
|
||||
2. Remove default margin
|
||||
*/
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
/*
|
||||
3. Allow percentage-based heights in the application
|
||||
*/
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
/*
|
||||
Typographic tweaks!
|
||||
4. Add accessible line-height
|
||||
5. Improve text rendering
|
||||
*/
|
||||
body {
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
/*
|
||||
6. Improve media defaults
|
||||
*/
|
||||
img,
|
||||
picture,
|
||||
video,
|
||||
canvas,
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
/*
|
||||
7. Remove built-in form typography styles
|
||||
*/
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
/*
|
||||
8. Avoid text overflows
|
||||
*/
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
/*
|
||||
9. Create a root stacking context
|
||||
*/
|
||||
#root,
|
||||
#__next {
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
/*
|
||||
=================================================
|
||||
CUSTOM STYLE
|
||||
=================================================
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* https://materialui.co/colors/ */
|
||||
--hue-primary: 65.52;
|
||||
--sat-primary: 69.96%;
|
||||
--background: hsl(var(--hue-primary), var(--sat-primary), 96.08%);
|
||||
--background-primary: hsl(var(--hue-primary), var(--sat-primary), 93.33%);
|
||||
--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%);
|
||||
}
|
||||
|
||||
/*
|
||||
=================================================
|
||||
https://blog.koley.in/2019/339-bytes-of-responsive-css
|
||||
https://www.swyx.io/css-100-bytes
|
||||
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%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 1.5rem;
|
||||
margin: auto;
|
||||
background-color: var(--background-primary);
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 1.5em 0 0.5em;
|
||||
}
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
margin-bottom: 2em;
|
||||
color: var(--text-secondary);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
main {
|
||||
max-width: 42rem;
|
||||
}
|
||||
table {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user