diff options
Diffstat (limited to 'src/components')
27 files changed, 95 insertions, 110 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; |