🎨 refactor: improve code format; set tabs = 4 spaces

main
welpo 2 years ago
parent 50280e65a9
commit 7a1bb1d04c
No known key found for this signature in database
GPG Key ID: A2F978CF4EC1F5A6

@ -1,25 +1,25 @@
@font-face { @font-face {
/* Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter). Licensed under the SIL Open Font License, Version 1.1. More information available at: http://scripts.sil.org/OFL */ /* Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter). Licensed under the SIL Open Font License, Version 1.1. More information available at: http://scripts.sil.org/OFL */
font-family: 'Inter'; font-family: 'Inter';
src: local('Inter'), src: local('Inter'),
url('fonts/Inter.ttf'); url('fonts/Inter.ttf');
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
/* Copyright 2014, 2015, 2016 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name 'Source'. Licensed under the SIL Open Font License, Version 1.1. More information available at: http://scripts.sil.org/OFL */ /* Copyright 2014, 2015, 2016 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name 'Source'. Licensed under the SIL Open Font License, Version 1.1. More information available at: http://scripts.sil.org/OFL */
font-family: 'Source Serif Pro'; font-family: 'Source Serif Pro';
src: local('Source Serif Pro'), src: local('Source Serif Pro'),
url('fonts/SourceSerifPro-Regular.ttf'); url('fonts/SourceSerifPro-Regular.ttf');
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
/* Copyright 2019 - Present, Microsoft Corporation, with Reserved Font Name 'Cascadia Code'. Licensed under the SIL Open Font License, Version 1.1. More information available at: http://scripts.sil.org/OFL */ /* Copyright 2019 - Present, Microsoft Corporation, with Reserved Font Name 'Cascadia Code'. Licensed under the SIL Open Font License, Version 1.1. More information available at: http://scripts.sil.org/OFL */
font-family: 'Cascadia Code'; font-family: 'Cascadia Code';
src: local('Cascadia Code'), src: local('Cascadia Code'),
url('fonts/CascadiaCode.ttf'); url('fonts/CascadiaCode.ttf');
font-display: swap; font-display: swap;
} }
@import 'parts/_archive.scss'; @import 'parts/_archive.scss';
@ -38,185 +38,191 @@
@import 'syntax/syntax-ayu-dark.scss'; @import 'syntax/syntax-ayu-dark.scss';
:root { :root {
--max-layout-width: 1000px; --max-layout-width: 1000px;
--normal-layout-width: 600px; --normal-layout-width: 600px;
--medium-layout-width: 400px; --medium-layout-width: 400px;
--small-layout-width: 200px; --small-layout-width: 200px;
--sans-serif-font: 'Inter', Helvetica, Arial, sans-serif; --sans-serif-font: 'Inter', Helvetica, Arial, sans-serif;
--serif-font: 'Source Serif Pro', 'Georgia', serif; --serif-font: 'Source Serif Pro', 'Georgia', serif;
--code-font: 'Cascadia Code'; --code-font: 'Cascadia Code';
font-family: var(--sans-serif-font); font-family: var(--sans-serif-font);
line-height: 190%; line-height: 190%;
--background-color: white; --background-color: white;
--bg-0: #f0f0f0; --bg-0: #f0f0f0;
--bg-1: #e7e7e7; --bg-1: #e7e7e7;
--bg-2: #fefefe; --bg-2: #fefefe;
--hover-color: white; --hover-color: white;
--primary-color: #087E96; --primary-color: #087E96;
--divider-color: #d7d7d7; --divider-color: #d7d7d7;
--text-color: #222226; --text-color: #222226;
--text-color-high-contrast: #313333; --text-color-high-contrast: #313333;
--quote-color: #355f62; --quote-color: #355f62;
--border-color: #727272; --border-color: #727272;
--meta-color: #5b5b65; --meta-color: #5b5b65;
--table-header-color: #BFEAF5; --table-header-color: #BFEAF5;
} }
[data-theme='dark'] { [data-theme='dark'] {
--background-color: #1f1f1f; --background-color: #1f1f1f;
--bg-0: #2f2f2f; --bg-0: #2f2f2f;
--bg-1: #4c4d4d; --bg-1: #4c4d4d;
--bg-2: #171717; --bg-2: #171717;
--hover-color: black; --hover-color: black;
--primary-color: #91e0ee; --primary-color: #91e0ee;
--divider-color: #4a4a4a; --divider-color: #4a4a4a;
--text-color: #D4D4D4; --text-color: #D4D4D4;
--text-color-high-contrast: #eceeef; --text-color-high-contrast: #eceeef;
--quote-color: #a9c5c7; --quote-color: #a9c5c7;
--border-color: black; --border-color: black;
--meta-color: #B0B0B0; --meta-color: #B0B0B0;
--table-header-color: #b7e4e4; --table-header-color: #b7e4e4;
.invertible-image { .invertible-image {
filter: invert(.88); filter: invert(.88);
} }
.dimmable-image { .dimmable-image {
filter: brightness(.8) contrast(1.2); filter: brightness(.8) contrast(1.2);
} }
} }
html { html {
background-color: var(--background-color); background-color: var(--background-color);
color: var(--text-color); color: var(--text-color);
line-height: 1.6em; line-height: 1.6em;
} }
body { body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
margin: 0 12px; margin: 0 12px;
padding: 0; padding: 0;
} }
.content { .content {
width: 100%; width: 100%;
max-width: var(--max-layout-width); max-width: var(--max-layout-width);
margin: 0 auto; margin: 0 auto;
margin-top: 6vmin; margin-top: 6vmin;
margin-bottom: 4rem; margin-bottom: 4rem;
word-wrap: break-word; word-wrap: break-word;
} }
article { article {
max-width: calc(var(--max-layout-width) - 17rem); max-width: calc(var(--max-layout-width) - 17rem);
margin: 0 auto; margin: 0 auto;
} }
.section-title { .section-title {
display: block; display: block;
font-size: 2.2em; font-size: 2.2em;
margin-bottom: 0em; margin-bottom: 0em;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
font-weight: 550; font-weight: 550;
color: var(--text-color-high-contrast); color: var(--text-color-high-contrast);
} }
.last-updated { .last-updated {
margin-top: -5vmin; margin-top: -5vmin;
} }
h1 { h1 {
display: block; display: block;
font-size: 1.5em; font-size: 1.5em;
margin-top: 0.67em; margin-top: 0.67em;
margin-bottom: 0em; margin-bottom: 0em;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
font-weight: 550; font-weight: 550;
} }
h2 { h2 {
display: block; display: block;
font-size: 1.4em; font-size: 1.4em;
margin-top: 0.5em; margin-top: 0.5em;
margin-bottom: 0em; margin-bottom: 0em;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
font-weight: 550; font-weight: 550;
} }
h3 { h3 {
display: block; display: block;
font-size: 1.2em; font-size: 1.2em;
margin-top: 0.3em; margin-top: 0.3em;
margin-bottom: 0em; margin-bottom: 0em;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
font-weight: 550; font-weight: 550;
} }
h4 { h4 {
display: block; display: block;
font-size: 1em; font-size: 1em;
margin-top: 0.83em; margin-top: 0.83em;
margin-bottom: 0em; margin-bottom: 0em;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
font-weight: 550; font-weight: 550;
} }
h5 { h5 {
display: block; display: block;
font-size: 1em; font-size: 1em;
margin-top: 0.83em; margin-top: 0.83em;
margin-bottom: 0em; margin-bottom: 0em;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
font-weight: normal; font-weight: normal;
} }
p { p {
font-family: var(--serif-font); font-family: var(--serif-font);
margin-top: 0.4rem; margin-top: 0.4rem;
margin-bottom: 2.3vmin; margin-bottom: 2.3vmin;
line-height: 2rem; line-height: 2rem;
font-size: 1em; font-size: 1em;
} }
@media only screen and (max-width: 1000px) { @media only screen and (max-width: 1000px) {
.content { .content {
max-width: var(--normal-layout-width); max-width: var(--normal-layout-width);
} }
body {
margin: 0 32px; body {
} margin: 0 32px;
}
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.content { .content {
max-width: var(--medium-layout-width); max-width: var(--medium-layout-width);
} }
body {
margin: 0 16px; body {
} margin: 0 16px;
}
} }
@media only screen and (max-width: 300px) { @media only screen and (max-width: 300px) {
.content { .content {
max-width: var(--small-layout-width); max-width: var(--small-layout-width);
} }
} }
@media all and (min-width: 600px) { @media all and (min-width: 600px) {
html { html {
font-size: 16.5px; font-size: 16.5px;
} }
} }
@media all and (min-width: 960px) { @media all and (min-width: 960px) {
html { html {
font-size: 20px; font-size: 20px;
} }
} }

@ -1,24 +1,26 @@
.archive { .archive {
.listing-title { .listing-title {
font-size: 1.5rem; font-size: 1.5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.listing-item {
padding: 0.2rem 1rem;
display: flex;
gap: 1rem;
.listing-item { .post-time {
padding: 0.2rem 1rem; width: 4rem;
display: flex;
gap: 1rem; .date {
.post-time { color: var(--meta-color);
width: 4rem; }
.date { }
color: var(--meta-color);
}
} }
}
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
} }

@ -1,100 +1,100 @@
code { code {
background-color: var(--bg-1); background-color: var(--bg-1);
padding: 0.1em 0.2em; padding: 0.1em 0.2em;
font-family: var(--code-font); font-family: var(--code-font);
font-weight: 350; font-weight: 350;
font-size: 0.92em; font-size: 0.92em;
} }
pre { pre {
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
line-height: 1.4; line-height: 1.4;
overflow-x: auto; overflow-x: auto;
padding: 1em; padding: 1em;
position: relative; position: relative;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
pre code { pre code {
background-color: transparent; background-color: transparent;
color: inherit; color: inherit;
padding: 0; padding: 0;
border: 0; border: 0;
} }
pre code[class*="language-"] { pre code[class*="language-"] {
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
pre code[class*="language-"]::before { pre code[class*="language-"]::before {
font-size: 12px; font-size: 12px;
letter-spacing: 0.025rem; letter-spacing: 0.025rem;
padding: 0.1rem 0.5rem; padding: 0.1rem 0.5rem;
position: absolute; position: absolute;
right: 0.1rem; right: 0.1rem;
margin-top: 0.1rem; margin-top: 0.1rem;
text-align: right; text-align: right;
text-transform: uppercase; text-transform: uppercase;
top: 0; top: 0;
} }
pre code[class="language-javaScript"]::before, pre code[class="language-javaScript"]::before,
pre code[class="language-js"]::before { pre code[class="language-js"]::before {
content: "js"; content: "js";
background: #f7df1e; background: #f7df1e;
color: black; color: black;
} }
pre code[class*="language-yml"]::before, pre code[class*="language-yml"]::before,
pre code[class*="language-yaml"]::before { pre code[class*="language-yaml"]::before {
content: "yaml"; content: "yaml";
background: #C51117; background: #C51117;
color: white; color: white;
} }
pre code[class*="language-shell"]::before, pre code[class*="language-shell"]::before,
pre code[class*="language-bash"]::before, pre code[class*="language-bash"]::before,
pre code[class*="language-sh"]::before { pre code[class*="language-sh"]::before {
content: "shell"; content: "shell";
background: #33A841; background: #33A841;
color: white; color: white;
} }
pre code[class*="language-json"]::before { pre code[class*="language-json"]::before {
content: "json"; content: "json";
color: black; color: black;
background: whitesmoke; background: whitesmoke;
} }
pre code[class*="language-python"]::before, pre code[class*="language-python"]::before,
pre code[class*="language-py"]::before { pre code[class*="language-py"]::before {
content: "python"; content: "python";
background: #306698; background: #306698;
color: #ffd343; color: #ffd343;
} }
pre code[class*="language-css"]::before { pre code[class*="language-css"]::before {
content: "css"; content: "css";
background: #215AEF; background: #215AEF;
color: white; color: white;
} }
pre code[class*="language-go"]::before { pre code[class*="language-go"]::before {
content: "Go"; content: "Go";
background: #00ADD8; background: #00ADD8;
color: white; color: white;
} }
pre code[class*="language-md"]::before, pre code[class*="language-md"]::before,
pre code[class*="language-md"]::before { pre code[class*="language-md"]::before {
content: "Markdown"; content: "Markdown";
background: #159ADC; background: #159ADC;
color: white; color: white;
} }
pre code[class*="language-rust"]::before, pre code[class*="language-rust"]::before,
pre code[class*="language-rs"]::before { pre code[class*="language-rs"]::before {
content: "rust"; content: "rust";
background: #fff8f6; background: #fff8f6;
color: #ff4647; color: #ff4647;
} }

@ -1,70 +1,68 @@
footer { footer {
margin-top: auto; margin-top: auto;
margin-bottom: 1.4rem; margin-bottom: 1.4rem;
font-family: var(--post-font-family); font-family: var(--post-font-family);
} }
footer section { footer section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 0rem; gap: 0rem;
} }
footer nav { footer nav {
display: flex; display: flex;
gap: 0rem; gap: 0rem;
margin: 0 0rem; margin: 0 0rem;
} }
.socials { .socials {
justify-content: center; justify-content: center;
/* flex-child */ flex-grow: 0;
flex-grow: 0; display: flex;
/* flex-container */ flex-wrap: wrap;
display: flex; align-items: flex-end;
flex-wrap: wrap;
align-items: flex-end;
} }
.social { .social {
background-image: unset; background-image: unset;
padding: 0.5vmin; padding: 0.5vmin;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.social>img { .social > img {
color: #000000; color: #000000;
aspect-ratio: 1/1; aspect-ratio: 1/1;
width: 1.5rem; width: 1.5rem;
height: auto; height: auto;
} }
.social { .social {
&:hover { &:hover {
&>img { & > img {
filter: invert(1); filter: invert(1);
}
} }
}
} }
[data-theme="dark"] { [data-theme="dark"] {
.social { .social {
&:hover { &:hover {
&>img { & > img {
filter: invert(0); filter: invert(0);
} }
} }
&>img { & > img {
filter: invert(1); filter: invert(1);
}
} }
}
} }
.credits { .credits {
font-size: 0.88rem; font-size: 0.88rem;
color: var(--meta-color); color: var(--meta-color);
} }

@ -1,126 +1,129 @@
header { header {
width: 100%; width: 100%;
.main {
display: flex; .main {
flex-direction: row; display: flex;
flex-wrap: wrap; flex-direction: row;
justify-content: space-between; flex-wrap: wrap;
align-items: flex-start; justify-content: space-between;
gap: 12px; align-items: flex-start;
font-size: 1.5rem; gap: 12px;
margin-bottom: 10px; font-size: 1.5rem;
} margin-bottom: 10px;
}
} }
.page-header { .page-header {
font-size: 3em; font-size: 3em;
line-height: 100%; line-height: 100%;
font-family: var(--header-font); font-family: var(--header-font);
margin: 4rem 0px 1rem 0px; margin: 4rem 0px 1rem 0px;
} }
.centered-header { .centered-header {
font-family: var(--header-font); font-family: var(--header-font);
position: absolute; position: absolute;
top: 40%; top: 40%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
text-align: center; text-align: center;
font-size: 1em; font-size: 1em;
} }
.navbar { .navbar {
max-width: var(--max-layout-width); max-width: var(--max-layout-width);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 1em 0; padding: 1em 0;
margin: 0 auto; margin: 0 auto;
} }
.nav-navs { .nav-navs {
display: flex; display: flex;
gap: 5px; gap: 5px;
img {
border: none; img {
} border: none;
}
} }
.nav-links { .nav-links {
font-size: 1em; font-size: 1em;
font-weight: 340; font-weight: 340;
text-decoration: none; text-decoration: none;
justify-content: right; justify-content: right;
color: var(--text-color); color: var(--text-color);
padding: 0.66rem; padding: 0.66rem;
} }
.home-title { .home-title {
font-size: 1.7em; font-size: 1.7em;
font-weight: 450; font-weight: 450;
padding: 0.12rem; padding: 0.12rem;
margin-left: -0.12rem; margin-left: -0.12rem;
border: none; border: none;
color: var(--primary-color); color: var(--primary-color);
text-decoration: none; text-decoration: none;
} }
.meta { .meta {
color: var(--meta-color); color: var(--meta-color);
letter-spacing: -0.5px; letter-spacing: -0.5px;
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 300; font-weight: 300;
padding: 0; padding: 0;
padding-top: 0.7vmin; padding-top: 0.7vmin;
padding-bottom: 3vmin; padding-bottom: 3vmin;
line-height: 1.4rem; line-height: 1.4rem;
a { a {
color: var(--meta-color); color: var(--meta-color);
text-decoration-color: none; text-decoration-color: none;
font-weight: inherit; font-weight: inherit;
text-decoration: none; text-decoration: none;
} }
ul, li { ul,
list-style-type: none; li {
display: inline; list-style-type: none;
} display: inline;
}
} }
.card-meta { .card-meta {
color: var(--meta-color); color: var(--meta-color);
font-size: 0.92rem; font-size: 0.92rem;
} }
@media only screen and (max-width: 1000px) { @media only screen and (max-width: 1000px) {
.navbar { .navbar {
max-width: var(--normal-layout-width); max-width: var(--normal-layout-width);
} }
.nav-navs { .nav-navs {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.nav-navs { .nav-navs {
margin-top: 0.8rem; margin-top: 0.8rem;
width: 100%; width: 100%;
justify-content: center; justify-content: center;
} }
.navbar { .navbar {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
} }
@media only screen and (max-width: 300px) { @media only screen and (max-width: 300px) {
.navbar { .navbar {
max-width: var(--small-layout-width); max-width: var(--small-layout-width);
} }
} }

@ -1,52 +1,53 @@
figure { figure {
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
margin: 0; margin: 0;
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
figcaption { figcaption {
font-family: var(--serif-font); font-family: var(--serif-font);
font-size: 0.72rem; font-size: 0.72rem;
color: var(--meta-color); color: var(--meta-color);
text-align: center; text-align: center;
} }
figure img { figure img {
max-height: 500px; max-height: 500px;
} }
img { img {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
figure h4 { figure h4 {
font-size: 1rem; font-size: 1rem;
margin: 0; margin: 0;
margin-bottom: 1em; margin-bottom: 1em;
} }
figure h4::before { figure h4::before {
content: ""; content: "";
} }
svg { svg {
max-height: 15px; max-height: 15px;
} }
.img-dark { .img-dark {
display: none; display: none;
} }
[data-theme="dark"] { [data-theme="dark"] {
.img-dark { .img-dark {
display: block; display: block;
} }
.img-light {
display: none; .img-light {
} display: none;
}
} }

@ -1,37 +1,37 @@
.draft-label { .draft-label {
color: var(--hover-color); color: var(--hover-color);
text-decoration: none; text-decoration: none;
padding: 2px 4px; padding: 2px 4px;
margin-left: 6px; margin-left: 6px;
background-color: var(--primary-color); background-color: var(--primary-color);
} }
.article-title { .article-title {
color: var(--text-color-high-contrast); color: var(--text-color-high-contrast);
display: block; display: block;
font-size: 2rem; font-size: 2rem;
font-weight: 550; font-weight: 550;
line-height: 3rem; line-height: 3rem;
} }
iframe { iframe {
border: none; border: none;
display: block; display: block;
aspect-ratio: 16/9; aspect-ratio: 16/9;
width: 100vmin; width: 100vmin;
max-width: 70%; max-width: 70%;
margin-left: 15%; margin-left: 15%;
margin-right: 15%; margin-right: 15%;
margin-bottom: 3vmin; margin-bottom: 3vmin;
} }
.zola-anchor { .zola-anchor {
font-size: 1rem; font-size: 1rem;
position: absolute; position: absolute;
margin-left: -1.9em; margin-left: -1.9em;
padding-right: 0.45em; padding-right: 0.45em;
padding-left: 0.4em; padding-left: 0.4em;
opacity: 0; opacity: 0;
} }
h1:hover .zola-anchor, h1:hover .zola-anchor,
@ -40,123 +40,127 @@ h3:hover .zola-anchor,
h4:hover .zola-anchor, h4:hover .zola-anchor,
h5:hover .zola-anchor, h5:hover .zola-anchor,
h6:hover .zola-anchor { h6:hover .zola-anchor {
opacity: 1; opacity: 1;
} }
h1, h2, h3, h4, h5, h6 { h1,
a:hover { h2,
background-color: transparent; h3,
} h4,
h5,
h6 {
a:hover {
background-color: transparent;
}
} }
@media (max-width: 500px) { @media (max-width: 500px) {
.zola-anchor { .zola-anchor {
display: none; display: none;
} }
} }
ul { ul {
margin-top: 0; margin-top: 0;
} }
.toc-container { .toc-container {
margin-bottom: 4vmin; margin-bottom: 4vmin;
} }
.title-container { .title-container {
padding-bottom: 15px; padding-bottom: 15px;
} }
.bottom-divider { .bottom-divider {
border-bottom: var(--divider-color) solid 0.5px; border-bottom: var(--divider-color) solid 0.5px;
} }
::-moz-selection { ::-moz-selection {
background: var(--primary-color); background: var(--primary-color);
color: var(--hover-color); color: var(--hover-color);
text-shadow: none; text-shadow: none;
} }
::selection { ::selection {
background: var(--primary-color); background: var(--primary-color);
color: var(--hover-color); color: var(--hover-color);
} }
.nav.tags { .nav.tags {
display: inline-block; display: inline-block;
} }
p { p {
line-height: 1.5; line-height: 1.5;
} }
hr { hr {
border: 0; border: 0;
border-top: 3px solid var(--border-color); border-top: 3px solid var(--border-color);
margin: 1em 0; margin: 1em 0;
} }
blockquote { blockquote {
border-left: 0.2rem solid var(--primary-color); border-left: 0.2rem solid var(--primary-color);
color: var(--quote-color); color: var(--quote-color);
margin: 0; margin: 0;
padding-left: 1em; padding-left: 1em;
} }
a { a {
color: var(--primary-color); color: var(--primary-color);
text-decoration: inherit; text-decoration: inherit;
font-weight: inherit; font-weight: inherit;
position: relative; position: relative;
} }
a:hover { a:hover {
background-color: var(--primary-color); background-color: var(--primary-color);
color: var(--hover-color); color: var(--hover-color);
} }
a:not(.no-hover-padding, .zola-anchor)::before { a:not(.no-hover-padding, .zola-anchor)::before {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: -0.15em; left: -0.15em;
right: -0.15em; right: -0.15em;
z-index: -1; z-index: -1;
background-color: var(--primary-color); background-color: var(--primary-color);
opacity: 0; opacity: 0;
} }
a:not(.no-hover-padding):hover::before { a:not(.no-hover-padding):hover::before {
opacity: 1; opacity: 1;
} }
/* Remove post list padding */
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.list > ul { .list > ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
} }
table { table {
justify-self: center; justify-self: center;
font: inherit; font: inherit;
overflow: hidden; overflow: hidden;
border-style : hidden!important; border-style: hidden !important;
margin: 2rem 0; margin: 2rem 0;
font-family: sans-serif; font-family: sans-serif;
min-width: 400px; min-width: 400px;
border: none; border: none;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
min-width: 13rem; min-width: 13rem;
} }
table thead tr { table thead tr {
background-color: var(--table-header-color); background-color: var(--table-header-color);
color: #1f1f1f; color: #1f1f1f;
text-align: left; text-align: left;
} }
table th, table th,
@ -166,29 +170,31 @@ table td {
} }
table tbody tr:nth-child(even) { table tbody tr:nth-child(even) {
background-color: var(--bg-0); background-color: var(--bg-0);
} }
.footnote-reference { .footnote-reference {
font-family: var(--serif-font); font-family: var(--serif-font);
font-size: 0.7rem; font-size: 0.7rem;
} }
.footnote-definition { .footnote-definition {
margin-top: 3.5rem; margin-top: 3.5rem;
border-top: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
padding-top: 1rem; padding-top: 1rem;
sup {
font-family: var(--serif-font); sup {
font-size: 0.75rem; font-family: var(--serif-font);
margin-right: 0.15rem; font-size: 0.75rem;
} margin-right: 0.15rem;
p { }
display: inline;
} p {
display: inline;
}
} }
.references p { .references p {
text-indent: -2.4rem; text-indent: -2.4rem;
margin-left: 2.4rem; margin-left: 2.4rem;
} }

@ -1,15 +1,15 @@
table { table {
border-spacing: 0; border-spacing: 0;
border-collapse: collapse; border-collapse: collapse;
} }
table th { table th {
padding: 6px 13px; padding: 6px 13px;
border: 1px solid #dfe2e5; border: 1px solid #dfe2e5;
font-size: large; font-size: large;
} }
table td { table td {
padding: 6px 13px; padding: 6px 13px;
border: 1px solid #dfe2e5; border: 1px solid #dfe2e5;
} }

@ -60,6 +60,7 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.tags-item { .tags-item {
margin-top: 1rem; margin-top: 1rem;
} }

@ -1,41 +1,47 @@
.theme-switcher { .theme-switcher {
align-self: center; align-self: center;
margin-left: 0.5rem; margin-left: 0.5rem;
width: 1rem;
height: 1rem;
position: relative;
cursor: pointer;
.switch {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
position: absolute; position: relative;
left: 0px; cursor: pointer;
display: flex;
justify-content: center; .switch {
align-items: center; width: 1rem;
img { height: 1rem;
width: 100%; position: absolute;
height: auto; left: 0px;
position: absolute; display: flex;
border: none; justify-content: center;
} align-items: center;
.sun {
opacity: 0; img {
} width: 100%;
.moon { height: auto;
opacity: 1; position: absolute;
border: none;
}
.sun {
opacity: 0;
}
.moon {
opacity: 1;
}
} }
}
input { input {
display: none; display: none;
&:checked + .switch {
.sun { &:checked + .switch {
opacity: 1; .sun {
} opacity: 1;
.moon { }
opacity: 0;
} .moon {
opacity: 0;
}
}
} }
}
} }

Loading…
Cancel
Save