mirror of
https://github.com/imfing/hextra.git
synced 2025-08-23 08:36:40 -04:00
refactor(css): add prefix to component classes for consistency (#744)
* refactor(navbar): add hextra prefix to navbar and hamburger menu classes - Updated CSS class names from `nav-container` to `hextra-nav-container` and `hamburger-menu` to `hextra-hamburger-menu` for improved clarity and consistency across the project. - Adjusted related JavaScript and documentation to reflect the new class names. * refactor(search): update class names for search components - Renamed CSS classes from `search-wrapper`, `search-input`, `active`, `no-result`, `prefix`, `excerpt`, and `match` to `hextra-search-wrapper`, `hextra-search-input`, `hextra-search-active`, `hextra-search-no-result`, `hextra-search-prefix`, `hextra-search-excerpt`, and `hextra-search-match` for improved clarity and consistency. - Updated JavaScript selectors to match the new class names, ensuring functionality remains intact. - Adjusted HTML structure to reflect the new class naming convention. * refactor(search): update search component class names for consistency - Renamed existing search-related CSS classes to include the `hextra` prefix for improved clarity and consistency. - Added optional nested classes for enhanced customization of the search UI, including titles, active states, and result snippets. - Removed outdated breadcrumb section as no specific class is available. * refactor(sidebar): rename sidebar classes for consistency - Updated CSS and JavaScript to replace `sidebar-container` with `hextra-sidebar-container` and `sidebar-active-item` with `hextra-sidebar-active-item` for improved clarity and consistency across the project. - Adjusted related documentation to reflect the new class names. * refactor(language & theme): update class names for consistency - Renamed language switcher and theme toggle classes to include the `hextra` prefix for improved clarity and consistency across the project. - Updated related JavaScript selectors and documentation to reflect the new class names. * refactor(css & html): rename classes for consistency and clarity - Updated various CSS class names to include the `hextra` prefix, enhancing consistency across the project. This includes renaming classes such as `content` to `hextra-content`, `filename` to `hextra-code-filename`, and `steps` to `hextra-steps`. - Adjusted related HTML and JavaScript to reflect the new class names, ensuring functionality and styling remain intact. - Updated documentation to include the new class names for better clarity. * refactor(language): update class names for language options - Renamed the `language-options` class to `hextra-language-options` for consistency with the existing `hextra` prefix convention. - Updated the corresponding HTML to reflect the new class name, ensuring clarity and uniformity across the project. * refactor(css & html): rename classes for consistency and clarity - Renamed CSS classes to include the `hextra` prefix, such as changing `subheading-anchor` to `hextra-subheading-anchor` and `footnotes` to `hextra-footnotes`, enhancing consistency across the project. - Updated related HTML and documentation to reflect the new class names, ensuring clarity and uniformity. * feat(typography): add styling for horizontal lines - Introduced new styles for horizontal lines to enhance visual separation in content. The styles apply margin and border color adjustments, ensuring consistency with the overall design. * feat(blog): add draft release announcement for Hextra v0.10.0 - Created a new markdown file for the draft release announcement of Hextra v0.10.0, including upgrade instructions and author details. - The announcement is currently marked as a draft and may be updated before the official release. * refactor(css & html): rename `hextra-content` class to `content` for consistency - Updated the `hextra-content` class to simply `content` across various HTML files and CSS, enhancing clarity and consistency in the codebase. - Adjusted the `package.json` script for the development server to include the `-F` flag for better functionality. * refactor(typography & markdown): enhance table styling and markdown syntax - Updated CSS for tables to improve styling, including adjustments to margins, borders, and text properties for better readability. - Revised markdown documentation to standardize table formatting and improve clarity, including consistent syntax for headers and lists. - Enhanced examples in the documentation to reflect the updated styling and ensure accurate representation of output. * fix(blog): update text color for improved accessibility - Modified the text color in the blog single layout to enhance readability in dark mode by adding a dark text color class. - Ensured consistency in styling for better user experience across different themes. * docs(blog): update draft release announcement for Hextra v0.10.0 - Revised the "What's New" section to include a TODO placeholder for future updates. - Added a comprehensive migration guide detailing the CSS class prefix changes to enhance consistency and avoid conflicts. - Updated the announcement to reflect the new class naming conventions for various components. * chore: rebuild css
This commit is contained in:
Xin
File diff suppressed because one or more lines are too long
@@ -7,44 +7,44 @@ nav {
|
||||
@supports (
|
||||
(-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
|
||||
) {
|
||||
.nav-container-blur {
|
||||
.hextra-nav-container-blur {
|
||||
@apply hx:backdrop-blur-md hx:bg-white/[.85] hx:dark:bg-dark/80!;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hamburger Menu - Flattened Structure */
|
||||
.hamburger-menu svg g {
|
||||
.hextra-hamburger-menu svg g {
|
||||
@apply hx:origin-center hx:transition-all hx:duration-100 hx:ease-out;
|
||||
}
|
||||
|
||||
.hamburger-menu svg path {
|
||||
.hextra-hamburger-menu svg path {
|
||||
@apply hx:opacity-100 hx:transition-all hx:duration-100 hx:ease-out hx:delay-100;
|
||||
}
|
||||
|
||||
.hamburger-menu svg.open path {
|
||||
.hextra-hamburger-menu svg.open path {
|
||||
@apply hx:transition-transform hx:duration-100 hx:ease-out hx:delay-0;
|
||||
}
|
||||
|
||||
.hamburger-menu svg.open g {
|
||||
.hextra-hamburger-menu svg.open g {
|
||||
@apply hx:transition-transform hx:duration-100 hx:ease-out hx:delay-100;
|
||||
}
|
||||
|
||||
.hamburger-menu svg.open > path {
|
||||
.hextra-hamburger-menu svg.open > path {
|
||||
@apply hx:opacity-0;
|
||||
}
|
||||
|
||||
.hamburger-menu svg.open > g:nth-of-type(1) {
|
||||
.hextra-hamburger-menu svg.open > g:nth-of-type(1) {
|
||||
@apply hx:rotate-45;
|
||||
}
|
||||
|
||||
.hamburger-menu svg.open > g:nth-of-type(1) path {
|
||||
.hextra-hamburger-menu svg.open > g:nth-of-type(1) path {
|
||||
@apply hx:translate-y-1;
|
||||
}
|
||||
|
||||
.hamburger-menu svg.open > g:nth-of-type(2) {
|
||||
.hextra-hamburger-menu svg.open > g:nth-of-type(2) {
|
||||
@apply hx:-rotate-45;
|
||||
}
|
||||
|
||||
.hamburger-menu svg.open > g:nth-of-type(2) path {
|
||||
.hextra-hamburger-menu svg.open > g:nth-of-type(2) path {
|
||||
@apply hx:-translate-y-1;
|
||||
}
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
.search-wrapper {
|
||||
.hextra-search-wrapper {
|
||||
li {
|
||||
@apply hx:mx-2.5 hx:break-words hx:rounded-md hx:contrast-more:border hx:text-gray-800 hx:contrast-more:border-transparent hx:dark:text-gray-300;
|
||||
a {
|
||||
@apply hx:block hx:scroll-m-12 hx:px-2.5 hx:py-2;
|
||||
}
|
||||
|
||||
.title {
|
||||
.hextra-search-title {
|
||||
@apply hx:text-base hx:font-semibold hx:leading-5;
|
||||
}
|
||||
|
||||
.active {
|
||||
.hextra-search-active {
|
||||
@apply hx:rounded-md hx:bg-primary-500/10 hx:contrast-more:border-primary-500;
|
||||
}
|
||||
}
|
||||
|
||||
.no-result {
|
||||
.hextra-search-no-result {
|
||||
@apply hx:block hx:select-none hx:p-8 hx:text-center hx:text-sm hx:text-gray-400;
|
||||
}
|
||||
|
||||
.prefix {
|
||||
.hextra-search-prefix {
|
||||
@apply hx:mx-2.5 hx:mb-2 hx:mt-6 hx:select-none hx:border-b hx:border-black/10 hx:px-2.5 hx:pb-1.5 hx:text-xs hx:font-semibold
|
||||
hx:uppercase hx:text-gray-500 hx:first:mt-0 hx:dark:border-white/20 hx:dark:text-gray-300 hx:contrast-more:border-gray-600
|
||||
hx:contrast-more:text-gray-900 hx:contrast-more:dark:border-gray-50 hx:contrast-more:dark:text-gray-50;
|
||||
}
|
||||
|
||||
.excerpt {
|
||||
.hextra-search-excerpt {
|
||||
@apply hx:overflow-hidden hx:text-ellipsis hx:mt-1 hx:text-sm hx:leading-[1.35rem] hx:text-gray-600 hx:dark:text-gray-400 hx:contrast-more:dark:text-gray-50;
|
||||
display: -webkit-box;
|
||||
line-clamp: 1;
|
||||
@@ -32,7 +32,7 @@
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.match {
|
||||
.hextra-search-match {
|
||||
@apply hx:text-primary-600;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@media (max-width: 48rem) {
|
||||
.sidebar-container {
|
||||
.hextra-sidebar-container {
|
||||
@apply hx:fixed hx:pt-[calc(var(--navbar-height))] hx:top-0 hx:w-full hx:bottom-0 hx:z-[15] hx:overscroll-contain hx:bg-white hx:dark:bg-dark;
|
||||
transition: transform 0.4s cubic-bezier(0.52, 0.16, 0.04, 1);
|
||||
will-change: transform, opacity;
|
||||
@@ -8,7 +8,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
.hextra-sidebar-container {
|
||||
li > div {
|
||||
@apply hx:h-0;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.steps {
|
||||
.hextra-steps {
|
||||
:where(h2, h3, h4, h5, h6):not(.no-step-marker) {
|
||||
counter-increment: step;
|
||||
@apply hx:ltr:before:ml-[-41px] hx:rtl:before:mr-[-44px];
|
||||
@@ -13,7 +13,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
:lang(fa) .steps {
|
||||
:lang(fa) .hextra-steps {
|
||||
:where(h2, h3, h4, h5, h6):not(.no-step-marker) {
|
||||
&:before {
|
||||
content: counter(step, persian);
|
||||
|
||||
@@ -9,11 +9,11 @@
|
||||
@apply hx:text-[.9em] hx:bg-primary-700/5 hx:overflow-x-auto hx:font-medium hx:subpixel-antialiased hx:dark:bg-primary-300/10 hx:contrast-more:border hx:contrast-more:border-primary-900/20 hx:contrast-more:contrast-150 hx:contrast-more:dark:border-primary-100/40;
|
||||
}
|
||||
|
||||
.filename {
|
||||
.hextra-code-filename {
|
||||
@apply hx:absolute hx:top-0 hx:z-[1] hx:w-full hx:truncate hx:rounded-t-xl hx:bg-primary-700/5 hx:py-2 hx:px-4 hx:text-xs hx:text-gray-700 hx:dark:bg-primary-300/10 hx:dark:text-gray-200;
|
||||
}
|
||||
|
||||
.filename + pre:not(.lntable pre) {
|
||||
.hextra-code-filename + pre:not(.lntable pre) {
|
||||
/* Override padding for code blocks with filename but no highlight */
|
||||
@apply hx:pt-12;
|
||||
}
|
||||
|
||||
@@ -33,16 +33,19 @@
|
||||
@apply hx:border-black/4 hx:bg-black/3 hx:break-words hx:rounded-md hx:border hx:py-0.5 hx:px-[.25em] hx:text-[.9em] hx:dark:border-white/10 hx:dark:bg-white/10;
|
||||
}
|
||||
:where(table):not(:where(.hextra-code-block table, [class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx:block hx:overflow-x-auto hx:mt-6 hx:p-0 hx:first:mt-0;
|
||||
@apply hx:block hx:overflow-x-auto hx:my-6 hx:p-0 hx:first:mt-0 hx:w-full hx:text-sm hx:leading-5;
|
||||
|
||||
tr {
|
||||
@apply hx:m-0 hx:border-t hx:border-gray-300 hx:p-0 hx:dark:border-gray-600 hx:even:bg-gray-100 hx:even:dark:bg-gray-600/20;
|
||||
thead {
|
||||
@apply hx:border-b hx:border-gray-200 hx:dark:border-neutral-800;
|
||||
}
|
||||
tbody tr {
|
||||
@apply hx:m-0 hx:border-b hx:border-gray-100 hx:dark:border-neutral-800/50;
|
||||
}
|
||||
th {
|
||||
@apply hx:m-0 hx:border hx:border-gray-300 hx:px-4 hx:py-2 hx:font-semibold hx:dark:border-gray-600;
|
||||
@apply hx:m-0 hx:p-2 hx:font-semibold hx:first:pl-0 hx:last:pr-0;
|
||||
}
|
||||
td {
|
||||
@apply hx:m-0 hx:border hx:border-gray-300 hx:px-4 hx:py-2 hx:dark:border-gray-600;
|
||||
@apply hx:m-0 hx:p-2 hx:first:pl-0 hx:last:pr-0;
|
||||
}
|
||||
}
|
||||
:where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@@ -86,6 +89,10 @@
|
||||
@apply hx:my-2 hx:ps-6;
|
||||
}
|
||||
}
|
||||
/* Horizontal line */
|
||||
:where(hr):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx:my-10 hx:first:mt-0 hx:last:mb-0 hx:border-gray-200 hx:dark:border-neutral-800;
|
||||
}
|
||||
.footnotes {
|
||||
@apply hx:mt-12 hx:text-sm;
|
||||
|
||||
@@ -93,9 +100,7 @@
|
||||
@apply hx:border-gray-200 hx:dark:border-neutral-800;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subheading-anchor {
|
||||
.subheading-anchor {
|
||||
@apply hx:opacity-0 hx:transition-opacity hx:ltr:ml-1 hx:rtl:mr-1;
|
||||
|
||||
span:target + &,
|
||||
@@ -117,6 +122,7 @@
|
||||
@apply hx:dark:text-neutral-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
article details > summary {
|
||||
|
||||
@@ -27,8 +27,8 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
document.querySelectorAll('.hextra-code-copy-btn').forEach(function (button) {
|
||||
// Add copy and success icons
|
||||
button.querySelector('.copy-icon')?.appendChild(getCopyIcon());
|
||||
button.querySelector('.success-icon')?.appendChild(getSuccessIcon());
|
||||
button.querySelector('.hextra-copy-icon')?.appendChild(getCopyIcon());
|
||||
button.querySelector('.hextra-success-icon')?.appendChild(getSuccessIcon());
|
||||
|
||||
// Add click event listener for copy button
|
||||
button.addEventListener('click', function (e) {
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
// Change shortcut key to cmd+k on Mac, iPad or iPhone.
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
if (/iPad|iPhone|Macintosh/.test(navigator.userAgent)) {
|
||||
// select the kbd element under the .search-wrapper class
|
||||
const keys = document.querySelectorAll(".search-wrapper kbd");
|
||||
// select the kbd element under the .hextra-search-wrapper class
|
||||
const keys = document.querySelectorAll(".hextra-search-wrapper kbd");
|
||||
keys.forEach(key => {
|
||||
key.innerHTML = '<span class="hx:text-xs">⌘</span>K';
|
||||
});
|
||||
@@ -22,7 +22,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
(function () {
|
||||
const searchDataURL = '{{ $searchData.RelPermalink }}';
|
||||
|
||||
const inputElements = document.querySelectorAll('.search-input');
|
||||
const inputElements = document.querySelectorAll('.hextra-search-input');
|
||||
for (const el of inputElements) {
|
||||
el.addEventListener('focus', init);
|
||||
el.addEventListener('keyup', search);
|
||||
@@ -30,7 +30,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
el.addEventListener('input', handleInputChange);
|
||||
}
|
||||
|
||||
const shortcutElements = document.querySelectorAll('.search-wrapper kbd');
|
||||
const shortcutElements = document.querySelectorAll('.hextra-search-wrapper kbd');
|
||||
|
||||
function setShortcutElementsOpacity(opacity) {
|
||||
shortcutElements.forEach(el => {
|
||||
@@ -45,12 +45,12 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
|
||||
// Get the search wrapper, input, and results elements.
|
||||
function getActiveSearchElement() {
|
||||
const inputs = Array.from(document.querySelectorAll('.search-wrapper')).filter(el => el.clientHeight > 0);
|
||||
const inputs = Array.from(document.querySelectorAll('.hextra-search-wrapper')).filter(el => el.clientHeight > 0);
|
||||
if (inputs.length === 1) {
|
||||
return {
|
||||
wrapper: inputs[0],
|
||||
inputElement: inputs[0].querySelector('.search-input'),
|
||||
resultsElement: inputs[0].querySelector('.search-results')
|
||||
inputElement: inputs[0].querySelector('.hextra-search-input'),
|
||||
resultsElement: inputs[0].querySelector('.hextra-search-results')
|
||||
};
|
||||
}
|
||||
return undefined;
|
||||
@@ -103,7 +103,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
const { resultsElement } = getActiveSearchElement();
|
||||
if (!resultsElement) return { result: undefined, index: -1 };
|
||||
|
||||
const result = resultsElement.querySelector('.active');
|
||||
const result = resultsElement.querySelector('.hextra-search-active');
|
||||
if (!result) return { result: undefined, index: -1 };
|
||||
|
||||
const index = parseInt(result.dataset.index, 10);
|
||||
@@ -116,10 +116,10 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
if (!resultsElement) return;
|
||||
|
||||
const { result: activeResult } = getActiveResult();
|
||||
activeResult && activeResult.classList.remove('active');
|
||||
activeResult && activeResult.classList.remove('hextra-search-active');
|
||||
const result = resultsElement.querySelector(`[data-index="${index}"]`);
|
||||
if (result) {
|
||||
result.classList.add('active');
|
||||
result.classList.add('hextra-search-active');
|
||||
result.focus();
|
||||
}
|
||||
}
|
||||
@@ -384,7 +384,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
if (!resultsElement) return;
|
||||
|
||||
if (!results.length) {
|
||||
resultsElement.innerHTML = `<span class="no-result">{{ $noResultsFound | safeHTML }}</span>`;
|
||||
resultsElement.innerHTML = `<span class="hextra-search-no-result">{{ $noResultsFound | safeHTML }}</span>`;
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -418,14 +418,14 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
const result = results[i];
|
||||
if (result.prefix) {
|
||||
fragment.appendChild(createElement(`
|
||||
<div class="prefix">${result.prefix}</div>`));
|
||||
<div class="hextra-search-prefix">${result.prefix}</div>`));
|
||||
}
|
||||
let li = createElement(`
|
||||
<li>
|
||||
<a data-index="${i}" href="${result.route}" class=${i === 0 ? "active" : ""}>
|
||||
<div class="title">`+ highlightMatches(result.children.title, query) + `</div>` +
|
||||
<a data-index="${i}" href="${result.route}" class=${i === 0 ? "hextra-search-active" : ""}>
|
||||
<div class="hextra-search-title">`+ highlightMatches(result.children.title, query) + `</div>` +
|
||||
(result.children.content ?
|
||||
`<div class="excerpt">` + highlightMatches(result.children.content, query) + `</div>` : '') + `
|
||||
`<div class="hextra-search-excerpt">` + highlightMatches(result.children.content, query) + `</div>` : '') + `
|
||||
</a>
|
||||
</li>`);
|
||||
li.addEventListener('mousemove', handleMouseMove);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
(function () {
|
||||
const languageSwitchers = document.querySelectorAll('.language-switcher');
|
||||
const languageSwitchers = document.querySelectorAll('.hextra-language-switcher');
|
||||
languageSwitchers.forEach((switcher) => {
|
||||
switcher.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
// Dismiss language switcher when clicking outside
|
||||
document.addEventListener('click', (e) => {
|
||||
if (e.target.closest('.language-switcher') === null) {
|
||||
if (e.target.closest('.hextra-language-switcher') === null) {
|
||||
languageSwitchers.forEach((switcher) => {
|
||||
switcher.dataset.state = 'closed';
|
||||
const optionsElement = switcher.nextElementSibling;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
// Hamburger menu for mobile navigation
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const menu = document.querySelector('.hamburger-menu');
|
||||
const sidebarContainer = document.querySelector('.sidebar-container');
|
||||
const menu = document.querySelector('.hextra-hamburger-menu');
|
||||
const sidebarContainer = document.querySelector('.hextra-sidebar-container');
|
||||
|
||||
function toggleMenu() {
|
||||
// Toggle the hamburger menu
|
||||
|
||||
@@ -17,8 +17,8 @@ function enableCollapsibles() {
|
||||
}
|
||||
|
||||
function scrollToActiveItem() {
|
||||
const sidebarScrollbar = document.querySelector("aside.sidebar-container > .hextra-scrollbar");
|
||||
const activeItems = document.querySelectorAll(".sidebar-active-item");
|
||||
const sidebarScrollbar = document.querySelector("aside.hextra-sidebar-container > .hextra-scrollbar");
|
||||
const activeItems = document.querySelectorAll(".hextra-sidebar-active-item");
|
||||
const visibleActiveItem = Array.from(activeItems).find(function (activeItem) {
|
||||
return activeItem.getBoundingClientRect().height > 0;
|
||||
});
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
(function () {
|
||||
const defaultTheme = '{{ site.Params.theme.default | default `system`}}'
|
||||
|
||||
const themeToggleButtons = document.querySelectorAll(".theme-toggle");
|
||||
const themeToggleButtons = document.querySelectorAll(".hextra-theme-toggle");
|
||||
|
||||
// Change the icons of the buttons based on previous settings or system theme
|
||||
if (
|
||||
|
||||
55
exampleSite/content/blog/v0.10.md
Normal file
55
exampleSite/content/blog/v0.10.md
Normal file
@@ -0,0 +1,55 @@
|
||||
---
|
||||
title: "Hextra v0.10.0 is released"
|
||||
date: 2025-08-14
|
||||
authors:
|
||||
- name: imfing
|
||||
link: https://github.com/imfing
|
||||
image: https://github.com/imfing.png
|
||||
tags:
|
||||
- Release
|
||||
draft: true
|
||||
---
|
||||
|
||||
<!--more-->
|
||||
|
||||
## What's New
|
||||
|
||||
TODO
|
||||
|
||||
To upgrade to v0.10.0, update your Hugo module:
|
||||
|
||||
```bash
|
||||
hugo mod get -u github.com/imfing/hextra@v0.10.0
|
||||
```
|
||||
|
||||
## Migration Guide
|
||||
|
||||
### CSS class prefix
|
||||
|
||||
This release includes a comprehensive CSS class naming refactor to improve consistency and avoid potential conflicts. Most Hextra components CSS classes now use the `hextra-` prefix.
|
||||
|
||||
| Area | Before | After |
|
||||
| -------------------- | ---------------------------- | ------------------------------------------------- |
|
||||
| Search (container) | `.search-wrapper` | `.hextra-search-wrapper` |
|
||||
| Search (input) | `.search-input` | `.hextra-search-input` |
|
||||
| Search (results) | `.search-results` | `.hextra-search-results` |
|
||||
| Search (title) | `.search-wrapper .title` | `.hextra-search-wrapper .hextra-search-title` |
|
||||
| Search (active item) | `.search-wrapper .active` | `.hextra-search-wrapper .hextra-search-active` |
|
||||
| Search (no result) | `.search-wrapper .no-result` | `.hextra-search-wrapper .hextra-search-no-result` |
|
||||
| Search (prefix) | `.search-wrapper .prefix` | `.hextra-search-wrapper .hextra-search-prefix` |
|
||||
| Search (excerpt) | `.search-wrapper .excerpt` | `.hextra-search-wrapper .hextra-search-excerpt` |
|
||||
| Search (match) | `.search-wrapper .match` | `.hextra-search-wrapper .hextra-search-match` |
|
||||
| Navbar blur | `.nav-container-blur` | `.hextra-nav-container-blur` |
|
||||
| Hamburger menu | `.hamburger-menu` | `.hextra-hamburger-menu` |
|
||||
| Theme toggle | `.theme-toggle` | `.hextra-theme-toggle` |
|
||||
| Language switcher | `.language-switcher` | `.hextra-language-switcher` |
|
||||
| Sidebar container | `.sidebar-container` | `.hextra-sidebar-container` |
|
||||
| Sidebar active item | `.sidebar-active-item` | `.hextra-sidebar-active-item` |
|
||||
| Code filename | `.filename` | `.hextra-code-filename` |
|
||||
| Copy icon | `.copy-icon` | `.hextra-copy-icon` |
|
||||
| Success icon | `.success-icon` | `.hextra-success-icon` |
|
||||
| Steps | `.steps` | `.hextra-steps` |
|
||||
|
||||
---
|
||||
|
||||
_This is a draft release announcement. The actual release date and features may vary._
|
||||
@@ -111,7 +111,7 @@ The following classes can be used to customize various parts of the theme.
|
||||
|
||||
##### Steps
|
||||
|
||||
- `steps` - The steps container
|
||||
- `hextra-steps` - The steps container
|
||||
|
||||
##### Tabs
|
||||
|
||||
@@ -128,9 +128,9 @@ The following classes can be used to customize various parts of the theme.
|
||||
|
||||
#### Navbar
|
||||
|
||||
- `nav-container` - The navbar container
|
||||
- `nav-container-blur` - The navbar container in blur element
|
||||
- `hamburger-menu` - The hamburger menu button
|
||||
- `hextra-nav-container` - The navbar container
|
||||
- `hextra-nav-container-blur` - The navbar container in blur element
|
||||
- `hextra-hamburger-menu` - The hamburger menu button
|
||||
|
||||
#### Footer
|
||||
|
||||
@@ -139,9 +139,18 @@ The following classes can be used to customize various parts of the theme.
|
||||
|
||||
#### Search
|
||||
|
||||
- `search-wrapper` - The search wrapper container
|
||||
- `search-input` - The search input element
|
||||
- `search-results` - The search results list container
|
||||
- `hextra-search-wrapper` - The search wrapper container
|
||||
- `hextra-search-input` - The search input element
|
||||
- `hextra-search-results` - The search results list container
|
||||
|
||||
Optional nested classes used within the search UI:
|
||||
|
||||
- `hextra-search-title` - The result title element
|
||||
- `hextra-search-active` - The active result anchor
|
||||
- `hextra-search-no-result` - The empty state element
|
||||
- `hextra-search-prefix` - The breadcrumb/prefix label for grouped results
|
||||
- `hextra-search-excerpt` - The result snippet text
|
||||
- `hextra-search-match` - The highlighted query span
|
||||
|
||||
#### Table of Contents
|
||||
|
||||
@@ -149,27 +158,29 @@ The following classes can be used to customize various parts of the theme.
|
||||
|
||||
#### Sidebar
|
||||
|
||||
- `mobile-menu-overlay` - The overlay element for the mobile menu
|
||||
- `sidebar-container` - The sidebar container
|
||||
- `sidebar-active-item` - The active item in the sidebar
|
||||
- `hextra-sidebar-container` - The sidebar container
|
||||
- `hextra-sidebar-active-item` - The active item in the sidebar
|
||||
|
||||
#### Language Switcher
|
||||
|
||||
- `language-switcher` - The language switcher button
|
||||
- `language-options` - The language options container
|
||||
- `hextra-language-switcher` - The language switcher button
|
||||
- `hextra-language-options` - The language options container
|
||||
|
||||
#### Theme Toggle
|
||||
|
||||
- `theme-toggle` - The theme toggle button
|
||||
- `hextra-theme-toggle` - The theme toggle button
|
||||
|
||||
#### Code Copy Button
|
||||
|
||||
- `hextra-code-copy-btn-container` - The code copy button container
|
||||
- `hextra-code-copy-btn` - The code copy button
|
||||
- `hextra-copy-icon` - The copy icon element
|
||||
- `hextra-success-icon` - The success icon element
|
||||
|
||||
#### Code Block
|
||||
|
||||
- `hextra-code-block` - The code block container
|
||||
- `hextra-code-filename` - The filename element for code blocks
|
||||
|
||||
#### Feature Card
|
||||
|
||||
@@ -179,10 +190,6 @@ The following classes can be used to customize various parts of the theme.
|
||||
|
||||
- `hextra-feature-grid` - The feature grid container
|
||||
|
||||
#### Breadcrumbs
|
||||
|
||||
No specific class is available for breadcrumbs.
|
||||
|
||||
### Syntax Highlighting
|
||||
|
||||
List of available syntax highlighting themes are available at [Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html). The stylesheet can be generated using the command:
|
||||
|
||||
@@ -12,9 +12,9 @@ Hugo supports [Markdown](https://en.wikipedia.org/wiki/Markdown) syntax for form
|
||||
### Styling Text
|
||||
|
||||
| Style | Syntax | Example | Output |
|
||||
| -------- | -------- | ------ | ------ |
|
||||
| :------------ | :----------------------- | :-------------------------------------- | :------------------------------------ |
|
||||
| Bold | `**bold text**` | `**bold text**` | **bold text** |
|
||||
| Italic | `*italicized text*` | `*italicized text*` | *italicized text* |
|
||||
| Italic | `*italicized text*` | `*italicized text*` | _italicized text_ |
|
||||
| Strikethrough | `~~strikethrough text~~` | `~~strikethrough text~~` | ~~strikethrough text~~ |
|
||||
| Subscript | `<sub></sub>` | `This is a <sub>subscript</sub> text` | This is a <sub>subscript</sub> text |
|
||||
| Superscript | `<sup></sup>` | `This is a <sup>superscript</sup> text` | This is a <sup>superscript</sup> text |
|
||||
@@ -80,13 +80,13 @@ Please make sure you are using the latest version of Hextra and [Hugo v0.146.0](
|
||||
Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-box.
|
||||
|
||||
| Name | Age |
|
||||
|--------|------|
|
||||
| :---- | :-- |
|
||||
| Bob | 27 |
|
||||
| Alice | 23 |
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
| Name | Age |
|
||||
|--------|------|
|
||||
| :---- | :-- |
|
||||
| Bob | 27 |
|
||||
| Alice | 23 |
|
||||
```
|
||||
@@ -94,13 +94,13 @@ Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-
|
||||
#### Inline Markdown within tables
|
||||
|
||||
| Italics | Bold | Code |
|
||||
| -------- | -------- | ------ |
|
||||
| *italics* | **bold** | `code` |
|
||||
| :-------- | :------- | :----- |
|
||||
| _italics_ | **bold** | `code` |
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
| Italics | Bold | Code |
|
||||
| -------- | -------- | ------ |
|
||||
| *italics* | **bold** | `code` |
|
||||
| :-------- | :------- | :----- |
|
||||
| _italics_ | **bold** | `code` |
|
||||
```
|
||||
|
||||
### Code Blocks
|
||||
@@ -137,22 +137,22 @@ Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-
|
||||
|
||||
#### Nested list
|
||||
|
||||
* Fruit
|
||||
* Apple
|
||||
* Orange
|
||||
* Banana
|
||||
* Dairy
|
||||
* Milk
|
||||
* Cheese
|
||||
- Fruit
|
||||
- Apple
|
||||
- Orange
|
||||
- Banana
|
||||
- Dairy
|
||||
- Milk
|
||||
- Cheese
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
* Fruit
|
||||
* Apple
|
||||
* Orange
|
||||
* Banana
|
||||
* Dairy
|
||||
* Milk
|
||||
* Cheese
|
||||
- Fruit
|
||||
- Apple
|
||||
- Orange
|
||||
- Banana
|
||||
- Dairy
|
||||
- Milk
|
||||
- Cheese
|
||||
```
|
||||
|
||||
### Images
|
||||
@@ -165,10 +165,10 @@ Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-
|
||||
|
||||
With caption:
|
||||
|
||||
|
||||
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
|
||||
|
||||
```
|
||||
|
||||
For more advanced functionality, use Hugo's built-in [Figure shortcode](https://gohugo.io/shortcodes/figure/).
|
||||
@@ -192,7 +192,7 @@ For more configuration options, see Hugo documentation on [Configure Markup](htt
|
||||
|
||||
## Learning Resources
|
||||
|
||||
* [Markdown Guide](https://www.markdownguide.org/)
|
||||
* [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
|
||||
* [Markdown Tutorial](https://www.markdowntutorial.com/)
|
||||
* [Markdown Reference](https://commonmark.org/help/)
|
||||
- [Markdown Guide](https://www.markdownguide.org/)
|
||||
- [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
|
||||
- [Markdown Tutorial](https://www.markdowntutorial.com/)
|
||||
- [Markdown Reference](https://commonmark.org/help/)
|
||||
|
||||
@@ -88,17 +88,14 @@
|
||||
"col-align-l",
|
||||
"col-align-r",
|
||||
"content",
|
||||
"copy-icon",
|
||||
"dataframe",
|
||||
"delimcenter",
|
||||
"delimsizing",
|
||||
"filename",
|
||||
"fix",
|
||||
"footnote-backref",
|
||||
"footnote-ref",
|
||||
"footnotes",
|
||||
"frac-line",
|
||||
"hamburger-menu",
|
||||
"hextra-badge",
|
||||
"hextra-card",
|
||||
"hextra-card-icon",
|
||||
@@ -109,26 +106,43 @@
|
||||
"hextra-code-block",
|
||||
"hextra-code-copy-btn",
|
||||
"hextra-code-copy-btn-container",
|
||||
"hextra-code-filename",
|
||||
"hextra-copy-icon",
|
||||
"hextra-custom-footer",
|
||||
"hextra-error-h1",
|
||||
"hextra-feature-card",
|
||||
"hextra-feature-grid",
|
||||
"hextra-filetree",
|
||||
"hextra-filetree-folder",
|
||||
"hextra-footer",
|
||||
"hextra-hamburger-menu",
|
||||
"hextra-icon",
|
||||
"hextra-jupyter-code-cell",
|
||||
"hextra-jupyter-code-cell-outputs",
|
||||
"hextra-jupyter-code-cell-outputs-container",
|
||||
"hextra-language-options",
|
||||
"hextra-language-switcher",
|
||||
"hextra-max-footer-width",
|
||||
"hextra-max-navbar-width",
|
||||
"hextra-max-page-width",
|
||||
"hextra-nav-container",
|
||||
"hextra-nav-container-blur",
|
||||
"hextra-nav-menu-item",
|
||||
"hextra-nav-menu-items",
|
||||
"hextra-nav-menu-toggle",
|
||||
"hextra-pdf",
|
||||
"hextra-scrollbar",
|
||||
"hextra-search-input",
|
||||
"hextra-search-results",
|
||||
"hextra-search-wrapper",
|
||||
"hextra-sidebar-active-item",
|
||||
"hextra-sidebar-collapsible-button",
|
||||
"hextra-sidebar-container",
|
||||
"hextra-steps",
|
||||
"hextra-success-icon",
|
||||
"hextra-tabs-panel",
|
||||
"hextra-tabs-toggle",
|
||||
"hextra-theme-toggle",
|
||||
"hextra-toc",
|
||||
"hide-tail",
|
||||
"highlight",
|
||||
@@ -653,14 +667,11 @@
|
||||
"hx:xl:grid-cols-4",
|
||||
"hx:z-20",
|
||||
"hx:z-[-1]",
|
||||
"icon",
|
||||
"inner",
|
||||
"katex",
|
||||
"katex-display",
|
||||
"katex-html",
|
||||
"katex-mathml",
|
||||
"language-options",
|
||||
"language-switcher",
|
||||
"large-op",
|
||||
"lntable",
|
||||
"lntd",
|
||||
@@ -680,9 +691,6 @@
|
||||
"msupsub",
|
||||
"mtable",
|
||||
"mtight",
|
||||
"nav-container",
|
||||
"nav-container-blur",
|
||||
"next-error-h1",
|
||||
"not-prose",
|
||||
"nulldelimiter",
|
||||
"op-symbol",
|
||||
@@ -691,22 +699,14 @@
|
||||
"reset-size3",
|
||||
"reset-size6",
|
||||
"rlap",
|
||||
"search-input",
|
||||
"search-results",
|
||||
"search-wrapper",
|
||||
"sidebar-active-item",
|
||||
"sidebar-container",
|
||||
"size1",
|
||||
"size3",
|
||||
"sizing",
|
||||
"steps",
|
||||
"strut",
|
||||
"subheading-anchor",
|
||||
"success-icon",
|
||||
"svg-align",
|
||||
"text",
|
||||
"textrm",
|
||||
"theme-toggle",
|
||||
"vlist",
|
||||
"vlist-r",
|
||||
"vlist-s",
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<body
|
||||
style='font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; height:100vh; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center'>
|
||||
<body
|
||||
style='font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; height:100vh; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center'
|
||||
>
|
||||
<div>
|
||||
<style>
|
||||
body {
|
||||
@@ -11,7 +11,7 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.next-error-h1 {
|
||||
.hextra-error-h1 {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
@@ -21,19 +21,20 @@
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.next-error-h1 {
|
||||
.hextra-error-h1 {
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<h1 class="next-error-h1"
|
||||
style='display: inline-block; margin: 0 20px 0 0; padding-right: 23px; font-size: 24px; font-weight: 500; vertical-align: top; line-height: 49px; font-feature-settings: "rlig" 1,"calt" 1,"ss01" 1,"ss06" 1 !important;'>
|
||||
404</h1>
|
||||
<h1
|
||||
class="hextra-error-h1"
|
||||
style='display: inline-block; margin: 0 20px 0 0; padding-right: 23px; font-size: 24px; font-weight: 500; vertical-align: top; line-height: 49px; font-feature-settings: "rlig" 1,"calt" 1,"ss01" 1,"ss06" 1 !important;'
|
||||
>
|
||||
404
|
||||
</h1>
|
||||
<div style="display: inline-block; text-align: left">
|
||||
<h2 style="font-size: 14px; font-weight: 400; line-height: 49px; margin: 0">This page could not be found.
|
||||
</h2>
|
||||
<h2 style="font-size: 14px; font-weight: 400; line-height: 49px; margin: 0">This page could not be found.</h2>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
class="hextra-code-copy-btn hx:group/copybtn hx:cursor-pointer hx:transition-all hx:active:opacity-50 hx:bg-primary-700/5 hx:border hx:border-black/5 hx:text-gray-600 hx:hover:text-gray-900 hx:rounded-md hx:p-1.5 hx:dark:bg-primary-300/10 hx:dark:border-white/10 hx:dark:text-gray-400 hx:dark:hover:text-gray-50"
|
||||
title="{{ $copyCode }}"
|
||||
>
|
||||
<div class="copy-icon hx:group-[.copied]/copybtn:hidden hx:pointer-events-none hx:h-4 hx:w-4"></div>
|
||||
<div class="success-icon hx:hidden hx:group-[.copied]/copybtn:block hx:pointer-events-none hx:h-4 hx:w-4"></div>
|
||||
<div class="hextra-copy-icon hx:group-[.copied]/copybtn:hidden hx:pointer-events-none hx:h-4 hx:w-4"></div>
|
||||
<div class="hextra-success-icon hx:hidden hx:group-[.copied]/copybtn:block hx:pointer-events-none hx:h-4 hx:w-4"></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
{{ $options := .options | default (dict) }}
|
||||
|
||||
{{- if $filename -}}
|
||||
<div class="filename not-prose" dir="auto">
|
||||
<div class="hextra-code-filename not-prose" dir="auto">
|
||||
{{- if $base_url -}}
|
||||
|
||||
{{- $base_url = strings.TrimSuffix "/" $base_url -}}
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
document.getElementById('giscus').appendChild(giscusScript);
|
||||
|
||||
// Update giscus theme when theme switcher is clicked
|
||||
const toggles = document.querySelectorAll(".theme-toggle");
|
||||
const toggles = document.querySelectorAll(".hextra-theme-toggle");
|
||||
if (toggles) {
|
||||
toggles.forEach(toggle => toggle.addEventListener('click', setGiscusTheme));
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<button
|
||||
title="{{ $changeLanguage }}"
|
||||
data-state="closed"
|
||||
class="language-switcher hx:cursor-pointer hx:h-7 hx:rounded-md hx:px-2 hx:text-left hx:text-xs hx:font-medium hx:text-gray-600 hx:transition-colors hx:dark:text-gray-400 hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:dark:hover:bg-primary-100/5 hx:dark:hover:text-gray-50 hx:grow"
|
||||
class="hextra-language-switcher hx:cursor-pointer hx:h-7 hx:rounded-md hx:px-2 hx:text-left hx:text-xs hx:font-medium hx:text-gray-600 hx:transition-colors hx:dark:text-gray-400 hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:dark:hover:bg-primary-100/5 hx:dark:hover:text-gray-50 hx:grow"
|
||||
type="button"
|
||||
aria-label="{{ $changeLanguage }}"
|
||||
>
|
||||
@@ -20,7 +20,7 @@
|
||||
</div>
|
||||
</button>
|
||||
<ul
|
||||
class="language-options hx:hidden hx:z-20 hx:max-h-64 hx:overflow-auto hx:rounded-md hx:ring-1 hx:ring-black/5 hx:bg-white hx:py-1 hx:text-sm hx:shadow-lg hx:dark:ring-white/20 hx:dark:bg-neutral-800"
|
||||
class="hextra-language-options hx:hidden hx:z-20 hx:max-h-64 hx:overflow-auto hx:rounded-md hx:ring-1 hx:ring-black/5 hx:bg-white hx:py-1 hx:text-sm hx:shadow-lg hx:dark:ring-white/20 hx:dark:bg-neutral-800"
|
||||
style="position: fixed; inset: auto auto 0px 0px; margin: 0px; min-width: 100px;"
|
||||
>
|
||||
{{ range site.Languages }}
|
||||
|
||||
@@ -8,9 +8,9 @@
|
||||
{{- end -}}
|
||||
|
||||
|
||||
<div class="nav-container hx:sticky hx:top-0 hx:z-20 hx:w-full hx:bg-transparent hx:print:hidden">
|
||||
<div class="hextra-nav-container hx:sticky hx:top-0 hx:z-20 hx:w-full hx:bg-transparent hx:print:hidden">
|
||||
<div
|
||||
class="nav-container-blur hx:pointer-events-none hx:absolute hx:z-[-1] hx:h-full hx:w-full hx:bg-white hx:dark:bg-dark hx:shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)] hx:contrast-more:shadow-[0_0_0_1px_#000] hx:dark:shadow-[0_-1px_0_rgba(255,255,255,.1)_inset] hx:contrast-more:dark:shadow-[0_0_0_1px_#fff]"
|
||||
class="hextra-nav-container-blur hx:pointer-events-none hx:absolute hx:z-[-1] hx:h-full hx:w-full hx:bg-white hx:dark:bg-dark hx:shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)] hx:contrast-more:shadow-[0_0_0_1px_#000] hx:dark:shadow-[0_-1px_0_rgba(255,255,255,.1)_inset] hx:contrast-more:dark:shadow-[0_0_0_1px_#fff]"
|
||||
></div>
|
||||
|
||||
<nav class="hextra-max-navbar-width hx:mx-auto hx:flex hx:items-center hx:justify-end hx:gap-2 hx:h-16 hx:px-6">
|
||||
@@ -93,7 +93,7 @@
|
||||
{{- end -}}
|
||||
|
||||
|
||||
<button type="button" aria-label="Menu" class="hamburger-menu hx:cursor-pointer hx:-mr-2 hx:rounded-sm hx:p-2 hx:active:bg-gray-400/20 hx:md:hidden">
|
||||
<button type="button" aria-label="Menu" class="hextra-hamburger-menu hx:cursor-pointer hx:-mr-2 hx:rounded-sm hx:p-2 hx:active:bg-gray-400/20 hx:md:hidden">
|
||||
{{- partial "utils/icon.html" (dict "name" "hamburger-menu" "attributes" "height=24") -}}
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
{{- $placeholder := (T "searchPlaceholder") | default "Search..." -}}
|
||||
|
||||
|
||||
<div class="search-wrapper hx:relative hx:md:w-64">
|
||||
<div class="hextra-search-wrapper hx:relative hx:md:w-64">
|
||||
<div class="hx:relative hx:flex hx:items-center hx:text-gray-900 hx:contrast-more:text-gray-800 hx:dark:text-gray-300 hx:contrast-more:dark:text-gray-300">
|
||||
<input
|
||||
placeholder="{{ $placeholder }}"
|
||||
class="search-input hx:block hx:w-full hx:appearance-none hx:rounded-lg hx:px-3 hx:py-2 hx:transition-colors hx:text-base hx:leading-tight hx:md:text-sm hx:bg-black/[.05] hx:dark:bg-gray-50/10 hx:focus:bg-white hx:dark:focus:bg-dark hx:placeholder:text-gray-500 hx:dark:placeholder:text-gray-400 hx:contrast-more:border hx:contrast-more:border-current"
|
||||
class="hextra-search-input hx:block hx:w-full hx:appearance-none hx:rounded-lg hx:px-3 hx:py-2 hx:transition-colors hx:text-base hx:leading-tight hx:md:text-sm hx:bg-black/[.05] hx:dark:bg-gray-50/10 hx:focus:bg-white hx:dark:focus:bg-dark hx:placeholder:text-gray-500 hx:dark:placeholder:text-gray-400 hx:contrast-more:border hx:contrast-more:border-current"
|
||||
type="search"
|
||||
value=""
|
||||
spellcheck="false"
|
||||
@@ -19,7 +19,7 @@
|
||||
|
||||
<div>
|
||||
<ul
|
||||
class="search-results hextra-scrollbar hx:hidden hx:border hx:border-gray-200 hx:bg-white hx:text-gray-100 hx:dark:border-neutral-800 hx:dark:bg-neutral-900 hx:absolute hx:top-full hx:z-20 hx:mt-2 hx:overflow-auto hx:overscroll-contain hx:rounded-xl hx:py-2.5 hx:shadow-xl hx:max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)] hx:md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)] hx:inset-x-0 hx:ltr:md:left-auto hx:rtl:md:right-auto hx:contrast-more:border hx:contrast-more:border-gray-900 hx:contrast-more:dark:border-gray-50 hx:w-screen hx:min-h-[100px] hx:max-w-[min(calc(100vw-2rem),calc(100%+20rem))]"
|
||||
class="hextra-search-results hextra-scrollbar hx:hidden hx:border hx:border-gray-200 hx:bg-white hx:text-gray-100 hx:dark:border-neutral-800 hx:dark:bg-neutral-900 hx:absolute hx:top-full hx:z-20 hx:mt-2 hx:overflow-auto hx:overscroll-contain hx:rounded-xl hx:py-2.5 hx:shadow-xl hx:max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)] hx:md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)] hx:inset-x-0 hx:ltr:md:left-auto hx:rtl:md:right-auto hx:contrast-more:border hx:contrast-more:border-gray-900 hx:contrast-more:dark:border-gray-50 hx:w-screen hx:min-h-[100px] hx:max-w-[min(calc(100vw-2rem),calc(100%+20rem))]"
|
||||
style="transition: max-height 0.2s ease 0s;"
|
||||
></ul>
|
||||
</div>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
{{- end -}}
|
||||
|
||||
|
||||
<aside class="sidebar-container hx:flex hx:flex-col hx:print:hidden hx:md:top-16 hx:md:shrink-0 hx:md:w-64 hx:md:self-start hx:max-md:[transform:translate3d(0,-100%,0)] {{ $sidebarClass }}">
|
||||
<aside class="hextra-sidebar-container hx:flex hx:flex-col hx:print:hidden hx:md:top-16 hx:md:shrink-0 hx:md:w-64 hx:md:self-start hx:max-md:[transform:translate3d(0,-100%,0)] {{ $sidebarClass }}">
|
||||
<!-- Search bar on small screen -->
|
||||
<div class="hx:px-4 hx:pt-4 hx:md:hidden">
|
||||
{{ partial "search.html" }}
|
||||
@@ -160,7 +160,7 @@
|
||||
<a
|
||||
class="hx:flex hx:items-center hx:justify-between hx:gap-2 hx:cursor-pointer hx:rounded-sm hx:px-2 hx:py-1.5 hx:text-sm hx:transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word]
|
||||
{{- if .active }}
|
||||
sidebar-active-item hx:bg-primary-100 hx:font-semibold hx:text-primary-800 hx:contrast-more:border hx:contrast-more:border-primary-500 hx:dark:bg-primary-400/10 hx:dark:text-primary-600 hx:contrast-more:dark:border-primary-500
|
||||
hextra-sidebar-active-item hx:bg-primary-100 hx:font-semibold hx:text-primary-800 hx:contrast-more:border hx:contrast-more:border-primary-500 hx:dark:bg-primary-400/10 hx:dark:text-primary-600 hx:contrast-more:dark:border-primary-500
|
||||
{{- else }}
|
||||
hx:text-gray-500 hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:contrast-more:border hx:contrast-more:border-transparent hx:contrast-more:text-gray-900 hx:contrast-more:hover:border-gray-900 hx:dark:text-neutral-400 hx:dark:hover:bg-primary-100/5 hx:dark:hover:text-gray-50 hx:contrast-more:dark:text-gray-50 hx:contrast-more:dark:hover:border-gray-50
|
||||
{{- end -}}"
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<button
|
||||
title="{{ $changeTheme }}"
|
||||
data-theme="light"
|
||||
class="theme-toggle hx:cursor-pointer hx:group hx:h-7 hx:rounded-md hx:px-2 hx:text-left hx:text-xs hx:font-medium hx:text-gray-600 hx:transition-colors hx:dark:text-gray-400 hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:dark:hover:bg-primary-100/5 hx:dark:hover:text-gray-50"
|
||||
class="hextra-theme-toggle hx:cursor-pointer hx:group hx:h-7 hx:rounded-md hx:px-2 hx:text-left hx:text-xs hx:font-medium hx:text-gray-600 hx:transition-colors hx:dark:text-gray-400 hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:dark:hover:bg-primary-100/5 hx:dark:hover:text-gray-50"
|
||||
type="button"
|
||||
aria-label="{{ $changeTheme }}"
|
||||
>
|
||||
|
||||
@@ -8,6 +8,6 @@
|
||||
|
||||
{{- $icon = replaceRE "<svg" (printf "<svg %s" $attributes) $icon -}}
|
||||
|
||||
<span class="hx:inline-block hx:align-text-bottom icon">
|
||||
<span class="hx:inline-block hx:align-text-bottom hextra-icon">
|
||||
{{- $icon | safeHTML -}}
|
||||
</span>
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
<div class="steps hx:ml-4 hx:mb-12 hx:ltr:border-l hx:rtl:border-r hx:border-gray-200 hx:ltr:pl-6 hx:rtl:pr-6 hx:dark:border-neutral-800 [counter-reset:step]">
|
||||
<div class="hextra-steps hx:ml-4 hx:mb-12 hx:ltr:border-l hx:rtl:border-r hx:border-gray-200 hx:ltr:pl-6 hx:rtl:pr-6 hx:dark:border-neutral-800 [counter-reset:step]">
|
||||
{{- .Inner -}}
|
||||
</div>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<main class="hx:w-full hx:min-w-0 hx:max-w-6xl hx:px-6 hx:pt-4 hx:md:px-12">
|
||||
{{ partial "breadcrumb.html" . }}
|
||||
{{ if .Title }}<h1 class="hx:mt-2 hx:text-4xl hx:font-bold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100">{{ .Title }}</h1>{{ end }}
|
||||
<div class="hx:mt-4 hx:mb-16 hx:text-gray-500 hx:text-sm hx:flex hx:items-center hx:flex-wrap hx:gap-y-2">
|
||||
<div class="hx:mt-4 hx:mb-16 hx:text-gray-500 hx:dark:text-gray-400 hx:text-sm hx:flex hx:items-center hx:flex-wrap hx:gap-y-2">
|
||||
{{- with $date := .Date }}<span class="hx:mr-1">{{ partial "utils/format-date" $date }}</span>{{ end -}}
|
||||
{{- $lazyLoading := site.Params.enableImageLazyLoading | default true -}}
|
||||
{{ if and .Date .Params.authors }}<span class="hx:mx-1">·</span>{{ end -}}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"scripts": {
|
||||
"dev:theme": "hugo server --logLevel=debug --config=hugo.yaml,../dev.toml --environment=theme --source=exampleSite --themesDir=../.. -D --port 1313",
|
||||
"dev:theme": "hugo server --logLevel=debug --config=hugo.yaml,../dev.toml --environment=theme --source=exampleSite --themesDir=../.. -D -F --port 1313",
|
||||
"dev": "hugo server --source=exampleSite --themesDir=../.. --disableFastRender -D --port 1313",
|
||||
"build:css": "npx postcss --config postcss.config.mjs --env production assets/css/styles.css -o assets/css/compiled/main.css",
|
||||
"build": "hugo --gc --minify --themesDir=../.. --source=exampleSite"
|
||||
|
||||
Reference in New Issue
Block a user