From 819cebcb12f745bfdafa8fcf136d283b478fb6dc Mon Sep 17 00:00:00 2001 From: Vano Devium Date: Sat, 24 Aug 2024 11:08:04 +0300 Subject: [PATCH] merge scroll-to-top colors --- assets/scss/_admonition.scss | 118 +++++++++++++++++----------------- assets/scss/_colors.scss | 21 +++--- assets/scss/_mixins.scss | 17 +++++ assets/scss/_predefined.scss | 23 ++----- assets/scss/_scroll.scss | 2 +- assets/scss/_socialshare.scss | 55 ++++++++-------- assets/scss/_variables.scss | 1 + assets/scss/style.scss | 5 +- 8 files changed, 123 insertions(+), 119 deletions(-) create mode 100644 assets/scss/_mixins.scss create mode 100644 assets/scss/_variables.scss diff --git a/assets/scss/_admonition.scss b/assets/scss/_admonition.scss index 5949187..2a23f24 100644 --- a/assets/scss/_admonition.scss +++ b/assets/scss/_admonition.scss @@ -1,68 +1,68 @@ //Admonition colors $admonition-background: ( - 'note': rgba(68, 138, 255, 0.1), - 'info': rgba(0, 184, 212, 0.1), - 'tip': rgba(0, 191, 165, 0.1), - 'success': rgba(0, 200, 83, 0.1), - 'warning': rgba(255, 145, 0, 0.1), - 'failure': rgba(255, 82, 82, 0.1), - 'danger': rgba(255, 23, 68, 0.1), - 'bug': rgba(245, 0, 87, 0.1), - ) !default; + "note": rgba(68, 138, 255, 0.1), + "info": rgba(0, 184, 212, 0.1), + "tip": rgba(0, 191, 165, 0.1), + "success": rgba(0, 200, 83, 0.1), + "warning": rgba(255, 145, 0, 0.1), + "failure": rgba(255, 82, 82, 0.1), + "danger": rgba(255, 23, 68, 0.1), + "bug": rgba(245, 0, 87, 0.1), +) !default; $admonition-color: ( - 'note': #448aff, - 'info': #00b8d4, - 'tip': #00bfa5, - 'success': #00c853, - 'warning': #ff9100, - 'failure': #ff5252, - 'danger': #ff1744, - 'bug': #f50057, - ) !default; + "note": #448aff, + "info": #00b8d4, + "tip": #00bfa5, + "success": #00c853, + "warning": #ff9100, + "failure": #ff5252, + "danger": #ff1744, + "bug": #f50057, +) !default; // Admonition styling -.admonition{ - position: relative; - margin: 1rem 0 1.5rem 0; - border-left: .25rem solid map-get($admonition-color, 'note'); - box-shadow: 5px 5px 10px -5px rgba(0,0,0,0.5); - border-radius: 0 8px 8px 0; - overflow: auto; - .admonition-title{ - padding: .25rem .50rem; - border-bottom: 1px solid map-get($admonition-background, 'note'); - background-color: rgba(map-get($admonition-background, 'note'), 0.1); - color: map-get($admonition-color, 'note'); - .icon{ - display: inline-block; - padding: 0 10px 0 0; - font-size: 0.85rem; - color: map-get($admonition-color, 'note'); - } +.admonition { + position: relative; + margin: 1rem 0 1.5rem 0; + border-left: 0.25rem solid map-get($admonition-color, "note"); + box-shadow: 5px 5px 10px -5px rgba(0, 0, 0, 0.5); + border-radius: 0 8px 8px 0; + overflow: auto; + .admonition-title { + padding: 0.25rem 0.5rem; + border-bottom: 1px solid map-get($admonition-background, "note"); + background-color: rgba(map-get($admonition-background, "note"), 0.1); + color: map-get($admonition-color, "note"); + .icon { + display: inline-block; + padding: 0 10px 0 0; + font-size: 0.85rem; + color: map-get($admonition-color, "note"); } - .admonition-content{ - padding: .25rem .50rem; + } + .admonition-content { + padding: 0.25rem 0.5rem; + } + @each $type, $color in $admonition-color { + &.#{$type} { + border-left-color: $color; + .admonition-title { + color: $color; + } + .icon { + color: $color; + } } - @each $type, $color in $admonition-color { - &.#{$type} { - border-left-color: $color; - .admonition-title { - color: $color; - } - .icon { - color: $color; - } - } + } + @each $type, $color in $admonition-background { + &.#{$type} { + background-color: $color; + + .admonition-title { + border-bottom-color: $color; + background-color: rgba($color, 0.1); + } } - @each $type, $color in $admonition-background { - &.#{$type} { - background-color: $color; - - .admonition-title { - border-bottom-color: $color; - background-color: rgba($color, 0.1); - } - } - } -} \ No newline at end of file + } +} diff --git a/assets/scss/_colors.scss b/assets/scss/_colors.scss index 4095573..e139d25 100644 --- a/assets/scss/_colors.scss +++ b/assets/scss/_colors.scss @@ -1,14 +1,13 @@ // Default Colors -$theme: hsl(172, 99%, 26%); -$text: hsl(204, 28%, 93%); -$light-grey: #494f5c; -$dark-grey: #3B3E48; -$highlight-grey: #7d828a; -$midnightblue: #2c3e50; -$typewriter: hsl(172, 100%, 36%); +$theme: hsl(172, 99%, 26%) !default; +$text: hsl(204, 28%, 93%) !default; +$light-grey: #494f5c !default; +$dark-grey: #3b3e48 !default; +$highlight-grey: #7d828a !default; +$midnightblue: #2c3e50 !default; +$typewriter: hsl(172, 100%, 36%) !default; // Scroll to Top Default colors - -$stt-stroke:#CCC; -$stt-circle:#3b3e48; -$stt-arrow:#018574; \ No newline at end of file +$stt-stroke: #ccc !default; +$stt-circle: #3b3e48 !default; +$stt-arrow: #018574 !default; diff --git a/assets/scss/_mixins.scss b/assets/scss/_mixins.scss new file mode 100644 index 0000000..1fe225e --- /dev/null +++ b/assets/scss/_mixins.scss @@ -0,0 +1,17 @@ +@mixin dimmed { + opacity: $dimmed-opacity; +} + +@mixin aTag { + a { + word-wrap: break-word; + border: none; + box-shadow: inset 0 -4px 0 $theme; + transition-property: box-shadow; + transition-duration: 0.1s; + + &:hover { + box-shadow: inset 0 -1em 0 $theme; + } + } +} diff --git a/assets/scss/_predefined.scss b/assets/scss/_predefined.scss index 0866d69..db0bd6b 100644 --- a/assets/scss/_predefined.scss +++ b/assets/scss/_predefined.scss @@ -1,18 +1,5 @@ -// Mixins -@mixin dimmed { - opacity: .6; -} - -@mixin aTag { - a { - word-wrap: break-word; - border: none; - box-shadow: inset 0 -4px 0 $theme; - transition-property: box-shadow; - transition-duration: .1s; - - &:hover { - box-shadow: inset 0 -1em 0 $theme; - } - } -} \ No newline at end of file +@import "colors"; +@import "fonts"; +@import "admonition"; +@import "variables"; +@import "mixins"; diff --git a/assets/scss/_scroll.scss b/assets/scss/_scroll.scss index 48f73e3..2cb6a05 100644 --- a/assets/scss/_scroll.scss +++ b/assets/scss/_scroll.scss @@ -29,4 +29,4 @@ .show { opacity: 1; transform: translateY(0); -} \ No newline at end of file +} diff --git a/assets/scss/_socialshare.scss b/assets/scss/_socialshare.scss index 07733bb..c55f30d 100644 --- a/assets/scss/_socialshare.scss +++ b/assets/scss/_socialshare.scss @@ -1,31 +1,34 @@ #share-links { - position: fixed; - bottom: 7.0em; - right: 0.5em; - display: none; - padding: .6em 0.5em; - z-index: 1; - box-sizing: border-box; - box-shadow: -1px -2px 3px 0px rgba(0, 0, 0, 0.45); - background-color: $midnightblue; - - ul { - list-style: none; - margin: 0; - padding: 0; - line-height: 2; - font-size: 1.2em; - a { - color: $highlight-grey; - &:hover,&:active,&:focus{ - color: $text; - } + position: fixed; + bottom: 7em; + right: 0.5em; + display: none; + padding: 0.6em 0.5em; + z-index: 1; + box-sizing: border-box; + box-shadow: -1px -2px 3px 0px rgba(0, 0, 0, 0.45); + background-color: $midnightblue; + + ul { + list-style: none; + margin: 0; + padding: 0; + line-height: 2; + font-size: 1.2em; + a { + color: $highlight-grey; + &:hover, + &:active, + &:focus { + color: $text; } } + } } + @media (max-width: 520px) { - #share-links { - right: 0.2em; - bottom: 8.0em; - } -} \ No newline at end of file + #share-links { + right: 0.2em; + bottom: 8em; + } +} diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss new file mode 100644 index 0000000..1d20d2b --- /dev/null +++ b/assets/scss/_variables.scss @@ -0,0 +1 @@ +$dimmed-opacity: 0.6 !default; diff --git a/assets/scss/style.scss b/assets/scss/style.scss index ce3024e..07c7a7f 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -1,11 +1,8 @@ @import "predefined.scss"; -@import "colors.scss"; -@import "fonts.scss"; @import "normalize.scss"; @import "syntax.scss"; @import "animate.scss"; @import "scroll.scss"; -@import "admonition.scss"; @import "socialshare.scss"; {{ if (fileExists "assets/scss/userstyles.scss") }} @import "userstyles.scss"; @@ -990,4 +987,4 @@ a.footnote-ref { from, to { border-color: transparent } 50% { border-color: $typewriter} } -{{ end }} \ No newline at end of file +{{ end }}