Rumperuu/Omphaloskepsis-2
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

style: use flex for items grid

Browse source
This commit is contained in:
Ben Goldsworthy 2025-01-26 21:36:36 +01:00
parent c7a6da3560
commit f40fca29cb
Signed by: Rumperuu
SSH key fingerprint: SHA256:v3uompaUiPqV2w1/AIRWBSQOxr2dntH9Xs/y8fDnUPU
3 changed files with 31 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
assets/css/pages/_collection.scss
View file

@ -1,27 +1,13 @@
.site-content--section, .site-content--section,
.site-content--list { .site-content--list {
display: grid; display: flex;
grid-gap: 10px; flex-wrap: wrap;
grid-template-columns: 0.2fr 1fr 0.2fr; justify-content: center;
grid-template-rows: auto auto auto;
justify-items: center;
align-items: center;
grid-template-areas:
"list-page-header list-page-header list-page-header"
"list-page-grid list-page-grid list-page-grid"
"list-page-footer list-page-footer list-page-footer";
margin-block-start: 5em;
@include mq("large") {
grid-template-areas:
". list-page-header ."
"list-page-grid list-page-grid list-page-grid"
". list-page-footer .";
}
& .site-content__header { & .site-content__header {
grid-area: list-page-header; inline-size: 100%;
text-align: center; text-align: center;
margin-block-end: 2em;
& .page-header__minor-links { & .page-header__minor-links {
text-align: center; text-align: center;
@ -29,6 +15,8 @@
& ul { & ul {
list-style: none; list-style: none;
inline-size: fit-content;
margin-inline: auto;
& li { & li {
float: inline-start; float: inline-start;
@ -73,29 +61,12 @@
} }
& .site-content__body { & .site-content__body {
display: flex;
flex-wrap: wrap;
inline-size: 100%; inline-size: 100%;
display: grid;
grid-gap: 10px;
grid-area: list-page-grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(8, 1fr);
justify-items: stretch;
align-items: stretch;
@include mq("medium") {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
}
@include mq("large") {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
}
&--list { &--list {
grid-template-columns: 1fr auto 1fr; text-align: center;
grid-template-rows: auto;
grid-template-areas: ". sections-list .";
} }
&--chart { &--chart {
@ -105,6 +76,14 @@
". section-chart ." ". section-chart ."
". section-content ."; ". section-content .";
} }
& > * {
inline-size: 20%;
}
& > a {
display: block;
}
} }
& .site-content__footer { & .site-content__footer {

3
assets/css/pages/_organisations-list.scss
View file

@ -1,6 +1,5 @@
.organisations-table { .organisations-table {
grid-column-start: 1; inline-size: 80% !important;
grid-column-end: 5;
&__items-icon { &__items-icon {
text-align: center; text-align: center;

10
assets/css/pages/_single-organisation.scss
View file

@ -109,9 +109,12 @@
} }
} }
.timeline__legend > fieldset { .timeline__legend {
inline-size: 45%; inline-size: fit-content;
float: inline-start; display: flex;
margin-inline: auto;
& > fieldset {
text-align: center; text-align: center;
border: none; border: none;
@ -120,6 +123,7 @@
inline-size: 100%; inline-size: 100%;
} }
} }
}
#hierarchy ul { #hierarchy ul {
list-style: none; list-style: none;