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

feat: add detail box and update styles

Browse Source 
chore: update 404 page style

chore: update icon

to use global site variable
This commit is contained in:
Xin 2023-08-02 23:14:55 +01:00
parent b6e0ab0872
commit b90c2e7737
12 changed files with 56 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
assets/css/typography.css
View File

@ -117,3 +117,15 @@ article.typesetting-article {
@apply no-underline hover:no-underline after:hidden;
}
}
article details > summary {
&::-webkit-details-marker {
@apply 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");
height: 1.2em;
width: 1.2em;
vertical-align: -4px;
}
}

2
content/docs/introduction.md
View File

@ -3,4 +3,4 @@ title: Introduction
weight: 1
---
Introduction to the project.
Hextra is a modern, responsive Hugo theme built with [Tailwind CSS](https://tailwindcss.com/).

2
data/icons.yaml
View File

@ -2,7 +2,7 @@
#
# Example usage in templates using the icon.html partial:
#
# {{ partial "utils/icon.html" (dict "context" . "name" "github" "attributes" "height=24") }}
# {{ partial "utils/icon.html" (dict "name" "github" "attributes" "height=24") }}
github: >
<svg fill="currentColor" viewBox="3 3 18 18">

44
layouts/404.html
View File

@ -1,29 +1,27 @@
{{ define "main" }}
<div 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>
<div 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 {
color: #000;
background: #fff;
margin: 0;
}
.next-error-h1 {
border-right: 1px solid rgba(0, 0, 0, 0.3);
}
@media (prefers-color-scheme: dark) {
body {
color: #000;
background: #fff;
margin: 0;
color: #fff;
background: #000;
}
.next-error-h1 {
border-right: 1px solid rgba(0, 0, 0, 0.3);
border-right: 1px solid rgba(255, 255, 255, 0.3);
}
@media (prefers-color-scheme: dark) {
body {
color: #fff;
background: #000;
}
.next-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>
<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>
</div>
}
</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>
<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>
</div>
</div>
{{ end }}
</div>

4
layouts/_default/_markup/render-codeblock.html
View File

@ -16,8 +16,8 @@
{{- end -}}
<div class="opacity-0 transition group-hover/code:opacity-100 flex gap-1 absolute m-[11px] right-0 {{ if $filename }}top-8{{ else }}top-0{{ end }}">
<button class="code-copy-btn group/copybtn transition-all active:opacity-50 bg-primary-700/5 border border-black/5 text-gray-600 hover:text-gray-900 rounded-md p-1.5 dark:bg-primary-300/10 dark:border-white/10 dark:text-gray-400 dark:hover:text-gray-50" title="Copy code" data-clipboard-target="#code-block-{{ .Ordinal }}">
{{ partial "utils/icon.html" (dict "context" page "name" "copy" "attributes" "class=\"group-[.copied]/copybtn:hidden pointer-events-none h-4 w-4\"") }}
{{ partial "utils/icon.html" (dict "context" page "name" "check" "attributes" "class=\"hidden group-[.copied]/copybtn:block success-icon pointer-events-none h-4 w-4\"") }}
{{ partial "utils/icon.html" (dict "name" "copy" "attributes" "class=\"group-[.copied]/copybtn:hidden pointer-events-none h-4 w-4\"") }}
{{ partial "utils/icon.html" (dict "name" "check" "attributes" "class=\"hidden group-[.copied]/copybtn:block success-icon pointer-events-none h-4 w-4\"") }}
</button>
</div>
</div>

2
layouts/partials/breadcrumb.html
View File

@ -4,7 +4,7 @@
<div class="whitespace-nowrap transition-colors min-w-[24px] overflow-hidden text-ellipsis">
<a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
</div>
{{ partial "utils/icon.html" (dict "context" . "name" "chevron-right" "attributes" "class=\"w-3.5 shrink-0\"") }}
{{ partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"w-3.5 shrink-0\"") }}
{{ end }}
{{ end }}
<div class="whitespace-nowrap transition-colors font-medium text-gray-700 contrast-more:font-bold contrast-more:text-current dark:text-gray-100 contrast-more:dark:text-current">

2
layouts/partials/footer.html
View File

@ -5,7 +5,7 @@
<div>
<a class="flex items-center gap-1 text-current" target="_blank" rel="noopener noreferrer" title="Hugo homepage" href="https://gohugo.io/">
<span>Powered by</span>
{{ partial "utils/icon.html" (dict "context" . "name" "hugo-full" "attributes" "height=20") }}
{{ partial "utils/icon.html" (dict "name" "hugo-full" "attributes" "height=20") }}
</a>
</div>
<p class="mt-6 text-xs">© 2023 Hextra Project.</p>

4
layouts/partials/pager.html
View File

@ -6,14 +6,14 @@
<div class="mb-8 flex items-center border-t pt-8 dark:border-neutral-800 contrast-more:border-neutral-400 dark:contrast-more:border-neutral-400 print:hidden">
{{- if $prev -}}
<a href="{{ $prev.RelPermalink }}" class="flex max-w-[50%] items-center gap-1 py-4 text-base font-medium text-gray-600 transition-colors [word-break:break-word] hover:text-primary-600 dark:text-gray-300 md:text-lg ltr:pr-4 rtl:pl-4">
{{- partial "utils/icon.html" (dict "context" . "name" "chevron-right" "attributes" "class=\"inline h-5 shrink-0 ltr:rotate-180\"") -}}
{{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"inline h-5 shrink-0 ltr:rotate-180\"") -}}
{{- $prev.Title -}}
</a>
{{- end -}}
{{- if $next -}}
<a href="{{ $next.RelPermalink }}" class="flex max-w-[50%] items-center gap-1 py-4 text-base font-medium text-gray-600 transition-colors [word-break:break-word] hover:text-primary-600 dark:text-gray-300 md:text-lg ltr:ml-auto ltr:pl-4 ltr:text-right rtl:mr-auto rtl:pr-4 rtl:text-left">
{{- $next.LinkTitle -}}
{{- partial "utils/icon.html" (dict "context" . "name" "chevron-right" "attributes" "class=\"inline h-5 shrink-0\"") -}}
{{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"inline h-5 shrink-0\"") -}}
</a>
{{- end -}}
</div>

4
layouts/partials/sidebar.html
View File

@ -55,11 +55,11 @@
<div class="grow flex flex-col">
<button title="Change theme" class="h-7 rounded-md px-2 text-left text-xs font-medium text-gray-600 transition-colors dark:text-gray-400 hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-primary-100/5 dark:hover:text-gray-50" id="theme-toggle" type="button" aria-label="Toggle Dark Mode">
<div id="theme-toggle-light-icon" class="hidden flex items-center gap-2 capitalize">
{{- partial "utils/icon.html" (dict "context" . "name" "sun" "attributes" "height=12") -}}
{{- partial "utils/icon.html" (dict "name" "sun" "attributes" "height=12") -}}
<span>Light</span>
</div>
<div id="theme-toggle-dark-icon" class="hidden flex items-center gap-2 capitalize">
{{- partial "utils/icon.html" (dict "context" . "name" "moon" "attributes" "height=12") -}}
{{- partial "utils/icon.html" (dict "name" "moon" "attributes" "height=12") -}}
<span>Dark</span>
</div>
</button>

2
layouts/partials/utils/icon.html
View File

@ -1,4 +1,4 @@
{{- $icon := index .context.Site.Data.icons .name -}}
{{- $icon := index site.Data.icons .name -}}
{{- if not $icon -}}
{{ errorf "icon %q not found" .name }}

2
layouts/shortcodes/card.html
View File

@ -10,7 +10,7 @@
>
<span class="flex font-semibold items-start gap-2 p-4 text-gray-700 hover:text-gray-900 dark:text-neutral-200 dark:hover:text-neutral-50">
{{ with $icon }}
{{ partial "utils/icon.html" (dict "context" $context "name" $icon) }}
{{ partial "utils/icon.html" (dict "name" $icon) }}
{{ end }}
{{ $title }}
</span>

11
layouts/shortcodes/details.html Normal file
View File

@ -0,0 +1,11 @@
{{- $title := .Get "title" | default "" -}}
{{- $closed := eq (.Get "closed") "true" | default false -}}
<details class="last-of-type:mb-0 rounded-lg bg-neutral-50 dark:bg-neutral-800 p-2 mt-4" data-expanded="true" {{ if not $closed }}open{{ end }}>
<summary class="flex items-center cursor-pointer select-none list-none p-1 transition-colors hover:bg-gray-100 dark:hover:bg-neutral-800 before:mr-1 before:inline-block before:transition-transform before:content-[''] dark:before:invert rtl:before:rotate-180 [[data-expanded]>&]:before:rotate-90">
<strong class="text-lg">{{ $title | markdownify }}</strong>
</summary>
<div class="p-2 overflow-hidden">
{{ .InnerDeindent | markdownify }}
</div>
</details>