diff options
Diffstat (limited to 'src')
35 files changed, 141 insertions, 157 deletions
diff --git a/src/components/Branding/Branding.module.scss b/src/components/Branding/Branding.module.scss index 9babe6f..d02bfa6 100644 --- a/src/components/Branding/Branding.module.scss +++ b/src/components/Branding/Branding.module.scss @@ -45,9 +45,9 @@ &__front { box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0 - var(--color-shadow-light), + var(--color-shadow), fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0 - var(--color-shadow-lighter); + var(--color-shadow-light); } &__back { @@ -70,9 +70,9 @@ &__back { box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0 - var(--color-shadow-light), + var(--color-shadow), fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0 - var(--color-shadow-lighter); + var(--color-shadow-light); } } } diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss index bc1597c..cee7918 100644 --- a/src/components/Buttons/Buttons.module.scss +++ b/src/components/Buttons/Buttons.module.scss @@ -70,7 +70,7 @@ &:disabled { color: var(--color-fg-light); - border-color: var(--color-border); + border-color: var(--color-border-dark); cursor: wait; } @@ -85,9 +85,9 @@ fun.convert-px(6) fun.convert-px(8) 0 0 var(--color-bg), fun.convert-px(8) fun.convert-px(10) 0 0 var(--color-primary), fun.convert-px(10) fun.convert-px(12) fun.convert-px(1) 0 - var(--color-shadow-lighter), + var(--color-shadow-light), fun.convert-px(10) fun.convert-px(12) fun.convert-px(5) - fun.convert-px(1) var(--color-shadow-lighter); + fun.convert-px(1) var(--color-shadow-light); color: var(--color-primary-light); } @@ -99,7 +99,7 @@ text-decoration: none; transform: translateX(#{fun.convert-px(5)}) translateY(#{fun.convert-px(6)}); - box-shadow: 0 0 0 0 var(--color-shadow-light); + box-shadow: 0 0 0 0 var(--color-shadow); } } } @@ -116,11 +116,11 @@ border: fun.convert-px(3) solid var(--color-primary); border-radius: fun.convert-px(5); box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) - var(--color-shadow-light), + var(--color-shadow), fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) - var(--color-shadow-light), + var(--color-shadow), fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) - var(--color-shadow-light); + var(--color-shadow); color: var(--color-primary); font-weight: 600; text-decoration: underline transparent 0; @@ -131,13 +131,13 @@ border-color: var(--color-primary-light); color: var(--color-primary-light); box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) - var(--color-shadow-lighter), + var(--color-shadow-light), fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) - var(--color-shadow-lighter), + var(--color-shadow-light), fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) - var(--color-shadow-lighter), + var(--color-shadow-light), fun.convert-px(7) fun.convert-px(10) fun.convert-px(12) fun.convert-px(-3) - var(--color-shadow-lighter); + var(--color-shadow-light); transform: scale(1.07); } @@ -148,7 +148,7 @@ &:active { border-color: var(--color-primary-dark); color: var(--color-primary-dark); - box-shadow: 0 0 0 0 var(--color-shadow-light); + box-shadow: 0 0 0 0 var(--color-shadow); text-decoration: underline transparent 0; transform: scale(0.94); } @@ -235,7 +235,7 @@ &:hover, &:focus { svg { - transform: scale(0.85) rotate(20deg) translateY(3px); + transform: scale(0.85) rotate(20deg) translateY(#{fun.convert-px(3)}); } } diff --git a/src/components/Comment/Comment.module.scss b/src/components/Comment/Comment.module.scss index a952f66..dd52db2 100644 --- a/src/components/Comment/Comment.module.scss +++ b/src/components/Comment/Comment.module.scss @@ -7,11 +7,10 @@ .wrapper { background: var(--color-bg); - border: fun.convert-px(1) solid var(--color-border-light); - box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 - var(--color-shadow-lighter), + border: fun.convert-px(1) solid var(--color-border); + box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow-light), fun.convert-px(4) fun.convert-px(4) fun.convert-px(3) fun.convert-px(-2) - var(--color-shadow-light); + var(--color-shadow); padding: var(--spacing-md); position: relative; @@ -42,9 +41,8 @@ height: fun.convert-px(85); margin: 0 auto; border-radius: fun.convert-px(3); - box-shadow: 0 0 0 fun.convert-px(1) var(--color-shadow-lighter), - fun.convert-px(2) fun.convert-px(2) 0 fun.convert-px(1) - var(--color-shadow-light); + box-shadow: 0 0 0 fun.convert-px(1) var(--color-shadow-light), + fun.convert-px(2) fun.convert-px(2) 0 fun.convert-px(1) var(--color-shadow); position: relative; img { diff --git a/src/components/CommentForm/CommentForm.module.scss b/src/components/CommentForm/CommentForm.module.scss index 922923a..d19a1ef 100644 --- a/src/components/CommentForm/CommentForm.module.scss +++ b/src/components/CommentForm/CommentForm.module.scss @@ -10,11 +10,11 @@ padding: var(--spacing-md); position: relative; background: var(--color-bg); - border: fun.convert-px(1) solid var(--color-border-light); + border: fun.convert-px(1) solid var(--color-border); box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 - var(--color-shadow-lighter), + var(--color-shadow-light), fun.convert-px(4) fun.convert-px(4) fun.convert-px(3) fun.convert-px(-2) - var(--color-shadow-light); + var(--color-shadow); } } diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss index da4cd57..51e308e 100644 --- a/src/components/Footer/Footer.module.scss +++ b/src/components/Footer/Footer.module.scss @@ -7,7 +7,7 @@ place-content: center; gap: var(--spacing-xs); padding: var(--spacing-md) 0 calc(var(--toolbar-size) + var(--spacing-md)); - border-top: fun.convert-px(3) solid var(--color-border-lighter); + border-top: fun.convert-px(3) solid var(--color-border-light); } .back-to-top { diff --git a/src/components/Form/Form.module.scss b/src/components/Form/Form.module.scss index 92dbb36..e464293 100644 --- a/src/components/Form/Form.module.scss +++ b/src/components/Form/Form.module.scss @@ -33,13 +33,13 @@ width: 100%; padding: var(--spacing-2xs) var(--spacing-xs); background: var(--color-bg-tertiary); - border: fun.convert-px(2) solid var(--color-border-light); - box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow-light); + border: fun.convert-px(2) solid var(--color-border); + box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow); transition: all 0.25s linear 0s; &:hover { box-shadow: fun.convert-px(5) fun.convert-px(5) 0 fun.convert-px(1) - var(--color-shadow-light); + var(--color-shadow); transform: translate(#{fun.convert-px(-3)}, #{fun.convert-px(-3)}); } diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss index 96b8642..aa0d8cf 100644 --- a/src/components/Header/Header.module.scss +++ b/src/components/Header/Header.module.scss @@ -9,7 +9,7 @@ padding: var(--spacing-sm) 0 var(--spacing-md); position: relative; background: var(--color-bg); - border-bottom: fun.convert-px(3) solid var(--color-border-lighter); + border-bottom: fun.convert-px(3) solid var(--color-border-light); } .body { diff --git a/src/components/Icons/Blog/Blog.module.scss b/src/components/Icons/Blog/Blog.module.scss index d5c2639..5b53125 100644 --- a/src/components/Icons/Blog/Blog.module.scss +++ b/src/components/Icons/Blog/Blog.module.scss @@ -13,11 +13,11 @@ .picture { fill: var(--color-primary-lighter); - stroke: var(--color-border); + stroke: var(--color-border-dark); } .background { fill: var(--color-bg); - stroke: var(--color-border); + stroke: var(--color-border-dark); stroke-width: 4; } diff --git a/src/components/Icons/CV/CV.module.scss b/src/components/Icons/CV/CV.module.scss index 448bac6..e7b0e59 100644 --- a/src/components/Icons/CV/CV.module.scss +++ b/src/components/Icons/CV/CV.module.scss @@ -8,7 +8,7 @@ .lock { fill: var(--color-bg); - stroke: var(--color-border); + stroke: var(--color-border-dark); stroke-width: 3; } @@ -18,36 +18,36 @@ .seal-top { fill: var(--color-primary-lighter); - stroke: var(--color-border); + stroke: var(--color-border-dark); stroke-width: 2; } .seal-bottom { fill: var(--color-primary-lighter); - stroke: var(--color-border); + stroke: var(--color-border-dark); stroke-width: 2; } .diploma { fill: var(--color-bg); - stroke: var(--color-border); + stroke: var(--color-border-dark); stroke-width: 4; } .top { fill: var(--color-primary-lighter); - stroke: var(--color-border); + stroke: var(--color-border-dark); stroke-width: 4; } .handle { fill: var(--color-primary-lighter); - stroke: var(--color-border); + stroke: var(--color-border-dark); stroke-width: 3; } .bottom { fill: var(--color-primary); - stroke: var(--color-border); + stroke: var(--color-border-dark); stroke-width: 4; } diff --git a/src/components/Icons/Close/Close.module.scss b/src/components/Icons/Close/Close.module.scss index 235991c..b45895b 100644 --- a/src/components/Icons/Close/Close.module.scss +++ b/src/components/Icons/Close/Close.module.scss @@ -8,6 +8,6 @@ .line { fill: var(--color-primary-lighter); - stroke: var(--color-border); + stroke: var(--color-border-dark); stroke-width: 3; } diff --git a/src/components/Icons/Cog/Cog.module.scss b/src/components/Icons/Cog/Cog.module.scss index 4fad00b..4b09c38 100644 --- a/src/components/Icons/Cog/Cog.module.scss +++ b/src/components/Icons/Cog/Cog.module.scss @@ -5,6 +5,6 @@ width: var(--icon-size, #{fun.convert-px(40)}); margin: auto; fill: var(--color-primary-lighter); - stroke: var(--color-border); + stroke: var(--color-border-dark); stroke-width: 4; } diff --git a/src/components/Icons/Contact/Contact.module.scss b/src/components/Icons/Contact/Contact.module.scss index cf4b03e..5c0040e 100644 --- a/src/components/Icons/Contact/Contact.module.scss +++ b/src/components/Icons/Contact/Contact.module.scss @@ -8,22 +8,22 @@ .envelop { fill: var(--color-primary-lighter); - stroke: var(--color-border); + stroke: var(--color-border-dark); stroke-width: 4; } .lines { - fill: var(--color-border); + fill: var(--color-border-dark); } .background { fill: var(--color-shadow-dark); - stroke: var(--color-border); + stroke: var(--color-border-dark); stroke-width: 4; } .paper { fill: var(--color-bg); - stroke: var(--color-border); + stroke: var(--color-border-dark); stroke-width: 4; } diff --git a/src/components/Icons/Hamburger/Hamburger.module.scss b/src/components/Icons/Hamburger/Hamburger.module.scss index 5916e8c..07cbe50 100644 --- a/src/components/Icons/Hamburger/Hamburger.module.scss +++ b/src/components/Icons/Hamburger/Hamburger.module.scss @@ -12,7 +12,7 @@ var(--color-primary-light) 0%, var(--color-primary-lighter) 100% ); - border: fun.convert-px(1) solid var(--color-border); + border: fun.convert-px(1) solid var(--color-border-dark); border-radius: fun.convert-px(3); display: block; width: var(--btn-size, fun.convert-px(50)); diff --git a/src/components/Icons/Home/Home.module.scss b/src/components/Icons/Home/Home.module.scss index 2e1df3a..6eb88c4 100644 --- a/src/components/Icons/Home/Home.module.scss +++ b/src/components/Icons/Home/Home.module.scss @@ -8,35 +8,35 @@ .wall { fill: var(--color-bg); - stroke: var(--color-border); + stroke: var(--color-border-dark); stroke-width: 4; } .indoor { - fill: var(--color-shadow); - stroke: var(--color-border); + fill: var(--color-shadow-dark); + stroke: var(--color-border-dark); stroke-width: 4; } .door { fill: var(--color-primary-lighter); - stroke: var(--color-border); + stroke: var(--color-border-dark); stroke-width: 4; } .roof { fill: var(--color-primary-lighter); - stroke: var(--color-border); + stroke: var(--color-border-dark); stroke-width: 4; } .chimney { fill: var(--color-bg); - stroke: var(--color-border); + stroke: var(--color-border-dark); stroke-width: 4; } .lines { - fill: var(--color-border); + fill: var(--color-border-dark); stroke-width: 4; } diff --git a/src/components/Icons/Moon/Moon.module.scss b/src/components/Icons/Moon/Moon.module.scss index 5912973..51d76fd 100644 --- a/src/components/Icons/Moon/Moon.module.scss +++ b/src/components/Icons/Moon/Moon.module.scss @@ -2,7 +2,7 @@ .moon { fill: var(--color-primary-lighter); - stroke: var(--color-border); + stroke: var(--color-border-dark); stroke-width: 4; width: var(--icon-size, #{fun.convert-px(25)}); } diff --git a/src/components/Icons/Search/Search.module.scss b/src/components/Icons/Search/Search.module.scss index 5016ae1..7b506e8 100644 --- a/src/components/Icons/Search/Search.module.scss +++ b/src/components/Icons/Search/Search.module.scss @@ -8,24 +8,24 @@ .big-handle { fill: var(--color-primary-lighter); - stroke: var(--color-border); + stroke: var(--color-border-dark); stroke-width: 3; } .glass { fill: var(--color-bg-opacity); - stroke: var(--color-border); + stroke: var(--color-border-dark); stroke-width: 2; } .upright { fill: var(--color-primary-lighter); - stroke: var(--color-border); + stroke: var(--color-border-dark); stroke-width: 3; } .small-handle { fill: var(--color-primary); - stroke: var(--color-border); + stroke: var(--color-border-dark); stroke-width: 2; } diff --git a/src/components/Icons/Sun/Sun.module.scss b/src/components/Icons/Sun/Sun.module.scss index da2de89..1de4b19 100644 --- a/src/components/Icons/Sun/Sun.module.scss +++ b/src/components/Icons/Sun/Sun.module.scss @@ -2,7 +2,7 @@ .sun { fill: var(--color-primary-lighter); - stroke: var(--color-border); + stroke: var(--color-border-dark); stroke-width: 4; width: var(--icon-size, #{fun.convert-px(25)}); } diff --git a/src/components/MainNav/MainNav.module.scss b/src/components/MainNav/MainNav.module.scss index 22ffe22..21c5b9d 100644 --- a/src/components/MainNav/MainNav.module.scss +++ b/src/components/MainNav/MainNav.module.scss @@ -65,7 +65,7 @@ bottom: 0; z-index: -1; background: var(--color-bg-opacity); - box-shadow: 0 0 3px 0 var(--color-shadow); + box-shadow: 0 0 fun.convert-px(3) 0 var(--color-shadow-dark); text-align: center; opacity: 1; visibility: visible; diff --git a/src/components/PostHeader/PostHeader.module.scss b/src/components/PostHeader/PostHeader.module.scss index 33dc488..f813060 100644 --- a/src/components/PostHeader/PostHeader.module.scss +++ b/src/components/PostHeader/PostHeader.module.scss @@ -22,20 +22,20 @@ width: 100%; height: 100%; background: var(--color-bg-secondary); - border-top: fun.convert-px(3) solid var(--color-border-lighter); - border-bottom: fun.convert-px(3) solid var(--color-border-lighter); + border-top: fun.convert-px(3) solid var(--color-border-light); + border-bottom: fun.convert-px(3) solid var(--color-border-light); } &::before { grid-column: 1; justify-self: start; - border-right: fun.convert-px(3) solid var(--color-border-lighter); + border-right: fun.convert-px(3) solid var(--color-border-light); } &::after { grid-column: 3; justify-self: end; - border-left: fun.convert-px(3) solid var(--color-border-lighter); + border-left: fun.convert-px(3) solid var(--color-border-light); } } @@ -51,7 +51,7 @@ align-items: center; margin: 0; position: relative; - text-shadow: fun.convert-px(1) fun.convert-px(1) 0 var(--color-shadow-lighter); + text-shadow: fun.convert-px(1) fun.convert-px(1) 0 var(--color-shadow-light); &::before, &::after { diff --git a/src/components/PostPreview/PostPreview.module.scss b/src/components/PostPreview/PostPreview.module.scss index 8c14000..c30ab75 100644 --- a/src/components/PostPreview/PostPreview.module.scss +++ b/src/components/PostPreview/PostPreview.module.scss @@ -35,7 +35,7 @@ height: fun.convert-px(100); margin: 0 auto var(--spacing-sm); position: relative; - border: fun.convert-px(1) solid var(--color-border-light); + border: fun.convert-px(1) solid var(--color-border); } h2.title { @@ -51,11 +51,11 @@ h2.title { border: fun.convert-px(1) solid var(--color-primary-dark); border-radius: fun.convert-px(3); box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0 - var(--color-shadow-light), + var(--color-shadow), fun.convert-px(3) fun.convert-px(3) fun.convert-px(3) fun.convert-px(-1) - var(--color-shadow-lighter), + var(--color-shadow-light), fun.convert-px(5) fun.convert-px(5) fun.convert-px(7) fun.convert-px(-1) - var(--color-shadow-lighter); + var(--color-shadow-light); } .read-more { diff --git a/src/components/PostsList/PostsList.module.scss b/src/components/PostsList/PostsList.module.scss index 5d3ee95..ff36e74 100644 --- a/src/components/PostsList/PostsList.module.scss +++ b/src/components/PostsList/PostsList.module.scss @@ -33,7 +33,7 @@ } li.item { - border-bottom: fun.convert-px(1) solid var(--color-border-light); + border-bottom: fun.convert-px(1) solid var(--color-border); &:not(:last-of-type) { margin: 0 0 var(--spacing-md) 0; diff --git a/src/components/ThemeToggle/ThemeToggle.module.scss b/src/components/ThemeToggle/ThemeToggle.module.scss index 36c91f7..74fb542 100644 --- a/src/components/ThemeToggle/ThemeToggle.module.scss +++ b/src/components/ThemeToggle/ThemeToggle.module.scss @@ -18,10 +18,10 @@ align-items: center; width: var(--toggle-width); height: var(--toggle-height); - background: var(--color-shadow-lighter); + background: var(--color-shadow-light); border: fun.convert-px(1) solid var(--color-primary); border-radius: fun.convert-px(32); - box-shadow: inset 0 0 2px 0 var(--color-shadow); + box-shadow: inset 0 0 fun.convert-px(3) 0 var(--color-shadow-dark); margin: 0 var(--spacing-2xs); position: relative; @@ -34,8 +34,8 @@ border: fun.convert-px(1) solid var(--color-primary); border-radius: 50%; box-shadow: inset 0 0 fun.convert-px(1) fun.convert-px(1) - var(--color-shadow-light), - 0 0 fun.convert-px(2) fun.convert-px(1) var(--color-shadow-lighter); + var(--color-shadow), + 0 0 fun.convert-px(2) fun.convert-px(1) var(--color-shadow-light); position: absolute; left: fun.convert-px(-2); transition: all 0.3s ease-in-out 0s; diff --git a/src/components/Toolbar/Toolbar.module.scss b/src/components/Toolbar/Toolbar.module.scss index 45b24d8..3b52fb6 100644 --- a/src/components/Toolbar/Toolbar.module.scss +++ b/src/components/Toolbar/Toolbar.module.scss @@ -23,7 +23,7 @@ ) 1; box-shadow: 0 fun.convert-px(-2) fun.convert-px(3) fun.convert-px(-1) - var(--color-shadow); + var(--color-shadow-dark); @include mix.media("screen") { @include mix.dimensions(null, "2xs", "height") { @@ -64,7 +64,7 @@ ) 1; box-shadow: fun.convert-px(2) fun.convert-px(-2) fun.convert-px(3) - fun.convert-px(-1) var(--color-shadow); + fun.convert-px(-1) var(--color-shadow-dark); transition: all 0.7s ease-in-out 0s; &--closed { @@ -92,7 +92,7 @@ ) 1; box-shadow: fun.convert-px(2) fun.convert-px(2) fun.convert-px(3) - fun.convert-px(1) var(--color-shadow); + fun.convert-px(1) var(--color-shadow-dark); transform-origin: 50% -200%; transition: all 0.8s ease-in-out 0s; diff --git a/src/components/Widgets/RecentPosts/RecentPosts.module.scss b/src/components/Widgets/RecentPosts/RecentPosts.module.scss index 95ad7fe..dc580a1 100644 --- a/src/components/Widgets/RecentPosts/RecentPosts.module.scss +++ b/src/components/Widgets/RecentPosts/RecentPosts.module.scss @@ -37,11 +37,11 @@ border: fun.convert-px(3) solid var(--color-primary); border-radius: fun.convert-px(5); box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) - var(--color-shadow-light), + var(--color-shadow), fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) - var(--color-shadow-light), + var(--color-shadow), fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) - var(--color-shadow-light); + var(--color-shadow); transition: all 0.3s ease-in-out 0s; &:hover, @@ -53,13 +53,13 @@ &:hover, &:focus { box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) - var(--color-shadow-lighter), + var(--color-shadow-light), fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) - var(--color-shadow-lighter), + var(--color-shadow-light), fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) - var(--color-shadow-lighter), + var(--color-shadow-light), fun.convert-px(7) fun.convert-px(10) fun.convert-px(12) fun.convert-px(-3) - var(--color-shadow-lighter); + var(--color-shadow-light); transform: scale(1.05); } @@ -70,7 +70,7 @@ } &:active { - box-shadow: 0 0 0 0 var(--color-shadow-light); + box-shadow: 0 0 0 0 var(--color-shadow); transform: scale(0.95); .title { @@ -83,7 +83,7 @@ width: 100%; height: clamp(fun.convert-px(100), 20vw, fun.convert-px(150)); position: relative; - border: fun.convert-px(1) solid var(--color-border-light); + border: fun.convert-px(1) solid var(--color-border); } .meta { diff --git a/src/components/Widgets/Sharing/Sharing.module.scss b/src/components/Widgets/Sharing/Sharing.module.scss index 3477c88..c05a56b 100644 --- a/src/components/Widgets/Sharing/Sharing.module.scss +++ b/src/components/Widgets/Sharing/Sharing.module.scss @@ -22,28 +22,15 @@ align-items: center; padding: var(--spacing-2xs) var(--spacing-xs); border-radius: fun.convert-px(3); - color: var(--color-fg-inverted); font-weight: 600; text-decoration: none; - text-shadow: fun.convert-px(2) fun.convert-px(1) fun.convert-px(1) - var(--color-shadow-dark); transition: all 0.3s ease-in-out 0s; - @include mix.media("screen") { - @include mix.dimensions("sm") { - font-size: var(--font-size-sm); - } - } - &:hover, &:focus { color: hsl(0, 0%, 100%); transform: translateX(#{fun.convert-px(-3)}) translateY(#{fun.convert-px(-3)}); - - @include mix.motion("reduce") { - text-decoration: underline; - } } &:active { diff --git a/src/components/Widgets/SocialMedia/SocialMedia.module.scss b/src/components/Widgets/SocialMedia/SocialMedia.module.scss index c8ad759..5dfdcb7 100644 --- a/src/components/Widgets/SocialMedia/SocialMedia.module.scss +++ b/src/components/Widgets/SocialMedia/SocialMedia.module.scss @@ -15,24 +15,24 @@ height: 3em; background: none; box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) - var(--color-shadow-light), + var(--color-shadow), fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-1) - var(--color-shadow-light), + var(--color-shadow), fun.convert-px(3) fun.convert-px(4) fun.convert-px(4) fun.convert-px(-3) - var(--color-shadow-light), + var(--color-shadow), 0 0 0 0 var(--color-shadow); transition: all 0.3s linear 0s; &:hover, &:focus { box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) - var(--color-shadow-light), + var(--color-shadow), fun.convert-px(1) fun.convert-px(1) fun.convert-px(2) fun.convert-px(-1) - var(--color-shadow-lighter), + var(--color-shadow-light), fun.convert-px(3) fun.convert-px(3) fun.convert-px(4) fun.convert-px(-4) - var(--color-shadow-lighter), + var(--color-shadow-light), fun.convert-px(6) fun.convert-px(6) fun.convert-px(10) fun.convert-px(-3) - var(--color-shadow-light); + var(--color-shadow); transform: scale(1.15); } @@ -41,7 +41,7 @@ } &:active { - box-shadow: 0 0 0 0 var(--color-shadow-light); + box-shadow: 0 0 0 0 var(--color-shadow); outline: none; transform: scale(0.9); } diff --git a/src/components/Widgets/ToC/ToC.module.scss b/src/components/Widgets/ToC/ToC.module.scss index a296659..a863a34 100644 --- a/src/components/Widgets/ToC/ToC.module.scss +++ b/src/components/Widgets/ToC/ToC.module.scss @@ -16,7 +16,7 @@ width: 100%; padding: var(--spacing-2xs) var(--spacing-sm); background: none; - border-bottom: fun.convert-px(1) solid var(--color-border-lighter); + border-bottom: fun.convert-px(1) solid var(--color-border-light); text-decoration: underline solid transparent 0; transition: all 0.16s ease-in-out 0s, text-decoration-color 0s; diff --git a/src/styles/base/_base.scss b/src/styles/base/_base.scss index 8e3c2ab..890acd8 100644 --- a/src/styles/base/_base.scss +++ b/src/styles/base/_base.scss @@ -30,7 +30,7 @@ summary { } * { - scrollbar-color: var(--color-shadow) var(--color-bg-tertiary); + scrollbar-color: var(--color-shadow-dark) var(--color-bg-tertiary); scrollbar-width: auto; } @@ -44,7 +44,7 @@ summary { } *::-webkit-scrollbar-thumb { - background-color: var(--color-shadow); + background-color: var(--color-shadow-dark); border-radius: fun.convert-px(6); border: fun.convert-px(3) solid var(--color-bg-tertiary); } diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss index 28c017c..4b11e64 100644 --- a/src/styles/base/_colors.scss +++ b/src/styles/base/_colors.scss @@ -15,13 +15,12 @@ --color-primary-dark: #{var.$color_blue-dark}; --color-primary-darker: #{var.$color_blue-darker}; --color-secondary: #{var.$color_orange}; - --color-border: #{var.$color_grey-dark}; - --color-border-light: #{var.$color_grey}; - --color-border-lighter: #{var.$color_grey-bright}; - --color-shadow: #{var.$color_grey-dark-o70}; - --color-shadow-light: #{var.$color_grey-dark-o40}; - --color-shadow-lighter: #{var.$color_grey-dark-o20}; - --color-shadow-dark: #{var.$color_grey-dark}; + --color-border: #{var.$color_grey}; + --color-border-dark: #{var.$color_grey-dark}; + --color-border-light: #{var.$color_grey-bright}; + --color-shadow: #{var.$color_grey-dark-o40}; + --color-shadow-dark: #{var.$color_grey-dark-o70}; + --color-shadow-light: #{var.$color_grey-dark-o20}; --color-token-red: #{var.$color_red}; --color-token-green: #{var.$color_green}; --color-token-purple: #{var.$color_purple}; diff --git a/src/styles/base/_helpers.scss b/src/styles/base/_helpers.scss index 0c3b617..9fe2bd4 100644 --- a/src/styles/base/_helpers.scss +++ b/src/styles/base/_helpers.scss @@ -34,7 +34,7 @@ z-index: 100000; background: var(--color-primary); box-shadow: fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 - var(--color-shadow); + var(--color-shadow-dark); clip: auto !important; color: var(--color-fg-inverted); font-size: var(--font-size-md); diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss index 0aea717..b94f67d 100644 --- a/src/styles/base/_typography.scss +++ b/src/styles/base/_typography.scss @@ -14,7 +14,7 @@ h2 { ) 0 0 / 3rem 100% no-repeat; font-size: var(--font-size-2xl); - text-shadow: fun.convert-px(1) fun.convert-px(1) 0 var(--color-shadow-lighter); + text-shadow: fun.convert-px(1) fun.convert-px(1) 0 var(--color-shadow-light); } h3 { @@ -208,7 +208,7 @@ var { :not(pre) > code { background: var(--color-bg-secondary); - border: fun.convert-px(1) solid var(--color-border-lighter); + border: fun.convert-px(1) solid var(--color-border-light); border-radius: fun.convert-px(3); color: var(--color-primary-darker); padding: fun.convert-px(2) fun.convert-px(5) fun.convert-px(1) diff --git a/src/styles/components/_wp-blocks.scss b/src/styles/components/_wp-blocks.scss index 7d23008..7b32f09 100644 --- a/src/styles/components/_wp-blocks.scss +++ b/src/styles/components/_wp-blocks.scss @@ -8,11 +8,11 @@ position: relative; border: fun.convert-px(1) solid var(--color-primary-lighter); border-left: fun.convert-px(5) solid var(--color-primary-lighter); - box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light), + box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow), fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 - var(--color-shadow-lighter), + var(--color-shadow-light), fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0 - var(--color-shadow-lighter); + var(--color-shadow-light); font-style: italic; > *:last-child { @@ -31,7 +31,7 @@ margin: 0 auto var(--spacing-md); padding: var(--spacing-xs) var(--spacing-sm); background: var(--color-bg-secondary); - border: fun.convert-px(1) solid var(--color-border-lighter); + border: fun.convert-px(1) solid var(--color-border-light); color: var(--color-primary-darker); } @@ -78,20 +78,20 @@ a { display: block; - box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light), + box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow), fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 - var(--color-shadow-lighter), + var(--color-shadow-light), fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0 - var(--color-shadow-lighter); + var(--color-shadow-light); &:hover, &:focus { transform: scale(1.05); - box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light), + box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow), fun.convert-px(3) fun.convert-px(3) fun.convert-px(2) 0 - var(--color-shadow-lighter), + var(--color-shadow-light), fun.convert-px(5) fun.convert-px(5) fun.convert-px(8) 0 - var(--color-shadow-lighter); + var(--color-shadow-light); } &:focus { @@ -100,10 +100,10 @@ &:active { transform: scale(0.95); - box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light), + box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow), fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 - var(--color-shadow-lighter), - 0 0 0 0 var(--color-shadow-lighter); + var(--color-shadow-light), + 0 0 0 0 var(--color-shadow-light); outline: none; } } @@ -136,19 +136,19 @@ img { display: block; margin: auto; - box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light), + box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow), fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 - var(--color-shadow-lighter), + var(--color-shadow-light), fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0 - var(--color-shadow-lighter); + var(--color-shadow-light); text-align: center; } } .wp-block-video { - box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light), + box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow), fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 - var(--color-shadow-lighter), + var(--color-shadow-light), fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0 - var(--color-shadow-lighter); + var(--color-shadow-light); } diff --git a/src/styles/pages/Home.module.scss b/src/styles/pages/Home.module.scss index b966b36..b6050d7 100644 --- a/src/styles/pages/Home.module.scss +++ b/src/styles/pages/Home.module.scss @@ -14,7 +14,7 @@ background: var(--color-bg-secondary); &:not(:last-child) { - border-bottom: fun.convert-px(1) solid var(--color-border-light); + border-bottom: fun.convert-px(1) solid var(--color-border); } &:nth-child(2n) { diff --git a/src/styles/pages/Page.module.scss b/src/styles/pages/Page.module.scss index ac6646b..69a1526 100644 --- a/src/styles/pages/Page.module.scss +++ b/src/styles/pages/Page.module.scss @@ -26,7 +26,7 @@ li.item { margin: 0 0 var(--spacing-md) 0; - border-bottom: fun.convert-px(1) solid var(--color-border-light); + border-bottom: fun.convert-px(1) solid var(--color-border); } .comments { @@ -35,7 +35,7 @@ li.item { margin: var(--spacing-md) 0 0; padding: var(--spacing-md) 0 var(--spacing-lg); background: var(--color-bg-secondary); - border-top: fun.convert-px(3) solid var(--color-border-lighter); + border-top: fun.convert-px(3) solid var(--color-border-light); > * { grid-column: 2; diff --git a/src/styles/vendors/_prism.scss b/src/styles/vendors/_prism.scss index 5086e08..e6627df 100644 --- a/src/styles/vendors/_prism.scss +++ b/src/styles/vendors/_prism.scss @@ -20,7 +20,7 @@ left: 0; right: 0; background: var(--color-bg-tertiary); - border: fun.convert-px(1) solid var(--color-border-light); + border: fun.convert-px(1) solid var(--color-border); } .toolbar-item { @@ -37,7 +37,7 @@ margin-right: auto; padding: 0 var(--spacing-xs); background: var(--color-bg-secondary); - border-right: fun.convert-px(1) solid var(--color-border-light); + border-right: fun.convert-px(1) solid var(--color-border); color: var(--color-primary-darker); font-size: var(--font-size-sm); font-weight: 600; @@ -56,7 +56,7 @@ pre[class*="language-"] { margin: var(--spacing-md) 0; padding: 0; position: relative; - border: fun.convert-px(1) solid var(--color-border-light); + border: fun.convert-px(1) solid var(--color-border); > code { display: block; @@ -75,7 +75,7 @@ pre[class*="language-"] { pointer-events: none; user-select: none; background: var(--color-bg); - border-right: fun.convert-px(1) solid var(--color-border-light); + border-right: fun.convert-px(1) solid var(--color-border); } .token { @@ -169,7 +169,7 @@ pre[class*="language-"] { width: 1.1ch; margin: 0 0.5ch 0 0; border: fun.convert-px(1) solid var(--color-bg); - outline: fun.convert-px(1) solid var(--color-border); + outline: fun.convert-px(1) solid var(--color-border-dark); overflow: hidden; } @@ -237,11 +237,11 @@ pre.command-line { border: 0.4ex solid var(--color-primary); border-radius: fun.convert-px(30); box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) - var(--color-shadow-light), + var(--color-shadow), fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) - var(--color-shadow-light), + var(--color-shadow), fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) - var(--color-shadow-light); + var(--color-shadow); color: var(--color-primary); font-size: var(--font-size-sm); font-weight: 600; @@ -252,13 +252,13 @@ pre.command-line { transform: translateX(#{fun.convert-px(-2)}) translateY(#{fun.convert-px(-2)}); box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) - var(--color-shadow-lighter), + var(--color-shadow-light), fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) - var(--color-shadow-lighter), + var(--color-shadow-light), fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) - var(--color-shadow-lighter), + var(--color-shadow-light), fun.convert-px(4) fun.convert-px(7) fun.convert-px(8) fun.convert-px(-3) - var(--color-shadow-lighter); + var(--color-shadow-light); } &:focus { @@ -268,6 +268,6 @@ pre.command-line { &:active { text-decoration: none; transform: translateY(#{fun.convert-px(2)}); - box-shadow: 0 0 0 0 var(--color-shadow-light); + box-shadow: 0 0 0 0 var(--color-shadow); } } |