style: limiting characters per line

Author: ktquez

src/.vuepress/theme/layouts/Post.vue

@@ -68,7 +68,7 @@
 
         <section
           v-show="post.summary"
-          class="my-10 text-xl leading-9 post-page-summary sm:px-5 md:mx-auto lg:mx-0"
+          class="my-10 text-lg leading-9 post-page-summary sm:px-5 md:mx-auto lg:mx-0 max-char"
           role="region"
           :aria-label="$themeLocaleConfig.a11y.landmarks.post.summary"
         >
@@ -92,21 +92,31 @@
           role="region"
           aria-label="Content post"
         >
-          <div class="w-full lg:w-auto">
+          <div class="w-full max-w-3xl lg:w-auto">
             <Content
               itemprop="articleBody"
               class="sm:px-5 md:mx-auto lg:mx-0"
             />
 
-            <hr class="mt-16">
+            <hr class="my-16">
 
-            <div class="py-20 disqus-section">
+            <ShareLinks
+              :path="post.path"
+              :title="post.title"
+              :summary="post.summary"
+              horizontal
+              class="lg:hidden"
+            />
+
+            <hr class="my-16 lg:hidden">
+
+            <div class="disqus-section">
               <Disqus shortname="vue-a11y-test" />
             </div>
 
-            <hr>
+            <hr class="my-16">
 
-            <div class="py-20 webmentions-section">
+            <div class="webmentions-section">
               <WebMentions />
             </div>
           </div>

src/.vuepress/theme/styles/_a11y.scss

@@ -32,7 +32,7 @@
 }
 
 .max-char {
-  max-width: 74ex;
+  max-width: 68ex;
 }
 
 input::placeholder {

src/.vuepress/theme/styles/_components.scss

@@ -43,6 +43,19 @@
       }
     }
   }
+
+  &-list.horizontal {
+    @apply flex flex-wrap justify-between;
+
+    &:before {
+      display: none;
+    }
+
+    .toc-list-item {
+      @apply w-48 flex items-center mb-4;
+    }
+
+  }
 }
 
 .btn {

src/.vuepress/theme/styles/_custom-blocks.scss

@@ -30,7 +30,7 @@
     }
   }
   > figcaption {
-    @apply w-full text-center text-base;
+    @apply w-full text-center text-base mt-2;
 
     p {
       margin: 0;

src/.vuepress/theme/styles/_markdown.scss

@@ -1,11 +1,11 @@
 .content__default {
-  @apply text-xl block;
+  @apply text-lg block;
   min-height: 150px;
 
   p {
     word-wrap: break-word;
-    margin: 30px 0;
-    max-width: 74ex;
+    margin: 40px 0;
+    max-width: 68ex;
 
     abbr {
       cursor: help;
@@ -16,7 +16,7 @@
   }
 
   p, ol, ul {    
-    @apply leading-10;
+    @apply leading-8;
   }
 
   h4, h5, h6 {

src/.vuepress/theme/views/Page.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-full">
     <article class="flex justify-between w-full px-6 pt-6 md:mt-4 lg:px-10 xl:pr-0">
-      <div class="page-content">
+      <div class="max-w-3xl page-content">
         <Content />
         <PageEdit class="flex flex-wrap justify-between w-full py-6 pb-24 border-t c-border-color md:mt-4" />
       </div>