Refactor CSS to BEM
Update dependencies Improve focus and hover states
This commit is contained in:
1
theme/partials/ad_wide_skyscraper.php
Normal file
1
theme/partials/ad_wide_skyscraper.php
Normal file
@@ -0,0 +1 @@
|
||||
<img src="http://via.placeholder.com/160x600" alt="advert">
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
<footer class="Footer">
|
||||
<p class="Footer-text">© <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
|
||||
<footer class="footer">
|
||||
<p class="footer__text">© <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
|
||||
</footer>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user