Blogs UI polish (Shopify#152)

* deblockify blogs and update styles * add share block to blog post template * remove social sharing snippet and settings * design feedback * placeholder updates
NobuGoto · Jul 14, 2021 · fe16181 · fe16181
1 parent ec09de8
commit fe16181
Show file tree

Hide file tree

Showing 15 changed files with 245 additions and 343 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -1173,6 +1173,46 @@ deferred-media {
   }
 }
 
+/* Button - social share */
+
+.share-button {
+  display: block;
+  position: relative;
+}
+
+.share-button__button .icon-share {
+  margin-right: 1rem;
+}
+
+.share-button__fallback {
+  border: 0.1rem solid rgba(var(--color-foreground), 0.1);
+  background: rgb(var(--color-background));
+  padding: 2rem;
+  position: absolute;
+  top: 4rem;
+  left: -0.1rem;
+  z-index: 3;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.share-button__fallback .button {
+  margin-top: 1rem;
+}
+
+.share-button__fallback .icon-clipboard {
+  height: 1.4rem;
+  width: 1.8rem;
+}
+
+.share-button__message:not(:empty) {
+  font-size: 1.2rem;
+  text-align: right;
+  display: block;
+  margin-top: 0.5rem;
+}
+
 /* component-form */
 .field__input,
 .select__select,

diff --git a/assets/component-article-card.css b/assets/component-article-card.css
@@ -41,18 +41,12 @@
 }
 
 .article-card__info {
-  padding: 2.5rem 2.5rem 3rem;
+  padding: 3rem;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
 }
 
-@media screen and (min-width: 750px) {
-  .article-card__info {
-    padding: 4rem 5rem;
-  }
-}
-
 .article-content {
   width: 100%;
   height: 100%;
@@ -100,14 +94,28 @@
   text-decoration-thickness: 0.2rem;
 }
 
+.article-card__header {
+  line-height: 0.8;
+  margin-bottom: 1.2rem;
+}
+
 .article-card__header h2 {
+  margin: 0 0 0.2rem;
+}
+
+.article-card__header h2:only-child {
   margin: 0;
 }
 
 .article-card__header h2:not(:first-child) {
   margin-top: 1rem;
 }
 
+.article-card__header h2 + span {
+  display: inline-block;
+  margin-top: 0.4rem;
+}
+
 .article-card__footer {
   letter-spacing: 0.1rem;
   font-size: 1.4rem;

diff --git a/assets/section-blog-post.css b/assets/section-blog-post.css
@@ -44,6 +44,7 @@
 .article-template header {
   margin-top: 4.4rem;
   margin-bottom: 2rem;
+  line-height: 0.8;
 }
 
 @media screen and (min-width: 750px) {
@@ -65,17 +66,13 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  text-underline-offset: 0.3rem;
+  text-decoration: none;
 }
 
-.article-template__link:hover {
-  text-decoration-thickness: 0.2rem;
-}
-
-.article-template__link svg {
+.article-template__link .icon-wrap {
   width: 1.5rem;
-  transform: rotate(180deg);
   margin-right: 1rem;
+  transform: rotate(180deg);
 }
 
 .article-template__content {
@@ -84,14 +81,13 @@
 }
 
 .article-template__social-sharing {
-  display: flex;
-  flex-direction: column;
-  align-items: self-end;
   margin-top: 3rem;
 }
 
-.article-template__social-sharing .social-sharing {
-  margin-left: -1.3rem;
+@media screen and (min-width: 750px) {
+  .article-template .share-button__fallback {
+    width: 60%;
+  }
 }
 
 .article-template__comment-wrapper {

diff --git a/assets/section-featured-blog.css b/assets/section-featured-blog.css
@@ -6,22 +6,49 @@
   padding: 4rem 0 5rem;
 }
 
-.blog .placeholder {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 22rem;
-  text-align: center;
-  padding: 4rem 2rem 5rem;
-  margin: 0 2rem;
+.blog-placeholder {
+  margin: 0 1.5rem;
+  background: rgb(var(--color-background));
 }
 
 @media screen and (min-width: 750px) {
-  .blog .placeholder {
+  .blog-placeholder {
+    text-align: center;
+  }
+}
+
+@media screen and (min-width: 990px) {
+  .blog-placeholder {
     margin: 0;
   }
 }
 
+.blog-placeholder__content {
+  padding: 3rem;
+  background: rgba(var(--color-foreground), .04);
+}
+
+.blog-placeholder .placeholder {
+  position: relative;
+}
+
+.blog-placeholder .placeholder-svg {
+  height: auto;
+  max-width: 80rem;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.blog-placeholder h2 {
+  margin: 0;
+}
+
+.blog-placeholder .rte-width {
+  margin-top: 1.2rem;
+  color: rgba(var(--color-foreground), .75);
+}
+
 @media screen and (max-width: 749px) {
   .blog:not(.no-heading) {
     margin-top: -1rem;
@@ -75,7 +102,8 @@
   }
 }
 
-.background-secondary .article-card {
+.background-secondary .article-card,
+.background-secondary .blog-placeholder__content {
   background-color: rgb(var(--color-background));
 }
 

diff --git a/assets/section-main-product.css b/assets/section-main-product.css
@@ -586,49 +586,6 @@ a.product__text {
   width: 2.2rem;
 }
 
-/* Product share */
-
-.share-button {
-  display: block;
-  position: relative;
-}
-
-.share-button__button .icon-share {
-  margin-right: 1rem;
-}
-
-.share-button__fallback {
-  border: 0.1rem solid rgba(var(--color-foreground), 0.1);
-  background: rgb(var(--color-background));
-  padding: 2rem;
-  position: absolute;
-  top: 4rem;
-  left: -0.1rem;
-  z-index: 3;
-  width: 100%;
-}
-
-.share-button__fallback {
-  display: flex;
-  flex-direction: column;
-}
-
-.share-button__fallback .button {
-  margin-top: 1rem;
-}
-
-.share-button__fallback .icon-clipboard {
-  height: 1.4rem;
-  width: 1.8rem;
-}
-
-.share-button__message:not(:empty) {
-  font-size: 1.2rem;
-  text-align: right;
-  display: block;
-  margin-top: 0.5rem;
-}
-
 /* Product popup */
 
 .product-popup-modal {

diff --git a/config/settings_schema.json b/config/settings_schema.json
@@ -171,29 +171,7 @@
     "settings": [
       {
         "type": "header",
-        "content": "t:settings_schema.social-media.settings.header__1.content"
-      },
-      {
-        "type": "checkbox",
-        "id": "share_facebook",
-        "default": true,
-        "label": "t:settings_schema.social-media.settings.share_facebook.label"
-      },
-      {
-        "type": "checkbox",
-        "id": "share_twitter",
-        "default": true,
-        "label": "t:settings_schema.social-media.settings.share_twitter.label"
-      },
-      {
-        "type": "checkbox",
-        "id": "share_pinterest",
-        "default": true,
-        "label": "t:settings_schema.social-media.settings.share_pinterest.label"
-      },
-      {
-        "type": "header",
-        "content": "t:settings_schema.social-media.settings.header__2.content"
+        "content": "t:settings_schema.social-media.settings.header.content"
       },
       {
         "type": "text",

diff --git a/locales/en.default.json b/locales/en.default.json
@@ -79,7 +79,6 @@
     "article": {
       "blog": "Blog",
       "read_more_title": "Read more: {{ title }}",
-      "read_more": "Read more",
       "comments": {
         "one": "{{ count }} comment",
         "other": "{{ count }} comments"