Refactor CSS to BEM

Update dependencies
Improve focus and hover states
This commit is contained in:
2018-12-09 14:52:01 +00:00
parent e9f1f6e2fa
commit 6e62b55e60
34 changed files with 3934 additions and 2384 deletions

View File

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

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>

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>

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>

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>

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>