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

so many more fixes & cleanup

Browse Source
This commit is contained in:
Matthias Kretschmann 2016-01-16 19:37:04 +01:00
parent 85f77f1f9f
commit a5b717dbd8
12 changed files with 297 additions and 349 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

249
assets/less/ascribe.less
View File

@ -24,6 +24,7 @@
@import 'ascribe/_footer.less'; @import 'ascribe/_footer.less';
@import 'ascribe/_hero.less'; @import 'ascribe/_hero.less';
@import 'ascribe/_header.less';
@import 'ascribe/_subtemplates.less'; @import 'ascribe/_subtemplates.less';
@import 'ascribe/_feature-circles.less'; @import 'ascribe/_feature-circles.less';
@import 'ascribe/_team.less'; @import 'ascribe/_team.less';
@ -31,192 +32,7 @@
@import 'vendor/print.less'; @import 'vendor/print.less';
// HEADER
@chevronOffsetHeader: 60px;
.header + .chevron-divider {
height: 175px;
}
.header {
overflow: hidden;
padding-bottom: 50px;
.page-template-template-companywhite &,
.page-template-template-general &,
.page-template-default &,
.blog &,
.single-career &,
.error404 &,
.archive &,
.single-post & {
.logo {
margin-top: 30px;
position:relative;
z-index:10;
}
nav {
position: relative;
width: 100%;
text-align: center;
margin: 0;
top: 20px;
ul {
&:extend(.list-unstyled all, .small);
li {
display: inline-block;
border: 1px solid #b8b9b9;
margin: 0 15px 0 15px;
height: 60px;
padding: 0 30px;
width: 160px;
text-align: center;
vertical-align: top;
a {
color: #000;
display: block;
font-size: 16px;
position: relative;
top: 50%;
transform: translateY(-50%);
&:after {
content: ' Tour';
}
}
&:hover {
border: 1px solid @pink;
a {
color: @pink;
}
}
}
}
}
@media screen and (max-width: 910px) {
nav {
ul {
li {
margin-right: 10px;
width: 120px;
padding: 0 10px;
}
}
}
}
@media screen and (max-width: 750px) {
.tour-switcher {
display: none;
}
.phone-and-up {
display: none;
}
.phone-only {
display: block;
}
.hamburger {
display: inline-block;
}
.mobile-nav {
display:none;
&.active {
display:block;
}
}
}
}
}
.tour-switcher {
.phone-and-up;
}
.logo {
float:left;
&.phone-only {
width: 30px;
margin-left:10px;
}
}
.app-links {
float: right;
margin-top: 35px;
.signInUpText;
color: @black;
position:relative;
z-index:3;
a {
.signInUpText;
color: @black;
&:hover {
color: @pink;
}
}
}
.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 // MAIN
.above-chevron { .above-chevron {
@ -582,58 +398,6 @@
} }
} }
.blog-features {
background-color: @greyBg;
padding: 75px 0;
.centered-content > h1 {
.galleriesPressTitle;
text-align: center;
text-transform: none;
}
.blog {
.ttl-columns.column-3;
margin-bottom: 40px;
div {
background-color: white;
padding-bottom: 15px;
min-height: 225px;
}
}
h2 {
.featureBlogDesc;
margin:10px 10px 0;
padding: 0 10px;
}
h1 {
.featureBlogTitle;
margin:0 10px;
text-align: left;
padding: 0 10px;
}
@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%;
}
}
}
}
}
.faq { .faq {
.copyTextMedium; .copyTextMedium;
@ -672,6 +436,11 @@
} }
} }
.values {
padding-bottom: @spacer;
}
.value { .value {
h1 { h1 {
&:extend(.fontRegular); &:extend(.fontRegular);
@ -703,12 +472,12 @@
} }
ul { ul {
list-style: none; &:extend(.list-unstyled all);
} }
} }
.contact { .contact {
label { label {
.copyTextSmall; &:extend(.small);
&.required { &.required {
&:after { &:after {
@ -918,7 +687,7 @@
// //
.short-descriptions { .short-descriptions {
&:extend(.text-center); &:extend(.text-center);
padding-bottom: 0; padding-bottom: @spacer;
} }
.short-description { .short-description {

85
assets/less/ascribe/_blog.less
View File

@ -2,6 +2,8 @@
.hentry { .hentry {
&:extend(.subtemplate); &:extend(.subtemplate);
border-bottom: 2px solid @blueLight; border-bottom: 2px solid @blueLight;
&:last-child { border: none }
} }
.entry-title { .entry-title {
@ -43,71 +45,32 @@
// //
// Blog header // Pagination
// //
.header { .pagination {
.blog &, .archive &, .single-post & { background: @white;
&:extend(.blueGradient); margin-top: (@spacer/2);
padding-bottom:0; padding-bottom: (@spacer/2);
.menu-item {
border: 1px solid fade(@white,30);
transition: .2s ease-out;
a { a {
color: @white; &:extend(.button all, .button.small);
}
&:hover {
background-color: fade(@white,30);
border: 1px solid fade(@white,30);
a {
color: @white;
}
}
}
.chevron-divider {
position: absolute;
top: 110px;
z-index: 1;
}
h1 {
color: @white;
font-size: 54px;
position: relative;
z-index: 2;
margin-top: 100px;
margin-bottom: 50px;
text-align: center;
a {
color: @white;
&:hover {
color: @pink;
}
}
}
.app-links {
color: @white;
a {
color: @white;
&:hover {
color: @pink;
}
}
}
} }
} }
.pagination__next {
&:extend(.text-right);
}
//
// Blog header
//
.blog-categories { .blog-categories {
background-color: @blueBright; background-color: @blueBright;
border-top: 2px solid fade(@white,50); border-top: 2px solid fade(@white,50);
ul { ul {
&:extend(.list-unstyled); &:extend(.list-unstyled all);
display: table; display: table;
padding: 0 10px; padding: 0 10px;
width: 100%; width: 100%;
@ -120,20 +83,26 @@
padding: 0; padding: 0;
height: 88px; height: 88px;
float: left; float: left;
transition: .2s ease-out;
&:hover { &:hover,
&:focus {
background-color: fade(@white,50); background-color: fade(@white,50);
} }
} }
a { a {
&:extend(.text-center, .small);
display: table-cell; display: table-cell;
text-align: center; color: @white;
font-size: 16px;
color: #fff;
height: 88px; height: 88px;
width: 100%; width: 100%;
vertical-align: middle; vertical-align: middle;
padding: 0 10px; padding: 0 10px;
&:hover,
&:focus {
color: @blueMedium;
}
} }
@media screen and (max-width: 450px) { @media screen and (max-width: 450px) {

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

@ -1,22 +1,13 @@
a {
text-decoration: none;
color: @blueBright;
&:hover {
color: @pink;
}
}
//FONTS // FONTS
.fontLight { .fontLight {
font-family: "canada-type-gibson",sans-serif; font-family: @font-family-base;
font-weight: 200; font-weight: @font-weight-light;
} }
.fontRegular { .fontRegular {
font-family: "canada-type-gibson",sans-serif; font-family: @font-family-base;
font-weight: 400; font-weight: @font-weight-normal;
} }
// GENERAL TEXT STYLES // GENERAL TEXT STYLES
@ -74,29 +65,6 @@ a {
line-height: 29px; line-height: 29px;
} }
.blueBoxTitle {
&:extend(.fontRegular);
font-size: 30px;
color: @white;
line-height: 52px;
text-align: center;
@media (min-width: @phoneWidth) {
font-size: 43px;
}
}
.blueBoxCopy {
&:extend(.fontLight);
font-size: 24px;
line-height: 31px;
color: @white;
@media (min-width: @phoneWidth) {
font-size: 43px;
line-height: 52px;
}
}
.galleriesPressTitle { .galleriesPressTitle {
&:extend(.fontLight); &:extend(.fontLight);
font-size: 30px; font-size: 30px;

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

@ -98,7 +98,7 @@
// Gutters // Gutters
// //
.grid--gutters { .grid--gutters {
margin: -(@gutter-space) 0 @gutter-space (-(@gutter-space)); margin: -(@gutter-space/2) 0 @gutter-space (-(@gutter-space/2));
> .grid__col { > .grid__col {
padding: @gutter-space 0 0 @gutter-space;; padding: @gutter-space 0 0 @gutter-space;;
@ -107,7 +107,7 @@
@media (@screen-sm) { @media (@screen-sm) {
.grid-small--gutters { .grid-small--gutters {
margin: -(@gutter-space) 0 @gutter-space (-(@gutter-space)); margin: -(@gutter-space/2) 0 @gutter-space (-(@gutter-space/2));
> .grid__col { > .grid__col {
padding: @gutter-space 0 0 @gutter-space; padding: @gutter-space 0 0 @gutter-space;
@ -117,7 +117,7 @@
@media (@screen-md) { @media (@screen-md) {
.grid-medium--gutters { .grid-medium--gutters {
margin: -(@gutter-space) 0 @gutter-space (-(@gutter-space)); margin: -(@gutter-space/2) 0 @gutter-space (-(@gutter-space/2));
> .grid__col { > .grid__col {
padding: @gutter-space 0 0 @gutter-space; padding: @gutter-space 0 0 @gutter-space;
@ -127,7 +127,7 @@
@media (@screen-lg) { @media (@screen-lg) {
.grid-large--gutters { .grid-large--gutters {
margin: -(@gutter-space) 0 @gutter-space (-(@gutter-space)); margin: -(@gutter-space/2) 0 @gutter-space (-(@gutter-space/2));
> .grid__col { > .grid__col {
padding: @gutter-space 0 0 @gutter-space; padding: @gutter-space 0 0 @gutter-space;

237
assets/less/ascribe/_header.less Normal file
View File

@ -0,0 +1,237 @@
//
// Ascribe
// -----------------
// The header
//
.header {
overflow: hidden;
padding-bottom: 50px;
.chevron-divider {
height: 175px;
}
.logo {
margin-top: 30px;
position:relative;
z-index:10;
}
nav {
position: relative;
width: 100%;
text-align: center;
margin: 0;
top: 20px;
ul {
&:extend(.list-unstyled all, .small);
}
}
.menu-item {
display: inline-block;
border: 1px solid #b8b9b9;
margin: 0 15px 0 15px;
height: 60px;
padding: 0 30px;
width: 160px;
text-align: center;
vertical-align: top;
a {
color: #000;
display: block;
font-size: 16px;
position: relative;
top: 50%;
transform: translateY(-50%);
&:after {
content: ' Tour';
}
}
&:hover {
border: 1px solid @pink;
a {
color: @pink;
}
}
}
@media screen and (max-width: 910px) {
.menu-item {
margin-right: 10px;
width: 120px;
padding: 0 10px;
}
}
@media screen and (max-width: 750px) {
.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
//
.blog &,
.archive &,
.single-post & {
&:extend(.blueGradient);
padding-bottom:0;
.menu-item {
border: 1px solid fade(@white,30);
transition: .2s ease-out;
a {
color: @white;
}
&:hover {
background-color: fade(@white,30);
border: 1px solid fade(@white,30);
a {
color: @white;
}
}
}
.chevron-divider {
position: absolute;
top: 110px;
z-index: 1;
}
h1 {
color: @white;
font-size: 54px;
position: relative;
z-index: 2;
margin-top: 100px;
margin-bottom: 50px;
text-align: center;
a {
color: @white;
&:hover {
color: @pink;
}
}
}
.app-links {
color: @white;
a {
color: @white;
&:hover {
color: @pink;
}
}
}
}
}
.tour-switcher {
.phone-and-up;
}
.logo {
float:left;
&.phone-only {
width: 30px;
margin-left:10px;
}
}
.app-links {
float: right;
margin-top: 35px;
.signInUpText;
color: @black;
position:relative;
z-index:3;
a {
.signInUpText;
color: @black;
&:hover {
color: @pink;
}
}
}
.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;
}
}
}

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

@ -3,7 +3,7 @@
height: 815px; height: 815px;
padding:0; padding:0;
padding-top: 30px; padding-top: 30px;
margin-bottom: @chevronOffsetHeader; margin-bottom: @spacer;
position: relative; position: relative;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -115,7 +115,7 @@
} }
.chevron-divider { .chevron-divider {
position: absolute; position: absolute;
bottom: -@chevronOffsetHeader; bottom: -@spacer;
height: 150px; height: 150px;
} }

2
assets/less/ascribe/_subtemplates.less
View File

@ -26,7 +26,7 @@
text-transform: uppercase; text-transform: uppercase;
.above-chevron > .subtemplate:first-child & { .above-chevron > .subtemplate:first-child & {
margin-top: @spacer; margin-top: (@spacer * 2);
} }
} }

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

@ -153,6 +153,7 @@ strong,
em, em,
.italic { .italic {
font-style: italic; font-style: italic;
font-weight: @font-weight-normal;
} }
// Alignment // Alignment

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

@ -40,10 +40,11 @@
@line-height-small: 22px; @line-height-small: 22px;
@line-height-large: 26px; @line-height-large: 26px;
@text-color: @blackish; @text-color: @greyText;
@font-family-base: "canada-type-gibson", sans-serif; @font-family-base: "canada-type-gibson", sans-serif;
@font-weight-base: 300; @font-weight-base: @font-weight-light;
@font-weight-light: 300;
@font-weight-normal: 400; @font-weight-normal: 400;
@font-weight-bold: @font-weight-normal; @font-weight-bold: @font-weight-normal;

2
controller/classes/Subtemplate.php
View File

@ -702,7 +702,7 @@ class Subtemplate {
$result = "<section class='subtemplate values'><div class='row'> $result = "<section class='subtemplate values'><div class='row'>
<h1 class='subtemplate__title'>{$subtemplateTitle}</h1> <h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
<div class='grid grid--gutters grid--full grid-small--half'>{$values}</div> <main><div class='grid grid--gutters grid--full grid-small--half'>{$values}</div></main>
</div></section>"; </div></section>";
return $result; return $result;

7
home.php
View File

@ -16,8 +16,11 @@
get_template_part( 'content', 'noposts' ); get_template_part( 'content', 'noposts' );
} }
?> ?>
<div class="nav-previous alignleft"><?php next_posts_link( 'Older posts' ); ?></div>
<div class="nav-next alignright"><?php previous_posts_link( 'Newer posts' ); ?></div> <nav class="pagination grid grid--gutters grid--half">
<div class="grid__col pagination__previous"><?php next_posts_link( 'Older posts' ); ?></div>
<div class="grid__col pagination__next"><?php previous_posts_link( 'Newer posts' ); ?></div>
</nav>
<?php <?php
echo '</div>'; echo '</div>';

2
template-header.php
View File

@ -9,7 +9,7 @@
require 'controller/init.php'; require 'controller/init.php';
?> ?>
<header> <header class="header">
<div class="sticky"> <div class="sticky">
<div class="row"> <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>