✨feature: Sidebar styling

2026-07-05 15:45:54 -05:00
parent e5cc42f048
commit c2a1eed2cf
2 changed files with 154 additions and 23 deletions
@@ -1,28 +1,162 @@
 /* Sidebar styles */

 .sidebar{
-  .widget {
-    /* Widget styles */
-    @apply mb-8;
+    @apply pt-1;

-    h3 {
-      /* Widget title styles */
-      @apply m-0 mb-2 font-semibold;
-    }
+    .widget {
+        @apply mb-10;

-    ul {
-      /* List styles */
-      @apply list-none m-0 p-0 pl-3 border-l-3 border-secondary-400;
+        &:last-child { @apply mb-0; }

-      li {
-        /* List item styles */
-        @apply text-balance;
+        h2,
+        h3,
+        .wp-block-heading {
+            @apply m-0 mb-4 pb-0;

-        &:first-of-type {
-          /* First list item styles */
-          @apply leading-none mb-1;
+            color: var(--color-cwc-blue-01);
+            font-family: var(--font-sans);
+            font-size: var(--text-14px);
+            font-weight: 600;
+            letter-spacing: 0.11em;
+            line-height: 1;
+            text-transform: uppercase;
+        }
+
+        ul {
+            @apply list-none m-0 p-0;
+
+            li {
+                @apply m-0 leading-none!;
+
+                &:not(:last-child) { @apply mb-4; }
+
+                a {
+                    color: var(--color-dark);
+                    font-size: var(--text-16px);
+                    font-weight: 300;
+
+                    &:hover { color: var(--color-cwc-blue-01); }
+                }
+            }
+        }
+
+        select {
+            @apply px-5 py-3 rounded-sm border-2 border-cwc-blue-03;
+
+            background-color: color-mix(in oklch, var(--color-cwc-blue-03) 40%, white);
+            color: var(--color-dark);
+            font-size: var(--text-16px);
+            font-weight: 300;
+            line-height: 1.1;
+
+            appearance: none;
+            background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.25L6 5.75L11 1.25' stroke='%23F26B53' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+            background-position: right 1rem center;
+            background-repeat: no-repeat;
+            background-size: 0.75rem auto;
+            padding-right: 2.75rem;
+
+            &:focus-visible {
+                border-color: var(--color-cwc-blue-01);
+                outline-offset: 2px;
+            }
+        }
+
+        .wp-block-search__label,
+        .screen-reader-text {
+            @apply absolute left-5 top-1/2 pointer-events-none;
+
+            color: var(--color-dark);
+            font-size: var(--text-16px);
+            font-weight: 300;
+            line-height: 1;
+            transform: translateY(-50%);
+            z-index: 2;
+
+            &::before {
+                content: "";
+                display: inline-block;
+                width: 1rem;
+                height: 1rem;
+                margin-right: 0.6rem;
+                transform: translateY(1px);
+                background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.25 12.25C13.4167 11.0833 14 9.66667 14 8C14 6.33333 13.4167 4.91667 12.25 3.75C11.0833 2.58333 9.66667 2 8 2C6.33333 2 4.91667 2.58333 3.75 3.75C2.58333 4.91667 2 6.33333 2 8C2 9.66667 2.58333 11.0833 3.75 12.25C4.91667 13.4167 6.33333 14 8 14C9.66667 14 11.0833 13.4167 12.25 12.25ZM8 16C5.76667 16 3.875 15.225 2.325 13.675C0.775 12.125 0 10.2333 0 8C0 5.76667 0.775 3.875 2.325 2.325C3.875 0.775 5.76667 0 8 0C10.2333 0 12.125 0.775 13.675 2.325C15.225 3.875 16 5.76667 16 8C16 8.93333 15.8542 9.8125 15.5625 10.6375C15.2708 11.4625 14.8583 12.2167 14.325 12.9L20 18.6L18.6 20L12.9 14.325C12.2167 14.8583 11.4625 15.2708 10.6375 15.5625C9.8125 15.8542 8.93333 16 8 16Z' fill='%23F26B53'/%3E%3C/svg%3E");
+                background-repeat: no-repeat;
+                background-size: contain;
+            }
+        }
+
+        .wp-block-search {
+            @apply relative;
+
+            &:focus-within {
+                .wp-block-search__label { opacity: 0; }
+            }
+
+            .wp-block-search__inside-wrapper { @apply relative; }
+
+            .wp-block-search__input {
+                @apply rounded-sm border-2 border-cwc-blue-03 px-5 py-3;
+
+                background-color: color-mix(in oklch, var(--color-cwc-blue-03) 40%, white);
+                color: var(--color-dark);
+                font-size: var(--text-16px);
+                font-weight: 300;
+                line-height: 1.1;
+                padding-left: 8.8rem;
+            }
+
+            .wp-block-search__button { @apply hidden; }
+
+            &:has(.wp-block-search__input:not(:placeholder-shown)) { .wp-block-search__label { opacity: 0; } }
+        }
+
+        &.widget_search {
+            @apply mb-9;
+
+            .wp-block-search__input {
+                &:focus-visible {
+                    border-color: var(--color-cwc-blue-01);
+                    outline-offset: 2px;
+                }
+            }
+        }
+
+        &:has(ul) {
+            h2,
+            h3,
+            .wp-block-heading {
+                @apply mb-2;
+
+                &::after {
+                    @apply block mt-2;
+
+                    content: "";
+                    height: 2px;
+                    width: 100%;
+                    background: var(--color-secondary);
+                }
+            }
+        }
+
+        .wp-block-archives__label {
+            @apply sr-only;
+        }
+    }
+
+    @media (max-width: 1023px) {
+        .widget {
+            ul a { font-size: var(--text-16px); }
+
+            .wp-block-search__label,
+            .screen-reader-text {
+                font-size: var(--text-16px);
+            }
+
+            .wp-block-search .wp-block-search__input {
+                font-size: var(--text-16px);
+                padding-left: 7.7rem;
+            }
        }
-      }
    }
-  }
 }
@@ -1,6 +1,3 @@
-<svg width="29.683" height="31.696" viewBox="0 0 29.683 31.696">
-  <g id="Group_34" data-name="Group 34" transform="translate(-256.083 -695.182)">
-    <circle id="Ellipse_5" data-name="Ellipse 5" cx="12.181" cy="12.181" r="12.181" transform="translate(257.083 696.182)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-    <line id="Line_8" data-name="Line 8" x2="7.542" y2="7.542" transform="translate(276.809 717.922)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-  </g>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.25 12.25C13.4167 11.0833 14 9.66667 14 8C14 6.33333 13.4167 4.91667 12.25 3.75C11.0833 2.58333 9.66667 2 8 2C6.33333 2 4.91667 2.58333 3.75 3.75C2.58333 4.91667 2 6.33333 2 8C2 9.66667 2.58333 11.0833 3.75 12.25C4.91667 13.4167 6.33333 14 8 14C9.66667 14 11.0833 13.4167 12.25 12.25ZM8 16C5.76667 16 3.875 15.225 2.325 13.675C0.775 12.125 0 10.2333 0 8C0 5.76667 0.775 3.875 2.325 2.325C3.875 0.775 5.76667 0 8 0C10.2333 0 12.125 0.775 13.675 2.325C15.225 3.875 16 5.76667 16 8C16 8.93333 15.8542 9.8125 15.5625 10.6375C15.2708 11.4625 14.8583 12.2167 14.325 12.9L20 18.6L18.6 20L12.9 14.325C12.2167 14.8583 11.4625 15.2708 10.6375 15.5625C9.8125 15.8542 8.93333 16 8 16Z" fill="#F26B53"/>
 </svg>