From 13a3c1e29473aa9f563e8db4ad94cb3eee9bdfe6 Mon Sep 17 00:00:00 2001 From: Gareth Coles Date: Tue, 5 Jun 2018 16:07:35 +0100 Subject: Move from CSS to SCSS (#86) * Rewrite existing style.css with sass * Add "uses-rst" class for pages that use rendered RST This replaces the previous method of just listing every page in the sass * Remove old debug print * Mixins and error pages * Newly built CSS * Add SASS cache to .gitignore * New error SASS * Slight changes to error template * Add UIKit SCSS to repo This includes the LICENSE and our customizations, which makes life way easier for contributors * Reorganize sass folder; your watchers can avoid uikit now * Sass folder should be called scss * Change variable names * [SCSS] Linting * Fix scss_lint gem name [ci skip] * [SCSS] Now you can compile with just Python! * Temporary hack to make the wiki editor taller * [SCSS] @jchristgit * [SCSS.py] Require specification of include dir to simplify the SCSS imports * [SCSS] All inline styles have been removed * [SCSS] Update UIKit theme to import from our variables * [SCSS] Remove extra newlines in errors/_common.scss --- scss/pysite/_uikit_shim.scss | 110 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 110 insertions(+) create mode 100644 scss/pysite/_uikit_shim.scss (limited to 'scss/pysite/_uikit_shim.scss') diff --git a/scss/pysite/_uikit_shim.scss b/scss/pysite/_uikit_shim.scss new file mode 100644 index 00000000..38e58abc --- /dev/null +++ b/scss/pysite/_uikit_shim.scss @@ -0,0 +1,110 @@ +// Styling that modifies things that are already provided +// by UIKit. This file is intended to be imported from the +// main `style.scss`. + + +@import "variables"; + +$button_dark_background_colour: rgba(0, 0, 0, .95); +$button_dark_border_colour: rgba(34, 34, 34, .93); +$button_dark_hover_background_colour: rgba(0, 0, 0, .70); + +$button_darkish_background_colour: rgba(0, 0, 0, .11); +$button_darkish_border_colour: rgba(34, 34, 34, .09); +$button_darkish_hover_background_colour: rgba(0, 0, 0, .22); + +$dropbar_background_colour: #222222; +$nav_header_colour: #666666; + +.uk-offcanvas-content { + flex: 1 0 auto; +} + +.uk-background-secondary .uk-navbar-dropdown-nav { + .uk-active a { + color: $white; + } + + .uk-nav-header { + color: $nav_header_colour; + font-size: 120%; + font-weight: bold; + padding: 0; + text-transform: none; + + &.uk-active { + color: $white; + } + } + + .uk-navbar-dropbar { + background: $dropbar_background_colour; + } +} + +.uk-navbar-container, +.uk-sticky-placeholder, +.uk-navbar-nav > li > a, +.uk-navbar-left > a { + height: 70px; +} + +.uk-navbar-dropdown { + overflow-y: auto; + top: 45px !important; +} + +.uk-article-title { + margin-bottom: 0 !important; +} + +.uk-article-meta { + margin-left: 2px; + margin-top: 0 !important; +} + +.uk-section { + padding-bottom: 30px; + padding-top: 20px; +} + +.uk-heading-divider .uk-article-meta { + margin-bottom: 0; +} + +footer { + // scss-lint:disable QualifyingElement + flex-shrink: 0; + + div.uk-section { + padding: 0; + + div.uk-text-center { + margin-top: 20px; + } + } +} + +.uk-button-dark { + background: $button_dark_background_colour; + border: 1px solid $button_dark_border_colour; + color: $white; + + :hover { + background: $button_dark_hover_background_colour; + } +} + +.uk-button-darkish { // Technically our own style, but uses the uk prefix + background: $button_darkish_background_colour; + border: 1px solid $button_darkish_border_colour; + + :hover { + background: $button_darkish_hover_background_colour; + } +} + +.uk-navbar-container { + padding-left: 40px; + padding-right: 40px; +} -- cgit v1.2.3