max
/
mixsy
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

move CSS to an included file

This commit is contained in:
Max Bradbury 2020-07-03 15:21:16 +01:00
parent fb32e1251c
commit 7d135350f1
2 changed files with 81 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
index.pug
View File

@ -3,85 +3,8 @@ html(lang="en-gb")
head
meta(content="text/html;charset=utf-8" http-equiv="Content-Type")
title mixsy
style.
:root {
--bg: #ed9f96;
--alt: #dc4c6b;
--inverse: #444;
--text: #7be5b3;
}
* {
box-sizing: border-box;
color: var(--text);
font-family: sans-serif;
}
html, body {
background-color: var(--bg);
margin: 0;
padding: 0;
}
button {
background-color: var(--text);
border: 0;
border-radius: 2.5vmin;
color: var(--alt);
cursor: pointer;
display: block;
font-size: 5vmin;
}
h1, p {
margin: 0;
text-align: center;
}
h1 {
font-size: 10vmin;
}
h2 {
font-size: 5vmin;
margin: 0;
text-align: center;
}
textarea {
background-color: var(--inverse);
border: 0;
color: var(--text);
font-family: monospace;
height: 17vmin;
width: 100%;
}
#container {
background-color: var(--alt);
border-radius: 5vmin;
height: 100vmin;
width: 100vmin;
}
.centre {
margin: 0 auto;
}
.left {
float: left;
}
.row {
width: 100%;
height: calc(82vmin / 3);
}
.square {
width: 50vmin;
height: 100%;
padding: 0.5em;
}
style
include style.css
body
#container.centre
h1 mixsy

79
style.css Normal file
View File

@ -0,0 +1,79 @@
:root {
--bg: #ed9f96;
--alt: #dc4c6b;
--inverse: #444;
--text: #7be5b3;
}
* {
box-sizing: border-box;
color: var(--text);
font-family: sans-serif;
}
html, body {
background-color: var(--bg);
margin: 0;
padding: 0;
}
button {
background-color: var(--text);
border: 0;
border-radius: 2.5vmin;
color: var(--alt);
cursor: pointer;
display: block;
font-size: 5vmin;
}
h1, p {
margin: 0;
text-align: center;
}
h1 {
font-size: 10vmin;
}
h2 {
font-size: 5vmin;
margin: 0;
text-align: center;
}
textarea {
background-color: var(--inverse);
border: 0;
color: var(--text);
font-family: monospace;
height: 17vmin;
padding: 0.5em;
width: 100%;
}
#container {
background-color: var(--alt);
border-radius: 5vmin;
height: 100vmin;
width: 100vmin;
}
.centre {
margin: 0 auto;
}
.left {
float: left;
}
.row {
width: 100%;
height: calc(82vmin / 3);
}
.square {
width: 50vmin;
height: 100%;
padding: 0.5em;
}