Convert single page into hugo template

static/assets/css/home.css

@@ -100,7 +100,7 @@
   .content {
     position: relative;
     top: -75%;
-    height: 70%;
+    height: 65%;
   }
 
   .home img {

static/assets/css/single.css

@@ -2,21 +2,24 @@
   background-color: #f9fafc;
 }
 
+.wrapper {
+  padding: 0;
+}
+
 .hero-area {
   margin-top: 50px;
   width: 100%;
   height: 400px;
-  background-image: url(/assets/img/bg.jpg);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
 }
 
-.content {
+.page-content {
   width: 100%;
   position: relative;
-  top: -60px;
-  padding: 5px;
+  top: -4.5rem;
+  padding: 15px;
 }
 
 .author-profile {
@@ -38,19 +41,52 @@
 }
 
 .post-content {
-  padding: 10px;
+  padding: 15px;
+}
+
+.post-content h1,
+h2 {
+  margin-top: 1.4rem;
+}
+
+.post-content h3,
+h4,
+h5,
+h6 {
+  margin-top: 1.3rem;
+}
+
+.post-content blockquote {
+  border-left: 4px solid #248aaa;
+  background-color: #248baa15;
+  padding: 0.3rem;
+  padding-left: 1rem;
+}
+
+.post-content blockquote > p {
+  color: #3c4858;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
 table {
-  border-radius: 20px;
+  border-radius: 0.1rem;
   background: #e5e9f2;
   border: 1px solid #c0ccda;
+  padding: 0.1rem;
 }
 
 table tr {
   height: 40px !important;
 }
 
+table th,
+td {
+  padding: 0.5rem;
+  border-left: 1px solid #8392a5;
+  border-bottom: 1px solid #8392a5;
+}
+
 table thead tr {
   background: #248aaa;
   color: #e5e9f2;
@@ -95,18 +131,36 @@ code {
   display: none;
 }
 
+ul > ol,
+ol > ul,
+ul > ul,
+ol > ol,
+li > ol,
+li > ul {
+  padding-inline-start: 25px;
+}
+
+kbd {
+  background-color: #248aaa !important;
+  color: #f9fafc;
+}
+
+mark {
+  background-color: #ffc21280;
+}
+
 .next-prev-navigator {
   padding-left: 10px;
   padding-right: 10px;
 }
 
 .next-prev-navigator a {
-  color: #3c4858;
+  color: #2098d1;
   transition: all 0.3s ease-out;
 }
 
 .next-prev-navigator a:hover {
-  color: #2098d1;
+  color: #3c4858;
   transition: all 0.3 ease-out;
 }
 
@@ -123,15 +177,15 @@ code {
 }
 
 .next-prev-navigator .btn-outline-info {
-  color: #3c4858 !important;
+  color: #f9fafc !important;
   border-color: #e5e9f2 !important;
-  background-color: #e5e9f2 !important;
+  background-color: #248aaa !important;
   transition: all 0.3s ease-out;
 }
 
 .next-prev-navigator .btn-outline-info:hover {
-  color: #f9fafc !important;
-  background-color: #248aaa !important;
+  color: #3c4858 !important;
+  background-color: #e5e9f2 !important;
   transition: all 0.3s ease-out;
 }
 
@@ -161,7 +215,7 @@ code {
     height: 200px;
   }
 
-  .content {
+  .page-content {
     padding: 0px;
   }