Genius/hextra
1
0
Fork 0
forked from drowl87/hextra_mirror
Code Pull Requests Activity

feat: add hx- prefix to Hextra Tailwind CSS classes (#300)

Browse Source 
* feat: add prefix to tailwind css classes

* fix: remove unnecessary prefixes

* fix: add missing prefix in other places

* chore: regenerate hugo_stats.json

* chore: run `npm run build:css`

* chore: add `hx-` prefix to _index.fa.md

* fix: lang switcher display issue

* fix: add `hx-` prefix to showcase/index.fa.md

* fix: lang switch param mistake
This commit is contained in:
Xin
2024-02-20 17:59:31 -05:00
committed by GitHub
parent 0e312d3476
commit 5c7303bee7
63 changed files with 1335 additions and 1340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1006
assets/css/compiled/main.css
View File

File diff suppressed because it is too large Load Diff

2
assets/css/components/code-copy.css
View File

@ -2,6 +2,6 @@
(-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
) {
.code-copy-btn {
@apply backdrop-blur-md bg-opacity-[.85] dark:bg-opacity-80;
@apply hx-backdrop-blur-md hx-bg-opacity-[.85] dark:hx-bg-opacity-80;
}
}

12
assets/css/components/navbar.css
View File

@ -1,6 +1,6 @@
nav {
.search-wrapper {
@apply hidden md:inline-block;
@apply hx-hidden md:hx-inline-block;
}
}
@ -8,13 +8,13 @@ nav {
(-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
) {
.nav-container-blur {
@apply backdrop-blur-md bg-white/[.85] dark:!bg-dark/80;
@apply hx-backdrop-blur-md hx-bg-white/[.85] dark:!hx-bg-dark/80;
}
}
.hamburger-menu svg {
g {
@apply origin-center;
@apply hx-origin-center;
transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}
path {
@ -37,16 +37,16 @@ nav {
&.open > {
path {
@apply opacity-0;
@apply hx-opacity-0;
}
g:nth-of-type(1) {
@apply rotate-45;
@apply hx-rotate-45;
path {
transform: translate3d(0, 4px, 0);
}
}
g:nth-of-type(2) {
@apply -rotate-45;
@apply -hx-rotate-45;
path {
transform: translate3d(0, -4px, 0);
}

8
assets/css/components/scrollbar.css
View File

@ -4,18 +4,18 @@
scrollbar-gutter: stable;
&::-webkit-scrollbar {
@apply w-3 h-3;
@apply hx-w-3 hx-h-3;
}
&::-webkit-scrollbar-track {
@apply bg-transparent;
@apply hx-bg-transparent;
}
&::-webkit-scrollbar-thumb {
@apply rounded-[10px];
@apply hx-rounded-[10px];
}
&:hover::-webkit-scrollbar-thumb {
border: 3px solid transparent;
background-color: var(--tw-shadow-color);
background-clip: content-box;
@apply shadow-neutral-500/20 hover:shadow-neutral-500/40;
@apply hx-shadow-neutral-500/20 hover:hx-shadow-neutral-500/40;
}
}

20
assets/css/components/search.css
View File

@ -1,31 +1,31 @@
.search-wrapper {
li {
@apply mx-2.5 break-words rounded-md contrast-more:border text-gray-800 contrast-more:border-transparent dark:text-gray-300;
@apply hx-mx-2.5 hx-break-words hx-rounded-md contrast-more:hx-border hx-text-gray-800 contrast-more:hx-border-transparent dark:hx-text-gray-300;
a {
@apply block scroll-m-12 px-2.5 py-2;
@apply hx-block hx-scroll-m-12 hx-px-2.5 hx-py-2;
}
.title {
@apply text-base font-semibold leading-5;
@apply hx-text-base hx-font-semibold hx-leading-5;
}
.active {
@apply rounded-md bg-primary-500/10 contrast-more:border-primary-500;
@apply hx-rounded-md hx-bg-primary-500/10 contrast-more:hx-border-primary-500;
}
}
.no-result {
@apply block select-none p-8 text-center text-sm text-gray-400;
@apply hx-block hx-select-none hx-p-8 hx-text-center hx-text-sm hx-text-gray-400;
}
.prefix {
@apply mx-2.5 mb-2 mt-6 select-none border-b border-black/10 px-2.5 pb-1.5 text-xs font-semibold
uppercase text-gray-500 first:mt-0 dark:border-white/20 dark:text-gray-300 contrast-more:border-gray-600
contrast-more:text-gray-900 contrast-more:dark:border-gray-50 contrast-more:dark:text-gray-50;
@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 first:hx-mt-0 dark:hx-border-white/20 dark:hx-text-gray-300 contrast-more:hx-border-gray-600
contrast-more:hx-text-gray-900 contrast-more:dark:hx-border-gray-50 contrast-more:dark:hx-text-gray-50;
}
.excerpt {
@apply overflow-hidden text-ellipsis mt-1 text-sm leading-[1.35rem] text-gray-600 dark:text-gray-400 contrast-more:dark:text-gray-50;
@apply hx-overflow-hidden hx-text-ellipsis hx-mt-1 hx-text-sm hx-leading-[1.35rem] hx-text-gray-600 dark:hx-text-gray-400 contrast-more:dark:hx-text-gray-50;
display: -webkit-box;
line-clamp: 1;
-webkit-line-clamp: 1;
@ -33,6 +33,6 @@
}
.match {
@apply text-primary-600;
@apply hx-text-primary-600;
}
}

8
assets/css/components/sidebar.css
View File

@ -1,6 +1,6 @@
@media (max-width: 767px) {
.sidebar-container {
@apply fixed pt-[calc(var(--navbar-height))] top-0 w-full bottom-0 z-[15] overscroll-contain bg-white dark:bg-dark;
@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 dark:hx-bg-dark;
transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
will-change: transform, opacity;
contain: layout style;
@ -10,12 +10,12 @@
.sidebar-container {
li > div {
@apply h-0;
@apply hx-h-0;
}
li.open > div {
@apply h-auto pt-1;
@apply hx-h-auto hx-pt-1;
}
li.open > a > span > svg > path {
@apply rotate-90;
@apply hx-rotate-90;
}
}

8
assets/css/components/steps.css
View File

@ -2,10 +2,10 @@
counter-increment: step;
&:before {
@apply absolute w-[33px] h-[33px];
@apply border-4 border-white bg-gray-100 dark:border-dark dark:bg-neutral-800;
@apply rounded-full text-neutral-400 text-base font-normal text-center -indent-px;
@apply mt-[3px] ml-[-41px];
@apply hx-absolute hx-w-[33px] hx-h-[33px];
@apply hx-border-4 hx-border-white hx-bg-gray-100 dark:hx-border-dark dark:hx-bg-neutral-800;
@apply hx-rounded-full hx-text-neutral-400 hx-text-base hx-font-normal hx-text-center -hx-indent-px;
@apply hx-mt-[3px] hx-ml-[-41px];
content: counter(step);
}
}

24
assets/css/highlight.css
View File

@ -3,51 +3,51 @@
@import "chroma/dark.css";
.code-block {
@apply text-[.9em] leading-5;
@apply hx-text-[.9em] hx-leading-5;
pre {
@apply text-[.9em] bg-primary-700/5 overflow-x-auto font-medium subpixel-antialiased dark:bg-primary-300/10 contrast-more:border contrast-more:border-primary-900/20 contrast-more:contrast-150 contrast-more:dark:border-primary-100/40;
@apply hx-text-[.9em] hx-bg-primary-700/5 hx-overflow-x-auto hx-font-medium hx-subpixel-antialiased dark:hx-bg-primary-300/10 contrast-more:hx-border contrast-more:hx-border-primary-900/20 contrast-more:hx-contrast-150 contrast-more:dark:hx-border-primary-100/40;
}
.filename {
@apply absolute top-0 z-[1] w-full truncate rounded-t-xl bg-primary-700/5 py-2 px-4 text-xs text-gray-700 dark:bg-primary-300/10 dark:text-gray-200;
@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 dark:hx-bg-primary-300/10 dark:hx-text-gray-200;
}
.filename + pre:not(.lntable pre) {
/* Override padding for code blocks with filename but no highlight */
@apply pt-12;
@apply hx-pt-12;
}
}
.code-block pre:not(.lntable pre) {
@apply px-4 mb-4 py-4 rounded-xl;
@apply hx-px-4 hx-mb-4 hx-py-4 hx-rounded-xl;
}
.code-block div:nth-of-type(2) pre {
@apply pt-12 pb-4;
@apply hx-pt-12 hx-pb-4;
}
.chroma {
.lntable {
@apply m-0 block w-auto overflow-auto rounded-xl;
@apply hx-m-0 hx-block hx-w-auto hx-overflow-auto hx-rounded-xl;
pre {
@apply pt-4 pb-4;
@apply hx-pt-4 hx-pb-4;
}
}
.ln,
.lnt:not(.hl > .lnt),
.hl:not(.line) {
@apply pl-4 pr-4 min-w-[2.6rem] text-neutral-600 dark:text-neutral-300;
@apply hx-pl-4 hx-pr-4 hx-min-w-[2.6rem] hx-text-neutral-600 dark:hx-text-neutral-300;
}
.lntd {
@apply p-0 align-top;
@apply hx-p-0 hx-align-top;
}
.lntd:last-of-type {
@apply w-full;
@apply hx-w-full;
}
/* LineHighlight */
.hl {
@apply block w-full bg-primary-800/10;
@apply hx-block hx-w-full hx-bg-primary-800/10;
}
}

4
assets/css/styles.css
View File

@ -11,13 +11,13 @@
@import "components/code-copy.css";
html {
@apply text-base antialiased;
@apply hx-text-base hx-antialiased;
font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
-webkit-tap-highlight-color: transparent;
}
body {
@apply w-full bg-white dark:bg-dark dark:text-gray-100;
@apply hx-w-full hx-bg-white dark:hx-bg-dark dark:hx-text-gray-100;
}
:root {

72
assets/css/typography.css
View File

@ -1,117 +1,117 @@
.content {
:where(h1):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100;
@apply hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100;
}
:where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-10 border-b pb-1 text-3xl border-neutral-200/70 contrast-more:border-neutral-400 dark:border-primary-100/10 contrast-more:dark:border-neutral-400;
@apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-10 hx-border-b hx-pb-1 hx-text-3xl hx-border-neutral-200/70 contrast-more:hx-border-neutral-400 dark:hx-border-primary-100/10 contrast-more:dark:hx-border-neutral-400;
}
:where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-2xl;
@apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-2xl;
}
:where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-xl;
@apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-xl;
}
:where(h5):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-lg;
@apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-lg;
}
:where(h6):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-base;
@apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-base;
}
:where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply mt-6 leading-7 first:mt-0;
@apply hx-mt-6 hx-leading-7 first:hx-mt-0;
}
:where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply text-primary-600 underline decoration-from-font [text-underline-position:from-font];
@apply hx-text-primary-600 hx-underline hx-decoration-from-font [text-underline-position:from-font];
}
:where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply mt-6 border-gray-300 italic text-gray-700 dark:border-gray-700 dark:text-gray-400 first:mt-0 ltr:border-l-2 ltr:pl-6 rtl:border-r-2 rtl:pr-6;
@apply hx-mt-6 hx-border-gray-300 hx-italic hx-text-gray-700 dark:hx-border-gray-700 dark:hx-text-gray-400 first:hx-mt-0 ltr:hx-border-l-2 ltr:hx-pl-6 rtl:hx-border-r-2 rtl:hx-pr-6;
}
:where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
@apply bg-primary-700/5 mb-4 overflow-x-auto rounded-xl font-medium subpixel-antialiased dark:bg-primary-300/10 text-[.9em] contrast-more:border contrast-more:border-primary-900/20 contrast-more:contrast-150 contrast-more:dark:border-primary-100/40 py-4;
@apply hx-bg-primary-700/5 hx-mb-4 hx-overflow-x-auto hx-rounded-xl hx-font-medium hx-subpixel-antialiased dark:hx-bg-primary-300/10 hx-text-[.9em] contrast-more:hx-border contrast-more:hx-border-primary-900/20 contrast-more:hx-contrast-150 contrast-more:dark:hx-border-primary-100/40 hx-py-4;
}
:where(code):not(:where(.code-block code, [class~=not-prose],[class~=not-prose] *)) {
@apply border-black border-opacity-[0.04] bg-opacity-[0.03] bg-black break-words rounded-md border py-0.5 px-[.25em] text-[.9em] dark:border-white/10 dark:bg-white/10;
@apply hx-border-black hx-border-opacity-[0.04] hx-bg-opacity-[0.03] hx-bg-black hx-break-words hx-rounded-md hx-border hx-py-0.5 hx-px-[.25em] hx-text-[.9em] dark:hx-border-white/10 dark:hx-bg-white/10;
}
:where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) {
@apply block overflow-x-auto mt-6 p-0 first:mt-0;
@apply hx-block hx-overflow-x-auto hx-mt-6 hx-p-0 first:hx-mt-0;
tr {
@apply m-0 border-t border-gray-300 p-0 dark:border-gray-600 even:bg-gray-100 even:dark:bg-gray-600/20;
@apply hx-m-0 hx-border-t hx-border-gray-300 hx-p-0 dark:hx-border-gray-600 even:hx-bg-gray-100 even:dark:hx-bg-gray-600/20;
}
th {
@apply m-0 border border-gray-300 px-4 py-2 font-semibold dark:border-gray-600;
@apply hx-m-0 hx-border hx-border-gray-300 hx-px-4 hx-py-2 hx-font-semibold dark:hx-border-gray-600;
}
td {
@apply m-0 border border-gray-300 px-4 py-2 dark:border-gray-600;
@apply hx-m-0 hx-border hx-border-gray-300 hx-px-4 hx-py-2 dark:hx-border-gray-600;
}
}
:where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply mt-6 list-decimal first:mt-0 ltr:ml-6 rtl:mr-6;
@apply hx-mt-6 hx-list-decimal first:hx-mt-0 ltr:hx-ml-6 rtl:hx-mr-6;
li {
@apply my-2;
@apply hx-my-2;
}
}
:where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply mt-6 list-disc first:mt-0 ltr:ml-6 rtl:mr-6;
@apply hx-mt-6 hx-list-disc first:hx-mt-0 ltr:hx-ml-6 rtl:hx-mr-6;
li {
@apply my-2;
@apply hx-my-2;
}
}
/* This CSS rule targets the first nested unordered (ul) or ordered (ol) list
inside the list item (li) of any parent ul or ol.
/* This CSS rule targets the first nested unordered (ul) or ordered (ol) list
inside the list item (li) of any parent ul or ol.
The rule sets the top margin of the selected list to zero. */
:where(ul, ol) > li > :where(ul, ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply mt-0;
@apply hx-mt-0;
}
:where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply border-black border-opacity-[0.04] bg-opacity-[0.03] bg-black break-words rounded-md border py-0.5 px-[.25em] text-[.9em] dark:border-white/10 dark:bg-white/10;
@apply hx-border-black hx-border-opacity-[0.04] hx-bg-opacity-[0.03] hx-bg-black hx-break-words hx-rounded-md hx-border hx-py-0.5 hx-px-[.25em] hx-text-[.9em] dark:hx-border-white/10 dark:hx-bg-white/10;
}
:where(pre.mermaid):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
@apply bg-transparent rounded-none dark:bg-transparent;
@apply hx-bg-transparent hx-rounded-none dark:hx-bg-transparent;
}
:where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply mx-auto my-4 rounded-md;
@apply hx-mx-auto hx-my-4 hx-rounded-md;
}
:where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) {
figcaption {
@apply text-sm text-gray-500 dark:text-gray-400 mt-2 block text-center;
@apply hx-text-sm hx-text-gray-500 dark:hx-text-gray-400 hx-mt-2 hx-block hx-text-center;
}
}
.footnotes {
@apply mt-12 text-sm;
@apply hx-mt-12 hx-text-sm;
}
}
.subheading-anchor {
@apply opacity-0 transition-opacity ltr:ml-1 rtl:mr-1;
@apply hx-opacity-0 hx-transition-opacity ltr:hx-ml-1 rtl:hx-mr-1;
span:target + &,
:hover > &,
&:focus {
@apply opacity-100;
@apply hx-opacity-100;
}
span + &,
:hover > & {
@apply !no-underline;
@apply !hx-no-underline;
}
&:after {
@apply content-['#'] px-1;
@apply text-gray-300 dark:text-neutral-700;
@apply hx-content-['#'] hx-px-1;
@apply hx-text-gray-300 dark:hx-text-neutral-700;
span:target + & {
@apply text-gray-400;
@apply dark:text-neutral-500;
@apply hx-text-gray-400;
@apply dark:hx-text-neutral-500;
}
}
}
article details > summary {
&::-webkit-details-marker {
@apply hidden;
@apply hx-hidden;
}
&::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='hx-h-5 hx-w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
height: 1.2em;
width: 1.2em;
vertical-align: -4px;