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