Skip to content

Commit

Permalink
refactor(front): refactors mini-nav toggle padding; post preview imag…
Browse files Browse the repository at this point in the history 
…e hover effect
  • Loading branch information
@dgrebb
dgrebb committed Oct 7, 2023
1 parent d960cb7 commit 0268fa0
Show file tree
Hide file tree
Showing 4 changed files with 82 additions and 62 deletions.
76 changes: 35 additions & 41 deletions front/src/lib/styles/base/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -440,16 +440,6 @@
p {
color: var(--violet-a75);
}
a:hover,
a:focus,
a:focus-within {
.post-item-image {
opacity: 1;
}
.post-title {
color: var(--jasper);
}
}
}
}

Expand All @@ -462,28 +452,36 @@
color: var(--violet);
}
}
~ label {
~ .page-navigation-toggle {
background-color: var(--lemon-50-a75);
color: var(--violet-a50);
&:hover,
&:focus,
&:focus-visible {
background-color: var(--sun-50);
color: var(--violet);
}
& + .page-navigation-list {
background-color: var(--lemon-50-a75);
}
}
&:checked {
~ label,
label.bottom {
~ .page-navigation-toggle {
background-color: transparent;
}
& + .page-navigation-list {
background-color: var(--lemon-50-a75);
& label.bottom {
color: var(--violet-a50);
&:hover,
&:focus,
&:focus-visible {
background-color: transparent;
color: var(--violet);
}
& + .page-navigation-list {
background-color: var(--lemon-50-a75);
label.bottom {
background-color: transparent;
color: var(--violet-a50);
&:hover,
&:focus,
&:focus-visible {
color: var(--violet);
}
}
}
}
}
Expand All @@ -495,7 +493,7 @@
transition-duration: var(--transition-duration);
transition-property: color;
transition-timing-function: var(--transition-timing-function);
color: var(--fg-clr);
color: var(--violet-a75);
&:hover,
&:focus,
&:focus-visible {
Expand Down Expand Up @@ -842,16 +840,6 @@
p {
color: var(--fg-clr);
}
a:hover,
a:focus,
a:focus-within {
.post-item-image {
opacity: 1;
}
.post-title {
color: var(--orange);
}
}
}
}

Expand Down Expand Up @@ -880,26 +868,32 @@
color: var(--celestial);
}
}
~ label {
~ .page-navigation-toggle {
background-color: var(--oxford-blue-a50);
&:hover,
&:focus,
&:focus-visible {
background-color: var(--grape);
color: var(--celestial);
}
& + .page-navigation-list {
background-color: var(--rich-black-a75);
}
&:checked {
~ label,
label.bottom {
}
&:checked {
~ .page-navigation-toggle {
background-color: transparent;
&:hover,
&:focus,
&:focus-visible {
background-color: transparent;
color: var(--celestial);
}
& + .page-navigation-list {
background-color: var(--rich-black-a75);
& label.bottom {
background-color: transparent;
label.bottom {
&:hover,
&:focus,
&:focus-visible {
color: var(--celestial);
}
}
}
}
Expand Down
35 changes: 22 additions & 13 deletions front/src/lib/styles/components/page-nav.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
@media screen and (min-width: 640px) {
display: none;
}
label {
.page-navigation-toggle {
display: inline-block;
position: relative;
vertical-align: middle;
Expand All @@ -65,7 +65,6 @@
cursor: pointer;
box-shadow: var(--shadow-elevation-low);
border-radius: 0.33rem;
padding: 0.33rem 0.33rem 0.36rem 0.36rem;
}
input#page-navigation-checkbox {
position: absolute;
Expand All @@ -83,15 +82,7 @@
outline-offset: 1px;
}
}
&:checked {
&:focus,
&:focus-visible {
~ label {
mix-blend-mode: normal;
}
}
}
~ label {
~ .page-navigation-toggle {
.page-navigation-open {
display: block;
}
Expand Down Expand Up @@ -130,8 +121,20 @@
}
}
&:checked {
~ label {
&:focus,
&:focus-visible {
~ .page-navigation-toggle {
mix-blend-mode: normal;
}
}
~ .page-navigation-toggle {
box-shadow: none;
background-color: transparent;
&:hover,
&:focus,
&:focus-visible {
background-color: transparent;
}
.page-navigation-open {
display: none;
}
Expand All @@ -143,8 +146,14 @@
visibility: visible;
opacity: 1;
max-height: 100%;
& label.bottom {
label.bottom {
box-shadow: none;
background-color: transparent;
&:hover,
&:focus,
&:focus-visible {
background-color: transparent;
}
.page-navigation-open {
display: none;
}
Expand Down
20 changes: 15 additions & 5 deletions front/src/lib/styles/pages/category.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@
position: absolute;
top: 2.5rem;
right: 0;
padding: 0 0.5rem;
label:not(.bottom) {
top: 3px;
padding: 0.5rem;
.page-navigation-toggle {
padding: 0.25rem;
}
}
}
Expand Down Expand Up @@ -77,6 +77,16 @@
display: flex;
flex-direction: row;
transition: color 0.5s;
&:hover,
&:focus,
&:focus-within {
.post-title {
color: var(--highlight-clr);
}
.post-item-image {
filter: brightness(100%);
}
}
}
.post-item-heading {
display: flex;
Expand Down Expand Up @@ -104,10 +114,10 @@
flex-shrink: 0;
flex-direction: column;
align-self: start;
opacity: 0.77;
z-index: 3;
filter: brightness(80%);
transition-duration: var(--transition-duration);
transition-property: opacity;
transition-property: filter;
transition-timing-function: var(--transition-timing-function);
margin-left: 0.75rem;
border-radius: 100%;
Expand Down
13 changes: 10 additions & 3 deletions front/src/lib/styles/pages/post.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,9 +153,6 @@
list-style-type: none;
@apply dg--font-lb;
}
.page-navigation-category-all {
display: none;
}
/* &.show {
display: block;
width: 25%;
Expand All @@ -169,6 +166,16 @@
}
}
}
.page-navigation {
.page-navigation-category-all {
display: none;
}
&.mini {
.page-navigation-toggle {
padding: 0.25rem 0.33rem;
}
}
}
}

.post .summary {
Expand Down

0 comments on commit 0268fa0

Please sign in to comment.