Added a default theme.
parent
e0c6c6cf94
commit
4851d82250
|
|
@ -0,0 +1,109 @@
|
|||
:root {
|
||||
/* COLORS */
|
||||
--red: #EF5255;
|
||||
--red1: #BF3638;
|
||||
--red2: #D5484A;
|
||||
--red3: #EF5255;
|
||||
--red4: #FA7A7C;
|
||||
--red5: #FA999A;
|
||||
|
||||
--orange: #EB801B;
|
||||
--orange1: #AF6118;
|
||||
--orange2: #DA7516;
|
||||
--orange3: #EB801B;
|
||||
--orange4: #F99434;
|
||||
--orange5: #F9AE67;
|
||||
|
||||
--yellow: #F4C025;
|
||||
--yellow1: #BD920F;
|
||||
--yellow2: #DFAC11;
|
||||
--yellow3: #F4C025;
|
||||
--yellow4: #FFD147;
|
||||
--yellow5: #FFE38F;
|
||||
|
||||
--pear: #AED651;
|
||||
--pear1: #7D9A37;
|
||||
--pear2: #96BB3E;
|
||||
--pear3: #AED651;
|
||||
--pear4: #C2E571;
|
||||
--pear5: #DBF1A7;
|
||||
|
||||
--green: #72D661;
|
||||
--green1: #53A545;
|
||||
--green2: #61C350;
|
||||
--green3: #72D661;
|
||||
--green4: #93E684;
|
||||
--green5: #BCF0B2;
|
||||
|
||||
--sea: #3DDF89;
|
||||
--sea1: #2AA764;
|
||||
--sea2: #2ACB75;
|
||||
--sea3: #3DDF89;
|
||||
--sea4: #5DEEA1;
|
||||
--sea5: #A9F4CC;
|
||||
|
||||
--cyan: #4CDCDF;
|
||||
--cyan1: #2CA3A5;
|
||||
--cyan2: #2DCACD;
|
||||
--cyan3: #4CDCDF;
|
||||
--cyan4: #6BE8EB;
|
||||
--cyan5: #B7EFF0;
|
||||
|
||||
--blue: #4C9CEF;
|
||||
--blue1: #1C67B5;
|
||||
--blue2: #2A83DF;
|
||||
--blue3: #4C9CEF;
|
||||
--blue4: #74B6FB;
|
||||
--blue5: #A3CEFA;
|
||||
|
||||
--indigo: #4C6DEF;
|
||||
--indigo1: #2143CA;
|
||||
--indigo2: #3457E5;
|
||||
--indigo3: #4C6DEF;
|
||||
--indigo4: #748FFB;
|
||||
--indigo5: #B1C0FC;
|
||||
|
||||
--purple: #967CF4;
|
||||
--purple1: #613FD9;
|
||||
--purple2: #7C5DE9;
|
||||
--purple3: #967CF4;
|
||||
--purple4: #BCAAFD;
|
||||
--purple5: #CFC2FE;
|
||||
|
||||
--magenta: #E175DB;
|
||||
--magenta1: #B63AB0;
|
||||
--magenta2: #D152CB;
|
||||
--magenta3: #E175DB;
|
||||
--magenta4: #EC9AEF;
|
||||
--magenta5: #EFB1F1;
|
||||
|
||||
--pink: #EE588F;
|
||||
--pink1: #D0356D;
|
||||
--pink2: #E2407C;
|
||||
--pink3: #EE588F;
|
||||
--pink4: #FA80AC;
|
||||
--pink5: #FBA7C6;
|
||||
|
||||
--grey1: #00001F;
|
||||
--grey2: #10102F;
|
||||
--grey3: #20203F;
|
||||
--grey4: #30304F;
|
||||
--grey5: #40405F;
|
||||
--grey6: #50506F;
|
||||
--grey7: #60607F;
|
||||
--grey8: #70708F;
|
||||
--grey9: #80809F;
|
||||
--grey10: #9090AF;
|
||||
--grey11: #A0A0BF;
|
||||
--grey12: #B0B0CF;
|
||||
--grey13: #C0C0DF;
|
||||
--grey14: #D0D0EF;
|
||||
--grey15: #E0E0FF;
|
||||
|
||||
/* ALIASES */
|
||||
--primary: var(--sea);
|
||||
--accent: var(--cyan);
|
||||
--accent2: var(--blue);
|
||||
--surface: var(--grey2);
|
||||
--text: var(--grey15);
|
||||
}
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
@media screen and (min-width: 1px) {
|
||||
:root {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
}
|
||||
@media screen and (min-width: 300px) {
|
||||
:root {
|
||||
font-size: 13pt;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 400px) {
|
||||
:root {
|
||||
font-size: 14pt;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 500px) {
|
||||
:root {
|
||||
font-size: 15pt;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 600px) {
|
||||
:root {
|
||||
font-size: 16pt;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 700px) {
|
||||
:root {
|
||||
font-size: 17pt;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 802px) {
|
||||
:root {
|
||||
font-size: 12pt;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1000px) {
|
||||
:root {
|
||||
font-size: 13pt;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1200px) {
|
||||
:root {
|
||||
font-size: 14pt;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1500px) {
|
||||
:root {
|
||||
font-size: 15pt;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1800px) {
|
||||
:root {
|
||||
font-size: 16pt;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 2500px) {
|
||||
:root {
|
||||
font-size: 17pt;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 3000px) {
|
||||
:root {
|
||||
font-size: 19pt;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0 none transparent;
|
||||
|
||||
box-sizing: border-box;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
font-family: 'sans-serif';
|
||||
font-size: .85rem;
|
||||
line-height: 1.5;
|
||||
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
html {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 100%;
|
||||
background-color: var(--surface);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 5vh 0 10vh 0;
|
||||
width: min(95vw, 75ch);
|
||||
}
|
||||
|
||||
header {
|
||||
color: var(--primary);
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--accent);
|
||||
font-weight: normal;
|
||||
|
||||
margin: .25em 0 .15em 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--primary);
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: .85rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: .5em 0 .25em 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent2);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 1rem;
|
||||
padding: .5rem 1rem;
|
||||
|
||||
border-left: .2rem solid var(--primary);
|
||||
background-color: var(--grey3);
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin: 1rem 0 1rem 2rem;
|
||||
}
|
||||
|
||||
ul ul, ul ol, ol ol, ol ul {
|
||||
margin: .25rem 0 .25rem 1rem;
|
||||
}
|
||||
|
||||
table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table tbody {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
tr {
|
||||
width: 200%;
|
||||
background-color: var(--grey3);
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: var(--grey4);
|
||||
}
|
||||
|
||||
th {
|
||||
border-bottom: .1rem solid var(--text);
|
||||
}
|
||||
|
||||
th, td {
|
||||
text-align: left;
|
||||
padding: .25rem 1rem;
|
||||
}
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{% include "templates/defaultTags.njk" %}
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
Actual Header
|
||||
</header>
|
||||
|
||||
<h1>Header 1</h1>
|
||||
<h2>Header 2</h2>
|
||||
<h3>Header 3</h3>
|
||||
<h4>Header 4</h4>
|
||||
<h5>Header 5</h5>
|
||||
<h6>Header 6</h6>
|
||||
|
||||
<p>
|
||||
This is a paragraph. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate non ut commodi quisquam in, a dicta rem expedita tenetur quis ratione aut nesciunt corporis soluta similique eius accusantium, optio numquam? Dolorem, voluptates!
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<i>Italic text</i> <br>
|
||||
<b>Bold text</b> <br>
|
||||
<a href="./">This is an example link</a>
|
||||
</p>
|
||||
|
||||
<blockquote>
|
||||
This is a blockquote. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem voluptates soluta dolorem esse aperiam natus provident nemo, dicta dolores quae velit officia minus expedita cum modi eveniet minima suscipit mollitia aspernatur ad.
|
||||
</blockquote>
|
||||
|
||||
<ul>
|
||||
<li>This is a list item!</li>
|
||||
<li>This is a list item!</li>
|
||||
<li>This is a list item!</li>
|
||||
<li>This is a list item!</li>
|
||||
<li>This is a list item!</li>
|
||||
<ul>
|
||||
<li>This is a nested list.</li>
|
||||
<li>This is a nested list.</li>
|
||||
<li>This is a nested list.</li>
|
||||
<ul>
|
||||
<li>This is a nested list.</li>
|
||||
<li>This is a nested list.</li>
|
||||
<li>This is a nested list.</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<ol>
|
||||
<li>This is a list item!</li>
|
||||
<li>This is a list item!</li>
|
||||
<li>This is a list item!</li>
|
||||
<li>This is a list item!</li>
|
||||
<li>This is a list item!</li>
|
||||
<ol>
|
||||
<li>This is a nested list.</li>
|
||||
<li>This is a nested list.</li>
|
||||
<li>This is a nested list.</li>
|
||||
<ol>
|
||||
<li>This is a nested list.</li>
|
||||
<li>This is a nested list.</li>
|
||||
<li>This is a nested list.</li>
|
||||
</ol>
|
||||
</ol>
|
||||
</ol>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>Animal</th>
|
||||
<th>Name</th>
|
||||
<th>Age</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bunny</td>
|
||||
<td>Jumpy</td>
|
||||
<td>2 years</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cat</td>
|
||||
<td>Biter</td>
|
||||
<td>4 months</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bunny</td>
|
||||
<td>Jumpy</td>
|
||||
<td>2 years</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cat</td>
|
||||
<td>Biter</td>
|
||||
<td>4 months</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bunny</td>
|
||||
<td>Jumpy</td>
|
||||
<td>2 years</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cat</td>
|
||||
<td>Biter</td>
|
||||
<td>4 months</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bunny</td>
|
||||
<td>Jumpy</td>
|
||||
<td>2 years</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cat</td>
|
||||
<td>Biter</td>
|
||||
<td>4 months</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/scaling.css" loading="lazy">
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/colors.css" loading="lazy">
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/theme.css" loading="lazy">
|
||||
Loading…
Reference in New Issue