fix: minor style improvements

fbuireu · Sep 6, 2024 · 078b5bc · 078b5bc
1 parent fbcf5ea
commit 078b5bc
Show file tree

Hide file tree

Showing 25 changed files with 97 additions and 86 deletions.
diff --git a/src/pages/articles/_article.css b/src/pages/articles/_article.css
@@ -8,7 +8,7 @@
     gap: 0 1rem;
     grid: '. Article-Content .' / 1fr min(var(--grid-article), 100%) 1fr;
     line-height: var(--base-line-height);
-    margin: 4rem 0;
+    margin-block: 4rem;
 
     @supports (initial-letter: 3 2) {
         & > p:first-of-type::first-letter {

diff --git a/src/pages/articles/_articles.css b/src/pages/articles/_articles.css
@@ -1,10 +1,10 @@
 .articles__grid__list {
     gap: 5rem 3rem;
-    margin: 12rem 0;
+    margin-block: 12rem;
 
     @media (width <= 960px) {
         justify-content: center;
-        margin: 7rem 0;
+        margin-block: 7rem;
     }
 }
 .articles__grid__list > li {

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -30,7 +30,7 @@ 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 (actually not using var(--base-line-height) and test (https://dev.to/carmenansio/creating-a-modular-typography-scale-with-css-2d29)
+// 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/pages/tags/_tag.css b/src/pages/tags/_tag.css
@@ -10,7 +10,7 @@
 
 .tag__article__item {
     --gap: 2rem;
-    margin-bottom: 3rem;
+    margin-block-end: 3rem;
     max-width: calc(100% / var(--items-per-row) - var(--gap));
     position: relative;
     width: 100%;

diff --git a/src/ui/modules/about/components/aboutLatestArticles/about-latest-articles.css b/src/ui/modules/about/components/aboutLatestArticles/about-latest-articles.css
@@ -1,21 +1,21 @@
 
   .about-latest-articles__wrapper {
-    margin-bottom: 12rem;
+    margin-block-end: 12rem;
 
     @media (width <= 720px) {
-      margin-bottom: 5rem;
+      margin-block-end: 5rem;
     }
   }
 
   .about-latest-articles__title {
-    margin: 5rem 0;
+    margin-block: 5rem;
 
     a {
       color: var(--primary-main);
       display: inline-block;
     }
     @media (width <= 720px) {
-      margin-bottom: 2rem;
+      margin-block-end: 2rem;
     }
   }
 

diff --git a/src/ui/modules/about/components/cities/cities.css b/src/ui/modules/about/components/cities/cities.css
@@ -6,7 +6,7 @@
     grid-template-columns: 1fr;
     grid-template-rows: repeat(var(--inline-num-cards), 400px);
     list-style: none;
-    margin-bottom: 3rem;
+    margin-block-end: 3rem;
     max-width: calc(100% / var(--num-columns));
     padding-bottom: calc(var(--inline-index) * 0.5rem);
     view-timeline-name: --cities-scales-in-view;

diff --git a/src/ui/modules/about/components/cityCard/atoms/cityName/city-name.css b/src/ui/modules/about/components/cityCard/atoms/cityName/city-name.css
@@ -1,9 +1,9 @@
   .city-card__content__name {
     grid-area: City-Name;
-    margin-top: -1rem;
+    margin-block-start: -1rem;
 
     @media (width <= 720px) {
-      margin-top: 0;
+        margin-block-start: 0;
       padding-inline: 1rem;
     }
   }

diff --git a/src/ui/modules/about/components/littleMoreOfMe/little-more-of-me.css b/src/ui/modules/about/components/littleMoreOfMe/little-more-of-me.css
@@ -1,6 +1,6 @@
 
   .little-more-of-me__title {
-    margin-bottom: 4rem;
+    margin-block-end: 4rem;
   }
 
   .little-more-of-me__wrapper {

diff --git a/src/ui/modules/contact/components/contactForm/contact-form.css b/src/ui/modules/contact/components/contactForm/contact-form.css
@@ -6,7 +6,7 @@
     max-width: var(--grid-medium);
 
     button {
-        margin-top: 2rem;
+        margin-block-start: 2rem;
     }
     &.--is-disabled > *:not(.contact-form__submit) {
         color: var(--neutral-light-1);
@@ -66,7 +66,7 @@
     color: var(--neutral-main);
     font-size: 1.25rem;
     font-style: italic;
-    margin-bottom: 1.5rem;
+    margin-block-end: 1.5rem;
     position: relative;
 
     &:is(

diff --git a/src/ui/modules/core/components/articleCard/article-card.css b/src/ui/modules/core/components/articleCard/article-card.css
@@ -60,4 +60,7 @@
     &.--is-articles, &.--is-about, &.--is-tags {
         color: var(--neutral-main)
     }
+    @media (max-width: 1440px) {
+        margin-inline: 1rem;
+    }
 }
diff --git a/src/ui/modules/core/components/breadcrumbs/breadcrumbs.css b/src/ui/modules/core/components/breadcrumbs/breadcrumbs.css
@@ -16,10 +16,10 @@
     }
 
     .--is-articles .breadcrumbs__list {
-        margin-bottom: 5rem;
+        margin-block-end: 5rem;
 
         @media (width <= 960px) {
-            margin-bottom: 2rem;
+            margin-block-end: 2rem;
         }
     }
 

diff --git a/src/ui/modules/core/components/header/atoms/menu/menu.css b/src/ui/modules/core/components/header/atoms/menu/menu.css
@@ -116,7 +116,7 @@
 .navigation__menu__divider {
     background-color: var(--white);
     grid-area: Header-Divider;
-    height: 150%;
+    height: 125%;
     opacity: 0;
     transition: 0.3s opacity;
     translate: 0 -3rem;

diff --git a/src/ui/modules/core/components/header/atoms/menuButton/menu-button.css b/src/ui/modules/core/components/header/atoms/menuButton/menu-button.css
@@ -6,7 +6,7 @@
         translate: 5% 0;
 
         @media (width <= 575px) {
-            margin-right: 1rem;
+            margin-inline-end: 1rem;
         }
     }
 
@@ -50,8 +50,8 @@
 
         }
 
-        @media (width <= 1440px) {
-            margin-right: 1rem;
+        @media (width <= 1500px) {
+            margin-inline-end: 2rem;
             padding: 0;
         }
     }

diff --git a/...ules/core/components/latestArticles/atoms/latestArticlesSlider/latest-articles-slider.css b/...ules/core/components/latestArticles/atoms/latestArticlesSlider/latest-articles-slider.css
@@ -8,10 +8,9 @@
     }
 }
 
-  .latest__articles__list {
+.latest__articles__list {
     align-items: stretch;
     gap: 0 2rem;
     padding: 2rem 0 4rem;
     position: relative;
-  }
-
+}
diff --git a/src/ui/modules/core/components/spinner/spinner.css b/src/ui/modules/core/components/spinner/spinner.css
@@ -3,7 +3,7 @@
     --speed: 1.3s;
     --opacity: .1;
     height: calc(var(--size) * (2.1 / 5));
-    margin: 0 1rem;
+    margin-inline: 1rem;
     overflow: visible;
     transform-origin: center;
     width: var(--size);

diff --git a/src/ui/modules/core/components/themeToggle/theme-toggle.css b/src/ui/modules/core/components/themeToggle/theme-toggle.css
@@ -5,7 +5,7 @@
         transform: translateY(-75%);
 
         @media (width <= 575px) {
-            margin-top: 2rem;
+            margin-block-start: 2rem;
             order: -1;
             position: inherit;
             transform: translateY(-50%);

diff --git a/src/ui/modules/home/components/myWork/my-work.css b/src/ui/modules/home/components/myWork/my-work.css
@@ -1,14 +1,14 @@
 
     .my-work__title {
-        margin-bottom: 4rem;
+        margin-block-end: 4rem;
 
         @media (width <=720px) {
-            margin-bottom: 0;
+            margin-block-end: 0;
         }
     }
 
     .my-work__content__list {
-        margin-bottom: 8rem;
+        margin-block-end: 8rem;
     }
 
     .my-work__item__title {
@@ -27,32 +27,32 @@
         }
 
         &:nth-child(1) {
-            margin-top: 0;
+            margin-block-start: 0;
         }
 
         &:nth-child(3) {
-            margin-top: 25%;
+            margin-block-start: 25%;
         }
 
         &:nth-child(5) {
-            margin-top: 50%;
+            margin-block-start: 50%;
         }
 
         &:nth-child(7) {
-            margin-top: 75%;
+            margin-block-start: 75%;
         }
 
         @media (width <= 1024px) {
             --items-per-row: 2;
 
             &:nth-child(1),
             &:nth-child(3) {
-                margin-top: 0;
+                margin-block-start: 0;
             }
 
             &:nth-child(5),
             &:nth-child(7) {
-                margin-top: 25%;
+                margin-block-start: 25%;
             }
         }
         @media (width <=720px) {
@@ -63,7 +63,7 @@
             &:nth-child(3),
             &:nth-child(5),
             &:nth-child(7) {
-                margin-top: 2rem;
+                margin-block-start: 2rem;
             }
         }
     }

diff --git a/src/ui/modules/home/components/testimonial/atoms/testimonialAuthor/testimonial-author.css b/src/ui/modules/home/components/testimonial/atoms/testimonialAuthor/testimonial-author.css
@@ -7,5 +7,9 @@
     transition-duration: 450ms;
     transition-property: translate;
     transition-timing-function: ease-in;
+
+    @media (width <= 575px) {
+      padding-inline:1rem;
+    }
   }
 
diff --git a/...ules/home/components/testimonial/atoms/testimonialDescription/testimonial-description.css b/...ules/home/components/testimonial/atoms/testimonialDescription/testimonial-description.css
@@ -7,5 +7,9 @@
     transition-duration: 350ms;
     transition-property: translate;
     transition-timing-function: ease-in;
+
+    @media (width <= 575px) {
+      padding-inline:1rem;
+    }
   }
 
diff --git a/src/ui/modules/home/components/testimonial/atoms/testimonialQuote/testimonial-quote.css b/src/ui/modules/home/components/testimonial/atoms/testimonialQuote/testimonial-quote.css
@@ -21,6 +21,10 @@
     transition-duration: 350ms;
     transition-property: translate;
     transition-timing-function: ease-in;
+
+    @media (width <= 575px) {
+      padding-inline:1rem;
+    }
   }
 
   .testimonial__quote-symbol {

diff --git a/src/ui/modules/home/components/testimonial/testimonial.css b/src/ui/modules/home/components/testimonial/testimonial.css
@@ -1,43 +1,40 @@
+.testimonial__content {
+  background-color: var(--white);
+  cursor: grab;
+  display: grid;
+  gap: 0 1rem;
+  grid:
+    'Testimonial-Image Testimonial-Image . . ' 1rem
+    'Testimonial-Image Testimonial-Image Testimonial-Quote Testimonial-Quote' min-content
+    'Testimonial-Image Testimonial-Image Testimonial-Quote Testimonial-Quote' calc(100% - 7rem)
+    'Testimonial-Image Testimonial-Image Testimonial-Author Testimonial-Author' 1.5rem
+    'Testimonial-Image Testimonial-Image Testimonial-Description Testimonial-Description' min-content
+    / calc(100% / 4) calc(100% / 4) 1fr 1fr;
+  width: 100%;
 
-  .testimonial__content {
-    background-color: var(--white);
-    cursor: grab;
-    display: grid;
-    gap: 0 1rem;
-    grid:
-      'Testimonial-Image Testimonial-Image . . ' 1rem
-      'Testimonial-Image Testimonial-Image Testimonial-Quote Testimonial-Quote' min-content
-      'Testimonial-Image Testimonial-Image Testimonial-Quote Testimonial-Quote' calc(100% - 7rem)
-      'Testimonial-Image Testimonial-Image Testimonial-Author Testimonial-Author' 1.5rem
-      'Testimonial-Image Testimonial-Image Testimonial-Description Testimonial-Description' min-content
-      / calc(100% / 4) calc(100% / 4) 1fr 1fr;
-    width: 100%;
-
-    &:not(.--is-active) {
-      opacity: 0.25;
-    }
-
-    @media (width <= 575px) {
-      gap: 0.5rem 0;
-      grid:
-      'Testimonial-Image' auto
-      'Testimonial-Quote' min-content
-      'Testimonial-Author' 1.5rem
-      'Testimonial-Description' min-content
-      / 1fr;
-      padding-inline: 1rem;
-    }
+  &:not(.--is-active) {
+    opacity: 0.25;
   }
 
-  .swiper-slide-prev {
-    .testimonial__content {
-      grid:
-        '. . Testimonial-Image Testimonial-Image ' 1rem
-        'Testimonial-Quote Testimonial-Quote Testimonial-Image Testimonial-Image' min-content
-        'Testimonial-Quote Testimonial-Quote Testimonial-Image Testimonial-Image' calc(100% - 7rem)
-        'Testimonial-Author Testimonial-Author Testimonial-Image Testimonial-Image' 1.5rem
-        'Testimonial-Description Testimonial-Description Testimonial-Image Testimonial-Image' min-content
-        / 1fr 1fr calc(100% / 4) calc(100% / 4);
-    }
+  @media (width <= 575px) {
+    gap: 0.5rem 0;
+    grid:
+    'Testimonial-Image' auto
+    'Testimonial-Quote' min-content
+    'Testimonial-Author' 1.5rem
+    'Testimonial-Description' min-content
+    / 1fr;
   }
+}
 
+.swiper-slide-prev {
+  .testimonial__content {
+    grid:
+      '. . Testimonial-Image Testimonial-Image ' 1rem
+      'Testimonial-Quote Testimonial-Quote Testimonial-Image Testimonial-Image' min-content
+      'Testimonial-Quote Testimonial-Quote Testimonial-Image Testimonial-Image' calc(100% - 7rem)
+      'Testimonial-Author Testimonial-Author Testimonial-Image Testimonial-Image' 1.5rem
+      'Testimonial-Description Testimonial-Description Testimonial-Image Testimonial-Image' min-content
+      / 1fr 1fr calc(100% / 4) calc(100% / 4);
+  }
+}
diff --git a/src/ui/modules/home/components/testimonials/testimonials.css b/src/ui/modules/home/components/testimonials/testimonials.css
@@ -1,12 +1,8 @@
 
     .testimonials__wrapper {
         background-color: light-dark(var(--neutral-light-4), var(--background-main));
-        margin: 5rem 0;
+        margin-block: 5rem;
         transition: background-color 0.3s ease;
-
-        @media (width <= 960px) {
-            margin: 2rem;
-        }
     }
 
     .testimonials__title,
@@ -15,7 +11,7 @@
     }
 
     .testimonials__title {
-        margin-bottom: 1.5rem;
+        margin-block-end: 1.5rem;
         padding-top: 3rem;
 
         @media (width <= 960px) {