dan/windycoys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor CSS to BEM

Browse Source 
Update dependencies
Improve focus and hover states
This commit is contained in:
Dan Head
2018-12-09 14:52:01 +00:00
parent e9f1f6e2fa
commit 6e62b55e60
34 changed files with 3934 additions and 2384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
theme/functions.php
View File

@@ -5,8 +5,8 @@ class Windycoys_Walker extends Walker_Nav_Menu {
$title = $item->post_title;
$uri = get_site_url() . '/' . $item->post_name;
$output .= '<li class="Nav-listItem" role="none">';
$output .= '<a class="Nav-link" href="' . $uri .'" role="menuitem">';
$output .= '<li class="nav__item" role="none">';
$output .= '<a class="nav__link" href="' . $uri .'" role="menuitem">';
$output .= $title . '</a></li>';
}
}
@@ -14,7 +14,7 @@ class Windycoys_Walker extends Walker_Nav_Menu {
function windycoys_nav() {
wp_nav_menu(array(
'container' => 'ul',
'menu_class' => 'Nav-list Nav--subList',
'menu_class' => 'nav__list nav__list--sub-list',
'walker' => new Windycoys_Walker()
));
}
@@ -30,7 +30,7 @@ function windycoys_the_tags() {
}
if ($tags) {
foreach($tags as $key=>$tag) {
echo '<a class="Metadata-categoriesLink" href="' .
echo '<a class="metadata__categories-link" href="' .
home_url() . '/tags/' . $tag->name . '" rel="tag">' .
$tag->name . '</a>';
if ($key < count($tags) - 1) {

20
theme/header.php
View File

@@ -1,14 +1,16 @@
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name'); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' by'; } ?> <?php bloginfo('name'); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#4b88b6">
<meta name="description" content="<?php bloginfo('description'); ?>">
<?php wp_head(); ?>
<meta name="description" content="<?php bloginfo('description'); ?>">
<?php wp_head(); ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
<link href="//fonts.googleapis.com/css?family=Open+Sans|Raleway:700" rel="stylesheet">
</head>
<body>
<?php get_template_part('icons') ?>
</head>
<body>
<header>
<?php get_template_part('icons') ?>
</header>

27
theme/index.php
View File

@@ -1,37 +1,40 @@
<?php get_header() ?>
<main class="Grid">
<section class="Grid-logo">
<main class="page">
<section class="page__logo">
<?php get_template_part('partials/logo') ?>
</section>
<?php while ( have_posts() ) : the_post(); $index++; ?>
<section class="Grid-article">
<article class="Article">
<div class="Article-date">
<svg class="Icon">
<section class="page__article">
<article class="article">
<div class="article__date">
<svg class="icon">
<use href="#icon-calendar"></use>
</svg>
<span class="Article-dateText">
<span class="article__date-text">
<?php the_time(get_option('date_format')) ?>
</span>
</div>
<h1 class="Article-title">
<h1 class="article__title">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h1>
<div class="Article-content">
<div class="article__content">
<?php the_content(__('Continue reading <span class="meta-nav">&raquo;</span>', 'windycoys')); ?>
</div>
</article>
</section>
<section class="Grid-metadata<?php echo ($index === 1 ? ' is-first' : '') ?>">
<section class="page__metadata<?php echo ($index === 1 ? ' is-first' : '') ?>">
<?php get_template_part('partials/metadata') ?>
<div class="page__advert">
<?php get_template_part('partials/ad_wide_skyscraper') ?>
</div>
</section>
<?php endwhile; ?>
<section class="Grid-banner">
<section class="page__banner">
<?php get_template_part('partials/banner') ?>
</section>
<section class="Grid-footer">
<section class="page__footer">
<?php get_template_part('partials/footer') ?>
</section>
</main>

26
theme/page.php
View File

@@ -1,36 +1,36 @@
<?php get_header(); ?>
<main class="Grid">
<section class="Grid-logo">
<main class="page">
<section class="page__logo">
<?php get_template_part('partials/logo') ?>
</section>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<section class="Grid-article">
<article class="Article">
<h1 class="Article-title">
<section class="page__article">
<article class="article">
<h1 class="article__title">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h1>
<div class="Article-content">
<div class="article__content">
<?php the_content(__('Continue reading <span class="meta-nav">&raquo;</span>', 'windycoys')); ?>
</div>
</article>
</section>
<?php endwhile; ?>
<?php else: ?>
<section class="Grid-article">
<article class="Article">
<h1 class="Article-title">Sorry, there is no article to display</h1>
<div class="Article-content">
<a class="Link" href="<?php get_site_url() ?>/">Go back home</a>
<section class="page__article">
<article class="article">
<h1 class="article__title">Sorry, there is no article to display</h1>
<div class="article__content">
<a class="link" href="<?php get_site_url() ?>/">Go back home</a>
</div>
</article>
</section>
<?php endif; ?>
<section class="Grid-banner">
<section class="page__banner">
<?php get_template_part('partials/banner') ?>
</section>
<section class="Grid-footer">
<section class="page__footer">
<?php get_template_part('partials/footer') ?>
</section>
</main>

1
theme/partials/ad_wide_skyscraper.php Normal file
View File

@@ -0,0 +1 @@
<img src="http://via.placeholder.com/160x600" alt="advert">

15
theme/partials/banner.php
View File

@@ -1,18 +1,17 @@
<div class="Social">
<a class="Social-link" href="https://www.facebook.com/WindyCOYS/">
<svg class="Icon Icon--facebook">
<div class="social">
<a class="social__link" href="https://www.facebook.com/WindyCOYS/">
<svg class="icon icon--facebook">
<use href="#icon-facebook"></use>
</svg>
</a>
<a class="Social-link" href="https://twitter.com/windycoys/">
<svg class="Icon Icon--twitter">
<a class="social__link" href="https://twitter.com/windycoys/">
<svg class="icon icon--twitter">
<use href="#icon-twitter"></use>
</svg>
</a>
<a class="Social-link" href="/feed">
<svg class="Icon Icon--rss">
<a class="social__link" href="/feed">
<svg class="icon icon--rss">
<use href="#icon-rss"></use>
</svg>
</a>
</div>

4
theme/partials/footer.php
View File

@@ -1,3 +1,3 @@
<footer class="Footer">
<p class="Footer-text">&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
<footer class="footer">
<p class="footer__text">&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
</footer>

6
theme/partials/logo.php
View File

@@ -1,6 +1,6 @@
<div class="Logo">
<a class="Logo-link" href="<?php echo home_url(); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Logo" class="Logo-image">
<div class="logo">
<a class="logo__link" href="<?php echo home_url(); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Logo" class="logo__image">
</a>
</div>

33
theme/partials/metadata.php
View File

@@ -1,41 +1,40 @@
<section class="Metadata">
<div class="Metadata-date">
<svg class="Icon">
<section class="metadata">
<div class="metadata__date">
<svg class="icon">
<use href="#icon-calendar"></use>
</svg>
<span class="Metadata-dateText">
<span class="metadata__date-text">
<?php the_time(get_option('date_format')) ?>
</span>
</div>
<div class="Metadata-comments">
<a class="Metadata-commentsLink" href="<?php the_permalink() ?>">
<svg class="Icon">
<div class="metadata__comments">
<a class="metadata__comments-link" href="<?php the_permalink() ?>">
<svg class="icon">
<use href="#icon-comments"></use>
</svg>
<span class="Metadata-commentsText">
<span class="metadata__comments-text">
<?php comments_number(); ?>
</span>
</a>
</div>
<div class="Metadata-categories">
<svg class="Icon">
<div class="metadata__categories">
<svg class="icon">
<use href="#icon-hash"></use>
</svg>
<span class="Metadata-categoriesText">
<span class="metadata__categories-text">
<?php windycoys_the_tags() ?>
</span>
</div>
<div class="Metadata-share">
<a class="Metadata-shareLink" href="#">
<svg class="Icon Icon--facebook">
<div class="metadata__share">
<a class="metadata__share-link" href="#" aria-label="Facebook">
<svg class="icon icon--facebook">
<use href="#icon-facebook"></use>
</svg>
</a>
<a class="Metadata-shareLink" href="<?php windycoys_share_twitter_url() ?>">
<svg class="Icon Icon--twitter">
<a class="metadata__share-link" href="<?php windycoys_share_twitter_url() ?>" aria-label="Twitter">
<svg class="icon icon--twitter">
<use href="#icon-twitter"></use>
</svg>
</a>
</div>
</section>

44
theme/partials/navigation.php
View File

@@ -1,41 +1,41 @@
<nav class="Nav" aria-label="Main Navigation">
<button class="Menu">
<span class="Menu-line"></span>
<span class="Menu-line"></span>
<span class="Menu-line"></span>
<span class="Menu-text">Open menu</span>
<nav class="nav" aria-label="Main Navigation">
<button class="menu">
<span class="menu__line"></span>
<span class="menu__line"></span>
<span class="menu__line"></span>
<span class="menu__text">Open menu</span>
</button>
<div class="Nav-content">
<h2 class="Nav-title">
<a class="Nav-titleLink" href="<?php get_site_url() ?>/" aria-label="Navigation title" tabindex="-1">
<div class="nav__content">
<h2 class="nav__title">
<a class="nav__title-link" href="<?php get_site_url() ?>/" aria-label="Navigation title" tabindex="-1">
<?php bloginfo('name') ?>
</a>
</h2>
<ul class="Nav-list" role="menubar">
<li class="Nav-listItem" role="none">
<a class="Nav-link" href="<?php get_site_url() ?>/" role="menuitem">Home</a>
<ul class="nav__list" role="menubar">
<li class="nav__list-item" role="none">
<a class="nav__link" href="<?php get_site_url() ?>/" role="menuitem">Home</a>
<?php windycoys_nav() ?>
</li>
</ul>
<div class="Nav-social">
<a class="Nav-socialLink" href="https://www.facebook.com/WindyCOYS/">
<svg class="Icon Icon--large">
<div class="nav__social">
<a class="nav__social-link" href="https://www.facebook.com/WindyCOYS/">
<svg class="icon icon--large">
<use href="#icon-facebook"></use>
</svg>
</a>
<a class="Nav-socialLink" href="https://twitter.com/windycoys/">
<svg class="Icon Icon--large">
<a class="nav__social-link" href="https://twitter.com/windycoys/">
<svg class="icon icon--large">
<use href="#icon-twitter"></use>
</svg>
</a>
</div>
<div class="Nav-search">
<div class="nav__search">
<?php get_search_form() ?>
</div>
<button class="Nav-close">
<span class="Nav-closeBar"></span>
<span class="Nav-closeBar"></span>
<span class="Nav-closeText">Close menu</span>
<button class="nav__close">
<span class="nav__close-bar"></span>
<span class="nav__close-bar"></span>
<span class="nav__close-text">Close menu</span>
</button>
</div>
</nav>

8
theme/searchform.php
View File

@@ -1,9 +1,9 @@
<form id="searchform" role="search" method="get" action="<?php get_site_url()?>">
<div class="Search">
<label class="Search-label" for="searchinput">
<div class="search">
<label class="search__label" for="searchinput">
Search
</label>
<input id="searchinput" class="Search-input" name="s" type="text" placeholder="Search">
<input id="searchsubmit" class="Search-submit" value="Search" type="submit">
<input id="searchinput" class="search__input" name="s" type="text" placeholder="Search">
<input id="searchsubmit" class="search__submit" value="Search" type="submit">
</div>
</form>

34
theme/single.php
View File

@@ -1,47 +1,47 @@
<?php get_header(); ?>
<main class="Grid">
<section class="Grid-logo">
<main class="page">
<section class="page__logo">
<?php get_template_part('partials/logo') ?>
</section>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<section class="Grid-article">
<article class="Article">
<div class="Article-date">
<svg class="Icon">
<section class="page__article">
<article class="article">
<div class="article__date">
<svg class="icon">
<use href="#icon-calendar"></use>
</svg>
<span class="Article-dateText">
<span class="article__date-text">
<?php the_time(get_option('date_format')) ?>
</span>
</div>
<h1 class="Article-title">
<h1 class="article__title">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h1>
<div class="Article-content">
<div class="article__content">
<?php the_content(__('Continue reading <span class="meta-nav">&raquo;</span>', 'windycoys')); ?>
</div>
</article>
</section>
<section class="Grid-metadata is-first">
<section class="page__metadata is-first">
<?php get_template_part('partials/metadata') ?>
</section>
<?php endwhile; ?>
<?php else: ?>
<section class="Grid-article">
<article class="Article">
<h1 class="Article-title">Sorry, there is no article to display</h1>
<div class="Article-content">
<a class="Link" href="<?php get_site_url() ?>/">Go back home</a>
<section class="page__article">
<article class="article">
<h1 class="article__title">Sorry, there is no article to display</h1>
<div class="article__content">
<a class="link" href="<?php get_site_url() ?>/">Go back home</a>
</div>
</article>
</section>
<?php endif; ?>
<section class="Grid-banner">
<section class="page__banner">
<?php get_template_part('partials/banner') ?>
</section>
<section class="Grid-footer">
<section class="page__footer">
<?php get_template_part('partials/footer') ?>
</section>
</main>