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

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

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