Added a compiler for sass, js and html

master
Guusvanmeerveld 3 years ago
parent 4607c918d9
commit 3fb419d530

@ -0,0 +1,23 @@
name: deploy
on:
push:
branches:
- master
jobs:
typescript:
runs-on: ubuntu-latest
steps:
- name: Setup checkout
uses: actions/checkout@v2
- name: Setup NodeJS v12
uses: actions/setup-node@v1
with:
node-version: 12
- name: Install Dependencies
run: yarn install
- name: Check for syntax errors
run: yarn test-build
- name: ESlint check
run: yarn lint

4
.gitignore vendored

@ -1,2 +1,4 @@
Magister Auto-Login.crx
Magister Auto-Login.pem
Magister Auto-Login.pem
node_modules
dist

@ -0,0 +1,9 @@
{
"trailingComma": "es5",
"useTabs": true,
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"printWidth": 100,
"arrowParens": "always"
}

@ -0,0 +1,3 @@
{
"prettier.configPath": ".prettierrc"
}

@ -0,0 +1,46 @@
module.exports = {
paths: {
"@stylesheets": "css",
"@scripts": "js",
"@pages": "html",
"@icons": "icons",
"@libraries": "lib"
},
interpreter: [
{
input: '.',
output: '.',
type: 'js',
},
{
input: 'pages/scripts',
output: 'js',
type: 'js',
},
{
input: 'pages',
output: 'html',
type: 'html',
},
{
input: 'stylesheets',
output: 'css',
type: 'sass',
},
{
input: 'icons',
output: 'icons',
type: 'other',
},
{
input: 'lib',
output: 'lib',
type: 'other',
},
{
input: 'manifest.json',
output: 'manifest.json',
type: 'file',
}
]
}

@ -1,25 +0,0 @@
body {
background-color: #282a2d;
}
* {
color: #c5c5c5!important;
}
.input-group-text {
color: #fff;
background-color: #1e2226;
border-color: #383f47;
}
.form-control, .bg-light {
background-color: #22262a!important;
color: #fff!important;
border-color: #383f47;
}
.btn-primary {
background-color: #0167d4;
}
.btn-primary:hover {
background-color: #0056b2;
}
.active.btn-primary {
background-color: #0052aa!important;
}

@ -1,19 +0,0 @@
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
if (changeInfo.status == 'complete' && tab.active) {
chrome.tabs.executeScript(tab.ib, {
file: 'js/login.js'
});
}
});
chrome.runtime.onInstalled.addListener(function () {
// open options.html
window.open('/options/index.html', '_blank');
chrome.storage.sync.set({
"enabled": true
});
chrome.browserAction.setBadgeText({
text: 'ON'
});
});

@ -1,69 +0,0 @@
const d = document.getElementById.bind(document);
const q = document.querySelector.bind(document);
document.querySelector('img[alt="Magister"]').remove(); // verwijderen van animatie linksboven
// user object moet gemaakt worden vanuit chrome.storage.sync
var snooze = ms => new Promise(res => setTimeout(res, ms));
function login() {
chrome.storage.sync.get(['school', 'number', 'password'], async function (result) {
if (d("scholenkiezer_value")) {
await waitForSel("#scholenkiezer_value");
if (d("scholenkiezer_value") && result.school) {
d("scholenkiezer_value").value = result.school;
d("scholenkiezer_value").dispatchEvent(new Event("input"));
};
await waitForSel(".selected");
if (q(".selected")) {
q(".selected").click();
}
}
await waitForSel("#username");
if (d("username") && result.number) {
d("username").value = result.number;
d("username").dispatchEvent(new Event("input"));
};
await waitForSel("#username_submit")
if (d("username_submit")) {
d("username_submit").click();
};
await waitForSel("#rswp_password")
if (d("rswp_password") && result.password) {
d("rswp_password").value = result.password;
d("rswp_password").dispatchEvent(new Event("input"));
};
await waitForSel("[id*=_submit]")
if (d("rswp_submit")) {
d("rswp_submit").click();
};
});
}
function waitForSel(s) {
return new Promise(res => {
setInterval(() => {
if (q(s)) {
res()
}
}, 10);
});
};
chrome.storage.sync.get(['enabled'], function (result){
if(result.enabled){
login();
};
});

@ -1,93 +0,0 @@
const d = document.getElementById.bind(document);
const qAll = document.querySelectorAll.bind(document);
d("save").addEventListener("click", save);
qAll(".login").forEach(s => {
s.addEventListener("keydown", e => {
if (e.key == "Enter") {
if (e.target.id == "school") {
d("number").focus()
};
if (e.target.id == "number") {
d("password").focus()
};
if (e.target.id == "password") {
save()
};
}
});
});
function save() {
var school = d("school").value;
var number = d("number").value;
var password = d("password").value;
try {
chrome.storage.sync.set({
"school": school,
"number": number,
"password": password
});
d("save").innerHTML = "Opgeslagen!"
} catch (e) {
d("save").innerHTML = "Fout"
d("save").className = "btn btn-danger float-right"
console.error(e);
}
};
function onLoad() {
chrome.storage.sync.get(['school', 'number', 'password'], function (result) {
if (result.school !== undefined) {
d("school").value = result.school
};
if (result.number !== undefined){
d("number").value = result.number
};
if (result.password !== undefined) {
d("password").value = "lolleukgeprobeerd"
};
});
chrome.storage.sync.get(['enabled'], function (result) {
d("switch").checked = result.enabled
});
chrome.storage.sync.get(['darkmode'], function (result) {
d("dark-mode").checked = result.darkmode
d("dark-link").disabled = !d("dark-mode").checked
});
d("switch").addEventListener("click", toggle)
d("dark-mode").addEventListener("click", darkMode)
};
function toggle() {
var checked = d("switch").checked;
chrome.storage.sync.set({
"enabled": checked
});
chrome.browserAction.setBadgeText({
text: checked ? "ON" : "OFF"
});
};
function darkMode() {
chrome.storage.sync.set({
"darkmode": d("dark-mode").checked
});
d("dark-link").disabled = !d("dark-mode").checked
}
onLoad()

@ -1,29 +0,0 @@
{
"name": "Magister Auto-Login",
"version": "2.0",
"manifest_version": 2,
"description": "Auto-Login for Magister 6 webapp.",
"options_page": "options/index.html",
"homepage_url": "http://mb-o.nl/autologin",
"background": {
"scripts": [
"js/background.js"
],
"persistent": true
},
"browser_action": {
"default_title": "Auto-login",
"default_popup": "/popup/index.html"
},
"icons": {
"16": "/icons/16x.png",
"32": "/icons/32x.png",
"48": "/icons/48x.png",
"128": "/icons/128x.png",
"256": "/icons/256x.png"
},
"permissions": [
"https://accounts.magister.net/*",
"storage"
]
}

@ -1,46 +0,0 @@
.material-switch > input[type="checkbox"] {
display: none;
}
.material-switch > label {
cursor: pointer;
margin-top: .8rem;
float: right;
height: 0px;
position: relative;
width: 40px;
}
.material-switch > label::before {
background: rgb(0, 0, 0);
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
border-radius: 8px;
content: '';
height: 16px;
margin-top: -8px;
position:absolute;
opacity: 0.3;
transition: all 0.4s ease-in-out;
width: 40px;
}
.material-switch > label::after {
background: rgb(255, 255, 255);
border-radius: 16px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
content: '';
height: 24px;
left: -4px;
margin-top: -8px;
position: absolute;
top: -4px;
transition: all 0.3s ease-in-out;
width: 24px;
}
.material-switch > input[type="checkbox"]:checked + label::before {
background: #007bff;
opacity: 0.5;
}
.material-switch > input[type="checkbox"]:checked + label::after {
background: #007bff;
left: 20px;
}

@ -1,29 +0,0 @@
.screen {
width: 100vw;
height: 100vh;
}
.copyright {
position: absolute;
margin: 7px;
right: 0;
bottom: 0;
}
.switch-span {
width: 2rem;
}
.enable {
position: absolute;
left: 1rem;
bottom: 1.7rem;
}
.darkcheck{
position: absolute;
margin: 7px;
right: 0px;
}
body {
min-width: 20rem;
}

@ -1,50 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Options | Magister Auto-Login</title>
<link rel="shortcut icon" href="/icons/128x.png">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="/materials-switches.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" id="dark-link" disabled href="/dark-mode.css">
</head>
<body>
<input id="dark-mode" type="checkbox" class="darkcheck"></input>
<div class="d-flex align-items-center screen">
<div class="container mt-3">
<div class="row">
<h1 class="mb-3">Magister Auto-Login</h1>
<span class="position-relative switch-span">
<div class="material-switch pull-right enable">
<input id="switch" type="checkbox">
<label for="switch" class="label-primary"></label>
</div>
</span>
</div>
<div class="row">
<div class="col">
<label for="">School:</label>
<input type="text" class="form-control mb-3 login" autofocus name="school" id="school" placeholder="Vul je school in">
<hr class="bg-light mb-3">
<label for="">Stamnummer</label>:</label>
<input type="text" class="form-control mb-3 login" autofocus name="number" id="number"
placeholder="Vul je stamnummer in">
<hr class="bg-light mb-3">
<label for="">Wachtwoord:</label>
<input type="password" class="form-control mb-3 login" name="password" id="password"
placeholder="Vul je wachtwoord in">
<hr class="bg-light mb-3">
<button class="btn-primary btn float-right" id="save">Opslaan</button>
</div>
</div>
</div>
<p class="copyright" title="Kleine credit naar Sam Taen">Door Martijn Oosterhuis & Guus van Meerveld</p>
</div>
<script src="/js/save.js"></script>
</body>
</html>

@ -0,0 +1,15 @@
{
"dependencies": {
"chalk": "^4.1.1",
"chokidar": "^3.5.2",
"fs-extra": "^10.0.0",
"minify": "^7.0.2",
"prettier": "^2.3.2",
"sass": "^1.36.0"
},
"scripts": {
"dev": "node src/builder/watch",
"build": "node src/builder",
"prettify": "prettier --write src"
}
}

@ -1,18 +0,0 @@
body {
min-width: 20rem;
min-height: 24rem;
}
.darkcheck{
position: absolute;
margin: 7px;
right: 0px;
}
.enable {
position: absolute;
bottom: 0;
left: 0;
margin-bottom: 10px;
margin-left: 20px;
}

@ -1,45 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="/materials-switches.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" id="dark-link" disabled href="/dark-mode.css">
</head>
<body>
<input id="dark-mode" type="checkbox" class="darkcheck"></input>
<div class="d-flex align-items-center screen">
<div class="container fluid mt-3">
<div class="row">
</div>
<div class="row">
<div class="col">
<label for="">School:</label>
<input type="text" class="form-control mb-3 login" autofocus name="school" id="school"
placeholder="Vul je school in">
<hr class="bg-light mb-3">
<label for="">Gebruikersnaam:</label>
<input type="text" class="form-control mb-3 login" autofocus name="number" id="number"
placeholder="Vul je gebruikersnaam in">
<hr class="bg-light mb-3">
<label for="">Wachtwoord:</label>
<input type="password" class="form-control mb-3 login" name="password" id="password"
placeholder="Vul je wachtwoord in">
<hr class="bg-light mb-3">
<button class="btn-primary btn float-right" id="save">Opslaan</button>
<div class="material-switch pull-right enable">
<input id="switch" type="checkbox">
<label for="switch" class="label-primary"></label>
</div>
</div>
</div>
</div>
</div>
<script src="/js/save.js"></script>
</body>
</html>

@ -0,0 +1,27 @@
// Runs when the extensions is updated
const updated = (tabId, changeInfo, tab) => {
if (changeInfo.status == 'complete' && tab.active) {
chrome.tabs.executeScript(tab.ib, {
file: 'login.js',
});
}
};
// Run when extensions is installed
const installed = () => {
window.open('@pages/options.html', '_blank');
chrome.storage.sync.get('accounts', (accounts) => {
chrome.storage.sync.set({
enabled: true,
accounts: accounts || [],
});
});
chrome.browserAction.setBadgeText({
text: 'ON',
});
};
chrome.tabs.onUpdated.addListener(updated);
chrome.runtime.onInstalled.addListener(installed);

@ -0,0 +1,128 @@
const fs = require('fs-extra');
const { join } = require('path');
const minify = require('minify');
const sass = require('sass');
const chalk = require('chalk');
const sassExtension = '.sass';
const config = require(join(process.cwd(), 'builder.config.js'));
/**
* Compiles files in a directory to a given directory
* @param {string} dir - The input directory
* @param {string} outDir - The output directory
* @param {string} fileExtension - The file extension
* @returns
*/
const builder = (dir, outDir, fileExtension) =>
dirChecker(outDir, () =>
fs.readdir(dir, (err, files) => {
if (err) throw new Error(err);
// Filter out other files
files = files.filter((file) => file.endsWith(fileExtension));
// Minify the files & write them to the build directory
files.forEach((file) => {
const t0 = performance.now();
compile(join(dir, file), fileExtension, (data) => {
const withPaths = replacePaths(data);
if (fileExtension === 'sass') {
file = file.replace(sassExtension, '.min.css');
}
fs.writeFile(join(outDir, file), withPaths, (err) => {
if (err) throw new Error(err);
const t1 = performance.now();
console.log(`${chalk.gray(file)} ${Math.round(t1 - t0)}ms`);
});
});
});
})
);
/**
* Compiles a string of data.
* @param {string} data
* @param {'sass' | 'js' | 'html'} type
* @param {(data) => void} callback
*/
const compile = (file, type, callback) => {
switch (type) {
case 'sass':
sass.render({ file, outputStyle: 'compressed' }, (err, data) =>
callback(data.css.toString())
);
return;
default:
return minify(file).then(callback).catch(console.log('Error compiling file ' + file))
}
};
/**
* Compiles a file
* @param {string} file - The input file
*/
const fileBuilder = (file, output) =>
fs.readFile(file, { encoding: 'utf-8' }, (err, data) => {
if (err) throw new Error(err);
const t0 = performance.now();
const withPaths = replacePaths(data);
fs.writeFile(output, withPaths, (err) => {
if (err) throw new Error(err);
const t1 = performance.now();
const path = file.split('/');
const fileName = path[path.length - 1];
console.log(`${chalk.gray(fileName)} ${Math.round(t1 - t0)}ms`);
});
});
/**
* Replaces all specified paths in builder.config.js with their definitions
* @param {string} data - The data that needs its paths replaced
* @returns
*/
const replacePaths = (data) => {
if (config.paths) {
Object.keys(config.paths).forEach((key) => {
data = data.replace(new RegExp(key, 'g'), '/' + config.paths[key]);
});
data = data.replace(sassExtension, '.min.css');
}
return data;
};
/**
* Checks if a directory exists and creates it if it doesn't.
* @param {string} dir - The directory to check
* @param {() => void} callback - The callback function
*/
const dirChecker = (dir, callback) => {
if (!fs.existsSync(dir)) {
fs.mkdir(dir, { recursive: true }, () => callback());
} else {
callback();
}
};
module.exports = {
builder,
fileBuilder,
};

@ -0,0 +1,24 @@
const { join } = require('path');
const fs = require('fs-extra');
const srcDir = join(process.cwd(), 'src');
const distDir = join(process.cwd(), 'dist');
const config = require(join(process.cwd(), 'builder.config.js'));
const { builder, fileBuilder, sassBuilder } = require('./builders');
if (config.interpreter) {
config.interpreter.forEach((interpreter) => {
const input = join(srcDir, interpreter.input);
const output = join(distDir, interpreter.output);
if (interpreter.type === 'js' || interpreter.type === 'html' || interpreter.type === 'sass') {
builder(input, output, interpreter.type);
} else if (interpreter.type === 'file') {
fileBuilder(input, output);
} else if (interpreter.type === 'other') {
fs.copy(input, output);
}
});
}

@ -0,0 +1,13 @@
const chokidar = require('chokidar');
const { join } = require('path');
const srcDir = join(process.cwd(), 'src');
const watcher = chokidar.watch(srcDir, {
persistent: true
});
// Check for changes in the src directory
watcher.on('change', (path) => {
const fileExtension = path.split('.').pop();
})

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

Before

Width:  |  Height:  |  Size: 382 B

After

Width:  |  Height:  |  Size: 382 B

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

Before

Width:  |  Height:  |  Size: 829 B

After

Width:  |  Height:  |  Size: 829 B

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

@ -0,0 +1,9 @@
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: url(./fonts/Roboto.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Binary file not shown.

@ -0,0 +1,647 @@
/*!
* Milligram v1.4.1
* https://milligram.io
*
* Copyright (c) 2020 CJ Patoilo
* Licensed under the MIT license
*/
*,
*:after,
*:before {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 62.5%;
}
body {
color: #606c76;
font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
font-size: 1.6em;
font-weight: 300;
letter-spacing: 0.01em;
line-height: 1.6;
}
blockquote {
border-left: 0.3rem solid #d1d1d1;
margin-left: 0;
margin-right: 0;
padding: 1rem 1.5rem;
}
blockquote *:last-child {
margin-bottom: 0;
}
.button,
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
background-color: #9b4dca;
border: 0.1rem solid #9b4dca;
border-radius: 0.4rem;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 1.1rem;
font-weight: 700;
height: 3.8rem;
letter-spacing: 0.1rem;
line-height: 3.8rem;
padding: 0 3rem;
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
}
.button:focus,
.button:hover,
button:focus,
button:hover,
input[type='button']:focus,
input[type='button']:hover,
input[type='reset']:focus,
input[type='reset']:hover,
input[type='submit']:focus,
input[type='submit']:hover {
background-color: #606c76;
border-color: #606c76;
color: #fff;
outline: 0;
}
.button[disabled],
button[disabled],
input[type='button'][disabled],
input[type='reset'][disabled],
input[type='submit'][disabled] {
cursor: default;
opacity: 0.5;
}
.button[disabled]:focus,
.button[disabled]:hover,
button[disabled]:focus,
button[disabled]:hover,
input[type='button'][disabled]:focus,
input[type='button'][disabled]:hover,
input[type='reset'][disabled]:focus,
input[type='reset'][disabled]:hover,
input[type='submit'][disabled]:focus,
input[type='submit'][disabled]:hover {
background-color: #9b4dca;
border-color: #9b4dca;
}
.button.button-outline,
button.button-outline,
input[type='button'].button-outline,
input[type='reset'].button-outline,
input[type='submit'].button-outline {
background-color: transparent;
color: #9b4dca;
}
.button.button-outline:focus,
.button.button-outline:hover,
button.button-outline:focus,
button.button-outline:hover,
input[type='button'].button-outline:focus,
input[type='button'].button-outline:hover,
input[type='reset'].button-outline:focus,
input[type='reset'].button-outline:hover,
input[type='submit'].button-outline:focus,
input[type='submit'].button-outline:hover {
background-color: transparent;
border-color: #606c76;
color: #606c76;
}
.button.button-outline[disabled]:focus,
.button.button-outline[disabled]:hover,
button.button-outline[disabled]:focus,
button.button-outline[disabled]:hover,
input[type='button'].button-outline[disabled]:focus,
input[type='button'].button-outline[disabled]:hover,
input[type='reset'].button-outline[disabled]:focus,
input[type='reset'].button-outline[disabled]:hover,
input[type='submit'].button-outline[disabled]:focus,
input[type='submit'].button-outline[disabled]:hover {
border-color: inherit;
color: #9b4dca;
}
.button.button-clear,
button.button-clear,
input[type='button'].button-clear,
input[type='reset'].button-clear,
input[type='submit'].button-clear {
background-color: transparent;
border-color: transparent;
color: #9b4dca;
}
.button.button-clear:focus,
.button.button-clear:hover,
button.button-clear:focus,
button.button-clear:hover,
input[type='button'].button-clear:focus,
input[type='button'].button-clear:hover,
input[type='reset'].button-clear:focus,
input[type='reset'].button-clear:hover,
input[type='submit'].button-clear:focus,
input[type='submit'].button-clear:hover {
background-color: transparent;
border-color: transparent;
color: #606c76;
}
.button.button-clear[disabled]:focus,
.button.button-clear[disabled]:hover,
button.button-clear[disabled]:focus,
button.button-clear[disabled]:hover,
input[type='button'].button-clear[disabled]:focus,
input[type='button'].button-clear[disabled]:hover,
input[type='reset'].button-clear[disabled]:focus,
input[type='reset'].button-clear[disabled]:hover,
input[type='submit'].button-clear[disabled]:focus,
input[type='submit'].button-clear[disabled]:hover {
color: #9b4dca;
}
code {
background: #f4f5f6;
border-radius: 0.4rem;
font-size: 86%;
margin: 0 0.2rem;
padding: 0.2rem 0.5rem;
white-space: nowrap;
}
pre {
background: #f4f5f6;
border-left: 0.3rem solid #9b4dca;
overflow-y: hidden;
}
pre > code {
border-radius: 0;
display: block;
padding: 1rem 1.5rem;
white-space: pre;
}
hr {
border: 0;
border-top: 0.1rem solid #f4f5f6;
margin: 3rem 0;
}
input[type='color'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
input[type='email'],
input[type='month'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
input[type='week'],
input:not([type]),
textarea,
select {
-webkit-appearance: none;
background-color: transparent;
border: 0.1rem solid #d1d1d1;
border-radius: 0.4rem;
box-shadow: none;
box-sizing: inherit;
height: 3.8rem;
padding: 0.6rem 1rem 0.7rem;
width: 100%;
}
input[type='color']:focus,
input[type='date']:focus,
input[type='datetime']:focus,
input[type='datetime-local']:focus,
input[type='email']:focus,
input[type='month']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='text']:focus,
input[type='url']:focus,
input[type='week']:focus,
input:not([type]):focus,
textarea:focus,
select:focus {
border-color: #9b4dca;
outline: 0;
}
select {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23d1d1d1" d="M0,0l6,8l6-8"/></svg>')
center right no-repeat;
padding-right: 3rem;
}
select:focus {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%239b4dca" d="M0,0l6,8l6-8"/></svg>');
}
select[multiple] {
background: none;
height: auto;
}
textarea {
min-height: 6.5rem;
}
label,
legend {
display: block;
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
fieldset {
border-width: 0;
padding: 0;
}
input[type='checkbox'],
input[type='radio'] {
display: inline;
}
.label-inline {
display: inline-block;
font-weight: normal;
margin-left: 0.5rem;
}
.container {
margin: 0 auto;
max-width: 112rem;
padding: 0 2rem;
position: relative;
width: 100%;
}
.row {
display: flex;
flex-direction: column;
padding: 0;
width: 100%;
}
.row.row-no-padding {
padding: 0;
}
.row.row-no-padding > .column {
padding: 0;
}
.row.row-wrap {
flex-wrap: wrap;
}
.row.row-top {
align-items: flex-start;
}
.row.row-bottom {
align-items: flex-end;
}
.row.row-center {
align-items: center;
}
.row.row-stretch {
align-items: stretch;
}
.row.row-baseline {
align-items: baseline;
}
.row .column {
display: block;
flex: 1 1 auto;
margin-left: 0;
max-width: 100%;
width: 100%;
}
.row .column.column-offset-10 {
margin-left: 10%;
}
.row .column.column-offset-20 {
margin-left: 20%;
}
.row .column.column-offset-25 {
margin-left: 25%;
}
.row .column.column-offset-33,
.row .column.column-offset-34 {
margin-left: 33.3333%;
}
.row .column.column-offset-40 {
margin-left: 40%;
}
.row .column.column-offset-50 {
margin-left: 50%;
}
.row .column.column-offset-60 {
margin-left: 60%;
}
.row .column.column-offset-66,
.row .column.column-offset-67 {
margin-left: 66.6666%;
}
.row .column.column-offset-75 {
margin-left: 75%;
}
.row .column.column-offset-80 {
margin-left: 80%;
}
.row .column.column-offset-90 {
margin-left: 90%;
}
.row .column.column-10 {
flex: 0 0 10%;
max-width: 10%;
}
.row .column.column-20 {
flex: 0 0 20%;
max-width: 20%;
}
.row .column.column-25 {
flex: 0 0 25%;
max-width: 25%;
}
.row .column.column-33,
.row .column.column-34 {
flex: 0 0 33.3333%;
max-width: 33.3333%;
}
.row .column.column-40 {
flex: 0 0 40%;
max-width: 40%;
}
.row .column.column-50 {
flex: 0 0 50%;
max-width: 50%;
}
.row .column.column-60 {
flex: 0 0 60%;
max-width: 60%;
}
.row .column.column-66,
.row .column.column-67 {
flex: 0 0 66.6666%;
max-width: 66.6666%;
}
.row .column.column-75 {
flex: 0 0 75%;
max-width: 75%;
}
.row .column.column-80 {
flex: 0 0 80%;
max-width: 80%;
}
.row .column.column-90 {
flex: 0 0 90%;
max-width: 90%;
}
.row .column .column-top {
align-self: flex-start;
}
.row .column .column-bottom {
align-self: flex-end;
}
.row .column .column-center {
align-self: center;
}
@media (min-width: 40rem) {
.row {
flex-direction: row;
margin-left: -1rem;
width: calc(100% + 2rem);
}
.row .column {
margin-bottom: inherit;
padding: 0 1rem;
}
}
a {
color: #9b4dca;
text-decoration: none;
}
a:focus,
a:hover {
color: #606c76;
}
dl,
ol,
ul {
list-style: none;
margin-top: 0;
padding-left: 0;
}
dl dl,
dl ol,
dl ul,
ol dl,
ol ol,
ol ul,
ul dl,
ul ol,
ul ul {
font-size: 90%;
margin: 1.5rem 0 1.5rem 3rem;
}
ol {
list-style: decimal inside;
}
ul {
list-style: circle inside;
}
.button,
button,
dd,
dt,
li {
margin-bottom: 1rem;
}
fieldset,
input,
select,
textarea {
margin-bottom: 1.5rem;
}
blockquote,
dl,
figure,
form,
ol,
p,
pre,
table,
ul {
margin-bottom: 2.5rem;
}
table {
border-spacing: 0;
display: block;
overflow-x: auto;
text-align: left;
width: 100%;
}
td,
th {
border-bottom: 0.1rem solid #e1e1e1;
padding: 1.2rem 1.5rem;
}
td:first-child,
th:first-child {
padding-left: 0;
}
td:last-child,
th:last-child {
padding-right: 0;
}
@media (min-width: 40rem) {
table {
display: table;
overflow-x: initial;
}
}
b,
strong {
font-weight: bold;
}
p {
margin-top: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 300;
letter-spacing: -0.1rem;
margin-bottom: 2rem;
margin-top: 0;
}
h1 {
font-size: 4.6rem;
line-height: 1.2;
}
h2 {
font-size: 3.6rem;
line-height: 1.25;
}
h3 {
font-size: 2.8rem;
line-height: 1.3;
}
h4 {
font-size: 2.2rem;
letter-spacing: -0.08rem;
line-height: 1.35;
}
h5 {
font-size: 1.8rem;
letter-spacing: -0.05rem;
line-height: 1.5;
}
h6 {
font-size: 1.6rem;
letter-spacing: 0;
line-height: 1.4;
}
img {
max-width: 100%;
}
.clearfix:after {
clear: both;
content: ' ';
display: table;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
/*# sourceMappingURL=milligram.css.map */

@ -0,0 +1,351 @@
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/