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

style: replace Grid with Flexbox

Browse source
This commit is contained in:
Ben Goldsworthy 2025-02-20 01:22:43 +01:00
parent d70d779f32
commit 16e7d6ef83
Signed by: Rumperuu
SSH key fingerprint: SHA256:v3uompaUiPqV2w1/AIRWBSQOxr2dntH9Xs/y8fDnUPU
1 changed files with 10 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
assets/css/pages/_single.scss
View file

@ -2,7 +2,6 @@
display: grid; display: grid;
column-gap: 2em; column-gap: 2em;
grid-template-columns: 0.4fr 0.6fr; grid-template-columns: 0.4fr 0.6fr;
grid-template-rows: auto auto auto auto 60px;
@include mq("large") { @include mq("large") {
grid-template-rows: auto auto auto auto; grid-template-rows: auto auto auto auto;
@ -15,6 +14,7 @@
grid-column-end: 3; grid-column-end: 3;
background-color: $light; background-color: $light;
filter: brightness(80%); filter: brightness(80%);
padding-block-start: 2em;
@include mq("large") { @include mq("large") {
border: 2px solid $dark; border: 2px solid $dark;
@ -52,10 +52,6 @@
} }
&__featured-image { &__featured-image {
display: grid;
grid-template-columns: 15% 1fr 15%;
grid-template-rows: 20% 1fr 20%;
grid-template-areas: ". . ." ". post-header-details ." ". . .";
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
@ -63,18 +59,21 @@
min-block-size: 380px; min-block-size: 380px;
inline-size: 100%; inline-size: 100%;
border: 2px solid $dark; border: 2px solid $dark;
align-content: center;
position: relative;
& .attr { & .attr {
position: absolute;
background-color: $dark; background-color: $dark;
font-size: 0.7em; font-size: 0.7em;
color: $light; color: $light;
inline-size: fit-content; inline-size: fit-content;
position: fixed;
padding-block: 0.2em; padding-block: 0.2em;
padding-inline: 0.5em; padding-inline: 0.5em;
opacity: 0.8; opacity: 0.8;
margin-block: 0; margin-block: 0;
margin-inline: auto; margin-inline: auto;
top: 0;
& a { & a {
color: $light; color: $light;
@ -94,17 +93,15 @@
} }
&__title-wrapper { &__title-wrapper {
display: grid; display: flex;
grid-area: post-header-details; flex-direction: column;
background-color: $dark; background-color: $dark;
opacity: 0.8; opacity: 0.8;
text-align: center; text-align: center;
grid-template-columns: 1fr;
padding: 20px; padding: 20px;
grid-template-rows: 1fr auto auto 1fr; margin: auto;
justify-items: center; width: 80%;
align-items: center; margin-block: auto;
grid-template-areas: "." "post-title" "post-subtitle" ".";
&--no-title { &--no-title {
visibility: hidden; visibility: hidden;
@ -116,17 +113,12 @@
} }
& .article-header__title { & .article-header__title {
grid-area: post-title;
font-weight: bold; font-weight: bold;
&--long { &--long {
font-size: 1.5em; font-size: 1.5em;
} }
} }
& .article-header__subtitle {
grid-area: post-subtitle;
}
} }
&__word-count, &__word-count,