making the site much closer to the original
This commit is contained in:
Chris Cochrun
parent
23156940c0
commit
845817d0e9
10 changed files with 107 additions and 51 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue