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

UX: Change title fonts, etc (#80)

Browse Source
This commit is contained in:
Jordan Vidrine
2025-03-26 14:08:42 -05:00
committed by GitHub
parent d300cf9d0f
commit adb1e4dcf2
1 changed files with 28 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/topic-cards.scss
+28 -19
View File
@@ -29,8 +29,8 @@
padding: 0.75em 1rem;
border: 1px solid var(--primary-300);
display: grid;
grid-template-columns: 22px min-content min-content auto min-content min-content min-content;
grid-template-rows: 22px minmax(22px, auto);
grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
grid-template-rows: 20px minmax(20px, auto);
grid-template-areas:
"activity activity activity activity . . status"
"topic-title topic-title topic-title topic-title likes-replies likes-replies category";
@@ -38,8 +38,8 @@
grid-row-gap: 8px;
border-radius: var(--d-border-radius);
&.excerpt-expanded {
grid-template-columns: 22px auto repeat(5, 1fr) auto;
grid-template-rows: 22px auto auto 30px;
grid-template-columns: 20px auto repeat(5, 1fr) auto;
grid-template-rows: 20px auto auto 30px;
grid-template-areas:
"activity activity activity activity . . . status"
"topic-title topic-title topic-title topic-title topic-title topic-title . ."
@@ -65,8 +65,8 @@
}
}
@include breakpoint(large) {
grid-template-columns: 22px repeat(6, 1fr);
grid-template-rows: 22px minmax(22px, auto);
grid-template-columns: 20px repeat(6, 1fr);
grid-template-rows: 20px minmax(20px, auto);
grid-template-areas:
"activity activity activity activity activity activity status"
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
@@ -107,6 +107,7 @@
.topic-activity {
display: flex;
gap: 0.25em;
font-size: var(--font-down-1);
}
.topic-activity__user {
@@ -115,8 +116,8 @@
}
.topic-activity__user .avatar {
width: 22px;
height: 22px;
width: 20px;
height: 20px;
border-radius: 4px;
}
@@ -129,7 +130,7 @@
@include breakpoint("large", min-width) {
position: absolute;
right: 0px;
top: -22px;
top: -20px;
background-color: var(--d-content-background);
height: 85%;
font-size: var(--font-down-3);
@@ -165,12 +166,14 @@
// title
td.main-link .link-top-line {
font-size: var(--font-up-1);
font-size: var(--font-0);
grid-area: topic-title;
font-weight: 500;
display: flex;
}
.link-top-line .event-date {
margin-left: 0.5em;
font-size: var(--font-down-3);
}
@@ -231,7 +234,7 @@
td.topic-category-data .badge-category__wrapper,
td.main-link .link-bottom-line .badge-category__wrapper {
border-radius: var(--d-border-radius);
padding: 6px;
padding: 3px 6px;
align-self: flex-end;
background-color: light-dark(
oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
@@ -301,12 +304,12 @@
// Bookmarks
.topic-list-item.bookmark-list-item {
grid-template-columns: 22px min-content min-content auto min-content min-content 36px;
grid-template-columns: 20px min-content min-content auto min-content min-content 36px;
grid-template-areas:
"avatar update metadata metadata metadata metadata dropdown"
"topic-title topic-title topic-title topic-title topic-title category dropdown";
@include breakpoint(mobile-extra-large) {
grid-template-columns: 22px min-content min-content auto min-content min-content min-content 36px;
grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
grid-template-areas:
"avatar update metadata metadata metadata metadata metadata dropdown"
"topic-title topic-title topic-title topic-title topic-title likes-replies category dropdown";
@@ -328,7 +331,7 @@
"excerpt excerpt excerpt excerpt excerpt excerpt . dropdown"
"excerpt excerpt excerpt excerpt excerpt excerpt category dropdown";
@include breakpoint(mobile-extra-large) {
grid-template-columns: 22px min-content min-content auto min-content min-content min-content 36px;
grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
.post-excerpt {
display: none;
}
@@ -379,7 +382,7 @@
// Assigned List
.topic-list-item.assigned-list-item {
grid-template-columns: 22px min-content min-content auto min-content min-content 36px;
grid-template-columns: 20px min-content min-content auto min-content min-content 36px;
grid-template-areas:
"activity activity activity activity activity status dropdown"
"topic-title topic-title topic-title topic-title likes-replies category dropdown";
@@ -390,6 +393,7 @@
"category . . . . likes-replies dropdown";
}
@include breakpoint(mobile-extra-large) {
grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
grid-template-areas:
"activity activity activity activity activity activity status dropdown"
"topic-title topic-title topic-title topic-title topic-title topic-title . dropdown"
@@ -405,6 +409,11 @@
td.topic-category-status-data {
display: contents;
}
.topic-status-card {
position: relative;
top: unset;
right: unset;
}
}
// User Messages
@@ -419,8 +428,8 @@ body.user-messages-page .topic-list-item {
"activity activity activity activity activity activity activity"
"topic-title topic-title topic-title topic-title likes-replies likes-replies likes-replies";
&.excerpt-expanded {
grid-template-columns: 22px repeat(6, 1fr) auto;
grid-template-rows: 22px auto auto 30px;
grid-template-columns: 20px repeat(6, 1fr) auto;
grid-template-rows: 20px auto auto 30px;
grid-template-areas:
"activity activity activity activity activity activity activity activity"
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
@@ -461,8 +470,8 @@ body.user-messages-page .topic-list-item {
}
}
@include breakpoint(large) {
grid-template-columns: 22px min-content min-content auto min-content min-content min-content;
grid-template-rows: 22px minmax(22px, auto);
grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
grid-template-rows: 20px minmax(20px, auto);
grid-template-areas:
"avatar author status status . activity"
". topic-title topic-title topic-title . . likes-replies"