update styles

index.html

@@ -28,6 +28,12 @@
       rel="stylesheet" 
       href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/github.min.css" 
     />
+
+    <link 
+      href="https://fonts.googleapis.com/css?family=Roboto&display=swap" 
+      rel="stylesheet"
+    >
+
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"></script>
 
     <title>Status Podcasts</title>

src/css/HomePage.styles.css

@@ -4,7 +4,7 @@
 
 .Home-banner {
   border-radius: 10px;
-  margin: 0 0 25px;
+  margin: 0 0 50px;
   text-align: left;
   color: #555;
   display: flex;
@@ -64,7 +64,7 @@
 .Home-podcast-title {
   font-weight: normal;
   color: #999;
-  text-align: left;
+  text-align: center;
 }
 
 .Home-podcasts {
@@ -75,8 +75,9 @@
 
 .grid {
   display: grid;
+  margin-left: 30px;
   grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-  grid-gap: 20px;
+  grid-gap: 60px;
   margin-bottom: 100px;
 }
 
@@ -113,7 +114,7 @@
 
 @media only screen and (max-width: 600px) {
   .grid {
-    grid-gap: 10px;
+    margin-left: 0px;
   }
 
   .Home-banner h1 {
@@ -132,6 +133,7 @@
 
   .Home-podcast-title {
     margin-left: 5px;
+    text-align: center;
   }
 
   ::-webkit-scrollbar {

src/css/markdown.css

@@ -7,7 +7,7 @@
     padding: 10px;
     padding-left: 20px;
     color: #444;
-    font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
+    font-family: 'Roboto', sans-serif;
     font-size: 16px;
     line-height: 1.5em;
 }

src/data/podcasts.js

@@ -62,54 +62,5 @@ export const podcasts = [
     link: 'https://feeds.simplecast.com/lKmQDG9R',
     img:
       'https://lh3.googleusercontent.com/cwsJClMXMYPuo17tQmeZDYhXI7ZKQta4AUGJ0mKrFaPBpRFssVpxLvzE-eScQ8vdBkTvcB9B5oF_tyY_gQAix-7muSwBfPrj1x5Pfa4r-6TCXJqxg6l8beQ9GVGjlDquy0I_oYlGKg=w2400'
-  },
-  {
-    category: 'status',
-    name: 'Status News',
-    link: 'https://feeds.simplecast.com/lKmQDG9R',
-    img:
-      'https://lh3.googleusercontent.com/cShjrh-GnRg5Sc-DRudnZ6isn_v89EeyTZeFZ3Liicpgu3MNYVk6rv8mNutI3038TqegBAUEO9jro4z5noVCuqeEWY-yi8WsdhdvQCvfAYM0251VhZw1fCUqMR6FI7lGwYdM2ALu=w2400'
-  },
-  {
-    category: 'keycard',
-    name: 'Keycard News',
-    link: 'https://feeds.simplecast.com/lKmQDG9R',
-    img:
-      'https://lh3.googleusercontent.com/z6xrfsk2CcuftPWBaoCz7BLUbDYFdkAABR7J85540omByCRbozmalDhjl-GgMJiG6qQ6k6bPWsuRkeKq_nD2ZpWapnmJmSbueySV20loeNSduDVIthUYaaDkxaI8e6X89THnCFjs=w2400'
-  },
-  {
-    category: 'assemble',
-    name: 'Assemble News',
-    link: 'https://feeds.simplecast.com/lKmQDG9R',
-    img:
-      'https://lh3.googleusercontent.com/ziNreb7iaFUG8y2h8RqTIcsuVShPvV3c6fvRUxjHRr0ow4uXIbkEz_QMK7bdDHoMYqkwk4SykVgQA8bibZppHsPRnA76XO8zwCbpFxnYeEyiJE6P_udN1MensMHg7zsQQOhJl8X_=w2400'
-  },
-  {
-    category: 'teller',
-    name: 'Teller News',
-    link: 'https://feeds.simplecast.com/lKmQDG9R',
-    img:
-      'https://lh3.googleusercontent.com/y2WgfFSPuWJO7JQSg0pMVGpu8G8jtb77dJ6zwI9duV1Vr3RI2ORKwaLFtVx_MuDdy8_J4bdTJpp7djqmhHatEQAE3DWKOZiUh4jqMCvDf_FvKpbXZX9FsOoRKS_vEpllxKhfxfoI=w2400'
-  },
-  {
-    category: 'vac',
-    name: 'Vac News',
-    link: 'https://feeds.simplecast.com/lKmQDG9R',
-    img:
-      'https://lh3.googleusercontent.com/5nqIqZ0syycQGt704Hf_8ZlNytDHk-qtPry9Nrx-KMfJ_sy2LXAqQ8HqIRe_LFFnE33iGyJh6v0jAYvVa2-SwwcG7cbz7nleovli75MxqZ93Uh5gE6K1XZpBAoHyDGL8Rx58PgD3=w2400'
-  },
-  {
-    category: 'embark',
-    name: 'Embark News',
-    link: 'https://feeds.simplecast.com/lKmQDG9R',
-    img:
-      'https://lh3.googleusercontent.com/3Cr-BRhNn3uVjlSemxVYMkA8BSiJTod1Rxq97Z5pLTBDxAkTLuMQ-9w0f1fuV99SLH_Sr4DGw6VLmdx6RjWXKmiAg_laQdmSzWsDuSR9buv70xirfvGLVNHLK83wBrMsyUJqTnyU=w2400'
-  },
-  {
-    category: 'nimbus',
-    name: 'Nimbus News',
-    link: 'https://feeds.simplecast.com/lKmQDG9R',
-    img:
-      'https://lh3.googleusercontent.com/Udf471HbwpX53XWm6Hzu9stQj760xEHW_t2puUtpXbt3yTCwvlaSVcWGQPc21DSpVmFdIm9J7YT2LE7UnpZGLxyQ8wAbedYs9TYpwJ8NYYp0CZeBgaur6i0lKuTp-rV9lmEMHuwc=w2400'
   }
 ]

src/pages/Home.js

@@ -24,7 +24,7 @@ class HomePage extends Component {
           </ProgressiveImage>
 
           <h3 className="Home-podcast-title">
-            {podcast.name.length > 13
+            {podcast.name.length > 20
               ? podcast.name.substring(0, 13) + '...'
               : podcast.name}
           </h3>