133 lines
3.2 KiB
CSS
133 lines
3.2 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
--background-color: #131418;
|
|
--color: #babdc4;
|
|
--border-color: #1b1d25;
|
|
--link-color: #77a8fd;
|
|
--text-decoration-color: #767f87;
|
|
--post-meta-color: #767f87;
|
|
--post-header-color: #eaeaea;
|
|
--quote-color: #9b9ba3;
|
|
--quote-border-color: #4a4d56;
|
|
--footer-color: #767f87;
|
|
--footnotes-color: #767f87;
|
|
}
|
|
|
|
@layer base {
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100svh;
|
|
background-color: var(--background-color);
|
|
color: var(--color);
|
|
font: 16px/1.85 Roboto, sans-serif;
|
|
overflow-y: scroll;
|
|
/* FIXME: border-color transition does not work */
|
|
/* transition: background-color 1s ease-in-out, border-color 1s ease-in-out; */
|
|
}
|
|
|
|
a {
|
|
text-decoration-color: var(--text-decoration-color);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--link-color);
|
|
text-decoration-color: var(--link-color);
|
|
}
|
|
|
|
hr {
|
|
border-color: var(--border-color);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* roboto-regular - latin */
|
|
@font-face {
|
|
font-display: swap;
|
|
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'Roboto';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url(/fonts/Roboto/roboto-v30-latin-regular.eot);
|
|
/* IE9 Compat Modes */
|
|
src: url(/fonts/Roboto/roboto-v30-latin-regular.eot?#iefix) format('embedded-opentype'),
|
|
/* IE6-IE8 */
|
|
url(/fonts/Roboto/roboto-v30-latin-regular.woff2) format('woff2'),
|
|
/* Super Modern Browsers */
|
|
url(/fonts/Roboto/roboto-v30-latin-regular.woff) format('woff'),
|
|
/* Modern Browsers */
|
|
url(/fonts/Roboto/roboto-v30-latin-regular.ttf) format('truetype'),
|
|
/* Safari, Android, iOS */
|
|
url(/fonts/Roboto/roboto-v30-latin-regular.svg#Roboto) format('svg');
|
|
/* Legacy iOS */
|
|
}
|
|
|
|
li {
|
|
list-style-type: auto;
|
|
list-style-position: inside;
|
|
}
|
|
|
|
li>p {
|
|
display: inline;
|
|
}
|
|
|
|
blockquote {
|
|
color: var(--quote-color);
|
|
opacity: .9;
|
|
border-left: 5px solid var(--quote-border-color);
|
|
padding: 0 0 0 1rem;
|
|
margin-left: .3rem;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
font-size: 1em;
|
|
}
|
|
|
|
pre {
|
|
padding: 5px 5px;
|
|
overflow-x: auto;
|
|
scrollbar-width: thin;
|
|
font-size: small;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
figure {
|
|
margin: 1em 0;
|
|
}
|
|
|
|
figcaption {
|
|
color: var(--post-meta-color);
|
|
font-size: small;
|
|
text-align: center;
|
|
margin-top: 3px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
ul>li {
|
|
list-style-type: disc;
|
|
list-style-position: inside;
|
|
}
|
|
|
|
img {
|
|
max-height: 600px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
figure:has(iframe) {
|
|
position: relative;
|
|
padding-bottom: 56.25% !important;
|
|
height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
iframe {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0
|
|
}
|
|
}
|