mikaela.github.io/assets/main.scss
Aminda Suomalainen 69d7cde42a
main.scss: add font-variant-emoji: text
It's behind a flag in at least Firefox and Safari, but I am currently using a selector anyway
2024-06-01 14:37:06 +03:00

101 lines
2.1 KiB
SCSS

---
# Only the main Sass file needs front matter (the dashes are enough)
---
@charset "utf-8";
// Our variables
$base-font-family: ui-serif, system-ui, "Liberation Serif", Tinos,
"Times New Roman", serif, emoji;
//$base-font-family: ui-sans-serif, system-ui, "Liberation Sans", "Arimo", "Arial", sans-serif;
$monospace-font-family: ui-monospace, "Liberation Mono", Cousine, "Courier New",
monospace, emoji;
// 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;
hyphens: auto !important;
// Experimental trick to make all emojis text if supported.
font-variant-emoji: text;
}
a {
text-decoration: underline !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;
}
// Overrides for light themes
@media (prefers-color-scheme: light) {
*:not(a) {
border-color: #000000 !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;
}
}
// 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;
}
// _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;
}