diff --git a/assets/scss/includes/components/_challenge.scss b/assets/scss/includes/components/_challenge.scss index 3e93648..016fa66 100644 --- a/assets/scss/includes/components/_challenge.scss +++ b/assets/scss/includes/components/_challenge.scss @@ -9,12 +9,32 @@ } } -.challenge-button { - box-shadow: 3px 3px 3px var(--bs-secondary); +[data-bs-theme="light"] .challenge-button { + border: none; + box-shadow: 0 0 15px var(--bs-secondary); + + &.challenge-solved { + background-color: #29c830; + + &:hover { + background-color: #37d63e; + } + } } -.challenge-solved { - background-color: #37d63e !important; - opacity: 0.6; +[data-bs-theme="dark"] .challenge-button { border: none; + background-color: var(--bs-gray-dark); + + &:hover { + background-color: var(--bs-gray); + } + + &.challenge-solved { + background-color: #29c830; + + &:hover { + background-color: #37d63e; + } + } } diff --git a/assets/scss/includes/components/_jumbotron.scss b/assets/scss/includes/components/_jumbotron.scss index 03d91d3..2fa6f6b 100644 --- a/assets/scss/includes/components/_jumbotron.scss +++ b/assets/scss/includes/components/_jumbotron.scss @@ -20,10 +20,3 @@ main { padding: 4rem 2rem; } } - -// @media (min-width: 768px) { -// .jumbotron { -// // I kind of like this, but it could be discussed -// clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%); -// } -// } diff --git a/assets/scss/includes/utils/_fonts.scss b/assets/scss/includes/utils/_fonts.scss index 30de7e2..6216b19 100644 --- a/assets/scss/includes/utils/_fonts.scss +++ b/assets/scss/includes/utils/_fonts.scss @@ -1,11 +1,3 @@ -/* Handle offline font loading */ -// $fa-font-path: "../../../node_modules/@fortawesome/fontawesome-free/webfonts" !default; -// $fa-font-display: auto !default; -// @import "../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss"; -// @import "../../../node_modules/@fortawesome/fontawesome-free/scss/regular.scss"; -// @import "../../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss"; -// @import "../../../node_modules/@fortawesome/fontawesome-free/scss/brands.scss"; - @use "~/@fontsource/lato/scss/mixins" as Lato; @use "~/@fontsource/raleway/scss/mixins" as Raleway; @@ -20,9 +12,6 @@ $fa-font-path: "../webfonts"; @import "~/@fortawesome/fontawesome-free/scss/solid.scss"; @import "~/@fortawesome/fontawesome-free/scss/brands.scss"; -// @import "~/@fontsource/lato/index.css"; -// @import "~/@fontsource/lato/index.css"; - html, body, .container { diff --git a/assets/scss/includes/utils/_lolight.scss b/assets/scss/includes/utils/_lolight.scss index eb3b9e5..bf7cf4e 100644 --- a/assets/scss/includes/utils/_lolight.scss +++ b/assets/scss/includes/utils/_lolight.scss @@ -15,7 +15,7 @@ color: #032f62; } .ll-pct { - /* operators, punctation */ + /* operators, punctuation */ color: #24292f; } .ll-key { diff --git a/assets/scss/includes/utils/_min-height.scss b/assets/scss/includes/utils/_min-height.scss index 0741fb0..4fa4c5b 100644 --- a/assets/scss/includes/utils/_min-height.scss +++ b/assets/scss/includes/utils/_min-height.scss @@ -1,15 +1,19 @@ .min-vh-0 { - min-height: 0vh !important; + min-height: 0 !important; } + .min-vh-25 { min-height: 25vh !important; } + .min-vh-50 { min-height: 50vh !important; } + .min-vh-75 { min-height: 75vh !important; } + .min-vh-100 { min-height: 100vh !important; } diff --git a/assets/scss/includes/utils/_opacity.scss b/assets/scss/includes/utils/_opacity.scss index 7763e27..460c484 100644 --- a/assets/scss/includes/utils/_opacity.scss +++ b/assets/scss/includes/utils/_opacity.scss @@ -1,15 +1,19 @@ .opacity-0 { opacity: 0 !important; } + .opacity-25 { opacity: 0.25 !important; } + .opacity-50 { opacity: 0.5 !important; } + .opacity-75 { opacity: 0.75 !important; } + .opacity-100 { opacity: 1 !important; } diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 386150f..ee304de 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -24,7 +24,6 @@ h2 { } a { - color: #337ab7; text-decoration: none !important; } @@ -33,6 +32,13 @@ blockquote { padding-left: 15px; } +input, +select, +button { + padding: 0.6rem !important; + height: auto !important; +} + .fa-spin.spinner { text-align: center; opacity: 0.5; @@ -48,40 +54,3 @@ blockquote { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"); background-size: 8px 10px; } - -// HMM - -.input-filled-valid { - background-color: transparent !important; - border-color: #a3d39c; - box-shadow: 0 0 0 0.1rem #a3d39c; - transition: - background-color 0.3s, - border-color 0.3s; -} - -.input-filled-invalid { - background-color: transparent !important; - border-color: #d46767; - box-shadow: 0 0 0 0.1rem #d46767; - transition: - background-color 0.3s, - border-color 0.3s; -} - -.form-control { - padding: 0.8em !important; - background: #f0f0f0; - color: #aaa; - /* Behavior changed in Bootstrap v4.1.3. See https://github.com/twbs/bootstrap/issues/27629 */ - height: auto !important; -} - -.form-control:focus { - background-color: transparent; - border-color: #a3d39c; - box-shadow: 0 0 0 0.1rem #a3d39c; - transition: - background-color 0.3s, - border-color 0.3s; -}