making the site much closer to the original

content/_index.md

@@ -22,10 +22,10 @@ Fill out now!
 </span>
 </div>
 
-{{ spacing(height="h-4") }}
+{{ spacing(height="h-8") }}
 
 > If you need to fill out a camp health form, please do so [here](/camp-health-form).
-
+{{ spacing(height="h-4") }}
 > If you need to pay for your camp form, pay for registration ($100) [here](https://secure.myvanco.com/L-Z772/campaign/C-13JPJ) or pay for the full price ($200) [here](https://secure.myvanco.com/L-Z772/campaign/C-13JQE).
 
 {{ spacing(height="h-8") }}

static/css/base.css

@@ -27,6 +27,17 @@
   li::marker {
       color: var(--color-gray-600);
   }
+  
+  blockquote {
+      list-style-type: disc;
+      border-left-width: .25rem;
+      border-left-color: var(--color-blue-600);
+      font-style: italic;
+      font-weight: 500;
+      padding-left: 1em;
+      margin-top: 1.6em;
+      margin-bottom: 1.6em;
+  }
 
   img {
       @apply py-0;

static/css/main.css

@@ -7,6 +7,7 @@
     'Noto Color Emoji';
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
     monospace;
+    --color-blue-200: oklch(88.2% 0.059 254.128);
     --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
@@ -351,9 +352,6 @@
   .mt-16 {
     margin-top: calc(var(--spacing) * 16);
   }
-  .mt-20 {
-    margin-top: calc(var(--spacing) * 20);
-  }
   .mt-40 {
     margin-top: calc(var(--spacing) * 40);
   }
@@ -390,6 +388,9 @@
   .ml-4 {
     margin-left: calc(var(--spacing) * 4);
   }
+  .ml-\[-0\.2em\] {
+    margin-left: -0.2em;
+  }
   .ml-auto {
     margin-left: auto;
   }
@@ -457,9 +458,6 @@
   .h-24 {
     height: calc(var(--spacing) * 24);
   }
-  .h-36 {
-    height: calc(var(--spacing) * 36);
-  }
   .h-40 {
     height: calc(var(--spacing) * 40);
   }
@@ -767,9 +765,6 @@
   .bg-indigo-500 {
     background-color: var(--color-indigo-500);
   }
-  .bg-transparent {
-    background-color: transparent;
-  }
   .bg-white {
     background-color: var(--color-white);
   }
@@ -947,9 +942,6 @@
   .text-gray-900 {
     color: var(--color-gray-900);
   }
-  .text-indigo-500 {
-    color: var(--color-indigo-500);
-  }
   .text-white {
     color: var(--color-white);
   }
@@ -1020,9 +1012,6 @@
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
-  .filter {
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1198,13 +1187,6 @@
       }
     }
   }
-  .hover\:bg-gray-100 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-gray-100);
-      }
-    }
-  }
   .hover\:bg-gray-200 {
     &:hover {
       @media (hover: hover) {
@@ -1240,6 +1222,14 @@
       }
     }
   }
+  .hover\:text-3xl {
+    &:hover {
+      @media (hover: hover) {
+        font-size: var(--text-3xl);
+        line-height: var(--tw-leading, var(--text-3xl--line-height));
+      }
+    }
+  }
   .hover\:text-blue-500 {
     &:hover {
       @media (hover: hover) {
@@ -1261,13 +1251,6 @@
       }
     }
   }
-  .hover\:text-indigo-400 {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-indigo-400);
-      }
-    }
-  }
   .hover\:text-white {
     &:hover {
       @media (hover: hover) {
@@ -1628,6 +1611,11 @@
       background-color: var(--color-gray-900);
     }
   }
+  .dark\:text-blue-200 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-blue-200);
+    }
+  }
   .dark\:text-gray-200 {
     @media (prefers-color-scheme: dark) {
       color: var(--color-gray-200);
@@ -1716,6 +1704,16 @@
   li::marker {
     color: var(--color-gray-600);
   }
+  blockquote {
+    list-style-type: disc;
+    border-left-width: .25rem;
+    border-left-color: var(--color-blue-600);
+    font-style: italic;
+    font-weight: 500;
+    padding-left: 1em;
+    margin-top: 1.6em;
+    margin-bottom: 1.6em;
+  }
   img {
     padding-block: calc(var(--spacing) * 0);
     border-radius: var(--radius-lg);

static/js/search.js

@@ -1,6 +1,55 @@
-function toggleSearchModal(){var e=document.getElementById("search-modal");e.classList.toggle("opacity-0"),e.classList.toggle("pointer-events-none"),document.body.classList.toggle("search-active"),[...document.body.classList].includes("search-active")&&(document.getElementById("search-input").value="",document.getElementById("search-input").focus())}function formatResultItem(e){return console.log(e),htmlToElement(`<li class="flex hover:bg-gray-200 dark:hover:bg-gray-600 text-black dark:text-gray-200 p-2 rounded-lg border border-black dark:border-gray-200 bg-gray-200 dark:bg-gray-500 rounded-lg hover:shadow-xl mb-2">
+function toggleSearchModal() {
+    var e = document.getElementById("search-modal");
+    e.classList.toggle("opacity-0"), e.classList.toggle("pointer-events-none"), document.body.classList.toggle("search-active"), [...document.body.classList].includes("search-active") && (document.getElementById("search-input").value = "", document.getElementById("search-input").focus())
+}
+
+function formatResultItem(e) {
+    return console.log(e), htmlToElement(`<li class="flex basis-full hover:bg-gray-200 dark:hover:bg-gray-600 text-black dark:text-blue-200 p-2 rounded-lg border border-black dark:border-gray-200 bg-gray-200 dark:bg-gray-700 rounded-lg hover:shadow-xl mb-2 ml-[-0.2em]">
   <a href="${e.doc.path}">
-  <span class="text-xl text-bold">${e.doc.title}</span>
+  <span class="dark:text-white text-xl text-bold">${e.doc.title}</span>
-  <span class="text-lg">${e.doc.description}</span>
+  <br/>
+  <span class="dark:text-blue-200 text-lg">${e.doc.description}</span>
   </a>
-  </li>`)}function htmlToElement(e){var t=document.createElement("template");return e=e.trim(),t.innerHTML=e,t.content.firstChild}document.addEventListener("DOMContentLoaded",function(){document.getElementById("search").addEventListener("click",function(e){e.preventDefault(),toggleSearchModal()});document.querySelector(".modal-overlay").addEventListener("click",toggleSearchModal);for(var e=document.querySelectorAll(".modal-close"),o=0;o<e.length;o++)e[o].addEventListener("click",toggleSearchModal);document.onkeydown=function(e){let t=!1,n=!1;"key"in(e=e||window.event)?(t="Escape"===e.key||"Esc"===e.key,n="k"===e.key&&!0===e.metaKey):(n=75===e.keyCode&&e.metaKey,t=27===e.keyCode),n&&e.preventDefault(),(t&&document.body.classList.contains("search-active")||n)&&toggleSearchModal()};let a=elasticlunr.Index.load(window.searchIndex),l={bool:"AND",fields:{title:{boost:2},body:{boost:1}}},r,c,d=document.getElementById("search-input");document.getElementById("search-results");d.addEventListener("keyup",function(e){if([...document.body.classList].includes("search-active")&&3<d.value.trim().length&&(r=d.value.trim(),c=a.search(r,l),Array.isArray(c))&&0<c.length){var t=document.getElementById("results-list");t.replaceChildren();for(o=0;o<c.length;o++){var n=formatResultItem(c[o]);t.appendChild(n)}}})});
+  </li>`)
+}
+
+function htmlToElement(e) {
+    var t = document.createElement("template");
+    return e = e.trim(), t.innerHTML = e, t.content.firstChild
+}
+document.addEventListener("DOMContentLoaded", function() {
+    document.getElementById("search").addEventListener("click", function(e) {
+        e.preventDefault(), toggleSearchModal()
+    });
+    document.querySelector(".modal-overlay").addEventListener("click", toggleSearchModal);
+    for (var e = document.querySelectorAll(".modal-close"), o = 0; o < e.length; o++) e[o].addEventListener("click", toggleSearchModal);
+    document.onkeydown = function(e) {
+        let t = !1,
+            n = !1;
+        "key" in (e = e || window.event) ? (t = "Escape" === e.key || "Esc" === e.key, n = "k" === e.key && !0 === e.metaKey) : (n = 75 === e.keyCode && e.metaKey, t = 27 === e.keyCode), n && e.preventDefault(), (t && document.body.classList.contains("search-active") || n) && toggleSearchModal()
+    };
+    let a = elasticlunr.Index.load(window.searchIndex),
+        l = {
+            bool: "AND",
+            fields: {
+                title: {
+                    boost: 2
+                },
+                body: {
+                    boost: 1
+                }
+            }
+        },
+        r, c, d = document.getElementById("search-input");
+    document.getElementById("search-results");
+    d.addEventListener("keyup", function(e) {
+        if ([...document.body.classList].includes("search-active") && 3 < d.value.trim().length && (r = d.value.trim(), c = a.search(r, l), Array.isArray(c)) && 0 < c.length) {
+            var t = document.getElementById("results-list");
+            t.replaceChildren();
+            for (o = 0; o < c.length; o++) {
+                var n = formatResultItem(c[o]);
+                t.appendChild(n)
+            }
+        }
+    })
+});

templates/layout.html

@@ -36,7 +36,7 @@
         {% endblock title %}
       </title>
   </head>
-  <body class="dark:bg-gray-700 flex flex-col h-screen justify-between">
+  <body class="dark:bg-gray-800 flex flex-col h-screen justify-between">
   <!---------------------------------------------------------->
   <!------------------------- NAVBAR ------------------------->
   <!---------------------------------------------------------->
@@ -113,7 +113,7 @@
           <div id="search-modal" class="modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex z-10">
             <div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
 
-            <div class="modal-container text-gray-800 bg-gray-200 dark:bg-gray-800 dark:text-gray-400 w-11/12 md:max-w-md mx-auto rounded-lg shadow-lg z-50 mt-40 sm:mt-32 h-36 border border-2 border-gray-800 dark:border-gray-400">
+            <div class="modal-container text-gray-800 bg-gray-200 dark:bg-gray-800 dark:text-gray-400 w-11/12 md:max-w-md mx-auto rounded-lg shadow-lg z-50 mt-40 sm:mt-32 h-48 border border-2 border-gray-800 dark:border-gray-400">
 
               <div class="modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-white text-sm z-50">
                 <svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
@@ -141,8 +141,7 @@
                   <ul id="results-list" class="flex flex-col justify-center max-h-2xl mt-2 overflow-scroll"></ul>
                 <!--Footer-->
                   <div class="flex justify-end pt-2">
-                      <button class="px-4 bg-transparent p-3 rounded-lg text-indigo-500 hover:bg-gray-100 hover:text-indigo-400 mr-2">Action</button>
+                      <button class="px-4 bg-indigo-500 p-3 rounded-lg text-white hover:bg-indigo-400">Search</button>
-                      <button class="modal-close px-4 bg-indigo-500 p-3 rounded-lg text-white hover:bg-indigo-400">Close</button>
                   </div>
 
               </div>
@@ -230,12 +229,12 @@
 
     <!----------------------------- Mobile menu ----------------------------->
     <div id="mobile-menu" class="sm:hidden fixed z-10 overflow-hidden">
-      <div class="nav-links flex flex-col space-y-4 items-center w-screen bg-gray-200 dark:bg-gray-800 transition-all ease-out duration-500 h-0">
+      <div class="nav-links flex flex-col space-y-4 items-center w-screen bg-gray-200 dark:bg-gray-800 transition-all ease-out duration-300 h-0">
         <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
         {% for item in config.extra.navbar.items %}
           {% if lang == item.lang %}
             {% for link in item.links %}
-              <a href="{{ link.url }}" class="text-gray-800 dark:text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">{{ link.name }}</a>
+              <a href="{{ link.url }}" class="text-gray-800 dark:text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-3xl hover:text-3xl font-medium">{{ link.name }}</a>
             {% endfor %}
           {% endif %}
         {% endfor %}
@@ -244,7 +243,7 @@
             {% for item in config.extra.sidebar.items %}
               {% if lang == item.lang %}
                 {% for link in item.links %}
-                  <a href="{{ link.url }}" class="text-gray-800 dark:text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">{{ link.name }}</a>
+                  <a href="{{ link.url }}" class="text-gray-800 dark:text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-3xl font-medium">{{ link.name }}</a>
                 {% endfor %}
               {% endif %}
             {% endfor %}
@@ -255,7 +254,7 @@
   <!----------------------------------------------------------->
   <!------------------------- CONTENT ------------------------->
   <!----------------------------------------------------------->
-  <main class="max-w-7xl mx-auto text-black dark:text-gray-200 w-full mb-auto">
+  <main class="max-w-7xl mx-auto text-white bg-gray-200 dark:bg-gray-800 w-full mb-auto">
     {% block content %}
     {% endblock content %}
   </main>
@@ -308,7 +307,7 @@
   <!------------------------- SCRIPTS ------------------------->
   <script defer src="/js/main.js"></script>
   {% if config.extra.enable_search %}
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/elasticlunr/0.9.6/elasticlunr.min.js"></script>
+    <script src="/js/elasticlunr.min.js"></script>
     <script src="/search_index.{{lang}}.js"></script>
     <script defer src="/js/search.js"></script>
   {% endif %}
@@ -322,5 +321,7 @@
   {% block extra_js %}
   {% endblock extra_js %}
 
+    <script src="https://unpkg.com/htmx.org@1.9.12" integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2" crossorigin="anonymous"></script>
+
   </body>
 </html>

templates/shortcodes/button.html

@@ -1,8 +1,7 @@
 <a
-  class="rounded-lg outline-2 text-white bg-blue-600 outline-blue-600 px-4 py-2 text-neutral !no-underline hover:!bg-blue-500 dark:bg-blue-800 dark:hover:!bg-blue-700"
+  class="rounded-lg text-white bg-blue-600 px-4 py-2 text-neutral !no-underline hover:!bg-blue-500 dark:bg-blue-800 dark:hover:!bg-blue-700"
   {% if href %}href="{{ href }}"{% endif %}
   {% if target %}target="{{ target }}"{% endif %}
-  role="button"
+  role="button">
->
     <i>{{ body }}</i>
 </a>

templates/shortcodes/camp_form.html

@@ -121,7 +121,6 @@
                 <span class='inline-block text-[#f39] text-sm align-sub'>* required</span>
             </label>
             <input type="email" id="parent-email" name="parent-email"
-                   pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
                    class="basis-full peer form-input
                          {{ formClasses }}
                          invalid:text-[#F39]

templates/shortcodes/contact_form.html

@@ -57,7 +57,6 @@
 
         <label for="email" class="basis-full">Your Email <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
         <input type="email" id="email" name="email"
-               pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
                placeholder="bob@frank.xyz"
                class="basis-full form-input {{ formClasses }}">
 

templates/shortcodes/disciplemaking.html

@@ -1,4 +1,4 @@
-<div class="mt-20">
+<div class="mt-10">
   <h1>Disciplemaking</h1>
   <div class="mb-8">TFC’s core value is to follow the example of Jesus whose strategy of disciplemaking allowed Him to minister to all levels of spiritual interest at all times. These are those levels and where we work to reach teens at those levels. Everything we do is built around a desire to impact lives at each of these levels and help teenagers move forward through them.</div>
 

theme.toml

@@ -25,7 +25,7 @@ homepage = "https://tchartron.com"
 # Use snake_casing to be consistent with the rest of Zola
 [extra]
 enable_search = true
-enable_sidebar = true
+enable_sidebar = false
 enable_adsense = true
 enable_multilingue = true
 adsense_link = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=myclientid"