CSS - micro.atplu.me
Version from 2024-09-21
Base theme: Terminal
@import url('https://fonts.googleapis.com/css2?family=FiraCode:wght@400&family=Bungee+Shade;700&display=swap&');
@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');
:root {
--width: 720px;
--font-main: 'Fira Code', monospace;
--font-secondary: 'Fira Code', monospace;
--font-scale: 1em;
--background-color: #fff8fe;
--heading-color: #b46294;
--text-color: #000000;
--link-color: #5e3861;
--visited-color: #2e1b30;
--code-background-color: #f8eef7;
--code-color: #222;
--blockquote-color: #222;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #493e74;
--heading-color: #ffe5fd;
--text-color: #fcfcfc;
--link-color: #ffe5fd;
--visited-color: #fcfcfc;
--code-background-color: #2C2546;
--code-color: #ffe5fd;
--blockquote-color: #dbdbdb;
}
}
::selection {
background-color: var(--heading-color);
color: var(--background-color);
}
body {
font-family: var(--font-secondary);
font-size: var(--font-scale);
margin: auto;
padding: 20px;
max-width: var(--width);
text-align: left;
background-color: var(--background-color);
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
color: var(--text-color);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-main);
color: var(--heading-color);
}
a {
color: var(--link-color);
cursor: pointer;
text-decoration: underline;
}
a:hover {
text-decoration: underline;
}
main {
margin-top: 40px;
margin-bottom: 20px;
padding: 30px;
border: 1px solid var(--link-color);
}
nav a {
margin-right: 8px;
}
strong,
b {
}
button {
margin: 0;
cursor: pointer;
}
main {
line-height: 1.6;
}
table {
width: 100%;
}
hr {
border: 0;
border-top: 1px dashed;
}
img {
max-width: 100%;
}
code {
font-family: monospace;
padding: 2px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
}
blockquote {
border-top: 1px solid var(--heading-color);
border-bottom: 1px solid var(--heading-color);
color: var(--text-color);
padding: 20px;
font-style: italic;
margin-left: 0px;
margin-right: 0px;
}
footer {
padding: 25px 0;
text-align: center;
opacity: 1;
}
.title:hover {
text-decoration: none;
}
.title h1 {
font-size: 2em;
font-family: 'Bungee', cursive;
padding: 5px 10px;
background: var(--heading-color);
color: var(--background-color);
display: inline-block;
font-weight: 400;
}
.inline {
width: auto !important;
}
.highlight,
.code {
padding: 1px 15px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
margin-block-start: 1em;
margin-block-end: 1em;
overflow-x: auto;
}
.highlight {
border-left: 5px solid var(--heading-color);
}
/* blog post list */
ul.blog-posts {
list-style-type: none;
padding: unset;
}
ul.blog-posts li {
display: flex;
margin-bottom: 20px;
}
ul.blog-posts li time {
font-style: normal;
}
ul.blog-posts li span {
display: none; /* hide blog post date */
flex: 0 0 130px;
}
ul.blog-posts li a:visited {
color: var(--visited-color);
}
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px dashed var(--heading-color);
padding: 10px;
}
@media only screen and (max-width:767px) {
main {
padding: 20px;
margin-top: 30px;
margin-bottom: 10px;
}
ul.blog-posts li {
flex-direction: column;
}
ul.blog-posts li span {
flex: unset;
}
}
/* Hide the time (this will hide all dates, everywhere, this could have cataclysmic consequences, don't play around with dates) */
time {
display: none;
}
/* Hide original bearblog footer, it's added back translated in the footer directive */
#footer-directive span:last-of-type {
display: none;
}