diff --git a/sass/colors.scss b/sass/colors.scss index bc54734..8fdcfdd 100644 --- a/sass/colors.scss +++ b/sass/colors.scss @@ -38,6 +38,7 @@ $pagination-hover-color: rgb(115, 151, 186); :root { --default-color: #{$white}; --bg-color: #{darken($white, 5%)}; + --bg-alternate-color: #{darken($white, 8%)}; --font-color: #{$nord3}; --footer-color: #{$darken-white}; --link-color: #{$nord1}; @@ -74,6 +75,7 @@ $pagination-hover-color: rgb(115, 151, 186); [data-theme="dark"] { --default-color: #{$nord3}; --bg-color: #{lighten($nord0, 2%)}; + --bg-alternate-color: #{lighten($nord0, 4%)}; --font-color: #{$nord6}; --footer-color: #{$nord1}; --link-color: #{$nord4}; diff --git a/sass/list.scss b/sass/list.scss index 537a60d..9dbd03a 100644 --- a/sass/list.scss +++ b/sass/list.scss @@ -3,16 +3,19 @@ .item{ padding: 0.5rem 0.75rem; - border-bottom: 1px solid var(--border-color); + border-bottom: 2px solid var(--border-color); + background-color: var(--bg-alternate-color); @include transition() {} @include respond-to("medium") { &:nth-child(2n) { background-color: var(--default-color); } + border: none; } + @include respond-to("medium-up") { - border-left: 1px solid var(--border-color); + border-left: 2px solid var(--border-color); &:nth-child(4n), &:nth-child(4n-1) @@ -22,13 +25,13 @@ &:first-child, &:nth-child(2) { - border-top: 1px solid var(--border-color); + border-top: 2px solid var(--border-color); } &:nth-child(2n), &:last-child { - border-right: 1px solid var(--border-color); - margin-right: -1px; + border-right: 2px solid var(--border-color); + margin-right: -2px; } }