Chris Dill
c35c09af53
commit 787b84159c894cb38ea9eb1423069884f8b56bc4
Author: ChrisDill <chris.rj.dill@gmail.com>
Date: Sat Jul 24 16:57:16 2021 +0100
Test footer fix for smaller resolutions
commit bc8cba413d12250d76118ce31668a6dd4e8eebbd
Author: ChrisDill <chris.rj.dill@gmail.com>
Date: Wed Jul 21 18:53:05 2021 +0100
Add jsconfig.json and update error/layout prefix
commit 03d1cfced8b095ff79173a25ac2612aaa7f895aa
Author: ChrisDill <chris.rj.dill@gmail.com>
Date: Wed Jul 21 18:06:45 2021 +0100
Test sveltekit fixes to get static adapter to work
commit 6f4c28b0ead9d758fbb649d13188da38a6dfb00f
Author: ChrisDill <chris.rj.dill@gmail.com>
Date: Wed Dec 16 10:25:42 2020 +0000
Initial sveltekit test
- New branch for testing out sveltekit. It is not yet 1.0 so this is for experimental purposes.
152 lines
2.6 KiB
CSS
Executable file
152 lines
2.6 KiB
CSS
Executable file
|
|
/* Dark theme */
|
|
:root {
|
|
--background-color: #36393f;
|
|
--header-color: #202225;
|
|
--headings-color: #ffffff;
|
|
--font-color: #ffffff;
|
|
--border-color: #141414;
|
|
--line-color: #ffffff;
|
|
--link-color: #CC99FF;
|
|
--link-color-hover: #ffffff;
|
|
}
|
|
|
|
/* Light theme */
|
|
html[data-theme='light'] {
|
|
--background-color: #ffffff;
|
|
--headings-color: #181818;
|
|
--font-color: #181818;
|
|
--line-color: #181818;
|
|
--nav-link-color: #2599fd;
|
|
--nav-link-color-hover: #000000;
|
|
--link-color: #CC99FF;
|
|
--link-color-hover: #000000;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--background-color);
|
|
color: var(--font-color);
|
|
font-family: 'Open Sans', sans-serif;
|
|
font-display: swap;
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5 {
|
|
color: var(--headings-color);
|
|
font-weight: bold;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
hr {
|
|
background-color: var(--line-color);
|
|
}
|
|
|
|
/* Navigation */
|
|
header {
|
|
background-color: var(--header-color);
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
nav {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
nav li {
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Link effects */
|
|
nav li a {
|
|
text-decoration: none;
|
|
padding: 4px 8px;
|
|
transition: color 0.1s linear;
|
|
}
|
|
|
|
nav li a:hover {
|
|
border-bottom: 2px solid var(--line-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a {
|
|
color: var(--link-color);
|
|
transition: color 0.1s linear;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--link-color-hover);
|
|
}
|
|
|
|
/* Banner */
|
|
.overlay {
|
|
background-size: cover;
|
|
background-position: center;
|
|
border-top: 2px solid var(--border-color);
|
|
border-bottom: 4px solid var(--border-color);
|
|
display: flex;
|
|
height: 200px;
|
|
text-align: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.title {
|
|
display: inline-block;
|
|
font-size: 3rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Content */
|
|
main {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
section {
|
|
border-radius: 5px;
|
|
padding: 5px 20px;
|
|
}
|
|
|
|
footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-top: 3px solid var(--border-color);
|
|
color: var(--font-color);
|
|
font-family: var(--font1);
|
|
margin-top: 30px;
|
|
}
|
|
|
|
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
|
|
@media screen and (max-width: 700px) {
|
|
.title {
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
|
|
nav {
|
|
flex-direction: column;
|
|
}
|
|
|
|
nav ul {
|
|
flex-direction: column;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
nav ul li a {
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
footer {
|
|
flex-direction: column;
|
|
}
|
|
}
|