michael/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2025-01-22 14:35:43 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Merge pull request #124 from nunocoracao/122-add-a-new-landing-page-design

Browse source 
add new home layout
This commit is contained in:
Nuno Coração 2022-10-16 17:25:59 +01:00 committed by GitHub
commit dffaab83fd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 107 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
assets/css/compiled/main.css
View file

@ -1582,14 +1582,14 @@ select {
margin-right: -0.5rem;
}
.-mr-48 {
margin-right: -12rem;
}
.mb-0 {
margin-bottom: 0px;
}
.-mr-48 {
margin-right: -12rem;
}
.mb-\[2px\] {
margin-bottom: 2px;
}
@ -1642,14 +1642,14 @@ select {
height: 9rem;
}
.h-48 {
height: 12rem;
}
.h-1\/2 {
height: 50%;
}
.h-48 {
height: 12rem;
}
.max-h-\[5rem\] {
max-height: 5rem;
}
@ -1969,6 +1969,12 @@ select {
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-neutral-100 {
--tw-gradient-from: rgba(var(--color-neutral-100), 1);
--tw-gradient-to: rgba(var(--color-neutral-100), 0);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary-500 {
--tw-gradient-from: rgba(var(--color-primary-500), 1);
--tw-gradient-to: rgba(var(--color-primary-500), 0);
@ -2257,6 +2263,11 @@ select {
color: rgba(var(--color-neutral), var(--tw-text-opacity)) !important;
}
.text-primary-300 {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-300), var(--tw-text-opacity));
}
.text-neutral-200 {
--tw-text-opacity: 1;
color: rgba(var(--color-neutral-200), var(--tw-text-opacity));
@ -2267,11 +2278,6 @@ select {
color: rgba(var(--color-neutral-300), var(--tw-text-opacity));
}
.text-primary-300 {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-300), var(--tw-text-opacity));
}
.\!no-underline {
-webkit-text-decoration-line: none !important;
text-decoration-line: none !important;
@ -3398,6 +3404,10 @@ body:has(#menu-controller:checked) {
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark .dark\:to-neutral-300 {
--tw-gradient-to: rgba(var(--color-neutral-300), 1);
}
.dark .dark\:to-secondary-800 {
--tw-gradient-to: rgba(var(--color-secondary-800), 1);
}
@ -3437,6 +3447,15 @@ body:has(#menu-controller:checked) {
color: rgba(var(--color-neutral-100), var(--tw-text-opacity));
}
.dark .dark\:text-neutral-200 {
--tw-text-opacity: 1;
color: rgba(var(--color-neutral-200), var(--tw-text-opacity));
}
.dark .dark\:mix-blend-multiply {
mix-blend-mode: multiply;
}
.dark .dark\:hover\:bg-primary-900:hover {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-primary-900), var(--tw-bg-opacity));
@ -3718,6 +3737,11 @@ body:has(#menu-controller:checked) {
padding-right: 8rem;
}
.lg\:py-32 {
padding-top: 8rem;
padding-bottom: 8rem;
}
.lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
@ -3733,11 +3757,6 @@ body:has(#menu-controller:checked) {
padding-right: 0px;
}
.lg\:py-32 {
padding-top: 8rem;
padding-bottom: 8rem;
}
[dir="ltr"] .ltr\:lg\:pl-8 {
padding-left: 2rem;
}

2
config/_default/params.toml
View file

@ -22,7 +22,7 @@ enableCodeCopy = true
showScrollToTop = true
[homepage]
layout = "profile" # valid options: page, profile, hero, card, custom
layout = "profile" # valid options: page, profile, hero, card, background, custom
#homepageImage = "IMAGE.jpg" # used in: hero, and card
showRecent = false
showRecentItems = 5

5
exampleSite/assets/js/home.js
View file

@ -1,6 +1,5 @@
var layouts = [
"background",
"hero",
"profile",
"card",
@ -11,8 +10,6 @@ var currentLayout = 0
function switchHomeLayout() {
//document.getElementById(
var old = currentLayout
currentLayout = currentLayout == layouts.length - 1 ? 0 : currentLayout + 1

2
exampleSite/config/_default/params.toml
View file

@ -22,7 +22,7 @@ mainSections = ["docs"]
showScrollToTop = true
[homepage]
layout = "custom" # valid options: page, profile, hero, card, custom
layout = "custom" # valid options: page, profile, hero, card, background, custom
homepageImage = "iceland.jpg" # used in: hero, and card
showRecent = true
showRecentItems = 5

2
exampleSite/content/_index.md
View file

@ -10,7 +10,7 @@ This is a demo site built entirely using Blowfish. It also contains a complete s
{{< icon "triangle-exclamation" >}}
</span>
<span class="flex items-center justify-between grow dark:text-neutral-300">
<span class="prose dark:prose-invert">This is a demo of the <code id="layout">profile</code> layout.</span>
<span class="prose dark:prose-invert">This is a demo of the <code id="layout">background</code> layout.</span>
<button
id="switch-layout-button"
class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"

3
exampleSite/content/docs/configuration/index.md
View file

@ -129,12 +129,11 @@ Many of the article defaults here can be overridden on a per article basis by sp
|`logo`|_Not set_|The relative path to the site logo file within the `assets/` folder. The logo file should be provided at 2x resolution and supports any image dimensions.|
|`mainSections`|_Not set_|The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used.|
|`robots`|_Not set_|String that indicates how robots should handle your site. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values.|
|`header.layout`|`"basic"`|The layout of the page header and menu. Valid values are `basic`, `hamburger` or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/header/custom.html` file.|
|`footer.showCopyright`|`true`|Whether or not to show the copyright string in the site footer. Note that the string itself can be customised using the `copyright` parameter in the [languages configuration](#language-and-i18n).|
|`footer.showThemeAttribution`|`true`|Whether or not to show the "powered by" theme attribution in the site footer. If you choose to disable this message, please consider attributing the theme somewhere else on your site (for example, on your about page).|
|`footer.showAppearanceSwitcher`|`false`|Whether or not to show the appearance switcher in the site footer. The browser's local storage is used to persist the visitor's preference.|
|`footer.showScrollToTop`|`true`|When set to `true` the scroll to top arrow is displayed.|
|`homepage.layout`|`"page"`|The layout of the homepage. Valid values are `page`, `profile`, `hero`, `card`, or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/home/custom.html` file. Refer to the [Homepage Layout]({{< ref "homepage-layout" >}}) section for more details.|
|`homepage.layout`|`"profile"`|The layout of the homepage. Valid values are `page`, `profile`, `hero`, `card`, `background`, or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/home/custom.html` file. Refer to the [Homepage Layout]({{< ref "homepage-layout" >}}) section for more details.|
|`homepage.homepageImage`|_Not set_|Image to be used in `hero` and `card` layouts. Refer to the [Homepage Layout]({{< ref "homepage-layout" >}}) section for more details.|
|`homepage.showRecent`|`false`|Whether or not to display the recent articles list on the homepage.|
|`homepage.showRecentItems`|5|How many articles to display if showRecent is true. If variable is set to 0 or if it isn't defined the system will default to 5 articles.|

BIN
exampleSite/content/docs/homepage-layout/home-background.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.6 MiB

9
exampleSite/content/docs/homepage-layout/index.md
View file

@ -23,7 +23,6 @@ Additionally, any Markdown content that is provided in the homepage content will
To enable the profile layout, set `homepage.layout = "profile"` in the `params.toml` configuration file.
## Page layout
The page layout is simply a normal content page that displays your Markdown content. It's great for static websites and provides a lot of flexibility.
@ -40,6 +39,14 @@ The hero layout brings together ideas from the profile and card layouts. This on
To enable the profile layout, set `homepage.layout = "profile"` and `homepage.homepageImage` in the `params.toml` configuration file.
## Background layout
The background layout is a more smooth version of the hero layout. As in the Hero layout, this one also displays both information on the author of the site and loads your markdown beneath it.
<img class="thumbnailshadow" src="home-background.png"/>
To enable the profile layout, set `homepage.layout = "background"` and `homepage.homepageImage` in the `params.toml` configuration file.
## Card layout
The card layout is an extension of the page layout. It provides the same level of flexivbility by also displaying your markdown content and adds a card image to display visual content.

5
exampleSite/layouts/partials/home/custom.html
View file

@ -1,5 +1,8 @@
{{ $jsHome := resources.Get "js/home.js" | resources.Minify | resources.Fingerprint "sha512" }}
<div id="hero" class="">
<div id="background" class="">
{{ partial "partials/home/background.html" . }}
</div>
<div id="hero" class="hidden h-full">
{{ partial "partials/home/hero.html" . }}
</div>
<div id="profile" class="hidden h-full">

BIN
images/home-background.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.6 MiB

2
layouts/_default/single.html
View file

@ -146,9 +146,7 @@
var header = document.getElementById("single_header")
var style = getComputedStyle(header);
console.log(style, style.height)
var margin = '-'+ (parseInt(style.height) + parseInt(style.marginTop) + parseInt(style.marginBottom) + 20) + 'px'
console.log(margin)
var hero = document.getElementById('hero')
if(hero)
hero.style["margin-bottom"] = margin;

53
layouts/partials/home/background.html Normal file
View file

@ -0,0 +1,53 @@
<article class="max-w-full prose dark:prose-invert">
<div class="relative">
<div class="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100"></div>
<div class="mx-auto max-w-7xl p-0">
<div class="relative sm:overflow-hidden">
<div class="absolute inset-0">
<img class="h-full w-full object-cover m-0 nozoom" src="{{ .Site.Params.homepage.homepageImage }}">
<div
class="absolute inset-0 bg-gradient-to-t from-neutral-100 dark:from-neutral-800 to-transparent dark:to-neutral-300 mix-blend-normal dark:mix-blend-multiply">
</div>
<div
class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
</div>
</div>
<div class="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8 flex flex-col items-center">
{{ with .Site.Author.image }}
{{ $authorImage := resources.Get . }}
{{ if $authorImage }}
{{ $authorImage := $authorImage.Fill "288x288" }}
<img class="mb-2 rounded-full h-36 w-36" width="144" height="144"
alt="{{ $.Site.Author.name | default " Author" }}" src="{{ $authorImage.RelPermalink }}" />
{{ end }}
{{ end }}
<h1 class="mb-2 text-4xl font-extrabold text-neutral-800 dark:text-neutral-200">
{{ .Site.Author.name | default .Site.Title }}
</h1>
{{ with .Site.Author.headline }}
<h2 class="mt-0 mb-0 text-xl text-neutral-800 dark:text-neutral-300">
{{ . | markdownify | emojify }}
</h2>
{{ end }}
<div class="mt-1 mb-10 text-2xl">
{{ with .Site.Author.links }}
<div class="flex flex-wrap">
{{ range $links := . }}
{{ range $name, $url := $links }}
<a class="px-1 hover:text-primary-400 text-primary-300" href="{{ $url }}" target="_blank"
aria-label="{{ $name | title }}" rel="me noopener noreferrer">{{ partial
"icon.html" $name }}</a>
{{ end }}
{{ end }}
</div>
{{ end }}
</div>
<section class="prose dark:prose-invert">{{ .Content | emojify }}</section>
</div>
</div>
</div>
</div>
</article>
<section>
{{ partial "recent-articles.html" . }}
</section>