From dbfe642280c043e129752c488aa8c14159071281 Mon Sep 17 00:00:00 2001 From: Alexandre Jesus Date: Fri, 26 Aug 2022 13:10:42 +0100 Subject: Initial site, and first blog post --- sass/main.scss | 143 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 143 insertions(+) create mode 100644 sass/main.scss (limited to 'sass') diff --git a/sass/main.scss b/sass/main.scss new file mode 100644 index 0000000..5c03760 --- /dev/null +++ b/sass/main.scss @@ -0,0 +1,143 @@ +:root { + --bg-color: #F8F8F8; + --fg-color: #383838; + --links-color: #383838; + --links-hover-color: #585858; + --heading-color: #254070; + --selected-navli-color: #AC4142; + --unselected-navli-color: #254070; + --code-bg-color: #E8E8E8; + --code-fg-color: #383838; +} + +@media (prefers-color-scheme: dark) { + :root { + --bg-color: #1B2B34; + --fg-color: #C0C5CE; + --links-color: #6699CC; + --links-hover-color: #5FB3B3; + --heading-color: #CDD3DE; + --selected-navli-color: #C0C5CE; + --unselected-navli-color: #F99157; + --code-bg-color: #2B3B44; + --code-fg-color: #C0C5CE; + } +} + +* { + font-family: "Fira Sans", sans-serif; + padding: 0; + margin: 0; +} + +body { + background-color: var(--bg-color); + color: var(--fg-color); + font-size: 13pt; + line-height: 1.5; + max-width: 700px; + margin: 0 auto; + text-rendering: optimizelegibility; + word-wrap: break-word; +} + +@media (max-width: 700px) { + body { + margin: 0 2ex; + } +} + +h1, h2, h3, h4, h5, h6, hr { + margin-top: 0.8em; + color: var(--heading-color); +} + +footer { + margin-top: 1em; + margin-bottom: 1em; + border-top-width: 1px; + border-top-style: solid; + border-top-color: var(--heading-color); + font-size: 12pt; +} + +.navbar { + padding-top: 0.8em; + font-size: 14pt; +} + +.navbar ul { + margin: 0; + padding: 0; +} + +.navbar li { + display: inline; + margin: 0 2ex 0 0; +} + +.navbar-unselected { + color: var(--unselected-navli-color); +} + +.navbar-unselected:hover { + color: var(--selected-navli-color); +} + +.navbar-selected { + color: var(--selected-navli-color); +} + +.navbar-selected:hover { + color: var(--selected-navli-color); +} + +a { + color: var(--links-color); + text-decoration: underline; +} + +a:hover { + color: var(--links-hover-color); + text-decoration: underline; +} + +main p, footer p { + padding-top: 0.7em; +} + +main ul, ol { + padding-top: 0.5em; + padding-left: 2.5ex; +} + +main li ul { + padding-top: 0em; +} + +main li { + padding-top: 0.2em; +} + +code { + background-color: var(--code-bg-color); + color: var(--code-fg-color); + font-family: "Fira Mono", monospace; + font-size: 0.9em; + padding: 0.1em 0.4ex; + border-radius: 4px; +} + +pre { + background-color: var(--code-bg-color); + color: var(--code-fg-color); + margin-top: 0.7em; + padding: 0.2em 1.0ex; + border-radius: 4px; + overflow-x: auto; +} + +pre code { + padding: 0; + border: 0; +} -- cgit v1.2.3