discourse/discourse-category-banners
1
0
Fork 0
mirror of https://github.com/discourse/discourse-category-banners synced 2025-03-09 13:02:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

utilize grid for layout

Browse Source
This commit is contained in:
awesomerobot 2024-01-31 14:20:02 -05:00
parent f314455091
commit 590bda9f38
1 changed files with 28 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
common/common.scss
View File

@ -5,6 +5,34 @@ body:not(.category-header) {
}
}
.category-title-contents {
display: grid;
grid-template-areas: "logo title" "logo description";
grid-template-columns: auto 1fr;
@include breakpoint(tablet) {
grid-template-areas: "logo" "title" "description";
grid-template-columns: auto;
}
.category-logo {
grid-area: logo;
align-self: center;
margin: 0 1em 0 0;
--max-height: 8em;
@include breakpoint(tablet) {
margin: 0 0 0.5em;
}
}
.category-title {
grid-area: title;
align-self: end;
}
.category-title-description {
grid-area: description;
}
}
div[class^="category-title-header"] {
display: flex;
width: 100%;
@ -56,14 +84,6 @@ div[class^="category-title-header"] {
}
}
.category-title-contents .category-logo {
margin: 0 1em 0 0;
@include breakpoint(tablet) {
display: block;
float: none;
}
}
@if $plugin_outlet == "header-list-container-bottom" {
#header-list-area {
display: flex;