UX: make theme compatible with AI gists (#140)

Before (only pinned topic excerpts, no gist toggle):

![image](https://github.com/user-attachments/assets/7a1b78b8-e115-4c96-9ebf-52d2c1237eea)


After (gists can be toggled on): 

![image](https://github.com/user-attachments/assets/9e6786be-3817-4420-8142-1c5f7cad54ea)


This puts the gists in the same place as the theme places excerpts and
uses the same styles. It also follows the theme pattern of hiding
excerpts/gists on mobile.
This commit is contained in:
Kris
2025-04-16 15:34:52 -04:00
committed by GitHub
parent 651cf2794c
commit 36899bbbaa
2 changed files with 30 additions and 14 deletions
+4 -1
View File
@@ -69,8 +69,11 @@ input[type="color"]:focus,
background-color: var(--background-color); background-color: var(--background-color);
} }
.fk-d-menu__trigger.topic-list-layout-trigger { @include breakpoint(mobile-extra-large) {
// pinned topic excerpts are hidden on small screens too
.fk-d-menu__trigger.topic-list-layout-trigger {
display: none; display: none;
}
} }
.search-container .search-header, .search-container .search-header,
+25 -12
View File
@@ -86,7 +86,8 @@
"category category category category status" "category category category category status"
". . . . ." ". . . . ."
"activity . . . likes-replies"; "activity . . . likes-replies";
.topic-excerpt { .topic-excerpt,
.link-bottom-line {
display: none; display: none;
} }
} }
@@ -99,6 +100,9 @@
.badge-category__wrapper { .badge-category__wrapper {
height: min-content; height: min-content;
} }
.link-bottom-line {
display: flex;
}
} }
// display contents // display contents
@@ -233,14 +237,6 @@
min-width: unset; min-width: unset;
} }
// excerpt
.topic-excerpt {
grid-row: 3 / -1;
grid-column: 1 / -3;
margin: 0;
font-size: var(--font-down-2);
}
// timestamp // timestamp
td.activity .post-activity { td.activity .post-activity {
grid-area: activity; grid-area: activity;
@@ -250,12 +246,29 @@
padding: 0; padding: 0;
} }
// metadata .link-bottom-line {
// metadata - category
td.main-link .link-bottom-line {
display: none; display: none;
} }
// metadata
// metadata - excerpt
.topic-excerpt,
td.main-link .link-bottom-line {
grid-row: 3 / -1;
grid-column: 1 / -3;
margin: 0;
font-size: var(--font-down-2);
.excerpt__contents {
color: var(--primary-high);
}
// default category position hidden
.badge-category__wrapper {
display: none;
}
}
td.topic-category-status-data { td.topic-category-status-data {
display: contents; display: contents;
} }