diff options
Diffstat (limited to 'themes')
7 files changed, 196 insertions, 29 deletions
diff --git a/themes/danix-xyz-hacker/assets/css/main.min.css b/themes/danix-xyz-hacker/assets/css/main.min.css index 858df86..74161bc 100644 --- a/themes/danix-xyz-hacker/assets/css/main.min.css +++ b/themes/danix-xyz-hacker/assets/css/main.min.css @@ -1292,6 +1292,10 @@ button, position: fixed; } +.absolute { + position: absolute; +} + .relative { position: relative; } @@ -1304,14 +1308,30 @@ button, inset: 0px; } +.bottom-0 { + bottom: 0px; +} + +.left-0 { + left: 0px; +} + .right-0 { right: 0px; } +.right-3 { + right: 0.75rem; +} + .top-0 { top: 0px; } +.top-3 { + top: 0.75rem; +} + .z-10 { z-index: 10; } @@ -1333,6 +1353,11 @@ button, margin-right: auto; } +.my-6 { + margin-top: 1.5rem; + margin-bottom: 1.5rem; +} + .my-8 { margin-top: 2rem; margin-bottom: 2rem; @@ -1370,6 +1395,17 @@ button, margin-top: 0.75rem; } +.mt-4 { + margin-top: 1rem; +} + +.line-clamp-3 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; +} + .block { display: block; } @@ -1390,6 +1426,14 @@ button, display: none; } +.aspect-video { + aspect-ratio: 16 / 9; +} + +.h-1 { + height: 0.25rem; +} + .h-32 { height: 8rem; } @@ -1414,6 +1458,10 @@ button, min-height: calc(100vh - 200px); } +.w-1 { + width: 0.25rem; +} + .w-32 { width: 8rem; } @@ -1434,10 +1482,22 @@ button, max-width: 42rem; } +.max-w-3xl { + max-width: 48rem; +} + .max-w-4xl { max-width: 56rem; } +.max-w-7xl { + max-width: 80rem; +} + +.max-w-lg { + max-width: 32rem; +} + .max-w-none { max-width: none; } @@ -1467,6 +1527,10 @@ button, resize: none; } +.resize { + resize: both; +} + .flex-col { flex-direction: column; } @@ -1513,12 +1577,22 @@ button, margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); } +.space-y-3 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); +} + .space-y-6 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); } +.overflow-hidden { + overflow: hidden; +} + .overflow-y-auto { overflow-y: auto; } @@ -1609,6 +1683,10 @@ button, padding: 1rem; } +.p-5 { + padding: 1.25rem; +} + .p-6 { padding: 1.5rem; } @@ -1638,16 +1716,16 @@ button, padding-right: 2rem; } -.py-0\.5 { - padding-top: 0.125rem; - padding-bottom: 0.125rem; -} - .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } +.py-1\.5 { + padding-top: 0.375rem; + padding-bottom: 0.375rem; +} + .py-12 { padding-top: 3rem; padding-bottom: 3rem; @@ -1676,6 +1754,10 @@ button, padding-left: 1.5rem; } +.pt-2 { + padding-top: 0.5rem; +} + .pt-8 { padding-top: 2rem; } @@ -1738,6 +1820,10 @@ button, font-style: italic; } +.not-italic { + font-style: normal; +} + .leading-relaxed { line-height: 1.625; } @@ -1814,6 +1900,10 @@ button, transition-duration: 150ms; } +.duration-100 { + transition-duration: 100ms; +} + .duration-200 { transition-duration: 200ms; } @@ -1992,6 +2082,10 @@ html.theme-light .prose-invert blockquote { color: var(--accent); } +.hover\:underline:hover { + text-decoration-line: underline; +} + .hover\:opacity-80:hover { opacity: 0.8; } @@ -2077,6 +2171,17 @@ html.theme-light .prose-invert blockquote { opacity: 0.5; } +.group\/cta:hover .group-hover\/cta\:translate-x-1 { + --tw-translate-x: 0.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.group:hover .group-hover\:scale-105 { + --tw-scale-x: 1.05; + --tw-scale-y: 1.05; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + .group:hover .group-hover\:text-accent { color: var(--accent); } diff --git a/themes/danix-xyz-hacker/assets/js/reading-progress.js b/themes/danix-xyz-hacker/assets/js/reading-progress.js new file mode 100644 index 0000000..ee1192f --- /dev/null +++ b/themes/danix-xyz-hacker/assets/js/reading-progress.js @@ -0,0 +1,29 @@ +// Reading progress bar for single pages/articles +(function() { + const progressBar = document.getElementById('reading-progress'); + + if (!progressBar) return; + + function updateProgress() { + const windowHeight = window.innerHeight; + const documentHeight = document.documentElement.scrollHeight - windowHeight; + const scrollProgress = documentHeight > 0 ? (window.scrollY / documentHeight) * 100 : 0; + progressBar.style.width = scrollProgress + '%'; + } + + // Throttle the scroll event for better performance + let ticking = false; + + window.addEventListener('scroll', function() { + if (!ticking) { + window.requestAnimationFrame(function() { + updateProgress(); + ticking = false; + }); + ticking = true; + } + }, false); + + // Initial call + updateProgress(); +})(); diff --git a/themes/danix-xyz-hacker/layouts/_default/baseof.html b/themes/danix-xyz-hacker/layouts/_default/baseof.html index 2849562..7e8338a 100644 --- a/themes/danix-xyz-hacker/layouts/_default/baseof.html +++ b/themes/danix-xyz-hacker/layouts/_default/baseof.html @@ -28,6 +28,14 @@ <link rel="stylesheet" href="{{ $chroma.RelPermalink }}"> </head> <body class="bg-bg text-text antialiased"> + <!-- Reading progress bar (only on single pages/articles) --> + {{ if eq .Kind "page" }} + <div + id="reading-progress" + class="fixed top-0 left-0 h-1 transition-all duration-100" + style="width: 0%; background: linear-gradient(to right, var(--accent), var(--accent2)); z-index: 9999;" + ></div> + {{ end }} <!-- Skip to main content link --> <a href="#main" class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-accent focus:text-white focus:rounded"> {{ i18n "skipToContent" }} @@ -79,5 +87,11 @@ <!-- Contact form script --> {{ $contactScript := resources.Get "js/contact-form.js" | minify }} <script src="{{ $contactScript.RelPermalink }}"></script> + + <!-- Reading progress bar script (on single pages/articles) --> + {{ if eq .Kind "page" }} + {{ $progressScript := resources.Get "js/reading-progress.js" | minify }} + <script src="{{ $progressScript.RelPermalink }}"></script> + {{ end }} </body> </html> diff --git a/themes/danix-xyz-hacker/layouts/_default/single.html b/themes/danix-xyz-hacker/layouts/_default/single.html index 60cf03d..16d519f 100644 --- a/themes/danix-xyz-hacker/layouts/_default/single.html +++ b/themes/danix-xyz-hacker/layouts/_default/single.html @@ -1,6 +1,6 @@ {{ define "main" }} <article class="mx-auto px-4 py-12"> - <div class="grid md:grid-cols-3 gap-8"> + <div class="grid md:grid-cols-3 gap-8 max-w-7xl mx-auto"> <!-- Article section --> <div class="md:col-span-2"> <!-- Article header --> diff --git a/themes/danix-xyz-hacker/layouts/articles/single.html b/themes/danix-xyz-hacker/layouts/articles/single.html index c5d51e7..93abdb6 100644 --- a/themes/danix-xyz-hacker/layouts/articles/single.html +++ b/themes/danix-xyz-hacker/layouts/articles/single.html @@ -2,7 +2,7 @@ {{ $articleType := .Params.type | default "life" }} {{ $template := printf "article-types/%s.html" $articleType }} <article class="mx-auto px-4 py-12"> - <div class="grid md:grid-cols-3 gap-8"> + <div class="grid md:grid-cols-3 gap-8 max-w-7xl mx-auto"> <!-- Article section --> <div class="md:col-span-2"> <!-- Article header --> diff --git a/themes/danix-xyz-hacker/layouts/partials/article-header.html b/themes/danix-xyz-hacker/layouts/partials/article-header.html index b759909..a52f643 100644 --- a/themes/danix-xyz-hacker/layouts/partials/article-header.html +++ b/themes/danix-xyz-hacker/layouts/partials/article-header.html @@ -3,19 +3,28 @@ {{ $typeData := index $typeConfig $articleType }} <div class="mb-8 pb-8 border-b border-border"> - <!-- Type badge --> - {{ if $typeData }} - <span - class="inline-flex items-center px-3 py-1 rounded text-sm font-semibold mb-4 transition-colors type-{{ $articleType }}" - > - {{ i18n $articleType }} - </span> - {{ end }} + <!-- Title with accent corner --> + <div class="relative mb-6"> + <!-- Vertical accent line (left side) --> + {{ if $typeData }} + <div + class="absolute left-0 top-0 bottom-0 w-1 rounded-full" + style="background-color: var(--type-{{ $articleType }});" + ></div> + {{ end }} + + <!-- Horizontal accent line (bottom, 50% width with fade) --> + {{ if $typeData }} + <div + class="absolute left-0 bottom-0 h-1 rounded-full" + style="width: 50%; background: linear-gradient(to right, var(--type-{{ $articleType }}), var(--type-{{ $articleType }}) 0%, transparent 100%);" + ></div> + {{ end }} - <!-- Title --> - <h1 class="text-4xl md:text-5xl font-bold text-accent mb-4"> - {{ .Title }} - </h1> + <h1 class="text-4xl md:text-5xl font-bold text-accent pl-6 pt-2"> + {{ .Title }} + </h1> + </div> <!-- Metadata --> <div class="flex flex-wrap items-center gap-4 text-sm text-text-dim"> @@ -50,5 +59,15 @@ <span>{{ .ReadingTime }} {{ i18n "min" }} {{ i18n "readingTime" }}</span> </div> {{ end }} + + <!-- Type badge --> + {{ if $typeData }} + <span + class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-semibold text-white transition-colors" + style="background-color: var(--type-{{ $articleType }});" + > + {{ i18n $articleType }} + </span> + {{ end }} </div> </div> diff --git a/themes/danix-xyz-hacker/layouts/partials/article-list-item.html b/themes/danix-xyz-hacker/layouts/partials/article-list-item.html index e491125..70d530c 100644 --- a/themes/danix-xyz-hacker/layouts/partials/article-list-item.html +++ b/themes/danix-xyz-hacker/layouts/partials/article-list-item.html @@ -16,13 +16,22 @@ <article class="border border-border/30 rounded-lg overflow-hidden hover:border-accent/50 transition-all duration-200 group"> <!-- Thumbnail --> {{ if $imageURL }} - <a href="{{ .RelPermalink }}" class="block overflow-hidden bg-surface/50" tabindex="-1"> + <a href="{{ .RelPermalink }}" class="block overflow-hidden bg-surface/50 relative" tabindex="-1"> <img src="{{ $imageURL }}" alt="{{ .Title }}" class="w-full aspect-video object-cover group-hover:scale-105 transition-transform duration-200" loading="lazy" /> + <!-- Type badge pill overlay --> + {{ if $typeData }} + <div + class="absolute top-3 right-3 px-3 py-1.5 rounded-full text-xs font-semibold text-white transition-opacity" + style="background-color: var(--type-{{ $articleType }});" + > + {{ i18n $articleType }} + </div> + {{ end }} </a> {{ end }} @@ -48,15 +57,6 @@ <time datetime="{{ .PublishDate.Format "2006-01-02T15:04:05Z07:00" }}"> {{ .PublishDate.Format "Jan 2, 2006" }} </time> - - <!-- Type badge --> - {{ if $typeData }} - <span - class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium transition-colors type-{{ $articleType }}" - > - {{ i18n $articleType }} - </span> - {{ end }} </div> <!-- Excerpt --> |