docs 增加 fonts

Author: IdenPin

dist/acss-helper.css

@@ -41,6 +41,11 @@ html {
   /* 1 */
   line-height: 1.5;
   /* 2 */
+  margin: 0;
+}
+
+body {
+  margin: 0;
 }
 
 *,
@@ -2666,27 +2671,27 @@ video {
 }
 
 .text-xl {
-  font-size: 4rem;
+  font-size: 1.25rem;
 }
 
 .text-2xl {
-  font-size: 3rem;
+  font-size: 1.5rem;
 }
 
 .text-3xl {
-  font-size: 2.25rem;
+  font-size: 1.875rem;
 }
 
 .text-4xl {
-  font-size: 1.875rem;
+  font-size: 2.25rem;
 }
 
 .text-5xl {
-  font-size: 1.5rem;
+  font-size: 3rem;
 }
 
 .text-6xl {
-  font-size: 1.25rem;
+  font-size: 4rem;
 }
 
 .font-hairline {

docs/css/acss-helper.css

@@ -41,6 +41,11 @@ html {
   /* 1 */
   line-height: 1.5;
   /* 2 */
+  margin: 0;
+}
+
+body {
+  margin: 0;
 }
 
 *,
@@ -2666,27 +2671,27 @@ video {
 }
 
 .text-xl {
-  font-size: 4rem;
+  font-size: 1.25rem;
 }
 
 .text-2xl {
-  font-size: 3rem;
+  font-size: 1.5rem;
 }
 
 .text-3xl {
-  font-size: 2.25rem;
+  font-size: 1.875rem;
 }
 
 .text-4xl {
-  font-size: 1.875rem;
+  font-size: 2.25rem;
 }
 
 .text-5xl {
-  font-size: 1.5rem;
+  font-size: 3rem;
 }
 
 .text-6xl {
-  font-size: 1.25rem;
+  font-size: 4rem;
 }
 
 .font-hairline {

docs/index.html

@@ -85,9 +85,22 @@ <h2 id="paddings" class="border-b-1 border-b-solid border-gray-200 py-5 font-bol
             </div>
           </div>
 
+          <!-- Font -->
+          <h2 id="font" class="border-b-1 border-b-solid border-gray-200 py-5 font-bold">Font</h2>
+          <div class="row pt-5">
+            <div class="col-12 mb-5">
+              <div v-for="item in fonts">
+                <div :class="`text-${item}`">
+                  <p>text-{{item}}</p>
+                  <div>和我一起用ACSS搭建页面</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
         </div>
         <div class="sidebar col-3">
-          <h3 class="font-bold pl-2 text-xl  mt-5">Category</h3>
+          <h3 class="font-bold pl-2 text-2xl mt-5">Category</h3>
           <ul>
             <li v-for="item in menus" class="p-2 border-b border-gray-200">
               <a :href="`#${item.toLowerCase()}`">{{item}}</a>
@@ -232,7 +245,8 @@ <h3 class="font-bold pl-2 text-xl  mt-5">Category</h3>
         }
       },
       paddings: ['pt-8', 'pr-8', 'pb-8', 'pl-8', 'px-8', 'py-8'],
-      margins: ['mt-8', 'mr-8', 'mb-8', 'ml-8', 'mx-8', 'my-8']
+      margins: ['mt-8', 'mr-8', 'mb-8', 'ml-8', 'mx-8', 'my-8'],
+      fonts: ['xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl']
     }
   })
 </script>

src/_resize.scss

@@ -44,6 +44,10 @@ ul {
 html {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
   line-height: 1.5; /* 2 */
+  margin: 0
+}
+body {
+  margin: 0
 }
 
 

src/_typography.scss

@@ -19,7 +19,7 @@
   }
 }
 
-// color
+// font - color
 @each $colorListKey, $colorListVal in $font-colors {
   .text-#{$colorListKey}{
     color: $colorListKey;

src/_variables.scss

@@ -209,12 +209,12 @@ $font-size: (
   sm: 0.875rem,
   base: 1rem,
   lg: 1.125rem,
-  xl: 4rem,
-  '2xl': 3rem,
-  '3xl': 2.25rem,
-  '4xl': 1.875rem,
-  '5xl': 1.5rem,
-  '6xl': 1.25rem,
+  xl: 1.25rem,
+  '2xl': 1.5rem,
+  '3xl': 1.875rem,
+  '4xl': 2.25rem,
+  '5xl': 3rem,
+  '6xl': 4rem,
 );
 
 $font-weight: (