ascribe
/
wp-theme
mirror of https://github.com/ascribe/wp-theme
1
0
Fork 0
Code Issues Releases Wiki Activity

refactor feature circles components

This commit is contained in:
Matthias Kretschmann 2016-01-16 15:18:23 +01:00
parent 6a8d8d75a4
commit 58bf1478d5
7 changed files with 159 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
assets/less/ascribe.less
View File

@ -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;
}

44
assets/less/ascribe/_branding.less
View File

@ -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
View 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;
}
}

4
assets/less/ascribe/_grid.less
View File

@ -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 {

43
assets/less/ascribe/_typography.less
View File

@ -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 {

17
assets/less/ascribe/_variables.less
View File

@ -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
//

18
controller/classes/Subtemplate.php
View File

@ -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;
}