114 lines
1.6 KiB
CSS
114 lines
1.6 KiB
CSS
:root {
|
|
/* Colours formatted like Xresources */
|
|
--fg: #e6cfcd;
|
|
--bg: #110705;
|
|
--cursor: #e6cfcd;
|
|
/* black */
|
|
--color0: #1c0d0b;
|
|
--color8: #79e5ec;
|
|
/* red */
|
|
--color1: #291513;
|
|
--color9: #88cd9e;
|
|
/* green */
|
|
--color2: #412420;
|
|
--color10: #7fe7a3;
|
|
/* yellow */
|
|
--color3: #613934;
|
|
--color11: #eac3bf;
|
|
/* blue */
|
|
--color4: #8a544c;
|
|
--color12: #93eaaf;
|
|
/* magenta */
|
|
--color5: #bc746a;
|
|
--color13: #e98bd6;
|
|
/* cyan */
|
|
--color6: #d5a7a2;
|
|
--color14: #e9a2da;
|
|
/* white */
|
|
--color7: #eedfde;
|
|
--color15: #edcdca;
|
|
|
|
color-scheme: dark;
|
|
|
|
--background: light-dark(var(--fg), var(--bg));
|
|
--text: light-dark(var(--bg), var(--fg));
|
|
}
|
|
|
|
html {
|
|
background-color: var(--background);
|
|
}
|
|
|
|
body {
|
|
padding: 1em;
|
|
background-color: var(--color2);
|
|
color: var(--text);
|
|
|
|
main {
|
|
padding: 1em;
|
|
}
|
|
|
|
h2 {
|
|
margin: 0;
|
|
}
|
|
|
|
article {
|
|
padding: 1em;
|
|
background-color: var(--color0);
|
|
min-height: 50vh;
|
|
|
|
.recent-posts {
|
|
padding-top: 2em;
|
|
}
|
|
|
|
.projects {
|
|
padding-left: 1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
iframe {
|
|
display: block;
|
|
margin: auto;
|
|
overflow: hidden;
|
|
border: 0;
|
|
width: 854px;
|
|
height: 480px;
|
|
}
|
|
|
|
.project {
|
|
min-height: 0;
|
|
h3 {
|
|
margin: 0 0 1em 0;
|
|
}
|
|
margin-bottom: 0.5em;
|
|
background-color: var(--color1);
|
|
}
|
|
|
|
header nav, footer nav {
|
|
a {
|
|
display: inline;
|
|
margin: 0.5em;
|
|
padding: 0.5em;
|
|
}
|
|
a.active {
|
|
background-color: var(--color3);
|
|
}
|
|
sitename, copyright {
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
nav sitename h1 {
|
|
margin: -0.33em 0 0 0;
|
|
padding: 0;
|
|
}
|
|
|
|
a, a:visited {
|
|
color: var(--color11);
|
|
}
|
|
|
|
pre {
|
|
background-color: transparent !important;
|
|
padding: 1em;
|
|
}
|
|
|