dotfiles

commit 971f23e04015e0ca23beda26945aff63d0827780
parent f5538c5dc5cfba65bc56920062922e1a5cccd728
Author: maydayv7 <maydayv7@gmail.com>
Date:   Sun,  9 Feb 2025 19:35:06 +0530

feat(`site`): Styling Improvements

Diffstat:

7 files changed, 43 insertions(+), 28 deletions(-)
diff --git a/site/content/_index.md b/site/content/_index.md
@@ -10,5 +10,3 @@ insert_anchor_links = "right"
 My only goal was to have a site where I could showcase anything I wanted to. For now it's just a blog, but fingers crossed ;)
 
 If you want to know what I’m currently up to, check out {{ url(path="/now", text="/now") }}
-
-- View the {{ url(path="sitemap.xml", text="Site Map", trail_slash=false) }}
diff --git a/site/content/sample.md b/site/content/sample.md
@@ -12,6 +12,8 @@ Here's a general demo of how things look! [^1]
 
 Written in [**Markdown**](https://www.markdownguide.org/), rendered using Zola's `pulldown-cmark` parser
 
+- View the {{ url(path="sitemap.xml", text="Site Map", trail_slash=false) }}
+
 # Content
 
 [_Jet Brains_](https://www.jetbrains.com/lp/mono/) fonts are used for additional ligatures and irresistible **_style_**!
@@ -94,7 +96,7 @@ Supports wide range of Multi-Media using [_shortcodes_](https://www.getzola.org/
 
 ## Image
 
-{{ figure(src="https://github.com/maydayv7/proprietary/blob/45552f2069239c3b59bee339503fc005423b5da6/wallpapers/Island.jpg", alt="Island", style="border-style: inset; border-radius: 15px; width: 100%;", caption="A Nice Wallpaper", caption_style="font-weight: bold;") }}
+{{ figure(src="https://picsum.photos/700", alt="Random", style="border-style: inset; border-radius: 5px;", caption="Random Image", caption_style="font-weight: bold;") }}
 
 ## Video
 
diff --git a/site/sass/_comments.scss b/site/sass/_comments.scss
@@ -9,8 +9,7 @@
     background-color: var(--background);
     border: 2px solid var(--accent-alpha-70);
     color: var(--color);
-    cursor: pointer;
-    font-family: "JetBrainsMono";
+    font-family: inherit;
     font-size: 16px;
     margin: 15px 0 20px 7px;
     outline: none;
@@ -20,6 +19,7 @@
 
     &:hover {
       background-color: var(--accent-secondary-alpha-20);
+      cursor: pointer;
     }
 
     &:active {
diff --git a/site/sass/_post.scss b/site/sass/_post.scss
@@ -24,7 +24,7 @@ blockquote {
 .copy {
   background: var(--background);
   border-color: var(--accent-secondary);
-  border-radius: 10px;
+  border-radius: 5px;
   color: var(--color);
   display: block;
   font-size: 0.8em;
@@ -148,14 +148,8 @@ blockquote {
       background: var(--accent-alpha-20);
       border-radius: $corner-radius;
       color: var(--accent-secondary);
-      font-family:
-        "JetBrainsMono",
-        Menlo,
-        DejaVu Sans Mono,
-        Monaco,
-        Consolas,
-        Ubuntu Mono,
-        monospace;
+      font-family: "JetBrainsMono", Menlo, DejaVu Sans Mono, Monaco, Consolas,
+        Ubuntu Mono, monospace;
       font-feature-settings: normal;
       font-size: 0.95rem;
       margin: 0 2px;
@@ -165,14 +159,8 @@ blockquote {
     pre {
       border: 1px solid var(--border-color);
       border-radius: $corner-radius;
-      font-family:
-        "JetBrainsMono",
-        Menlo,
-        DejaVu Sans Mono,
-        Monaco,
-        Consolas,
-        Ubuntu Mono,
-        monospace;
+      font-family: "JetBrainsMono", Menlo, DejaVu Sans Mono, Monaco, Consolas,
+        Ubuntu Mono, monospace;
       font-size: 0.95rem;
       overflow: auto;
       padding: 15px 10px;
diff --git a/site/sass/_search.scss b/site/sass/_search.scss
@@ -12,6 +12,11 @@
 
     input {
       width: 100%;
+      transition: background-color 0.2s ease-in;
+
+      &:hover {
+        background-color: var(--accent-alpha-20);
+      }
     }
 
     @media (max-width: $phone-max-width) {
@@ -27,10 +32,12 @@
   }
 
   &-results {
-    background: var(--accent-alpha-70);
+    background-color: var(--accent-alpha-20);
+    backdrop-filter: blur(10px);
     border-style: inset;
     color: var(--accent-secondary);
     display: none;
+    z-index: 1;
     max-height: 500px;
     overflow: auto;
     padding: 1rem;
@@ -46,9 +53,19 @@
       left: 0;
     }
 
+    &__number {
+      font-size: small;
+      text-align: end;
+      margin: -15px 5px -25px;
+    }
+
     &__item {
       margin-bottom: 1rem;
 
+      .title {
+        margin: 5px;
+      }
+
       a {
         display: inline-block;
         font-size: $font-size;
diff --git a/site/static/js/search.js b/site/static/js/search.js
@@ -17,7 +17,7 @@ function makeTeaser(body, terms) {
   var TERM_WEIGHT = 40;
   var NORMAL_WORD_WEIGHT = 2;
   var FIRST_WORD_WEIGHT = 8;
-  var TEASER_MAX_WORDS = 30;
+  var TEASER_MAX_WORDS = 20;
 
   var stemmedTerms = terms.map(function (w) {
     return elasticlunr.stemmer(w.toLowerCase());
@@ -110,7 +110,7 @@ function formatSearchResultItem(item, terms) {
     `</h1>` +
     `<div>${makeTeaser(item.doc.body, terms)}</div>` +
     `<a href='${item.ref}'>` +
-    `Read More <span class="icon is-small">→</span>` +
+    `<i>Read More <span class="icon is-small">→</span></i>` +
     `</a>` +
     "</div>"
   );
@@ -151,6 +151,15 @@ function initSearch() {
         return;
       }
 
+      var number = document.createElement("p");
+      number.innerHTML =
+        '<div class="search-results__number">' +
+        `<b>${results.length}</b> ${
+          results.length === 1 ? "result" : "results"
+        }` +
+        "</div>";
+      $searchResultsItems.appendChild(number);
+
       currentTerm = term;
       for (var i = 0; i < Math.min(results.length, MAX_ITEMS); i++) {
         var item = document.createElement("li");
diff --git a/site/templates/shortcodes/youtube.html b/site/templates/shortcodes/youtube.html
@@ -1,10 +1,11 @@
 <div class="youtube is-flex is-justify-content-center is-align-items-center">
   <iframe
-    width="848"
-    height="510"
+    width="100%"
+    height="600px"
     src="https://www.youtube.com/embed/{{id}}"
     frameborder="0"
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-    allowfullscreen>
+    allowfullscreen
+    style="border: inset; border-radius: 5px">
   </iframe>
 </div>