update podcasts list and css

index.html

@@ -28,7 +28,6 @@
       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"

src/css/HomePage.styles.css

@@ -62,7 +62,15 @@
 }
 
 .Home-podcast-title {
+  margin-top: 5px;
   font-weight: normal;
+  color: rgb(105, 105, 105);
+  text-align: center;
+}
+
+.Home-podcast-creator {
+  font-weight: normal;
+  margin-top: 5px;
   color: #999;
   text-align: center;
 }
@@ -70,14 +78,14 @@
 .Home-podcasts {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-  grid-gap: 10px;
+  grid-gap: 80px;
 }
 
 .grid {
   display: grid;
   margin-left: 30px;
   grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-  grid-gap: 60px;
+  grid-gap: 80px;
   margin-bottom: 100px;
 }
 

src/css/SettingsPage.styles.css

@@ -22,6 +22,7 @@
   position: relative;
   padding-left: 35px;
   margin-right: 20px;
+  margin-bottom: 30px;
   cursor: pointer;
   font-size: 18px;
   user-select: none;

src/css/markdown.css

@@ -14,14 +14,17 @@
 
 .markdown h1 {
     margin: 2rem 0;
+    line-height: 140%;
 }
 
 .markdown h2 {
     margin: 2rem 0;
+    line-height: 140%;
 }
 
 .markdown p {
     margin: 2rem 0;
+    line-height: 180%;
 }
 
 .markdown pre {

src/data/podcasts.js

@@ -8,43 +8,14 @@ export const categories = [
     category: 'status',
     display: 'Status',
     subtitle: 'A multi-purpose communication tool that combines a peer-to-peer messenger, decentralized crypto-wallet, and Web3 browser'
-  },
-  {
-    category: 'embark',
-    display: 'Embark',
-    subtitle: 'The all-in-one developer platform for building and deploying decentralized applications'
-  },
-  {
-    category: 'nimbus',
-    display: 'Nimbus',
-    subtitle: 'Lighter Ethereum 2.0 clients'
-  },
-  {
-    category: 'keycard',
-    display: 'Keycard',
-    subtitle: 'Secure, contactless, open source hardwallet'
-  },
-  {
-    category: 'assemble',
-    display: 'Assemble',
-    subtitle: 'The decentralized Web 3 funding platform'
-  },
-  {
-    category: 'teller',
-    display: 'Teller',
-    subtitle: 'Secure and simple marketplace to buy and sell cryptocurrencies with people near you'
-  },
-  {
-    category: 'vac',
-    display: 'Vac',
-    subtitle: 'A modular, peer-to-peer messaging stack for private, secure, censorship resistant communication'
   }
 ]
 
 export const podcasts = [
   {
-    category: 'general',
+    category: 'status',
     name: 'Everything Status',
+    creator: 'Henry Dada',
     link: 'http://feeds.soundcloud.com/users/soundcloud:users:741837922/sounds.rss',
     img:
       'https://lh3.googleusercontent.com/W5mQLucviakmoHAFldUZbtFkTHw91vbcQk0w8o3woHEm9c4lpaMqi4cmY6bl3HmTSTnCxL5dvwwbDQa0eVGHrT16dhjEQmoAvg1Mk1Gjy-i3QtJjFRk1o5RxaWQ0BDfVn3oTntFF=w2400'
@@ -52,6 +23,7 @@ export const podcasts = [
   {
     category: 'general',
     name: 'The Bitcoin Podcast',
+    creator: 'Corey & Demetrick',
     link: 'https://feeds.simplecast.com/xCQr3ykc',
     img:
       'https://lh3.googleusercontent.com/h-NtM2BbbFddHMNyTGBmGdzge-zqyy9-LCSUnRF8r7st1s6ZIzZM01YFTAcFkvlf8TfF2cptTBSlNUGEVpf_1SM8LPO00tPo6OAKaSDePLu6_TC6IBWSZpVeIr1aTvDXrEwuFqPQ0w=w2400'
@@ -59,6 +31,7 @@ export const podcasts = [
   {
     category: 'general',
     name: 'Epicenter',
+    creator: 'Epicenter Media',
     link: 'https://feeds.simplecast.com/lKmQDG9R',
     img:
       'https://lh3.googleusercontent.com/cwsJClMXMYPuo17tQmeZDYhXI7ZKQta4AUGJ0mKrFaPBpRFssVpxLvzE-eScQ8vdBkTvcB9B5oF_tyY_gQAix-7muSwBfPrj1x5Pfa4r-6TCXJqxg6l8beQ9GVGjlDquy0I_oYlGKg=w2400'

src/pages/Home.js

@@ -25,9 +25,12 @@ class HomePage extends Component {
 
           <h3 className="Home-podcast-title">
             {podcast.name.length > 20
-              ? podcast.name.substring(0, 13) + '...'
+              ? podcast.name.substring(0, 20) + '...'
               : podcast.name}
           </h3>
+          <h3 className="Home-podcast-creator">
+                {podcast.creator}
+          </h3>
         </div>
       </Link>
     ))
@@ -52,10 +55,13 @@ class HomePage extends Component {
               </ProgressiveImage>
 
               <h3 className="Home-podcast-title">
-                {podcast.name.length > 13
-                  ? podcast.name.substring(0, 13) + '...'
+                {podcast.name.length > 20
+                  ? podcast.name.substring(0, 20) + '...'
                   : podcast.name}
               </h3>
+              <h3 className="Home-podcast-creator">
+                {podcast.creator}
+              </h3>
             </div>
           </Link>
         ))