dotfiles

commit 4bda11e6d3ac2077091aff9aacf54e2767a687c6
parent 98c0efc82305dc1be08437c51b4b1e670df4e60b
Author: maydayv7 <maydayv7@gmail.com>
Date:   Tue, 12 Apr 2022 12:42:39 +0530

feat(site): Improve Styling

Changes:
+ Add Scroll To Top Button
+ Refine Footnote Styling
+ Fix Build Errors

Diffstat:

10 files changed, 85 insertions(+), 10 deletions(-)
diff --git a/README.md b/README.md
@@ -414,7 +414,7 @@ You can navigate to the `README`'s present in the various directories to know mo
 
 - Deprecate `git-crypt` Usage
 - Improve Installation Experience
-- Create Nix Cheat Sheet
+- Begin Work on Blog
 
 <details>
 <summary><i>Archive</i></summary>
diff --git a/flake.lock b/flake.lock
@@ -287,11 +287,11 @@
     },
     "stable": {
       "locked": {
-        "lastModified": 1649490789,
-        "narHash": "sha256-YrhVxwoofZSx/wLZ4GYET//8vS+uqWX572zvdmP/Etg=",
+        "lastModified": 1648830526,
+        "narHash": "sha256-vXaBIvst+KvXSRAjYBDzX4vtQERL5R4fe0/7585Msqk=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "c86185d20d708013caf97a6adaa8dc6d72313c75",
+        "rev": "6f88260faaaa3cda8f4e478be72be6c0861c47ad",
         "type": "github"
       },
       "original": {
diff --git a/site/content/blog/hello.md b/site/content/blog/hello.md
@@ -17,4 +17,4 @@ Just Following Tradition ;)
 
 This Site is generated by [Zola](https://www.getzola.org/) using a modified version of the [`zerm`](https://github.com/ejmg/zerm) Theme, with Support for Custom Color Schemes and Math Typesetting support using [$\KaTeX$](https://katex.org/)
 
-{{ figure(src="https://raw.githubusercontent.com/maydayv7/dotfiles/41cccc0635c570b735b716d84dd4c0289ce7f54d/files/images/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://raw.githubusercontent.com/maydayv7/dotfiles/b384f1914f030f1e12ae58cc2b78512a378bf4c9/files/images/wallpapers/Island.jpg", alt="Island", style="border-style: inset; border-radius: 15px; width: 100%;", caption="A Nice Wallpaper", caption_style="font-weight: bold;") }}
diff --git a/site/content/blog/nix.md b/site/content/blog/nix.md
@@ -25,7 +25,7 @@ This Page is still under heavy development and may remain unfinished or subjecte
 
 [**`nixpkgs`**](https://github.com/nixos/nixpkgs), basically the main _package repository_ to use with Nix, is a giant collection of package descriptions as well as configuration modules written in the Nix language, that serves to build multiple applications for our day-to-day use, as well as the tools required to properly define a NixOS Configuration. It provides a vast number of applications, programs and services, language-specific package sets, cross-compilation tools, and many other such packages, which makes Nix such a powerful tool
 
-The Nix **programming language** is simple, _lazy_ (which means evaluation of expressions is delayed until their values are actually needed), pure, functional, and dynamically typed, which specializes in building packages. The Nix [Pills](https://nixos.org/guides/nix-pills/) Tutorial dives into the language syntax and semantics in detail
+The Nix **programming language** is simple, _lazy_ [^2], pure, functional, and dynamically typed, which specializes in building packages. The Nix [Pills](https://nixos.org/guides/nix-pills/) Tutorial dives into the language syntax and semantics in detail
 
 # Resources
 
@@ -40,3 +40,5 @@ Below is a list of handy, helpful resources and documentation that can be used t
 # Footnotes
 
 [^1]: Provided that they are not **_garbage collected_** - Removing or modifying a package from the configuration doesn't exactly delete older versions from the system. All they do is create a new derivation that no longer contains symlinks to the older packages. Since disk space is limited, unused packages should be removed at some point, which can be done using `nix-collect-garbage -d` or `nix store --gc`
+
+[^2]: Evaluation of expressions is delayed until their values are actually needed. For more information, see [this](https://en.wikipedia.org/wiki/Lazy_evaluation)
diff --git a/site/sass/_footer.scss b/site/sass/_footer.scss
@@ -42,19 +42,24 @@
 }
 
 a.backlink {
-  margin-left: 5px;
+  margin-left: 10px;
   font-size: 1.3rem;
 }
 
 .footnote {
   &-definition {
-    display: flex;
+    color: var(--accent);
     margin-right: 10px;
 
+    p {
+      display: inline;
+      color: rgba(255, 255, 255, 0.7);
+    }
+
     &-label {
       font-style: italic;
       font-weight: bold;
-      margin-right: 10px;
+      margin-left: 3px;
     }
   }
 }
diff --git a/site/sass/_main.scss b/site/sass/_main.scss
@@ -97,6 +97,13 @@ h6 {
   display: none;
 }
 
+hr {
+  width: 100%;
+  border: none;
+  background: var(--border-color);
+  height: 1px;
+}
+
 a {
   color: inherit;
   background: linear-gradient(
@@ -146,6 +153,24 @@ ol ol {
   list-style-type: lower-alpha;
 }
 
+table {
+  table-layout: fixed;
+  border-collapse: collapse;
+  width: 100%;
+  margin: 40px 0;
+}
+
+th {
+  color: var(--accent);
+}
+
+table,
+th,
+td {
+  border: 1px dashed var(--accent);
+  padding: 10px;
+}
+
 input {
   background: var(--background);
   border-color: var(--accent-secondary);
diff --git a/site/sass/_post.scss b/site/sass/_post.scss
@@ -189,7 +189,7 @@ blockquote {
           font-size: inherit;
           margin-left: 0.5rem;
           text-decoration: none;
-          vertial-align: 1%;
+          vertical-align: 1%;
           visibility: hidden;
         }
 
@@ -245,3 +245,23 @@ blockquote {
     }
   }
 }
+
+.scroll-back {
+  background-color: var(--accent-alpha-20);
+  border-radius: 10px;
+  border: none;
+  bottom: 20px;
+  color: var(--accent-secondary);
+  cursor: pointer;
+  font-size: 18px;
+  outline: none;
+  padding: 12px;
+  position: fixed;
+  right: 30px;
+  transition: all 0.5s ease;
+  z-index: 100;
+
+  &:hover {
+    background-color: var(--accent-alpha-70);
+  }
+}
diff --git a/site/static/js/scroll.js b/site/static/js/scroll.js
@@ -0,0 +1,21 @@
+var scrollButton = document.querySelector(".scroll-back");
+var rootElement = document.documentElement;
+
+function handleScroll() {
+  var scrollTotal = rootElement.scrollHeight - rootElement.clientHeight;
+  if (rootElement.scrollTop / scrollTotal > 0.7) {
+    scrollButton.style.display = "block";
+  } else {
+    scrollButton.style.display = "none";
+  }
+}
+
+function scrollBack() {
+  rootElement.scrollTo({
+    top: 0,
+    behavior: "smooth",
+  });
+}
+
+scrollButton.addEventListener("click", scrollBack);
+document.addEventListener("scroll", handleScroll);
diff --git a/site/templates/macros/javascript.html b/site/templates/macros/javascript.html
@@ -3,6 +3,7 @@
 <script> switch_theme.init("{{config.base_url | safe}}"); </script>
 <script src="{{ get_url(path="js/clipboard.js") }}"></script>
 <script src="{{ get_url(path="js/footnote.js") }}"></script>
+<script src="{{ get_url(path="js/scroll.js") }}"></script>
 {% if config.build_search_index %}
   <script src="{{ get_url(path="elasticlunr.min.js") }}"></script>
   <script src="{{ get_url(path="search_index.en.js") }}"></script>
diff --git a/site/templates/page.html b/site/templates/page.html
@@ -45,4 +45,5 @@ endblock math -%} {%- block title %}
   <script async defer src="https://buttons.github.io/buttons.js"></script>
   {% endif %} {{ pages::related() }}
 </article>
+<button class="scroll-back" id="scroll-back" title="Scroll Up">↑</button>
 {%- endblock main -%}