From 9c92048ba873ff31aad79afa55bbaddd1d58ddf4 Mon Sep 17 00:00:00 2001 From: vrifox Date: Thu, 16 Mar 2023 21:50:11 +0100 Subject: [PATCH] improve sidebar --- assets/icons/blog.svg | 2 +- assets/icons/home.svg | 2 +- assets/scss/partials/sidebar.scss | 29 +++++++++++++++++------------ layouts/partials/sidebar.html | 4 ++-- 4 files changed, 21 insertions(+), 16 deletions(-) diff --git a/assets/icons/blog.svg b/assets/icons/blog.svg index c966f12..fd47943 100644 --- a/assets/icons/blog.svg +++ b/assets/icons/blog.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/home.svg b/assets/icons/home.svg index d39a49e..e7c2bc7 100644 --- a/assets/icons/home.svg +++ b/assets/icons/home.svg @@ -1,6 +1,6 @@ - + diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss index e046183..a613816 100644 --- a/assets/scss/partials/sidebar.scss +++ b/assets/scss/partials/sidebar.scss @@ -34,28 +34,31 @@ &::before { content: attr(data-title); - left: 100%; + left: calc(100% + 0.5rem); position: absolute; top: 50%; transform: translateY(-50%); - background-color: var(--sidebar-accent-2); + background-color: var(--sidebar-accent-3); color: var(--text-accent-900); padding: 0.2rem 0.5rem; border-radius: 0.5rem; pointer-events: none; opacity: 0%; transition: opacity 0.3s ease-in-out; + z-index: 201; } &::after { content: ""; - transform: translate(-100%, -50%); - border-left: 0.5rem solid transparent; - border-top: 0.5rem solid transparent; - border-bottom: 0.5rem solid transparent; - border-right: 0.7rem solid var(--sidebar-accent-2); + transform: translate(-50%, -50%) rotate(45deg); + transform-origin: center; + background-color: var(--sidebar-accent-3); top: 50%; + height: 1.2rem; + width: 1.2rem; + z-index: 200; + border-radius: 0 0 0 0.5rem; position: absolute; - left: 100%; + left: calc(100% + 0.5rem); pointer-events: none; opacity: 0%; transition: opacity 0.3s ease-in-out; @@ -97,7 +100,6 @@ left: 0; bottom: 0; padding: 0.4rem; - border-radius: 2rem 2rem 0 0; border: 1px solid var(--sidebar-border); border-bottom: 0; } @@ -117,18 +119,21 @@ margin: 0.5em 0; position: relative; letter-spacing: 0.025rem; - overflow: hidden; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s linear; + overflow: hidden; @media (max-width: 1140px) { margin: 0 0.5rem; } a { - display: block; - padding: 3rem; + overflow: visible; + display: flex; + align-items: center; + width: 100%; + height: 100%; } &::after { background-color: var(--sidebar-accent-1); diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html index 77512df..6a1084f 100644 --- a/layouts/partials/sidebar.html +++ b/layouts/partials/sidebar.html @@ -12,9 +12,9 @@