From ad2be2b20c337d99ebe6e7d4b8cf6106cfba77df Mon Sep 17 00:00:00 2001 From: Wolfgang Müller Date: Sat, 12 Jun 2021 14:21:59 +0200 Subject: Initial commit --- sass/style.sass | 172 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 172 insertions(+) create mode 100644 sass/style.sass (limited to 'sass/style.sass') diff --git a/sass/style.sass b/sass/style.sass new file mode 100644 index 0000000..9393dfb --- /dev/null +++ b/sass/style.sass @@ -0,0 +1,172 @@ +@import 'responsive_fonts' +@import 'webfonts' + +// need to prefix :root with a backslash +// https://github.com/sass/libsass/issues/2511 +\:root + --font-sans: Alegreya Sans, sans + --font-serif: Alegreya, serif + --font-mono: Iosevka, Inconsolata, monospace + + --font-size-pre: 85% + + --fg-color: black + --fg-color-mute: #5a5a5a + --fg-href: #0000ee + --fg-href-visited: #551a8b + + --bg-color: white + + --border-color-light: lightgrey + --border-color-dark: darkgrey + +@media (prefers-color-scheme: dark) + \:root + --fg-color: #f0f0f0 + --fg-color-mute: #7a7a7a + --fg-href: #6464ff + --fg-href-visited: #9547dd + + --bg-color: #000000 + +a + text-decoration: none + + &, &:visited + color: var(--fg-href) + + &:hover + text-decoration: underline + +a.tag + &, &:visited + color: var(--fg-color-mute) + + &::before + content: "#" + +a.bold-hover:hover + text-decoration: none + text-shadow: 0px 0px 1px var(--fg-href) + +h2.mentions + margin-bottom: .2rem + +pre + font-family: var(--font-mono) + + margin-left: 1rem + +code + font-size: var(--font-size-pre) + +.mute + color: var(--fg-color-mute) + +.smaller + font-size: smaller + +.bigger + font-size: larger + +.warning + font-weight: bold + color: red + +ul.inline + margin: 0 + padding: 0 + list-style-type: none + display: inline-block + + > li + display: inline-block + + > li:not(:first-of-type) + padding-left: .2em + +div.footnote-definition > + p + font-size: smaller + display: inline-block + margin: 0 .2em + + sup + vertical-align: inherit + + sup::after + content: "." + +html + overflow-y: scroll + +body + font-family: var(--font-sans) + font-size: 1.3rem + + margin: 0 auto + max-width: 720px + padding: 0 1rem + + color: var(--fg-color) + background-color: var(--bg-color) + +main + display: flex + flex-direction: column + +header + margin: 1rem 0 + +header > h1 + margin: 0 + + > a, a:visited + color: inherit + +article + margin: 1rem 0 + padding-left: 78px + position: relative + +article > section.post + > :first-child + margin-top: .5rem + + > p + line-height: 1.3 + + a + text-decoration: underline + + a:visited + color: var(--fg-href-visited) + + img + border-radius: 8px + max-width: 100% + +article > header + margin: 0 + +article > header > img.avatar + position: absolute + left: 0 + width: 64px + + border-radius: 4px + border: 1px solid var(--border-color-light) + +article > header > div.banner + display: flex + justify-content: space-between + border-bottom: 1px dotted var(--border-color-dark) + +nav.pagination + display: flex + + margin: 1rem 0 + padding-top: .5rem + + > a.older + margin-left: auto -- cgit v1.2.3-2-gb3c3