marcel
/
congo
mirror of https://github.com/jpanther/congo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

✨ Add scroll to top link

pull/100/head
James Panther 2022-01-18 17:26:46 +11:00
parent acc4aee752
commit b99b6a8750
No known key found for this signature in database
GPG Key ID: D36F789E45745D17
12 changed files with 128 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -16,7 +16,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
- Tables of Contents on article pages
- Taxonomies on article and list pages
- Author `headline` parameter
- Skip to content links
- Skip to content and Scroll to top links
### Changed

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

@ -1413,6 +1413,14 @@ body a, body button {
text-decoration-line: underline;
}
.pointer-events-none {
pointer-events: none;
}
.pointer-events-auto {
pointer-events: auto;
}
.invisible {
visibility: hidden;
}
@ -1429,6 +1437,11 @@ body a, body button {
position: relative;
}
.sticky {
position: -webkit-sticky;
position: sticky;
}
.inset-0 {
top: 0px;
right: 0px;
@ -1436,6 +1449,26 @@ body a, body button {
left: 0px;
}
.top-\[100vh\] {
top: 100vh;
}
.right-0 {
right: 0px;
}
.bottom-16 {
bottom: 4rem;
}
.-bottom-4 {
bottom: -1rem;
}
.top-\[calc\(100vh-5rem\)\] {
top: calc(100vh - 5rem);
}
.top-20 {
top: 5rem;
}
@ -1602,6 +1635,10 @@ body a, body button {
height: 100vh;
}
.h-12 {
height: 3rem;
}
.h-24 {
height: 6rem;
}
@ -1610,10 +1647,6 @@ body a, body button {
height: 2rem;
}
.h-12 {
height: 3rem;
}
.h-full {
height: 100%;
}
@ -1630,6 +1663,10 @@ body a, body button {
min-height: 0px;
}
.w-12 {
width: 3rem;
}
.w-36 {
width: 9rem;
}
@ -1765,14 +1802,14 @@ body a, body button {
scroll-behavior: smooth;
}
.rounded-md {
border-radius: 0.375rem;
}
.rounded-full {
border-radius: 9999px;
}
.rounded-md {
border-radius: 0.375rem;
}
.rounded {
border-radius: 0.25rem;
}
@ -1837,6 +1874,10 @@ body a, body button {
background-color: rgba(var(--color-primary-200), var(--tw-bg-opacity));
}
.bg-neutral\/50 {
background-color: rgba(var(--color-neutral), 0.5);
}
.bg-neutral-500\/50 {
background-color: rgba(var(--color-neutral-500), 0.5);
}
@ -1928,16 +1969,16 @@ body a, body button {
padding-bottom: 2.5rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
@ -1995,6 +2036,11 @@ body a, body button {
line-height: 1.25rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
@ -2005,11 +2051,6 @@ body a, body button {
line-height: 1.5rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
@ -2074,16 +2115,16 @@ body a, body button {
color: rgba(var(--color-primary-600), var(--tw-text-opacity));
}
.text-neutral-700 {
--tw-text-opacity: 1;
color: rgba(var(--color-neutral-700), var(--tw-text-opacity));
}
.text-neutral-500 {
--tw-text-opacity: 1;
color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
}
.text-neutral-700 {
--tw-text-opacity: 1;
color: rgba(var(--color-neutral-700), var(--tw-text-opacity));
}
.text-primary-500 {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-500), var(--tw-text-opacity));
@ -2134,6 +2175,12 @@ body a, body button {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.backdrop-blur {
--tw-backdrop-blur: blur(8px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm {
--tw-backdrop-blur: blur(4px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@ -2185,16 +2232,16 @@ body a, body button {
background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity)) !important;
}
.hover\:text-primary-700:hover {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-700), var(--tw-text-opacity));
}
.hover\:text-primary-500:hover {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-500), var(--tw-text-opacity));
}
.hover\:text-primary-700:hover {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-700), var(--tw-text-opacity));
}
.hover\:text-primary-400:hover {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-400), var(--tw-text-opacity));

1
config/_default/params.toml
View File

@ -13,6 +13,7 @@ enableSearch = false
# description = "My awesome website"
# mainSections = ["section1", "section2"]
# robots = ""
showScrollToTop = true
[homepage]
layout = "page" # valid options: page, profile, custom

1
exampleSite/config/_default/params.toml
View File

@ -13,6 +13,7 @@ enableSearch = true
# description = "My awesome website"
mainSections = ["samples"]
# robots = ""
showScrollToTop = true
[homepage]
layout = "custom" # valid options: page, profile, custom

7
i18n/de.yaml
View File

@ -24,13 +24,14 @@ footer:
light_appearance: "Zum hellen Erscheinungsbild wechseln"
powered_by: "Erstellt mit {{ .Hugo }} & {{ .Congo }}"
# header:
# skip_to_main: "Skip to main content"
list:
externalurl_title: "Link zu einer externen Seite"
no_articles: "Es gibt hier noch keine Beiträge."
# nav:
# scroll_to_top_title: "Scroll to top"
# skip_to_main: "Skip to main content"
# search:
# open_button_title: "Search (/)"
# close_button_title: "Close (Esc)"

7
i18n/en.yaml
View File

@ -24,13 +24,14 @@ footer:
light_appearance: "Switch to light appearance"
powered_by: "Powered by {{ .Hugo }} & {{ .Congo }}"
header:
skip_to_main: "Skip to main content"
list:
externalurl_title: "Link to external site"
no_articles: "There's no articles to list here yet."
nav:
scroll_to_top_title: "Scroll to top"
skip_to_main: "Skip to main content"
search:
open_button_title: "Search (/)"
close_button_title: "Close (Esc)"

7
i18n/es.yaml
View File

@ -24,13 +24,14 @@ footer:
light_appearance: "Cambiar a modo claro"
powered_by: "Desarrollada con {{ .Hugo }} & {{ .Congo }}"
# header:
# skip_to_main: "Skip to main content"
list:
externalurl_title: "Link a página externa"
no_articles: "Aún no hay artículos para listar aquí."
# nav:
# scroll_to_top_title: "Scroll to top"
# skip_to_main: "Skip to main content"
# search:
# open_button_title: "Search (/)"
# close_button_title: "Close (Esc)"

7
i18n/fr.yaml
View File

@ -24,13 +24,14 @@ footer:
# light_appearance: "Switch to light appearance"
powered_by: "Propulsé par {{ .Hugo }} & {{ .Congo }}"
# header:
# skip_to_main: "Skip to main content"
list:
externalurl_title: "Lien d'article externe."
no_articles: "Il n'y a pas encore d'articles ici."
# nav:
# scroll_to_top_title: "Scroll to top"
# skip_to_main: "Skip to main content"
# search:
# open_button_title: "Search (/)"
# close_button_title: "Close (Esc)"

7
i18n/pt-BR.yaml
View File

@ -24,13 +24,14 @@ footer:
light_appearance: "Mudar para modo claro"
powered_by: "Movido por {{ .Hugo }} & {{ .Congo }}"
# header:
# skip_to_main: "Skip to main content"
list:
externalurl_title: "Link para site externo"
no_articles: "Não tem artigos para lista aqui ainda."
# nav:
# scroll_to_top_title: "Scroll to top"
# skip_to_main: "Skip to main content"
# search:
# open_button_title: "Search (/)"
# close_button_title: "Close (Esc)"

7
i18n/zh.yaml
View File

@ -23,13 +23,14 @@ footer:
light_appearance: "切换为浅色模式"
powered_by: "由 {{ .Hugo }} & {{ .Congo }} 强力驱动"
# header:
# skip_to_main: "Skip to main content"
list:
externalurl_title: "链接到外部网站"
no_articles: "这里还没有任何文章可以列出。"
# nav:
# scroll_to_top_title: "Scroll to top"
# skip_to_main: "Skip to main content"
# search:
# open_button_title: "Search (/)"
# close_button_title: "Close (Esc)"

25
layouts/_default/baseof.html
View File

@ -14,17 +14,36 @@
<body
class="flex flex-col h-screen px-6 m-auto text-lg leading-7 bg-neutral text-neutral-900 sm:px-14 md:px-24 lg:px-32 dark:bg-neutral-800 dark:text-neutral max-w-7xl"
>
<div class="absolute flex self-center">
<div id="the-top" class="absolute flex self-center">
<a
class="px-3 py-1 text-sm -translate-y-8 rounded-b-lg bg-primary-200 dark:bg-neutral-600 focus:translate-y-0"
href="#main-content"
><span class="font-bold ltr:pr-2 rtl:pl-2 text-primary-600 dark:text-primary-400"
>&darr;</span
>{{ i18n "header.skip_to_main" }}</a
>{{ i18n "nav.skip_to_main" }}</a
>
</div>
{{- partial "header.html" . -}}
<main id="main-content" class="grow">{{- block "main" . }}{{- end }}</main>
<main id="main-content" class="relative grow">
{{- block "main" . }}{{- end }}
{{ if .Site.Params.showScrollToTop | default true }}
<div
class="absolute top-[100vh] right-0 w-12 pointer-events-none {{ if .Params.showPagination | default (.Site.Params.article.showPagination | default true) }}
bottom-16
{{ else }}
-bottom-4
{{ end }}"
>
<a
href="#the-top"
class="w-12 h-12 sticky pointer-events-auto top-[calc(100vh-5rem)] text-neutral-500 bg-neutral/50 backdrop-blur rounded-full text-xl flex items-center justify-center hover:text-primary-500"
aria-label="{{ i18n "nav.scroll_to_top_title" }}"
title="{{ i18n "nav.scroll_to_top_title" }}"
>&uarr;</a
>
</div>
{{ end }}
</main>
{{ if .Site.Params.enableSearch | default false }}
{{- partial "search.html" . -}}
{{ end }}

7
layouts/partials/footer.html
View File

@ -32,7 +32,8 @@
{{ if .Site.Params.attribution | default true }}
<p class="text-xs text-neutral-500 dark:text-neutral-400">
{{ $hugo := printf `<a class="hover:underline hover:decoration-primary-400 hover:text-primary-500"
href="https://gohugo.io/" target="_blank" rel="noopener noreferrer">Hugo</a>` }}
href="https://gohugo.io/" target="_blank" rel="noopener noreferrer">Hugo</a>`
}}
{{ $congo := printf `<a class="hover:underline hover:decoration-primary-400 hover:text-primary-500" href="https://git.io/hugo-congo" target="_blank" rel="noopener noreferrer">Congo</a>` }}
{{ i18n "footer.powered_by" (dict "Hugo" $hugo "Congo" $congo) | safeHTML }}
</p>
@ -43,14 +44,14 @@
<div class="text-sm cursor-pointer text-neutral-400 dark:text-neutral-500">
<button
id="dark-toggle"
class="inline px-2 py-1 border rounded-md border-neutral-200 dark:hidden hover:text-primary-500 hover:border-primary-400"
class="inline px-3 py-2 border rounded-md border-neutral-200 dark:hidden hover:text-primary-500 hover:border-primary-400"
title="{{ i18n "footer.dark_appearance" }}"
>
{{ partial "icon.html" "moon" }}
</button>
<button
id="light-toggle"
class="hidden px-2 py-1 border rounded-md cursor-pointer dark:inline border-neutral-700 hover:text-primary-400 hover:border-primary-500"
class="hidden px-3 py-2 border rounded-md cursor-pointer dark:inline border-neutral-700 hover:text-primary-400 hover:border-primary-500"
title="{{ i18n "footer.light_appearance" }}"
>
{{ partial "icon.html" "sun" }}