198 lines
3.4 KiB
CSS
198 lines
3.4 KiB
CSS
:root {
|
|
/* --base03: #002b36; */
|
|
/* --base02: #073642; */
|
|
/* --base01: #586e75; */
|
|
/* --base00: #657b83; */
|
|
/* --base0: #839496; */
|
|
/* --base1: #93a1a1; */
|
|
/* --base2: #eee8d5; */
|
|
/* --base3: #fdf6e3; */
|
|
/* --yellow: #b58900; */
|
|
/* --orange: #cb4b16; */
|
|
/* --red: #dc322f; */
|
|
/* --magenta: #d33682; */
|
|
/* --violet: #6c71c4; */
|
|
/* --blue: #268bd2; */
|
|
/* --cyan: #2aa198; */
|
|
/* --green: #859900; */
|
|
|
|
--black: #42395D;
|
|
--dark-grey: #75507B;
|
|
--red: #A8757B;
|
|
--light-red: #FFB8D1;
|
|
--green: #FF857F;
|
|
--light-green: #F1568E;
|
|
--brown: #E6C000;
|
|
--yellow: #D5A425;
|
|
--blue: #AE81FF;
|
|
--light-blue: #C5A3FF;
|
|
--magenta: #716799;
|
|
--light-magenta: #8077A8;
|
|
--cyan: #C2FFDF;
|
|
--light-cyan: #C2FFFF;
|
|
--light-grey: #F8F8F2;
|
|
--white: #F8F8F0;
|
|
|
|
--background: var(--magenta);
|
|
--color: var(--light-grey);
|
|
--highlight: var(--black);
|
|
--accent: var(--light-green);
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
font-size: 1.8em;
|
|
font-family: serif;
|
|
background-color: var(--background);
|
|
color: var(--color);
|
|
/* width: 99vw; */
|
|
}
|
|
|
|
.main-content {
|
|
max-width: 40em;
|
|
margin: auto;
|
|
background-color: var(--light-magenta);
|
|
padding: 1em;
|
|
border-radius: 1em;
|
|
}
|
|
|
|
a, a:visited {
|
|
color: var(--cyan);
|
|
}
|
|
|
|
#navbar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
padding: 10px 0px;
|
|
border-width: 0 0 1px 0;
|
|
border-color: var(--accent);
|
|
border-style: solid;
|
|
font-family: monospace;
|
|
}
|
|
|
|
#banner {
|
|
padding: 1em;
|
|
grid-area: head;
|
|
font-size: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.active {
|
|
border-width: .1em;
|
|
border-style: solid;
|
|
border-color: var(--color);
|
|
}
|
|
|
|
.nav-link, nav header, .nav-link:visited {
|
|
/* margin: .5em 0em; */
|
|
padding: .5em 2em;
|
|
text-align: center;
|
|
color: var(--color);
|
|
/* border-radius: 5px; */
|
|
}
|
|
|
|
code, pre {
|
|
background-color: var(--highlight);
|
|
font-family: monospace;
|
|
}
|
|
pre {
|
|
border-width: 1px 1px 1px 5px;
|
|
border-style: solid;
|
|
border-color: var(--highlight) var(--highlight) var(--highlight) var(--brown);
|
|
padding: .5em;
|
|
}
|
|
|
|
code > p {
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 1px;
|
|
border-bottom-color: var(--brown);
|
|
}
|
|
|
|
.date {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.postinfo {
|
|
display: flex;
|
|
width: 95vw;
|
|
margin: 1em 0;
|
|
padding: 0 0 0 0;
|
|
}
|
|
|
|
h1, h2 {
|
|
font-family: monospace;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 3em;
|
|
text-align: center;
|
|
margin: auto;
|
|
padding: 0.5em;
|
|
border-color: var(--brown);
|
|
border-style: double;
|
|
border-width: 0.1em;
|
|
box-shadow: 0.1em 0.1em 0.2em var(--accent);
|
|
border-radius: 1em;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2.5em;
|
|
text-align: right;
|
|
border-width: 0 0 0.2em 0;
|
|
border-style: double;
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-align: center;
|
|
/* border-width: 0 0 2px 0; */
|
|
/* border-color: var(--color); */
|
|
/* border-style: solid; */
|
|
}
|
|
|
|
h4 {
|
|
border-width: 0 0 2px 0;
|
|
border-style: solid;
|
|
border-color: var(--base00);
|
|
}
|
|
|
|
#list {
|
|
/* display: flex; */
|
|
/* flex-wrap: wrap; */
|
|
/* justify-content: space-evenly; */
|
|
}
|
|
|
|
.list-item{
|
|
/* max-width: 25em; */
|
|
margin: .25em;
|
|
padding: .25em;
|
|
/* border-width: 2px; */
|
|
/* border-style: solid; */
|
|
/* border-color: var(--accent); */
|
|
/* border-radius: 20px; */
|
|
/* /\* box-shadow: 1em 1em var(--highlight); *\/ */
|
|
/* color: var(--color); */
|
|
}
|
|
|
|
.button {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.license-text {
|
|
text-align: center;
|
|
}
|
|
|
|
audio {
|
|
align: center;
|
|
}
|