diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index d34f43f4..58ce1186 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -1347,39 +1347,6 @@ select { margin-bottom: 0; } -.prose-invert { - --tw-prose-body: var(--tw-prose-invert-body); - --tw-prose-headings: var(--tw-prose-invert-headings); - --tw-prose-lead: var(--tw-prose-invert-lead); - --tw-prose-links: var(--tw-prose-invert-links); - --tw-prose-bold: var(--tw-prose-invert-bold); - --tw-prose-counters: var(--tw-prose-invert-counters); - --tw-prose-bullets: var(--tw-prose-invert-bullets); - --tw-prose-hr: var(--tw-prose-invert-hr); - --tw-prose-quotes: var(--tw-prose-invert-quotes); - --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders); - --tw-prose-captions: var(--tw-prose-invert-captions); - --tw-prose-code: var(--tw-prose-invert-code); - --tw-prose-pre-code: var(--tw-prose-invert-pre-code); - --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg); - --tw-prose-th-borders: var(--tw-prose-invert-th-borders); - --tw-prose-td-borders: var(--tw-prose-invert-td-borders); -} - -.prose-invert :where(a):not(:where([class~="not-prose"] *)) { - -webkit-text-decoration-color: rgba(var(--color-neutral-600), 1); - text-decoration-color: rgba(var(--color-neutral-600), 1); -} - -.prose-invert :where(kbd):not(:where([class~="not-prose"] *)) { - color: rgba(var(--color-neutral-200), 1); - background-color: rgba(var(--color-neutral-700), 1); -} - -.prose-invert :where(mark):not(:where([class~="not-prose"] *)) { - background-color: rgba(var(--color-secondary-400), 1); -} - .sr-only { position: absolute; width: 1px; @@ -1477,6 +1444,10 @@ select { margin: 0.25rem; } +.m-0 { + margin: 0px; +} + .-mx-2 { margin-left: -0.5rem; margin-right: -0.5rem; @@ -1599,6 +1570,14 @@ select { margin-right: -0.5rem; } +.-mr-48 { + margin-right: -12rem; +} + +.mb-0 { + margin-bottom: 0px; +} + .mt-1 { margin-top: 0.25rem; } @@ -1647,14 +1626,18 @@ select { height: 2rem; } -.h-36 { - height: 9rem; +.h-48 { + height: 12rem; } .h-1\/2 { height: 50%; } +.h-36 { + height: 9rem; +} + .max-h-\[5rem\] { max-height: 5rem; } @@ -1697,12 +1680,6 @@ select { width: 1.5rem; } -.w-max { - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; -} - .min-w-0 { min-width: 0px; } @@ -1735,12 +1712,8 @@ select { max-width: 5rem; } -.max-w-lg { - max-width: 32rem; -} - -.max-w-sm { - max-width: 24rem; +.max-w-xl { + max-width: 36rem; } .flex-none { @@ -1824,12 +1797,6 @@ select { margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse))); } -.space-y-4 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1rem * var(--tw-space-y-reverse)); -} - .place-self-center { place-self: center; } @@ -1928,10 +1895,6 @@ select { border-color: rgba(var(--color-primary-500), var(--tw-border-opacity)); } -.border-transparent { - border-color: transparent; -} - .bg-neutral { --tw-bg-opacity: 1; background-color: rgba(var(--color-neutral), var(--tw-bg-opacity)); @@ -1978,66 +1941,24 @@ select { background-color: rgba(var(--color-neutral-100), 0.5); } -.bg-opacity-60 { - --tw-bg-opacity: 0.6; +.bg-gradient-to-b { + background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); } .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); } -.bg-gradient-to-t { - background-image: linear-gradient(to top, var(--tw-gradient-stops)); -} - -.bg-gradient-to-b { - background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); -} - -.bg-gradient-to-l { - background-image: linear-gradient(to left, var(--tw-gradient-stops)); -} - -.from-primary-800 { - --tw-gradient-from: rgba(var(--color-primary-800), 1); - --tw-gradient-to: rgba(var(--color-primary-800), 0); +.from-primary-500 { + --tw-gradient-from: rgba(var(--color-primary-500), 1); + --tw-gradient-to: rgba(var(--color-primary-500), 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } -.from-primary-200 { - --tw-gradient-from: rgba(var(--color-primary-200), 1); - --tw-gradient-to: rgba(var(--color-primary-200), 0); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); -} - -.from-primary-100 { - --tw-gradient-from: rgba(var(--color-primary-100), 1); - --tw-gradient-to: rgba(var(--color-primary-100), 0); - --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); -} - -.to-primary-700 { - --tw-gradient-to: rgba(var(--color-primary-700), 1); -} - .to-secondary-700 { --tw-gradient-to: rgba(var(--color-secondary-700), 1); } -.to-secondary-400 { - --tw-gradient-to: rgba(var(--color-secondary-400), 1); -} - -.to-secondary-200 { - --tw-gradient-to: rgba(var(--color-secondary-200), 1); -} - .object-cover { -o-object-fit: cover; object-fit: cover; @@ -2061,10 +1982,6 @@ select { padding: 0.25rem; } -.p-32 { - padding: 8rem; -} - .p-0 { padding: 0px; } @@ -2159,6 +2076,18 @@ select { padding-top: 1rem; } +.pt-16 { + padding-top: 4rem; +} + +.pb-32 { + padding-bottom: 8rem; +} + +.pl-4 { + padding-left: 1rem; +} + .text-center { text-align: center; } @@ -2254,10 +2183,6 @@ select { line-height: .75rem; } -.tracking-tight { - letter-spacing: -0.025em; -} - .text-neutral-400 { --tw-text-opacity: 1; color: rgba(var(--color-neutral-400), var(--tw-text-opacity)); @@ -2308,6 +2233,21 @@ select { color: rgba(var(--color-neutral), var(--tw-text-opacity)) !important; } +.text-neutral-200 { + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-200), var(--tw-text-opacity)); +} + +.text-neutral-300 { + --tw-text-opacity: 1; + 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; @@ -2343,12 +2283,6 @@ select { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.shadow-sm { - --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - 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); @@ -3048,12 +2982,6 @@ body:has(#menu-controller:checked) { box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3); } -.hero { - background-repeat:no-repeat; - background-size:cover; - background-position:center; -} - @media (min-width: 640px) { .thumbnail { min-width: 100%; @@ -3105,10 +3033,6 @@ body:has(#menu-controller:checked) { background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity)) !important; } -.hover\:bg-opacity-70:hover { - --tw-bg-opacity: 0.7; -} - .hover\:text-primary-600:hover { --tw-text-opacity: 1; color: rgba(var(--color-primary-600), var(--tw-text-opacity)); @@ -3129,6 +3053,11 @@ body:has(#menu-controller:checked) { color: rgba(var(--color-neutral), var(--tw-text-opacity)); } +.hover\:text-primary-400:hover { + --tw-text-opacity: 1; + color: rgba(var(--color-primary-400), var(--tw-text-opacity)); +} + .hover\:underline:hover { -webkit-text-decoration-line: underline; text-decoration-line: underline; @@ -3399,14 +3328,14 @@ body:has(#menu-controller:checked) { background-color: rgba(var(--color-primary-800), var(--tw-bg-opacity)); } -.dark .dark\:from-primary-800 { - --tw-gradient-from: rgba(var(--color-primary-800), 1); - --tw-gradient-to: rgba(var(--color-primary-800), 0); +.dark .dark\:from-primary-600 { + --tw-gradient-from: rgba(var(--color-primary-600), 1); + --tw-gradient-to: rgba(var(--color-primary-600), 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } -.dark .dark\:to-secondary-700 { - --tw-gradient-to: rgba(var(--color-secondary-700), 1); +.dark .dark\:to-secondary-800 { + --tw-gradient-to: rgba(var(--color-secondary-800), 1); } .dark .dark\:text-neutral-500 { @@ -3491,65 +3420,26 @@ body:has(#menu-controller:checked) { } @media (min-width: 640px) { - .sm\:mx-auto { - margin-left: auto; - margin-right: auto; - } - .sm\:mb-0 { margin-bottom: 0px; } - .sm\:flex { - display: flex; - } - - .sm\:inline-grid { - display: inline-grid; + .sm\:mt-16 { + margin-top: 4rem; } .sm\:w-1\/2 { width: 50%; } - .sm\:max-w-3xl { - max-width: 48rem; - } - - .sm\:max-w-none { - max-width: none; - } - - .sm\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - .sm\:flex-row { flex-direction: row; } - .sm\:justify-center { - justify-content: center; - } - - .sm\:gap-5 { - gap: 1.25rem; - } - - .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0px * var(--tw-space-y-reverse)); - } - .sm\:overflow-hidden { overflow: hidden; } - .sm\:rounded-2xl { - border-radius: 1rem; - } - .sm\:p-6 { padding: 1.5rem; } @@ -3574,25 +3464,19 @@ body:has(#menu-controller:checked) { padding-bottom: 6rem; } - .sm\:px-8 { - padding-left: 2rem; - padding-right: 2rem; - } - .sm\:pt-10 { padding-top: 2.5rem; } + .sm\:pl-6 { + padding-left: 1.5rem; + } + .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; } - .sm\:text-5xl { - font-size: 3rem; - line-height: 1; - } - [dir="ltr"] .ltr\:sm\:mr-7 { margin-right: 1.75rem; } @@ -3623,6 +3507,10 @@ body:has(#menu-controller:checked) { margin-left: 3rem; } + .md\:-mr-16 { + margin-right: -4rem; + } + .md\:flex { display: flex; } @@ -3654,6 +3542,14 @@ body:has(#menu-controller:checked) { } @media (min-width: 1024px) { + .lg\:absolute { + position: absolute; + } + + .lg\:relative { + position: relative; + } + .lg\:sticky { position: -webkit-sticky; position: sticky; @@ -3663,30 +3559,84 @@ body:has(#menu-controller:checked) { top: 2.5rem; } + .lg\:left-0 { + left: 0px; + } + .lg\:order-last { order: 9999; } + .lg\:m-0 { + margin: 0px; + } + + .lg\:mx-auto { + margin-left: auto; + margin-right: auto; + } + + .lg\:mx-0 { + margin-left: 0px; + margin-right: 0px; + } + + .lg\:mt-0 { + margin-top: 0px; + } + .lg\:block { display: block; } + .lg\:grid { + display: grid; + } + .lg\:hidden { display: none; } + .lg\:h-full { + height: 100%; + } + .lg\:w-1\/4 { width: 25%; } + .lg\:w-auto { + width: auto; + } + .lg\:max-w-xs { max-width: 20rem; } + .lg\:max-w-7xl { + max-width: 80rem; + } + + .lg\:max-w-none { + max-width: none; + } + + .lg\:grid-flow-col-dense { + grid-auto-flow: column dense; + } + + .lg\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .lg\:flex-row { flex-direction: row; } + .lg\:gap-24 { + gap: 6rem; + } + .lg\:p-\[12vh\] { padding: 12vh; } @@ -3701,16 +3651,21 @@ body:has(#menu-controller:checked) { padding-right: 2rem; } + .lg\:py-16 { + padding-top: 4rem; + padding-bottom: 4rem; + } + + .lg\:px-0 { + padding-left: 0px; + padding-right: 0px; + } + .lg\:py-32 { padding-top: 8rem; padding-bottom: 8rem; } - .lg\:text-6xl { - font-size: 3.75rem; - line-height: 1; - } - [dir="ltr"] .ltr\:lg\:pl-8 { padding-left: 2rem; } diff --git a/assets/css/main.css b/assets/css/main.css index f5486a14..590504fa 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -351,12 +351,6 @@ body:has(#menu-controller:checked) { box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3); } -.hero { - background-repeat:no-repeat; - background-size:cover; - background-position:center; -} - @screen sm { .thumbnail { min-width: 100%; diff --git a/config/_default/params.toml b/config/_default/params.toml index 6e25129d..ee667558 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -22,7 +22,8 @@ enableCodeCopy = true showScrollToTop = true [homepage] - layout = "profile" # valid options: page, profile, custom + layout = "profile" # valid options: page, profile, hero, card, custom + #homepageImage = "IMAGE.jpg" # used in: hero, and card showRecent = false showRecentItems = 5 showMoreLink = false diff --git a/exampleSite/assets/js/home.js b/exampleSite/assets/js/home.js index 768edb57..3e0cd833 100644 --- a/exampleSite/assets/js/home.js +++ b/exampleSite/assets/js/home.js @@ -1,20 +1,31 @@ + + +var layouts = [ + "hero", + "profile", + "card", + "page" +] + +var currentLayout = 0 + function switchHomeLayout() { - const pageDiv = document.getElementById("page"); - const profileDiv = document.getElementById("profile"); + + //document.getElementById( + + var old = currentLayout + currentLayout = currentLayout == layouts.length - 1 ? 0 : currentLayout + 1 + + var oldDiv = document.getElementById(layouts[old]) + var currentDiv = document.getElementById(layouts[currentLayout]) const layoutCode = document.querySelectorAll("code[id=layout]"); - if (profileDiv.style.display === "none") { - profileDiv.style.display = "block"; - pageDiv.style.display = "none"; - layoutCode.forEach(function (el) { - el.innerText = "profile"; - }); - } else { - profileDiv.style.display = "none"; - pageDiv.style.display = "block"; - layoutCode.forEach(function (el) { - el.innerText = "page"; - }); - } + + currentDiv.style.display = "block"; + oldDiv.style.display = "none"; + layoutCode.forEach(function (el) { + el.innerText = layouts[currentLayout]; + }); + } window.addEventListener("DOMContentLoaded", (event) => { diff --git a/exampleSite/config/_default/languages.en.toml b/exampleSite/config/_default/languages.en.toml index fe27b7ae..7c3aef90 100644 --- a/exampleSite/config/_default/languages.en.toml +++ b/exampleSite/config/_default/languages.en.toml @@ -15,7 +15,7 @@ dateFormat = "2 January 2006" [author] name = "Blowfish" image = "img/blowfish_logo.png" - #headline = "A powerful, lightweight theme for Hugo built with Tailwind CSS." + headline = "A powerful, lightweight theme for Hugo built with Tailwind CSS." bio = "A powerful, lightweight theme for Hugo built with Tailwind CSS." links = [ { twitter = "https://twitter.com/burufugu" }, diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml index ccf64978..5d54934f 100644 --- a/exampleSite/config/_default/params.toml +++ b/exampleSite/config/_default/params.toml @@ -22,7 +22,8 @@ mainSections = ["docs"] showScrollToTop = true [homepage] - layout = "hero" # valid options: page, profile, custom + layout = "custom" # valid options: page, profile, hero, card, custom + homepageImage = "iceland.jpg" # used in: hero, and card showRecent = true showRecentItems = 5 showMoreLink = true diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md index 8aa9999a..704d3ec1 100755 --- a/exampleSite/content/_index.md +++ b/exampleSite/content/_index.md @@ -3,10 +3,6 @@ title: "Welcome to Blowfish! :tada:" description: "This is a demo of the Blowfish theme for Hugo." --- -{{< lead >}} A powerful, lightweight theme for Hugo built with Tailwind CSS. {{< /lead >}} - -
- This is a demo site built entirely using Blowfish. It also contains a complete set of [theme documentation]({{< ref "docs" >}}). Blowfish is flexible and is great for both static page-based content (like this demo) or a traditional blog with a feed of recent posts.
diff --git a/exampleSite/content/docs/advanced-customisation/featured.png b/exampleSite/content/docs/advanced-customisation/featured.png new file mode 100644 index 00000000..fbf0cdd8 Binary files /dev/null and b/exampleSite/content/docs/advanced-customisation/featured.png differ diff --git a/exampleSite/content/docs/configuration/featured.png b/exampleSite/content/docs/configuration/featured.png new file mode 100644 index 00000000..81dda1a9 Binary files /dev/null and b/exampleSite/content/docs/configuration/featured.png differ diff --git a/exampleSite/content/docs/configuration/index.md b/exampleSite/content/docs/configuration/index.md index 36436fd0..854ea74c 100644 --- a/exampleSite/content/docs/configuration/index.md +++ b/exampleSite/content/docs/configuration/index.md @@ -134,7 +134,8 @@ Many of the article defaults here can be overridden on a per article basis by sp |`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` 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`|`"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.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.| |`homepage.showMoreLink`|'false'|Wether or not to display a show more link at the end of your posts that takes the user to a predefined place.| diff --git a/exampleSite/content/docs/content-examples/featured.png b/exampleSite/content/docs/content-examples/featured.png new file mode 100644 index 00000000..5a54ce4c Binary files /dev/null and b/exampleSite/content/docs/content-examples/featured.png differ diff --git a/exampleSite/content/docs/firebase-views/featured.png b/exampleSite/content/docs/firebase-views/featured.png new file mode 100644 index 00000000..b9259a50 Binary files /dev/null and b/exampleSite/content/docs/firebase-views/featured.png differ diff --git a/exampleSite/content/docs/front-matter/featured.png b/exampleSite/content/docs/front-matter/featured.png new file mode 100644 index 00000000..d7262d5e Binary files /dev/null and b/exampleSite/content/docs/front-matter/featured.png differ diff --git a/exampleSite/content/docs/getting-started/featured.png b/exampleSite/content/docs/getting-started/featured.png new file mode 100644 index 00000000..85eafad8 Binary files /dev/null and b/exampleSite/content/docs/getting-started/featured.png differ diff --git a/exampleSite/content/docs/homepage-layout/featured.png b/exampleSite/content/docs/homepage-layout/featured.png new file mode 100644 index 00000000..0488f197 Binary files /dev/null and b/exampleSite/content/docs/homepage-layout/featured.png differ diff --git a/exampleSite/content/docs/homepage-layout/home-card.png b/exampleSite/content/docs/homepage-layout/home-card.png new file mode 100644 index 00000000..946d6ae5 Binary files /dev/null and b/exampleSite/content/docs/homepage-layout/home-card.png differ diff --git a/exampleSite/content/docs/homepage-layout/home-hero.png b/exampleSite/content/docs/homepage-layout/home-hero.png new file mode 100644 index 00000000..19347813 Binary files /dev/null and b/exampleSite/content/docs/homepage-layout/home-hero.png differ diff --git a/exampleSite/content/docs/homepage-layout/home-list.png b/exampleSite/content/docs/homepage-layout/home-list.png new file mode 100644 index 00000000..9073d824 Binary files /dev/null and b/exampleSite/content/docs/homepage-layout/home-list.png differ diff --git a/exampleSite/content/docs/homepage-layout/home-page.png b/exampleSite/content/docs/homepage-layout/home-page.png index ce9bce95..ab87fa53 100644 Binary files a/exampleSite/content/docs/homepage-layout/home-page.png and b/exampleSite/content/docs/homepage-layout/home-page.png differ diff --git a/exampleSite/content/docs/homepage-layout/home-profile-list.png b/exampleSite/content/docs/homepage-layout/home-profile-list.png deleted file mode 100644 index 3581cd2b..00000000 Binary files a/exampleSite/content/docs/homepage-layout/home-profile-list.png and /dev/null differ diff --git a/exampleSite/content/docs/homepage-layout/home-profile.png b/exampleSite/content/docs/homepage-layout/home-profile.png index 0df3b489..c32eceeb 100644 Binary files a/exampleSite/content/docs/homepage-layout/home-profile.png and b/exampleSite/content/docs/homepage-layout/home-profile.png differ diff --git a/exampleSite/content/docs/homepage-layout/index.md b/exampleSite/content/docs/homepage-layout/index.md index 1b6d78a6..5dfd6ee6 100644 --- a/exampleSite/content/docs/homepage-layout/index.md +++ b/exampleSite/content/docs/homepage-layout/index.md @@ -15,7 +15,7 @@ The layout of the homepage is controlled by the `homepage.layout` setting in the The default layout is the profile layout, which is great for personal websites and blogs. It puts the author's details front and centre by providing an image and links to social profiles. -![Screenshot of profile layout](home-profile.png) + The author information is provided in the languages configuration file. Refer to the [Getting Started]({{< ref "getting-started" >}}) and [Language Configuration]({{< ref "configuration##language-and-i18n" >}}) sections for parameter details. @@ -28,10 +28,26 @@ To enable the profile layout, set `homepage.layout = "profile"` in the `params.t 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. -![Screenshot of homepage layout](home-page.png) + To enable the page layout, set `homepage.layout = "page"` in the `params.toml` configuration file. +## Hero layout + +The hero layout brings together ideas from the profile and card layouts. This one not only displays information on the author of the site but it also loads your markdown beneath it. + + + +To enable the profile layout, set `homepage.layout = "profile"` 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. + + + +To enable the profile layout, set `homepage.layout = "profile"` and `homepage.homepageImage` in the `params.toml` configuration file. + ## Custom layout @@ -49,7 +65,7 @@ As an example, the [homepage]({{< ref "/" >}}) on this site uses the custom layo All homepage layouts have the option of displaying recent articles below the main page content. To enable this, simply set the `homepage.showRecent` setting to `true` in the `params.toml` configuration file. -![Profile layout with recent articles](home-profile-list.png) + The articles listed in this section are derived from the `mainSections` setting which allows for whatever content types you are using on your website. For instance, if you had content sections for _posts_ and _projects_ you could set this setting to `["posts", "projects"]` and all the articles in these two sections would be used to populate the recent list. The theme expects this setting to be an array so if you only use one section for all your content, you should set this accordingly: `["blog"]`. @@ -57,4 +73,4 @@ The articles listed in this section are derived from the `mainSections` setting Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article strucutre, you just need to place an image file (almost all formats are supported bue we recommend `.png` or `.jpg`) that starts with `feature*` inside your article folder. And that's it, Blowfish will then able to both use the image as a thumbnail within your website as well as for oEmbed cards across social platforms. -[Here]({{< ref "thumbnails" >}}) is also a guide with more info and a [sample]({{< ref "thumbnail_sample" >}}) if you want to see how you can do it. \ No newline at end of file +[Here]({{< ref "thumbnails" >}}) is a guide with more info and a [sample]({{< ref "thumbnail_sample" >}}) if you want to see an example. \ No newline at end of file diff --git a/exampleSite/content/docs/hosting-deployment/featured.png b/exampleSite/content/docs/hosting-deployment/featured.png new file mode 100644 index 00000000..239304a1 Binary files /dev/null and b/exampleSite/content/docs/hosting-deployment/featured.png differ diff --git a/exampleSite/content/docs/installation/featured.png b/exampleSite/content/docs/installation/featured.png new file mode 100644 index 00000000..dc5e02b9 Binary files /dev/null and b/exampleSite/content/docs/installation/featured.png differ diff --git a/exampleSite/content/docs/partials/featured.png b/exampleSite/content/docs/partials/featured.png new file mode 100644 index 00000000..07e11310 Binary files /dev/null and b/exampleSite/content/docs/partials/featured.png differ diff --git a/exampleSite/content/docs/shortcodes/featured.png b/exampleSite/content/docs/shortcodes/featured.png new file mode 100644 index 00000000..1aa66a11 Binary files /dev/null and b/exampleSite/content/docs/shortcodes/featured.png differ diff --git a/exampleSite/content/docs/thumbnails/featured.png b/exampleSite/content/docs/thumbnails/featured.png new file mode 100644 index 00000000..10488bb0 Binary files /dev/null and b/exampleSite/content/docs/thumbnails/featured.png differ diff --git a/exampleSite/content/docs/welcome/featured.png b/exampleSite/content/docs/welcome/featured.png new file mode 100644 index 00000000..3e28eeb5 Binary files /dev/null and b/exampleSite/content/docs/welcome/featured.png differ diff --git a/exampleSite/content/samples/thumbnail_sample/feature.jpg b/exampleSite/content/samples/thumbnail_sample/feature.jpg deleted file mode 100644 index e1a7b112..00000000 Binary files a/exampleSite/content/samples/thumbnail_sample/feature.jpg and /dev/null differ diff --git a/exampleSite/layouts/partials/home/custom.html b/exampleSite/layouts/partials/home/custom.html index a9f2a833..d3fbfc54 100644 --- a/exampleSite/layouts/partials/home/custom.html +++ b/exampleSite/layouts/partials/home/custom.html @@ -1,7 +1,13 @@ {{ $jsHome := resources.Get "js/home.js" | resources.Minify | resources.Fingerprint "sha512" }} -
+
+ {{ partial "partials/home/hero.html" . }} +
+ + diff --git a/exampleSite/resources/_gen/images/docs/homepage-layout/home-list_hue12cdcfb91adb764e80d1b15af469052_1508931_1024x0_resize_box_3.png b/exampleSite/resources/_gen/images/docs/homepage-layout/home-list_hue12cdcfb91adb764e80d1b15af469052_1508931_1024x0_resize_box_3.png new file mode 100644 index 00000000..e7b6b910 Binary files /dev/null and b/exampleSite/resources/_gen/images/docs/homepage-layout/home-list_hue12cdcfb91adb764e80d1b15af469052_1508931_1024x0_resize_box_3.png differ diff --git a/exampleSite/resources/_gen/images/docs/homepage-layout/home-list_hue12cdcfb91adb764e80d1b15af469052_1508931_1320x0_resize_box_3.png b/exampleSite/resources/_gen/images/docs/homepage-layout/home-list_hue12cdcfb91adb764e80d1b15af469052_1508931_1320x0_resize_box_3.png new file mode 100644 index 00000000..b63de4cb Binary files /dev/null and b/exampleSite/resources/_gen/images/docs/homepage-layout/home-list_hue12cdcfb91adb764e80d1b15af469052_1508931_1320x0_resize_box_3.png differ diff --git a/exampleSite/resources/_gen/images/docs/homepage-layout/home-list_hue12cdcfb91adb764e80d1b15af469052_1508931_330x0_resize_box_3.png b/exampleSite/resources/_gen/images/docs/homepage-layout/home-list_hue12cdcfb91adb764e80d1b15af469052_1508931_330x0_resize_box_3.png new file mode 100644 index 00000000..88c0b95a Binary files /dev/null and b/exampleSite/resources/_gen/images/docs/homepage-layout/home-list_hue12cdcfb91adb764e80d1b15af469052_1508931_330x0_resize_box_3.png differ diff --git a/exampleSite/resources/_gen/images/docs/homepage-layout/home-list_hue12cdcfb91adb764e80d1b15af469052_1508931_660x0_resize_box_3.png b/exampleSite/resources/_gen/images/docs/homepage-layout/home-list_hue12cdcfb91adb764e80d1b15af469052_1508931_660x0_resize_box_3.png new file mode 100644 index 00000000..dd374804 Binary files /dev/null and b/exampleSite/resources/_gen/images/docs/homepage-layout/home-list_hue12cdcfb91adb764e80d1b15af469052_1508931_660x0_resize_box_3.png differ diff --git a/exampleSite/resources/_gen/images/docs/homepage-layout/home-page_hub7a244a5af8b930e7537ada3019a13b7_1389667_1024x0_resize_box_3.png b/exampleSite/resources/_gen/images/docs/homepage-layout/home-page_hub7a244a5af8b930e7537ada3019a13b7_1389667_1024x0_resize_box_3.png new file mode 100644 index 00000000..32a968a5 Binary files /dev/null and b/exampleSite/resources/_gen/images/docs/homepage-layout/home-page_hub7a244a5af8b930e7537ada3019a13b7_1389667_1024x0_resize_box_3.png differ diff --git a/exampleSite/resources/_gen/images/docs/homepage-layout/home-page_hub7a244a5af8b930e7537ada3019a13b7_1389667_1320x0_resize_box_3.png b/exampleSite/resources/_gen/images/docs/homepage-layout/home-page_hub7a244a5af8b930e7537ada3019a13b7_1389667_1320x0_resize_box_3.png new file mode 100644 index 00000000..ddf1171a Binary files /dev/null and b/exampleSite/resources/_gen/images/docs/homepage-layout/home-page_hub7a244a5af8b930e7537ada3019a13b7_1389667_1320x0_resize_box_3.png differ diff --git a/exampleSite/resources/_gen/images/docs/homepage-layout/home-page_hub7a244a5af8b930e7537ada3019a13b7_1389667_330x0_resize_box_3.png b/exampleSite/resources/_gen/images/docs/homepage-layout/home-page_hub7a244a5af8b930e7537ada3019a13b7_1389667_330x0_resize_box_3.png new file mode 100644 index 00000000..b0100aec Binary files /dev/null and b/exampleSite/resources/_gen/images/docs/homepage-layout/home-page_hub7a244a5af8b930e7537ada3019a13b7_1389667_330x0_resize_box_3.png differ diff --git a/exampleSite/resources/_gen/images/docs/homepage-layout/home-page_hub7a244a5af8b930e7537ada3019a13b7_1389667_660x0_resize_box_3.png b/exampleSite/resources/_gen/images/docs/homepage-layout/home-page_hub7a244a5af8b930e7537ada3019a13b7_1389667_660x0_resize_box_3.png new file mode 100644 index 00000000..79ec5bf8 Binary files /dev/null and b/exampleSite/resources/_gen/images/docs/homepage-layout/home-page_hub7a244a5af8b930e7537ada3019a13b7_1389667_660x0_resize_box_3.png differ diff --git a/exampleSite/resources/_gen/images/docs/homepage-layout/home-profile_hu3a9ad3e11ece282df911643d2fe89168_1648178_1024x0_resize_box_3.png b/exampleSite/resources/_gen/images/docs/homepage-layout/home-profile_hu3a9ad3e11ece282df911643d2fe89168_1648178_1024x0_resize_box_3.png new file mode 100644 index 00000000..48faae0d Binary files /dev/null and b/exampleSite/resources/_gen/images/docs/homepage-layout/home-profile_hu3a9ad3e11ece282df911643d2fe89168_1648178_1024x0_resize_box_3.png differ diff --git a/exampleSite/resources/_gen/images/docs/homepage-layout/home-profile_hu3a9ad3e11ece282df911643d2fe89168_1648178_1320x0_resize_box_3.png b/exampleSite/resources/_gen/images/docs/homepage-layout/home-profile_hu3a9ad3e11ece282df911643d2fe89168_1648178_1320x0_resize_box_3.png new file mode 100644 index 00000000..1c48379b Binary files /dev/null and b/exampleSite/resources/_gen/images/docs/homepage-layout/home-profile_hu3a9ad3e11ece282df911643d2fe89168_1648178_1320x0_resize_box_3.png differ diff --git a/exampleSite/resources/_gen/images/docs/homepage-layout/home-profile_hu3a9ad3e11ece282df911643d2fe89168_1648178_330x0_resize_box_3.png b/exampleSite/resources/_gen/images/docs/homepage-layout/home-profile_hu3a9ad3e11ece282df911643d2fe89168_1648178_330x0_resize_box_3.png new file mode 100644 index 00000000..668f0b5d Binary files /dev/null and b/exampleSite/resources/_gen/images/docs/homepage-layout/home-profile_hu3a9ad3e11ece282df911643d2fe89168_1648178_330x0_resize_box_3.png differ diff --git a/exampleSite/resources/_gen/images/docs/homepage-layout/home-profile_hu3a9ad3e11ece282df911643d2fe89168_1648178_660x0_resize_box_3.png b/exampleSite/resources/_gen/images/docs/homepage-layout/home-profile_hu3a9ad3e11ece282df911643d2fe89168_1648178_660x0_resize_box_3.png new file mode 100644 index 00000000..5d132ed7 Binary files /dev/null and b/exampleSite/resources/_gen/images/docs/homepage-layout/home-profile_hu3a9ad3e11ece282df911643d2fe89168_1648178_660x0_resize_box_3.png differ diff --git a/images/home-card.png b/images/home-card.png new file mode 100644 index 00000000..946d6ae5 Binary files /dev/null and b/images/home-card.png differ diff --git a/images/home-hero.png b/images/home-hero.png new file mode 100644 index 00000000..19347813 Binary files /dev/null and b/images/home-hero.png differ diff --git a/images/home-page.png b/images/home-page.png index ce9bce95..ab87fa53 100644 Binary files a/images/home-page.png and b/images/home-page.png differ diff --git a/images/home-profile-list.png b/images/home-profile-list.png deleted file mode 100644 index 3581cd2b..00000000 Binary files a/images/home-profile-list.png and /dev/null differ diff --git a/images/home-profile.png b/images/home-profile.png index 0df3b489..c32eceeb 100644 Binary files a/images/home-profile.png and b/images/home-profile.png differ diff --git a/images/screenshot.png b/images/screenshot.png index e18c1d6b..9073d824 100644 Binary files a/images/screenshot.png and b/images/screenshot.png differ diff --git a/layouts/partials/home/card.html b/layouts/partials/home/card.html new file mode 100644 index 00000000..4fb1bb5d --- /dev/null +++ b/layouts/partials/home/card.html @@ -0,0 +1,26 @@ +
+ +
+
+
+
+ {{ with .Title }} +
+

{{ . | emojify }}

+
+ {{ end }} +
{{ .Content | emojify }}
+
+
+
+
+ +
+
+
+
+
+
+ {{ partial "recent-articles.html" . }} +
\ No newline at end of file diff --git a/layouts/partials/home/hero.html b/layouts/partials/home/hero.html index ca7611ef..28d82276 100644 --- a/layouts/partials/home/hero.html +++ b/layouts/partials/home/hero.html @@ -4,10 +4,9 @@
- People working on laptops -
+ +
@@ -19,24 +18,28 @@ alt="{{ $.Site.Author.name | default " Author" }}" src="{{ $authorImage.RelPermalink }}" /> {{ end }} {{ end }} -

+

{{ .Site.Author.name | default .Site.Title }}

{{ with .Site.Author.headline }} -

+

{{ . | markdownify | emojify }}

{{ end }} -
- {{ partialCached "author-links.html" . }} +
+ {{ with .Site.Author.links }} +
+ {{ range $links := . }} + {{ range $name, $url := $links }} + {{ partial + "icon.html" $name }} + {{ end }} + {{ end }} +
+ {{ end }}
- {{ with .Title }} -
-

{{ . | emojify }}

-
- {{ end }} - -
{{ .Content | emojify }}
+
{{ .Content | emojify }}
@@ -44,49 +47,4 @@
{{ partial "recent-articles.html" . }} -
- - \ No newline at end of file + \ No newline at end of file