1
0
mirror of https://github.com/ascribe/wp-theme synced 2024-12-22 09:13:38 +01:00

so many more fixes & cleanup

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

View File

@ -24,6 +24,7 @@
@import 'ascribe/_footer.less';
@import 'ascribe/_hero.less';
@import 'ascribe/_header.less';
@import 'ascribe/_subtemplates.less';
@import 'ascribe/_feature-circles.less';
@import 'ascribe/_team.less';
@ -31,192 +32,7 @@
@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
.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 {
.copyTextMedium;
@ -672,6 +436,11 @@
}
}
.values {
padding-bottom: @spacer;
}
.value {
h1 {
&:extend(.fontRegular);
@ -703,12 +472,12 @@
}
ul {
list-style: none;
&:extend(.list-unstyled all);
}
}
.contact {
label {
.copyTextSmall;
&:extend(.small);
&.required {
&:after {
@ -918,7 +687,7 @@
//
.short-descriptions {
&:extend(.text-center);
padding-bottom: 0;
padding-bottom: @spacer;
}
.short-description {

View File

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

View File

@ -1,22 +1,13 @@
a {
text-decoration: none;
color: @blueBright;
&:hover {
color: @pink;
}
}
//FONTS
// FONTS
.fontLight {
font-family: "canada-type-gibson",sans-serif;
font-weight: 200;
font-family: @font-family-base;
font-weight: @font-weight-light;
}
.fontRegular {
font-family: "canada-type-gibson",sans-serif;
font-weight: 400;
font-family: @font-family-base;
font-weight: @font-weight-normal;
}
// GENERAL TEXT STYLES
@ -74,29 +65,6 @@ a {
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 {
&:extend(.fontLight);
font-size: 30px;

View File

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

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

View File

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

View File

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

View File

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

View File

@ -40,10 +40,11 @@
@line-height-small: 22px;
@line-height-large: 26px;
@text-color: @blackish;
@text-color: @greyText;
@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-bold: @font-weight-normal;

View File

@ -702,7 +702,7 @@ class Subtemplate {
$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>
<main><div class='grid grid--gutters grid--full grid-small--half'>{$values}</div></main>
</div></section>";
return $result;

View File

@ -16,8 +16,11 @@
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
echo '</div>';

View File

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