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 @@
{{ .Params.description | markdownify }}
+{{ .Params.description | markdownify }}