test

Author: satoshinotdead

scss/mobile-stuff.scss

@@ -293,3 +293,125 @@ body.f-nav-hidden:not(
   .topic-list-item:last-of-type {
   border-bottom: none;
 }
+
+// temp override for categories page on mobile
+.categories-and-latest {
+  .category-list {
+    @include viewport.until(sm) {
+      border-collapse: separate;
+
+      th.topics,
+      .category-logo {
+        display: none;
+      }
+
+      thead tr th {
+        font-size: var(--font-up-1-rem);
+        font-weight: bold;
+      }
+
+      tbody {
+        display: flex;
+        flex-direction: column;
+        gap: 1em;
+        padding-top: 1em;
+        border: 0;
+      }
+
+      tbody tr {
+        display: grid;
+        grid-template-areas:
+          "title topics"
+          "category category"
+          "subcategory subcategory";
+        row-gap: 1em;
+        border: 1px solid var(--primary-300);
+        border-radius: var(--d-border-radius-large);
+        box-shadow: 0 0 12px 1px var(--topic-card-shadow);
+      }
+
+      td.category {
+        display: contents;
+        border-top-left-radius: var(--d-border-radius-large);
+        border-bottom-left-radius: var(--d-border-radius-large);
+        border-width: 2px;
+        padding: 1em 1.5rem;
+      }
+
+      tbody h3 {
+        grid-area: title;
+        padding: 1em 0 0 1.5rem;
+        font-size: var(--font-up-1-rem);
+
+        .category-name {
+          display: flex;
+          align-self: center;
+        }
+
+        .badge-category {
+          gap: 0.25em;
+          align-items: center;
+          font-size: var(--font-up-1-rem);
+
+          .d-icon:first-of-type:not(.d-icon-lock),
+          &.--style-square::before,
+          &.--style-emoji .emoji {
+            width: 1.25em;
+            height: 1.25em;
+            margin-right: 0.25em;
+          }
+
+          &.--style-square::before {
+            border-radius: 6px;
+          }
+        }
+
+        .d-icon.d-icon-lock {
+          order: 1;
+        }
+      }
+
+      .topics {
+        width: auto;
+        padding: 1em 1.5rem 0 0;
+        display: flex;
+        align-items: center;
+        justify-content: end;
+      }
+
+      .category-description {
+        grid-area: category;
+        padding: 0 1.5rem;
+        margin: 0;
+        font-size: var(--font-down-1-rem);
+      }
+
+      .subcategories {
+        grid-area: subcategory;
+        gap: 0.25em 0.5em;
+        padding: 0 1.5rem 1em;
+        margin: 0;
+
+        .badge-category__wrapper {
+          background-color: light-dark(
+            oklch(from var(--category-badge-color) 98% calc(c * 0.2) h),
+            oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
+          );
+          padding: 0.25em 0.5rem;
+          border-radius: var(--d-border-radius);
+        }
+
+        .badge-category__name {
+          color: light-dark(
+            oklch(from var(--category-badge-color) 20% calc(c * 1) h),
+            oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
+          );
+        }
+
+        .badge-category.--style-square::before {
+          border-radius: 3px;
+        }
+      }
+    }
+  }
+}