Refactor content CSS

css/article.css

@@ -20,172 +20,3 @@
   margin-left: 10px;
   vertical-align: top;
 }
-
-.article p {
-  margin-bottom: var(--space-sm);
-}
-
-@media (--viewport-lg) {
-  .article p {
-    margin-bottom: var(--space-md);
-  }
-}
-
-/**
- * Heading styles
- */
-
-.article__content h1 {
-  font-family: var(--heading-font-family);
-  font-size: 1.8rem;
-  margin-bottom: var(--space-sm);
-}
-
-.article__content h2 {
-  font-family: var(--heading-font-family);
-  font-size: 1.6rem;
-  margin-bottom: var(--space-sm);
-}
-
-.article__content h3 {
-  font-family: var(--heading-font-family);
-  font-size: 1.4rem;
-  margin-bottom: var(--space-sm);
-}
-
-.article__content h4,
-.article__content h5,
-.article__content h6 {
-  font-family: var(--heading-font-family);
-  font-size: 1.2rem;
-  margin-bottom: var(--space-sm);
-}
-
-/**
- * List styles
- */
-
-.article__content ul li {
-  position: relative;
-  padding: 0 0 var(--space-xs) var(--space-sm);
-}
-
-.article__content ul li:before {
-  content: '';
-  position: absolute;
-  left: 4px;
-  top: 10px;
-  background-color: var(--color-dark-blue);
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-}
-
-/**
- * Link styles
- */
-
-.article__content a {
-  color: var(--color-light-blue);
-  transition: box-shadow var(--transition-md) ease-out;
-}
-
-.article__content a img {
-  transition:
-    box-shadow var(--transition-md) ease-out,
-    filter var(--transition-md) ease-out;
-}
-
-/**
- * Focus states
- */
-
-.article__content a:focus {
-  box-shadow: var(--link-focus);
-}
-
-.article__content a:focus img {
-  box-shadow: 0 0 12px var(--color-light-blue);
-  filter: brightness(125%);
-}
-
-/**
- * Hover states
- */
-
-.article__content a:hover {
-  box-shadow: var(--link-focus);
-}
-
-/**
- * Wordpress overrides
- */
-
-.article .twitter-tweet {
-  width: auto !important;
-}
-
-.article .wp-caption {
-  background-color: #fff;
-  border: 1px solid var(--color-light-grey);
-  border-radius: 4px;
-  display: inline-block;
-  margin: 0 0 var(--space-sm);
-  padding: var(--space-sm);
-}
-
-.article .wp-caption a {
-  display: inline-block;
-}
-
-.article .wp-caption a:after {
-  display: none;
-}
-
-@media (--viewport-lg) {
-  .article .twitter-tweet,
-  .article .wp-caption {
-    margin: 0 0 var(--space-md);
-    padding: var(--space-md);
-  }
-}
-
-.article .wp-caption-text {
-  font-family: var(--heading-font-family);
-  margin: var(--space-sm) 0 0;
-}
-
-.article table {
-  border-collapse: collapse;
-  table-layout: fixed;
-  display: block;
-  overflow-x: auto;
-  height: auto !important;
-  max-width: 85vw;
-  white-space: nowrap;
-  margin-bottom: var(--space-md);
-  width: auto !important;
-}
-
-@media (--viewport-lg) {
-  .article table {
-    max-width: 100%;
-  }
-}
-
-.article th,
-.article tr,
-.article td {
-  border-width: 0 0 1px;
-  border-style: solid;
-  border-color: var(--color-dark-blue);
-  padding: 5px;
-}
-
-.article th {
-  border-width: 0 0 2px;
-}
-
-.article iframe {
-  max-width: 100%;
-}

css/content.css

@@ -3,3 +3,151 @@
   padding-bottom: var(--space-md);
 }
 
+.content h1 {
+  font-family: var(--heading-font-family);
+  font-size: 1.8rem;
+  margin-bottom: var(--space-sm);
+}
+
+.content h2 {
+  font-family: var(--heading-font-family);
+  font-size: 1.6rem;
+  margin-bottom: var(--space-sm);
+}
+
+.content h3 {
+  font-family: var(--heading-font-family);
+  font-size: 1.4rem;
+  margin-bottom: var(--space-sm);
+}
+
+.content h4,
+.content h5,
+.content h6 {
+  font-family: var(--heading-font-family);
+  font-size: 1.2rem;
+  margin-bottom: var(--space-sm);
+}
+
+.content p {
+  margin-bottom: var(--space-sm);
+}
+
+@media (--viewport-lg) {
+  .content p {
+    margin-bottom: var(--space-md);
+  }
+}
+
+.content ul li {
+  position: relative;
+  padding: 0 0 var(--space-xs) var(--space-sm);
+}
+
+.content ul li:before {
+  content: '';
+  position: absolute;
+  left: 4px;
+  top: 10px;
+  background-color: var(--color-dark-blue);
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+
+.content a {
+  color: var(--color-light-blue);
+  transition: box-shadow var(--transition-md) ease-out;
+}
+
+.content a img {
+  transition:
+    box-shadow var(--transition-md) ease-out,
+    filter var(--transition-md) ease-out;
+}
+
+.content a:focus {
+  box-shadow: var(--link-focus);
+}
+
+.content a:focus img {
+  box-shadow: 0 0 0 2px #fff, 0 0 0 6px var(--color-light-blue);
+  filter: brightness(125%);
+}
+
+.content a:hover {
+  box-shadow: var(--link-focus);
+}
+
+/**
+ * Wordpress overrides
+ */
+
+.content .twitter-tweet {
+  width: auto !important;
+}
+
+.content .wp-caption {
+  background-color: #fff;
+  border: 1px solid var(--color-light-grey);
+  border-radius: 4px;
+  display: inline-block;
+  margin: 0 0 var(--space-sm);
+  padding: var(--space-sm);
+}
+
+.content .wp-caption a {
+  display: inline-block;
+}
+
+.content .wp-caption a:after {
+  display: none;
+}
+
+@media (--viewport-lg) {
+  .content .twitter-tweet,
+  .content .wp-caption {
+    margin: 0 0 var(--space-md);
+    padding: var(--space-md);
+  }
+}
+
+.content .wp-caption-text {
+  font-family: var(--heading-font-family);
+  margin: var(--space-sm) 0 0;
+}
+
+.content table {
+  border-collapse: collapse;
+  table-layout: fixed;
+  display: block;
+  overflow-x: auto;
+  height: auto !important;
+  max-width: 85vw;
+  white-space: nowrap;
+  margin-bottom: var(--space-md);
+  width: auto !important;
+}
+
+@media (--viewport-lg) {
+  .content table {
+    max-width: 100%;
+  }
+}
+
+.content th,
+.content tr,
+.content td {
+  border-width: 0 0 1px;
+  border-style: solid;
+  border-color: var(--color-dark-blue);
+  padding: 5px;
+}
+
+.content th {
+  border-width: 0 0 2px;
+}
+
+.content iframe {
+  max-width: 100%;
+}

theme/index.php

@@ -20,7 +20,9 @@
             <?php the_title(); ?>
           </a>
         </h1>
-        <?php the_content(__('Continue reading <span class="meta-nav">&raquo;</span>', 'windycoys')); ?>
+        <div class="content">
+          <?php the_content(__('Continue reading <span class="meta-nav">&raquo;</span>', 'windycoys')); ?>
+        </div>
       </div>
     </article>
   </section>

theme/page-archive.php

@@ -10,7 +10,9 @@
           <?php the_title(); ?>
         </a>
       </h1>
-      <?php the_content(); ?>
+      <div class="content">
+        <?php the_content(); ?>
+      </div>
       <?php get_template_part('partials/archive') ?>
     </div>
   </section>

theme/single.php

@@ -18,7 +18,9 @@
         <h1 class="title">
           <?php the_title(); ?>
         </h1>
-        <?php the_content(__('Continue reading <span class="meta-nav">&raquo;</span>', 'windycoys')); ?>
+        <div class="content">
+          <?php the_content(__('Continue reading <span class="meta-nav">&raquo;</span>', 'windycoys')); ?>
+        </div>
       </div>
       <div class="article__comments">
         <?php comments_template() ?>