shiran/discourse_theme_ran
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UX: Categories restyling (#184)

Browse Source 
Some CSS sprinkling for our most used category list formats:
### Desktop: Categories and Latest Topics 
| Default | Horizon |
|--------|--------|
| ![CleanShot 2025-06-17 at 17 28
45@2x](https://github.com/user-attachments/assets/4babf4d4-9c25-4780-bb72-c37b13d6f843)|
![CleanShot 2025-06-17 at 17 28
08@2x](https://github.com/user-attachments/assets/741a24fe-fca4-4eb8-97c9-96f5eb30b575)
|

### Desktop: Boxes with Subcategories
| Default | Horizon |
|--------|--------|
| ![CleanShot 2025-06-17 at 15 09
07@2x](https://github.com/user-attachments/assets/21e71f3b-b795-44d8-b56c-7edbe8fc465c)
| ![CleanShot 2025-06-17 at 17 29
46@2x](https://github.com/user-attachments/assets/41707610-cd09-4ebd-8fee-0f637e154fbf)
|

### Mobile: Categories with Featured Topics
| Default | Horizon |
|--------|--------|
| ![CleanShot 2025-06-17 at 17 30
53@2x](https://github.com/user-attachments/assets/665b6f19-c3d3-4438-8960-2170d0c69af3)
| ![CleanShot 2025-06-17 at 17 30
27@2x](https://github.com/user-attachments/assets/ca0fd595-1b0d-4ee9-b805-c538e4cdbc90)
|
This commit is contained in:
chapoi
2025-06-18 15:23:24 +02:00
committed by GitHub
parent 1e5f71473a
commit dac23d544c
3 changed files with 395 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/topic-cards.scss
+37
View File
@@ -16,6 +16,43 @@
}
}
.topic-list,
.category-boxes .subcategories {
.badge-category__wrapper {
border-radius: var(--d-border-radius);
padding: 3px 6px;
background-color: light-dark(
oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
);
@include viewport.until(md) {
padding: 2px 6px;
font-size: var(--font-down-2);
}
.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)
);
}
}
}
// undo all the above for the few instances that arent styled like traditional badges
.category-text-title {
.badge-category__wrapper {
border-radius: 0;
padding: 0;
background-color: transparent;
.badge-category__name {
color: var(--primary);
}
}
}
.topic-list-body {
border: none;
display: flex;