fixes in main

src/pages/index.js

@@ -64,10 +64,9 @@ const IndexPage = ({data}) => (
           return (
             <div class = "card" style={{marginBottom: `15px`, borderRadius: `0px`, boxShadow: `0 2px 2px #A2A2A2`}}>
             <div class = "card-body">
-              <div class = "title">
-              <h2>{title}</h2>
-              </div>
-              <span id="date">{date}</span>
+              <h2 class = "title">
+              {title}<span id="date">{date}</span>
+              </h2>
                 <p
                   dangerouslySetInnerHTML = {{
                     __html: post.frontmatter.description || post.html,

src/styles/layout.css

@@ -24,7 +24,7 @@ body {
 
 main { margin-top: 17%; }
 
-@media (min-width: 769px) { 
+@media (max-width: 769px) { 
   main { margin-top: 6%; }
   nav.navbar.navbar-expand-lg.navbar-light { width: 100%; padding: 0; } }
 

src/styles/main.css

@@ -1,12 +1,15 @@
+main { margin-top: 65px; }
+
 /* ----- navbar ----------------------------- */
 .navbar-light .navbar-nav .nav-link { color: rgb(190, 190, 190); }
 .navbar-light .navbar-nav .nav-link:hover { color: white; }
 .navbar-light .navbar-nav .nav-item:hover { background-color: rgb(20, 142, 161); padding-bottom: 15px; }
 .navbar-light .navbar-nav .nav-item.active{ color: rgb(190, 190, 190); }
-li.nav-item {margin: 0;}
+li.nav-item {margin-bottom: 25px; }
 ul.navbar-nav { margin-bottom: -8px; align-items: center;}
 ul.navbar-nav .nav-item a.nav-link { padding: 15px; }
-a[aria-current="page"] img#logo { opacity: 1; margin-top: 10px;}
+a[aria-current="page"] img#logo { opacity: 1; margin-top: 0px; }
+a.navbar-brand img#logo { margin: 0 }
 ul.navbar-nav li.nav-item.active a.nav-link { 
   background-color:rgb(20, 142, 161); 
   padding-bottom: 15px; 
@@ -54,7 +57,7 @@ a#more.btn.btn-primary {
   background-color: rgb(51, 113, 155);
   border: rgb(36,88,122); }
 
-div.title { 
+h2.title { 
   background-color: rgb(247, 247, 247);
   padding: 15px;
   border: 2px solid #E8E4E4;
@@ -65,9 +68,11 @@ span#date {
   font-size: 20px;
   opacity: 0,7;
   background-color: rgb(209, 121, 121);
-  padding: 7px;
+  padding: 5px;
   border: 1px solid #8f4f4f;
-}
+  position: absolute;
+  top: 25px;
+  right: 26px; }
 
 p { 
   font-size: 20px; 
@@ -80,7 +85,7 @@ hr {
   margin: 10px 0px 20px 0px; }
 
 img.center-block { margin-bottom: 0; }
-li { margin-bottom: 0; font-size: 20px;}
+li { margin-bottom: 0; font-size: 20px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
 ul { margin: 0 0 20px 0; padding-left: 40px; }
 p#button { margin-bottom: 0px; }
 p.lead { margin-bottom: 20px; font-size: 25px; }
@@ -93,4 +98,15 @@ span.badge.badge-info {
   background-color: rgb(20,142,161); }
 
 span.katex-html{color: rgb(0, 0, 0); font-weight: 500;}  
-/* -------------------------------------------------------- */
+/* -------------------------------------------------------- */
+
+/* --- media --------------------------------------------- */
+@media (max-width: 769px) { 
+  span#date { 
+    top: 0;
+    right: 0; }
+  button#togglerButton.navbar-toggler.collapsed {
+    margin-top: 10px;
+    margin-left: 10px; }
+ }
+/* ------------------------------------------------------- */