even spacing

DylanVann · Oct 15, 2020 · 3bbff40 · 3bbff40
1 parent 1df5855
commit 3bbff40
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 1 deletion.
diff --git a/packages/docs/index.css b/packages/docs/index.css
@@ -80,6 +80,48 @@
     env(safe-area-inset-bottom) env(safe-area-inset-left);
 }
 
+.title {
+  font-size: 24.6753px;
+  line-height: 43px;
+  padding: 0.05px 0;
+}
+
+.title::before {	
+  content: "";	
+  margin-top: -0.4533em;	
+  display: block;	
+  height: 0;	
+}
+
+.title::after {	
+  content: "";	
+  margin-bottom: -0.5233em;	
+  display: block;	
+  height: 0;	
+}
+
+@media (min-width: 768px) {
+  .title {
+    font-size: 36.3636px;
+    line-height: 52px;
+    padding: 0.05px 0;
+  }
+
+  .title::before {
+    content: '';
+    margin-top: -0.2964em;
+    display: block;
+    height: 0;
+  }
+
+  .title::after {
+    content: '';
+    margin-bottom: -0.3664em;
+    display: block;
+    height: 0;
+  }
+}
+
 h1,
 h2,
 h3,

diff --git a/packages/docs/index.pug b/packages/docs/index.pug
@@ -19,7 +19,7 @@ html
         - var outline = ['focus:outline-none focus:shadow-outline focus:border-yellow-300']
         div.container.px-3.mb-3
             div.header.flex.items-center.justify-between.flex-col.my-3(class="md:flex-row md:my-6")
-                h1.mb-3.text-2xl(class="md:mb-0 md:text-4xl") <img class="emoji" src="moon.png" alt=""><img class="emoji" src="sun.png" alt=""> Perfect Dark Mode
+                h1.mb-3.title(class="md:mb-0") <img class="emoji" src="moon.png" alt=""><img class="emoji" src="sun.png" alt=""> Perfect Dark Mode
                 button.rounded-sm.toggle.flex.flex-col.items-center(style="visibility: hidden;" class=outline)
                     span.label <img class="emoji" src="sun.png" alt=""> color mode
                     span.text-xs (Click Me)