hugo-batsite/public/scss/main.css
2022-09-16 16:41:04 +02:00

618 lines
11 KiB
CSS

@charset "UTF-8";
.flexjs,
.iflexjs {
display: none; }
body {
background-color: #413c74;
color: #ff8ad0; }
body.light {
background-color: #ffffff;
color: #413c74; }
a {
background-color: transparent;
color: #ffdc6d; }
a.light {
background-color: transparent;
color: #9b5bb4; }
.randomword-button {
border-color: #ff8ad0;
background-color: #413c74;
color: #ff8ad0; }
.randomword-button.light {
border-color: #413c74;
background-color: #ffffff;
color: #413c74; }
.randomword-button.light:hover {
color: #ffffff;
background-color: #413c74; }
.randomword-button:hover {
color: #413c74;
background-color: #ff8ad0; }
a.footer-nav-item.active,
a.footer-nav-item:hover {
color: #ff8ad0;
background-color: #413c74;
border-color: #413c74; }
a.footer-nav-item.active.light,
a.footer-nav-item:hover.light {
color: #413c74;
background-color: #ffffff;
border-color: #ffffff; }
footer {
background-color: #ff8ad0;
color: #413c74; }
footer.light {
background-color: #413c74;
color: #ffffff; }
footer a {
color: #413c74;
background-color: #ff8ad0; }
footer a.light {
color: #ffffff;
background-color: #413c74; }
.togglelabel {
background-color: #ff8ad0;
border-color: #413c74; }
.togglelabel.light {
background-color: #413c74;
border-color: #ffffff; }
.togglelabel.light::after {
background-color: #ffffff;
border-color: #ffffff;
color: #413c74; }
.togglelabel::after {
background-color: #413c74;
border-color: #413c74;
color: #ff8ad0; }
body.light #title {
color: #ffffff;
background-color: #413c74; }
body #title {
color: #413c74;
background-color: #ff8ad0; }
article {
background-color: #413c74;
border-color: #ff8ad0; }
article.light {
background-color: #ffffff;
border-color: #413c74; }
h2 {
background-color: #ffdc6d;
color: #413c74; }
h2.light {
color: #ffffff; }
h2 a {
color: #413c74; }
h2 a.light {
color: #ffffff; }
h3 {
background-color: #61d478;
color: #413c74; }
h3 a {
color: #413c74; }
h3 a:hover {
background-color: transparent; }
h3.light {
background-color: #5183b9;
color: #ffffff; }
h3.lighta {
color: #ffffff; }
h5,
h6,
h4 {
background-color: #ffffff;
color: #413c74; }
h5 a,
h6 a,
h4 a {
color: #413c74; }
h4.light,
h5.light,
h6.light {
background-color: #413c74;
color: #ffffff; }
h2.light {
background-color: #9b5bb4;
color: #ffffff; }
article.light a {
background-color: transparent;
color: #9b5bb4; }
article.light a.hash-link {
color: #ffffff; }
article.light a.hash-link:hover {
background-color: transparent;
color: #ffffff; }
a:hover {
color: #413c74;
background-color: #ffdc6d;
border-color: #ffdc6d; }
.previous.light:hover,
.next.light:hover,
.postdescription a.light:hover,
article.light a:hover {
color: #ffffff;
background-color: #9b5bb4;
border-color: #9b5bb4; }
.light.hash-link:hover,
.hash-link:hover {
background-color: transparent; }
h1a.light,
h2a.light,
h3a.light,
h4a.light,
h5a.light,
h6a.light {
background-color: transparent;
color: #ffffff; }
h1a.light:hover,
h2a.light:hover,
h3a.light:hover,
h4a.light:hover,
h5a.light:hover,
h6a.light:hover {
background-color: transparent; }
h1 a {
color: #413c74; }
h1 a.light {
color: #ffffff; }
h1 a:hover {
background-color: transparent; }
h1 #rss-title {
background-color: transparent;
color: #413c74; }
h1 #rss-title:hover {
background-color: transparent; }
h1 #rss-title.light {
color: #ffffff; }
header.light {
background-color: #ffffff; }
.posttitle a {
background-color: transparent;
color: #413c74; }
.posttitle a:hover {
background-color: transparent; }
button {
color: #413c74;
background-color: #ff8ad0;
border-color: #413c74; }
button:hover {
background-color: #413c74;
color: #ff8ad0; }
button.light {
color: #ffffff;
background-color: #413c74;
border-color: #ffffff; }
button.light:hover {
background-color: #ffffff;
color: #413c74; }
#pageindicator {
background-color: transparent; }
#pageindicator.light {
color: #ffffff; }
#pageindicator:hover {
background-color: transparent; }
#hamburger-bg {
background-color: #413c74; }
#hamburger-bg .hamburger-nav-item {
background-color: transparent;
color: #ffdc6d;
border-color: #ffdc6d; }
#hamburger-bg .hamburger-nav-item:hover {
background-color: #ffdc6d;
color: #413c74; }
#hamburger-bg.light {
background-color: #ffffff; }
#hamburger-bg.light .hamburger-nav-item {
color: #9b5bb4;
border-color: #9b5bb4; }
#hamburger-bg.light .hamburger-nav-item:hover {
background-color: #9b5bb4;
color: #ffffff; }
html,
body {
height: 100%;
flex: auto; }
footer {
min-height: 42pt;
position: sticky;
display: flex;
align-items: center;
justify-content: center;
bottom: 0; }
#content {
min-height: calc(100% - 42pt * 3);
right: auto;
margin-bottom: 84pt; }
.randomword-button {
width: auto;
height: auto; }
#content p,
#content img,
#content img,
#content ul,
#content ol,
#content table,
#content nav,
.embed,
code,
.postdescription,
hr,
#content div .video-player {
margin-right: 24%;
margin-left: 24%; }
img {
width: 100%; }
#content img {
display: block;
overflow: hidden;
max-width: 52%;
height: 100%; }
#content .embed {
display: block;
overflow: hidden;
padding: 0; }
#content .embed iframe {
width: 100%;
aspect-ratio: 16/9;
margin: 0; }
p code {
margin-left: 0;
margin-right: 0; }
#content ol ol,
#content ul ul {
margin-left: 0.12em; }
#footer-left {
margin-top: auto;
margin-bottom: auto;
margin-left: 24pt;
justify-self: left;
margin-right: auto;
display: inline-flex;
align-items: center; }
#footer-right {
margin-top: auto;
margin-bottom: auto;
margin-left: auto;
justify-self: right;
margin-right: 24pt;
align-content: center;
display: inline-flex; }
#footer-center {
margin-top: auto;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
justify-content: center;
justify-self: center;
display: inline-flex; }
* {
padding: 0;
margin: 0; }
#footer-right * {
margin-top: auto;
margin-bottom: auto; }
#footer-center * {
display: flex;
margin-right: 8pt;
margin-left: 8pt;
margin-top: auto;
margin-bottom: auto;
justify-content: center;
align-items: center; }
.postinfo {
text-align: right; }
h1,
h2,
h3,
h4,
h5,
h6 {
padding-right: 6%;
margin-right: 6%;
padding-top: 12pt;
padding-bottom: 12pt;
justify-content: right;
display: flex;
align-items: center;
text-align: right; }
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 12pt;
margin-bottom: 12pt; }
article {
margin-inline: auto; }
.titlecontainer,
header {
width: 100%;
padding-top: 42pt; }
#hamburger-bg {
position: fixed;
width: 100%;
height: calc(100% - 42pt);
left: 0pt;
top: 0pt;
right: 0;
transition: 0s;
display: grid;
justify-content: center;
overflow: scroll; }
#hamburger-bg * {
display: grid;
margin-top: 2pt;
margin-bottom: 2pt;
text-align: center;
align-items: center;
padding: 5em; }
#hamburger-bg.hidden {
display: none; }
#darkmode-button-small {
margin-right: 8pt; }
@font-face {
font-family: CaskaydiaCove;
src: url(/font/CaskaydiaCove.ttf); }
@font-face {
font-family: CaskaydiaCoveMono;
src: url(/font/CaskaydiaCoveMono.ttf); }
* {
font-family: CaskaydiaCove;
font-size: 12pt;
text-overflow: clip; }
p,
.postdescription,
ul {
line-height: 2em; }
h1 {
font-size: 42pt; }
h1 a,
h2 a {
font-size: 42pt;
font-style: bold; }
h3 a, h4 a {
font-size: 32pt; }
h5 a, h6 a {
font-size: 24pt; }
a {
text-decoration: none; }
footer * {
font-size: 24pt;
font-family: CaskaydiaCoveMono; }
label::after {
font-family: CaskaydiaCoveMono;
font-size: 24pt; }
h6 {
font-style: italic; }
::before,
code {
font-family: CaskaydiaCoveMono; }
* {
border-width: 2pt; }
input[type="checkbox"] {
cursor: pointer; }
.toggleinput {
opacity: 0;
max-height: 0;
max-width: 0;
overflow: hidden; }
.togglelabel {
width: 42pt;
height: 24pt;
border-radius: 48pt;
cursor: pointer;
align-items: center;
display: flex; }
img, iframe {
border-style: solid; }
.togglelabel::after {
left: calc(100% - 67pt);
content: "";
position: absolute;
height: 20pt;
width: 20pt;
border-width: 1pt;
border-radius: 100pt;
transition: 1s;
display: inline-block;
vertical-align: middle;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
content: "";
border-style: solid;
padding: 0; }
input:checked + label:after {
left: calc(100% - 49pt); }
input:checked + label::after {
content: "滛"; }
.footer-nav-item,
button {
border-radius: 100%;
height: 1em;
width: 1em;
justify-content: center;
align-items: center;
border-style: solid;
cursor: pointer; }
#replacement-burger {
width: 24pt;
height: 24pt; }
.togglelabel {
border: solid; }
h1,
h2,
h3,
h4,
h5,
h6 {
border-top-right-radius: 48pt;
border-bottom-right-radius: 48pt; }
h1 .uplink:hover::before,
h2 .uplink:hover::before,
h3 .uplink:hover::before,
h4 .uplink:hover::before,
h5 .uplink:hover::before,
h6 .uplink:hover::before {
content: " "; }
h1 .with-rss:hover::before,
h2 .with-rss:hover::before,
h3 .with-rss:hover::before,
h4 .with-rss:hover::before,
h5 .with-rss:hover::before,
h6 .with-rss:hover::before {
content: " "; }
h1 .singlepagelink:hover::before,
h2 .singlepagelink:hover::before,
h3 .singlepagelink:hover::before,
h4 .singlepagelink:hover::before,
h5 .singlepagelink:hover::before,
h6 .singlepagelink:hover::before {
content: "./"; }
h1 .hash-link:hover,
h2 .hash-link:hover,
h3 .hash-link:hover,
h4 .hash-link:hover,
h5 .hash-link:hover,
h6 .hash-link:hover {
cursor: pointer; }
h1 .hash-link:hover::before,
h2 .hash-link:hover::before,
h3 .hash-link:hover::before,
h4 .hash-link:hover::before,
h5 .hash-link:hover::before,
h6 .hash-link:hover::before {
content: ""; }
.postdescription,
#content nav,
#content p,
#content ul,
#content ol,
#content table {
border-left-style: solid;
border-width: 0.24em;
padding-left: 2em; }
p a,
.postdescription a,
ul a {
border-style: solid;
padding: 0.12em; }
#hamburger-bg .hamburger-nav-item {
border-style: solid;
padding: 0.12em; }
.randomword-button {
border-style: solid;
padding: 0.12em;
border-radius: 0; }
.randomword-button::before {
content: " "; }
#hamburger-button,
#hamburger-bg,
#replacement-burger,
#darkmode-button-small {
display: none; }
@media screen and (max-width: 640pt) {
#footer-center,
#darkmode-toggle,
#darkmode-toggle-label {
display: none !important; }
#replacement-burger,
#hamburger-button,
#darkmode-button-small,
#hamburger-bg,
#hamburger-bg #darkmode-toggle-label,
#hamburger-bg #darkmode-toggle {
display: flex; }
#hamburger-bg #darkmode-toggle,
#hamburger-bg #darkmode-toggle-label {
position: absolute;
bottom: 1em;
right: 1em; } }