ascribe/wp-theme
1
0
Fork 0
mirror of https://github.com/ascribe/wp-theme synced 2025-01-03 10:25:08 +01:00
Code Issues Releases Wiki Activity

refactor all subtemplates to use new grid system & rows

Browse Source
This commit is contained in:
Matthias Kretschmann 2016-01-16 17:29:27 +01:00
parent 58bf1478d5
commit 6a0cbfc0de
14 changed files with 470 additions and 631 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

511
assets/less/ascribe.less
View File

@ -22,7 +22,10 @@
@import 'ascribe/_grid.less'; @import 'ascribe/_grid.less';
@import 'ascribe/_footer.less'; @import 'ascribe/_footer.less';
@import 'ascribe/_hero.less';
@import 'ascribe/_subtemplates.less';
@import 'ascribe/_feature-circles.less'; @import 'ascribe/_feature-circles.less';
@import 'ascribe/_team.less';
@import 'vendor/print.less'; @import 'vendor/print.less';
@ -35,170 +38,7 @@ header {
header + .chevron-divider { header + .chevron-divider {
height: 175px; height: 175px;
} }
.page-template-template-tour header {
height: 815px;
padding:0;
padding-top: 30px;
margin-bottom: @chevronOffsetHeader;
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
overflow: visible;
.sticky {
padding: 15px 0;
width: 100%;
position: fixed;
background-color: fade(@black,0);
.transition(all);
&.stuck {
background-color: fade(@black,100);
z-index:800;
ul {
&.active {
background-color: @black;
padding-bottom: 10px;
}
}
}
}
nav {
float: left;
margin-top: 9px;
.tourNavText;
ul {
padding: 0 35px;
list-style: none;
position: absolute;
&.active {
li {
display: block;
&.current-menu-item {
a {
&:after {
transform: rotate(180deg);
}
}
}
}
}
li {
display: none;
text-align: right;
&.current-menu-item {
display: block;
a {
position: relative;
font-size: 25px;
&:before {
content: 'for ';
display: inline-block;
margin-right: 6px;
}
&:after {
content: '';
background-image: url(../img/arrow.png);
background-repeat: no-repeat;
width: 10px;
height: 8px;
display: inline-block;
position: absolute;
top: 10px;
right: -25px;
font-size: 15px;
}
}
}
a {
width: 100%;
font-size: 20px;
}
}
}
}
.description {
clear: both;
width: 80%;
margin: 190px auto 0;
text-align: center;
}
h1 {
.heroText;
margin-bottom: 160px;
}
.app-links {
color: @white;
margin-top: 10px;
a {
color: @white;
&:hover {
color: @pink;
}
}
}
.chevron-divider {
position: absolute;
bottom: -@chevronOffsetHeader;
height: 150px;
}
@media screen and (max-width: @tabletWidth) {
height: 600px;
h1 {
margin-bottom: 80px;
}
.description {
margin: 160px auto 0;
font-size: 34px;
width: 100%;
}
}
@media screen and (max-width: @phoneWidth) {
padding-top: 10px;
.description {
margin: 90px auto 0;
font-size: 34px;
width: 100%;
}
h1 {
font-size:26px;
line-height: 33px;
margin-bottom:0;
}
.button {
position: absolute;
bottom: 150px;
left: 50%;
transform: translateX(-50%);
}
.sticky {
position: absolute;
&.stuck {
background-color: fade(@black,0);
}
}
.app-links {
margin-top:5px;
}
}
}
.page-template-template-companywhite header, .page-template-template-companywhite header,
.page-template-template-general header, .page-template-template-general header,
.page-template-default header, .page-template-default header,
@ -469,8 +309,8 @@ header + .chevron-divider {
// MAIN // MAIN
.above-chevron { .above-chevron {
margin-top: -100px; margin-top: -160px;
margin-bottom: -80px; margin-bottom: -160px;
position: relative; position: relative;
z-index: 3; z-index: 3;
} }
@ -480,12 +320,6 @@ header + .chevron-divider {
font-size: 34px; font-size: 34px;
line-height: 41px; line-height: 41px;
text-align: center; text-align: center;
.centered-content-padding {
min-height: 500px;
}
}
.subtemplate {
position: relative;
} }
.case-studies { .case-studies {
@ -516,11 +350,6 @@ header + .chevron-divider {
position: relative; position: relative;
left: 0px; left: 0px;
} }
.centered-header {
position: relative;
width: 100%;
height: 100%;
}
.description { .description {
white-space: normal; white-space: normal;
width: 60%; width: 60%;
@ -662,9 +491,7 @@ header + .chevron-divider {
td { td {
text-align: center; text-align: center;
} }
.centered-content {
padding:0;
}
} }
@media screen and (max-width: @phoneWidth) { @media screen and (max-width: @phoneWidth) {
.new { .new {
@ -748,28 +575,36 @@ header + .chevron-divider {
} }
.blue-box { .blue-box {
&:extend(.text-center);
padding: @spacer 0; padding: @spacer 0;
background-color: @greyBg; background-color: @greyBg;
.blueBoxCopy;
text-align: center;
@media (min-width: @tabletWidth) { @media (min-width: @tabletWidth) {
padding: (@spacer * 2) 0; padding: (@spacer * 2) 0;
} }
.blue-copy { &,
background-color: @blueBright; h1 {
text-align: center; color: #fff;
padding: @spacer; font-size: 180%;
line-height: 120%;
margin-top: 0;
}
@media (min-width: @tabletWidth) { .button {
padding: (@spacer * 2); margin-top: (@spacer/2)
} }
h1 { > .row { background: transparent; }
.blueBoxTitle; }
margin-top: 0;
} .blue-copy {
margin: auto;
background-color: @blueBright;
padding: @spacer;
@media (@screen-sm) {
padding: (@spacer * 2);
} }
} }
@ -888,65 +723,7 @@ header + .chevron-divider {
} }
} }
} }
.team {
text-align: center;
.column-container {
text-align: left;
}
.intro {
margin-bottom: 60px;
text-align: left;
}
p {
margin:0;
}
&.tour-page {
padding: 70px 0;
background-color: @greyBg;
}
@media screen and (max-width: @tabletWidth) {
.intro {
text-align: center;
}
}
}
//
// Component: Team Member
//
.team-member {
.ttl-columns.column-3;
text-align: center;
margin-bottom: 40px;
img {
border-radius: 100%;
}
h1 {
.teamName;
margin-top: 20px;
margin-bottom:0;
}
h2 {
.copyText;
margin-top:2px;
}
@media screen and (max-width: @phoneWidth) {
width: 50%;
}
}
.page-template-template-companywhite .team {
@media screen and (max-width: @tabletWidth) {
.intro {
text-align: left;
}
}
}
.faq { .faq {
.copyTextMedium; .copyTextMedium;
dl,dt,dd { dl,dt,dd {
@ -983,38 +760,28 @@ header + .chevron-divider {
} }
} }
} }
.values {
padding-bottom: 150px;
.column-container {
width: calc(~"100% + 175px");
}
.value {
.ttl-columns.column-2;
.copyText;
padding-right: 175px;
h1 {
&:extend(.fontRegular);
color: @black;
font-size: 25px;
line-height: 1;
margin-bottom:0;
text-align: left;
}
.value {
h1 {
&:extend(.fontRegular);
color: @black;
font-size: 25px;
line-height: 1;
margin-top: 0;
text-align: left;
} }
p { margin-bottom: 0 }
} }
.careers { .careers {
&:extend(.text-center);
background-color: @greyBg; background-color: @greyBg;
text-align: center;
padding: 90px 0 140px; > .row { background: none; }
margin-bottom:75px;
a { a {
&:extend(.fontLight); &:extend(.h3);
color: @black; color: @black;
font-size: 27px;
line-height: 32px;
&:hover { &:hover {
color: @pink; color: @pink;
@ -1029,14 +796,6 @@ header + .chevron-divider {
} }
} }
.contact { .contact {
.form {
.ttl-columns.columnThreeQuarters;
.copyText;
}
.contact-points {
.ttl-columns.column-4;
}
label { label {
.copyTextSmall; .copyTextSmall;
@ -1065,7 +824,7 @@ header + .chevron-divider {
width: auto; width: auto;
} }
.contact-point { .contact-point {
.copyText;
h1 { h1 {
&:extend(.fontRegular); &:extend(.fontRegular);
font-size: 19px; font-size: 19px;
@ -1249,101 +1008,42 @@ header + .chevron-divider {
} }
} }
} }
//
// Component: Short Descriptions
//
.short-descriptions { .short-descriptions {
padding-top: 35px; &:extend(.text-center);
text-align: center; padding-bottom: 0;
.copyText;
.centered-content {
& > h1 {
margin-bottom:0;
}
}
.short-description {
.ttl-columns.column-3;
.copyText;
margin-bottom: 40px;
h1 {
font-size: 22px;
color: @pink;
}
}
@media screen and (max-width: @phoneWidth) {
.short-description {
margin-bottom:0;
}
}
} }
.short-description {
p { margin-bottom: 0 }
}
.short-description__title {
font-size: @font-size-h4;
margin-top: 0;
}
.short-description__description {
&:extend(.small);
}
.content-boxed { .content-boxed {
background-color: @greyBg; background-color: @greyBg;
padding-top: 50px; padding-top: 50px;
.centered-content-padding {
background-color: @greyBg;
}
.centered-content {
& > div {
border: 1px solid @pink;
background-color: @white;
padding: 60px 10%;
text-align: center;
.copyText;
& > ul {
text-align: left;
list-style: none;
li {
margin-bottom: 35px;
}
ul {
margin-left: 10%;
text-align: left;
list-style-type: disc;
li {
margin-bottom:0;
}
}
}
}
p {
max-width: 640px;
}
img {
margin: 30px 0;
}
}
.centered-content > div,
.existing-new .content {
font-size: 14px;
}
@media screen and (max-width: @phoneWidth) {
.centered-content {
& > div {
border:0;
padding: 60px 2%;
.copyTextSmall;
}
}
}
} }
.existing-new { .existing-new {
background-color: @greyBg; background-color: @greyBg;
padding: 90px 0 120px; padding: 90px 0 120px;
.top-tab { > .row { background: none; }
.ttl-columns.column-2;
.top-tab {
div { div {
padding: 25px 0; padding: 25px 0;
text-align: center; text-align: center;
@ -1371,7 +1071,6 @@ header + .chevron-divider {
border: 1px solid @pink; border: 1px solid @pink;
padding: 60px 10%; padding: 60px 10%;
margin-top: -1px; margin-top: -1px;
.copyText;
&.active { &.active {
display: block; display: block;
@ -1397,67 +1096,29 @@ header + .chevron-divider {
.button { .button {
&:extend(.button.pink); &:extend(.button.pink);
} }
@media screen and (max-width: @phoneWidth) {
.top-tab {
display: none;
}
.content {
display: block;
}
}
} }
.page-template-template-tour .subtemplate.content { .page-template-template-tour .subtemplate.content {
.copyText;
text-align: center; text-align: center;
&.grey { &.grey {
background-color: @greyBg; background-color: @greyBg;
.centered-content-padding {
background-color: @greyBg;
}
.centered-content {
background-color: @greyBg;
}
h1 { h1 {
margin-top: 55px; margin-top: 55px;
} }
} }
} }
.get-started { .get-started {
padding-top: 70px; &:extend(.text-center);
padding-bottom: 230px;
.copyText;
.column-container { h1:not(.subtemplate__title) {
width: calc(~"100% + 90px"); font-size: @font-size-h3;
}
.methods-of-use {
.ttl-columns.column-2;
padding-right: 90px;
text-align: center;
.copyText;
h1 {
.h2;
text-transform: uppercase;
font-weight: 200;
}
p {
width: 90%;
margin: 0 auto;
}
}
@media screen and (max-width: @phoneWidth) {
padding-bottom:100px;
.description {
text-align: center;
}
} }
} }
.pricing { .pricing {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
@ -1608,19 +1269,9 @@ article.post {
} }
} }
.single-post { .single-post {
.entry {
.copyText;
width: 80%;
}
.article-post { .article-post {
border-bottom:0; border-bottom:0;
} }
@media screen and (max-width: 500px) {
.entry {
width: 100%;
}
}
} }
// ASCRIBE CHANGES // ASCRIBE CHANGES
@ -1643,18 +1294,6 @@ article.post {
text-align: center; text-align: center;
} }
.short-descriptions .short-description h1 {
font-size: 20px;
}
.short-descriptions .short-description {
font-size: 15px;
}
.subtemplate h1 {
margin: 20px 0;
}
.blog-column { .blog-column {
width: auto; width: auto;
} }

8
assets/less/ascribe/_buttons.less
View File

@ -1,16 +1,20 @@
.button { .button {
&:extend(.fontRegular); &:extend(.fontRegular);
display: inline-block; display: block;
padding: (@spacer / 2) @spacer; padding: (@spacer / 2) @spacer;
border: 1px solid; border: 1px solid;
font-size: 22px; font-size: 22px;
line-height: 26px; line-height: 26px;
text-decoration: none; text-decoration: none;
min-width: 265px;
text-align: center; text-align: center;
transition: .2s ease-out; transition: .2s ease-out;
@media (@screen-sm) {
display: inline-block;
min-width: 265px;
}
&.blue { &.blue {
@bgColor: @blueBright; @bgColor: @blueBright;
color: @white; color: @white;

8
assets/less/ascribe/_feature-circles.less
View File

@ -1,14 +1,8 @@
.feature-circles { .feature-circles {
padding-top: @spacer; padding-bottom: 0;
@media (min-width: @tabletWidth) {
padding-top: (@spacer * 2);
}
} }
// //
// Feature circle component // Feature circle component
// //

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

@ -37,10 +37,24 @@
.row { .row {
.clearfix; // for legacy float usage reasons .clearfix; // for legacy float usage reasons
max-width: (@screen-lg-min + (@gutter-space * 2)); max-width: @screen-lg-min;
margin: auto; margin: auto;
padding-left: @gutter-space; padding-left: (@gutter-space/4);
padding-right: @gutter-space; padding-right: (@gutter-space/4);
@media (@screen-sm) {
padding-left: (@gutter-space/2);
padding-right: (@gutter-space/2);
}
@media (@screen-md) {
padding-left: @gutter-space;
padding-right: @gutter-space;
}
}
// more narrow row for all long text content
.row--content {
max-width: (@screen-md-min - @gutter-space);
} }

42
assets/less/ascribe/_helpers.less
View File

@ -23,34 +23,11 @@
} }
} }
// CENTERED // CENTERED
// Apply this class to an element to center it responsively in a container // Apply this class to an element to center it responsively in a container
@centeredpadding: 10px; @centeredpadding: 10px;
.centered-header {
.clearfix;
max-width: 1120px + 2*@centeredpadding;
padding: 0 @centeredpadding;
width: 100%;
margin: 0 auto;
}
.centered-prodFeat {
.clearfix;
max-width: 930px + 2*@centeredpadding;
padding: 0 @centeredpadding;
width: 100%;
margin: 0 auto;
}
.centered-content {
.clearfix;
max-width: 770px + 2*@centeredpadding;
padding: 0 @centeredpadding;
width: 100%;
margin: 0 auto;
}
.centered-pricing { .centered-pricing {
.clearfix; .clearfix;
max-width: 880px + 2*@centeredpadding; max-width: 880px + 2*@centeredpadding;
@ -59,15 +36,6 @@
margin: 0 auto; margin: 0 auto;
} }
.centered-content-padding {
.clearfix;
max-width: 950px;
padding: 0 @centeredpadding 50px;
width: 100%;
margin: 0 auto;
background-color: @white;
}
.centered-categories { .centered-categories {
.clearfix; .clearfix;
max-width: 1000px; max-width: 1000px;
@ -75,14 +43,6 @@
margin: 0 auto; margin: 0 auto;
} }
.centered-footer {
.clearfix;
max-width: 650px + 2*@centeredpadding;
padding: 0 @centeredpadding;
width: 100%;
margin: 0 auto;
}
// GENERAL LIST // GENERAL LIST
// TAKES AWAY PADDING AND LIST STYLE // TAKES AWAY PADDING AND LIST STYLE
ul, ol { ul, ol {

159
assets/less/ascribe/_hero.less Normal file
View File

@ -0,0 +1,159 @@
.hero {
height: 815px;
padding:0;
padding-top: 30px;
margin-bottom: @chevronOffsetHeader;
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
overflow: visible;
.sticky {
padding: 15px 0;
width: 100%;
position: fixed;
background-color: fade(@black,0);
.transition(all);
&.stuck {
background-color: fade(@black,100);
z-index:800;
ul {
&.active {
background-color: @black;
padding-bottom: 10px;
}
}
}
}
nav {
float: left;
margin-top: 9px;
.tourNavText;
ul {
padding: 0 35px;
list-style: none;
position: absolute;
&.active {
li {
display: block;
&.current-menu-item {
a {
&:after {
transform: rotate(180deg);
}
}
}
}
}
li {
display: none;
text-align: right;
&.current-menu-item {
display: block;
a {
position: relative;
font-size: 25px;
&:before {
content: 'for ';
display: inline-block;
margin-right: 6px;
}
&:after {
content: '';
background-image: url(../img/arrow.png);
background-repeat: no-repeat;
width: 10px;
height: 8px;
display: inline-block;
position: absolute;
top: 10px;
right: -25px;
font-size: 15px;
}
}
}
a {
width: 100%;
font-size: 20px;
}
}
}
}
.description {
clear: both;
width: 80%;
margin: 190px auto 0;
text-align: center;
}
h1 {
.heroText;
margin-bottom: 160px;
}
.app-links {
color: @white;
margin-top: 10px;
a {
color: @white;
&:hover {
color: @pink;
}
}
}
.chevron-divider {
position: absolute;
bottom: -@chevronOffsetHeader;
height: 150px;
}
@media screen and (max-width: @tabletWidth) {
height: 600px;
h1 {
margin-bottom: 80px;
}
.description {
margin: 160px auto 0;
font-size: 34px;
width: 100%;
}
}
@media screen and (max-width: @phoneWidth) {
padding-top: 10px;
.description {
margin: 90px auto 0;
font-size: 34px;
width: 100%;
}
h1 {
font-size:26px;
line-height: 33px;
margin-bottom:0;
}
.sticky {
position: absolute;
&.stuck {
background-color: fade(@black,0);
}
}
.app-links {
margin-top:5px;
}
}
}

38
assets/less/ascribe/_subtemplates.less Normal file
View File

@ -0,0 +1,38 @@
.subtemplate {
position: relative;
padding-top: @spacer;
padding-bottom: @spacer;
@media (min-width: @tabletWidth) {
padding-top: (@spacer * 2);
padding-bottom: (@spacer * 2);
}
> .row { background-color: @white; }
&.case-studies {
padding: 0;
}
}
.subtemplate__title,
.subtemplate__description {
&:extend(.text-center);
}
.subtemplate__title {
margin-top: 0;
margin-bottom: @spacer;
text-transform: uppercase;
.above-chevron > .subtemplate:first-child & {
margin-top: @spacer;
}
}
.subtemplate__description {
&:extend(.large);
color: @greyText;
margin-top: -(@spacer/2);
margin-bottom: @spacer;
}

45
assets/less/ascribe/_team.less Normal file
View File

@ -0,0 +1,45 @@
.team {
text-align: center;
.intro {
margin-bottom: 60px;
text-align: left;
}
p {
margin:0;
}
&.tour-page {
padding: 70px 0;
background-color: @greyBg;
}
@media screen and (max-width: @tabletWidth) {
.intro {
text-align: center;
}
}
}
//
// Component: Team Member
//
.team-member {
&:extend(.text-center);
h1 {
.teamName;
margin-top: 20px;
margin-bottom:0;
}
h2 {
.copyText;
margin-top:2px;
}
}
.team-member__image {
border-radius: 50%;
max-width: 200px;
margin: auto;
display: block;
}

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

@ -104,6 +104,7 @@ h1, h2, h3, h4, h5, h6,
} }
// Reset fonts for relevant elements // Reset fonts for relevant elements
input, input,
button, button,
@ -133,10 +134,12 @@ small,
.mini { .mini {
font-size: @font-size-mini; font-size: @font-size-mini;
line-height: @line-height-small;
} }
.large { .large {
font-size: @font-size-large; font-size: @font-size-large;
line-height: @line-height-large;
} }
strong, strong,

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

@ -37,12 +37,13 @@
@font-size-h6: @font-size-small; @font-size-h6: @font-size-small;
@line-height-base: 24px; @line-height-base: 24px;
@line-height-small: 20px; @line-height-small: 22px;
@line-height-large: 26px;
@text-color: @blueDeep; @text-color: @blackish;
@font-family-base: "canada-type-gibson", sans-serif; @font-family-base: "canada-type-gibson", sans-serif;
@font-weight-base: 200; @font-weight-base: 300;
@font-weight-normal: 400; @font-weight-normal: 400;
@font-weight-bold: @font-weight-normal; @font-weight-bold: @font-weight-normal;
@ -87,4 +88,4 @@
// //
// Grid // Grid
// //
@gutter-space: (@spacer * 2); @gutter-space: (@spacer * 1.5);

2
content-blog.php
View File

@ -24,7 +24,7 @@ $url = get_the_permalink();
?> ?>
<article <?php post_class(); ?>> <article class="row row--content" <?php post_class(); ?>>
<h2><?php echo get_the_category_list(); ?></h2> <h2><?php echo get_the_category_list(); ?></h2>
<?php echo "<h1><a href='{$url}'>{$title}</a></h1>" ?> <?php echo "<h1><a href='{$url}'>{$title}</a></h1>" ?>

194
controller/classes/Subtemplate.php
View File

@ -175,14 +175,20 @@ class Subtemplate {
$colTitle = get_sub_field('title'); $colTitle = get_sub_field('title');
$colContent = get_sub_field('content'); $colContent = get_sub_field('content');
$descriptiveColumns .= "<article class='short-description'> $descriptiveColumns .= "<article class='grid__col short-description'>
<h1>{$colTitle}</h1> <h1 class='short-description__title'>{$colTitle}</h1>
<div class='description'>{$colContent}</div> <div class='short-description__description'>{$colContent}</div>
</article>"; </article>";
} }
} }
$result = "<section class='subtemplate short-descriptions'><div class='centered-content'><h1>{$subtemplateTitle}</h1><div>{$content}</div><div class='column-container'>{$descriptiveColumns}</div></div></section>"; $result = "<section class='subtemplate short-descriptions'>
<div class='row'>
<h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
<div class='subtemplate__description'>{$content}</div>
<div class='grid grid--gutters grid--full grid-small--half grid-medium--third'>{$descriptiveColumns}</div>
</div>
</section>";
return $result; return $result;
} }
@ -247,8 +253,8 @@ class Subtemplate {
} }
$result = "<section class='subtemplate old-new'> $result = "<section class='subtemplate old-new'>
<div class='centered-content'> <div class='row'>
<h1>{$subtemplateTitle}</h1> <h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
<table> <table>
<thead><tr><th>Old Way</th><th>New Way</th></tr></thead> <thead><tr><th>Old Way</th><th>New Way</th></tr></thead>
<tbody>{$oldNewRows}</tbody> <tbody>{$oldNewRows}</tbody>
@ -267,7 +273,7 @@ class Subtemplate {
$content = get_sub_field('content'); $content = get_sub_field('content');
$result = "<section class='subtemplate product-overview {$headingSize}'> $result = "<section class='subtemplate product-overview {$headingSize}'>
<div class='centered-prodFeat'> <div class='row row--content'>
<img src='{$imageUrl}' alt='{$imageAlt}'> <img src='{$imageUrl}' alt='{$imageAlt}'>
<div class='text-column'> <div class='text-column'>
<h1 class='{$headingSize}'>{$subtemplateTitle}</h1> <h1 class='{$headingSize}'>{$subtemplateTitle}</h1>
@ -284,12 +290,12 @@ class Subtemplate {
$blueBoxCtaLink = get_sub_field('bluebox_cta_link'); $blueBoxCtaLink = get_sub_field('bluebox_cta_link');
$result = "<section class='subtemplate blue-box'> $result = "<section class='subtemplate blue-box'>
<div class='centered-content'> <div class='row row--content'>
<article class='blue-copy'> <article class='blue-copy'>
<h1>{$subtemplateTitle}</h1> <h1>{$subtemplateTitle}</h1>
<div>{$content}</div> <div>{$content}</div>
<a href='{$blueBoxCtaLink}' class='button pink-overPic'>{$blueBoxCtaText}</a> <a href='{$blueBoxCtaLink}' class='button pink-overPic'>{$blueBoxCtaText}</a>
</article> </article>
</div> </div>
</section>"; </section>";
@ -326,8 +332,8 @@ class Subtemplate {
$result = "<section class='subtemplate galleries-marketplaces'> $result = "<section class='subtemplate galleries-marketplaces'>
<div class='centered-content'> <div class='row'>
<h1>{$subtemplateTitle}</h1> <h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
<img src='{$galleriesImgUrl}' alt='{$galleriesImgAlt}'> <img src='{$galleriesImgUrl}' alt='{$galleriesImgAlt}'>
{$galleryMarkup} {$galleryMarkup}
</div> </div>
@ -371,12 +377,12 @@ class Subtemplate {
if ($page == "home") { if ($page == "home") {
$result = "<section class='subtemplate blog-features'> $result = "<section class='subtemplate blog-features'>
<div class='centered-content'> <div class='row'>
<h1>{$subtemplateTitle}</h1> <h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
<div class='column-container'> <div class='column-container'>
{$blogFeatures} {$blogFeatures}
</div>
</div> </div>
</div>
</section>"; </section>";
} }
else { else {
@ -505,8 +511,8 @@ class Subtemplate {
$website = "<a href='{$website}' target='_blank' class='twitter'>{$webIcon}</a>"; $website = "<a href='{$website}' target='_blank' class='twitter'>{$webIcon}</a>";
} }
$teamMemberMarkup .= "<article class='team-member'> $teamMemberMarkup .= "<article class='grid__col team-member'>
<img src='{$image}' alt='Picture of {$name}' data-hover='{$hoverimage}' data-regular='{$image}'> <img class='team-member__image' src='{$image}' alt='Picture of {$name}' data-hover='{$hoverimage}' data-regular='{$image}'>
<h1>{$name}</h1> <h1>{$name}</h1>
<h2>{$role}</h2> <h2>{$role}</h2>
{$facebook} {$facebook}
@ -518,11 +524,11 @@ class Subtemplate {
} }
} }
$result = "<section class='subtemplate team tour-page'> $result = "<section class='subtemplate team tour-page content'>
<div class='centered-content'> <div class='row row--content'>
<h1>{$subtemplateTitle}</h1> <h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
<div class='intro'>{$content}</div> <div class='intro'>{$content}</div>
<div class='column-container'>{$teamMemberMarkup}</div> <div class='grid grid--gutters grid--full grid-small--half grid-medium--third'>{$teamMemberMarkup}</div>
<a href='{$meetTeamLink}' class='button white-blue'>Meet the Team</a> <a href='{$meetTeamLink}' class='button white-blue'>Meet the Team</a>
</div> </div>
</section>"; </section>";
@ -574,8 +580,8 @@ class Subtemplate {
$website = "<a href='{$website}' target='_blank' class='twitter'><img src='{$themeUrl}images/svg/website.svg' alt='Website' class='social-icon'></a>"; $website = "<a href='{$website}' target='_blank' class='twitter'><img src='{$themeUrl}images/svg/website.svg' alt='Website' class='social-icon'></a>";
} }
$teamMemberMarkup .= "<article class='team-member'> $teamMemberMarkup .= "<article class='grid__col team-member'>
<img src='{$image}' alt='Picture of {$name}'> <img class='team-member__image' src='{$image}' alt='Picture of {$name}'>
<h1>{$name}</h1> <h1>{$name}</h1>
<h2>{$role}</h2> <h2>{$role}</h2>
{$facebook} {$facebook}
@ -588,12 +594,10 @@ class Subtemplate {
} }
$result = "<section class='subtemplate team'> $result = "<section class='subtemplate team'>
<div class='centered-content-padding'> <div class='row row--content'>
<div class='centered-content'> <h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
<h1>{$subtemplateTitle}</h1>
<div class='intro'>{$content}</div> <div class='intro'>{$content}</div>
<div class='column-container'>{$teamMemberMarkup}</div> <div class='grid grid--gutters grid--full grid-small--half grid-medium--third'>{$teamMemberMarkup}</div>
</div>
</div> </div>
</section>"; </section>";
@ -606,11 +610,9 @@ class Subtemplate {
$bgColor = get_sub_field('background_color'); $bgColor = get_sub_field('background_color');
$result = "<section class='subtemplate content {$bgColor}'> $result = "<section class='subtemplate content {$bgColor}'>
<div class='centered-content-padding'> <div class='row row--content'>
<div class='centered-content'> <h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
<h1>{$subtemplateTitle}</h1> <div>{$content}</div>
<div>{$content}</div>
</div>
</div> </div>
</section>"; </section>";
@ -621,11 +623,9 @@ class Subtemplate {
$content = get_sub_field('content'); $content = get_sub_field('content');
$result = "<section class='subtemplate content-boxed'> $result = "<section class='subtemplate content-boxed'>
<div class='centered-content-padding'> <div class='row row--content'>
<div class='centered-content'> <h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
<h1>{$subtemplateTitle}</h1> <div>{$content}</div>
<div>{$content}</div>
</div>
</div> </div>
</section>"; </section>";
@ -637,11 +637,9 @@ class Subtemplate {
$imageAlt = get_sub_field('image')['alt']; $imageAlt = get_sub_field('image')['alt'];
$result = "<section class='subtemplate image'> $result = "<section class='subtemplate image'>
<div class='centered-content-padding'> <div class='row'>
<div class='centered-content'> <h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
<h1>{$subtemplateTitle}</h1> <div><img src='{$image}' alt='{$imageAlt}'></div>
<div><img src='{$image}' alt='{$imageAlt}'></div>
</div>
</div> </div>
</section>"; </section>";
@ -676,13 +674,11 @@ class Subtemplate {
} }
$regularFAQ .= "</dl>"; $regularFAQ .= "</dl>";
$result = "<section class='subtemplate faq'> $result = "<section class='subtemplate content faq'>
<div class='centered-content-padding'> <div class='row'>
<div class='centered-content'>
<h1>{$subtemplateTitle}</h1> <h1>{$subtemplateTitle}</h1>
{$featuredFAQ} {$featuredFAQ}
{$regularFAQ} {$regularFAQ}
</div>
</div> </div>
</section>"; </section>";
@ -697,17 +693,17 @@ class Subtemplate {
$title = get_sub_field('value_title'); $title = get_sub_field('value_title');
$description = get_sub_field('value_description'); $description = get_sub_field('value_description');
$values .= "<article class='value'> $values .= "<article class='grid__col value'>
<h1>{$title}</h1> <h1>{$title}</h1>
<div class='description'>{$description}</div> <div class='description'>{$description}</div>
</article>"; </article>";
} }
} }
$result = "<section class='subtemplate values'><div class='centered-content-padding'><div class='centered-content'> $result = "<section class='subtemplate values'><div class='row'>
<h1>{$subtemplateTitle}</h1> <h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
<div class='column-container'>{$values}</div> <div class='grid grid--gutters grid--full grid-small--half'>{$values}</div>
</div></div></section>"; </div></section>";
return $result; return $result;
} }
@ -730,8 +726,8 @@ class Subtemplate {
} }
$result = "<section class='subtemplate careers'> $result = "<section class='subtemplate careers'>
<div class='centered-content'> <div class='row'>
<h1>{$subtemplateTitle}</h1> <h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
<ul>{$careerMarkup}</ul> <ul>{$careerMarkup}</ul>
</div> </div>
</section>"; </section>";
@ -768,15 +764,11 @@ class Subtemplate {
} }
} }
$result = "<section class='subtemplate press-articles'> $result = "<section class='subtemplate press-articles row'>
<div class='centered-content-padding'> <h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
<div class='centered-content'> <img src='{$image}' alt='Media Companies'>
<h1>{$subtemplateTitle}</h1> <div>{$pressMarkup}</div>
<img src='{$image}' alt='Media Companies'> <!--<a href='#' id='more-articles' class='button blue'>Show More</a>-->
<div>{$pressMarkup}</div>
<!--<a href='#' id='more-articles' class='button blue'>Show More</a>-->
</div>
</div>
</section>"; </section>";
return $result; return $result;
@ -785,12 +777,8 @@ class Subtemplate {
$buttonUrl = get_sub_field('button_url'); $buttonUrl = get_sub_field('button_url');
$buttonText = get_sub_field('button_text'); $buttonText = get_sub_field('button_text');
$result = "<section class='subtemplate downloads'> $result = "<section class='subtemplate downloads row'>
<div class='centered-content-padding'> <a href='{$buttonUrl}' download class='button blue'>{$buttonText}</a>
<div class='centered-content'>
<a href='{$buttonUrl}' download class='button blue'>{$buttonText}</a>
</div>
</div>
</section>"; </section>";
return $result; return $result;
@ -815,13 +803,12 @@ class Subtemplate {
} }
$result = "<section class='subtemplate contact'> $result = "<section class='subtemplate contact'>
<div class='centered-content-padding'> <div class='row'>
<div class='centered-content'> <h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
<h1>{$subtemplateTitle}</h1>
<div class='column-container'> <div class='grid grid--gutters grid--fit grid-small--half'>
<div class='form'>{$content}</div> <div class='grid__col form'>{$content}</div>
<aside class='contact-points'>{$contactPoints}</aside> <aside class='grid__col contact-points'>{$contactPoints}</aside>
</div>
</div> </div>
</div> </div>
</section>"; </section>";
@ -918,15 +905,13 @@ class Subtemplate {
$sidebar = $this->eventSidebar(); $sidebar = $this->eventSidebar();
$result = "<section class='subtemplate upcoming-events'> $result = "<section class='subtemplate upcoming-events'>
<div class='centered-content-padding'> <div class='row'>
<div class='centered-content'>
<div class='event-container'> <div class='event-container'>
<h1>Events</h1> <h1>Events</h1>
<div>{$eventMarkup}</div> <div>{$eventMarkup}</div>
</div> </div>
{$sidebar} {$sidebar}
</div> </div>
</div>
</section>"; </section>";
return $result; return $result;
@ -941,12 +926,12 @@ class Subtemplate {
$new = get_sub_field('new_marketplace_content'); $new = get_sub_field('new_marketplace_content');
$result = "<section class='subtemplate existing-new'> $result = "<section class='subtemplate existing-new'>
<div class='centered-content'> <div class='row'>
<h1>{$subtemplateTitle}</h1> <h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
<div class='column-container'> <div class='grid grid--full grid-small--half'>
<div data-tab='existing' class='top-tab active'><div>Existing Marketplace</div></div> <div data-tab='existing' class='grid__col top-tab active'><div>Existing Marketplace</div></div>
<div data-tab='new' class='top-tab'><div>New Marketplace</div></div> <div data-tab='new' class='grid__col top-tab'><div>New Marketplace</div></div>
</div> </div>
<div id='existing' class='content marketplace-info active'><h1 class='phone-only'>Existing Marketplace</h1>{$existing}</div> <div id='existing' class='content marketplace-info active'><h1 class='phone-only'>Existing Marketplace</h1>{$existing}</div>
<div id='new' class='content marketplace-info'><h1 class='phone-only'>New Marketplace</h1>{$new}</div> <div id='new' class='content marketplace-info'><h1 class='phone-only'>New Marketplace</h1>{$new}</div>
</div> </div>
@ -963,16 +948,17 @@ class Subtemplate {
$whiteText = get_sub_field('white_label_text'); $whiteText = get_sub_field('white_label_text');
$result = "<section class='subtemplate get-started'> $result = "<section class='subtemplate get-started'>
<div class='centered-content'> <div class='row'>
<h1>{$subtemplateTitle}</h1> <h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
<div class='description'>{$content}</div> <div class='subtemplate__description'>{$content}</div>
<div class='column-container'>
<div class='api methods-of-use'> <div class='grid grid--gutters grid--full grid-small--half'>
<div class='grid__col api methods-of-use'>
<h1>API</h1> <h1>API</h1>
<img src='{$apiImg}' alt='API'> <img src='{$apiImg}' alt='API'>
{$apiText} {$apiText}
</div> </div>
<div class='white-label methods-of-use'> <div class='grid__col white-label methods-of-use'>
<h1>White Label Marketplace</h1> <h1>White Label Marketplace</h1>
<img src='{$whiteImg}' alt='White Label Marketplace'> <img src='{$whiteImg}' alt='White Label Marketplace'>
{$whiteText} {$whiteText}
@ -1081,26 +1067,22 @@ class Subtemplate {
$sidebar = $this->eventSidebar(); $sidebar = $this->eventSidebar();
$result = "<section class='subtemplate upcoming-events'> $result = "<section class='subtemplate upcoming-events'>
<div class='centered-content-padding'> <div class='row'>
<div class='centered-content'>
<div class='event-container'> <div class='event-container'>
<h1>Upcoming Events</h1> <h1>Upcoming Events</h1>
<div>{$futureMarkup}</div> <div>{$futureMarkup}</div>
</div> </div>
{$sidebar} {$sidebar}
</div> </div>
</div>
</section> </section>
<div class='chevron-divider'></div> <div class='chevron-divider'></div>
<section class='subtemplate past-events'> <section class='subtemplate past-events'>
<div class='centered-content-padding'> <div class='row'>
<div class='centered-content'>
<div class='event-container'> <div class='event-container'>
<h1>Past Events</h1> <h1>Past Events</h1>
<div>{$pastMarkup}</div> <div>{$pastMarkup}</div>
</div> </div>
</div> </div>
</div>
</section>"; </section>";
return $result; return $result;

27
template-header.php
View File

@ -8,25 +8,26 @@
require 'controller/init.php'; require 'controller/init.php';
?> ?>
<header> <header>
<div class="sticky"> <div class="sticky">
<div class="centered-header"> <div class="row">
<a href="<?php echo get_bloginfo('wpurl');?>"><img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/logo-black.png" class="logo phone-and-up"></a> <a href="<?php echo get_bloginfo('wpurl');?>"><img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/logo-black.png" class="logo phone-and-up"></a>
<a href="<?php echo get_bloginfo('wpurl');?>"><img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/ascribeicon-black.svg" class="logo phone-only"></a> <a href="<?php echo get_bloginfo('wpurl');?>"><img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/ascribeicon-black.svg" class="logo phone-only"></a>
<div class="app-links"> <div class="app-links">
<a href="<?php echo $signInLink; ?>">Log In</a> / <a href="<?php echo $signUpLink; ?>">Sign Up</a> <a href="<?php echo $signInLink; ?>">Log In</a> / <a href="<?php echo $signUpLink; ?>">Sign Up</a>
<img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/svg/hamburger.svg" class="phone-only hamburger"> <img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/svg/hamburger.svg" class="phone-only hamburger">
</div> </div>
<nav class="tour-switcher"><?php wp_nav_menu( array( <nav class="tour-switcher"><?php wp_nav_menu( array(
'theme_location' => 'landing-menu', 'theme_location' => 'landing-menu',
'container' => false 'container' => false
)); ?> )); ?>
</nav> </nav>
</div> </div>
</div> </div>
<div class="centered-header"> <div class="row">
<div class="mobile-nav"> <div class="mobile-nav">
<?php wp_nav_menu( array( 'theme_location' => 'main-footer-menu', 'container' => false ) ); ?> <?php wp_nav_menu( array( 'theme_location' => 'main-footer-menu', 'container' => false ) ); ?>
</div> </div>

35
template-tour.php
View File

@ -13,24 +13,23 @@ $buttonColour = get_field('header_button_colour');
$controller = new Controller(); $controller = new Controller();
?> ?>
<header style="background-image:url(<?php echo $bgImage; ?>)"> <header class="hero" style="background-image:url(<?php echo $bgImage; ?>)">
<div class="sticky"> <div class="sticky">
<div class="centered-header"> <div class="row">
<a href="<?php echo get_bloginfo('wpurl');?>"><img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/logo-white.png" class="logo phone-and-up"></a>
<a href="<?php echo get_bloginfo('wpurl');?>"><img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/logo-white.png" class="logo phone-and-up"></a> <a href="<?php echo get_bloginfo('wpurl');?>"><img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/ascribeicon-white.svg" class="logo phone-only"></a>
<a href="<?php echo get_bloginfo('wpurl');?>"><img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/ascribeicon-white.svg" class="logo phone-only"></a> <div class="app-links">
<div class="app-links"> <a href="<?php echo $signInLink; ?>">Log In</a> / <a href="<?php echo $signUpLink; ?>">Sign Up</a>
<a href="<?php echo $signInLink; ?>">Log In</a> / <a href="<?php echo $signUpLink; ?>">Sign Up</a> <img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/svg/hamburger.svg" class="phone-only hamburger">
<img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/svg/hamburger.svg" class="phone-only hamburger"> </div>
</div> <nav class="tour-switcher"><?php wp_nav_menu( array(
<nav class="tour-switcher"><?php wp_nav_menu( array( 'theme_location' => 'landing-menu',
'theme_location' => 'landing-menu', 'container' => false
'container' => false )); ?>
)); ?> </nav>
</nav>
</div> </div>
</div> </div>
<div class="centered-header"> <div class="row">
<section class="description"> <section class="description">
<h1><?php echo $headerTagline; ?></h1> <h1><?php echo $headerTagline; ?></h1>
<a href="<?php echo $signUpLink; ?>" class="button <?php echo $buttonColour; ?>-overPic"><?php echo $buttonText; ?></a> <a href="<?php echo $signUpLink; ?>" class="button <?php echo $buttonColour; ?>-overPic"><?php echo $buttonText; ?></a>
@ -42,8 +41,8 @@ $controller = new Controller();
<div class="chevron-divider"></div> <div class="chevron-divider"></div>
</header> </header>
<main> <main>
<?php echo $controller->loopSubtemplates(); ?> <?php echo $controller->loopSubtemplates(); ?>
</main> </main>
<?php get_footer(); ?> <?php get_footer(); ?>