Responsive wrap categories filter (#692)

* Responsive wrap categories filter * Do not style the categories widget in footer
verdigado · Aug 7, 2024 · cebf836 · cebf836
1 parent 4671996
commit cebf836
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 37 deletions.
diff --git a/archive.php b/archive.php
@@ -25,7 +25,7 @@
 						<?php
 						$sunflower_parsed_blocks = parse_blocks( '<!-- wp:categories /-->' );
 						if ( $sunflower_parsed_blocks ) {
-							echo '<div class="filter-button-group mb-5 text-center">';
+							echo '<div class="filter-button-group mb-5 text-center sunflower-categories">';
 							foreach ( $sunflower_parsed_blocks as $sunflower_block ) {
 								echo wp_kses_post( render_block( $sunflower_block ) );
 							}

diff --git a/sass/_archives.scss b/sass/_archives.scss
@@ -24,47 +24,52 @@
         }
     }
 
-    ul.wp-block-categories-list {
-        display: inline-flex;
-        list-style-type: none;
+    .sunflower-categories {
+
+        ul.wp-block-categories-list {
+            display: inline-flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            list-style-type: none;
+
+            li {
+
+                a {
+
+                    @include themed() {
+                        font-family: t("standardFont");
+                    }
+
+                    font-weight: 700;
+                    font-size: 16px;
+                    color: $black;
+                    letter-spacing: 0.05em;
+                    background: none;
+                    border: 0;
+                    padding: 0;
+                    margin: 0 1em;
+                    border-bottom: 2px solid transparent;
+                    text-transform: uppercase;
+
+                    &:focus {
+                        outline: none;
+                        box-shadow: none;
+                    }
+
+                    &:hover,
+                    &:focus,
+                    &:active {
+                        color: $primary;
+                        border-bottom-color: $primary;
+                    }
 
-        li {
-
-            a {
-
-                @include themed() {
-                    font-family: t("standardFont");
-                }
-
-                font-weight: 700;
-                font-size: 16px;
-                color: $black;
-                letter-spacing: 0.05em;
-                background: none;
-                border: 0;
-                padding: 0;
-                margin: 0 1em;
-                border-bottom: 2px solid transparent;
-                text-transform: uppercase;
-
-                &:focus {
-                    outline: none;
-                    box-shadow: none;
                 }
 
-                &:hover,
-                &:focus,
-                &:active {
-                    color: $primary;
-                    border-bottom-color: $primary;
+                &.current-cat {
+                    border-bottom: 2px solid $black;
                 }
-
-            }
-
-            &.current-cat {
-                border-bottom: 2px solid $black;
-
             }
         }
+
     }
 }