mikaela.github.io/assets/main.scss

140 lines
3.0 KiB
SCSS
Raw Normal View History

2014-12-29 18:35:21 +01:00
---
# Only the main Sass file needs front matter (the dashes are enough)
---
2023-02-22 19:28:38 +01:00
@charset "utf-8";
2014-12-29 18:35:21 +01:00
// Our variables
2024-06-08 08:26:53 +02:00
$serif-font-family: ui-serif, "Liberation Serif", Tinos, "Times New Roman",
serif, emoji;
$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;
2024-06-08 08:26:53 +02:00
// Must be in the end or undefined error.
$base-font-family: $sans-serif-font-family;
2014-12-29 18:35:21 +01:00
2024-05-29 09:59:20 +02:00
// CSS of used Jekyll theme
2024-05-27 08:03:12 +02:00
@import "{{ site.theme }}";
2014-12-29 18:35:21 +01:00
2024-05-29 09:59:20 +02:00
// My overrides, often !important so they actually get used
// As high in css as can be edited.
2024-05-25 06:53:19 +02:00
:root {
2024-05-29 09:59:20 +02:00
color-scheme: light dark !important;
2024-05-27 08:03:12 +02:00
}
// Revert to defaults, or make settings default
2024-05-27 08:03:12 +02:00
* {
color: revert !important;
overflow-wrap: break-word !important;
2024-06-06 17:27:20 +02:00
/* Funny trick for multiple columned pages with automatic column count
column-width: 78ch !important;
*/
/* begin https://clagnut.com/blog/2395/ */
hyphens: auto !important;
2024-06-06 17:27:20 +02:00
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;
2024-05-25 06:53:19 +02:00
}
2024-05-29 09:59:20 +02:00
a {
text-decoration: underline !important;
2024-05-27 08:29:42 +02:00
}
2024-05-29 09:59:20 +02:00
2024-06-08 08:26:53 +02:00
a.site-title {
font-family: $serif-font-family;
}
2024-06-06 17:27:20 +02:00
// .page-content {
// width: 100% !important;
// max-width: 78ch !important;
// margin: 0 auto !important;
// }
// Monospace preferred for code
2024-05-27 08:29:42 +02:00
code,
pre {
font-family: $monospace-font-family !important;
}
// So it will not look bigger than normal text
code {
2024-05-29 09:59:20 +02:00
font-size: 0.8em !important;
2024-05-27 08:29:42 +02:00
}
2024-06-08 08:26:53 +02:00
// Serif for headings?
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;
}
2024-06-06 17:27:20 +02:00
.ftf-dma-note {
max-width: 78ch !important;
margin: 0 auto !important;
}
}
// Overrides for dark themes
@media (prefers-color-scheme: dark) {
2024-05-29 09:59:20 +02:00
*: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;
2024-06-06 17:27:20 +02:00
max-width: 78ch !important;
margin: 0 auto !important;
2024-05-27 06:49:02 +02:00
}
2024-05-25 06:53:19 +02:00
}
2015-10-09 12:59:45 +02:00
// This is used in the index
2018-09-17 15:48:05 +02:00
#avatar {
2023-02-22 19:28:38 +01:00
margin-left: auto;
margin-right: auto;
2024-05-29 09:59:20 +02:00
width: 25%;
2024-05-21 11:09:33 +02:00
border: 1px solid;
//display: block;
display: float;
float: right;
}
2015-10-09 12:59:45 +02:00
// This is the short bio in the index and all my profiles
#bio {
2023-02-22 19:28:38 +01:00
text-align: center;
font-style: italic;
2024-06-08 08:26:53 +02:00
font-family: ui-cursive, $serif-font-family;
}
2015-10-09 12:59:45 +02:00
// _layouts/mini.html calls this for returning to index!
.centered {
list-style-type: none;
margin: 0 auto;
text-align: center;
}
2024-05-29 09:59:20 +02:00
// At least used in the index SSH key fingerprints
.monospaced {
font-family: $monospace-font-family;
font-size: 0.8em;
}