diff options
| author | Adam Whitlock <adam@adamwhitlock.com> | 2021-12-31 14:04:32 -0600 |
|---|---|---|
| committer | Adam Whitlock <adam@adamwhitlock.com> | 2021-12-31 14:07:19 -0600 |
| commit | 14336900e72b70aa358cbe0b7b2e31eb17190d0a (patch) | |
| tree | d4b41d6251062ef0665a989c806030e27a60aad5 | |
| parent | 8c585e108643d4c22a3569c772d9b6697b2320ad (diff) | |
Layout fixes. Removed contact.html
Layout now uses sections & columns in a way that works well.
Will keep playing with that layout, but liking where this is going.
Removed contact.html, since pages.html provides same functionality.
| -rw-r--r-- | README.md | 22 | ||||
| -rw-r--r-- | layouts/index.html | 57 | ||||
| -rw-r--r-- | layouts/pages/archive.html | 38 | ||||
| -rw-r--r-- | layouts/pages/contact.html | 12 | ||||
| -rw-r--r-- | layouts/pages/page.html | 22 | ||||
| -rw-r--r-- | layouts/partials/header.html | 5 |
6 files changed, 88 insertions, 68 deletions
@@ -1,19 +1,19 @@ # Huey -The Hugo theme Huey +A minimal Hugo blog template using Bulma CSS +## Questions -## Why is it named Huey? +### Why is it Named Huey? The name "Huey" was taken from the musician "Baby Huey". The record was on the mantle when the theme author was trying to come up with a name. The album cover for "The Baby Huey Story: The Living Legend" is used as the default `favicon.ico` for this theme. +### Why Use Bulma for CSS? +Bulma is a great framework for starting off sites. It's pure CSS, meaning you don't need to bring in Javascript (unless you want to). This was also meant as an exercise for the author to learn Bulma CSS and how Sass works. -## TODO -This is the author's current TODO list for Huey. It won't impact your use of Huey. If you run into an issue and it's in the list, be assurred it's being looked into. - -- Children pages will show active for parent in menu +### Why Doesn't Huey use "X" Bulma feature? +This is meant to be "minimal". Only add features needed for a slim site and when necessary. If you want a full-featured Bulma theme meant to provide everything Bulma offers, check out [hugo-bulma](https://github.com/wayn3h0/hugo-bulma). ## Theme Configuration - Huey comes with a number of configuration options. Read through this section for more details, along with a boilerplate configuration that can be used to get started. ### Font Awesome @@ -215,4 +215,10 @@ Font Awesome is not stored within the theme, so network access to the Font Aweso If you want to change the colors that Huey uses, the best location is `assets/css/base/base.scss`. Huey uses Bulma, which itself uses Sass for generating CSS. This file will apply changes to Bulma CSS and generate what is ultimately created in your `public` folder. However, there are a number of Bulma variables already configurable in the `[Params]` table, which means you don't need to edit this file directly. Only edit it directly if you need to make changes. -If you want to add new CSS definitions that don't exist in Bulma, add them to `assets/css/extra/extra.css` or copy CSS files to the `assets/css/extra` folder. Huey will read any CSS files in that folder.
\ No newline at end of file +If you want to add new CSS definitions that don't exist in Bulma, add them to `assets/css/extra/extra.css` or copy CSS files to the `assets/css/extra` folder. Huey will read any CSS files in that folder. + + +## TODO +This is the author's current TODO list for Huey. It won't impact your use of Huey. If you run into an issue and it's in the list, be assurred it's being looked into. + +- Children pages will show active for parent in menu diff --git a/layouts/index.html b/layouts/index.html index a34a773..c78cd09 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,24 +1,41 @@ {{ define "main" }} - <main aria-role="main"> - <div class="content is-normal mx-3"> - {{.Content}} - {{ range where (where .Site.RegularPages "Type" "blog") "File.Dir" "archive/" }} - <article> - <div> - <h2><a class="title is-3" href="{{ .RelPermalink }}"><i class="fas fa-file"></i> {{ .Title }}</a></h2> +<main aria-role="main"> + <section class="hero "> + <div class="hero-body"> + <div class="container"> + + <!-- first post content --> + {{ range first 3 (where (where .Site.RegularPages "Type" "blog") "File.Dir" "archive/") }} + <div class="columns"> + <div class="column"> + <figure class="image"> + </figure> </div> + </div> - <p> - {{ .Summary }} - </p> - {{ if .Truncated }} - <div> - <i class="fas fa fa-bookmark"></i><a class="is-italic" href="{{ .RelPermalink }}"> Read More…</a> - </p> + <div class="section"> + <div class="columns"> + <div class="column"> + <div class="content"> + <h1 class="title"><a class="" href="{{ .RelPermalink }}"> {{ .Title }}</a></h1> + <p>{{ .Summary }}</p> + {{ if .Truncated }} + <div> + <i class="fas fa fa-bookmark"></i><a class="is-italic" href="{{ .RelPermalink }}"> Read More…</a> + </p> + {{ end }} + </div> + </div> + </div> </div> - {{ end }} - </article> - {{ end }} - </div> - </main> -{{ end }}
\ No newline at end of file + </div> + {{ end }} + + </div> + </div> + </section> + +</main> +{{ end }} + + diff --git a/layouts/pages/archive.html b/layouts/pages/archive.html index ae34e8f..3dbb849 100644 --- a/layouts/pages/archive.html +++ b/layouts/pages/archive.html @@ -1,20 +1,24 @@ {{ define "main"}} - <main aria-role="main"> - - - <div class="content mx-3"> - <p class="title is-3"><i class="fas fa-archive"></i> - {{.Page.Title}} - </p> - {{ .Content }} +<main aria-role="main"> + <div class="section"> + <div class="columns"> + <div class="column"> + <div class="content"> + <p class="title is-3"><i class="fas fa-archive"></i> + {{.Page.Title}} + </p> + {{ .Content }} + <ul class="fa-ul"> + {{ range .Pages.ByLastmod }} + <li> + <span class="fa-li"><i class="fas fa fa-file"></i></span><a href="{{ .Permalink }}">{{ .Title }}{{ if .Description }}: {{ .Description}}{{ end }}</a> + <p>Posted on <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time></p> + </li> + {{ end }} + </ul> + </div> + </div> + </div> </div> - <ul class="fa-ul"> - {{ range .Pages.ByLastmod }} - <li> - <span class="fa-li"><i class="fas fa fa-file"></i></span><a href="{{ .Permalink }}">{{ .Title }}{{ if .Description }}: {{ .Description}}{{ end }}</a> - <p>Posted on <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time></p> - </li> - {{ end }} - </ul> - </main> +</main> {{ end }} diff --git a/layouts/pages/contact.html b/layouts/pages/contact.html deleted file mode 100644 index 5a01407..0000000 --- a/layouts/pages/contact.html +++ /dev/null @@ -1,12 +0,0 @@ -{{ define "main"}} - <main aria-role="main"> - <div class="content is-normal mx-3"> - <p class="title is-3">{{ if .Params.fa_icon }}<i class="{{ .Params.fa_icon }}"></i>{{ end }} - {{.Page.Title}} - <div class="contact"> - {{ .Content }} - </div> - </p> - </div> - </main> -{{ end }}
\ No newline at end of file diff --git a/layouts/pages/page.html b/layouts/pages/page.html index 23f2795..7982969 100644 --- a/layouts/pages/page.html +++ b/layouts/pages/page.html @@ -1,10 +1,16 @@ {{ define "main"}} - <main aria-role="main"> - <div class="content is-normal mx-3"> - <p class="title is-3">{{ if .Params.fa_icon }}<i class="{{ .Params.fa_icon }}"></i>{{ end }} - {{.Page.Title}} - </p> - {{ .Content }} +<main aria-role="main"> + <div class="section"> + <div class="columns"> + <div class="column"> + <div class="content"> + <p class="title is-3">{{ if .Params.fa_icon }}<i class="{{ .Params.fa_icon }}"></i>{{ end }} + {{.Page.Title}} + </p> + {{ .Content }} + </div> + </div> + </div> </div> - </main> -{{ end }} +</main> +{{ end }}
\ No newline at end of file diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 38118fb..520f5cb 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,4 +1,5 @@ {{ $currentPage := . }} +<div class="container"> <nav class="navbar {{ .Site.Params.navbarStyle }} mb-4" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item title {{ .Site.Params.navbarTitleStyle | default "has-text-black" }}" href="{{ .Site.BaseURL }}">{{.Site.Title}}</a> @@ -16,6 +17,4 @@ </div> </div> </nav> - - -<!-- is-active for navbar-menu class -->
\ No newline at end of file +</div>
\ No newline at end of file |
