From e8318fc7a05bd1421231ca0fe1bba5b5eae86c74 Mon Sep 17 00:00:00 2001 From: Helmut Merz Date: Sun, 14 Jun 2020 09:04:20 +0200 Subject: [PATCH] full refactoring, using up-to-date bootstrap + bootswatch theme --- archetypes/default.md | 2 +- assets/sass/_bootswatch.scss | 255 ++++++++++++++++++++++++++++++++++ assets/sass/_custom.scss | 19 --- assets/sass/_litera.scss | 94 +++++++++++++ assets/sass/main.scss | 45 +----- layouts/_default/baseof.html | 16 ++- layouts/_default/list.html | 17 ++- layouts/_default/single.html | 49 ++++--- layouts/partials/card.html | 40 +++--- layouts/partials/footer.html | 17 ++- layouts/partials/head.html | 11 -- layouts/partials/header.html | 43 +++--- layouts/partials/sidebar.html | 56 +++++--- layouts/taxonomy/list.html | 7 +- static/js/bootstrap.min.js | 12 +- 15 files changed, 503 insertions(+), 180 deletions(-) create mode 100644 assets/sass/_bootswatch.scss create mode 100755 assets/sass/_litera.scss delete mode 100644 layouts/partials/head.html diff --git a/archetypes/default.md b/archetypes/default.md index 8241bb1..a0c4b6f 100644 --- a/archetypes/default.md +++ b/archetypes/default.md @@ -6,7 +6,7 @@ domains: [] topics: [] date: {{ .Date }} author: -draft: true +draft: false weight: 10 --- diff --git a/assets/sass/_bootswatch.scss b/assets/sass/_bootswatch.scss new file mode 100644 index 0000000..96c0442 --- /dev/null +++ b/assets/sass/_bootswatch.scss @@ -0,0 +1,255 @@ +// Litera 4.5.0 +// Bootswatch + + +// Variables =================================================================== + +$font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif !default; + +// Navbar ====================================================================== + +.navbar { + font-size: $font-size-sm; + + &.bg-dark { + background-color: $success !important; + } + + &.bg-light { + background-color: #fff !important; + border: 1px solid rgba(0, 0, 0, 0.1); + + &.navbar-fixed-top { + border-width: 0 0 1px 0; + } + + &.navbar-fixed-bottom { + border-width: 1px 0 0 0; + } + } +} + +// Buttons ===================================================================== + +.btn { + border-radius: 1.078em; + + &-lg { + border-radius: 2.688em; + } + + &-sm { + border-radius: 0.844em; + } +} + +// Typography ================================================================== + +p { + font-family: $font-family-serif; +} + +blockquote { + font-style: italic; +} + +footer { + font-size: $font-size-sm; +} + +.lead { + color: $gray-600; + font-family: $font-family-sans-serif; +} + +// Tables ====================================================================== + +table, +.table { + font-size: $font-size-sm; + + &-primary, + &-secondary, + &-success, + &-info, + &-warning, + &-danger { + color: #fff; + } +} + +.table { + + &-primary { + &, > th, > td { + background-color: $primary; + } + } + + &-secondary { + &, > th, > td { + background-color: $secondary; + } + } + + &-light { + &, > th, > td { + background-color: $light; + } + } + + &-dark { + &, > th, > td { + background-color: $dark; + } + } + + &-success { + &, > th, > td { + background-color: $success; + } + } + + &-info { + &, > th, > td { + background-color: $info; + } + } + + &-danger { + &, > th, > td { + background-color: $danger; + } + } + + &-warning { + &, > th, > td { + background-color: $warning; + } + } + + &-active { + &, > th, > td { + background-color: $table-active-bg; + } + } + + &-hover { + + .table-primary:hover { + &, > th, > td { + background-color: darken($primary, 5%); + } + } + + .table-secondary:hover { + &, > th, > td { + background-color: darken($secondary, 5%); + } + } + + .table-light:hover { + &, > th, > td { + background-color: darken($light, 5%); + } + } + + .table-dark:hover { + &, > th, > td { + background-color: darken($dark, 5%); + } + } + + .table-success:hover { + &, > th, > td { + background-color: darken($success, 5%); + } + } + + .table-info:hover { + &, > th, > td { + background-color: darken($info, 5%); + } + } + + .table-danger:hover { + &, > th, > td { + background-color: darken($danger, 5%); + } + } + + .table-warning:hover { + &, > th, > td { + background-color: darken($warning, 5%); + } + } + + .table-active:hover { + &, > th, > td { + background-color: $table-active-bg; + } + } + + } +} + +// Forms ======================================================================= + +// Navs ======================================================================== + +.nav, +.breadcrumb, +.pagination { + font-size: $font-size-sm; +} + +.dropdown-menu { + font-size: $font-size-sm; +} + +// Indicators ================================================================== + +.alert { + color: $white; + font-size: $font-size-sm; + + &, p { + font-family: $font-family-sans-serif; + } + + a, .alert-link { + color: #fff; + font-weight: normal; + text-decoration: underline; + } + + @each $color, $value in $theme-colors { + &-#{$color} { + @if $enable-gradients { + background: $value linear-gradient(0deg, mix($body-bg, $value, 15%), $value) repeat-x; + } @else { + background-color: $value; + } + } + } + + &-light { + &, + & a, + & .alert-link { + color: $body-color; + } + } +} + +.badge { + vertical-align: bottom; +} + +// Progress bars =============================================================== + +// Containers ================================================================== + +.list-group { + font-size: $font-size-sm; +} diff --git a/assets/sass/_custom.scss b/assets/sass/_custom.scss index 747c9ad..d8a7f8f 100644 --- a/assets/sass/_custom.scss +++ b/assets/sass/_custom.scss @@ -3,22 +3,3 @@ justify-content: center; } -.post-title { - text-decoration: none; -} - -.sb-box ul { - list-style: none; - padding: 0; - text-align: justify; -} - -.sb-box { - padding: 0 15px 0 15px; - border: 1px solid $grey-color-light; -} - -.sb-box h3 { - margin-top: 10px; -} - diff --git a/assets/sass/_litera.scss b/assets/sass/_litera.scss new file mode 100755 index 0000000..c2a3c23 --- /dev/null +++ b/assets/sass/_litera.scss @@ -0,0 +1,94 @@ +// Litera 4.5.0 +// Bootswatch + +// +// Color system +// + +$white: #fff !default; +$gray-100: #f8f9fa !default; +$gray-200: #e9ecef !default; +$gray-300: #ddd !default; +$gray-400: #ced4da !default; +$gray-500: #adb5bd !default; +$gray-600: #868e96 !default; +$gray-700: #495057 !default; +$gray-800: #343a40 !default; +$gray-900: #212529 !default; +$black: #000 !default; + +$blue: #4582EC !default; +$indigo: #6610f2 !default; +$purple: #6f42c1 !default; +$pink: #e83e8c !default; +$red: #d9534f !default; +$orange: #fd7e14 !default; +$yellow: #f0ad4e !default; +$green: #02B875 !default; +$teal: #20c997 !default; +$cyan: #17a2b8 !default; + +$primary: $blue !default; +$secondary: $gray-500 !default; +$success: $green !default; +$info: $cyan !default; +$warning: $yellow !default; +$danger: $red !default; +$light: $gray-100 !default; +$dark: $gray-800 !default; + +$yiq-contrasted-threshold: 190 !default; + +// Body + +$body-color: $gray-800 !default; + +// Fonts + +$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; + +$font-size-base: 1.063rem !default; + +$headings-font-weight: 700 !default; + +// Tables + +$table-border-color: rgba(0,0,0,0.1) !default; + +// Buttons + +$input-btn-padding-y: 0.5rem !default; +$input-btn-padding-x: 1.1rem !default; + +$btn-font-family: $font-family-sans-serif !default; +$btn-font-size: 0.875rem !default; + +$btn-font-size-sm: 0.688rem !default; + +// Forms + +$input-border-color: rgba(0,0,0,.1) !default; + +$input-group-addon-bg: $gray-200 !default !default; + +// Navbar + +$navbar-dark-color: rgba($white,.6) !default; +$navbar-dark-hover-color: $white !default; + +$navbar-light-hover-color: $body-color !default; +$navbar-light-active-color: $body-color !default; + +// Tooltips + +$tooltip-font-size: 11px !default; + +// Badges + +$badge-font-weight: normal !default; +$badge-padding-y: 0.6em !default; +$badge-padding-x: 1.2em !default; + +// Alerts + +$alert-border-width: 0 !default; diff --git a/assets/sass/main.scss b/assets/sass/main.scss index b8a8238..29c88a6 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -1,49 +1,10 @@ @import url("https://fonts.googleapis.com/css?family=Raleway:400,700"); -// Our variables -$base-font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif; -$base-font-size: 16px; -$base-font-weight: 400; -$small-font-size: $base-font-size * 0.875; -$base-line-height: 1.5; - -$spacing-unit: 30px; - -$text-color: #111; -$background-color: #fdfdfd; -$brand-color: #2a7ae2; - -$grey-color: #828282; -$grey-color-light: lighten($grey-color, 40%); -$grey-color-dark: darken($grey-color, 25%); - -// Width of the content area -$content-width: 800px; - -$on-palm: 600px; -$on-laptop: 800px; - - - -// Use media queries like this: -// @include media-query($on-palm) { -// .wrapper { -// padding-right: $spacing-unit / 2; -// padding-left: $spacing-unit / 2; -// } -// } -@mixin media-query($device) { - @media screen and (max-width: $device) { - @content; - } -} - - - // Import partials from `sass_dir` (defaults to `_sass`) @import - "bootstrap-readable", - "layout", + "litera", + "../../../node_modules/bootstrap/scss/bootstrap", + "bootswatch", "custom", "syntax-highlighting" ; diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index d543601..9d69527 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,7 +1,17 @@ - {{ partial "head.html" .}} + + + + + + {{ .Title}}{{if .IsPage}} - {{.Site.Title}}{{ end }} + + {{ $main := resources.Get "sass/main.scss" | toCSS | minify }} + + + @@ -15,8 +25,8 @@ {{ partial "footer.html" . }} - + - \ No newline at end of file + diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 7cef86b..874295c 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -3,17 +3,24 @@
- Front Matter +
+
+
+

{{ .Title }}

+
+
+

{{ .Content }}

+
+
+
- -
+
{{ $paginator := .Paginate (where .Site.RegularPages "Section" "posts") }} {{ range $paginator.Pages }} {{ partial "card.html" . }} {{ end }} - -
+
{{ partial "pagination.html" . }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index f8d56f5..268a228 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,36 +1,47 @@ {{ define "main" }}
-
+
-
-

{{ .Title }}

-

{{ with .Params.Author }} • {{ end }}

- -
+
+

{{ .Title }}

+

+ + {{ with .Params.Author }} • + + {{ end }} +

+
-
- {{ .Content }} -
+
+ {{ .Content }} +
- +
+ +
- {{ partial "sidebar.html" . }}
- {{ end }} diff --git a/layouts/partials/card.html b/layouts/partials/card.html index 3e1c7b4..cc5ca7f 100644 --- a/layouts/partials/card.html +++ b/layouts/partials/card.html @@ -1,22 +1,24 @@ -
- -
- - {{ if .Params.img }} - {{ .Title }} - {{ else if .Site.Params.defaultImage }} - {{ .Site.Title }} - {{ end }} +
+ + {{ if .Params.img }} + {{ .Title }} + {{ else if .Site.Params.defaultImage }} + {{ .Site.Title }} + {{ end }} -
-

{{ .Title | truncate 25 }}

{{ .Date.Format (i18n "dateFormat") }} -
- -
- {{ .Summary | plainify | truncate 100 }} -
-
- +
+ {{ .Title | truncate 25 }} + + {{ .Date.Format (i18n "dateFormat") }} +
+ +
+

{{ .Summary | plainify | truncate 100 }}

+
+ +
- diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 194aa96..0f08970 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,29 +1,32 @@