Merge pull request #30 from Mazizova/contribute-page-redesign

Redesign the Suggest a Resource page

Author: Mazizova

assets/scss/_light-theme.scss

@@ -278,16 +278,35 @@
     }
   }
 
-  .contribute-fm-block {
-    background: #f8f9fc;
+  .contribute-list,
+  .contribute-subcat-list { color: #334155; }
+
+  .contribute-tags-table {
     border-color: #dde3ed;
   }
 
-  .contribute-fm-label {
-    color: #94a3b8;
+  .contribute-tags-row {
     border-bottom-color: #dde3ed;
+
+    > span:first-child { color: #64748b; }
   }
 
+  .contribute-category-item {
+    background: #f8f9fc;
+    border-color: #dde3ed;
+
+    &[open] { border-color: rgba(0, 200, 255, 0.35); }
+
+    summary {
+      color: #0f172a;
+      &:hover { color: #0272a5; }
+    }
+
+    &[open] summary { border-bottom-color: #dde3ed; }
+  }
+
+  .contribute-accordion-chevron { color: #94a3b8; }
+
   .contribute-method-badge {
     color: #0272a5;
     background: rgba(0, 200, 255, 0.06);

assets/scss/_resources.scss

@@ -1262,26 +1262,13 @@ body.sheet-open {
   }
 }
 
-.contribute-types {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-  margin-top: 1.25rem;
-}
-
-.contribute-type-item {
-  font-size: 0.9375rem;
-  color: $muted;
-  line-height: 1.5;
-
-  strong { color: $off-white; font-weight: 600; }
-}
-
 .contribute-lead {
   font-size: 1.125rem;
   color: $muted;
   line-height: 1.7;
-  margin: 0;
+  margin: 0 0 1rem;
+
+  &:last-child { margin-bottom: 0; }
 }
 
 .contribute-methods {
@@ -1378,29 +1365,12 @@ body.sheet-open {
   .contribute-example-bad  { color: $muted; text-decoration: line-through; }
 }
 
-.contribute-frontmatter {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, #{"min(100%, 360px)"});
-  gap: 1rem;
-  margin-bottom: 1.5rem;
-}
-
-.contribute-fm-block {
-  background: $dark-bg;
-  border: 1px solid $dark-border;
-  border-radius: 8px;
-  overflow: hidden;
-
-  pre { margin: 0; border: none; border-radius: 0; }
-}
+.contribute-list {
+  padding-left: 1.25rem;
+  color: $off-white;
+  margin: 0 0 1.25rem;
 
-.contribute-fm-label {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: $muted;
-  padding: 0.5rem 1.25rem;
-  border-bottom: 1px solid $dark-border;
-  letter-spacing: 0.04em;
+  li { margin-bottom: 0.375rem; }
 }
 
 .contribute-tags-table {
@@ -1491,6 +1461,74 @@ body.sheet-open {
   a { color: $accent; }
 }
 
+// ── "Choose a category" accordion (contribute page, Option 2 — Advanced) ──
+// Native <details>/<summary> — no JS needed, closed by default so a visitor
+// sees only the 7 category names until they pick one.
+
+.contribute-category-accordion {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  margin: 1rem 0 1.5rem;
+}
+
+.contribute-category-item {
+  border: 1px solid $dark-border;
+  border-radius: 10px;
+  background: $dark-surface;
+  overflow: hidden;
+
+  &[open] { border-color: rgba($accent, 0.3); }
+
+  summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 1rem 1.25rem;
+    cursor: pointer;
+    list-style: none;
+    font-size: 1rem;
+    font-weight: 600;
+    color: $white;
+
+    &::-webkit-details-marker { display: none; }
+
+    &:hover { color: $accent; }
+  }
+
+  &[open] summary {
+    border-bottom: 1px solid $dark-border;
+  }
+
+  .contribute-accordion-chevron {
+    flex: none;
+    color: $muted;
+    transition: transform 0.15s ease;
+  }
+
+  &[open] .contribute-accordion-chevron {
+    transform: rotate(180deg);
+  }
+}
+
+.contribute-category-body {
+  padding: 1.25rem 1.25rem 1.5rem;
+
+  h3:first-child { margin-top: 0; }
+}
+
+.contribute-subcat-list {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.25rem 1.5rem;
+  padding-left: 1.25rem;
+  color: $off-white;
+  margin: 0 0 1.25rem;
+
+  li { margin-bottom: 0.375rem; font-size: 0.9375rem; }
+}
+
 @media (max-width: $break-md) {
   .contribute-issue-card {
     grid-template-columns: 1fr auto;
@@ -1502,6 +1540,10 @@ body.sheet-open {
     grid-template-columns: 1fr;
     gap: 0.375rem;
   }
+
+  .contribute-subcat-list {
+    grid-template-columns: 1fr;
+  }
 }
 
 // ── Resource detail card (Software & Tools / SaaS & Cloud Solutions / Services) ──