mirror of
https://github.com/nunocoracao/blowfish.git
synced 2025-01-22 14:35:43 -06:00
final version for testing
This commit is contained in:
Nuno Coração
parent
f970b2b6d9
commit
d8e641dc8d
14 changed files with 227 additions and 109 deletions
|
|
@ -33,7 +33,8 @@ Blowfish is designed to be a powerful, lightweight theme for [Hugo](https://gohu
|
|||
- Support for multiple authors
|
||||
- Support for series of articles
|
||||
- Flexible with any content types, taxonomies and menus
|
||||
- Support for header, footer, and nested menus
|
||||
- Support for header and footer menus
|
||||
- Additional support for nested menus
|
||||
- Multilingual content support inlcuding support for RTL languages
|
||||
- Ability to link to posts on third-party websites
|
||||
- Buymeacoffee integration
|
||||
|
|
|
|||
|
|
@ -1657,6 +1657,10 @@ select {
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -1691,6 +1695,12 @@ select {
|
|||
margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-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));
|
||||
}
|
||||
|
||||
.place-self-center {
|
||||
place-self: center;
|
||||
}
|
||||
|
|
@ -1893,6 +1903,10 @@ select {
|
|||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.p-5 {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.p-0 {
|
||||
padding: 0px;
|
||||
}
|
||||
|
|
@ -2009,6 +2023,10 @@ select {
|
|||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.pt-2 {
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.pt-16 {
|
||||
padding-top: 4rem;
|
||||
}
|
||||
|
|
@ -2236,6 +2254,16 @@ select {
|
|||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.ring-1 {
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
}
|
||||
|
||||
.ring-opacity-5 {
|
||||
--tw-ring-opacity: 0.05;
|
||||
}
|
||||
|
||||
.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);
|
||||
|
|
@ -3013,6 +3041,25 @@ body:has(#menu-controller:checked) {
|
|||
z-index: 100;
|
||||
}
|
||||
|
||||
.nested-menu:hover + .menuhide {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: visibility 0.3s, opacity 0.3s ease-in-out ;
|
||||
}
|
||||
|
||||
.menuhide:hover {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: visibility 0.3s, opacity 0.3s ease-in-out ;
|
||||
}
|
||||
|
||||
.menuhide {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: visibility 0.3s, opacity 0.3s ease-in-out ;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.first\:mt-8:first-child {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
|
@ -3493,20 +3540,11 @@ body:has(#menu-controller:checked) {
|
|||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.sm\:py-10 {
|
||||
padding-top: 2.5rem;
|
||||
padding-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.sm\:py-24 {
|
||||
padding-top: 6rem;
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
|
||||
.sm\:pt-10 {
|
||||
padding-top: 2.5rem;
|
||||
}
|
||||
|
||||
.sm\:pl-6 {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -420,5 +420,24 @@ body:has(#menu-controller:checked) {
|
|||
}
|
||||
|
||||
.medium-zoom-image--opened {
|
||||
z-index: 100;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nested-menu:hover + .menuhide {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: visibility 0.3s, opacity 0.3s ease-in-out ;
|
||||
}
|
||||
|
||||
.menuhide:hover {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: visibility 0.3s, opacity 0.3s ease-in-out ;
|
||||
}
|
||||
|
||||
.menuhide {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: visibility 0.3s, opacity 0.3s ease-in-out ;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
function header_toggle_nested_menu(element) {
|
||||
if (!element) {
|
||||
throw new Error("Could not find button")
|
||||
}
|
||||
let parent_element = element.parentElement;
|
||||
if(!parent_element) {
|
||||
throw new Error("Could not get parent element from button")
|
||||
}
|
||||
let nested_menu = parent_element.querySelector(".header-nested-menu")
|
||||
nested_menu.classList.toggle('hidden');
|
||||
}
|
||||
|
|
@ -15,6 +15,22 @@
|
|||
# pageRef = "posts"
|
||||
# weight = 10
|
||||
|
||||
#[[main]]
|
||||
# name = "Parent"
|
||||
# weight = 20
|
||||
|
||||
#[[main]]
|
||||
# name = "example sub-menu 1"
|
||||
# parent = "Parent"
|
||||
# pageRef = "posts"
|
||||
# weight = 20
|
||||
|
||||
#[[main]]
|
||||
# name = "example sub-menu 2"
|
||||
# parent = "Parent"
|
||||
# pageRef = "posts"
|
||||
# weight = 20
|
||||
|
||||
#[[main]]
|
||||
# name = "Categories"
|
||||
# pageRef = "categories"
|
||||
|
|
|
|||
|
|
@ -16,25 +16,26 @@
|
|||
weight = 10
|
||||
|
||||
[[main]]
|
||||
name = "Parent"
|
||||
name = "Nested Menu"
|
||||
pageRef = "samples"
|
||||
weight = 20
|
||||
|
||||
[[main]]
|
||||
name = "test1"
|
||||
parent = "Parent"
|
||||
name = "sub-menu 1"
|
||||
parent = "Nested Menu"
|
||||
pageRef = "samples"
|
||||
weight = 20
|
||||
|
||||
[[main]]
|
||||
name = "test2"
|
||||
parent = "Parent"
|
||||
name = "sub-menu 2"
|
||||
parent = "Nested Menu"
|
||||
pageRef = "samples"
|
||||
weight = 20
|
||||
|
||||
[[main]]
|
||||
name = "test3"
|
||||
parent = "Parent"
|
||||
name = "sub-menu 3"
|
||||
parent = "Nested Menu"
|
||||
pre = "github"
|
||||
pageRef = "samples"
|
||||
weight = 20
|
||||
|
||||
|
|
|
|||
|
|
@ -197,36 +197,33 @@ Both menus are completely optional and can be commented out if not required. Use
|
|||
|
||||
### Nested Menus
|
||||
|
||||
bla bla bla
|
||||
The theme also supports nested menus. In order to use them you just need to define a parent entry in `menu.toml` and its sub-menus using the `parent` parameter to reference the parent. All properties can be used for sub-menus. Note that `pageRef` and `url` will be ignored for the parent entry. Nested menus is only available in the main menu not for the footer.
|
||||
|
||||
```toml
|
||||
# config/_default/menus.toml
|
||||
|
||||
[[main]]
|
||||
name = "Blog"
|
||||
pageRef = "posts"
|
||||
weight = 10
|
||||
|
||||
[[main]]
|
||||
name = "Topics"
|
||||
pageRef = "topics"
|
||||
name = "Parent"
|
||||
weight = 20
|
||||
|
||||
[[main]]
|
||||
pre = "github"
|
||||
name = "GitHub"
|
||||
url = "https://github.com/nunocoracao/blowfish"
|
||||
weight = 30
|
||||
name = "sub-menu 1"
|
||||
parent = "Parent"
|
||||
pageRef = "samples"
|
||||
weight = 20
|
||||
|
||||
[[main]]
|
||||
identifier = "github2"
|
||||
pre = "github"
|
||||
url = "https://github.com/nunocoracao/blowfish"
|
||||
weight = 40
|
||||
name = "sub-menu 2"
|
||||
parent = "Parent"
|
||||
pageRef = "samples"
|
||||
weight = 20
|
||||
|
||||
[[footer]]
|
||||
name = "Privacy"
|
||||
url = "https://external-link"
|
||||
[[main]]
|
||||
name = "sub-menu 3"
|
||||
parent = "Parent"
|
||||
pre = "github"
|
||||
pageRef = "samples"
|
||||
weight = 20
|
||||
```
|
||||
|
||||
## Thumbnails & Backgrounds
|
||||
|
|
|
|||
|
|
@ -86,11 +86,6 @@
|
|||
<link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon-16x16.png" | relURL }}" />
|
||||
<link rel="manifest" href="{{ "site.webmanifest" | relURL }}" />
|
||||
{{ end }}
|
||||
{{/* Header */}}
|
||||
{{ $headerLib := resources.Get "js/header.js" }}
|
||||
{{ $headerLib := $headerLib | resources.Minify }}
|
||||
{{ $headerJS := $headerLib | resources.Fingerprint "sha512" }}
|
||||
<script defer type="text/javascript" src="{{ $headerJS.RelPermalink }}" integrity="{{ $headerJS.Data.Integrity }}"></script>
|
||||
{{/* Site Verification */}}
|
||||
{{ with .Site.Params.verification.google }}
|
||||
<meta name="google-site-verification" content="{{ . }}" />
|
||||
|
|
|
|||
|
|
@ -17,30 +17,30 @@
|
|||
<div class="flex flex-1 items-center justify-between">
|
||||
<nav class="site-header-title flex space-x-3">
|
||||
|
||||
<a href="{{ "" | relLangURL }}" class="text-base font-medium text-gray-500 hover:text-gray-900">{{ .Site.Title | markdownify
|
||||
<a href="{{ "" | relLangURL }}" class="text-base font-medium text-gray-500 hover:text-gray-900">{{
|
||||
.Site.Title | markdownify
|
||||
| emojify }}</a>
|
||||
|
||||
|
||||
|
||||
|
||||
</nav>
|
||||
<nav class="site-header-menu-main hidden md:flex items-center space-x-5 md:ml-12">
|
||||
|
||||
{{ if .Site.Menus.main }}
|
||||
{{ range .Site.Menus.main }}
|
||||
|
||||
{{ partial "header/header-option.html" . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ partial "translations.html" . }}
|
||||
|
||||
{{ if .Site.Params.enableSearch | default false }}
|
||||
<button id="search-button" class="text-base hover:text-primary-600 dark:hover:text-primary-400"
|
||||
title="{{ i18n "search.open_button_title" }}">
|
||||
title="{{ i18n " search.open_button_title" }}">
|
||||
{{ partial "icon.html" "search" }}
|
||||
</button>
|
||||
{{ end }}
|
||||
|
||||
|
||||
|
||||
{{/* Appearance switch */}}
|
||||
{{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
|
||||
<div
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
</div>
|
||||
{{ end }}
|
||||
|
||||
</nav>
|
||||
</nav>
|
||||
<div class="flex md:hidden items-center space-x-5 md:ml-12">
|
||||
|
||||
<span></span>
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
|
||||
{{ if .Site.Params.enableSearch | default false }}
|
||||
<button id="search-button-mobile" class="text-base hover:text-primary-600 dark:hover:text-primary-400"
|
||||
title="{{ i18n "search.open_button_title" }}">
|
||||
title="{{ i18n " search.open_button_title" }}">
|
||||
{{ partial "icon.html" "search" }}
|
||||
</button>
|
||||
{{ end }}
|
||||
|
|
@ -94,38 +94,21 @@
|
|||
<div id="menu-wrapper" style="padding-top:5px;"
|
||||
class="fixed inset-0 z-30 invisible w-screen h-screen m-auto overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50">
|
||||
<ul
|
||||
class="flex movedown flex-col w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl sm:px-14 md:px-24 lg:px-32 sm:py-10 sm:pt-10">
|
||||
<li class="mb-1">
|
||||
<span class="cursor-pointer inline-block align-text-bottom hover:text-primary-600 dark:hover:text-primary-400">{{ partial
|
||||
class="flex movedown flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl">
|
||||
|
||||
<li>
|
||||
<span
|
||||
class="cursor-pointer inline-block align-text-bottom hover:text-primary-600 dark:hover:text-primary-400">{{
|
||||
partial
|
||||
"icon.html"
|
||||
"xmark" }}</span>
|
||||
</li>
|
||||
|
||||
{{ if .Site.Menus.main }}
|
||||
{{ range .Site.Menus.main }}
|
||||
<li class="mb-1">
|
||||
<a {{ if or (strings.HasPrefix .URL "http:") (strings.HasPrefix .URL "https:") }} target="_blank"{{ end }} class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
|
||||
href="{{ .URL }}" title="{{ .Title }}">
|
||||
<span class="inline-block align-text-bottom">{{ partial "icon.html" .Pre }}</span>
|
||||
{{ if and .Pre .Name }} {{ end }}
|
||||
{{ .Name | markdownify | emojify }}
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ partial "header/header-mobile-option.html" . }}
|
||||
|
||||
{{ if .Site.Menus.subnavigation }}
|
||||
<p>-</p>
|
||||
{{ range .Site.Menus.subnavigation }}
|
||||
<li class="mb-1">
|
||||
<a {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }} target="_blank" {{ end }}
|
||||
class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href="{{ .URL }}"
|
||||
title="{{ .Title }}">
|
||||
<span class="inline-block align-text-bottom">{{ partial "icon.html" .Pre }}</span>
|
||||
{{ if and .Pre .Name }} {{ end }}
|
||||
{{ .Name | markdownify | emojify }}
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
|
|
@ -133,16 +116,4 @@
|
|||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ if .Site.Menus.subnavigation }}
|
||||
<div class="site-header-menu-subnavigation flex items-center justify-between md:justify-start space-x-3">
|
||||
<div class="flex flex-1 items-center justify-between">
|
||||
<div class="hidden md:flex items-center space-x-5">
|
||||
{{ range .Site.Menus.subnavigation }}
|
||||
{{ partial "header/header-option.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
30
layouts/partials/header/header-mobile-option-nested.html
Normal file
30
layouts/partials/header/header-mobile-option-nested.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<li class="mt-3">
|
||||
<a class="flex items-center">
|
||||
{{ if .Pre }}
|
||||
<span {{ if and .Pre .Name}} style="margin-right:3px;" {{ end }}>
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<p class="text-xl font-xl text-gray-500 hover:text-gray-900" title="{{ .Title }}">
|
||||
{{ .Name | markdownify | emojify }}
|
||||
</p>
|
||||
<span>
|
||||
{{ partial "icon.html" "chevron-down" }}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{{ range .Children }}
|
||||
<li class="mt-2">
|
||||
<a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:"
|
||||
) }} target="_blank" {{ end }} class="flex items-center">
|
||||
{{ if .Pre }}
|
||||
<span {{ if and .Pre .Name}} style="margin-right:3px;" {{ end }}>
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<p class="text-sm font-small text-gray-500 hover:text-gray-900" title="{{ .Title }}">
|
||||
{{ .Name | markdownify | emojify }}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
13
layouts/partials/header/header-mobile-option-simple.html
Normal file
13
layouts/partials/header/header-mobile-option-simple.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<li class="mt-3">
|
||||
<a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:"
|
||||
) }} target="_blank" {{ end }} class="flex items-center">
|
||||
{{ if .Pre }}
|
||||
<span {{ if and .Pre .Name}} style="margin-right:3px;" {{ end }}>
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<p class="text-xl font-xl text-gray-500 hover:text-gray-900" title="{{ .Title }}">
|
||||
{{ .Name | markdownify | emojify }}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
5
layouts/partials/header/header-mobile-option.html
Normal file
5
layouts/partials/header/header-mobile-option.html
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{{ if .HasChildren }}
|
||||
{{ partial "header/header-mobile-option-nested.html" . }}
|
||||
{{ else }}
|
||||
{{ partial "header/header-mobile-option-simple.html" . }}
|
||||
{{ end }}
|
||||
|
|
@ -1,8 +1,45 @@
|
|||
<div class="relative">
|
||||
<div>
|
||||
<div class="cursor-pointer flex items-center nested-menu">
|
||||
{{ if .Pre }}
|
||||
<span {{ if and .Pre .Name}} style="margin-right:3px;" {{ end }}>
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<a class="text-base font-medium text-gray-500 hover:text-gray-900" title="{{ .Title }}">
|
||||
{{ .Name | markdownify | emojify }}
|
||||
</a>
|
||||
<span>
|
||||
{{ partial "icon.html" "chevron-down" }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="absolute menuhide">
|
||||
<div class="pt-2 p-5 mt-2 rounded-xl backdrop-blur shadow-2xl">
|
||||
<div class="flex flex-col space-y-3">
|
||||
{{ range .Children }}
|
||||
<a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
|
||||
target="_blank" {{ end }} class="flex items-center">
|
||||
{{ if .Pre }}
|
||||
<span {{ if and .Pre .Name}} style="margin-right:3px;" {{ end }}>
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<p class="text-sm font-sm text-gray-500 hover:text-gray-900" title="{{ .Title }}">
|
||||
{{ .Name | markdownify | emojify }}
|
||||
</p>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!--div class="relative">
|
||||
<button
|
||||
type="button"
|
||||
class="header-toggle-nested-menu-button text-base hover:text-primary-600 dark:hover:text-primary-400"
|
||||
aria-expanded="false"
|
||||
aria-expanded="true"
|
||||
onclick="header_toggle_nested_menu(this)"
|
||||
>
|
||||
<div class="hidden md:flex items-center">
|
||||
|
|
@ -29,4 +66,4 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div-->
|
||||
|
|
@ -1,5 +1,11 @@
|
|||
<a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:") (strings.HasPrefix .URL "https:") }} target="_blank"{{ end }} class="text-base font-medium text-gray-500 hover:text-gray-900" title="{{ .Title }}">
|
||||
{{ partial "icon.html" .Pre }}
|
||||
{{ if and .Pre .Name }} {{ end }}
|
||||
{{ .Name | markdownify | emojify }}
|
||||
</a>
|
||||
<a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }} target="_blank" {{
|
||||
end }} class="flex items-center">
|
||||
{{ if .Pre }}
|
||||
<span {{ if and .Pre .Name}} style="margin-right:3px;" {{ end }}>
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<p class="text-base font-medium text-gray-500 hover:text-gray-900" title="{{ .Title }}">
|
||||
{{ .Name | markdownify | emojify }}
|
||||
</p>
|
||||
</a>
|
||||
Loading…
Reference in a new issue