layoutshift toggle

preferences.html

@@ -125,6 +125,10 @@
             <label for="enable-bookmarks-checkbox">Enable Bookmark box (disabling also hides quotes): </label>
             <input type="checkbox" name="enable-bookmarks" id="enable-bookmarks-checkbox">
         </div>
+        <div class="setting-container">
+            <label for="enable-bookmarks-layoutshift-checkbox">Shift layout when bookmarks are disabled: </label>
+            <input type="checkbox" name="enable-bookmarks" id="enable-bookmarks-layoutshift-checkbox">
+        </div>
     </div>
     <!--
         TODO: bookmark editor:

scripts/getPreferences.js

@@ -67,6 +67,9 @@ let bookmarks = JSON.parse(localStorage.getItem("text-startpage:bookmarks"));
 let enableBookmarks = JSON.parse(
     localStorage.getItem("text-startpage:enableBookmarks")
 );
+let enableBookmarksLayoutShift = JSON.parse(
+    localStorage.getItem("text-startpage:enableBookmarksLayoutShift")
+);
 if (!bookmarks) {
     const xhr = new XMLHttpRequest();
     xhr.open("GET", "json/defaultBookmarks.json");
@@ -93,9 +96,15 @@ if (!bookmarks) {
 // remove bookmarks box (including quotes) if disabled
 if (enableBookmarks == false) {
     document.body.removeChild(document.getElementById("bookmarks-container"));
-    /* document.getElementById("search-container").style.top = "50vh";
+}
+
+if (enableBookmarksLayoutShift == true) {
+    document.getElementById("search-container").style.top = "50vh";
     document.getElementById("search-container").style.transform =
-        "translate(-50%, -50%)"; */
+        "translate(-50%, -50%)";
+
+    document.getElementById("greetings-container").style.transform =
+        "translate(-50%, 75%)";
 }
 
 //set the theme

scripts/preferences/bookmarks.js

@@ -1,14 +1,36 @@
 const enableBookmarksCheckbox = document.getElementById(
     "enable-bookmarks-checkbox"
 );
+const enableBookmarksLayoutshiftCheckbox = document.getElementById(
+    "enable-bookmarks-layoutshift-checkbox"
+);
 
 let enableBookmarks = JSON.parse(
     localStorage.getItem("text-startpage:enableBookmarks")
 );
+let enableLayoutShift = JSON.parse(
+    localStorage.getItem("text-startpage:enableBookmarksLayoutShift")
+);
+
+if (enableBookmarks == null) {
+    enableBookmarks = true;
+}
 
 enableBookmarksCheckbox.checked = enableBookmarks;
 
 enableBookmarksCheckbox.addEventListener("change", () => {
     enableBookmarks = enableBookmarksCheckbox.checked;
-    localStorage.setItem("text-startpage:enableBookmarks", enableBookmarks);
+    localStorage.setItem(
+        "text-startpage:enableBookmarks",
+        JSON.stringify(enableBookmarks)
+    );
+});
+
+enableBookmarksLayoutshiftCheckbox.checked = enableLayoutShift;
+enableBookmarksLayoutshiftCheckbox.addEventListener("change", () => {
+    enableLayoutShift = enableBookmarksLayoutshiftCheckbox.checked;
+    localStorage.setItem(
+        "text-startpage:enableBookmarksLayoutShift",
+        JSON.stringify(enableLayoutShift)
+    );
 });