From 84d6079e2ba49fa8c73318e4f5930af1aaddb338 Mon Sep 17 00:00:00 2001 From: Siri Reiter Date: Tue, 6 Sep 2022 17:04:05 +0200 Subject: add styling based on site jord --- partials/_base-normalize.scss | 6 ++ partials/_base-typey.scss | 24 +++++++ partials/_base.scss | 31 +++++++++ style.scss | 142 ++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 203 insertions(+) create mode 100644 partials/_base-normalize.scss create mode 100644 partials/_base-typey.scss create mode 100644 partials/_base.scss create mode 100644 style.scss diff --git a/partials/_base-normalize.scss b/partials/_base-normalize.scss new file mode 100644 index 0000000..4f0f737 --- /dev/null +++ b/partials/_base-normalize.scss @@ -0,0 +1,6 @@ +// Normalize integration +// +// No styleguide reference. +$-normalize-include: null; +$-normalize-exclude: null; +$base-font-family: $sans-serif-stack; diff --git a/partials/_base-typey.scss b/partials/_base-typey.scss new file mode 100644 index 0000000..9aabd69 --- /dev/null +++ b/partials/_base-typey.scss @@ -0,0 +1,24 @@ +// Typey integration +// +// No styleguide reference. +$base-unit: em; +$base-font-size: 16px; +$base-line-height: 28px; + +$helvetica: Helvetica, sans-serif; +$verdana: Verdana, sans-serif; +$garamond: Garamond, serif; + +$typefaces: ( + sans-serif: $sans-serif-stack, + serif: $garamond, + monospace: $monospace-stack, +); + +$typestyles: ( + heading-1: ( + font-size: xxl, + line-height: 2, + weight: normal, + ), +); diff --git a/partials/_base.scss b/partials/_base.scss new file mode 100644 index 0000000..da522e1 --- /dev/null +++ b/partials/_base.scss @@ -0,0 +1,31 @@ +// Colors +// +// (don't use these directly - only referenced by other variables) +// +// No styleguide reference. +$black: black; +$white: white; +$green: darkgreen; + +// color model +$colorBase: $black; +$colorBg: $white; +$colorPrimary: $green; + +$baseTextColor: $colorBase; + +$linkColor: $colorBase; +$linkHoverColor: $colorPrimary; + +$headerColor: $colorPrimary; + +// Media +// +// No styleguide reference. +$wide: 900px; + +// Framework integrations +// +// No styleguide reference. +@import "base-typey"; +@import "base-normalize"; diff --git a/style.scss b/style.scss new file mode 100644 index 0000000..03d37bd --- /dev/null +++ b/style.scss @@ -0,0 +1,142 @@ +@import "typey/font-stacks"; +@import "partials/base"; + +@import "normalize"; + +@import "typey"; +@import "../shared/themes/default/ikiwiki"; +@import "compass/reset/utilities"; +@import "compass/typography"; +@import "breakpoint"; + +@include normalize; + +@media print { +// TODO: simplify when gutenberg 0.6.1-2 is in Debian +//@import "gutenberg"; +@import "stylesheets/gutenberg/variables"; +@import "stylesheets/gutenberg/print-reset"; +@import "stylesheets/gutenberg/pagination"; +@import "stylesheets/gutenberg/page"; +@import "stylesheets/gutenberg/reformat"; +@import "stylesheets/gutenberg/utilities"; +} + +@include ikiwiki-style; + +h1 { + @include typeset(heading-1); +} + +#branding-logo { + width: 94%; + margin: 2em 3% 0; + text-align: right; + @include breakpoint($wide) { + z-index: -1; + position: absolute; + margin-top: 8em; + img { + max-width: 18%; + } + } +} + +.pageheader { + padding: 0; + header { + padding: 1em 2%; + } +} + +a { + @include hover-link; + @include link-colors($linkColor, $linkHoverColor, $linkColor, $linkColor, $linkHoverColor); + font-weight: bold; +} +.selflink { + color: $linkHoverColor; +} + +.header, +.author, +.recentchanges, +.committype, +#footer, +.inlinefooter { + font-size: 80%; +} + +.topbar { + padding: 1em 2%; + text-align: center; +} + +.topbar ul { + @include inline-list; + li { + margin-right: 2em; + font-variant: all-petite-caps; + } +} + +.sidebar { + float: left; + padding: 0; + border: none; + margin-top: -400px; + margin-right: 2%; + margin-bottom: 1em; + margin-left: 2%; + width: 21%; + background: transparent; +} + +.sidebar ul { + list-style-type: none; + padding-left: 0; + margin: 0; +} + +.sidebar ul li .selflink { + color: $linkHoverColor; +} + +#content { + width: 96%; + max-width: 32em; + min-height: 480px; + margin: 0 auto; + padding: 2em 2%; +} + +#backlinks { + display: none; +} + +img { + vertical-align: top; + margin: 0 1em 1em 0; + padding: 0; + max-width: 100%; + height: auto; +} + +img.solo { + float: none; + display: block; + clear: both; +} + +th { + text-align: left; +} + +#pageinfo { + border-top: none; + padding-left: 2em; + bottom: 0; + @include breakpoint($wide) { + position: fixed; + } +} -- cgit v1.2.3