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

refactor all subtemplates to use new grid system & rows

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/_footer.less';
@import 'ascribe/_hero.less';
@import 'ascribe/_subtemplates.less';
@import 'ascribe/_feature-circles.less';
@import 'ascribe/_team.less';
@import 'vendor/print.less';
@ -35,170 +38,7 @@ header {
header + .chevron-divider {
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-general header,
.page-template-default header,
@ -469,8 +309,8 @@ header + .chevron-divider {
// MAIN
.above-chevron {
margin-top: -100px;
margin-bottom: -80px;
margin-top: -160px;
margin-bottom: -160px;
position: relative;
z-index: 3;
}
@ -480,12 +320,6 @@ header + .chevron-divider {
font-size: 34px;
line-height: 41px;
text-align: center;
.centered-content-padding {
min-height: 500px;
}
}
.subtemplate {
position: relative;
}
.case-studies {
@ -516,11 +350,6 @@ header + .chevron-divider {
position: relative;
left: 0px;
}
.centered-header {
position: relative;
width: 100%;
height: 100%;
}
.description {
white-space: normal;
width: 60%;
@ -662,9 +491,7 @@ header + .chevron-divider {
td {
text-align: center;
}
.centered-content {
padding:0;
}
}
@media screen and (max-width: @phoneWidth) {
.new {
@ -748,28 +575,36 @@ header + .chevron-divider {
}
.blue-box {
&:extend(.text-center);
padding: @spacer 0;
background-color: @greyBg;
.blueBoxCopy;
text-align: center;
@media (min-width: @tabletWidth) {
padding: (@spacer * 2) 0;
}
.blue-copy {
background-color: @blueBright;
text-align: center;
padding: @spacer;
&,
h1 {
color: #fff;
font-size: 180%;
line-height: 120%;
margin-top: 0;
}
@media (min-width: @tabletWidth) {
padding: (@spacer * 2);
}
.button {
margin-top: (@spacer/2)
}
h1 {
.blueBoxTitle;
margin-top: 0;
}
> .row { background: transparent; }
}
.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 {
.copyTextMedium;
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 {
&:extend(.text-center);
background-color: @greyBg;
text-align: center;
padding: 90px 0 140px;
margin-bottom:75px;
> .row { background: none; }
a {
&:extend(.fontLight);
&:extend(.h3);
color: @black;
font-size: 27px;
line-height: 32px;
&:hover {
color: @pink;
@ -1029,14 +796,6 @@ header + .chevron-divider {
}
}
.contact {
.form {
.ttl-columns.columnThreeQuarters;
.copyText;
}
.contact-points {
.ttl-columns.column-4;
}
label {
.copyTextSmall;
@ -1065,7 +824,7 @@ header + .chevron-divider {
width: auto;
}
.contact-point {
.copyText;
h1 {
&:extend(.fontRegular);
font-size: 19px;
@ -1249,101 +1008,42 @@ header + .chevron-divider {
}
}
}
//
// Component: Short Descriptions
//
.short-descriptions {
padding-top: 35px;
text-align: center;
.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;
}
}
&:extend(.text-center);
padding-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 {
background-color: @greyBg;
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 {
background-color: @greyBg;
padding: 90px 0 120px;
.top-tab {
.ttl-columns.column-2;
> .row { background: none; }
.top-tab {
div {
padding: 25px 0;
text-align: center;
@ -1371,7 +1071,6 @@ header + .chevron-divider {
border: 1px solid @pink;
padding: 60px 10%;
margin-top: -1px;
.copyText;
&.active {
display: block;
@ -1397,67 +1096,29 @@ header + .chevron-divider {
.button {
&:extend(.button.pink);
}
@media screen and (max-width: @phoneWidth) {
.top-tab {
display: none;
}
.content {
display: block;
}
}
}
.page-template-template-tour .subtemplate.content {
.copyText;
text-align: center;
&.grey {
background-color: @greyBg;
.centered-content-padding {
background-color: @greyBg;
}
.centered-content {
background-color: @greyBg;
}
h1 {
margin-top: 55px;
}
}
}
.get-started {
padding-top: 70px;
padding-bottom: 230px;
.copyText;
&:extend(.text-center);
.column-container {
width: calc(~"100% + 90px");
}
.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;
}
h1:not(.subtemplate__title) {
font-size: @font-size-h3;
}
}
.pricing {
background-repeat: no-repeat;
background-size: cover;
@ -1608,19 +1269,9 @@ article.post {
}
}
.single-post {
.entry {
.copyText;
width: 80%;
}
.article-post {
border-bottom:0;
}
@media screen and (max-width: 500px) {
.entry {
width: 100%;
}
}
}
// ASCRIBE CHANGES
@ -1643,18 +1294,6 @@ article.post {
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 {
width: auto;
}

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

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

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

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

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

@ -37,10 +37,24 @@
.row {
.clearfix; // for legacy float usage reasons
max-width: (@screen-lg-min + (@gutter-space * 2));
max-width: @screen-lg-min;
margin: auto;
padding-left: @gutter-space;
padding-right: @gutter-space;
padding-left: (@gutter-space/4);
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
// Apply this class to an element to center it responsively in a container
@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 {
.clearfix;
max-width: 880px + 2*@centeredpadding;
@ -59,15 +36,6 @@
margin: 0 auto;
}
.centered-content-padding {
.clearfix;
max-width: 950px;
padding: 0 @centeredpadding 50px;
width: 100%;
margin: 0 auto;
background-color: @white;
}
.centered-categories {
.clearfix;
max-width: 1000px;
@ -75,14 +43,6 @@
margin: 0 auto;
}
.centered-footer {
.clearfix;
max-width: 650px + 2*@centeredpadding;
padding: 0 @centeredpadding;
width: 100%;
margin: 0 auto;
}
// GENERAL LIST
// TAKES AWAY PADDING AND LIST STYLE
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
input,
button,
@ -133,10 +134,12 @@ small,
.mini {
font-size: @font-size-mini;
line-height: @line-height-small;
}
.large {
font-size: @font-size-large;
line-height: @line-height-large;
}
strong,

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

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

27
template-header.php
View File

@ -8,25 +8,26 @@
require 'controller/init.php';
?>
<header>
<div class="sticky">
<div class="centered-header">
<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>
<div class="app-links">
<a href="<?php echo $signInLink; ?>">Log In</a> / <a href="<?php echo $signUpLink; ?>">Sign Up</a>
<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/ascribeicon-black.svg" class="logo phone-only"></a>
<div class="app-links">
<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>
<nav class="tour-switcher"><?php wp_nav_menu( array(
'theme_location' => 'landing-menu',
'container' => false
)); ?>
</nav>
</div>
<nav class="tour-switcher"><?php wp_nav_menu( array(
'theme_location' => 'landing-menu',
'container' => false
)); ?>
</nav>
</div>
</div>
<div class="centered-header">
<div class="row">
<div class="mobile-nav">
<?php wp_nav_menu( array( 'theme_location' => 'main-footer-menu', 'container' => false ) ); ?>
</div>

35
template-tour.php
View File

@ -13,24 +13,23 @@ $buttonColour = get_field('header_button_colour');
$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="centered-header">
<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>
<div class="app-links">
<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">
</div>
<nav class="tour-switcher"><?php wp_nav_menu( array(
'theme_location' => 'landing-menu',
'container' => false
)); ?>
</nav>
<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/ascribeicon-white.svg" class="logo phone-only"></a>
<div class="app-links">
<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">
</div>
<nav class="tour-switcher"><?php wp_nav_menu( array(
'theme_location' => 'landing-menu',
'container' => false
)); ?>
</nav>
</div>
</div>
<div class="centered-header">
<div class="row">
<section class="description">
<h1><?php echo $headerTagline; ?></h1>
<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>
</header>
<main>
<?php echo $controller->loopSubtemplates(); ?>
</main>
<main>
<?php echo $controller->loopSubtemplates(); ?>
</main>
<?php get_footer(); ?>