diff --git a/scss/home.scss b/scss/home.scss index 6fc1430..11cc50d 100644 --- a/scss/home.scss +++ b/scss/home.scss @@ -239,49 +239,32 @@ html[dir="rtl"] { } .splide { - height: 9rem; - padding: 0 45px; + height: 8rem; + padding: 0 55px; margin: 0 calc(-1 * var(--margin) / 2); } li.sponsor-card { - width: calc(12%); + width: max(10%, 170px); &[data-tier=silver] { - width: calc(17%); + width: max(15%, 200px); } &[data-tier=gold] { - width: calc(22%); + width: max(20%, 230px); } &[data-tier=platinum] { - width: calc(30%); + width: max(25%, 260px); } } -@media (max-width: 1400px) { - li.sponsor-card { - width: calc(20%); - - &[data-tier=silver] { - width: calc(25%); - } +@media (max-width: 320px) { - &[data-tier=gold] { - width: calc(30%); - } - - &[data-tier=platinum] { - width: calc(35%); + li.sponsor-card { + a:has(img) .caption { + display: none; } } } - -@media (max-width: 1000px) { - li.sponsor-card img + .caption { - display: none; - } - - -} diff --git a/scss/home_variables.scss b/scss/home_variables.scss index 68957ff..4521178 100644 --- a/scss/home_variables.scss +++ b/scss/home_variables.scss @@ -3,6 +3,7 @@ --primary-shadow-color: #5b29e45d; --secondary-color: #D442C6; --fg-color: #1f1c24; + --col-bg: #ffffff; --margin: 60px; --font-sans: 'DM Sans', sans-serif; --font-mono: 'DM Mono', monospace; @@ -42,4 +43,4 @@ width: 60% !important; } } -} \ No newline at end of file +} diff --git a/scss/post.scss b/scss/post.scss index 39f9c2f..dd7cba4 100644 --- a/scss/post.scss +++ b/scss/post.scss @@ -1,17 +1,16 @@ li.sponsor-card { - - width: calc(15%); - /* &[data-has-logo=true] .caption { display: none; }*/ + width: max(20%, 170px); + &[data-tier=gold] { - width: calc(25%); + width: max(25%, 220px); } &[data-tier=platinum] { - width: calc(33%); + width: max(30%, 250px); } } @@ -35,3 +34,20 @@ blockquote{ padding: 10px; } } + +@media (max-width: 480px) { + + li.sponsor-card { + width: calc(100%); + } +} + +@media (max-width: 400px) { + + li.sponsor-card { + + a:has(img) .caption { + display: none; + } + } +} diff --git a/scss/sponsors.scss b/scss/sponsors.scss index ce4fed5..635c631 100644 --- a/scss/sponsors.scss +++ b/scss/sponsors.scss @@ -17,11 +17,8 @@ body.dark { } .splide { - height: 7rem; -/* background-color: var(--carousel-bg);*/ + height: 7.3rem; border-radius: 5px; - padding: 0 55px; - margin: 0 calc(-1 * var(--margin) / 2); .splide__arrows { visibility: hidden; @@ -31,6 +28,30 @@ body.dark { height: 100%; } + .splide__track::after { + content: ""; + position: absolute; + top: 0; + right: 0; + height: 100%; + width: 30px; + pointer-events: none; + background: linear-gradient(to right, transparent, var(--col-bg)); + z-index: 1; + } + + .splide__track::before { + content: ""; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 30px; + pointer-events: none; + z-index: 1; + background: linear-gradient(to left, transparent, var(--col-bg)); + } + &:hover .splide__arrows { visibility: visible; } @@ -40,7 +61,7 @@ li.sponsor-card { width: calc(15%); - padding: 1.2rem 0; + padding: 1.5rem 0 1.5rem 1.5rem; .chevron{ flex-grow: 0;