Convert single page into hugo template

static/assets/css/single.css

@@ -0,0 +1,240 @@
+.read-area {
+  background-color: #f9fafc;
+}
+
+.wrapper {
+  padding: 0;
+}
+
+.hero-area {
+  margin-top: 50px;
+  width: 100%;
+  height: 400px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.page-content {
+  width: 100%;
+  position: relative;
+  top: -4.5rem;
+  padding: 15px;
+}
+
+.author-profile {
+  position: relative;
+  align-content: center;
+  text-align: center;
+}
+
+.author-profile img {
+  height: 120px;
+  width: 120px;
+}
+.author-profile p {
+  color: #8392a5;
+}
+
+.title {
+  text-align: center;
+}
+
+.post-content {
+  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: 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;
+}
+
+tbody tr:nth-child(odd) {
+  background-color: #e5e9f2;
+}
+
+tbody tr:hover {
+  background: #c0ccda;
+}
+
+figure {
+  border: 1px solid #c0ccda;
+  height: fit-content;
+  width: fit-content;
+  align-self: center;
+  margin: auto;
+}
+
+img {
+  max-width: 100%;
+}
+
+caption,
+figcaption {
+  caption-side: bottom;
+  text-align: center;
+  color: #8392a5;
+}
+
+pre {
+  margin: 5px;
+}
+
+code {
+  padding: 10px !important;
+}
+
+.navbar-toggler {
+  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: #2098d1;
+  transition: all 0.3s ease-out;
+}
+
+.next-prev-navigator a:hover {
+  color: #3c4858;
+  transition: all 0.3 ease-out;
+}
+
+.next-prev-navigator .next-article {
+  text-align: right;
+}
+
+.next-prev-navigator .next-article a {
+  transition: all 0.3s ease-out;
+}
+
+.next-prev-navigator .previous-article a {
+  transition: all 0.3s ease-out;
+}
+
+.next-prev-navigator .btn-outline-info {
+  color: #f9fafc !important;
+  border-color: #e5e9f2 !important;
+  background-color: #248aaa !important;
+  transition: all 0.3s ease-out;
+}
+
+.next-prev-navigator .btn-outline-info:hover {
+  color: #3c4858 !important;
+  background-color: #e5e9f2 !important;
+  transition: all 0.3s ease-out;
+}
+
+.disquss {
+  padding: 10px;
+}
+
+@media only screen and (max-width: 768px) {
+  .wrapper {
+    padding-left: 0px;
+    padding-right: 0px;
+    overflow: hidden;
+  }
+  .container {
+    max-width: 100%;
+  }
+  .container {
+    padding: 10px;
+  }
+}
+@media only screen and (max-width: 576px) {
+  .wrapper {
+    padding: 0px;
+  }
+
+  .hero-area {
+    height: 200px;
+  }
+
+  .page-content {
+    padding: 0px;
+  }
+
+  pre {
+    margin: 0px;
+  }
+  code {
+    padding: 0px;
+  }
+  .next-prev-navigator .previous-article {
+    text-align: center;
+    margin: 5px;
+  }
+  .next-prev-navigator .next-article {
+    text-align: center;
+    margin: 5px;
+  }
+  .previous-article a,
+  .next-article a {
+    width: 100%;
+  }
+}