1
0
mirror of https://github.com/ascribe/wp-theme synced 2024-12-22 17:23:55 +01:00

Styling CSS

This commit is contained in:
Sarah Etter 2015-10-16 18:32:29 -06:00
parent 15575512d7
commit 61c941677b
17 changed files with 1004 additions and 76 deletions

View File

@ -181,7 +181,7 @@ module.exports = function( grunt ) {
grunt.registerTask( 'controller', ['sftp-deploy:controller'] );
grunt.registerTask( 'default', ['watch','css', 'js', 'controller'] );
grunt.registerTask( 'default', ['css', 'js', 'controller'] );
grunt.util.linefeed = '\n';
};

View File

@ -408,7 +408,6 @@ html {
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #ffffff;
}
body.page-template-template-companyblue,
html.page-template-template-companyblue {
@ -995,7 +994,7 @@ ol {
width: 33%;
}
}
@media screen and (max-width: 375px) {
@media screen and (max-width: 600px) {
.ttl-columns .column-6 {
width: 50%;
}
@ -1107,7 +1106,7 @@ ol {
width: 33%;
}
}
@media screen and (max-width: 375px) {
@media screen and (max-width: 600px) {
.column-container .column-6 {
width: 50%;
}
@ -1161,6 +1160,14 @@ video {
border: 0;
padding: 0;
}
.phone-only {
display: none;
}
@media screen and (max-width: 600px) {
.phone-only {
display: inherit;
}
}
.mobile-only {
display: none;
}
@ -1174,6 +1181,11 @@ video {
display: none;
}
}
@media screen and (max-width: 600px) {
.phone-and-up {
display: none;
}
}
header {
overflow: hidden;
padding-bottom: 50px;
@ -1184,6 +1196,7 @@ header + .chevron-divider {
.page-template-template-tour header {
height: 815px;
padding: 0;
padding-top: 30px;
margin-bottom: 60px;
position: relative;
background-size: cover;
@ -1191,9 +1204,24 @@ header + .chevron-divider {
background-position: center;
overflow: visible;
}
.page-template-template-tour header .sticky {
padding: 15px 0;
width: 100%;
position: fixed;
background-color: rgba(0, 0, 0, 0);
transition: all 0.15s ease-in-out;
}
.page-template-template-tour header .sticky.stuck {
background-color: #000000;
z-index: 800;
}
.page-template-template-tour header .sticky.stuck ul.active {
background-color: #000000;
padding-bottom: 10px;
}
.page-template-template-tour header nav {
float: left;
margin-top: 35px;
margin-top: 9px;
font-size: 25px;
line-height: 30px;
color: #67c4da;
@ -1206,9 +1234,9 @@ header + .chevron-divider {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0 35px;
position: relative;
-webkit-flex-direction: column;
list-style: none;
position: absolute;
}
.page-template-template-tour header nav ul.active li {
display: -webkit-flex;
@ -1274,7 +1302,7 @@ header + .chevron-divider {
}
.page-template-template-tour header .app-links {
color: #ffffff;
margin-top: 25px;
margin-top: 10px;
}
.page-template-template-tour header .app-links a {
color: #ffffff;
@ -1300,6 +1328,45 @@ header + .chevron-divider {
width: 100%;
}
}
@media screen and (max-width: 600px) {
.page-template-template-tour header {
padding-top: 10px;
}
.page-template-template-tour header .description {
margin: 90px auto 0;
font-size: 34px;
width: 100%;
}
.page-template-template-tour header h1 {
font-size: 26px;
line-height: 33px;
margin-bottom: 0;
}
.page-template-template-tour header .button {
position: absolute;
bottom: 150px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.page-template-template-tour header .sticky {
position: absolute;
}
.page-template-template-tour header .sticky.stuck {
background-color: rgba(0, 0, 0, 0);
}
.page-template-template-tour header .app-links {
margin-top: 5px;
}
}
.page-template-template-companywhite header .logo,
.page-template-template-general header .logo,
.page-template-default header .logo,
.blog header .logo,
.archive header .logo,
.single-post header .logo {
margin-top: 30px;
}
.page-template-template-companywhite header nav,
.page-template-template-general header nav,
.page-template-default header nav,
@ -1308,7 +1375,7 @@ header + .chevron-divider {
.single-post header nav {
float: left;
margin-top: 17px;
margin-left: 10%;
margin-left: 30px;
}
.page-template-template-companywhite header nav ul li,
.page-template-template-general header nav ul li,
@ -1363,6 +1430,68 @@ header + .chevron-divider {
.single-post header nav ul li:hover a {
color: #d8127d;
}
@media screen and (max-width: 910px) {
.page-template-template-companywhite header nav ul li,
.page-template-template-general header nav ul li,
.page-template-default header nav ul li,
.blog header nav ul li,
.archive header nav ul li,
.single-post header nav ul li {
margin-right: 10px;
width: 120px;
padding: 0 10px;
}
}
@media screen and (max-width: 730px) {
.page-template-template-companywhite header .tour-switcher,
.page-template-template-general header .tour-switcher,
.page-template-default header .tour-switcher,
.blog header .tour-switcher,
.archive header .tour-switcher,
.single-post header .tour-switcher {
display: none;
}
.page-template-template-companywhite header .phone-and-up,
.page-template-template-general header .phone-and-up,
.page-template-default header .phone-and-up,
.blog header .phone-and-up,
.archive header .phone-and-up,
.single-post header .phone-and-up {
display: none;
}
.page-template-template-companywhite header .phone-only,
.page-template-template-general header .phone-only,
.page-template-default header .phone-only,
.blog header .phone-only,
.archive header .phone-only,
.single-post header .phone-only {
display: block;
}
.page-template-template-companywhite header .hamburger,
.page-template-template-general header .hamburger,
.page-template-default header .hamburger,
.blog header .hamburger,
.archive header .hamburger,
.single-post header .hamburger {
display: inline-block;
}
.page-template-template-companywhite header .mobile-nav,
.page-template-template-general header .mobile-nav,
.page-template-default header .mobile-nav,
.blog header .mobile-nav,
.archive header .mobile-nav,
.single-post header .mobile-nav {
display: none;
}
.page-template-template-companywhite header .mobile-nav.active,
.page-template-template-general header .mobile-nav.active,
.page-template-default header .mobile-nav.active,
.blog header .mobile-nav.active,
.archive header .mobile-nav.active,
.single-post header .mobile-nav.active {
display: block;
}
}
.blog header,
.archive header,
.single-post header {
@ -1526,7 +1655,7 @@ header + .chevron-divider {
width: 33%;
}
}
@media screen and (max-width: 375px) {
@media screen and (max-width: 600px) {
.blog header + nav ul .column-6,
.archive header + nav ul .column-6,
.single-post header + nav ul .column-6 {
@ -1597,7 +1726,7 @@ header + .chevron-divider {
width: 33%;
}
}
@media screen and (max-width: 375px) {
@media screen and (max-width: 600px) {
.blog header + nav li,
.archive header + nav li,
.single-post header + nav li {
@ -1618,9 +1747,17 @@ header + .chevron-divider {
.single-post header + nav a:hover {
background-color: rgba(255, 255, 255, 0.5);
}
@media screen and (max-width: 600px) {
.tour-switcher {
display: none;
}
}
.logo {
float: left;
margin-top: 25px;
}
.logo.phone-only {
width: 30px;
margin-left: 10px;
}
.app-links {
float: right;
@ -1641,6 +1778,59 @@ header + .chevron-divider {
.app-links a:hover {
color: #d8127d;
}
.hamburger {
cursor: pointer;
width: 25px;
margin-left: 15px;
position: relative;
top: 2px;
z-index: 50;
}
@media screen and (max-width: 600px) {
.hamburger {
display: inline-block;
}
}
.mobile-nav {
display: none;
background-color: black;
position: absolute;
width: 120%;
left: -10%;
top: 0;
text-align: center;
z-index: 4;
}
.mobile-nav ul {
padding: 40px 0 20px;
}
.mobile-nav li {
font-weight: 400;
padding-bottom: 15px;
font-size: 13px;
}
.mobile-nav li a {
color: #ffffff;
}
.mobile-nav li a:hover {
color: #d8127d;
}
.mobile-nav li:nth-child(-n+3) {
font-size: 16px;
padding-bottom: 35px;
}
.mobile-nav li:nth-child(3) {
border-bottom: 1px solid #ffffff;
margin-bottom: 25px;
}
@media screen and (max-width: 600px) {
.mobile-nav {
display: none;
}
.mobile-nav.active {
display: block;
}
}
.above-chevron {
margin-top: -100px;
margin-bottom: -80px;
@ -1690,30 +1880,55 @@ header + .chevron-divider {
}
}
.feature-circles .surround-circle {
display: inline-block;
vertical-align: top;
padding-right: 30px;
font-size: 15px;
width: 33.33333333%;
width: 33%;
float: left;
padding: 30px;
}
.feature-circles .surround-circle .circle {
text-align: center;
position: relative;
width: 30%;
padding: 80px 50px 170px;
border-radius: 100%;
background-clip: padding-box;
border: 4px solid transparent;
}
@media screen and (max-width: 570px) {
.feature-circles .surround-circle {
.feature-circles .surround-circle .circle:after {
display: block;
padding-bottom: 100%;
width: 100%;
height: 0;
border-radius: 50%;
background-color: white;
content: "";
border: 2px solid transparent;
}
}
.feature-circles .surround-circle:before {
top: 0;
left: 8%;
width: 85%;
background: transparent url('../img/circle.png') no-repeat center top;
background-size: 100%;
height: 100%;
.feature-circles .surround-circle .circle:before {
content: '';
position: absolute;
z-index: -1;
left: -2px;
right: -2px;
top: -2px;
bottom: -2px;
border-radius: 50%;
background: linear-gradient(#67c4da, #d8127d);
}
.feature-circles .surround-circle .container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.feature-circles .surround-circle .wrapper {
display: table;
width: 100%;
height: 100%;
}
.feature-circles .surround-circle .inner {
display: table-cell;
padding: 1em;
vertical-align: middle;
}
.feature-circles .surround-circle h1 {
margin-top: 22px;
@ -1736,6 +1951,11 @@ header + .chevron-divider {
font-size: 15px;
line-height: 19px;
}
@media screen and (max-width: 900px) {
.feature-circles .surround-circle {
padding: 10px;
}
}
@media screen and (max-width: 768px) {
.feature-circles {
padding: 75px 0 100px;
@ -1746,6 +1966,32 @@ header + .chevron-divider {
.feature-circles .feature-circle {
padding-right: 50px;
}
.feature-circles .surround-circle {
width: 100%;
}
.feature-circles .surround-circle .circle {
width: 50%;
margin: 0 auto;
}
}
@media screen and (max-width: 600px) {
.feature-circles {
padding: 40px 0;
}
.feature-circles .description {
display: none;
}
.feature-circles h1 {
margin: 10px 0 60px;
}
.feature-circles .surround-circle h1 {
margin: 0;
}
}
@media screen and (max-width: 400px) {
.feature-circles .surround-circle .circle {
width: 80%;
}
}
.case-studies {
height: 685px;
@ -1835,6 +2081,21 @@ header + .chevron-divider {
transform-origin: right;
}
}
@media screen and (max-width: 600px) {
.case-studies {
height: 400px;
background-color: black;
}
.case-studies .case-study {
background-size: 100%;
background-position: top;
}
.case-studies .description {
width: 100%;
background-color: black;
bottom: 0;
}
}
.old-new {
padding-top: 130px;
padding-bottom: 175px;
@ -1905,6 +2166,14 @@ header + .chevron-divider {
padding: 0;
}
}
@media screen and (max-width: 600px) {
.old-new .new:before {
left: -20px;
width: 40px;
height: 40px;
background-size: 40px;
}
}
.product-overview {
padding: 175px 0;
border-top: 1px solid #979797;
@ -1967,13 +2236,20 @@ header + .chevron-divider {
}
.product-overview img {
max-width: 100%;
width: 45%;
margin-top: 10%;
width: 55%;
}
.product-overview .text-column {
text-align: center;
}
}
@media screen and (max-width: 600px) {
.product-overview img {
display: none;
}
.product-overview .text-column {
width: 100%;
}
}
.blue-box {
padding: 175px 0;
background-color: #fbfbfb;
@ -2001,13 +2277,26 @@ header + .chevron-divider {
padding: 75px 0;
}
}
@media screen and (max-width: 600px) {
.blue-box {
display: none;
}
}
.sign-up {
padding: 240px 0 210px;
text-align: center;
background-size: cover;
background-repeat: no-repeat;
}
.sign-up a {
margin: 0 auto;
}
@media screen and (max-width: 600px) {
.sign-up {
background-position: 55% 50%;
padding: 180px 0 140px;
}
}
.galleries-marketplaces {
padding: 145px 0 130px;
text-align: center;
@ -2033,6 +2322,11 @@ header + .chevron-divider {
display: none;
}
}
@media screen and (max-width: 600px) {
.galleries-marketplaces {
display: none;
}
}
.blog-features {
background-color: #fbfbfb;
padding: 75px 0;
@ -2069,6 +2363,23 @@ header + .chevron-divider {
margin: 0 10px;
text-align: left;
}
@media screen and (max-width: 600px) {
.blog-features .blog {
width: 50%;
}
}
@media screen and (max-width: 400px) {
.blog-features .blog {
width: 100%;
}
.blog-features .blog div {
width: 80%;
margin: 0 auto;
}
.blog-features .blog div img {
width: 100%;
}
}
.team {
color: #121417;
font-size: 15px;
@ -2122,6 +2433,11 @@ header + .chevron-divider {
.team .intro {
text-align: center;
}
}
@media screen and (max-width: 600px) {
.team .team-member {
width: 50%;
}
.team .button {
display: none;
}
@ -2498,6 +2814,11 @@ header + .chevron-divider {
font-size: 22px;
color: #d8127d;
}
@media screen and (max-width: 600px) {
.short-descriptions .short-description {
margin-bottom: 0;
}
}
.content-boxed {
background-color: #fbfbfb;
}
@ -2538,6 +2859,15 @@ header + .chevron-divider {
.content-boxed .centered-content img {
margin: 30px 0;
}
@media screen and (max-width: 600px) {
.content-boxed .centered-content > div {
border: 0;
padding: 60px 2%;
color: #121417;
font-size: 15px;
line-height: 19px;
}
}
.existing-new {
background-color: #fbfbfb;
padding: 90px 0 120px;
@ -2609,6 +2939,14 @@ header + .chevron-divider {
.existing-new .button:hover {
background-color: rgba(216, 18, 125, 0.5);
}
@media screen and (max-width: 600px) {
.existing-new .top-tab {
display: none;
}
.existing-new .content {
display: block;
}
}
.page-template-template-tour .subtemplate.content {
color: #121417;
font-size: 18px;
@ -2663,6 +3001,15 @@ header + .chevron-divider {
}
.get-started .methods-of-use p {
width: 90%;
margin: 0 auto;
}
@media screen and (max-width: 600px) {
.get-started {
padding-bottom: 100px;
}
.get-started .description {
text-align: center;
}
}
.pricing {
background-repeat: no-repeat;
@ -2710,6 +3057,15 @@ header + .chevron-divider {
display: block;
margin-top: 7px;
}
@media screen and (max-width: 600px) {
.pricing {
padding-top: 0;
}
.pricing .pricing-detail div {
height: 80px;
font-size: 20px;
}
}
.blog .column-container {
width: calc(100% + 70px);
}
@ -2815,6 +3171,8 @@ article.post .meta {
@media screen and (max-width: 570px) {
.blog-sidebar {
width: 50%;
min-width: 260px;
display: block;
margin: 0 auto;
}
}
@ -2827,6 +3185,11 @@ article.post .meta {
.single-post .article-post {
border-bottom: 0;
}
@media screen and (max-width: 500px) {
.single-post .entry {
width: 100%;
}
}
footer {
font-size: 14px;
color: #ffffff;
@ -2899,3 +3262,33 @@ footer .copyright {
footer .button {
margin-bottom: 10px;
}
@media screen and (max-width: 570px) {
footer .top-footer ul {
display: none;
}
footer .button {
display: inline-block;
width: auto;
}
footer .contact {
width: 100%;
text-align: center;
}
footer .bottom-footer {
text-align: center;
}
footer .bottom-footer .menu {
float: none;
margin-bottom: 15px;
}
footer .bottom-footer .menu li:first-of-type {
border-left: 0;
}
footer .bottom-footer .social {
float: none;
}
footer .copyright {
float: none;
margin-bottom: 10px;
}
}

File diff suppressed because one or more lines are too long

View File

@ -1,7 +1,8 @@
// TERRITORIAL CSS HELPERS
@tabletWidth: 768px;
@middleWidth: 570px;
@phoneWidth: 375px;
@phoneWidth: 600px;
@smallWidth: 400px;
// CLEARFIX
// Apply .clearfix to a non-floated container element with floated elements in it
@ -211,6 +212,14 @@ video {
// MOBILE-ONLY
// Use this to only display something on mobile- and tablet-width devices.
// Depending on project specs, you may wish to override this breakpoint.
.phone-only {
display: none;
@media screen and (max-width: @phoneWidth) {
display: inherit;
}
}
.mobile-only {
display: none;
@ -218,16 +227,18 @@ video {
display: inherit;
}
}
// MOBILE-ONLY
// Use this to only display something on desktop-width devices.
// Depending on project specs, you may wish to override this breakpoint.
.desktop-only {
@media screen and (max-width: @tabletWidth) {
display: none;
}
}
.phone-and-up {
@media screen and (max-width: @phoneWidth) {
display: none;
}
}
// MIXINS
// TRANSITION

View File

@ -15,24 +15,45 @@ header + .chevron-divider {
.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: 35px;
margin-top: 9px;
.tourNavText;
ul {
display: flex;
flex-wrap: wrap;
padding: 0 35px;
position: relative;
-webkit-flex-direction: column;
list-style: none;
position: absolute;
&.active {
li {
@ -99,7 +120,7 @@ header + .chevron-divider {
}
.app-links {
color: @white;
margin-top: 25px;
margin-top: 10px;
a {
color: @white;
@ -109,7 +130,6 @@ header + .chevron-divider {
}
}
}
.chevron-divider {
position: absolute;
bottom: -@chevronOffsetHeader;
@ -130,6 +150,35 @@ header + .chevron-divider {
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,
@ -137,10 +186,13 @@ header + .chevron-divider {
.blog header,
.archive header,
.single-post header {
.logo {
margin-top: 30px;
}
nav {
float: left;
margin-top: 17px;
margin-left: 10%;
margin-left: 30px;
ul {
li {
@ -176,6 +228,38 @@ header + .chevron-divider {
}
}
}
@media screen and (max-width: 910px) {
nav {
ul {
li {
margin-right: 10px;
width: 120px;
padding: 0 10px;
}
}
}
}
@media screen and (max-width: 730px) {
.tour-switcher {
display: none;
}
.phone-and-up {
display: none;
}
.phone-only {
display: block;
}
.hamburger {
display: inline-block;
}
.mobile-nav {
display:none;
&.active {
display:block;
}
}
}
}
.blog header, .archive header, .single-post header {
&:extend(.blueGradient);
@ -253,9 +337,16 @@ header + .chevron-divider {
}
}
}
.tour-switcher {
.phone-and-up;
}
.logo {
float:left;
margin-top: 25px;
&.phone-only {
width: 30px;
margin-left:10px;
}
}
.app-links {
float: right;
@ -272,6 +363,60 @@ header + .chevron-divider {
}
}
}
.hamburger {
cursor:pointer;
width: 25px;
margin-left: 15px;
position: relative;
top: 2px;
z-index:50;
@media screen and (max-width: @phoneWidth) {
display: inline-block;
}
}
.mobile-nav {
display: none;
background-color: black;
position: absolute;
width: 120%;
left: -10%;
top: 0;
text-align:center;
z-index:4;
ul {
padding: 40px 0 20px;
}
li {
font-weight: 400;
padding-bottom: 15px;
font-size: 13px;
a {
color: @white;
&:hover {
color: @pink;
}
}
&:nth-child(-n+3) {
font-size: 16px;
padding-bottom: 35px;
}
&:nth-child(3) {
border-bottom:1px solid @white;
margin-bottom:25px;
}
}
@media screen and (max-width: @phoneWidth) {
display:none;
&.active {
display:block;
}
}
}
// MAIN
.above-chevron {
@ -302,27 +447,58 @@ header + .chevron-divider {
.column-container {
width: calc(~"100% + 100px");
}
.feature-circle {
.ttl-columns.column-3;
padding-right: 100px;
}
.surround-circle {
.ttl-columns.column-3;
width: 33%;
float:left;
padding: 30px;
.circle {
text-align: center;
position: relative;
width: 30%;
padding: 80px 50px 170px;
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 {
top: 0;
left: 8%;
width: 85%;
background: transparent url('../img/circle.png') no-repeat center top;
background-size: 100%;
height: 100%;
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;
@ -341,6 +517,11 @@ header + .chevron-divider {
.copyTextSmall;
}
@media screen and (max-width: 900px) {
.surround-circle {
padding: 10px;
}
}
@media screen and (max-width: @tabletWidth) {
padding: 75px 0 100px;
.column-container {
@ -350,6 +531,36 @@ header + .chevron-divider {
.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 {
@ -436,6 +647,20 @@ header + .chevron-divider {
transform-origin: right;
}
}
@media screen and (max-width: @phoneWidth) {
height: 400px;
background-color: black;
.case-study {
background-size: 100%;
background-position: top;
}
.description {
width: 100%;
background-color: black;
bottom: 0;
}
}
}
.old-new {
padding-top: 130px;
@ -502,6 +727,16 @@ header + .chevron-divider {
padding:0;
}
}
@media screen and (max-width: @phoneWidth) {
.new {
&:before {
left:-20px;
width: 40px;
height: 40px;
background-size: 40px;
}
}
}
}
.product-overview {
padding: 175px 0;
@ -560,13 +795,20 @@ header + .chevron-divider {
img {
max-width: 100%;
width: 45%;
margin-top: 10%;
width: 55%;
}
.text-column {
text-align: center;
}
}
@media screen and (max-width: @phoneWidth) {
img {
display: none;
}
.text-column {
width: 100%;
}
}
}
.blue-box {
padding: 175px 0;
@ -590,13 +832,23 @@ header + .chevron-divider {
@media screen and (max-width: @tabletWidth) {
padding: 75px 0;
}
@media screen and (max-width: @phoneWidth) {
display: none;
}
}
.sign-up {
padding: 240px 0 210px;
text-align: center;
background-size: cover;
background-repeat: no-repeat;
a {
margin: 0 auto;
}
@media screen and (max-width: @phoneWidth) {
background-position: 55% 50%;
padding: 180px 0 140px;
}
}
.galleries-marketplaces {
@ -622,6 +874,9 @@ header + .chevron-divider {
display:none;
}
}
@media screen and (max-width: @phoneWidth) {
display: none;
}
}
.blog-features {
background-color: @greyBg;
@ -647,6 +902,24 @@ header + .chevron-divider {
margin:0 10px;
text-align: left;
}
@media screen and (max-width: @phoneWidth) {
.blog {
width: 50%;
}
}
@media screen and (max-width: @smallWidth) {
.blog {
width: 100%;
div {
width: 80%;
margin:0 auto;
img {
width: 100%;
}
}
}
}
}
.team {
.copyTextSmall;
@ -689,7 +962,11 @@ header + .chevron-divider {
.intro {
text-align: center;
}
}
@media screen and (max-width: @phoneWidth) {
.team-member {
width: 50%;
}
.button {
display: none;
}
@ -961,6 +1238,12 @@ header + .chevron-divider {
color: @pink;
}
}
@media screen and (max-width: @phoneWidth) {
.short-description {
margin-bottom:0;
}
}
}
.content-boxed {
background-color: @greyBg;
@ -1008,6 +1291,17 @@ header + .chevron-divider {
margin: 30px 0;
}
}
@media screen and (max-width: @phoneWidth) {
.centered-content {
& > div {
border:0;
padding: 60px 2%;
.copyTextSmall;
}
}
}
}
.existing-new {
background-color: @greyBg;
@ -1072,6 +1366,15 @@ header + .chevron-divider {
.button {
.button.pink;
}
@media screen and (max-width: @phoneWidth) {
.top-tab {
display: none;
}
.content {
display: block;
}
}
}
.page-template-template-tour .subtemplate.content {
.copyText;
@ -1112,6 +1415,15 @@ header + .chevron-divider {
}
p {
width: 90%;
margin: 0 auto;
}
}
@media screen and (max-width: @phoneWidth) {
padding-bottom:100px;
.description {
text-align: center;
}
}
}
@ -1152,6 +1464,17 @@ header + .chevron-divider {
margin-top: 7px;
}
}
@media screen and (max-width: @phoneWidth) {
padding-top:0;
.pricing-detail {
div {
height:80px;
font-size: 20px;
}
}
}
}
// BLOG
@ -1240,6 +1563,8 @@ article.post {
@media screen and (max-width: @middleWidth) {
width: 50%;
min-width: 260px;
display: block;
margin:0 auto;
}
}
@ -1251,6 +1576,12 @@ article.post {
.article-post {
border-bottom:0;
}
@media screen and (max-width: 500px) {
.entry {
width: 100%;
}
}
}
@ -1325,4 +1656,39 @@ footer {
.button {
margin-bottom: 10px;
}
@media screen and (max-width: @middleWidth) {
.top-footer {
ul {
display: none;
}
}
.button {
display: inline-block;
width: auto;
}
.contact {
width:100%;
text-align:center;
}
.bottom-footer {
text-align:center;
.menu {
float: none;
margin-bottom: 15px;
li:first-of-type {
border-left:0;
}
}
.social {
float: none;
}
}
.copyright {
float:none;
margin-bottom:10px;
}
}
}

View File

@ -5,7 +5,6 @@ html {
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: @white;
&.page-template-template-companyblue {
.copyText;

View File

@ -8,6 +8,9 @@ $(document).ready(function(){
featuredFAQ();
marketplaces();
tourNav();
mobileNav();
stickyNav();
colourHover();
function tourNav() {
$('.current-menu-item a').click(function(e){
@ -83,6 +86,44 @@ $(document).ready(function(){
});
}
function mobileNav() {
$('.hamburger').click(function(){
console.log('hi');
$('.mobile-nav').toggleClass('active');
});
}
function stickyNav() {
var didScroll = false;
var sticky = $('.sticky');
$(window).scroll(function () {
didScroll = true;
});
setInterval(function () {
if (didScroll) {
didScroll = false;
if ($(window).scrollTop() > 100) {
sticky.addClass('stuck');
}
else {
sticky.removeClass('stuck');
}
}
}, 250);
}
function colourHover() {
$('.team-member img').hover(
function(){
var hover = $(this).data('hover');
$(this).attr('src',hover);
},
function(){
var normal = $(this).data('regular');
$(this).attr('src',normal);
});
}
});

View File

@ -1,4 +1,4 @@
/*! ascribe - v0.0.1
* http://wordpress.org/themes
* Copyright (c) 2015; * Licensed GPLv2+ */
$(document).ready(function(){function a(){$(".current-menu-item a").click(function(a){a.preventDefault(),$("#menu-landing-page-menu").toggleClass("active")})}function b(){$(".case-study:gt(0)").addClass("hidden"),$(".slider-action").click(function(){var a=$(this).attr("id");"back"===a?($(".case-study").addClass("hidden"),$(".case-study").last().prependTo(".slide-container").removeClass("hidden")):(displayed=$(".case-study").first(),displayed.addClass("hidden"),$(".case-study").eq(1).removeClass("hidden"),displayed.appendTo(".slide-container"))})}function c(){jQuery("img.social-icon").each(function(){var a=jQuery(this),b=a.attr("id"),c=a.attr("class"),d=a.attr("src");jQuery.get(d,function(d){var e=jQuery(d).find("svg");"undefined"!=typeof b&&(e=e.attr("id",b)),"undefined"!=typeof c&&(e=e.attr("class",c+" replaced-svg")),e=e.removeAttr("xmlns:a"),a.replaceWith(e)},"xml")})}function d(){$(".featured-faqs dt").click(function(){$(this).next("dd").toggleClass("open")})}function e(){$(".top-tab").click(function(){$(".top-tab").removeClass("active"),$(this).addClass("active");var a=$(this).data("tab");$(".marketplace-info").removeClass("active"),$("#"+a).addClass("active")})}b(),c(),d(),e(),a()});
$(document).ready(function(){function a(){$(".current-menu-item a").click(function(a){a.preventDefault(),$("#menu-landing-page-menu").toggleClass("active")})}function b(){$(".case-study:gt(0)").addClass("hidden"),$(".slider-action").click(function(){var a=$(this).attr("id");"back"===a?($(".case-study").addClass("hidden"),$(".case-study").last().prependTo(".slide-container").removeClass("hidden")):(displayed=$(".case-study").first(),displayed.addClass("hidden"),$(".case-study").eq(1).removeClass("hidden"),displayed.appendTo(".slide-container"))})}function c(){jQuery("img.social-icon").each(function(){var a=jQuery(this),b=a.attr("id"),c=a.attr("class"),d=a.attr("src");jQuery.get(d,function(d){var e=jQuery(d).find("svg");"undefined"!=typeof b&&(e=e.attr("id",b)),"undefined"!=typeof c&&(e=e.attr("class",c+" replaced-svg")),e=e.removeAttr("xmlns:a"),a.replaceWith(e)},"xml")})}function d(){$(".featured-faqs dt").click(function(){$(this).next("dd").toggleClass("open")})}function e(){$(".top-tab").click(function(){$(".top-tab").removeClass("active"),$(this).addClass("active");var a=$(this).data("tab");$(".marketplace-info").removeClass("active"),$("#"+a).addClass("active")})}function f(){$(".hamburger").click(function(){console.log("hi"),$(".mobile-nav").toggleClass("active")})}function g(){var a=!1,b=$(".sticky");$(window).scroll(function(){a=!0}),setInterval(function(){a&&(a=!1,$(window).scrollTop()>100?b.addClass("stuck"):b.removeClass("stuck"))},250)}function h(){$(".team-member img").hover(function(){var a=$(this).data("hover");$(this).attr("src",a)},function(){var a=$(this).data("regular");$(this).attr("src",a)})}b(),c(),d(),e(),a(),f(),g(),h()});

View File

@ -5,6 +5,9 @@ $(document).ready(function(){
featuredFAQ();
marketplaces();
tourNav();
mobileNav();
stickyNav();
colourHover();
function tourNav() {
$('.current-menu-item a').click(function(e){
@ -80,6 +83,44 @@ $(document).ready(function(){
});
}
function mobileNav() {
$('.hamburger').click(function(){
console.log('hi');
$('.mobile-nav').toggleClass('active');
});
}
function stickyNav() {
var didScroll = false;
var sticky = $('.sticky');
$(window).scroll(function () {
didScroll = true;
});
setInterval(function () {
if (didScroll) {
didScroll = false;
if ($(window).scrollTop() > 100) {
sticky.addClass('stuck');
}
else {
sticky.removeClass('stuck');
}
}
}, 250);
}
function colourHover() {
$('.team-member img').hover(
function(){
var hover = $(this).data('hover');
$(this).attr('src',hover);
},
function(){
var normal = $(this).data('regular');
$(this).attr('src',normal);
});
}
});

View File

@ -148,13 +148,21 @@ class Subtemplate {
$description = get_sub_field('description');
$featureCircles .= "<article class='surround-circle'>
<div class='circle'>
<div class='container'>
<div class='wrapper'>
<div class='inner'>
<h1>{$title}</h1>
<div class='description'>{$description}</div>
</div>
</div>
</div>
</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'><div class='centered-header'>{$featureCircles}</div></section>";
return $result;
}
@ -334,7 +342,7 @@ class Subtemplate {
$url = get_permalink($feature->ID);
$content = substr($feature->post_content, 0, 144) . '...';
$date = date('F Y',$feature->post_date);
$image = wp_get_attachment_image_src(get_post_thumbnail_id($feature->ID),'large')[0];
$image = wp_get_attachment_image_src(get_post_thumbnail_id($feature->ID),'blog-crop')[0];
if ($page == "home") {
$blogFeatures .= "<a href='{$url}'><article class='blog'><div>
@ -375,10 +383,12 @@ class Subtemplate {
public function team($subtemplateTitle) {
$content = get_sub_field('content');
$meetTeamLink = get_sub_field('meet_the_team_link');
$numberOfPeople = get_sub_field('number_of_people_to_display');
$args = array(
'post_type' => 'team',
'order' => 'ASC'
'order' => 'DESC',
'posts_per_page' => $numberOfPeople
);
$teamMembers = get_posts($args);
@ -389,6 +399,10 @@ class Subtemplate {
$name = $teamMember->post_title;
$role = get_field('role',$id);
$image = get_field('image',$id)['url'];
$hoverimage = get_field('hover_image',$id)['url'];
if (!$hoverimage) {
$hoverimage = $image;
}
$facebook = get_field('facebook_link',$id);
$themeUrl = WPTHEME_TEMPLATE_URL . '/';
@ -418,7 +432,7 @@ class Subtemplate {
}
$teamMemberMarkup .= "<article class='team-member'>
<img src='{$image}' alt='Picture of {$name}'>
<img src='{$image}' alt='Picture of {$name}' data-hover='{$hoverimage}' data-regular='{$image}'>
<h1>{$name}</h1>
<h2>{$role}</h2>
{$facebook}
@ -442,11 +456,11 @@ class Subtemplate {
}
public function teamGeneral($subtemplateTitle) {
$content = get_sub_field('content');
$meetTeamLink = get_sub_field('meet_the_team_link');
$args = array(
'post_type' => 'team',
'order' => 'ASC'
'order' => 'DESC',
'posts_per_page' => -1
);
$teamMembers = get_posts($args);
@ -864,8 +878,8 @@ class Subtemplate {
<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 id='existing' class='content marketplace-info active'>{$existing}</div>
<div id='new' class='content marketplace-info'>{$new}</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>
</section>";

View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-456 258.3 45.7 45.7" style="enable-background:new -456 258.3 45.7 45.7;" xml:space="preserve">
<path d="M-431.6,267.3h-3.1l-10.3,25.4h3.7l2.6-6.6h10.8l2.6,6.6h4L-431.6,267.3L-431.6,267.3z M-437.6,283.1l4.4-11.4l4.4,11.4
H-437.6L-437.6,283.1z"/>
<path d="M-412,281.2c0-11.9-9.3-21.2-21.1-21.2c-11.8,0-21.2,9.3-21.2,21.2s9.3,21.1,21.2,21.1S-412,293-412,281.2L-412,281.2z
M-414.6,281.2c0,10.2-8.4,18.6-18.6,18.6c-10.1-0.1-18.5-8.5-18.5-18.6s8.4-18.6,18.6-18.6C-423,262.6-414.6,271-414.6,281.2
L-414.6,281.2z"/>
</svg>

After

Width:  |  Height:  |  Size: 890 B

View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-456 258.3 45.7 45.7" style="enable-background:new -456 258.3 45.7 45.7;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<path class="st0" d="M-431.6,267.3h-3.1l-10.3,25.4h3.7l2.6-6.6h10.8l2.6,6.6h4L-431.6,267.3L-431.6,267.3z M-437.6,283.1l4.4-11.4
l4.4,11.4H-437.6L-437.6,283.1z"/>
<path class="st0" d="M-412,281.2c0-11.9-9.3-21.2-21.1-21.2c-11.8,0-21.2,9.3-21.2,21.2s9.3,21.1,21.2,21.1S-412,293-412,281.2
L-412,281.2z M-414.6,281.2c0,10.2-8.4,18.6-18.6,18.6c-10.1-0.1-18.5-8.5-18.5-18.6s8.4-18.6,18.6-18.6
C-423,262.6-414.6,271-414.6,281.2L-414.6,281.2z"/>
</svg>

After

Width:  |  Height:  |  Size: 968 B

12
images/svg/hamburger.svg Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-461 271 28 20" style="enable-background:new -461 271 28 20;" xml:space="preserve">
<style type="text/css">
.st0{fill:#67C4DA;}
</style>
<path class="st0" d="M-459,275h24c1.1,0,2-0.9,2-2s-0.9-2-2-2h-24c-1.1,0-2,0.9-2,2S-460.1,275-459,275z M-435,279h-24
c-1.1,0-2,0.9-2,2s0.9,2,2,2h24c1.1,0,2-0.9,2-2S-433.9,279-435,279z M-435,287h-24c-1.1,0-2,0.9-2,2s0.9,2,2,2h24c1.1,0,2-0.9,2-2
S-433.9,287-435,287z"/>
</svg>

After

Width:  |  Height:  |  Size: 784 B

View File

@ -1 +1 @@
{"/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/css//ascribe.css":"2015-10-16T03:02:08.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/css//ascribe.min.css":"2015-10-16T03:02:08.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/css//readme.md":"2015-09-17T22:31:35.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/css//less/ascribe.less":"2015-10-16T03:02:04.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/js//ascribe.js":"2015-10-16T02:40:57.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/js//ascribe.min.js":"2015-10-16T02:40:57.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/js//src/ascribe.js":"2015-10-16T02:40:48.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/js//vendor/readme.md":"2015-09-17T22:31:35.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/css//helpers/helpers.less":"2015-10-16T00:06:34.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/css//less/branding.less":"2015-10-16T00:59:03.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/css//vendor/colorbox.css":"2015-08-30T20:38:35.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/css//vendor/normalize.less":"2015-08-25T22:42:14.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/css//vendor/print.less":"2015-07-02T21:25:38.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/js//vendor/retina/retina.min.js":"2015-08-18T23:30:10.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/controller//controller.inc.php":"2015-09-17T22:47:24.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/controller//init.php":"2015-09-25T23:50:20.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/controller//classes/Subtemplate.php":"2015-10-15T21:24:37.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/js//ajax-pagination.js":"2015-09-25T04:46:45.000Z"}
{"/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/css//ascribe.css":"2015-10-17T00:31:30.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/css//ascribe.min.css":"2015-10-17T00:31:31.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/css//readme.md":"2015-09-17T22:31:35.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/css//less/ascribe.less":"2015-10-17T00:31:26.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/js//ascribe.js":"2015-10-17T00:13:07.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/js//ascribe.min.js":"2015-10-17T00:13:07.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/js//src/ascribe.js":"2015-10-17T00:12:07.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/js//vendor/readme.md":"2015-09-17T22:31:35.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/css//helpers/helpers.less":"2015-10-16T20:25:19.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/css//less/branding.less":"2015-10-16T21:10:09.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/css//vendor/colorbox.css":"2015-08-30T20:38:35.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/css//vendor/normalize.less":"2015-08-25T22:42:14.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/css//vendor/print.less":"2015-07-02T21:25:38.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/js//vendor/retina/retina.min.js":"2015-08-18T23:30:10.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/controller//controller.inc.php":"2015-09-17T22:47:24.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/controller//init.php":"2015-09-25T23:50:20.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/controller//classes/Subtemplate.php":"2015-10-17T00:09:35.000Z","/Users/sarahetter/Dropbox/_shared/sarahetter/ascribe/assets/js//ajax-pagination.js":"2015-09-25T04:46:45.000Z"}

View File

@ -8,15 +8,20 @@
?>
<header class="blog">
<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"></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>
<div class="app-links">
<a href="<?php echo $signInLink; ?>">Sign 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="mobile-nav">
<?php wp_nav_menu( array( 'theme_location' => 'main-footer-menu', 'container' => false ) ); ?>
</div>
</div>
<div class="chevron-divider"></div>
<h1>ascribe blog</h1>

View File

@ -10,10 +10,15 @@ 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"></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>
<div class="app-links">
<a href="<?php echo $signInLink; ?>">Sign 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',
@ -21,5 +26,11 @@ require 'controller/init.php';
)); ?>
</nav>
</div>
</div>
<div class="centered-header">
<div class="mobile-nav">
<?php wp_nav_menu( array( 'theme_location' => 'main-footer-menu', 'container' => false ) ); ?>
</div>
</div>
</header>
<div class="chevron-divider"></div>

View File

@ -15,20 +15,30 @@ $controller = new Controller();
?>
<header 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"></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>
<div class="app-links">
<a href="<?php echo $signInLink; ?>">Sign 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">
<section class="description">
<h1><?php echo $headerTagline; ?></h1>
<a href="<?php echo $signUpLink; ?>" class="button <?php echo $buttonColour; ?>-overPic"><?php echo $buttonText; ?></a>
</section>
<div class="mobile-nav">
<?php wp_nav_menu( array( 'theme_location' => 'main-footer-menu', 'container' => false ) ); ?>
</div>
</div>
<div class="chevron-divider"></div>
</header>