otmp_site/sass/style.scss

113 lines
1.8 KiB
SCSS
Raw Normal View History

2022-12-03 20:01:01 +01:00
// -------------- THEME SWITCHER -------------- //
@mixin dark-appearance {
filter: invert(1);
img {
filter: invert(1);
&.invertable { filter: invert(0); }
}
}
body[theme="dark"] { @include dark-appearance; }
@media (prefers-color-scheme: dark) {
body[theme="auto"] { @include dark-appearance; }
}
@font-face {
font-family: "Vazir";
src: url(fonts/Vazirmatn-Regular.ttf) format("truetype");
}
2022-12-03 20:01:01 +01:00
// -------------------------------------------- //
// bg color is also needed in html in order to
// block body's background propagation
// see: https://stackoverflow.com/a/61265706
html, body { background: white; }
html { height: 100%; }
body {
color: black;
font-family: "Vazir";
2022-12-03 20:01:01 +01:00
font-size: 16px;
line-height: 1.4;
margin: 0;
min-height: 100%;
overflow-wrap: break-word;
}
.post-meta { text-align: right; }
h2, h3, h4, h5, h6 { margin-top: 3rem; }
hr { margin: 2rem 0; }
p { margin: 1rem 0; }
li { margin: 0.4rem 0; }
*:target { background: yellow; }
.w {
max-width: 850px;
2022-12-03 20:01:01 +01:00
margin: 0 auto;
padding: 4rem 2rem;
}
hr {
text-align: center;
border: 0;
&:before { content: '/////' }
&:after { content: attr(data-content) '/////' }
}
table { width: 100%; }
table, th, td {
border: thin solid black;
border-collapse: collapse;
padding: 0.4rem;
}
code {
color: white;
background: rgb(99, 99, 99);
2022-12-03 20:01:01 +01:00
}
pre code {
display: block;
overflow-x: auto;
white-space: pre-wrap;
padding: 1rem;
}
blockquote {
font-style: italic;
border: thin solid black;
padding: 1rem;
p { margin: 0; }
}
img {
max-width: 100%;
display: block;
margin: 0 auto;
}
.footnote-definition {
padding: 0 1rem;
&:target {
background: yellow;
color: #212121;
}
p {
display: inline;
}
}
nav, .taxonomies { text-align: center; }