mirror of
https://github.com/mikaela/mikaela.github.io/
synced 2024-12-25 12:42:34 +01:00
146 lines
3.3 KiB
SCSS
146 lines
3.3 KiB
SCSS
---
|
|
# Only the main Sass file needs front matter (the dashes are enough)
|
|
---
|
|
|
|
@charset "utf-8";
|
|
|
|
// Our variables
|
|
$serif-font-family: ui-serif, "Liberation Serif", Tinos, "Times New Roman",
|
|
serif, emoji;
|
|
// I would like to use system-ui as a fallback, but it just is too
|
|
// inconsistent. Refer to https://caniuse.com/extended-system-fonts
|
|
$sans-serif-font-family: ui-sans-serif, "Liberation Sans", "Arimo", "Arial",
|
|
sans-serif;
|
|
$monospace-font-family: ui-monospace, "Liberation Mono", Cousine, "Courier New",
|
|
monospace, emoji;
|
|
// Must be in the end or undefined 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;
|
|
}
|
|
|
|
// 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;
|
|
}
|