[www] Article style refactoring: article -> Article

src/components/Article.js

@@ -18,15 +18,15 @@ const Share = () => (
 )
 
 const Article = ({children, data, url, title, date, shareable}) => (
-	<article className="article">
-		<header className="article__head">
+	<article className="Article">
+		<header className="Article-Head">
 			<Head url={url}>{title}</Head>
 			{!date ? null : (
 				<p className="date">{dateFormat(date)}</p>
 			)}
 		</header>
 
-		<div className="article__body">
+		<div className="Article-Body">
 			{children || getHtml(data)}
 		</div>
 

src/style/components/Article.scss

@@ -1,6 +1,6 @@
 @import "../variables";
 
-.article {
+.Article {
   --article-line-height: 1.75em;
   --article-quote-padding: 1em;
   --article-quote-font-size: 1.25em;
@@ -9,7 +9,7 @@
 
   margin-bottom: $post-margin;
 
-  &__head {
+  &-Head {
     margin-bottom: 1.25em;
 
     h1 {
@@ -27,7 +27,7 @@
     }
   }
 
-  &__body{
+  &-Body{
     img {
       max-width: 100%;
       max-height: 35em;
@@ -82,12 +82,12 @@
 }
 
 @media (max-width: $mobile-width) {
-  .article {
+  .Article {
     --article-line-height: 1.5em;
     --article-quote-padding: .5em;
     --article-quote-font-size: 1em;
 
-    &__body {
+    &-Body {
       img {
         max-height: 20em;
       }

src/style/style.scss

@@ -13,7 +13,7 @@
 @import "components/schedule-table";
 @import "components/footer-links";
 @import "components/cloud-page";
-@import "components/article";
+@import "components/Article";
 @import "components/Paginator";
 @import "components/album";
 @import "components/parallax";