promiset/lapikud.github.io
1
0
Fork 0
forked from lapikud/lapikud.github.io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Center homepage columns for mobile view (#96)

Browse Source 
* Fix CRLF fuckery

* Center homepage columns for mobile view
This commit is contained in:
siinus
2024-03-15 08:05:56 +02:00
committed by GitHub
parent 675e19afb8
commit 38bfe32e23
1 changed files with 104 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
_sass/home.scss
View File

@@ -1,103 +1,104 @@
.home { .home {
@media (max-width : 900px) { @media (max-width : 900px) {
h1 { h1 {
font-size : 3.6rem; font-size : 3.6rem;
} }
} }
.logo_container { .logo_container {
display : flex; display : flex;
flex-direction : row; flex-direction : row;
flex-wrap : wrap; flex-wrap : wrap;
align-items : center; align-items : center;
justify-content : center; justify-content : center;
text-align : center; text-align : center;
margin : 4rem 0; margin : 4rem 0;
#logo { #logo {
max-width : 60rem; max-width : 60rem;
width : 100%; width : 100%;
padding : 50px 90px; padding : 50px 90px;
} }
} }
.lg-icon-container { .lg-icon-container {
justify-content : flex-start; justify-content : flex-start;
align-content : flex-start; align-content : flex-start;
align-items : flex-start; align-items : flex-start;
margin : 0; margin : 0;
margin-top : 4rem; margin-top : 4rem;
display:flex; display:flex;
a { a {
flex-direction : row; flex-direction : row;
justify-content : center; justify-content : center;
align-items : center; align-items : center;
align-content : flex-start; align-content : flex-start;
text-align : left; text-align : center;
flex : 2; margin : auto;
flex : 2;
.lg-icon {
fill : #f0941d; .lg-icon {
width : 10rem; fill : #f0941d;
height : 10rem; width : 10rem;
flex : 1; height : 10rem;
} flex : 1;
}
.regularText {
color: #1e1e1e; .regularText {
} color: #1e1e1e;
} }
}
@media (min-width : 40.0rem) {
.column { @media (min-width : 40.0rem) {
flex-direction : column; .column {
justify-content : flex-start; flex-direction : column;
align-items : center; justify-content : flex-start;
align-content : flex-start; align-items : center;
text-align : center; align-content : flex-start;
} text-align : center;
} }
} }
.description { }
margin-top : 1em; .description {
} margin-top : 1em;
@media (min-width : 40.0rem) { }
.description { @media (min-width : 40.0rem) {
margin-top : 3em; .description {
} margin-top : 3em;
} }
}
.partners {
#partners-container { .partners {
display : flex; #partners-container {
flex-wrap : wrap; display : flex;
justify-content : space-evenly; flex-wrap : wrap;
align-items : center; justify-content : space-evenly;
align-items : center;
a {
color : #1e1e1e; a {
img { color : #1e1e1e;
max-width : 300px; img {
max-height : 150px; max-width : 300px;
width : 100%; max-height : 150px;
height : auto; width : 100%;
object-fit : scale-down; height : auto;
margin : 1rem auto; object-fit : scale-down;
} margin : 1rem auto;
h4 { }
text-align : center; h4 {
} text-align : center;
} }
} }
}
@media (max-width : 900px) {
#partners-container { @media (max-width : 900px) {
#partners-container {
flex-direction : column
} flex-direction : column
} }
} }
}
}
}