changed few style for better view

Binu42 · Binu42 · commit 8c6242721068 · 2020-05-16T00:27:15.000+05:30
diff --git a/public/index.html b/public/index.html
@@ -2,20 +2,44 @@
 <html lang="en">
 
 <head>
+  <title>WebDevsCom</title>
   <meta charset="utf-8" />
   <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" type="image/x-icon" />
   <meta itemprop="image" content="%PUBLIC_URL%/favicon.ico">
   <meta property="og:image" content="%PUBLIC_URL%/favicon.ico" />
-  <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png" />
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
   <meta name="description"
+    content="Website to help developers by providing them helpful resources and giving experience of open source contribution.">
+  <meta name="keywords"
+    content="Binu kumar, developer, projects, skills, apps, frontend, design, github, readme, youtube, interview, coder, programmers, website, full stack developer, frontend-design, resources, kbinu42" />
+  <meta name="author" content="Binu kumar">
+  <meta name="email" content="kbinu42@gmail.com">
+  <meta name="copyright" content="MIT" />
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content="WebDevsCom" />
+  <meta property="og:description"
     content="Website to help developers by providing them helpful resources and giving experience of open source contribution." />
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <title>WebDevsCom</title>
+  <meta property="og:image" content="%PUBLIC_URL%/apple-touch-icon.png" />
+  <meta property="og:url" content="kbinu42.netlify.com" />
+  <meta property="og:site_name" content="WebDevsCom" />
+
+  <meta name="twitter:card" content="website">
+  <meta name="twitter:site" content="Binu kumar">
+  <meta name="twitter:title" content="WebDevsCom">
+  <meta name="twitter:description"
+    content="Website to help developers by providing them helpful resources and giving experience of open source contribution.">
+  <meta name="twitter:creator" content="@BinuKum59882786">
+  <meta name="twitter:image" content="%PUBLIC_URL%/apple-touch-icon.png">
+
+  <meta itemprop="name" content="Binu kumar">
+  <meta itemprop="description"
+    content="Website to help developers by providing them helpful resources and giving experience of open source contribution.">
+  <meta itemprop="image" content="%PUBLIC_URL%/apple-touch-icon.png">
+  <link href="https://fonts.googleapis.com/css2?family=Eagle+Lake&display=swap" rel="stylesheet">
 </head>
 
 <body>
diff --git a/src/App.css b/src/App.css
@@ -50,9 +50,14 @@
 
 /* markdown */
 #markdown {
+  padding: 1rem;
   margin-top: 1rem;
   width: 100%;
-  overflow: auto;
+  overflow-x: auto;
+}
+
+#markdown p {
+  text-align: justify;
 }
 
 /* loader */
@@ -105,7 +110,7 @@ ul ol {
 
 #bookmarkBtn {
   position: fixed;
-  bottom: 20px;
+  bottom: 24px;
   left: 30px;
   z-index: 99;
 }
@@ -153,6 +158,11 @@ ul ol {
     text-align: center;
   }
 
+  #markdown {
+    padding: 0;
+    overflow-x: hidden;
+  }
+
   table {
     max-width: 100%;
     overflow-x: auto;
diff --git a/src/components/Category/Resource.js b/src/components/Category/Resource.js
@@ -64,7 +64,7 @@ const Resource = (props) => {
 
       const h3 = document.querySelectorAll('#markdown h3');
       for (i = 0; i < h3.length; i++) {
-        h3[i].className = 'title is-3';
+        h3[i].className = 'title is-4';
         h3[i].setAttribute(
           'id',
           h3[i].innerHTML
@@ -97,7 +97,8 @@ const Resource = (props) => {
 
       const table = document.querySelectorAll('#markdown table');
       for (i = 0; i < table.length; i++)
-        table[i].className = 'table is-hoverable is-fullwidth is-striped';
+        table[i].className =
+          'table is-hoverable is-bordered is-fullwidth is-striped';
 
       const images = document.querySelectorAll('img');
       for (i = 0; i < images.length; i++) {
