From 271298a9763515e1735abc5a68eff102c3d676c4 Mon Sep 17 00:00:00 2001 From: Johannes Stoelp Date: Wed, 21 Dec 2022 23:45:30 +0100 Subject: initial version of own template --- sass/_zola.scss | 30 +++++++++++++ sass/site.scss | 130 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 160 insertions(+) create mode 100644 sass/_zola.scss create mode 100644 sass/site.scss (limited to 'sass') diff --git a/sass/_zola.scss b/sass/_zola.scss new file mode 100644 index 0000000..01fc954 --- /dev/null +++ b/sass/_zola.scss @@ -0,0 +1,30 @@ +// -- zola syntax highlighting (https://www.getzola.org/documentation/content/syntax-highlighting/#styling-codeblocks) + +pre { + padding: 0.5rem; + overflow: auto; + border-radius: 0.25rem; +} + +pre[data-linenos] { + padding: 1rem 0; +} + +pre table td { + padding: 0; +} + +pre table td:nth-of-type(1) { + text-align: center; + user-select: none; +} + +pre mark { + display: block; + background-color: rgba(254, 252, 232, 0.9); +} + +pre table { + width: 100%; + border-collapse: collapse; +} diff --git a/sass/site.scss b/sass/site.scss new file mode 100644 index 0000000..c3a3398 --- /dev/null +++ b/sass/site.scss @@ -0,0 +1,130 @@ +@import "zola"; + +// -- color definitions + +//$color-bg : #000000; +$color-bg : #202124; +$color-fg : #ffffff; +$color-link : #50fa7b; +//$color-link : #c792ea; + +// -- root style + +html { + background-color: $color-bg; + color: $color-fg; + font-family: "Source Code Pro", "Liberation Mono", "JetBrains Mono", monospace, sans-serif; + font-size: clamp(13px, 2vw, 16px); +} + +// -- body style + +body { + max-width: 80ch; + padding: 2ch; + margin: auto; +} + +// -- header style + +h1, h2, h3, h4, h5, h6 { + font-size: 1rem; +} + +h1 { + padding-top: 1rem; +} + +h2 { + padding-top: 1rem; +} + +h1::after { + content: "--------------------------------------------------------------------------------"; + display:block; + overflow: hidden; + white-space:nowrap; +} + +h2::before { + content: "# " +} + +h3::before { + content: "## " +} + +h4::before { + content: "### " +} + +h5::before { + content: "#### " +} + +h6::before { + content: "##### " +} + +// -- link settings + +a { + color: $color-link; + text-decoration: none; + border-bottom: 1px solid $color-link; +} + +a:hover { + background-color: $color-link; + color: $color-bg; +} + +h1 a, h2 a, h3 a, h4 a, h5 a { + color: $color-fg; +} + +// -- list style + +ul { + list-style-type: "- "; + padding-left: 2ch; +} + +// -- code style + +code { + font-weight: bold; +} + +code::before, code::after { + content: "*"; +} + +pre code { + font-weight: normal; +} + +pre code::before, pre code::after { + content: none; +} + +// -- misc classes + +.extra-notes { + color: $color-fg; + opacity: 0.5; +} + +// -- playground + +//nav { +// display: flex; +// flex-direction: row; +//} +//nav a { +// margin: auto; +//} + +//pre { +// max-width: 100ch; +//} -- cgit v1.2.3