mirror of https://github.com/kc0bfv/ticky_tacky_dark.git
README.md
@@ -9,27 +9,28 @@ The exampleSite demonstrates the features unique to this theme. In your site config params section the following extra parameters are supported: * `favicon` - the favicon URL, relative to your site (placed in header meta tag) * `webmasterEmail` - the webmaster email displayed in the footer * `author` - the author for the header meta tag * `description` - the description for the header meta tag * `headerimages` - a list of relative image URLs for the header of each page * `images` - a list of relative image URLs for the header of each page * `msvalidate` - MS validation tag * `googlesiteverification` - Google site verification tag Additionally, `Author.name` and `Author.email` in the site config will display as the author and webmaster email. Pages you add have custom front matter options: * `buttonimage` - the relative image URL for the page's button on the front page * `sideimages` - a list of relative image URLs for the left sidebar on the page * `sideimagealt` - the alternate text for the page's left sidebar image * `images` - a list of relative image URLs for the left sidebar on the page * `imagealt` - the alternate text for the page's left sidebar image * `weight` - an integer that specifies page ordering for the front page. If you want the buttons and navbar items to show pages in a specific order, specify the ordering via weight. Ordering goes from lowest weight to highest, left to right, top to bottom. * `author.name`, `author.email` - overrides the site author name and email ## Page Construction Navigation from the main page happens via a button image. These images are, optimally, 300x300 pixels. Specify these button image URLs in a page's front matter with the `buttonimage` option. On sub-pages, images can appear on the left side. Sizing can vary there, but at full size images come out as about 277.5 pixels, and a size of about 300x500 pixels works nicely. You can specify multiple images for a sub-page, and they'll be randomly selected on load. Specify them as a list of image URLs on the page front matter, with option `sideimages`. On sub-pages, images can appear on the left side. Sizing can vary there, but at full size images come out as about 277.5 pixels, and a size of about 300x500 pixels works nicely. You can specify multiple images for a sub-page, and they'll be randomly selected on load. Specify them as a list of image URLs on the page front matter, with option `images`. Header images are, optimally, 950x200 pixels. Specify these in the site configuration as a list of image URLs with option `headerimages`. One will be randomly selected on page load. Header images are, optimally, 950x200 pixels. Specify these in the site configuration as a list of image URLs with option `images`. One will be randomly selected on page load. ## Custom Shortcode
@@ -3,8 +3,8 @@ date: {{ .Date }} draft: false buttonimage: "" sideimages: [] sideimagealt: "" images: [] imagealt: "" weight: 1 ---
@@ -7,9 +7,11 @@ [params] favicon = "favicon.ico" webmasterEmail = "kc0bfv@gmail.com" description = "The demonstration page for the Hugo Ticky Tacky Dark theme." author = "kc0bfv@gmail.com" headerimages = ["img/header01.jpg", "img/header02.jpg"] images = ["img/header01.jpg", "img/header02.jpg"] #msvalidate = "" #googlesiteverification = "" [Author] name = "Karl Sickendick" email = "kc0bfv@gmail.com" exampleSite/config_for_github_pages.toml
@@ -7,9 +7,11 @@ [params] favicon = "favicon.ico" webmasterEmail = "kc0bfv@gmail.com" description = "The demonstration page for the Hugo Ticky Tacky Dark theme." author = "kc0bfv@gmail.com" headerimages = ["img/header01.jpg", "img/header02.jpg"] images = ["img/header01.jpg", "img/header02.jpg"] #msvalidate = "" #googlesiteverification = "" [Author] name = "Karl Sickendick" email = "kc0bfv@gmail.com" exampleSite/content/_index.md
@@ -1,6 +1,5 @@ --- title: "Main" author: "Hugo Authors" date: 2019-12-08T00:00:00-00:00 draft: false --- exampleSite/content/about.md
@@ -2,11 +2,12 @@ title: "About" description: "Hugo, the world’s fastest framework for building websites" aliases: ["about-us","about-hugo","contact"] author: "Hugo Authors" author: name: "Hugo Authors" date: 2019-12-08T00:00:00-00:00 buttonimage: "img/awebutton.jpg" sideimages: ["img/awesome01.jpg", "img/awesome02.jpg"] sideimagealt: "Awesome Page Image" images: ["img/awesome01.jpg", "img/awesome02.jpg"] imagealt: "Awesome Page Image" draft: false weight: 1 --- exampleSite/content/emoji-support.md
@@ -1,5 +1,6 @@ --- author: "Hugo Authors" author: name: "Hugo Authors" title: "Emoji Support" description: "Guide to emoji usage in Hugo" tags: [ @@ -7,8 +8,8 @@ ] date: 2019-12-08T00:00:00-00:00 buttonimage: "img/coolbutton.jpg" sideimages: ["img/cool01.jpg"] sideimagealt: "Cool Page Image" images: ["img/cool01.jpg"] imagealt: "Cool Page Image" draft: false weight: 4 --- exampleSite/content/markdown-syntax.md
@@ -1,5 +1,6 @@ --- author: "Hugo Authors" author: name: "Hugo Authors" title: "Markdown Syntax Guide" description: "Sample article showcasing basic Markdown syntax and formatting for HTML elements." tags: [ @@ -12,13 +13,12 @@ "themes", "syntax", ] series: ["Themes Guide"] aliases: ["migrate-from-jekyl"] date: 2019-12-08T00:00:00-00:00 buttonimage: "img/interestingbutton.jpg" sideimages: ["img/interesting01.jpg"] sideimagealt: "Interesting Page Image" images: ["img/interesting01.jpg"] imagealt: "Interesting Page Image" draft: false weight: 3 --- exampleSite/content/math-typesetting.mmark
@@ -1,11 +1,12 @@ --- author: Hugo Authors author: name: Hugo Authors title: Math Typesetting date: 2019-03-08 description: A brief guide to setup KaTeX buttonimage: "img/mathbutton.jpg" sideimages: ["img/math01.jpg"] sideimagealt: "A binary text wall covering from the computer history museum." images: ["img/math01.jpg"] imagealt: "A binary text wall covering from the computer history museum." markup: mmark math: true weight: 6 exampleSite/content/rich-content.md
@@ -1,5 +1,4 @@ +++ author = "Hugo Authors" title = "Rich Content" description = "A brief description of Hugo Shortcodes" tags = [ @@ -7,9 +6,11 @@ "privacy", ] buttonimage = "img/richbutton.jpg" sideimages = ["img/rich01.jpg"] sideimagealt = "Looking out on a pond at Capilano Suspension Bridge, Vancouver, BC" images = ["img/rich01.jpg"] imagealt = "Looking out on a pond at Capilano Suspension Bridge, Vancouver, BC" weight = 5 [author] name = "Hugo Authors" +++ Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugo-s-built-in-shortcodes) for rich content, along with a [Privacy Config](https://gohugo.io/about/hugo-and-gdpr/) and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds. exampleSite/static/favicon.icoBinary files differ
layouts/_default/single.html
@@ -1,7 +1,7 @@ {{ define "main" }} <div class="col-12 col-sm-5"> {{ with .Params.sideimages }} <img id="sideimage" class="morerounded" src="{{ "img/side_image_template.png" | relURL }}" alt="{{ $.Params.sideimagealt }}"> {{ with .Params.images }} <img id="sideimage" class="morerounded" src="{{ "img/side_image_template.png" | relURL }}" alt="{{ $.Params.imagealt }}"> {{ end }} </div> <div class="col-12 col-sm-7"> layouts/partials/body_footer.html
@@ -1 +1 @@ {{ with .Site.Params.webmasterEmail }}Webmaster: <a href="mailto:{{ . }}">{{ . }}</a>{{ end }} {{ with .Site.Author.email }}Webmaster: <a href="mailto:{{ . }}">{{ . }}</a>{{ end }} layouts/partials/foot.html
@@ -1,37 +0,0 @@ <script> function toggleDisplay( elementID ) { elem = document.getElementById(elementID); if( elem.style.display == "none" ) { elem.style.display = "block"; } else if( elem.style.display == "block" ) { elem.style.display = "none"; } } {{ with .Site.Params.headerimages }} function randomHeaderImg() { images = [ {{- $last_elem := sub (len .) 1 -}} {{ range $index, $component := . -}} {{ . | absURL }}{{ if lt $index $last_elem }},{{ end }} {{- end -}} ]; i = Math.ceil(Math.random() * images.length) - 1; document.getElementById("headerimg").src = images[i]; } window.onload = randomHeaderImg; {{ end }} {{ with .Params.sideimages }} function randomSideAndHeaderImg() { randomHeaderImg(); images = [ {{- $last_elem := sub (len .) 1 -}} {{ range $index, $component := . -}} {{ . | absURL }}{{ if lt $index $last_elem }},{{ end }} {{- end -}} ]; i = Math.ceil(Math.random() * images.length) - 1; document.getElementById("sideimage").src = images[i]; } window.onload = randomSideAndHeaderImg; {{ end }} </script> layouts/partials/head.html
@@ -1,52 +1,41 @@ <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> {{- if isset .Params "description" -}} {{- $.Scratch.Set "description" .Params.description -}} {{- else -}} {{- if isset .Site.Params "description" -}} {{- $.Scratch.Set "description" .Site.Params.description -}} {{- end -}} {{- end }} {{ with $.Scratch.Get "description" -}}<meta name="description" content="{{ . }}">{{- end }} {{- if isset .Params "author" -}} {{- $.Scratch.Set "author" .Params.author -}} {{- else -}} {{- if isset .Site.Params "author" -}} {{- $.Scratch.Set "author" .Site.Params.author -}} {{- end -}} {{- end }} {{ with $.Scratch.Get "author" -}}<meta name="author" content="{{ . }}">{{- end }} <link rel="icon" href="{{ .Site.Params.favicon | relURL }}"> <title>{{ .Site.Title }}{{ with .Params.title }} - {{ . }}{{ end }}</title> {{ with .Params.actualurl }} {{ $description := .Params.description | default .Site.Params.description }} {{- with $description }}<meta name="description" content="{{ . }}">{{ end }} {{ $author := .Params.author.name | default .Site.Author.name }} {{- with $author }}<meta name="author" content="{{ . }}">{{ end }} <link rel="icon" href="{{ .Site.Params.favicon | relURL }}"> {{- template "_internal/opengraph.html" . }} {{- template "_internal/twitter_cards.html" . }} {{ with .Params.actualurl -}} <meta http-equiv="refresh" content="0;URL='{{ . | relURL }}'" /> {{ end }} <!-- SEO Prefs --> {{- end }} <meta name="robots" content="index,follow"> <meta name="referrer" content="origin-when-cross-origin"> {{ with .Site.Params.googlesiteverification }}<meta name="google-site-verification" content="{{ . }}">{{ end }} {{ with .Site.Params.msvalidate }}<meta name="msvalidate.01" content="{{ . }}">{{ end }} <!-- Site Generator --> <meta name="generator" content="Hugo {{ hugo.Version }}"> <!-- Bootstrap CSS --> {{ hugo.Generator }} {{ with .OutputFormats.Get "RSS" }} <link href="{{ .RelPermalink }}" rel="alternate" type="application/rss+xml" title="{{ $.Site.Title }}" /> <link href="{{ .RelPermalink }}" rel="feed" type="application/rss+xml" title="{{ $.Site.Title }}" /> {{ end }} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <!--My CSS--> <link rel="stylesheet" href="{{ "css/myscreen.css" | relURL }}" type="text/css" media="screen"> <link rel="stylesheet" href="{{ "css/myprint.css" | relURL }}" type="text/css" media="print"> <meta name="theme-color" content="black"> {{ template "_internal/google_analytics_async.html" . }} {{- template "_internal/google_analytics_async.html" . }} <noscript> <style> {{ with .Site.Params.headerimages }} {{ with .Site.Params.images }} #headerimg { background-image: url({{ index . 0 | safeURL | absURL }}); background-size: cover; } {{ end }} {{ with .Params.sideimages }} {{ with .Params.images }} #sideimage { background-image: url({{ index . 0 | safeURL | absURL }}); background-size: cover; @@ -54,3 +43,62 @@ {{ end }} </style> </noscript> <script> function toggleDisplay( elementID ) { elem = document.getElementById(elementID); if( elem.style.display == "none" ) { elem.style.display = "block"; } else if( elem.style.display == "block" ) { elem.style.display = "none"; } } {{ with .Site.Params.images }} function randomHeaderImg() { let images = [ {{- $last_elem := sub (len .) 1 -}} {{ range $index, $component := . -}} {{ . | absURL }}{{ if lt $index $last_elem }},{{ end }} {{- end -}} ]; let img_ind = Math.ceil(Math.random() * images.length) - 1; let sel_url = images[img_ind] let img = new Image(); img.onload = function() { function set_img(old_onload) { let element = document.getElementById("headerimg"); element.src = sel_url; if( old_onload ){ old_onload() } } if( document.readyState === "complete" ) { set_img() } else { window.onload = set_img(window.onload) } } img.src = sel_url; } randomHeaderImg(); {{ end }} {{ with .Params.images }} function randomSideImg() { let images = [ {{- $last_elem := sub (len .) 1 -}} {{ range $index, $component := . -}} {{ . | absURL }}{{ if lt $index $last_elem }},{{ end }} {{- end -}} ]; let img_ind = Math.ceil(Math.random() * images.length) - 1; let sel_url = images[img_ind] let img = new Image(); img.onload = function() { function set_img(old_onload) { let element = document.getElementById("sideimage"); element.src = sel_url; if( old_onload ){ old_onload() } } if( document.readyState === "complete" ) { set_img() } else { window.onload = set_img(window.onload) } } img.src = sel_url; } randomSideImg(); {{ end }} </script>
