TFC/tfcconnection-zola
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

making the site much closer to the original

Browse source
This commit is contained in:
Chris Cochrun 2025-06-23 15:13:00 -05:00
parent 23156940c0
commit 845817d0e9
10 changed files with 107 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

4
content/_index.md
View file

@ -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") }}

11
static/css/base.css
View file

@ -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;

56
static/css/main.css
View file

@ -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);

57
static/js/search.js
View file

@ -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="text-lg">${e.doc.description}</span>
<span class="dark:text-white text-xl text-bold">${e.doc.title}</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)
}
}
})
});

19
templates/layout.html
View file

@ -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="modal-close px-4 bg-indigo-500 p-3 rounded-lg text-white hover:bg-indigo-400">Close</button>
<button class="px-4 bg-indigo-500 p-3 rounded-lg text-white hover:bg-indigo-400">Search</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>

5
templates/shortcodes/button.html
View file

@ -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>

1
templates/shortcodes/camp_form.html
View file

@ -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]

1
templates/shortcodes/contact_form.html
View file

@ -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 }}">

2
templates/shortcodes/disciplemaking.html
View file

@ -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>

2
theme.toml
View file

@ -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"