mirror of
https://github.com/ascribe/wp-theme
synced 2024-12-22 17:23:55 +01:00
refactor feature circles components
This commit is contained in:
parent
6a8d8d75a4
commit
58bf1478d5
@ -21,6 +21,9 @@
|
|||||||
|
|
||||||
@import 'ascribe/_grid.less';
|
@import 'ascribe/_grid.less';
|
||||||
@import 'ascribe/_footer.less';
|
@import 'ascribe/_footer.less';
|
||||||
|
|
||||||
|
@import 'ascribe/_feature-circles.less';
|
||||||
|
|
||||||
@import 'vendor/print.less';
|
@import 'vendor/print.less';
|
||||||
|
|
||||||
// HEADER
|
// HEADER
|
||||||
@ -483,147 +486,8 @@ header + .chevron-divider {
|
|||||||
}
|
}
|
||||||
.subtemplate {
|
.subtemplate {
|
||||||
position: relative;
|
position: relative;
|
||||||
h1 {
|
|
||||||
.sectionHeader;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.feature-circles {
|
|
||||||
padding: @spacer 0;
|
|
||||||
|
|
||||||
@media (min-width: @tabletWidth) {
|
|
||||||
padding: (@spacer * 2) 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.column-container {
|
|
||||||
width: calc(~"100% + 100px");
|
|
||||||
}
|
|
||||||
.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%;
|
|
||||||
float:left;
|
|
||||||
padding: 30px;
|
|
||||||
|
|
||||||
.circle {
|
|
||||||
text-align: center;
|
|
||||||
position: relative;
|
|
||||||
border-radius: 100%;
|
|
||||||
background-clip: padding-box;
|
|
||||||
border: 4px solid transparent;
|
|
||||||
&:after {
|
|
||||||
display: block;
|
|
||||||
padding-bottom: 100%;
|
|
||||||
width: 100%;
|
|
||||||
height: 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: white;
|
|
||||||
content: "";
|
|
||||||
border: 2px solid transparent;
|
|
||||||
}
|
|
||||||
&:before {
|
|
||||||
content: '';
|
|
||||||
position:absolute;
|
|
||||||
z-index:-1;
|
|
||||||
left:-2px;right:-2px;
|
|
||||||
top:-2px;bottom:-2px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: linear-gradient(@blueBright,@pink);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.wrapper {
|
|
||||||
display: table;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.inner {
|
|
||||||
display: table-cell;
|
|
||||||
padding: 1em;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
margin-top: 22px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
width: 105px;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto 26px;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
.featureCircleH1;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.description {
|
|
||||||
//.copyTextSmall;
|
|
||||||
|
|
||||||
p { margin-bottom: 0; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 900px) {
|
|
||||||
.surround-circle {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: @tabletWidth) {
|
|
||||||
padding: 75px 0 100px;
|
|
||||||
.column-container {
|
|
||||||
width: calc(~"100% + 50px");
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-circle {
|
|
||||||
padding-right: 50px;
|
|
||||||
}
|
|
||||||
.surround-circle {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.circle {
|
|
||||||
width: 50%;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: @phoneWidth) {
|
|
||||||
padding: 40px 0;
|
|
||||||
|
|
||||||
.description {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
margin: 10px 0 60px;
|
|
||||||
}
|
|
||||||
.surround-circle {
|
|
||||||
h1 {
|
|
||||||
margin:0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: @smallWidth) {
|
|
||||||
.surround-circle {
|
|
||||||
.circle {
|
|
||||||
width: 80%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.case-studies {
|
.case-studies {
|
||||||
height: 685px;
|
height: 685px;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -1025,7 +889,6 @@ header + .chevron-divider {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.team {
|
.team {
|
||||||
.copyTextSmall;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
.column-container {
|
.column-container {
|
||||||
@ -1780,10 +1643,6 @@ article.post {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.feature-circles .surround-circle .inner {
|
|
||||||
padding: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.short-descriptions .short-description h1 {
|
.short-descriptions .short-description h1 {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -39,42 +39,6 @@ a {
|
|||||||
line-height: 37px;
|
line-height: 37px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.h1, h1 {
|
|
||||||
&:extend(.fontLight);
|
|
||||||
font-size: 36px;
|
|
||||||
color: @pink;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
.h2, h2 {
|
|
||||||
&:extend(.fontRegular);
|
|
||||||
font-size: 26px;
|
|
||||||
color: @pink;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
.h3, h3 {
|
|
||||||
&:extend(.fontLight);
|
|
||||||
font-size: 27px;
|
|
||||||
color: @pink;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
.h4, h4 {
|
|
||||||
&:extend(.fontRegular);
|
|
||||||
font-size: 26px;
|
|
||||||
color: @black;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
.h5, h5 {
|
|
||||||
&:extend(.fontLight);
|
|
||||||
font-size: 26px;
|
|
||||||
color: @black;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
.h6, h6 {
|
|
||||||
&:extend(.fontRegular);
|
|
||||||
color: @pink;
|
|
||||||
font-size: 15px;
|
|
||||||
line-height: 19px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// SPECIALIZED TEXT STYLES
|
// SPECIALIZED TEXT STYLES
|
||||||
.heroText {
|
.heroText {
|
||||||
@ -97,14 +61,6 @@ a {
|
|||||||
color: @white;
|
color: @white;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
.featureCircleH1 {
|
|
||||||
&:extend(.fontLight);
|
|
||||||
font-size: 20px;
|
|
||||||
color: @pink;
|
|
||||||
letter-spacing: 1.11px;
|
|
||||||
line-height: 24px;
|
|
||||||
margin-bottom: 22px;
|
|
||||||
}
|
|
||||||
.caseStudyText {
|
.caseStudyText {
|
||||||
&:extend(.fontRegular);
|
&:extend(.fontRegular);
|
||||||
font-size: 23px;
|
font-size: 23px;
|
||||||
|
|||||||
90
assets/less/ascribe/_feature-circles.less
Normal file
90
assets/less/ascribe/_feature-circles.less
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
|
||||||
|
.feature-circles {
|
||||||
|
padding-top: @spacer;
|
||||||
|
|
||||||
|
@media (min-width: @tabletWidth) {
|
||||||
|
padding-top: (@spacer * 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Feature circle component
|
||||||
|
//
|
||||||
|
.feature-circle {
|
||||||
|
&:extend(.text-center);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-circle__image {
|
||||||
|
width: 50%;
|
||||||
|
max-width: 200px;
|
||||||
|
margin: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-circle__title {
|
||||||
|
font-size: @font-size-h4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-circle__description {}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Surround circle component
|
||||||
|
//
|
||||||
|
.surround-circle {
|
||||||
|
&:extend(.text-center);
|
||||||
|
|
||||||
|
.feature-circle__title {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-circle__description {
|
||||||
|
&:extend(.small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle {
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 100%;
|
||||||
|
background-clip: padding-box;
|
||||||
|
&:after {
|
||||||
|
display: block;
|
||||||
|
padding-bottom: 100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: white;
|
||||||
|
content: "";
|
||||||
|
border: 2px solid transparent;
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
position:absolute;
|
||||||
|
z-index:-1;
|
||||||
|
left:-2px;right:-2px;
|
||||||
|
top:-2px;bottom:-2px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(@blueBright,@pink);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.wrapper {
|
||||||
|
display: table;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.inner {
|
||||||
|
display: table-cell;
|
||||||
|
padding: 1em;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -37,7 +37,7 @@
|
|||||||
|
|
||||||
.row {
|
.row {
|
||||||
.clearfix; // for legacy float usage reasons
|
.clearfix; // for legacy float usage reasons
|
||||||
max-width: @screen-lg-min;
|
max-width: (@screen-lg-min + (@gutter-space * 2));
|
||||||
margin: auto;
|
margin: auto;
|
||||||
padding-left: @gutter-space;
|
padding-left: @gutter-space;
|
||||||
padding-right: @gutter-space;
|
padding-right: @gutter-space;
|
||||||
|
|||||||
@ -27,7 +27,7 @@ body {
|
|||||||
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 0, "dlig" 1;
|
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 0, "dlig" 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Text styles
|
// Legacy Text styles
|
||||||
.copyText {
|
.copyText {
|
||||||
font-family: @font-family-base;
|
font-family: @font-family-base;
|
||||||
font-size: @font-size-base;
|
font-size: @font-size-base;
|
||||||
@ -66,6 +66,44 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Headings
|
||||||
|
//
|
||||||
|
h1, h2, h3, h4, h5, h6,
|
||||||
|
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||||
|
font-family: @headings-font-family;
|
||||||
|
font-weight: @headings-font-weight;
|
||||||
|
line-height: @headings-line-height;
|
||||||
|
color: @headings-color;
|
||||||
|
|
||||||
|
// remove old style numerals
|
||||||
|
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 0, "dlig" 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h1, h1 {
|
||||||
|
font-size: @font-size-h1;
|
||||||
|
}
|
||||||
|
.h2, h2 {
|
||||||
|
font-size: @font-size-h2;
|
||||||
|
}
|
||||||
|
.h3, h3 {
|
||||||
|
font-size: @font-size-h3;
|
||||||
|
}
|
||||||
|
.h4, h4 {
|
||||||
|
font-size: @font-size-h4;
|
||||||
|
color: @black;
|
||||||
|
}
|
||||||
|
.h5, h5 {
|
||||||
|
color: @font-size-h5;
|
||||||
|
color: @black;
|
||||||
|
}
|
||||||
|
.h6, h6 {
|
||||||
|
font-size: @font-size-h6;
|
||||||
|
color: @black;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Reset fonts for relevant elements
|
// Reset fonts for relevant elements
|
||||||
input,
|
input,
|
||||||
button,
|
button,
|
||||||
@ -90,12 +128,11 @@ p {
|
|||||||
small,
|
small,
|
||||||
.small {
|
.small {
|
||||||
font-size: @font-size-small;
|
font-size: @font-size-small;
|
||||||
font-weight: @font-weight-normal;
|
line-height: @line-height-small;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mini {
|
.mini {
|
||||||
font-size: @font-size-mini;
|
font-size: @font-size-mini;
|
||||||
font-weight: @font-weight-normal;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.large {
|
.large {
|
||||||
|
|||||||
@ -25,12 +25,19 @@
|
|||||||
// Typography
|
// Typography
|
||||||
//
|
//
|
||||||
@font-size-base: 18px;
|
@font-size-base: 18px;
|
||||||
@font-size-small: 14px;
|
@font-size-small: 16px;
|
||||||
@font-size-mini: 11px;
|
@font-size-mini: 11px;
|
||||||
@font-size-large: 24px;
|
@font-size-large: 24px;
|
||||||
|
|
||||||
|
@font-size-h1: 36px;
|
||||||
|
@font-size-h2: 28px;
|
||||||
|
@font-size-h3: 26px;
|
||||||
|
@font-size-h4: 22px;
|
||||||
|
@font-size-h5: @font-size-base;
|
||||||
|
@font-size-h6: @font-size-small;
|
||||||
|
|
||||||
@line-height-base: 24px;
|
@line-height-base: 24px;
|
||||||
@line-height-small: 18px;
|
@line-height-small: 20px;
|
||||||
|
|
||||||
@text-color: @blueDeep;
|
@text-color: @blueDeep;
|
||||||
|
|
||||||
@ -45,6 +52,12 @@
|
|||||||
@link-color: @blueBright;
|
@link-color: @blueBright;
|
||||||
@link-hover-color: @pink;
|
@link-hover-color: @pink;
|
||||||
|
|
||||||
|
|
||||||
|
@headings-font-family: @font-family-base;
|
||||||
|
@headings-font-weight: @font-weight-base;
|
||||||
|
@headings-line-height: 1.2;
|
||||||
|
@headings-color: @pink;
|
||||||
|
|
||||||
//
|
//
|
||||||
// Spacing
|
// Spacing
|
||||||
//
|
//
|
||||||
|
|||||||
@ -122,15 +122,15 @@ class Subtemplate {
|
|||||||
$icon = get_sub_field('icon')['url'];
|
$icon = get_sub_field('icon')['url'];
|
||||||
$description = get_sub_field('description');
|
$description = get_sub_field('description');
|
||||||
|
|
||||||
$featureCircles .= "<article class='feature-circle'>
|
$featureCircles .= "<article class='grid__col feature-circle'>
|
||||||
<img src='{$icon}' alt='{$title} Icon'>
|
<img class='feature-circle__image' src='{$icon}' alt='{$title} Icon'>
|
||||||
<h1>{$title}</h1>
|
<h1 class='feature-circle__title'>{$title}</h1>
|
||||||
<div class='description'>{$description}</div>
|
<div class='feature-circle__description'>{$description}</div>
|
||||||
</article>";
|
</article>";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$result = "<section class='subtemplate feature-circles'><div class='centered-header'><div class='column-container'>{$featureCircles}</div></div></section>";
|
$result = "<section class='subtemplate feature-circles row'><div class='grid grid--gutters grid--full grid-small--half grid-medium--third'>{$featureCircles}</div></section>";
|
||||||
|
|
||||||
return $result;
|
return $result;
|
||||||
}
|
}
|
||||||
@ -144,13 +144,13 @@ class Subtemplate {
|
|||||||
$title = get_sub_field('title');
|
$title = get_sub_field('title');
|
||||||
$description = get_sub_field('description');
|
$description = get_sub_field('description');
|
||||||
|
|
||||||
$featureCircles .= "<article class='surround-circle'>
|
$featureCircles .= "<article class='grid__col surround-circle'>
|
||||||
<div class='circle'>
|
<div class='circle'>
|
||||||
<div class='container'>
|
<div class='container'>
|
||||||
<div class='wrapper'>
|
<div class='wrapper'>
|
||||||
<div class='inner'>
|
<div class='inner'>
|
||||||
<h1>{$title}</h1>
|
<h1 class='feature-circle__title'>{$title}</h1>
|
||||||
<div class='description'>{$description}</div>
|
<div class='feature-circle__description'>{$description}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -159,7 +159,7 @@ class Subtemplate {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$result = "<section class='subtemplate feature-circles'><div class='centered-header'>{$featureCircles}</div></section>";
|
$result = "<section class='subtemplate feature-circles row'><div class='grid grid--gutters grid--full grid-small--third'>{$featureCircles}</div></section>";
|
||||||
|
|
||||||
return $result;
|
return $result;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user