Prepare to version 0.1.0 (#9)

- Add Merriweather and Poppins font. Adjust styles (#8) - Add font files for Merriweather and Poppins
noahtalerman · Jan 10, 2021 · 56c76d6 · 56c76d6
1 parent b5e2748
commit 56c76d6
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 22 deletions.
diff --git a/src/assets/fonts/Merriweather/Merriweather-Regular.ttf b/src/assets/fonts/Merriweather/Merriweather-Regular.ttf
diff --git a/src/assets/fonts/Poppins/Poppins-Light.ttf b/src/assets/fonts/Poppins/Poppins-Light.ttf
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -22,33 +22,33 @@ const IndexPage = () => {
     <Layout>
       <SEO title="Noah Talerman's Site" />
       <div className="col-start-2 col-span-7 md:col-start-3 md:col-span-5">
-        <h1>NOAH TALERMAN'S SITE</h1>
-        <h2>A SPACE TO SHARE MY FAVORITE WORK AND MEDIA</h2>
-        <div className="flex justify-between align-center mt-xl">
+        <h1>Noah Talerman's site</h1>
+        <h2>A space to share my favorite work and media</h2>
+        <div className="flex justify-between items-center mt-xl">
           <div>
-            <p className="mt-lg">Welcome to my site</p>
-            <p className="mt-md">During the week I’m working on product at fleetdm.com and during the other days I’m running on Mercer Island, playing Rocket League, and watching Arsenal FC dissapoint.</p>
+            <p className="text-light-text-grey dark:text-dark-text-grey">My day to day,</p>
+            <p className="mt-md text-light-text-grey dark:text-dark-text-grey">During the week I’m working on product at fleetdm.com. Other days I’m running on Mercer Island, playing Rocket League, and watching Arsenal FC.</p>
           </div>
           <div className="lg:flex lg:justify-end hidden">
-            <img src={meImg} style={{maxWidth: "240px"}}className="object-cover h-auto ml-xl"></img>
+            <img src={meImg} style={{width: "200px", height: "200px", borderRadius: "4px"}}className="object-cover h-auto ml-xl"></img>
           </div> 
         </div>
-        <h3 className="mt-xl">WORK I'M PROUD OF</h3>
+        <h3 className="mt-xl">Work I'm proud of</h3>
         <div className="flex justify-between mt-lg flex-col lg:flex-row">
-          <span className="font-display not-italic">Fleet Device Management</span>
-          <a href="https://github.com/fleetdm/fleet" target="_blank" rel="noopener noreferrer" className="">View on GitHub</a>
+          <span className="font-display text-md">Fleet Device Management</span>
+          <a href="https://github.com/fleetdm/fleet" target="_blank" rel="noopener noreferrer" className="text-md">View on GitHub</a>
         </div>
-        <p className="mt-md">My proud gig. I can be doing a lot of things related to “product” on any given day. These things are wireframes, communicating wth users, bug fixes, front end code, community support, public facing documentation, roadmap management</p>
+        <p className="mt-md text-light-text-grey dark:text-dark-text-grey">My proud gig. I can be doing a lot of things related to “product” on any given day.</p>
         <div className="flex justify-between mt-lg flex-col lg:flex-row">
-          <span className="font-display not-italic">The Ivy Platform</span>
-          <a href="https://github.com/snordale/music-app" target="_blank" rel="noopener noreferrer" className="">View on GitHub</a>
+          <span className="font-display text-md">The Ivy Platform</span>
+          <a href="https://github.com/snordale/music-app" target="_blank" rel="noopener noreferrer" className="text-md">View on GitHub</a>
         </div>
-        <p className="mt-md">Dope team effort with Sam Nordale and Eric Kim. Working to achieve our music sharing vision. Using cool tech like Django, Spotify’s API, and React Native....</p>
+        <p className="mt-md text-light-text-grey dark:text-dark-text-grey">Dope team effort with Sam Nordale and Eric Kim. Working to achieve our music sharing vision.</p>
         <div className="flex justify-between mt-lg flex-col lg:flex-row">
-          <span className="font-display not-italic">Computer Adoption and Income Inequality</span>
-          <a href="https://columbiaeconreview.com/post/5f45c9c8be5493000729ed15" target="_blank" rel="noopener noreferrer" className="">View article</a>
+          <span className="font-display text-md">Computer Adoption and Income Inequality</span>
+          <a href="https://columbiaeconreview.com/post/5f45c9c8be5493000729ed15" target="_blank" rel="noopener noreferrer" className="text-md">Go to article</a>
         </div>
-        <p className="mt-md">Economics article that examines the relationship between income inequality and computer technology adoption.</p>
+        <p className="mt-md text-light-text-grey dark:text-dark-text-grey">Economics article that examines the relationship between income inequality and computer technology adoption.</p>
         {/* <h3 className="mt-xl">MY LAST 3 LISTENS ON SPOTIFY</h3>
         <table className="table-auto w-full text-left mt-lg">
           <thead className="font-display not-italic">

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1,8 +1,8 @@
 body {
-  font-family: 'Spectral', serif;
-  font-style: italic;
+  font-family: 'Poppins', sans-serif;
   font-weight: 300;
-  font-size: 20px;
+  font-size: 16px;
+  line-height: 1.7;
 }
 
 h1,
@@ -16,9 +16,9 @@ h2,
 h3,
 h4,
 a {
-  font-family: 'Cera CY', sans-serif;
+  font-family: 'Merriweather', serif;
   font-style: normal;
-  font-weight: 300;
+  font-weight: 400;
 }
 
 a {

diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
@@ -34,4 +34,18 @@
     font-weight: 300;
     font-style: italic;
   }
+
+  @font-face {
+    font-family: 'Merriweather';
+    src: url('../assets/fonts/Merriweather/Merriweather-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: 'Poppins';
+    src: url('../assets/fonts/Poppins/Poppins-Light.ttf') format('truetype');
+    font-weight: 300;
+    font-style: normal;
+  }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -6,16 +6,19 @@ module.exports = {
       'ui-light-grey': '#e0e0e0',
       'red': '#f45d48',
       'dark-grey': '#1a1a1b',
+      'dark-text-grey': '#b3b3b3',
+      'light-text-grey': '#7c7c7c',
       'white': '#ffffff',
     },
     fontSize: {
       sm: ['12px', '18px'],
+      md: ['18px', '27px'],
       base: ['20px', '30px'],
       lg: ['24px', '32px'],
       xl: ['32px', '48px'],
     },
     fontFamily: {
-     'display': ['Cera CY', 'sans-serif'],
+     'display': ['Merriweather', 'serif'],
      'body': ['Spectral', 'serif'],
     },
     spacing: {