mikaela.github.io/assets/main.scss

150 lines
3.6 KiB
SCSS

---
# Only the main Sass file needs front matter (the dashes are enough)
---
@charset "utf-8";
// Font specifications. I keep changing my mind on what are the most pleasant
// fonts to my eyes, so I won't bother commenting them here.'
$serif-font-family: ui-serif, "Roboto Serif", "Noto Serif", Tinos, serif,
"Noto Emoji", "Noto Color Emoji", emoji;
$sans-serif-font-family: ui-sans-serif, "Roboto Flex", Roboto, "Noto Sans",
Arimo, sans-serif, "Noto Emoji", "Noto Color Emoji", emoji;
$monospace-font-family: ui-monospace, "Roboto Mono", "Noto Mono", Cousine,
monospace, "Noto Emoji", "Noto Color Emoji", emoji;
// Must be in the end under threat of undefined variable error.
$base-font-family: $sans-serif-font-family;
// CSS of used Jekyll theme
@import "{{ site.theme }}";
// My overrides, often !important so they actually get used
// As high in css as can be edited.
:root {
color-scheme: light dark !important;
}
// Revert to defaults, or make settings default
* {
color: revert !important;
overflow-wrap: break-word !important;
/* Funny trick for multiple columned pages with automatic column count
column-width: 78ch !important;
*/
/* begin https://clagnut.com/blog/2395/ */
hyphens: auto !important;
hyphenate-limit-chars: 6 3 3 !important;
hyphenate-limit-lines: 2 !important;
hyphenate-limit-last: always !important;
hyphenate-limit-zone: 8% !important;
/* end https://clagnut.com/blog/2395/ */
// Experimental trick to make all emojis text if supported.
font-variant-emoji: text;
/* WCAG minimum suggestions */
margin-bottom: 2 !important;
line-height: 1.5 !important;
letter-spacing: 0.12 !important;
word-spacing: 0.16 !important;
}
// E.g. blesmrt.net vs bIesmrt.net
a {
text-decoration: underline !important;
font-family: $serif-font-family;
}
// Extraneous considering the above.
//a.site-title {
// font-family: $serif-font-family;
//}
// .page-content {
// width: 100% !important;
// max-width: 78ch !important;
// margin: 0 auto !important;
// }
// Monospace preferred for code
code,
pre {
font-family: $monospace-font-family !important;
}
// So it will not look bigger than normal text
code {
font-size: 0.8em !important;
}
// Serif for headings to constrast with everything else being sans-serif
// (except links).
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: $serif-font-family !important;
}
// Overrides for light themes
@media (prefers-color-scheme: light) {
*:not(a) {
border-color: #000000 !important;
}
.ftf-dma-note {
max-width: 78ch !important;
margin: 0 auto !important;
}
}
// Overrides for dark themes
@media (prefers-color-scheme: dark) {
*:not(a) {
color: #ffb700 !important;
border-color: #ffb700 !important;
background-color: #000000 !important;
}
// Adblocker detection)
.ftf-dma-note {
color-scheme: only dark !important;
color: #ffb700 !important;
border-color: #ffb700 !important;
background-color: #000000 !important;
max-width: 78ch !important;
margin: 0 auto !important;
}
}
// This is used in the index
#avatar {
margin-left: auto;
margin-right: auto;
width: 25%;
border: 1px solid;
//display: block;
display: float;
float: right;
}
// This is the short bio in the index and all my profiles
#bio {
//text-align: center;
font-style: italic;
font-family: ui-cursive, $serif-font-family;
}
// _layouts/mini.html calls this for returning to index!
.centered {
list-style-type: none;
margin: 0 auto;
text-align: center;
}
// At least used in the index SSH key fingerprints
.monospaced {
font-family: $monospace-font-family;
font-size: 0.8em;
}