Better experience for smaller screen sizes

src/site/_includes/components/filetree.njk

@@ -22,8 +22,8 @@
         {%endif%}
     {% endmacro %}
     
-    <div x-init="isDesktop = (window.innerWidth>=1490) ? true: false;" 
+    <div x-init="isDesktop = (window.innerWidth>=1400) ? true: false;" 
-            x-on:resize.window="isDesktop = (window.innerWidth>=1490) ? true : false;" 
+            x-on:resize.window="isDesktop = (window.innerWidth>=1400) ? true : false;" 
             x-data="{isDesktop: true, showFilesMobile: false}">
 
         <div x-show.important="!isDesktop">

src/site/_includes/components/graphScript.njk

@@ -129,5 +129,5 @@
             }, 10);
     }
 
-    renderGraph(330,300);
+    renderGraph(320,320);
 </script>

src/site/_includes/components/linkPreview.njk

@@ -1,4 +1,4 @@
-<!-- All credit for this implementation goes to https://github.com/maximevaillancourt/digital-garden-jekyll-template/blob/master/_includes/link-previews.html -->
+<!-- All credit for the link preview implementation goes to https://github.com/maximevaillancourt/digital-garden-jekyll-template/blob/master/_includes/link-previews.html -->
 <style>
 #tooltip-wrapper {
   background: var(--background-primary);

src/site/_includes/components/searchButton.njk

@@ -1,7 +1,11 @@
 <div class="search-button" onclick="toggleSearch()">
+    <span class="search-icon">
         <i class="fa fa-search"></i>
+    </span>
+    <span class="search-text">
         <span>Search</span>
-        <div style="font-size: 0.6rem; padding: 2px 2px 0 6px; text-align:center;" class="search-keys">
+        <span style="font-size: 0.6rem; padding: 2px 2px 0 6px; text-align:center; transform: translateY(4px);" class="search-keys">
             CTRL + K
-        </div>
+        </span>
+    </span>
 </div>

src/site/_includes/components/sidebar.njk

@@ -4,7 +4,7 @@
 
                   {%if settings.dgShowLocalGraph === true%}
                         <div class="graph">
-                              <div style="display: flex; justify-content: flex-end;">
+                              <div class="graph-title-container">
                                     <div class="graph-title">Connected Pages</div>
                               </div>
                               <div id="link-graph"></div>

src/site/styles/digital-garden-base.scss

@@ -8,15 +8,15 @@ body {
 }
 
 .content {
-    max-width: 800px;
+    max-width: 700px;
     margin: auto;
-    font-size: 22px;
+    font-size: 18px;
     line-height: 1.5;
     margin-top: 90px;
     position: relative;
 
     @media(max-width: 800px) {
-        margin-top: 150px;
+        margin-top: 75px;
     }
 
 }
@@ -194,6 +194,12 @@ ul.task-list {
 }
 
 .graph {
+
+    .graph-title-container {
+        display: flex; 
+        justify-content: flex-end;
+    }
+
     .graph-title {
         width: fit-content;
         background-color: var(--background-secondary);
@@ -212,7 +218,12 @@ ul.task-list {
     width: fit-content;
 }
 
-@media(max-width: 1490px) {
+
+
+@media(max-width: 1400px) {
+    #link-graph {
+        border-radius: 0 10px 10px 10px;
+    }
     .sidebar {
         position: relative;
         transform: none;
@@ -220,20 +231,32 @@ ul.task-list {
         margin-top: 50px;
         max-width: 800px;
         margin: auto;
+        border-radius: 0;
+        border-top: 2px solid var(--background-secondary); 
+        justify-content: space-between;
+    }
+
+    .sidebar-container{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
     }
 
     .graph {
-        display: none;
+        flex: 1;
+        .graph-title-container{
+            justify-content: flex-start;
+        }
     }
 
     .toc {
         display: none;
     }
-
+}
-    .backlinks {
+@media(max-width: 800px) {
-        margin-top: 0;
+    .sidebar-container{
-        border-top: 3px solid var(--background-secondary); 
+        display: flex;
-        border-radius: 0;
+        flex-direction: column-reverse;
     }
 }
 
@@ -249,6 +272,19 @@ ul.task-list {
     color: var(--text-muted);
     overflow-y: auto;
     width: 250px;
+    h1 {
+        font-size: 32px !important;
+    }
+    @media(max-width: 800px) {
+        h1 {
+            display: none;
+        }
+
+        .search-button {
+            width: 100%;
+            margin: 2px;
+        }
+    }
 }
 
 .empty-navbar {
@@ -277,6 +313,15 @@ ul.task-list {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    @media(max-width: 1400px) {
+        position: fixed;
+    }
+
+    @media(max-width: 800px) {
+        h1 {
+            font-size: 18px !important;
+        }
+    }
 
     .navbar-inner {
         display: flex;
@@ -287,8 +332,16 @@ ul.task-list {
     .search-button {
 
         @media(max-width: 800px) {
-            min-width: 120px;
+            min-width: 36px;
-            margin: 10px 50px 10px 25px;
+            margin: 10px 25px 10px 25px;
+        }
+    }
+
+    .search-text {
+        display: flex;
+        justify-content: center;
+        @media(max-width: 800px){
+            display: none;
         }
     }
 }
@@ -425,7 +478,7 @@ ul.task-list {
     display: flex;
     align-items: center;
     min-width: 150px;
-    margin: 10px 65px;
+    margin: 10px 40px 10px 10px;
     border: 1px solid var(--text-normal);
     cursor: pointer;