From 96f6f1014646f655a8e9235bfcd81eb2198354c1 Mon Sep 17 00:00:00 2001 From: Denys Konovalov Date: Fri, 9 Jun 2023 20:35:28 +0200 Subject: [PATCH] WIP: convert sass to css --- assets/scss/_buttons.scss | 56 ++++---- assets/scss/_common.scss | 121 ++++++++---------- assets/scss/_typography.scss | 16 ++- assets/scss/_variables.scss | 17 --- assets/scss/style.scss | 2 - assets/scss/templates/_homepage.scss | 10 +- assets/scss/templates/_navigation.scss | 32 ++--- layouts/_default/single.html | 6 +- layouts/anmeldeformular/list.html | 2 +- layouts/cantorpreis/single.html | 2 +- layouts/index.html | 8 +- layouts/kontakt/list.html | 4 +- layouts/partials/footer.html | 8 +- layouts/partials/header.html | 6 +- layouts/partials/page-header.html | 6 +- layouts/schulchronik/single.html | 2 +- .../page-previews/anmeldeformular-preview.js | 2 +- .../previews/page-previews/blog-preview.js | 6 +- .../page-previews/cantorpreis-preview.js | 2 +- .../page-previews/components/page-header.js | 6 +- .../previews/page-previews/kontakt-preview.js | 2 +- 21 files changed, 145 insertions(+), 171 deletions(-) delete mode 100644 assets/scss/_variables.scss diff --git a/assets/scss/_buttons.scss b/assets/scss/_buttons.scss index 14bb2dd6..8f81f906 100644 --- a/assets/scss/_buttons.scss +++ b/assets/scss/_buttons.scss @@ -1,7 +1,7 @@ /* Button style */ .btn { font-size: 16px; - font-family: $primary-font; + font-family: var(--gcg-font-primary); padding: 15px 40px; border-radius: 0; font-weight: 500; @@ -49,16 +49,16 @@ } .btn-primary { - background: $primary-color; - color: $white; + background: var(--gcg-color-primary); + color: white; &::before { - background: $white; + background: white; } &:active { - background: $primary-color !important; - color: $primary-color; + background: var(--gcg-color-primary) !important; + color: var(--gcg-color-primary); &::before { height: 80%; @@ -66,57 +66,57 @@ } &:hover { - background: darken($color: $primary-color, $amount: 10); - color: $primary-color; + background: var(--gcg-color-primary); + color: var(--gcg-color-primary); } } .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle { - color: $white; - background-color: darken($color: $primary-color, $amount: 10); - border-color: darken($color: $primary-color, $amount: 10); + color: white; + background-color: var(--gcg-color-primary); + border-color: var(--gcg-color-primary); } .btn-secondary { - background: $white; - color: $primary-color; - border: 1px solid $white; + background: white; + color: var(--gcg-color-primary); + border: 1px solid white; &::before { - background: $primary-color; + background: var(--gcg-color-primary); } &:active { - background: $primary-color; - color: $white; - border: 1px solid $white; + background: var(--gcg-color-primary); + color: white; + border: 1px solid white; } &:hover { - background: $white; - color: $white; - border: 1px solid $white; + background: white; + color: white; + border: 1px solid white; } } .btn-primary-outline { - border: 1px solid $primary-color; - color: $primary-color; + border: 1px solid var(--gcg-color-primary); + color: var(--gcg-color-primary); background: transparent; &::before { - background: $white; + background: white; } &:hover { - background: $primary-color; - color: $primary-color; + background: var(--gcg-color-primary); + color: var(--gcg-color-primary); } &:active { - background: $primary-color; - color: $white; + background: var(--gcg-color-primary); + color: white; } } diff --git a/assets/scss/_common.scss b/assets/scss/_common.scss index bfdc814d..7b519e63 100644 --- a/assets/scss/_common.scss +++ b/assets/scss/_common.scss @@ -1,11 +1,22 @@ +:root { + --gcg-color-primary: #ffbc3b; + --gcg-color-primary-light: #ffde9c; + --gcg-color-secondary: #1a1a37; + --gcg-color-light-1x: #ededf1; + --gcg-color-light-2x: #f8f9fe; + --gcg-font-primary: 'Ubuntu', sans-serif; + --gcg-font-header: 'Fira Sans', sans-serif; + --gcg-font-icon: 'Material Design Icons'; +} + body { - background-color: $body-color; + background-color: white; overflow-x: hidden; } ::selection { - background: lighten($color: $primary-color, $amount: 10); - color: $white; + background: var(--gcg-color-primary-light); + color: var(--bs-tertiary-color); } /* preloader */ @@ -26,7 +37,7 @@ body { ol, ul { list-style-type: none; - margin: 0px; + margin: 0; } img { @@ -56,15 +67,11 @@ select { } a:hover { - color: $primary-color; + color: var(--gcg-color-primary); } a.text-primary:hover { - color: $primary-color !important; -} - -a.text-light:hover { - color: $primary-color !important; + color: var(--gcg-color-primary) !important; } h4 { @@ -73,7 +80,7 @@ h4 { a h4 { &:hover { - color: $primary-color; + color: var(--gcg-color-primary); } } @@ -102,7 +109,7 @@ a h4 { } .border-primary { - border-color: $border-color !important; + border-color: var(--gcg-color-light-1x) !important; } /* overlay */ @@ -117,49 +124,29 @@ a h4 { width: 100%; top: 0; left: 0; - background: $secondary-color; + background: var(--gcg-color-secondary); opacity: .7; } } .bg-primary { - background: $primary-color !important; + background: var(--gcg-color-primary) !important; } .bg-secondary { - background: $secondary-color !important; -} - -.bg-gray { - background: $gray; + background: var(--gcg-color-secondary) !important; } .text-primary { - color: $primary-color !important; -} - -.text-color { - color: $text-color; -} - -.text-light { - color: $text-color-light !important; -} - -.text-lighten { - color: #d6d6e0 !important; + color: var(--gcg-color-primary) !important; } .text-muted { color: #b5b5b7 !important; } -.text-dark { - color: $text-color-dark !important; -} - -.font-secondary { - font-family: $secondary-font; +.font-header { + font-family: var(--gcg-font-header); } .vertical-align-middle { @@ -191,7 +178,7 @@ a h4 { height: 10px; width: 10px; border-radius: 50%; - background: $primary-color; + background: var(--gcg-color-primary); left: -25px; top: 5px; } @@ -217,14 +204,14 @@ textarea.form-control { &.active { .page-link { - background: $primary-color; - color: $white; - border-color: $primary-color; + background: var(--gcg-color-primary); + color: white; + border-color: var(--gcg-color-primary); } } .page-link { - color: $text-color; + color: var(--bs-secondary-color); } } } @@ -265,7 +252,7 @@ textarea.form-control { &::before { position: absolute; content: "\f0B2A"; - font-family: $icon-font; + font-family: var(--gcg-font-icon); font-size: 14px; left: 0; top: 1px; @@ -295,11 +282,11 @@ textarea.form-control { } thead { - background: darken($color: $light, $amount: 2); + background: var(--gcg-color-light-1x); } tbody { - background: $light; + background: var(--gcg-color-light-2x); td { text-align: left !important; @@ -309,16 +296,17 @@ textarea.form-control { blockquote { - border: 1px solid $border-color; - border-left: 5px solid $primary-color; + border: 1px solid var(--gcg-color-light-1x); + border-left: 5px solid var(--gcg-color-primary); padding: 20px; padding-left: 40px; - background-color: $light; + background-color: var(--gcg-color-light-2x); p { - color: $text-color; + color: var(--bs-secondary-color); font-style: italic !important; } + * { margin-bottom: 0 !important; } @@ -326,17 +314,17 @@ textarea.form-control { pre { padding: 10px 20px; - background: $light; + background: var(--gcg-color-light-2x); } } summary { font-weight: 900; font-size: 22px; - color: $secondary-color; + color: var(--gcg-color-secondary); &.hover { - color: $primary-color; + color: var(--gcg-color-primary); } } @@ -375,7 +363,7 @@ details[open] summary { bottom: -123px; z-index: 9; padding: 15px; - color: rgba($color: $white, $alpha: .5); + color: rgba($color: white, $alpha: .5); border: 0; font-size: 30px; transition: all linear .2s; @@ -386,7 +374,7 @@ details[open] summary { } &:hover { - color: $primary-color; + color: var(--gcg-color-primary); } } @@ -414,7 +402,7 @@ details[open] summary { &.slick-active { button { - background: $primary-color; + background: var(--gcg-color-primary); } } @@ -424,7 +412,7 @@ details[open] summary { overflow: hidden; height: 10px; width: 10px; - background: rgba($color: $white, $alpha: .5); + background: rgba($color: white, $alpha: .5); border: 0; outline: 0; } @@ -457,7 +445,7 @@ details[open] summary { font-size: 96px; } -.wc-canvas { +#wc-canvas { width: 100%; height: 600px; } @@ -468,23 +456,24 @@ details[open] summary { transition: .1s ease; &.active{ font-weight: 600; - color: $primary-color; + color: var(--gcg-color-primary); } &:hover{ - color: $primary-color; + color: var(--gcg-color-primary); } } } -.tag-list{ - a{ +.tag-list { + a { display: block; padding: 5px 10px; - background: $light; - color: $text-color; + background: var(--bs-secondary-bg); + color: var(--bs-secondary-color); + &:hover{ - background-color: $primary-color; - color: $white; + background: var(--gcg-color-primary); + color: white; } } } diff --git a/assets/scss/_typography.scss b/assets/scss/_typography.scss index c9cb8479..dcf7bf40 100644 --- a/assets/scss/_typography.scss +++ b/assets/scss/_typography.scss @@ -2,23 +2,27 @@ @import url('https://assets.cantorgymnasium.de/fonts/fira/fira.css'); body { line-height: 1.2; - font-family: $primary-font; + font-family: var(--gcg-font-primary); -webkit-font-smoothing: antialiased; font-size: 15px; - color: $text-color; + color: var(--bs-secondary-color); } p, .paragraph { font-weight: 400; - color: $text-color; + color: var(--bs-secondary-color); font-size: 15px; line-height: 1.9; - font-family: $primary-font; + font-family: var(--gcg-font-primary); +} + +.text-white p { + color: inherit; } h1,h2,h3,h4,h5,h6 { - color: $text-color-dark; - font-family: $secondary-font; + color: var(--gcg-color-secondary); + font-family: var(--gcg-font-header); font-weight: 900; line-height: 1.2; } diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss deleted file mode 100644 index f899a32f..00000000 --- a/assets/scss/_variables.scss +++ /dev/null @@ -1,17 +0,0 @@ -// Color Variables -$primary-color: #ffbc3b; -$secondary-color: #1a1a37; -$text-color: #5c5c77; -$text-color-light: #8585a4; -$text-color-dark: #1e1e4b; -$body-color: #fff; -$border-color: #ededf1; -$black: #000; -$white: #fff; -$light: #f8f9fe; -$gray: #f8f8f8; - -// Font Variables -$primary-font: 'Ubuntu', sans-serif; -$secondary-font: 'Fira Sans', sans-serif; -$icon-font: 'Material Design Icons'; \ No newline at end of file diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 136fb779..a35dbe9d 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -1,5 +1,3 @@ -@import 'variables'; - @import 'mixins'; @import 'typography'; diff --git a/assets/scss/templates/_homepage.scss b/assets/scss/templates/_homepage.scss index a8f20794..0b60d199 100644 --- a/assets/scss/templates/_homepage.scss +++ b/assets/scss/templates/_homepage.scss @@ -1,6 +1,6 @@ .feature-icon { font-size: 60px; - color: $secondary-color; + color: var(--gcg-color-secondary); display: inline-block; } @@ -69,8 +69,8 @@ height: 80px; width: 80px; border-radius: 50%; - background: $primary-color; - color: $white; + background: var(--gcg-color-primary); + color: white; font-size: 25px; text-align: center; @@ -84,7 +84,7 @@ height: 0; width: 0; transform: translate(-50%, -50%); - background: $white; + background: white; border-radius: 50%; top: 50%; left: 50%; @@ -99,7 +99,7 @@ height: 80%; width: 80%; transform: translate(-50%, -50%); - background: $primary-color; + background: var(--gcg-color-primary); border-radius: 50%; top: 50%; left: 50%; diff --git a/assets/scss/templates/_navigation.scss b/assets/scss/templates/_navigation.scss index acd2a95c..97e31544 100644 --- a/assets/scss/templates/_navigation.scss +++ b/assets/scss/templates/_navigation.scss @@ -11,32 +11,32 @@ } .navigation { - background: linear-gradient(to right, transparent 50%, $primary-color 50%); + background: linear-gradient(to right, transparent 50%, var(--gcg-color-primary) 50%); transition: .2s ease; @include desktop { - background: $secondary-color; + background: var(--gcg-color-secondary); } } .navbar-collapse{ @include desktop { - background: $secondary-color; + background: var(--gcg-color-secondary); } } .navbar-nav { padding-left: 50px; - background: $primary-color; + background: var(--gcg-color-primary); @include desktop { padding-left: 0; - background: $secondary-color; + background: var(--gcg-color-secondary); } } .nav-bg { - background-color: $secondary-color; + background-color: var(--gcg-color-secondary); } .nav-item { @@ -55,7 +55,7 @@ height: 6px; width: 100%; content: ""; - background: $white; + background: white; transform: scaleY(0); transform-origin: top; transition: transform .3s ease; @@ -71,19 +71,19 @@ } .navbar-dark .navbar-nav .nav-link { - color: $white; + color: white; } link:focus, .navbar-dark .navbar-nav .nav-link:hover { - color: $white; + color: white; } .navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link { - color: $white; + color: white; } .navbar-expand-lg .navbar-nav .nav-link { @@ -99,7 +99,7 @@ link:focus, top: 0; width: 100%; z-index: 10; - background: $white; + background: white; box-shadow: 0 2px 5px #0000000d; } @@ -115,7 +115,7 @@ link:focus, &-menu { box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.12); - border-bottom: 5px solid $primary-color; + border-bottom: 5px solid var(--gcg-color-primary); padding: 15px; top: 96px; border-radius: 0; @@ -124,7 +124,7 @@ link:focus, transition: .3s ease; opacity: 0; transform: translateY(20px); - background: $white; + background: white; @include desktop { display: none; @@ -146,10 +146,10 @@ link:focus, &-item { position: relative; - color: $text-color-dark; + color: var(--gcg-color-secondary); transition: .2s ease; text-transform: capitalize; - font-family: $primary-font; + font-family: var(--gcg-font-primary); @include desktop { text-align: center; @@ -160,7 +160,7 @@ link:focus, } &:hover { - color: $primary-color; + color: var(--gcg-color-primary); background: transparent; } } diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 24219b3b..c9541070 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -10,7 +10,7 @@
-
+
{{ i18n "posted_by" }}: {{ range $index, $elements := where (where .Site.RegularPages "Type" "author") "File.BaseFileName" "in" .Params.author }} {{ if ne $index 0 }}, {{ end }} @@ -21,13 +21,13 @@ {{ end }} {{ end }}
-
+
{{ i18n "date" }}: {{ time.Format "02. Jan 2006" .PublishDate }}
-
+
{{ i18n "category" }}: {{ range $index, $elements := .Params.categories }} {{ if ne $index 0 }}, {{ end }} diff --git a/layouts/anmeldeformular/list.html b/layouts/anmeldeformular/list.html index 145ae796..a212cb3a 100644 --- a/layouts/anmeldeformular/list.html +++ b/layouts/anmeldeformular/list.html @@ -1,6 +1,6 @@ {{ define "main" }} -
+
diff --git a/layouts/cantorpreis/single.html b/layouts/cantorpreis/single.html index 204f1fc9..d37f7bf7 100644 --- a/layouts/cantorpreis/single.html +++ b/layouts/cantorpreis/single.html @@ -8,7 +8,7 @@

{{ .Params.Name }}

-
{{ .Title }}
+
{{ .Title }}
{{ .Content | markdownify }}
diff --git a/layouts/index.html b/layouts/index.html index b9507eb0..0ca835fb 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -216,7 +216,7 @@
-

{{ .title | markdownify }}

+

{{ .title | markdownify }}

{{ .subtitle | markdownify }}
{{ if .button.enable }} {{ with .button }} @@ -235,7 +235,7 @@ {{ end }} {{ if $data.homepage.termine.enable }} -
+
@@ -281,8 +281,8 @@
-

{{ .title | markdownify }}

-
+

{{ .title | markdownify }}

+
{{ .content | markdownify }}
{{ if .button.enable }} diff --git a/layouts/kontakt/list.html b/layouts/kontakt/list.html index efbe9472..b30cf7f0 100644 --- a/layouts/kontakt/list.html +++ b/layouts/kontakt/list.html @@ -8,7 +8,7 @@ crossorigin=""/> integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""> -
+
@@ -48,7 +48,7 @@ crossorigin=""/>
-
+
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index acf4b5d0..78ea155d 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -4,7 +4,7 @@
{{ .Site.Title }} -
@@ -30,7 +30,7 @@

{{ i18n "clubs_footer" }}

    {{ range first 5 (where .Site.RegularPages "Type" "ganztagsangebote" | shuffle)}} -
  • {{ .Title }}
    • +
  • {{ .Title }}
    • {{ end }}
@@ -38,7 +38,7 @@

Aktuelles

diff --git a/layouts/partials/header.html b/layouts/partials/header.html index e3160c9a..b8aa9312 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -6,7 +6,7 @@
    {{ range .Site.Params.social }} -
    • {{ end }}
@@ -14,11 +14,11 @@
diff --git a/layouts/partials/page-header.html b/layouts/partials/page-header.html index 6a89ea4e..02b6fcf7 100644 --- a/layouts/partials/page-header.html +++ b/layouts/partials/page-header.html @@ -3,11 +3,11 @@
-

{{ .Params.description | markdownify }}

+

{{ .Params.description | markdownify }}

diff --git a/layouts/schulchronik/single.html b/layouts/schulchronik/single.html index 8806afbe..f77d6209 100644 --- a/layouts/schulchronik/single.html +++ b/layouts/schulchronik/single.html @@ -47,7 +47,7 @@ {{ if and .Params.pretext (ne .Params.pretext "\n\n\n") }} {{ partial "modal" (dict "title" .Title "content" .Params.pretext) }} {{ end }} -
+
{{ $topics := slice }} {{ if .Params.pretext }} {{ $topics = $topics | append (slice (slice .Params.Title 200 (md5 .Title))) }} diff --git a/static/admin/previews/page-previews/anmeldeformular-preview.js b/static/admin/previews/page-previews/anmeldeformular-preview.js index 4e6f082a..5816a65f 100644 --- a/static/admin/previews/page-previews/anmeldeformular-preview.js +++ b/static/admin/previews/page-previews/anmeldeformular-preview.js @@ -5,7 +5,7 @@ const AnmeldeformularPreview = ({ widgetFor, entry }) => { PageHeader(entry), h( "section", - { className: "section-sm bg-gray" }, + { className: "section-sm bg-body-tertiary" }, h( "div", { className: "container" }, diff --git a/static/admin/previews/page-previews/blog-preview.js b/static/admin/previews/page-previews/blog-preview.js index aefb5cb2..1c6e0bde 100644 --- a/static/admin/previews/page-previews/blog-preview.js +++ b/static/admin/previews/page-previews/blog-preview.js @@ -34,13 +34,13 @@ const BlogPreview = ({ widgetFor, entry, fields, collection }) => { { className: "row mb-3" }, h( "div", - { className: "col-6 mb-md-0 text-light" }, + { className: "col-6 mb-md-0 text-body-tertiary" }, h("span", { className: "fw-bold me-1" }, "Geschrieben von:"), widgetFor("author") ), h( "div", - { className: "col-6 mb-3 mb-md-0 text-light" }, + { className: "col-6 mb-3 mb-md-0 text-body-tertiary" }, h("span", { className: "fw-bold me-1" }, "Datum:"), entry.data.date ? DateFormat({ @@ -58,7 +58,7 @@ const BlogPreview = ({ widgetFor, entry, fields, collection }) => { Row( h( "div", - { className: "col-12 mb-md-0 text-light" }, + { className: "col-12 mb-md-0 text-body-tertiary" }, h("span", { className: "fw-bold me-1" }, "Kategorie:"), entry.data.categories ? entry.data.categories.map( diff --git a/static/admin/previews/page-previews/cantorpreis-preview.js b/static/admin/previews/page-previews/cantorpreis-preview.js index f3fe546d..43487db6 100644 --- a/static/admin/previews/page-previews/cantorpreis-preview.js +++ b/static/admin/previews/page-previews/cantorpreis-preview.js @@ -37,7 +37,7 @@ const CantorpreisPreview = ({ widgetFor, entry, fields, collection }) => { "div", { className: "col-md-7 mb-5" }, h("h3", {}, entry.data.name), - h("h6", { className: "text-color" }, entry.data.title), + h("h6", { className: "text-body-secondary" }, entry.data.title), Content(widgetFor("body")) ), ]) diff --git a/static/admin/previews/page-previews/components/page-header.js b/static/admin/previews/page-previews/components/page-header.js index 61586fc5..349c1467 100644 --- a/static/admin/previews/page-previews/components/page-header.js +++ b/static/admin/previews/page-previews/components/page-header.js @@ -26,7 +26,7 @@ const PageHeader = (entry) => { { className: "list-inline-item h2" }, h( "font", - { className: "text-primary font-secondary", href: "" }, + { className: "text-primary font-header", href: "" }, "Startseite" ) ), @@ -37,11 +37,11 @@ const PageHeader = (entry) => { ), h( "li", - { className: "list-inline-item text-white h2 font-secondary" }, + { className: "list-inline-item text-white h2 font-header" }, entry.data.title ) ), - h("p", { className: "text-lighten" }, entry.data.description) + h("p", { className: "text-white text-opacity-75" }, entry.data.description) ) ) ) diff --git a/static/admin/previews/page-previews/kontakt-preview.js b/static/admin/previews/page-previews/kontakt-preview.js index f24fe318..fa57996e 100644 --- a/static/admin/previews/page-previews/kontakt-preview.js +++ b/static/admin/previews/page-previews/kontakt-preview.js @@ -5,7 +5,7 @@ const KontaktPreview = ({ widgetsFor, entry }) => { PageHeader(entry), h( "section", - { className: "section-sm bg-gray" }, + { className: "section-sm bg-body-tertiary" }, h( "div", { className: "container" },