diff options
Diffstat (limited to 'themes/danix-xyz-hacker/layouts')
5 files changed, 57 insertions, 24 deletions
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 --> |