From cc59f0e15b69b9b87aafcd8dc8a088e1fa5244d9 Mon Sep 17 00:00:00 2001 From: Michael Tremer Date: Sun, 15 Jul 2018 12:10:46 +0100 Subject: [PATCH] features: Use card Signed-off-by: Michael Tremer --- src/scss/_variables.scss | 16 +- src/scss/style.scss | 137 +-- src/templates/base.html | 2 +- src/templates/index.html | 418 +++---- src/templates/static/features.html | 1650 ++++++++++++++-------------- 5 files changed, 1124 insertions(+), 1099 deletions(-) diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 0ec4308e..820fb9a2 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -1,5 +1,11 @@ // Global Settings $enable-shadows: true; +$shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2); +$shadow-2: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.23); +$shadow-3: 0 3px 6px 0 rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.23); +$shadow-4: 0 10px 20px 0 rgba(0, 0, 0, 0.19), 0 6px 6px 0 rgba(0, 0, 0, 0.26); +$shadow-5: 0 14px 28px 0 rgba(0, 0, 0, 0.25), 0 10px 10px 0 rgba(0, 0, 0, 0.26); +$shadow-6: 0 19px 38px 0 rgba(0, 0, 0, 0.3), 0 15px 12px 0 rgba(0, 0, 0, 0.22); /* Colours @@ -34,6 +40,9 @@ $dark: $blue-grey-900; $yiq-text-dark: $primary; $yiq-text-light: $secondary; +$body-bg: $blue-grey-50; +$body-color: $blue-grey-900; + // Breakpoints $grid-breakpoints: ( xs: 0, @@ -85,13 +94,12 @@ $navbar-padding-y: 1.1rem; $input-btn-padding-x: 1rem; $input-btn-padding-y: .5rem; -$input-btn-focus-box-shadow: - 0 3px 6px 0 rgba(black, .16), 0 3px 6px 0 rgba(black, .23); +$input-btn-focus-box-shadow: $shadow-3; // Shadows -$box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .2); +$box-shadow: $shadow-1; $box-shadow-sm: $box-shadow; -$box-shadow-lg: 0 19px 38px 0 rgba(0, 0, 0, .3), 0 15px 12px 0 rgba(0, 0, 0, .22); +$box-shadow-lg: $shadow-6; // Buttons $btn-border-width: 2px; diff --git a/src/scss/style.scss b/src/scss/style.scss index db3dbe85..bd2712f2 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -40,6 +40,11 @@ // Custom stuff @import '_icons'; +body { + min-height: 75rem; + padding-top: 6rem; +} + // Buttons .btn { text-transform: uppercase; @@ -71,6 +76,10 @@ h6 { line-height: 1.75rem; } +.card { + box-shadow: $shadow-1; +} + footer { .btn-toolbar .icon { height: 2.25rem; @@ -88,90 +97,92 @@ footer { // Sections -section { - padding: 3rem 0; +.main { + section { + padding: 3rem 0; - @include media-breakpoint-up(sm) { - padding: 72px 0; - } + @include media-breakpoint-up(sm) { + padding: 72px 0; + } - h1 { - margin-bottom: 64px; + h1 { + margin-bottom: 64px; + } } -} -section.intro { - min-height: 100vh; - background-image: url('img/header-background.jpg'); - background-size: cover; - background-attachment: fixed; - background-position: center top; - position: relative; + section.intro { + min-height: 100vh; + background-image: url('img/header-background.jpg'); + background-size: cover; + background-attachment: fixed; + background-position: center top; + position: relative; - .branding { - margin-bottom: 64px; - text-align: center; + .branding { + margin-bottom: 64px; + text-align: center; - padding-top: 6rem; + padding-top: 6rem; - @include media-breakpoint-up(sm) { - padding-top: 192px; - } + @include media-breakpoint-up(sm) { + padding-top: 192px; + } - h1 { - margin-bottom: 0; + h1 { + margin-bottom: 0; - @include media-breakpoint-down(xs) { - font-size: 72px; - line-height: 88px; - } + @include media-breakpoint-down(xs) { + font-size: 72px; + line-height: 88px; + } - strong { - font-weight: 700 !important; + strong { + font-weight: 700 !important; + } } - } - h1:before { - content: ""; - height: 60px; - width: 76px; - background-image: url('img/ipfire-tux.png'); - background-repeat: no-repeat; - background-position: center center; - background-size: contain; - display: inline-block; - position: relative; - top: 4px; + h1:before { + content: ""; + height: 60px; + width: 76px; + background-image: url('img/ipfire-tux.png'); + background-repeat: no-repeat; + background-position: center center; + background-size: contain; + display: inline-block; + position: relative; + top: 4px; + + @include media-breakpoint-up(sm) { + height: 120px; + width: 93px; + margin-right: 32px; + top: 8px; + } + } - @include media-breakpoint-up(sm) { - height: 120px; - width: 93px; - margin-right: 32px; - top: 8px; + h5 { + color: $blue-grey-600; } - } - h5 { - color: $blue-grey-600; } - } -} -section#news, section#support, footer { - background-color: rgba($blue-grey-900, .06); -} + section#news, section#support, footer { + background-color: rgba($blue-grey-900, .06); + } -section#news { - color: rgba($blue-grey-900, .6); -} + section#news { + color: rgba($blue-grey-900, .6); + } -section#fireinfo { - border-bottom: 1px solid rgba($blue-grey-900, .2); -} + section#fireinfo { + border-bottom: 1px solid rgba($blue-grey-900, .2); + } -section#appliances { - padding-bottom: 48px; + section#appliances { + padding-bottom: 48px; + } } .page-scroll { diff --git a/src/templates/base.html b/src/templates/base.html index 0c4489a4..223d7299 100644 --- a/src/templates/base.html +++ b/src/templates/base.html @@ -25,7 +25,7 @@ -