Added a default theme.
This commit is contained in:
parent
e0c6c6cf94
commit
4851d82250
109
assets/css/colors.css
Normal file
109
assets/css/colors.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
66
assets/css/scaling.css
Normal file
66
assets/css/scaling.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
119
assets/css/theme.css
Normal file
119
assets/css/theme.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
117
content/pages/theme.njk
Normal file
117
content/pages/theme.njk
Normal file
|
|
@ -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>
|
||||
6
content/templates/defaultTags.njk
Normal file
6
content/templates/defaultTags.njk
Normal file
|
|
@ -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
Block a user