Commit fe00554a authored by Guillaume Grossetie's avatar Guillaume Grossetie 🎧
Browse files

Improve hero padding

parent bf5d1f25
......@@ -171,8 +171,17 @@ body {
}
.header > nav {
padding-right: 7rem;
padding-left: 7rem;
max-width: 1440px;
margin: auto;
padding-right: 8vw;
padding-left: 8vw;
}
}
@media screen and (min-width: 1440px) {
.header > nav {
padding-right: 10rem;
padding-left: 6.25rem;
}
}
......@@ -191,6 +200,8 @@ header .logo > img {
.main > .hero {
background-color: var(--brand-color);
color: white;
padding-left: 1.25rem;
padding-right: 1.25rem;
}
@media screen and (min-width: 768px) {
......@@ -198,11 +209,34 @@ header .logo > img {
background-image: url("../img/dot-watermark.svg");
background-repeat: repeat-y;
background-origin: border-box;
padding-left: 3rem;
padding-right: 3rem;
}
}
@media screen and (min-width: 920px) {
.main > .hero {
padding-left: 5rem;
padding-right: 5rem;
}
}
@media screen and (min-width: 1024px) {
.main > .hero {
padding-left: 7rem;
padding-right: 7rem;
}
}
@media screen and (min-width: 1216px) {
.main > .hero {
padding-left: 10vw;
padding-right: 10vw;
}
}
.main > .hero .content {
max-width: 1080px;
max-width: 1020px;
margin: auto;
display: flex;
flex-direction: column;
......@@ -252,7 +286,7 @@ header .logo > img {
font-family: var(--brand-font-secondary);
font-size: 2.25rem;
font-weight: 700;
max-width: 1150px;
max-width: 1120px;
padding-top: 5.5rem;
padding-bottom: 2.15rem;
display: flex;
......@@ -263,13 +297,13 @@ header .logo > img {
@media (min-width: 640px) {
.main h1 {
font-size: 2.75rem;
font-size: 2.7rem;
}
}
@media (min-width: 1024px) {
.main h1 {
font-size: 3.25rem;
font-size: 3rem;
}
.main > .hero p {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment