mirror of
https://github.com/imfing/hextra.git
synced 2025-07-08 16:07:15 -04:00
Compare commits
4 Commits
v0.8.5
...
facb708aa1
Author | SHA1 | Date | |
---|---|---|---|
facb708aa1 | |||
27a70e4c12 | |||
aeb0cad979 | |||
fd38dd116f |
@ -1006,18 +1006,18 @@ video {
|
||||
}
|
||||
.hx-bg-primary-100 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44) / var(--tw-bg-opacity));
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / var(--tw-bg-opacity));
|
||||
}
|
||||
.hx-bg-primary-400 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 16) / var(--tw-bg-opacity));
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) 66% / var(--tw-bg-opacity));
|
||||
}
|
||||
.hx-bg-primary-600 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-bg-opacity));
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-bg-opacity));
|
||||
}
|
||||
.hx-bg-primary-700\/5 {
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 39) / 0.05);
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / 0.05);
|
||||
}
|
||||
.hx-bg-red-100 {
|
||||
--tw-bg-opacity: 1;
|
||||
@ -1274,7 +1274,7 @@ video {
|
||||
}
|
||||
.hx-text-primary-800 {
|
||||
--tw-text-opacity: 1;
|
||||
color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 32) / var(--tw-text-opacity));
|
||||
color: hsl(var(--primary-hue) var(--primary-saturation) 32% / var(--tw-text-opacity));
|
||||
}
|
||||
.hx-text-red-900 {
|
||||
--tw-text-opacity: 1;
|
||||
@ -1449,7 +1449,7 @@ video {
|
||||
}
|
||||
}
|
||||
.content :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)):is(html[class~="dark"] *) {
|
||||
border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44) / 0.1);
|
||||
border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.1);
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(241 245 249 / var(--tw-text-opacity));
|
||||
}
|
||||
@ -1517,7 +1517,7 @@ video {
|
||||
}
|
||||
.content :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
--tw-text-opacity: 1;
|
||||
color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
|
||||
color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
|
||||
text-decoration-line: underline;
|
||||
text-decoration-thickness: from-font;
|
||||
text-underline-position: from-font;
|
||||
@ -1551,7 +1551,7 @@ video {
|
||||
margin-bottom: 1rem;
|
||||
overflow-x: auto;
|
||||
border-radius: 0.75rem;
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 39) / 0.05);
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / 0.05);
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
font-size: .9em;
|
||||
@ -1563,18 +1563,18 @@ video {
|
||||
|
||||
.content :where(pre):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)) {
|
||||
border-width: 1px;
|
||||
border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 24) / 0.2);
|
||||
border-color: hsl(var(--primary-hue) var(--primary-saturation) 24% / 0.2);
|
||||
--tw-contrast: contrast(1.5);
|
||||
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);
|
||||
}
|
||||
}
|
||||
.content :where(pre):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)):is(html[class~="dark"] *) {
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 27) / 0.1);
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
|
||||
}
|
||||
@media (prefers-contrast: more) {
|
||||
|
||||
.content :where(pre):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)):is(html[class~="dark"] *) {
|
||||
border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44) / 0.4);
|
||||
border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.4);
|
||||
}
|
||||
}
|
||||
.content :where(code):not(:where(.hextra-code-block code, [class~=not-prose],[class~=not-prose] *)) {
|
||||
@ -2135,7 +2135,7 @@ article details > summary::before {
|
||||
}
|
||||
.hextra-code-block pre {
|
||||
overflow-x: auto;
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 39) / 0.05);
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / 0.05);
|
||||
font-size: .9em;
|
||||
font-weight: 500;
|
||||
-webkit-font-smoothing: auto;
|
||||
@ -2145,18 +2145,18 @@ article details > summary::before {
|
||||
|
||||
.hextra-code-block pre {
|
||||
border-width: 1px;
|
||||
border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 24) / 0.2);
|
||||
border-color: hsl(var(--primary-hue) var(--primary-saturation) 24% / 0.2);
|
||||
--tw-contrast: contrast(1.5);
|
||||
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);
|
||||
}
|
||||
}
|
||||
.hextra-code-block pre:is(html[class~="dark"] *) {
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 27) / 0.1);
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
|
||||
}
|
||||
@media (prefers-contrast: more) {
|
||||
|
||||
.hextra-code-block pre:is(html[class~="dark"] *) {
|
||||
border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44) / 0.4);
|
||||
border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.4);
|
||||
}
|
||||
}
|
||||
.hextra-code-block .filename {
|
||||
@ -2169,7 +2169,7 @@ article details > summary::before {
|
||||
white-space: nowrap;
|
||||
border-top-left-radius: 0.75rem;
|
||||
border-top-right-radius: 0.75rem;
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 39) / 0.05);
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / 0.05);
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
padding-left: 1rem;
|
||||
@ -2179,7 +2179,7 @@ article details > summary::before {
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity));
|
||||
}
|
||||
.hextra-code-block .filename:is(html[class~="dark"] *) {
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 27) / 0.1);
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(229 231 235 / var(--tw-text-opacity));
|
||||
}
|
||||
@ -2236,7 +2236,7 @@ article details > summary::before {
|
||||
.chroma .hl {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 32) / 0.1);
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) 32% / 0.1);
|
||||
}
|
||||
.hextra-cards {
|
||||
grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--hextra-cards-grid-cols))), 1fr));
|
||||
@ -2348,13 +2348,13 @@ article details > summary::before {
|
||||
}
|
||||
.search-wrapper li .active {
|
||||
border-radius: 0.375rem;
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / 0.1);
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / 0.1);
|
||||
}
|
||||
@media (prefers-contrast: more) {
|
||||
|
||||
.search-wrapper li .active {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity));
|
||||
border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity));
|
||||
}
|
||||
}
|
||||
.search-wrapper .no-result {
|
||||
@ -2441,7 +2441,7 @@ article details > summary::before {
|
||||
}
|
||||
.search-wrapper .match {
|
||||
--tw-text-opacity: 1;
|
||||
color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
|
||||
color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.sidebar-container {
|
||||
@ -2621,14 +2621,12 @@ body:is(html[class~="dark"] *) {
|
||||
:root {
|
||||
--primary-hue: 212deg;
|
||||
--primary-saturation: 100%;
|
||||
--primary-lightness: 50%;
|
||||
--navbar-height: 4rem;
|
||||
--menu-height: 3.75rem;
|
||||
}
|
||||
.dark {
|
||||
--primary-hue: 204deg;
|
||||
--primary-saturation: 100%;
|
||||
--primary-lightness: 50%;
|
||||
}
|
||||
.placeholder\:hx-text-gray-500::-moz-placeholder {
|
||||
--tw-text-opacity: 1;
|
||||
@ -2725,11 +2723,11 @@ body:is(html[class~="dark"] *) {
|
||||
}
|
||||
.hover\:hx-bg-primary-50:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 47) / var(--tw-bg-opacity));
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) 97% / var(--tw-bg-opacity));
|
||||
}
|
||||
.hover\:hx-bg-primary-700:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 39) / var(--tw-bg-opacity));
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / var(--tw-bg-opacity));
|
||||
}
|
||||
.hover\:hx-bg-slate-50:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
@ -2749,7 +2747,7 @@ body:is(html[class~="dark"] *) {
|
||||
}
|
||||
.hover\:hx-text-primary-600:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
|
||||
color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
|
||||
}
|
||||
.hover\:hx-opacity-60:hover {
|
||||
opacity: 0.6;
|
||||
@ -2786,7 +2784,7 @@ body:is(html[class~="dark"] *) {
|
||||
}
|
||||
.focus\:hx-ring-primary-300:focus {
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 27) / var(--tw-ring-opacity));
|
||||
--tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / var(--tw-ring-opacity));
|
||||
}
|
||||
.active\:hx-bg-gray-400\/20:active {
|
||||
background-color: rgb(156 163 175 / 0.2);
|
||||
@ -2831,11 +2829,11 @@ body:is(html[class~="dark"] *) {
|
||||
}
|
||||
.data-\[state\=selected\]\:hx-border-primary-500[data-state="selected"] {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity));
|
||||
border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity));
|
||||
}
|
||||
.data-\[state\=selected\]\:hx-text-primary-600[data-state="selected"] {
|
||||
--tw-text-opacity: 1;
|
||||
color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
|
||||
color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
|
||||
}
|
||||
.hx-group[data-theme="dark"] .group-data-\[theme\=dark\]\:hx-hidden {
|
||||
display: none;
|
||||
@ -2874,7 +2872,7 @@ body:is(html[class~="dark"] *) {
|
||||
|
||||
.contrast-more\:hx-border-primary-500 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity));
|
||||
border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.contrast-more\:hx-border-transparent {
|
||||
@ -2989,14 +2987,14 @@ body:is(html[class~="dark"] *) {
|
||||
background-color: rgb(251 146 60 / 0.2);
|
||||
}
|
||||
.dark\:hx-bg-primary-300\/10:is(html[class~="dark"] *) {
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 27) / 0.1);
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
|
||||
}
|
||||
.dark\:hx-bg-primary-400\/10:is(html[class~="dark"] *) {
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 16) / 0.1);
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) 66% / 0.1);
|
||||
}
|
||||
.dark\:hx-bg-primary-600:is(html[class~="dark"] *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-bg-opacity));
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-bg-opacity));
|
||||
}
|
||||
.dark\:hx-bg-red-900\/30:is(html[class~="dark"] *) {
|
||||
background-color: rgb(127 29 29 / 0.3);
|
||||
@ -3050,7 +3048,7 @@ body:is(html[class~="dark"] *) {
|
||||
}
|
||||
.dark\:hx-text-primary-600:is(html[class~="dark"] *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
|
||||
color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hx-text-red-200:is(html[class~="dark"] *) {
|
||||
--tw-text-opacity: 1;
|
||||
@ -3139,14 +3137,14 @@ body:is(html[class~="dark"] *) {
|
||||
background-color: rgb(23 23 23 / var(--tw-bg-opacity));
|
||||
}
|
||||
.dark\:hover\:hx-bg-primary-100\/5:hover:is(html[class~="dark"] *) {
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44) / 0.05);
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.05);
|
||||
}
|
||||
.dark\:hover\:hx-bg-primary-700:hover:is(html[class~="dark"] *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 39) / var(--tw-bg-opacity));
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / var(--tw-bg-opacity));
|
||||
}
|
||||
.hover\:dark\:hx-bg-primary-500\/10:is(html[class~="dark"] *):hover {
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / 0.1);
|
||||
background-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / 0.1);
|
||||
}
|
||||
.dark\:hover\:hx-text-gray-100:hover:is(html[class~="dark"] *) {
|
||||
--tw-text-opacity: 1;
|
||||
@ -3174,7 +3172,7 @@ body:is(html[class~="dark"] *) {
|
||||
}
|
||||
.hover\:dark\:hx-text-primary-600:is(html[class~="dark"] *):hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
|
||||
color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:hx-shadow-none:hover:is(html[class~="dark"] *) {
|
||||
--tw-shadow: 0 0 #0000;
|
||||
@ -3187,7 +3185,7 @@ body:is(html[class~="dark"] *) {
|
||||
}
|
||||
.dark\:focus\:hx-ring-primary-800:focus:is(html[class~="dark"] *) {
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 32) / var(--tw-ring-opacity));
|
||||
--tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) 32% / var(--tw-ring-opacity));
|
||||
}
|
||||
@media (prefers-contrast: more) {
|
||||
|
||||
@ -3207,7 +3205,7 @@ body:is(html[class~="dark"] *) {
|
||||
|
||||
.contrast-more\:dark\:hx-border-primary-500:is(html[class~="dark"] *) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity));
|
||||
border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.dark\:contrast-more\:hx-border-neutral-400:is(html[class~="dark"] *) {
|
||||
|
@ -26,7 +26,6 @@ body {
|
||||
:root {
|
||||
--primary-hue: 212deg;
|
||||
--primary-saturation: 100%;
|
||||
--primary-lightness: 50%;
|
||||
--navbar-height: 4rem;
|
||||
--menu-height: 3.75rem;
|
||||
}
|
||||
@ -34,5 +33,4 @@ body {
|
||||
.dark {
|
||||
--primary-hue: 204deg;
|
||||
--primary-saturation: 100%;
|
||||
--primary-lightness: 50%;
|
||||
}
|
||||
|
@ -200,7 +200,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
cache: 100,
|
||||
document: {
|
||||
id: 'id',
|
||||
store: ['title', 'crumb'],
|
||||
store: ['title'],
|
||||
index: "content"
|
||||
}
|
||||
});
|
||||
@ -210,7 +210,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
cache: 100,
|
||||
document: {
|
||||
id: 'id',
|
||||
store: ['title', 'content', 'url', 'display', 'crumb'],
|
||||
store: ['title', 'content', 'url', 'display'],
|
||||
index: "content",
|
||||
tag: 'pageId'
|
||||
}
|
||||
@ -222,30 +222,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
for (const route in data) {
|
||||
let pageContent = '';
|
||||
++pageId;
|
||||
const urlParts = route.split('/').filter(x => x != "" && !x.startsWith('#'));
|
||||
|
||||
let crumb = '';
|
||||
let searchUrl = '/'
|
||||
for (let i = 0; i < urlParts.length; i++) {
|
||||
const urlPart = urlParts[i];
|
||||
searchUrl += urlPart + '/'
|
||||
|
||||
const crumbData = data[searchUrl];
|
||||
if (!crumbData) {
|
||||
console.warn('Excluded page', searchUrl, '- will not be included for search result breadcrumb for', route);
|
||||
continue;
|
||||
}
|
||||
|
||||
let title = data[searchUrl].title;
|
||||
if (title == "_index") {
|
||||
title = urlPart.split("-").map(x => x).join(" ");
|
||||
}
|
||||
crumb += title;
|
||||
|
||||
if (i < urlParts.length - 1) {
|
||||
crumb += ' > ';
|
||||
}
|
||||
}
|
||||
|
||||
for (const heading in data[route].data) {
|
||||
const [hash, text] = heading.split('#');
|
||||
@ -259,7 +235,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
id: url,
|
||||
url,
|
||||
title,
|
||||
crumb,
|
||||
pageId: `page_${pageId}`,
|
||||
content: title,
|
||||
...(paragraphs[0] && { display: paragraphs[0] })
|
||||
@ -270,7 +245,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
id: `${url}_${i}`,
|
||||
url,
|
||||
title,
|
||||
crumb,
|
||||
pageId: `page_${pageId}`,
|
||||
content: paragraphs[i]
|
||||
});
|
||||
@ -282,7 +256,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
window.pageIndex.add({
|
||||
id: pageId,
|
||||
title: data[route].title,
|
||||
crumb,
|
||||
content: pageContent
|
||||
});
|
||||
|
||||
@ -335,7 +308,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
_page_rk: i,
|
||||
_section_rk: j,
|
||||
route: url,
|
||||
prefix: isFirstItemOfPage ? result.doc.crumb : undefined,
|
||||
prefix: isFirstItemOfPage ? result.doc.title : undefined,
|
||||
children: { title, content }
|
||||
})
|
||||
isFirstItemOfPage = false
|
||||
|
@ -1,9 +1,4 @@
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
scrollToActiveItem();
|
||||
enableCollapsibles();
|
||||
});
|
||||
|
||||
function enableCollapsibles() {
|
||||
const buttons = document.querySelectorAll(".hextra-sidebar-collapsible-button");
|
||||
buttons.forEach(function (button) {
|
||||
button.addEventListener("click", function (e) {
|
||||
@ -14,23 +9,4 @@ function enableCollapsibles() {
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function scrollToActiveItem() {
|
||||
const sidebarScrollbar = document.querySelector("aside.sidebar-container > .hextra-scrollbar");
|
||||
const activeItems = document.querySelectorAll(".sidebar-active-item");
|
||||
const visibleActiveItem = Array.from(activeItems).find(function (activeItem) {
|
||||
return activeItem.getBoundingClientRect().height > 0;
|
||||
});
|
||||
|
||||
if (!visibleActiveItem) {
|
||||
return;
|
||||
}
|
||||
|
||||
const yOffset = visibleActiveItem.clientHeight;
|
||||
const yDistance = visibleActiveItem.getBoundingClientRect().top - sidebarScrollbar.getBoundingClientRect().top;
|
||||
sidebarScrollbar.scrollTo({
|
||||
behavior: "instant",
|
||||
top: yDistance - yOffset
|
||||
});
|
||||
}
|
||||
});
|
||||
|
@ -7,6 +7,7 @@
|
||||
|
||||
{{- $pages := where .Site.Pages "Kind" "in" (slice "page" "section") -}}
|
||||
{{- $pages = where $pages "Params.excludeSearch" "!=" true -}}
|
||||
{{- $pages = where $pages "Content" "!=" "" -}}
|
||||
|
||||
{{- $output := dict -}}
|
||||
|
||||
|
@ -34,13 +34,12 @@ The color of text mixed with `other text` can customized with:
|
||||
|
||||
### Primary Color
|
||||
|
||||
The primary color of the theme can be customized by setting the `--primary-hue`, `--primary-saturation` and `--primary-lightness` variables:
|
||||
The primary color of the theme can be customized by setting the `--primary-hue` and `--primary-saturation` variables:
|
||||
|
||||
```css {filename="assets/css/custom.css"}
|
||||
:root {
|
||||
--primary-hue: 100deg;
|
||||
--primary-saturation: 90%;
|
||||
--primary-lightness: 50%;
|
||||
}
|
||||
```
|
||||
|
||||
|
@ -112,7 +112,7 @@ Documentation > Guide > Foo Bar
|
||||
|
||||
### Hiding Breadcrumbs
|
||||
|
||||
You can hide breadcrumbs completely from a page by specifying `breadcrumbs: false` in its front matter:
|
||||
You can hide breadcrumbs completely from a page by specfying `breadcrumbs: false` in its front matter:
|
||||
|
||||
```yaml {filename="content/docs/guide/organize-files.md"}
|
||||
---
|
||||
|
@ -87,30 +87,3 @@ Card supports adding tags which could be useful to show extra status information
|
||||
{{</* card link="../callout" title="Card with yellow tag" tag="tag text" tagType="warning" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
## Columns
|
||||
|
||||
You can specify the maximum number of columns for cards to span by passing the `cols` parameter to the `cards` shortcode. Note that columns will still be collapsed on smaller screens.
|
||||
|
||||
{{< cards cols="1" >}}
|
||||
{{< card link="/" title="Top Card" >}}
|
||||
{{< card link="/" title="Bottom Card" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
{{< cards cols="2" >}}
|
||||
{{< card link="/" title="Left Card" >}}
|
||||
{{< card link="/" title="Right Card" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
```
|
||||
{{</* cards cols="1" */>}}
|
||||
{{</* card link="/" title="Top Card" */>}}
|
||||
{{</* card link="/" title="Bottom Card" */>}}
|
||||
{{</* /cards */>}}
|
||||
|
||||
{{</* cards cols="2" */>}}
|
||||
{{</* card link="/" title="Left Card" */>}}
|
||||
{{</* card link="/" title="Right Card" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
|
@ -13,13 +13,6 @@ Open source projects powered by Hextra
|
||||
|
||||
{{< cards >}}
|
||||
|
||||
{{< card
|
||||
link="https://github.com/welding-torch/installc"
|
||||
title="Install C"
|
||||
image="https://github.com/user-attachments/assets/c9a85327-c7e7-40f1-830a-b4190a5e47bd"
|
||||
imageStyle="object-fit:cover; aspect-ratio:16/9;"
|
||||
>}}
|
||||
|
||||
{{< card
|
||||
link="https://github.com/axivo/website"
|
||||
title="AXIVO Docs"
|
||||
|
@ -1,4 +1,26 @@
|
||||
{{- $lang := site.Language.LanguageCode | default `en` -}}
|
||||
{{ $default_chinese := "zh-CN" }}
|
||||
|
||||
{{ $sl := site.Language }}
|
||||
{{ $giscus_lang := $sl.Lang | default `en` }}
|
||||
|
||||
{{/*
|
||||
Special case for Chinese.
|
||||
Giscus uses the geophraphical language code for these.
|
||||
See: https://github.com/giscus/giscus/tree/main/locales
|
||||
*/}}
|
||||
{{ if eq $giscus_lang "zh" }}
|
||||
{{/* Create a code formatted for Giscus: zh-CN or zn-TW. */}}
|
||||
{{ $code := lower $sl.LanguageCode }}
|
||||
|
||||
{{ if (hasSuffix $code "-cn") }}
|
||||
{{ $giscus_lang = "zh-CN" }}
|
||||
{{ else if (hasSuffix $code "-tw") }}
|
||||
{{ $giscus_lang = "zh-TW" }}
|
||||
{{ else }}
|
||||
{{ $giscus_lang = $default_chinese }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
{{- with site.Params.comments.giscus -}}
|
||||
<script>
|
||||
@ -38,7 +60,7 @@
|
||||
"data-emit-metadata": "{{ (string .emitMetadata) | default 0 }}",
|
||||
"data-input-position": "{{ .inputPosition | default `top` }}",
|
||||
"data-theme": getGiscusTheme(),
|
||||
"data-lang": "{{ .lang | default $lang }}",
|
||||
"data-lang": "{{ .lang | default $giscus_lang }}",
|
||||
"crossorigin": "anonymous",
|
||||
"async": "",
|
||||
};
|
||||
|
@ -1,6 +0,0 @@
|
||||
{{- $cols := .cols | default 3 -}}
|
||||
{{- $content := .content -}}
|
||||
|
||||
<div class="hextra-cards hx-mt-4 hx-gap-4 hx-grid not-prose" style="--hextra-cards-grid-cols: {{ $cols }};">
|
||||
{{- $content -}}
|
||||
</div>
|
@ -1,3 +1,5 @@
|
||||
{{- $cols := .Get "cols" | default 3 -}}
|
||||
|
||||
{{- partial "shortcodes/cards" (dict "cols" $cols "content" .Inner) -}}
|
||||
<div class="hextra-cards hx-mt-4 hx-gap-4 hx-grid not-prose" style="--hextra-cards-grid-cols: {{ $cols }};">
|
||||
{{- .Inner -}}
|
||||
</div>
|
||||
|
@ -5,7 +5,7 @@ Renders the page using the RenderShortcode method on the Page object.
|
||||
|
||||
You must call this shortcode using the {{% %}} notation.
|
||||
|
||||
@param {string} (positional parameter 0) The path to the page, relative to the content directory.
|
||||
@param {string} (postional parameter 0) The path to the page, relative to the content directory.
|
||||
@returns template.HTML
|
||||
|
||||
@example {{% include "functions/_common/glob-patterns" %}}
|
||||
|
@ -3,18 +3,10 @@ const colors = require('tailwindcss/colors')
|
||||
const makePrimaryColor =
|
||||
l =>
|
||||
({ opacityValue }) => {
|
||||
let result = "hsl(var(--primary-hue) var(--primary-saturation) ";
|
||||
if (l <= 50) {
|
||||
// Interpolate between lower values
|
||||
result+= `calc(calc(var(--primary-lightness) / 50) * ${l})`;
|
||||
}
|
||||
else {
|
||||
// Interpolate between higher values
|
||||
result+= `calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * ${l - 50})`;
|
||||
}
|
||||
|
||||
result += (opacityValue ? ` / ${opacityValue})` : ')');
|
||||
return result;
|
||||
return (
|
||||
`hsl(var(--primary-hue) var(--primary-saturation) ${l}%` +
|
||||
(opacityValue ? ` / ${opacityValue})` : ')')
|
||||
)
|
||||
}
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
|
Reference in New Issue
Block a user