layout updated with top button and increased font size

dipaish · Feb 27, 2024 · 3f03448 · 3f03448
1 parent eba02b1
commit 3f03448
Showing 1 changed file with 76 additions and 1 deletion.
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -2,6 +2,57 @@
 <html>
 <head>
     {% include head.html %}
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
+    <style> 
+    body {
+        zoom: 120%;
+        margin: 0; 
+        /* Google font */
+        font-family: 'Open Sans', sans-serif;
+        width: 90%;
+    }
+    .fixed-column {
+        /* Default styles for larger screens */
+        position: sticky;
+        top: 0; /* You can adjust the top position as needed */
+        bottom: 0; /* You can adjust the bottom position as needed */
+        left: 0; /* You can adjust the left position as needed */
+        overflow-y: auto; /* Optional: Add scrollbar if content overflows vertically */
+    }
+
+/* Media query to override styles for smaller screens (e.g., mobile devices) */
+@media (max-width: 767px) {
+    .fixed-column {
+        position: static; /* or any other style suitable for smaller screens */
+        width: 100%; /* Adjust the width for mobile devices */
+        border-right: none; /* Remove border for smaller screens */
+        overflow-y: visible; /* Allow content to overflow vertically */
+    }
+}
+
+#myBtn {
+  display: none;
+  position: fixed;
+  bottom: 20px;
+  right: 30px;
+  z-index: 99;
+  font-size: 18px;
+  border: none;
+  outline: none;
+  background-color: red;
+  color: white;
+  cursor: pointer;
+  padding: 15px;
+  border-radius: 4px;
+}
+
+#myBtn:hover {
+  background-color: #555;
+}
+
+    </style>
     <script>
         $(document).ready(function() {
             // Initialize navgoco with default options
@@ -82,7 +133,7 @@
         {% assign content_col_size = "col-md-12" %}
         {% unless page.hide_sidebar %}
             <!-- Sidebar Column -->
-            <div class="col-md-3" >
+            <div class="col-md-3 fixed-column" >
             <!-- this handles the automatic toc. use ## for subheads to auto-generate the on-page minitoc. if you use html tags, you must supply an ID for the heading element in order for it to appear in the minitoc. -->
 <script>
     $( document ).ready(function() {
@@ -109,6 +160,7 @@
 
         <!-- Content Column -->
         <div class="{{content_col_size}}">
+            <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
             {{content}}
         </div>
     <!-- /.row -->
@@ -118,6 +170,29 @@
 <!-- /#main -->
     </div>
 
+
+
+    <script>
+        // Get the button
+        let mybutton = document.getElementById("myBtn");
+
+        // When the user scrolls down 20px from the top of the document, show the button
+        window.onscroll = function() {scrollFunction()};
+
+        function scrollFunction() {
+          if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            mybutton.style.display = "block";
+          } else {
+            mybutton.style.display = "none";
+          }
+        }
+
+        // When the user clicks on the button, scroll to the top of the document
+        function topFunction() {
+          document.body.scrollTop = 0;
+          document.documentElement.scrollTop = 0;
+        }
+        </script>
 </body>
 {% if site.google_analytics %}
 {% include google_analytics.html %}