mirror of
https://github.com/ascribe/wp-theme
synced 2024-12-22 09:13:38 +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/_footer.less';
|
||||
|
||||
@import 'ascribe/_feature-circles.less';
|
||||
|
||||
@import 'vendor/print.less';
|
||||
|
||||
// HEADER
|
||||
@ -483,147 +486,8 @@ header + .chevron-divider {
|
||||
}
|
||||
.subtemplate {
|
||||
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 {
|
||||
height: 685px;
|
||||
position: relative;
|
||||
@ -1025,7 +889,6 @@ header + .chevron-divider {
|
||||
}
|
||||
}
|
||||
.team {
|
||||
.copyTextSmall;
|
||||
text-align: center;
|
||||
|
||||
.column-container {
|
||||
@ -1780,10 +1643,6 @@ article.post {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature-circles .surround-circle .inner {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.short-descriptions .short-description h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@ -39,42 +39,6 @@ a {
|
||||
line-height: 37px;
|
||||
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
|
||||
.heroText {
|
||||
@ -97,14 +61,6 @@ a {
|
||||
color: @white;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.featureCircleH1 {
|
||||
&:extend(.fontLight);
|
||||
font-size: 20px;
|
||||
color: @pink;
|
||||
letter-spacing: 1.11px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.caseStudyText {
|
||||
&:extend(.fontRegular);
|
||||
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 {
|
||||
.clearfix; // for legacy float usage reasons
|
||||
max-width: @screen-lg-min;
|
||||
max-width: (@screen-lg-min + (@gutter-space * 2));
|
||||
margin: auto;
|
||||
padding-left: @gutter-space;
|
||||
padding-right: @gutter-space;
|
||||
@ -83,7 +83,7 @@
|
||||
//
|
||||
// Gutters
|
||||
//
|
||||
.grid--gutters{
|
||||
.grid--gutters {
|
||||
margin: -(@gutter-space) 0 @gutter-space (-(@gutter-space));
|
||||
|
||||
> .grid__col {
|
||||
|
||||
@ -27,7 +27,7 @@ body {
|
||||
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 {
|
||||
font-family: @font-family-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
|
||||
input,
|
||||
button,
|
||||
@ -90,12 +128,11 @@ p {
|
||||
small,
|
||||
.small {
|
||||
font-size: @font-size-small;
|
||||
font-weight: @font-weight-normal;
|
||||
line-height: @line-height-small;
|
||||
}
|
||||
|
||||
.mini {
|
||||
font-size: @font-size-mini;
|
||||
font-weight: @font-weight-normal;
|
||||
}
|
||||
|
||||
.large {
|
||||
|
||||
@ -25,12 +25,19 @@
|
||||
// Typography
|
||||
//
|
||||
@font-size-base: 18px;
|
||||
@font-size-small: 14px;
|
||||
@font-size-small: 16px;
|
||||
@font-size-mini: 11px;
|
||||
@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-small: 18px;
|
||||
@line-height-small: 20px;
|
||||
|
||||
@text-color: @blueDeep;
|
||||
|
||||
@ -45,6 +52,12 @@
|
||||
@link-color: @blueBright;
|
||||
@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
|
||||
//
|
||||
|
||||
@ -122,15 +122,15 @@ class Subtemplate {
|
||||
$icon = get_sub_field('icon')['url'];
|
||||
$description = get_sub_field('description');
|
||||
|
||||
$featureCircles .= "<article class='feature-circle'>
|
||||
<img src='{$icon}' alt='{$title} Icon'>
|
||||
<h1>{$title}</h1>
|
||||
<div class='description'>{$description}</div>
|
||||
$featureCircles .= "<article class='grid__col feature-circle'>
|
||||
<img class='feature-circle__image' src='{$icon}' alt='{$title} Icon'>
|
||||
<h1 class='feature-circle__title'>{$title}</h1>
|
||||
<div class='feature-circle__description'>{$description}</div>
|
||||
</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;
|
||||
}
|
||||
@ -144,13 +144,13 @@ class Subtemplate {
|
||||
$title = get_sub_field('title');
|
||||
$description = get_sub_field('description');
|
||||
|
||||
$featureCircles .= "<article class='surround-circle'>
|
||||
$featureCircles .= "<article class='grid__col surround-circle'>
|
||||
<div class='circle'>
|
||||
<div class='container'>
|
||||
<div class='wrapper'>
|
||||
<div class='inner'>
|
||||
<h1>{$title}</h1>
|
||||
<div class='description'>{$description}</div>
|
||||
<h1 class='feature-circle__title'>{$title}</h1>
|
||||
<div class='feature-circle__description'>{$description}</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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user