hugo-batsite/public/scss/main.css

525 lines
9.2 KiB
CSS
Raw Normal View History

2022-04-15 19:22:33 +00:00
@charset "UTF-8";
body {
background-color: #413c74;
color: #ff8ad0; }
2022-04-15 19:22:33 +00:00
body.light {
background-color: #ffffff;
color: #413c74; }
a {
background-color: transparent;
color: #ffdc6d; }
2022-04-15 19:22:33 +00:00
a.light {
background-color: transparent;
color: #9b5bb4; }
a.footer-nav-item.active,
a.footer-nav-item:hover {
color: #ff8ad0;
background-color: #413c74;
border-color: #413c74; }
2022-04-15 19:22:33 +00:00
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; }
2022-04-15 19:22:33 +00:00
footer.light {
background-color: #413c74;
color: #ffffff; }
footer a {
color: #413c74;
background-color: #ff8ad0; }
2022-04-15 19:22:33 +00:00
footer a.light {
color: #ffffff;
background-color: #413c74; }
.togglelabel {
background-color: #ff8ad0;
border-color: #413c74; }
2022-04-15 19:22:33 +00:00
.togglelabel.light {
background-color: #413c74;
border-color: #ffffff; }
.togglelabel.light::after {
background-color: #ffffff;
border-color: #ffffff;
color: #413c74; }
2022-04-15 19:22:33 +00:00
.togglelabel::after {
background-color: #413c74;
border-color: #413c74;
color: #ff8ad0; }
2022-04-15 19:22:33 +00:00
body.light #title {
color: #ffffff;
background-color: #413c74; }
2022-04-15 19:22:33 +00:00
body #title {
color: #413c74;
background-color: #ff8ad0; }
2022-04-15 19:22:33 +00:00
article {
background-color: #413c74;
border-color: #ff8ad0; }
2022-04-15 19:22:33 +00:00
article.light {
background-color: #ffffff;
border-color: #413c74; }
h2 {
background-color: #ffdc6d;
color: #413c74; }
2022-04-15 19:22:33 +00:00
h2.light {
color: #ffffff; }
h2 a {
color: #413c74; }
h2 a.light {
color: #ffffff; }
h3 {
background-color: #61d478;
color: #413c74; }
2022-04-15 19:22:33 +00:00
h3 a {
color: #413c74; }
h3 a:hover {
background-color: transparent; }
h3.light {
background-color: #5183b9;
color: #ffffff; }
2022-04-15 19:22:33 +00:00
h3.lighta {
color: #ffffff; }
h5,
h6,
h4 {
background-color: #ffffff;
color: #413c74; }
2022-04-15 19:22:33 +00:00
h5 a,
h6 a,
h4 a {
color: #413c74; }
2022-04-15 19:22:33 +00:00
h4.light,
h5.light,
h6.light {
background-color: #413c74;
color: #ffffff; }
2022-04-15 19:22:33 +00:00
h2.light {
background-color: #9b5bb4;
color: #ffffff; }
2022-04-15 19:22:33 +00:00
article.light a {
background-color: transparent;
color: #9b5bb4; }
2022-04-15 19:22:33 +00:00
article.light a.hash-link {
color: #ffffff; }
2022-04-15 19:22:33 +00:00
article.light a.hash-link:hover {
background-color: transparent;
color: #ffffff; }
2022-04-09 16:00:23 +00:00
2022-04-15 19:22:33 +00:00
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; }
2022-04-15 19:22:33 +00:00
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; }
2022-04-16 16:45:12 +00:00
h1 #rss-title {
background-color: transparent;
color: #413c74; }
h1 #rss-title:hover {
background-color: transparent; }
h1 #rss-title.light {
color: #ffffff; }
2022-04-15 19:22:33 +00:00
header.light {
background-color: #ffffff; }
2022-04-15 19:22:33 +00:00
.posttitle a {
background-color: transparent;
color: #413c74; }
.posttitle a:hover {
background-color: transparent; }
2022-04-16 11:18:04 +00:00
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; }
2022-04-16 13:27:59 +00:00
#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; }
2022-04-15 19:22:33 +00:00
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; }
#content p,
#content ul,
#content ol,
#content table,
code,
.postdescription,
hr {
margin-right: 24%;
margin-left: 24%; }
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;
2022-04-16 11:18:04 +00:00
display: inline-flex;
align-items: center; }
2022-04-15 19:22:33 +00:00
#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 * {
display: flex;
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; }
h2,
h3,
h4,
h5,
h6 {
margin-top: 1em;
margin-bottom: 1em; }
article {
margin-inline: auto; }
.titlecontainer,
header {
width: 100%;
padding-top: 42pt; }
2022-04-09 16:00:23 +00:00
2022-04-16 11:18:04 +00:00
#hamburger-bg {
position: fixed;
width: 100%;
height: calc(100% - 42pt);
left: 0pt;
top: 0pt;
right: 0;
2022-04-16 13:27:59 +00:00
transition: 0s;
display: grid;
2022-04-16 14:19:33 +00:00
justify-content: center;
overflow: scroll; }
2022-04-16 13:27:59 +00:00
#hamburger-bg * {
display: grid;
2022-04-16 14:19:33 +00:00
margin-top: 2pt;
margin-bottom: 2pt;
2022-04-16 13:27:59 +00:00
text-align: center; }
#hamburger-bg.hidden {
display: none; }
#darkmode-button-small {
margin-right: 8pt; }
2022-04-16 11:18:04 +00:00
2022-04-09 16:00:23 +00:00
@font-face {
2022-04-09 22:18:40 +00:00
font-family: CaskaydiaCove;
src: url(/font/CaskaydiaCove.ttf); }
2022-04-15 19:22:33 +00:00
@font-face {
font-family: CaskaydiaCoveMono;
src: url(/font/CaskaydiaCoveMono.ttf); }
2022-04-09 22:18:40 +00:00
* {
font-family: CaskaydiaCove;
2022-04-16 11:18:04 +00:00
font-size: 12pt;
text-overflow: clip; }
2022-04-15 19:22:33 +00:00
p,
.postdescription,
ul {
line-height: 2em; }
2022-04-09 22:18:40 +00:00
h1 {
font-size: 42pt; }
2022-04-09 16:00:23 +00:00
2022-04-16 16:45:12 +00:00
h1 a,
2022-04-15 19:22:33 +00:00
h2 a {
font-size: 42pt;
font-style: bold; }
h3 a, h4 a {
font-size: 32pt; }
h5 a, h6 a {
font-size: 24pt; }
2022-04-09 16:00:23 +00:00
a {
text-decoration: none; }
2022-04-15 19:22:33 +00:00
footer * {
font-size: 24pt;
font-family: CaskaydiaCoveMono; }
2022-04-09 16:00:23 +00:00
2022-04-15 19:22:33 +00:00
label::after {
font-family: CaskaydiaCoveMono;
font-size: 24pt; }
2022-04-09 16:00:23 +00:00
2022-04-15 19:22:33 +00:00
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; }
.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;
2022-04-09 16:00:23 +00:00
display: flex;
align-items: center;
2022-04-15 19:22:33 +00:00
justify-content: center;
content: "";
border-style: solid; }
2022-04-09 22:18:40 +00:00
2022-04-15 19:22:33 +00:00
input:checked + label:after {
left: calc(100% - 49pt); }
2022-04-09 16:00:23 +00:00
2022-04-15 19:22:33 +00:00
input:checked + label::after {
content: "滛"; }
2022-04-09 16:00:23 +00:00
2022-04-16 11:18:04 +00:00
.footer-nav-item,
button {
2022-04-15 19:22:33 +00:00
border-radius: 100%;
height: 1em;
width: 1em;
justify-content: center;
align-items: center;
2022-04-16 11:18:04 +00:00
border-style: solid;
cursor: pointer; }
2022-04-09 22:18:40 +00:00
2022-04-15 19:22:33 +00:00
.togglelabel {
border: solid; }
h1,
h2,
h3,
h4,
h5,
h6 {
border-top-right-radius: 48pt;
border-bottom-right-radius: 48pt; }
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 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; }
2022-04-16 11:18:04 +00:00
2022-04-16 13:27:59 +00:00
#hamburger-bg .hamburger-nav-item {
border-style: solid;
padding: 0.12em; }
#hamburger-button,
#hamburger-bg,
#darkmode-button-small {
2022-04-16 11:18:04 +00:00
display: none; }
@media screen and (max-width: 640pt) {
#footer-center,
#darkmode-toggle,
#darkmode-toggle-label {
display: none; }
2022-04-16 13:27:59 +00:00
#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; } }