mirror of https://github.com/ascribe/wp-theme
front page spacing cleanup, ref #4
This commit is contained in:
parent
8202e9764a
commit
ea081446a2
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -483,7 +483,11 @@ header + .chevron-divider {
|
|||
}
|
||||
}
|
||||
.feature-circles {
|
||||
padding: 75px 0 160px;
|
||||
padding: @spacer 0;
|
||||
|
||||
@media (min-width: @tabletWidth) {
|
||||
padding: (@spacer * 2) 0;
|
||||
}
|
||||
|
||||
.column-container {
|
||||
width: calc(~"100% + 100px");
|
||||
|
@ -491,6 +495,15 @@ header + .chevron-divider {
|
|||
.feature-circle {
|
||||
.ttl-columns.column-3;
|
||||
padding-right: 100px;
|
||||
margin-bottom: @spacer;
|
||||
|
||||
&:last-child { margin-bottom: 0 }
|
||||
|
||||
@media (min-width: @tabletWidth) {
|
||||
&:nth-last-child(1),
|
||||
&:nth-last-child(2),
|
||||
&:nth-last-child(3) { margin-bottom: 0 }
|
||||
}
|
||||
}
|
||||
.surround-circle {
|
||||
width: 33%;
|
||||
|
@ -556,6 +569,8 @@ header + .chevron-divider {
|
|||
}
|
||||
.description {
|
||||
.copyTextSmall;
|
||||
|
||||
p { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
|
@ -865,40 +880,29 @@ header + .chevron-divider {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
padding: 175px 0;
|
||||
padding: @spacer 0;
|
||||
background-color: @greyBg;
|
||||
.blueBoxCopy;
|
||||
text-align: center;
|
||||
|
||||
@media (min-width: @tabletWidth) {
|
||||
padding: (@spacer * 2) 0;
|
||||
}
|
||||
|
||||
.blue-copy {
|
||||
background-color: @blueBright;
|
||||
padding: 70px 0 110px;
|
||||
text-align: center;
|
||||
padding: @spacer;
|
||||
|
||||
div {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
@media (min-width: @tabletWidth) {
|
||||
padding: (@spacer * 2);
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
.blueBoxTitle;
|
||||
}
|
||||
|
||||
@media screen and (max-width: @tabletWidth) {
|
||||
padding: 75px 0;
|
||||
}
|
||||
@media screen and (max-width: @phoneWidth) {
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
.blue-copy {
|
||||
padding: 40px 0 60px;
|
||||
font-size: 24px;
|
||||
|
||||
div {
|
||||
line-height: 31px;
|
||||
}
|
||||
.blueBoxTitle;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -908,8 +912,7 @@ header + .chevron-divider {
|
|||
// Component: CTA section
|
||||
//
|
||||
.cta {
|
||||
// TODO: this padding value should come from more general component like .section or global variable
|
||||
padding: 20px 0;
|
||||
padding: @spacer 0;
|
||||
min-height: 300px;
|
||||
text-align: center;
|
||||
background-size: cover;
|
||||
|
@ -921,8 +924,8 @@ header + .chevron-divider {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@media screen and (min-width: @phoneWidth) {
|
||||
padding: 40px 0;
|
||||
@media (min-width: @phoneWidth) {
|
||||
padding: (@spacer * 2) 0;
|
||||
min-height: 520px;
|
||||
background-position: center;
|
||||
}
|
||||
|
@ -943,14 +946,12 @@ header + .chevron-divider {
|
|||
.cta__button {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.galleries-marketplaces {
|
||||
padding: 145px 0 130px;
|
||||
padding: @spacer 0;
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
|
@ -958,11 +959,10 @@ header + .chevron-divider {
|
|||
}
|
||||
img {
|
||||
display:block;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: @tabletWidth) {
|
||||
padding: 75px 0 30px;
|
||||
@media (min-width: @tabletWidth) {
|
||||
padding: (@spacer * 2) 0;
|
||||
|
||||
h1 {
|
||||
font-size: 27px;
|
||||
|
|
|
@ -148,19 +148,30 @@ a {
|
|||
color: @pink;
|
||||
line-height: 29px;
|
||||
}
|
||||
|
||||
.blueBoxTitle {
|
||||
&:extend(.fontRegular);
|
||||
font-size: 43px;
|
||||
font-size: 30px;
|
||||
color: @white;
|
||||
line-height: 52px;
|
||||
text-align: center;
|
||||
|
||||
@media (min-width: @phoneWidth) {
|
||||
font-size: 43px;
|
||||
}
|
||||
}
|
||||
.blueBoxCopy {
|
||||
&:extend(.fontLight);
|
||||
font-size: 43px;
|
||||
font-size: 24px;
|
||||
line-height: 31px;
|
||||
color: @white;
|
||||
line-height: 52px;
|
||||
|
||||
@media (min-width: @phoneWidth) {
|
||||
font-size: 43px;
|
||||
line-height: 52px;
|
||||
}
|
||||
}
|
||||
|
||||
.galleriesPressTitle {
|
||||
&:extend(.fontLight);
|
||||
font-size: 30px;
|
||||
|
|
|
@ -19,3 +19,7 @@
|
|||
@greyText: #595959;
|
||||
@blackish: #1e1e1e;
|
||||
@black: #000;
|
||||
|
||||
|
||||
// SPACING
|
||||
@spacer: 40px;
|
||||
|
|
Loading…
Reference in New Issue