alexohneander/alexohneander-zola
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

💄 style: fix home banner layout for short intro (#438)

Browse Source
This commit is contained in:
Óscar 2024-11-27 15:55:51 +01:00 committed by GitHub
parent 6d44320f45
commit 9e58b3aca8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
sass/parts/_home-banner.scss
View File

@ -1,7 +1,7 @@
#banner-container-home { #banner-container-home {
display: flex; display: flex;
justify-content: center; justify-content: space-between;
align-items: center; align-items: flex-start;
margin: 0.2rem auto; margin: 0.2rem auto;
width: 100%; width: 100%;
@ -11,6 +11,7 @@
} }
#home-banner-text { #home-banner-text {
flex: 1;
margin-block-end: 1.5rem; margin-block-end: 1.5rem;
color: var(--primary-color); color: var(--primary-color);
font-size: 1.875rem; font-size: 1.875rem;
@ -53,9 +54,9 @@
#image-container-home { #image-container-home {
position: relative; position: relative;
margin: auto 0;
padding-inline-start: 2rem; padding-inline-start: 2rem;
min-width: 11rem; max-width: 11rem;
min-height: 11rem;
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
@ -63,9 +64,8 @@
border: none; border: none;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
width: 100%; width: 100%;
max-width: 15rem; height: 100%;
height: auto; object-fit: cover;
max-height: 15rem;
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
max-width: 12rem; max-width: 12rem;
@ -75,6 +75,8 @@
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
padding-inline-start: 0; padding-inline-start: 0;
width: 100%;
max-width: none;
} }
} }
} }