Merge pull request #253 from bettistein/font-tweaks

font tweaks / cleanups

Author: ryyppy

src/Blog.js

@@ -264,7 +264,7 @@ let default = (props: props): React.element => {
   let errorBox = if ProcessEnv.env === ProcessEnv.development && Belt.Array.length(malformed) > 0 {
     <div className="mb-12">
       <Markdown.Warn>
-        <h2 className="font-bold text-gray-95 text-2xl mb-2">
+        <h2 className="font-bold text-gray-95 text-32 mb-2">
           {React.string("Some Blog Posts are Malformed!")}
         </h2>
         <p>

src/Blog.res

@@ -216,7 +216,7 @@ let default = (props: props) => {
           <div className="mt-12">
             <Line />
             <div className="pt-20 flex flex-col items-center">
-              <div className="text-3xl sm:text-4xl text-center text-gray-95 font-medium">
+              <div className="text-3xl sm:text-32 text-center text-gray-95 font-medium">
                 {React.string("Want to read more?")}
               </div>
               <Next.Link href="/blog">

src/BlogArticle.js

@@ -23,8 +23,8 @@ let make = (~highlightedLines=[], ~code: string, ~showLabel=true, ~lang="text")
   }
 
   <div //normal code-text without tabs
-    className="relative w-full flex-col rounded-none xs:rounded border-t border-b xs:border border-gray-10 bg-gray-5 py-2 text-gray-90">
-    label <div className="px-4 text-14 pt-4 pb-2 overflow-x-auto -mt-2"> children </div>
+    className="relative w-full flex-col rounded-none xs:rounded-lg border-t border-b xs:border border-gray-10 bg-gray-5 py-2 text-gray-80">
+    label <div className="px-5 text-14 pt-4 pb-2 overflow-x-auto -mt-2"> children </div>
   </div>
 }
 
@@ -110,11 +110,11 @@ module Toggle = {
         <div
           className="absolute flex w-full overflow-auto scrolling-touch font-sans bg-transparent text-14 text-gray-40 "
           style={ReactDOM.Style.make(~marginTop="-30px", ())}>
-          <div className="flex space-x-2"> {React.array(tabElements)} </div>
+          <div className="flex space-x-1"> {React.array(tabElements)} </div>
           <div className="flex-1 border-b border-gray-10"> {React.string(j`\\u00A0`)} </div>
         </div>
         <div
-          className="px-4 text-14 pb-4 pt-4 overflow-x-auto bg-gray-5 border-gray-10 xs:rounded-b border border-t-1">
+          className="px-4 lg:px-5 text-14 pb-4 pt-4 overflow-x-auto bg-gray-5 border-gray-10 xs:rounded-b-lg border">
           <pre> children </pre>
         </div>
       </div>

src/BlogArticle.res

@@ -3,7 +3,7 @@
 
 module P = {
   @react.component
-  let make = (~children) => <p className="md-p leading-5 text-gray-80 text-16"> children </p>
+  let make = (~children) => <p className="md-p md:leading-5 text-gray-80 md:text-16"> children </p>
 }
 
 // Used for hero like introduction text in
@@ -83,11 +83,12 @@ module UrlBox = {
       </a>
     } else {
       <Next.Link href>
-        <a className="flex items-center"> {React.string(text)} <Icon.ArrowRight className="ml-1" /> </a>
+        <a className="flex items-center">
+          {React.string(text)} <Icon.ArrowRight className="ml-1" />
+        </a>
       </Next.Link>
     }
-    <div
-      className="md-url-box text-base border-l-2 border-gray-60 my-6 py-6 pl-8 pr-10 bg-gray-5">
+    <div className="md-url-box text-base border-l-2 border-gray-60 my-6 py-6 pl-8 pr-10 bg-gray-5">
       content <div className="mt-4 text-sky hover:text-sky-30"> link </div>
     </div>
   }
@@ -113,17 +114,21 @@ module Anchor = {
   }
 }
 // HEADLINES //
+
 module H1 = {
   @react.component
   let make = (~children) =>
-    <h1 className="text-42 tracking-tight leading-1 mb-5 font-sans font-medium text-gray-95"> children </h1>
+    <h1 className="text-42 tracking-tight leading-1 mb-5 font-sans font-medium text-gray-95">
+      children
+    </h1>
 }
 
 module H2 = {
   @react.component
   let make = (~id, ~children) => <>
     // Here we know that children is always a string (## headline)
-    <h2 className="group mt-12 mb-3 text-28 tracking-tight leading-1 font-sans font-bold text-gray-95">
+    <h2
+      className="group mt-12 mb-3 text-28 tracking-tight leading-1 font-sans font-bold text-gray-95">
       children <span className="ml-2"> <Anchor id /> </span>
     </h2>
   </>
@@ -132,7 +137,8 @@ module H2 = {
 module H3 = {
   @react.component
   let make = (~id, ~children) =>
-    <h3 className="group text-21 mt-12 mb-3 tracking-tight leading-3 font-sans font-bold text-gray-95">
+    <h3
+      className="group text-21 mt-12 mb-3 tracking-tight leading-3 font-sans font-bold text-gray-95">
       children <span className="ml-2"> <Anchor id /> </span>
     </h3>
 }
@@ -141,16 +147,15 @@ module H4 = {
   @react.component
   let make = (~id, ~children) =>
     <h4 className="group text-18 mt-12 mb-3 leading-2 font-sans font-semibold text-gray-95">
-      children
-      <span className="ml-2"> <Anchor id /> </span>
+      children <span className="ml-2"> <Anchor id /> </span>
     </h4>
 }
 
 module H5 = {
   @react.component
   let make = (~id, ~children) =>
     <h5
-      className="group mt-12 mb-3 text-12 leading-2 font-sans font-semibold uppercase tracking-wide text-gray-95">
+      className="group mt-12 mb-3 text-12 leading-2 font-sans font-semibold uppercase tracking-wide text-gray-80">
       children <span className="ml-2"> <Anchor id /> </span>
     </h5>
 }
@@ -163,7 +168,9 @@ module Pre = {
 module InlineCode = {
   @react.component
   let make = (~children) =>
-    <code className="md-inline-code py-0.75 px-2 text-smaller-1 rounded border-gray-100 font-mono bg-gray-10">
+    <code
+      className="md-inline-code py-0.75 px-2 text-smaller-1 font-medium rounded font-mono bg-gray-10-tr">
+      //text-smaller-1
       children
     </code>
 }
@@ -285,14 +292,12 @@ module Code = {
 }
 
 module CodeTab = {
-  let getMdxMetastring: Mdx.mdxComponent => option<string> = %raw(
-    "element => {
+  let getMdxMetastring: Mdx.mdxComponent => option<string> = %raw("element => {
       if(element == null || element.props == null) {
         return;
       }
       return element.props.metastring;
-    }"
-  )
+    }")
   @react.component
   let make = (~children: Mdx.MdxChildren.t, ~labels: array<string>=[]) => {
     let mdxElements = switch Mdx.MdxChildren.classify(children) {
@@ -372,7 +377,7 @@ module A = {
   let make = (~href, ~target=?, ~children) =>
     // In case we are handling a relative URL, we will use the Next routing
     if Util.Url.isAbsolute(href) {
-      <a href rel="noopener noreferrer" className="no-underline text-fire-70 hover:underline" ?target>
+      <a href rel="noopener noreferrer" className="no-underline text-fire hover:underline" ?target>
         children
       </a>
     } else {

src/components/CodeExample.js

@@ -8,6 +8,6 @@ let make = (~displayName: string) => {
   }
 
   <div className="block uppercase h-full w-full flex items-center justify-center rounded-full">
-    <span className="text-xl text-gray-80"> {React.string(initials)} </span>
+    <span className="text-21 text-gray-80"> {React.string(initials)} </span>
   </div>
 }

src/components/CodeExample.res

@@ -48,7 +48,7 @@ let make = (~components=Markdown.default, ~children) => {
                 <div className="flex justify-center">
                   <div className="w-full max-w-740">
                     <div>
-                      <h1 className="text-80 xs:text-100 text-gray-95 font-semibold">
+                      <h1 className="text-56 xs:text-96 text-gray-95 tracking-tight font-semibold">
                         {React.string("ReScript")}
                       </h1>
                       <p className="text-21 text-gray-95 font-bold mb-2">

src/components/Markdown.js

@@ -47,7 +47,7 @@ module.exports = {
           "95": "#0A0D2F",
           "100": "#010427",
           "5-tr": "rgba(1, 20, 29, 0.02)",
-          "10-tr": "rgba(1, 4, 39, 0.1)",
+          "10-tr": "rgba(1, 16, 39, 0.05)",
           "20-tr": "rgba(1, 4, 39, 0.2)",
           "40-tr": "rgba(1, 4, 39, 0.4)",
           "60-tr": "rgba(1, 4, 39, 0.6)",
@@ -110,7 +110,7 @@ module.exports = {
       spacing: {
         "2/3": "66.666667%",
         "9/16": "56.25%",
-        "0.75": "0.1875rem"
+        "0.75": "0.135rem"
       },
       animation: {
         pulse: 'pulse 0.5s cubic-bezier(0.4, 0, 0.6, 1)',
@@ -144,26 +144,17 @@ module.exports = {
       "12": "0.75rem",
       "14": "0.875rem",
       "16": "1rem",
-      "18": "1rem",
+      "18": "1.125rem",
       "21": "1.3125rem",
       "28": "1.5rem",
       "32": "2rem",
       "42": "2.625rem",
-      "48": "3rem",
-      "80": "5rem",
-      "100": "6.25rem",
+      "56": "3.5rem",
+      "96": "6rem",
       "smaller-1": "0.9em", // 18px => 16.2px (used for inlineCode)
-      xs: ".75rem", // 12px
       sm: ".875rem", // 14px
       base: "1rem", // 16px
       lg: "1.125rem", // 18px
-      xl: "1.3125rem", // 21px
-      "2xl": "1.5rem", // 24px
-      "3xl": "2rem", // 32px
-      "4xl": "2.125rem", // 34px
-      "5xl": "2.25rem", // 36px
-      "6xl": "2.625rem", // 42px
-      "7xl": "4.875rem" // 78px
     },
     fontWeight: {
       normal: 400,