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

🐛 fix: improve responsiveness of home banner

Browse Source
This commit is contained in:
welpo 2023-02-05 02:06:54 +01:00
parent 8b28ea75d6
commit 1f11e8480e
2 changed files with 41 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
sass/parts/_cards.scss
View File

@ -37,39 +37,39 @@
overflow: hidden; overflow: hidden;
} }
@media all and (max-width:720px) { @media all and (max-width: 720px) {
.cards { .cards {
gap: 18px; gap: 18px;
} }
} }
.bloglist-table-row{ .bloglist-table-row {
padding:2%; padding: 2%;
background-color:var(--navbar-color); background-color: var(--navbar-color);
border-radius: 5px; border-radius: 5px;
transition: 300ms; transition: 300ms;
width: 28%; width: 28%;
margin-right:1%; margin-right: 1%;
margin-top:3%; margin-top: 1%;
} }
.bloglist-container{ .bloglist-container {
display:flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.bloglist-table-row:hover{ .bloglist-table-row:hover {
box-shadow: 10px 10px 0px var(--border-color); box-shadow: 10px 10px 0px var(--border-color);
} }
.bloglist-links{ .bloglist-links {
text-decoration:none; text-decoration: none;
} }
.bloglist-table-row-data{ .bloglist-table-row-data {
padding:10px; padding: 10px;
} }
.bloglist-table-row-date{ .bloglist-table-row-date {
font-size:12px; font-size: 12px;
} }
@media only screen and (max-width:600px) { @media only screen and (max-width: 600px) {
.bloglist-table-row{ .bloglist-table-row {
width:100%; width: 100%;
} }
} }

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

@ -11,27 +11,32 @@
width: 22%; width: 22%;
overflow: hidden; overflow: hidden;
border-radius: 10px; border-radius: 10px;
text-align: center;
} }
#home-banner-text { #home-banner-text {
width: 78%; width: 78%;
margin-bottom: 30px; margin-bottom: 30px;
font-size: 1.875rem; font-size: 1.875rem;
line-height: 3rem; line-height: 3rem;
color: var(--accent-color); color: var(--accent-color);
} }
#banner-home-subtitle { #banner-home-subtitle {
width: 95%; width: 95%;
padding-right: 5%; padding-right: 5%;
font-size: 1rem; font-size: 1rem;
font-weight: 250; font-weight: 250;
line-height: 1.75rem; line-height: 1.75rem;
color: var(--text-color); color: var(--text-color);
} }
.banner-home-img { .banner-home-img {
border-radius: 50%; border-radius: 50%;
max-height: 80%; max-width: 15rem;
max-height: 15rem;
width: 100%;
height: auto;
border: none; border: none;
} }
@ -41,13 +46,16 @@
margin: 0 auto; margin: 0 auto;
} }
.banner-home-img {
max-width: 12rem;
max-height: 12rem;
}
.image-container-home { .image-container-home {
width: 95%; width: 95%;
height: 50vh;
} }
#home-banner-text { #home-banner-text {
width: 95%; width: 95%;
} }
} }