enhance: made some ui enhancements

Author: civilcoder55

config.toml

@@ -3,7 +3,7 @@ languageCode = 'en-us'
 title = 'OMAR.A'
 
 
-paginate = 4
+paginate = 10
 
 [params]
   description = "My Tech Blog"

layouts/_default/_markup/render-image.html

@@ -1,4 +1,4 @@
-<a href="{{ .Destination | safeURL }}" class="lightbox-image current gallery">
+<a href="{{ .Destination | safeURL }}" class="lightbox-image current gallery md-img__a">
   <img class='md-img' src="{{ .Destination | safeURL }}" {{- with .Text }} alt="{{ . }}" {{ end -}} {{- with .Title }}
     title="{{ . }}" {{ end -}}>
 </a>

layouts/_default/baseof.html

@@ -11,7 +11,7 @@
   <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
     rel="stylesheet">
   <link rel="stylesheet" href="/styles/style.css">
-  <link rel="icon" href="/images/favicon.png" />
+  <link rel="icon" href="/images/avatar.webp" />
   <title>{{ .Title }}</title>
 </head>
 

layouts/partials/footer.html

@@ -6,7 +6,7 @@
   </div>
 
   <div class="social">
-    <a href="{{ .Site.Params.social.linkedin }}" title="LinkedIn">
+    <a href="{{ .Site.Params.social.linkedin }}" title="LinkedIn" target="_blank">
       <svg height="20" width="20" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
         version="1.1" viewBox="0 0 512 512" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
         xmlns:serif="http://www.serif.com/" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -27,7 +27,7 @@
       </svg>
     </a>
 
-    <a href="{{ .Site.Params.social.github }}" title="GitHub">
+    <a href="{{ .Site.Params.social.github }}" title="GitHub" target="_blank">
       <svg enable-background="new -1163 1657.697 56.693 56.693" height="20" width="20" id="Layer_1" version="1.1"
         viewBox="-1163 1657.697 56.693 56.693" width="56.693px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink">

static/styles/style.css

@@ -17,7 +17,7 @@ body {
   font-size: 16px;
 }
 
-body.light{
+body.light {
   --bg: #dee4eb;
   --text: #1a2237;
 }
@@ -55,6 +55,7 @@ a {
   position: sticky;
   top: 0;
   background-color: var(--bg);
+  flex-wrap: wrap;
 }
 
 .logo {
@@ -165,7 +166,7 @@ a {
   font-size: 14px;
 }
 
-.pagination{
+.pagination {
   display: flex;
   gap: 10px;
   list-style: none;
@@ -176,7 +177,7 @@ a {
   margin-bottom: 30px;
 }
 
-.page-item{
+.page-item {
   border: 1px solid gray;
   width: 30px;
   height: 30px;
@@ -186,11 +187,12 @@ a {
   border-radius: 5px;
 }
 
-.page-item.active{
+.page-item.active {
   background-color: var(--text);
   color: var(--bg);
 }
-.page-item.disabled{
+
+.page-item.disabled {
   background-color: #313845;
   cursor: not-allowed;
 }
@@ -226,6 +228,7 @@ a {
   display: flex;
   align-items: center;
   gap: 20px;
+  flex-wrap: wrap;
 }
 
 .single-avatar {
@@ -251,9 +254,10 @@ a {
 
 .single-bottom {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   gap: 50px;
   margin-top: 50px;
+  max-width: 1136px !important;
 }
 
 .single-content {
@@ -269,11 +273,6 @@ a {
   margin: 20px 0px;
 }
 
-.single-content img {
-  width: 100%;
-  object-fit: cover;
-}
-
 .single-content pre {
   width: 100%;
   overflow-x: scroll;
@@ -282,21 +281,47 @@ a {
 
 /* SINGLE END */
 
+
+/* Markdown Styles START */
+
+.md-img__a {
+  display: flex;
+  justify-content: center;
+}
+
+.md-img {
+  display: block;
+  width: 100%;
+  border-radius: 15px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
+  border: 1px solid rgba(0, 0, 0, .5);
+  max-width: 850px;
+  height: auto;
+  box-sizing: border-box;
+}
+
+
+/* Markdown Styles END */
+
+
 @media (max-width: 1536px) {
   .container {
     max-width: 1366px;
   }
 }
+
 @media (max-width: 1366px) {
   .container {
     max-width: 1280px;
   }
 }
+
 @media (max-width: 1280px) {
   .container {
     max-width: 1024px;
   }
 }
+
 @media (max-width: 1024px) {
   .container {
     max-width: 768px;
@@ -312,33 +337,36 @@ a {
     flex-direction: column-reverse;
   }
 }
+
 @media (max-width: 768px) {
   .container {
     max-width: 640px;
   }
+
   .links {
     font-size: 14px;
   }
 
   .list-Item__image {
     display: none;
   }
-}
-@media (max-width: 640px) {
-  .container {
-    max-width: 475px;
-  }
-}
 
+  .links a {
+    display: none;
+  }
 
-/* Markdown Styles START */
+  .md-img {
+    max-width: 100%;
+    width: auto;
+  }
 
-.md-img {
-  display: block;
-  max-width: 100%;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
-  border: 1px solid rgba(0, 0, 0, .5);
-  border-radius: 15px;
+  .single-head__title {
+    font-size: 20px;
+  }
 }
 
-/* Markdown Styles END */
+@media (max-width: 640px) {
+  .container {
+    max-width: 475px;
+  }
+}