This commit is contained in:
Ben Goldsworthy 2017-01-12 23:13:02 +00:00
parent f53ae91057
commit df05493b43
10 changed files with 520 additions and 619 deletions

View file

@ -21,7 +21,7 @@ get_header(); ?>
<div id="primary" class="content-area">
<header class="page-header">
<?php
the_archive_title( '<h2 class="page-title">', '</h2>' );
the_archive_title( '<h1 id="page-title">', '</h1>' );
the_archive_description( '<div class="taxonomy-description entry-content">', '</div>' );
?>
</header><!-- .page-header -->

View file

@ -10,106 +10,101 @@
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<div class="site-inner">
<div id="content" class="site-content">
<div id="primary" class="content-area">
<main id="main wrapper" class="site-main wrapper-home" role="main">
<header class="row" id="header-row">
<div class="col-m-3">
<div id="frontpage-img-wrapper">
<img id="frontpage-img" src="http://www.bengoldsworthy.uk/wp-content/uploads/2016/09/mebg.png" alt="A picture of Ben Goldsworthy">
</div>
</div>
<div class="page-header col-m-9 col-w-6">
<h1>Ben Goldsworthy</h1>
<h5>
~ <a href="mailto:bgoldsworthy96@gmail.com"><i class="fa fa-envelope"></i></a> ~
<a href="bitcoin:1HApEg2robrRCx4rTKKeFj25unoaX65QUc"><i class="fa fa-btc"></i></a> ~
<a href="https://www.facebook.com/Rumperuu"><i class="fa fa-facebook-official"></i></a> ~
<a href="https://twitter.com/rumperuu"><i class="fa fa-twitter"></i></a> ~
<a href="https://uk.linkedin.com/in/rumperuu"><i class="fa fa-linkedin"></i></a> ~
<a href="https://github.com/Rumperuu"><i class="fa fa-github"></i></a> ~
<i class="fa fa-key"></i> 7FDCE988
</h5>
</div>
</header>
<div class="row" id="blog-row">
<ul class="col-2">
<li><a id="blog" class="button big-button button-1" href="blog">Blog</a></li>
</ul>
</div>
<div class="row" id="portfolios-row">
<div class="col-12">
<h5>Portfolios</h5>
<ul>
<?php
$portfolios = array("website", "program", "writing", "video", "other");
$num = 2;
$args = array(
'public' => true,
'_builtin' => false
);
foreach (get_post_types($args, 'objects', 'and') as $post_type) {
if (in_array($post_type->name, $portfolios)) {
$num = array_search($post_type->name, $portfolios);
$buttons[$post_type->name] = "<li><a id=\"".($post_type->name)."\" class=\"button big-button button-".($num+2)."\" href=\"".($post_type->name)."\">".($post_type->labels->name)."</a></li>";
}
}
foreach ($portfolios as $portfolio) {
echo "<div class=\"col-m-6 col-2 col-w-1\">";
echo $buttons[$portfolio];
echo "</div>";
}
?>
</ul>
</div>
</div>
<div class="row" id="experience-row">
<div class="col-12">
<h5>Experience</h5>
<ul>
<div class="col-m-6 col-2 col-w-1">
<li><a id="all" class="button big-button button-2" href="experience">All (WIP)</a></li>
</div>
<div class="col-m-6 col-2">
<li><a id="company" class="button med-button button-3" href="experience-by-companies">by Company (WIP)</a></li>
</div>
<div class="col-m-6 col-2">
<li><a id="country" class="button med-button button-4" href="experience-by-countries">by Country (WIP)</a></li>
</div>
<div class="col-m-6 col-2">
<li><a id="sector" class="button med-button button-5" href="experience-by-sector">by Sector (WIP)</a></li>
</div>
</ul>
</div>
<div id="content" class="site-content">
<main id="main wrapper" class="site-main wrapper-home" role="main">
<header class="row" id="header-row">
<div class="col-m-3">
<div id="frontpage-img-wrapper">
<img id="frontpage-img" src="http://www.bengoldsworthy.uk/wp-content/uploads/2016/09/mebg.png" alt="A picture of Ben Goldsworthy">
</div>
<div class="row" id="others-row">
<div class="col-12">
<ul>
<div class="col-m-6 col-2">
<li><a id="certifications" class="button big-button button-3" href="qualification">Qualifications (WIP)</a></li>
</div>
<div class="col-m-6 col-2">
<li><a id="awards" class="button big-button button-4" href="award">Awards (WIP)</a></li>
</div>
</ul>
</div>
<div class="page-header col-m-9 col-w-6">
<h1 id="website-title">Ben Goldsworthy</h1>
<h2 id="page-subtitle">
~ <a href="mailto:bgoldsworthy96@gmail.com"><i class="fa fa-envelope"></i></a> ~
<a href="bitcoin:1HApEg2robrRCx4rTKKeFj25unoaX65QUc"><i class="fa fa-btc"></i></a> ~
<a href="https://www.facebook.com/Rumperuu"><i class="fa fa-facebook-official"></i></a> ~
<a href="https://twitter.com/rumperuu"><i class="fa fa-twitter"></i></a> ~
<a href="https://uk.linkedin.com/in/rumperuu"><i class="fa fa-linkedin"></i></a> ~
<a href="https://github.com/Rumperuu"><i class="fa fa-github"></i></a> ~
<i class="fa fa-key"></i> 7FDCE988 ~
</h2>
</div>
</header>
<div class="row" id="blog-row">
<ul class="col-2">
<li><a id="blog" class="hyperlink-button" href="blog">Blog</a></li>
</ul>
</div>
<div class="row" id="portfolios-row">
<div class="col-12">
<h5>Portfolios</h5>
<ul>
<?php
$portfolios = array("website", "program", "writing", "video", "other");
$num = 2;
$args = array(
'public' => true,
'_builtin' => false
);
foreach (get_post_types($args, 'objects', 'and') as $post_type) {
if (in_array($post_type->name, $portfolios)) {
$num = array_search($post_type->name, $portfolios);
$buttons[$post_type->name] = "<li><a id=\"".($post_type->name)."\" class=\"hyperlink-button\" href=\"".($post_type->name)."\">".($post_type->labels->name)."</a></li>";
}
}
foreach ($portfolios as $portfolio) {
echo "<div class=\"col-m-6 col-2 col-w-1\">";
echo $buttons[$portfolio];
echo "</div>";
}
?>
</ul>
</div>
</div>
<div class="row" id="experience-row">
<div class="col-12">
<h5>Experience</h5>
<ul>
<div class="col-m-6 col-2 col-w-1">
<li><a id="all" class="hyperlink-button" href="experience">All (WIP)</a></li>
</div>
</div>
<div class="row" id="icons-row">
<div class="icons-wrapper col-12 col-m-12">
<ul>
<li><a href="https://www.goodreads.com/Rumperuu"><div class="icon" style="background-image: url('http://www.bengoldsworthy.uk/wp-content/uploads/2016/09/gr.png');"></div></a></li>
<li><a href="http://letterboxd.com/Rumperuu/"><div class="icon" style="background-image: url('http://www.bengoldsworthy.uk/wp-content/uploads/2016/09/lb.png');"></div></a></li>
<li><a href="https://www.grouvee.com/user/Rumperuu/"><div class="icon" style="background-image: url('http://www.bengoldsworthy.uk/wp-content/uploads/2016/09/gv.png');"></div></a></li>
<li><a href="http://www.last.fm/user/Rumperuu"><div class="icon" style="background-image: url('http://www.bengoldsworthy.uk/wp-content/uploads/2016/09/lfm.png');"></div></a></li>
<li><a href="http://followmy.tv/u/Rumperuu"><div class="icon" style="background-image: url('http://www.bengoldsworthy.uk/wp-content/uploads/2016/09/fmtv.png');"></div></a></li>
</ul>
<div class="col-m-6 col-2">
<li><a id="company" class="hyperlink-button" href="experience-by-companies">by Company (WIP)</a></li>
</div>
</div>
</main><!-- .site-main -->
</div><!-- .content-area -->
<div class="col-m-6 col-2">
<li><a id="country" class="hyperlink-button" href="experience-by-countries">by Country (WIP)</a></li>
</div>
<div class="col-m-6 col-2">
<li><a id="sector" class="hyperlink-button" href="experience-by-sector">by Sector (WIP)</a></li>
</div>
</ul>
</div>
</div>
<div class="row" id="others-row">
<div class="col-12">
<ul>
<div class="col-m-6 col-2">
<li><a id="certifications" class="hyperlink-button" href="qualification">Qualifications (WIP)</a></li>
</div>
<div class="col-m-6 col-2">
<li><a id="awards" class="hyperlink-button" href="award">Awards (WIP)</a></li>
</div>
</ul>
</div>
</div>
<div class="row" id="icons-row">
<div class="icons-wrapper col-12 col-m-12">
<ul>
<li><a href="https://www.goodreads.com/Rumperuu"><div class="icon" style="background-image: url('http://www.bengoldsworthy.uk/wp-content/uploads/2016/09/gr.png');"></div></a></li>
<li><a href="http://letterboxd.com/Rumperuu/"><div class="icon" style="background-image: url('http://www.bengoldsworthy.uk/wp-content/uploads/2016/09/lb.png');"></div></a></li>
<li><a href="https://www.grouvee.com/user/Rumperuu/"><div class="icon" style="background-image: url('http://www.bengoldsworthy.uk/wp-content/uploads/2016/09/gv.png');"></div></a></li>
<li><a href="http://www.last.fm/user/Rumperuu"><div class="icon" style="background-image: url('http://www.bengoldsworthy.uk/wp-content/uploads/2016/09/lfm.png');"></div></a></li>
<li><a href="http://followmy.tv/u/Rumperuu"><div class="icon" style="background-image: url('http://www.bengoldsworthy.uk/wp-content/uploads/2016/09/fmtv.png');"></div></a></li>
</ul>
</div>
</div>
</main><!-- .site-main -->
</div><!-- .content-area -->
<?php get_footer(); ?>

View file

@ -32,6 +32,10 @@ if ( version_compare( $GLOBALS['wp_version'], '4.4-alpha', '<' ) ) {
require get_template_directory() . '/inc/back-compat.php';
}
global $themecolors;
$themecolors['bg'] = '95b2bf';
$themecolors['text'] = '2b0000';
if ( ! function_exists( 'twentysixteen_setup' ) ) :
/**
* Sets up theme defaults and registers support for various WordPress features.

View file

@ -10,8 +10,8 @@
* @link http://codex.wordpress.org/Template_Hierarchy
*
* @package WordPress
* @subpackage Ben_Goldsworthy
* @since Ben Goldsworthy 1.0
* @subpackage Omphaloskepsis
* @since Omphaloskepsis 1.0
*/
?>
<!DOCTYPE html>
@ -27,34 +27,29 @@
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<div class="site-inner">
<div id="content" class="site-content">
<div id="primary" class="content-area">
<header class="page-header">
<h2>Blog</h2>
</header>
<main id="main" class="site-main index row" role="main">
<?php if ( have_posts() ) : ?>
<?php
// Start the loop.
while ( have_posts() ) : the_post();
/*
* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'template-parts/content', get_post_format() );
// End the loop.
endwhile;
// If no content, include the "No posts found" template.
else :
get_template_part( 'template-parts/content', 'none' );
endif;
?>
</main><!-- .site-main -->
</div><!-- .content-area -->
<div id="content" class="site-content">
<header class="page-header">
<h1 id="page-title">Blog</h1>
</header>
<main id="main" class="site-main index row" role="main">
<?php if ( have_posts() ) : ?>
<?php
// Start the loop.
while ( have_posts() ) : the_post();
/*
* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'template-parts/content', get_post_format() );
// End the loop.
endwhile;
// If no content, include the "No posts found" template.
else :
get_template_part( 'template-parts/content', 'none' );
endif;
?>
</main><!-- .site-main -->
</div><!-- .content-area -->
<?php get_footer(); ?>

View file

@ -20,7 +20,7 @@ get_header(); ?>
$loop = new WP_Query( $args );
?>
<div class="post-header-title"><h2>Experience</h2><h5 style="text-align: center;">by company</h5></div>
<div class="post-header-title"><h1 id="page-title">Experience</h1><h2 id="page-subtitle">by company</h2></div>
<?php
$terms = apply_filters("taxonomy-images-get-terms", "", array('having_images' => false, 'taxonomy' => 'company', 'term_args' => array('parent' => 0)));
if ( ! empty( $terms ) ) {

View file

@ -25,7 +25,7 @@ get_header(); ?>
$loop = new WP_Query( $args );
?>
<div class="post-header-title"><?php the_title( '<h2>', '</h2>' ); ?></div>
<div class="post-header-title"><?php the_title( '<h1 id="page-title">', '</h1>' ); ?></div>
<?php/*$terms = apply_filters( 'taxonomy-images-get-terms', '', array('having_images' => false, 'taxonomy' => 'company'));
if ( ! empty( $terms ) ) {
print '<ul>';

865
style.css
View file

@ -1,7 +1,60 @@
/**
* The main stylesheet
*
* This is the main stylesheet for the entire Theme.
*
* @package WordPress
* @subpackage Omphaloskepsis
* @since Omphaloskepsis 1.0
*
* Contents
* ========
*
* 1. Constants
* 2. Globals
* 2.1 Containers
* 2.2.1 Fluid Grid
* 2.2.2 Main Containers
* 2.2 Text
* 2.2.1 Headings
* 2.2.2 Regular Text
* 2.2.3 Special Text
* 2.2.4 Links
* 2.3 Images
* [...]
*
*/
/*******************************************************************************
* 1. Constants
*/
:root {
--light: #95b2bf;
--dark: #003D52;
--text: #2B0000;
--dark: #003d52;
--text: #2b0000;
--linktext: #666666;
}
/*******************************************************************************
* 2. Globals
*/
/***************************************
* 2.1 Containers
*/
/******************
* 2.1.1 Fluid Grid
*
* <767px Mobile Phone
* 768px Tablet
* 1024px Laptop
* 1444px Desktop
*/
* {
box-sizing: border-box;
}
.row::after {
@ -10,49 +63,327 @@
display: block;
}
* {
box-sizing: border-box;
/* Source: W3Schools */
[class*="col-"] {
float: left;
padding-right: 15px;
padding-left: 15px;
width: 100%;
}
/*
* 1. Animations
*/
@keyframes slideinandfade {
from { margin-left: -25px; opacity: 0; }
to { margin-left: 0px; opacity: 1; }
}
@keyframes slideinandfadebutton {
from { margin-left: -25px; opacity: 0; }
to { margin-left: 0px; opacity: 0.7; }
}
@keyframes fadeinanddarken {
from {
opacity: 0;
background: rgba(255,255,255,0);
} to {
opacity: 1;
background: rgba(255,255,255,0.5);
}
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
@media only screen and (min-width: 768px) {
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
/*
* 2. Main
@media only screen and (min-width: 1024px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
@media only screen and (min-width: 1444px) {
.col-w-1 {width: 8.33%;}
.col-w-2 {width: 16.66%;}
.col-w-3 {width: 25%;}
.col-w-4 {width: 33.33%;}
.col-w-5 {width: 41.66%;}
.col-w-6 {width: 50%;}
.col-w-7 {width: 58.33%;}
.col-w-8 {width: 66.66%;}
.col-w-9 {width: 75%;}
.col-w-10 {width: 83.33%;}
.col-w-11 {width: 91.66%;}
.col-w-12 {width: 100%;}
}
/* End Source */
/******************
* 2.1.2 Main Containers
*/
body {
background-color: #fff;
height: 100%;
font-family: 'Lato', sans-serif;
margin: 0;
background-color: white;
height: 100%;
margin: 0;
}
figure {
margin-top: 10px;
margin-bottom: 10px;
width: auto !important;
}
figcaption {
font-size: 0.8em;
color: #555;
font-style: italic;
}
/***************************************
* 2.2 Text
*/
/******************
* 2.2.1 Headings
*/
h1, h2, h3, h3 a, h4, h5 {
margin: 0;
font-family: 'Montserrat', sans-serif;
color: var(--dark);
}
#website-title {
margin-left: 25px;
text-align: center;
font-size: 8em;
font-weight: bold;
text-shadow: -1px -1px 0 white,
1px -1px 0 white,
-1px 1px 0 white,
1px 1px 0 white;
}
#page-title {
text-align: center;
font-size: 6em;
}
#page-subtitle {
margin-left: 10px;
text-align: center;
font-size: 1.2em;
color: var(--light);
}
#post-title {
font-size: 6em;
text-align: center;
background-color: #000;
vertical-align: middle;
color: white;
padding: 5px 0 16px 5px;
text-shadow: 0px 2px 5px rgba(0,0,0,0.5);
}
.post-title,
.subheading {
font-size: 2em;
margin: 0;
text-decoration: none !important;
}
.post-title.small { font-size: 1.4em; }
.post-title.vsmall { font-size: 1em; }
.subheading-subtitle {
color: var(--light);
}
/******************
* 2.2.2 Regular Text
*/
p {
font-size: 1em;
color: var(--text);
padding: 0.5em;
line-height: 1.2em;
}
strong { font-weight: bold; }
sup, sup {
font-size:xx-small;
line-height: 1.2em;
}
sup { vertical-align:top; }
sub { vertical-align:bottom; }
/******************
* 2.2.3 Special Text
*/
code,
samp,
var {
font-family: "Lucida Console", Monaco, monospace;
font-size: 1em;
background-color: #d1d1d1;
border-radius: 5px;
padding: 2px 2px;
}
.heading code,
.subheading code {
background-color: transparent;
}
samp {
display: block;
width: 80ch;
margin: 1em 4em 1em 4em;
border-left: 2px solid #ccc;
color: #333;
}
/* Source: Stack Overflow */
kbd {
padding: 0.1em 0.6em;
border: 1px solid #ccc;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
background-color: #f7f7f7;
color: #333;
box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px white inset;
border-radius: 3px;
display: inline-block;
margin: 0 0.1em;
text-shadow: 0 1px 0 white;
line-height: 1.4;
white-space: nowrap;
}
/* End Source */
blockquote {
margin: 1em 4em 1em 4em;
border-left: 2px solid var(--dark);
}
blockquote:first-of-type {
margin: 2em 4em 2em 4em;
font-size: 1.2em;
font-style: italic;
border-left: 0;
}
blockquote footer {
text-align: right;
margin-right: 10%;
font-style: normal;
}
blockquote footer:before {
content: '—';
}
q, blockquote {
quotes: "“" "”" "" "";
}
q.guillemets {
quotes: "«" "»" "«" "»";
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}
cite:not(.smallcite), i, em { font-style: italic; }
cite.smallcite:before { content: '“'; }
cite.smallcite:after { content: '”'; }
.note {
width: 80%;
background-color: #fc6f73;
padding: 20px;
text-align: center;
margin: auto;
border-radius: 20px;
border: 2px dashed #000;
}
/******************
* 2.2.4 Links
*/
a {
font-weight: bold;
color: var(--dark);
padding: 0;
opacity: 0.7;
}
a:hover {
opacity: 1;
}
.subheading a {
color: var(--light);
font-size: 0.4em;
vertical-align: middle;
text-decoration: underline;
}
.hyperlink-button, .post-edit-link {
float: left;
margin: 10px 20px 10px 0px;
padding: 20px 30px 20px 30px;
border-radius: 35px;
border: 2px solid var(--dark);
background-color: var(--light);
color: var(--dark);
text-decoration: none;
}
/*
* UNFINISHED
*/
.author a {
border-radius: 0 35px 35px 0;
background-color: #95b2bf;
padding: 3px 20px 3px 20px;
color: #003D52;
margin-left: -5px;
}
.edit-link {
float: right;
line-height: 3.6em;
margin-right: 30px;
}
.posted-on a {
color: #666;
padding: 3px 20px 3px 20px;
font-size: 0.8em;
}
.posted-on a:before, .posted-on a:after {
content: ' — ';
}
.posted-on a:hover {
color: #999;
}
.index article {
@ -88,385 +419,6 @@ body {
filter: none;
}
.full-wrapper {
width: 100%;
overflow: hidden;
clear: both;
}
.half-wrapper {
width: 50%;
float: left;
min-height: 70%;
max-height: 70%;
}
#left-wrapper {
opacity: 0.75;
}
#right-wrapper {
overflow: scroll;
}
/*
* 3. Text
*/
/*
* 3.x General
*/
p, .entry-content ul li {
font-size: 1em;
color: #333;
padding: 0.5em;
line-height: 1.2em;
}
strong {
font-weight: bold;
}
:not(h2) code, samp, var {
font-family: "Lucida Console", Monaco, monospace;
font-size: 1em;
background-color: #d1d1d1;
border-radius: 5px;
padding: 2px 2px;
}
h2 code, h3 code {
background-color: transparent;
}
samp {
display: block;
width: 80ch;
margin: 1em 4em 1em 4em;
border-left: 2px solid #ccc;
color: #333;
}
/* Shamelessly stolen from StackOverflow's CSS */
kbd {
padding:0.1em 0.6em;
border:1px solid #ccc;
font-size:11px;
font-family:Arial,Helvetica,sans-serif;
background-color:#f7f7f7;
color:#333;
-moz-box-shadow:0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
-webkit-box-shadow:0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
box-shadow:0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
display:inline-block;
margin:0 0.1em;
text-shadow:0 1px 0 #fff;
line-height:1.4;
white-space:nowrap;
}
sup, sup { font-size:xx-small; line-height: 1.2em; }
sup { vertical-align:top; }
sub { vertical-align:bottom; }
/*
* 3.x Headings
*/
h1, h2, h3, h3 a, h4, h5 {
color: var(--dark);
font-family: 'Montserrat', sans-serif;
margin: 0;
}
h1 {
text-align: center;
font-size: 8em;
margin-left: 25px;
font-weight: bold;
text-shadow: -1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff;
animation: slideinandfade 1.2s both;
}
h2 {
font-size: 6em;
text-align: center;
animation: slideinandfade 1.2s both;
}
.row-item h2 {
font-variant: small-caps;
margin: 10px 0 10px 45px;
}
@media all and (max-width: 1060px) {
h1 {
font-size: 7.5em;
}
}
@media all and (max-width: 992px) {
h1 {
font-size: 7em;
}
}
@media all and (max-width: 980px) {
h1 {
font-size: 6em;
}
}
@media all and (max-width: 800px) {
h1 {
font-size: 5em;
}
h2 {
font-size: 5em;
}
}
@media all and (max-width: 700px) {
h1 {
font-size: 4em;
}
h2 {
font-size: 4em;
}
}
@media all and (max-width: 600px) {
h1 {
font-size: 4em;
}
}
@media all and (max-width: 540px) {
h1 {
font-size: 3em;
}
h2 {
font-size: 3em;
}
}
@media all and (max-width: 410px) {
h1 {
font-size: 2.5em;
}
}
h3 {
font-size: 2em;
margin: 0;
}
h3.small {
font-size: 1.4em;
}
h3.vsmall {
font-size: 1em;
}
h3 a {
color: var(--light);
font-size: 0.4em;
vertical-align: middle;
text-decoration: underline;
}
h3 a:hover {
color: var(--dark);
}
h4 {
padding: 0.5rem;
font-size: 2.6em;
clear: both;
text-align: center;
}
h5 {
color: #ddd;
font-size: 1.2em;
margin-left: 10px;
}
.post-title {
text-decoration: none;
padding: 0;
}
.post-title:hover {
color: #c1e5f4;
}
.post-header-image .post-header-title h2 {
background-color: #000;
vertical-align: middle;
color: #fff;
padding: 5px 0 16px 5px;
text-shadow: 0px 2px 5px rgba(0,0,0,0.5);
}
/*
* 3.x Links & Buttons
*/
a {
text-decoration: none;
font-weight: bold;
}
button {
cursor: pointer;
}
button.active {
background-color: #00ff00;
}
button.inactive {
background-color: #ff0000;
}
a.button, .post-edit-link {
background-color: #95b2bf;
color: #003D52;
padding: 3px 20px 3px 20px;
border-radius: 35px;
opacity: 0.7;
}
a.button:hover, .post-edit-link:hover {
opacity: 1;
}
.big-button,
.med-button {
float: left;
border-radius: 35px !important;
text-decoration: none;
opacity: 0.7;
}
.big-button {
padding: 20px 30px 20px 30px !important;
margin: 10px 20px 10px 0px;
}
.med-button {
padding: 12px 30px 12px 30px !important;
margin: 20px 20px 20px 0px;
font-weight: normal;
}
.big-button:hover,
.med-button:hover {
opacity: 1 !important;
}
.author a {
border-radius: 0 35px 35px 0;
background-color: #95b2bf;
padding: 3px 20px 3px 20px;
color: #003D52;
margin-left: -5px;
}
.entry-content a:not(.button) {
border-radius: 0;
color: #666;
padding: 0;
text-decoration: underline;
}
.entry-content a:hover {
color: #999;
}
.edit-link {
float: right;
line-height: 3.6em;
margin-right: 30px;
}
.posted-on a {
color: #666;
padding: 3px 20px 3px 20px;
font-size: 0.8em;
}
.posted-on a:before, .posted-on a:after {
content: ' — ';
}
.posted-on a:hover {
color: #999;
}
/*
* 3.x Quotes
*/
blockquote {
margin: 1em 4em 1em 4em;
border-left: 2px solid #003D52;
color: #333;
}
.blog-post .entry-content blockquote:first-child {
margin: 2em 4em 2em 4em;
font-size: 1.2em;
font-style: italic;
border-left: 0;
}
blockquote footer {
text-align: right;
margin-right: 10%;
font-style: normal;
}
q, blockquote {
quotes: "“" "”" "" "";
}
blockquote footer:before {
content: '—';
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}
q.guillemets, blockquote.guillemets {
quotes: "«" "»" "«" "»";
}
/*
* 3.x Citations
*/
cite, i, em {
font-style: italic;
}
cite.smallcite {
font-style: normal;
}
cite.smallcite:before {
content: '“';
}
cite.smallcite:after {
content: '”';
}
/*
* 3.x Other
*/
.note {
width: 80%;
background-color: #fc6f73;
padding: 20px;
text-align: center;
margin: auto;
border-radius: 20px;
border: 2px dashed #000;
}
.note a {
background-color: transparent !important;
color: #000 !important;
}
.note a:hover {
color: #555 !important;
}
/*
* 4. Images
*/
@ -546,26 +498,13 @@ cite.smallcite:after {
display: block;
}
figure {
margin-top: 10px;
margin-bottom: 10px;
width: auto !important;
}
figure img {
}
.blog-post .entry-content img {
height: auto;
max-width: 100%;
}
figcaption {
font-size: 0.8em;
color: #555;
font-style: italic;
}
.sampler {
width: 100%;
height: 60vh;
@ -1034,57 +973,38 @@ float: right;
min-height: 140px;
}
/* phone and above */
[class*="col-"] {
float: left;
padding-right: 15px;
padding-left: 15px;
width: 100%;
}
/* tablet and above */
/*******************************************************************************
* x. Media Queries
*
* <767px Mobile Phone
* 768px Tablet
* 1024px Laptop
* 1444px Desktop
*/
@media only screen and (min-width: 768px) {
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
h1 { text-align: left; }
h1 {
text-align: left;
}
.blog-post .entry-content {
width: 80%;
max-width: 1124px;
}
}
/* laptop and above */
@media only screen and (min-width: 1024px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
#frontpage-img-wrapper { display: none; }
h5 {
text-align: left;
}
#frontpage-img-wrapper {
display: none;
}
.wrapper-home {
background-size: contain;
background-repeat: no-repeat;
background-position: right top;
background-image: url("http://www.bengoldsworthy.uk/wp-content/uploads/2016/09/mebg.png");
}
h5 { text-align: left; }
.blog-post .entry-content {
padding: 20px 40px;
background-color: #95b2bf;
@ -1092,20 +1012,7 @@ float: right;
}
}
/* desktop and above */
@media only screen and (min-width: 1444px) {
.col-w-1 {width: 8.33%;}
.col-w-2 {width: 16.66%;}
.col-w-3 {width: 25%;}
.col-w-4 {width: 33.33%;}
.col-w-5 {width: 41.66%;}
.col-w-6 {width: 50%;}
.col-w-7 {width: 58.33%;}
.col-w-8 {width: 66.66%;}
.col-w-9 {width: 75%;}
.col-w-10 {width: 83.33%;}
.col-w-11 {width: 91.66%;}
.col-w-12 {width: 100%;}
.wrapper-home .row {
margin-bottom: 20px;
}

View file

@ -95,7 +95,7 @@ $i = 0;
<main id="company-main" class="site-main" role="main">
<header class="page-header">
<?php
echo "<h2 class=\"page-title\">".get_queried_object()->name."</h2>";
echo "<h1 id=\"page-title\">".get_queried_object()->name."</h1>";
the_archive_description( '<div class="taxonomy-description entry-content">', '</div>' );
?>
</header><!-- .page-header -->
@ -103,7 +103,7 @@ $i = 0;
<div class="row">
<div id="timeline" class="col-10 col-m-9"><img class="loading" src="/wp-content/uploads/2016/12/ajax-loader.gif"></div>
<div class="index col-2 col-m-3" id="companies-grid-small">
<h4>Children</h4>
<h2 class="subheading">Children</h2>
<ul class="row">
<?php
$children = apply_filters("taxonomy-images-get-terms", "", array('having_images' => false, 'taxonomy' => 'company', 'term_args' => array('child_of' => get_queried_object()->term_id)));
@ -126,7 +126,7 @@ $i = 0;
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) :
echo "<div class=\"col-10 col-m-9\">";
echo "<h3>".ucwords($currSec)."s <a href=\"/$currSec?company=".get_queried_object()->slug."\">View all ".$loop->post_count."</a></h3>";
echo "<h2 class=\"subheading\">".ucwords($currSec)."s <a href=\"/$currSec?company=".get_queried_object()->slug."\">View all ".$loop->post_count."</a></h2>";
echo "<div class=\"index\">";
while ( $loop->have_posts() ) : $loop->the_post();
get_template_part( 'template-parts/content', get_post_format() );

View file

@ -12,7 +12,7 @@
<header class="entry-header">
<div class="post-header-image" style="background-image: url('<?php the_post_thumbnail_url(); ?>');">
<div class="post-header-title"><?php the_title( '<h2>', '</h2>' ); ?></div>
<div class="post-header-title"><?php the_title( '<h1 id="post-title">', '</h1>' ); ?></div>
<div class="read-on"><a href="#body"><div class="arrow-down"></div></a></div>
</div>
</header><!-- .entry-header -->

View file

@ -8,7 +8,7 @@
*/
?>
<div class="col-m-4 col-3 col-w-5">
<div class="col-m-6 col-4 col-w-3">
<a href="<?php the_permalink(); ?>">
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> style="background-image: url('<?php the_post_thumbnail_url(); ?>');">
<header class="entry-header">
@ -17,9 +17,9 @@
<?php endif; ?>
<?php
if (strlen(get_the_title()) > 70) $small= "class=\"vsmall\"";
elseif (strlen(get_the_title()) > 35) $small = "class=\"small\"";
the_title( '<h3 '.$small.'>', '</h3>' );
if (strlen(get_the_title()) > 70) $small= "vsmall";
elseif (strlen(get_the_title()) > 35) $small = "small";
the_title( '<h2 class="post-title '.$small.'">', '</h2>' );
?>
</header><!-- .entry-header -->
</article><!-- #post-## -->