diff --git a/src/pages/index.astro b/src/pages/index.astro index 5178fd9f..6c16f754 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -28,9 +28,6 @@ import Welcome from "@modules/home/components/welcome/Welcome.astro"; // todo: add comments section // todo: content bar https://x.com/anatudor/status/1798615928420344018?t=m-9Hn_qO58wltQejaEMHNg&s=19 // todo: svg scroll offset driven animation in background -// todo: mess with line-heights (test (https://dev.to/carmenansio/creating-a-modular-typography-scale-with-css-2d29) -// todo: mess with vertical rythm (https://notadesigner.io/p/vertical-rhythm) -// todo: https://daverupert.com/2024/01/focus-visible-love/ // valorar idea de que semblin 2 pagines(https://www.behance.net/gallery/177718861/Photography-Portfolio-Layout-(Download)?tracking_source=search_projects|writing+portfolio&l=2) --- diff --git a/src/ui/modules/core/components/articleCard/article-card.css b/src/ui/modules/core/components/articleCard/article-card.css index d83eec48..b7bb9b4c 100644 --- a/src/ui/modules/core/components/articleCard/article-card.css +++ b/src/ui/modules/core/components/articleCard/article-card.css @@ -12,8 +12,8 @@ position: absolute; width: 100%; z-index: 1; - - &:hover ~ .article-card__item .article-card__tag__item { + + &:is(:hover, :focus-visible) ~ .article-card__item .article-card__tag__item { translate: 0 0; } } diff --git a/src/ui/modules/core/components/articleCard/atoms/articleCardAuthor/article-card-author.css b/src/ui/modules/core/components/articleCard/atoms/articleCardAuthor/article-card-author.css index b70ed929..94c7191a 100644 --- a/src/ui/modules/core/components/articleCard/atoms/articleCardAuthor/article-card-author.css +++ b/src/ui/modules/core/components/articleCard/atoms/articleCardAuthor/article-card-author.css @@ -8,7 +8,7 @@ z-index: 10; } - &:has(a:hover) ~ .article-card__tags__list .article-card__tag__item { + :has(a:is(:hover, :focus-visible)) ~ .article-card__tags__list .article-card__tag__item { translate: 0 0; } } diff --git a/src/ui/modules/core/components/articleCard/atoms/articleCardTagsList/article-card-tags-list.css b/src/ui/modules/core/components/articleCard/atoms/articleCardTagsList/article-card-tags-list.css index a3e7facf..e7a7dca4 100644 --- a/src/ui/modules/core/components/articleCard/atoms/articleCardTagsList/article-card-tags-list.css +++ b/src/ui/modules/core/components/articleCard/atoms/articleCardTagsList/article-card-tags-list.css @@ -6,7 +6,8 @@ text-transform: lowercase; z-index: 10; - &:hover .article-card__tag__item { + &:hover .article-card__tag__item, + &:has(.article-card__tag__item:focus-visible) .article-card__tag__item{ translate: 0 0; } } diff --git a/src/ui/modules/core/components/latestArticles/atoms/latestArticlesSlider/LatestArticlesSlider.tsx b/src/ui/modules/core/components/latestArticles/atoms/latestArticlesSlider/LatestArticlesSlider.tsx index 94004c00..fa05ff2e 100644 --- a/src/ui/modules/core/components/latestArticles/atoms/latestArticlesSlider/LatestArticlesSlider.tsx +++ b/src/ui/modules/core/components/latestArticles/atoms/latestArticlesSlider/LatestArticlesSlider.tsx @@ -22,10 +22,12 @@ const SLIDER_CONFIG: SwiperOptions = { 1024: { slidesPerView: 4, spaceBetween: 32, + loop: false, }, 720: { slidesPerView: 2, spaceBetween: 32, + loop: true, }, 320: { slidesPerView: 1, diff --git a/src/ui/modules/core/components/relatedArticles/atoms/relatedArticlesSlider/RelatedArticlesSlider.tsx b/src/ui/modules/core/components/relatedArticles/atoms/relatedArticlesSlider/RelatedArticlesSlider.tsx index 82852d59..9136c153 100644 --- a/src/ui/modules/core/components/relatedArticles/atoms/relatedArticlesSlider/RelatedArticlesSlider.tsx +++ b/src/ui/modules/core/components/relatedArticles/atoms/relatedArticlesSlider/RelatedArticlesSlider.tsx @@ -21,10 +21,12 @@ const SLIDER_CONFIG: SwiperOptions = { 1024: { slidesPerView: 3, spaceBetween: 32, + loop: false, }, 720: { slidesPerView: 2, spaceBetween: 32, + loop: true, }, 320: { slidesPerView: 1, diff --git a/src/ui/modules/core/components/scrollTop/scroll-top.css b/src/ui/modules/core/components/scrollTop/scroll-top.css index 7d61366b..99170f9d 100644 --- a/src/ui/modules/core/components/scrollTop/scroll-top.css +++ b/src/ui/modules/core/components/scrollTop/scroll-top.css @@ -18,6 +18,9 @@ width: fit-content; svg { + --color: light-dark(inherit, var(--white)); + color: var(--color); + fill: var(--color); height: 3rem; padding: 0.50rem; rotate: 0.25turn; diff --git a/src/ui/styles/base/base.css b/src/ui/styles/base/base.css index c5b8f5ae..7e49b2c9 100644 --- a/src/ui/styles/base/base.css +++ b/src/ui/styles/base/base.css @@ -3,8 +3,12 @@ transition-behavior: allow-discrete; &::selection { - background-color: var(--primary-main); - color: var(--white); + background-color: var(--primary-light-2); + color: var(--neutral-main); + } + &:focus-visible { + outline: 2px solid var(--primary-main); + outline-offset: 2px; } } diff --git a/src/ui/styles/global/variables.css b/src/ui/styles/global/variables.css index b8fb3f06..0169e63b 100644 --- a/src/ui/styles/global/variables.css +++ b/src/ui/styles/global/variables.css @@ -27,7 +27,7 @@ --global-max-width: 1440px; --base-font-size: 16px; --base-vertical-rhythm-factor: 2.75; - --base-vertical-rhythm: 0.725rem; + --base-vertical-rhythm: 1.125; --base-line-height: calc(var(--base-font-size) * var(--base-vertical-rhythm-factor) * var(--base-vertical-rhythm)); --global-border-radius: 0.25rem; --grid-extra-small: 575px; diff --git a/src/ui/styles/vendor/swiper.css b/src/ui/styles/vendor/swiper.css index e20b4ce1..28efcb4a 100644 --- a/src/ui/styles/vendor/swiper.css +++ b/src/ui/styles/vendor/swiper.css @@ -1,8 +1,9 @@ @layer overrides.swiper { .swiper { padding-bottom: 8rem !important; + overflow: clip; } - + .latest-articles-initialized, .related-articles-initialized { .swiper-wrapper {