new colour system

This commit is contained in:
ben clark 2021-04-05 15:13:35 +00:00
parent 967351a66e
commit 5c3778d646
2 changed files with 54 additions and 8 deletions

View File

@ -8,8 +8,8 @@
<link rel='stylesheet' type='text/css' media='screen' href='/main.css'>
<script src='/main.js'></script>
</head>
<body>
<div class="header header-blue">
<body class="blue">
<div class="header ">
<h1 style="white-space: pre-line">"frequently" asked
questions</h1>
</div>

View File

@ -46,6 +46,14 @@ main {
padding: 24px 10%;
}
a { /* todo: i'm sure you could do something with variables here */
color: #316A3A;
}
a:hover {
background-color: #B7EBCA;
}
h1,h2,h3 {
font-family: 'Fredoka One', cursive;
}
@ -78,7 +86,12 @@ a {
color: #000;
}
/* colours */
/* legacy colours */
.header-blue {
background: #f0b2b2;
color: #395c91;
}
.header-red {
background: #f0b2b2;
@ -90,11 +103,6 @@ a {
color: #7e3c16;
}
.header-blue {
background: #b2cbf0;
color: #395c91;
}
/* code blocks */
pre {
@ -111,3 +119,41 @@ code {
padding: 0 4px;
font-weight: 400;
}
/* new color system (still needs work) */
/* blue */
.blue a {
color: #395c91
}
.blue a:hover {
background-color: #b2cbf0;
}
.blue .header {
background: #b2cbf0;
color: #395c91;
}
/* orange */
.orange a {
color: #7e3c16
}
.orange a:hover {
background-color: #f0d5b2;
}
.orange .header {
background: #f0d5b2;
color: #7e3c16;
}
/* red */
.red a {
color: #7e1616
}
.red a:hover {
background-color: #f0b2b2;
}
.red .header {
background: #f0b2b2;
color: #7e1616;
}