Remove unused themes

This commit is contained in:
Don Harper 2020-06-07 12:08:29 -05:00
parent 122d17a9fc
commit 674d4b5cc6
561 changed files with 0 additions and 151539 deletions

View file

@ -1,9 +0,0 @@
The MIT License (MIT)
Copyright (c) 2018 digiVend UG
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View file

@ -1,19 +0,0 @@
# Bleach for Hugo
![screenshot](/images/screenshot.png?raw=true "Home")
Bleach is an HTML5 and Bootstrap based blog template for Hugo. It provides a simple and clean look for a modern and professional blog.
## Features
- Fully Responsive
- Bootstrap
- Lightweight
## License
This Template is released under [the MIT License](https://opensource.org/licenses/MIT).
## Installation
[Getting Started Guide](https://gohugo.io/getting-started/installing/)

View file

@ -1,2 +0,0 @@
+++
+++

View file

@ -1,475 +0,0 @@
/*= Basics =*/
@import url(
https://fonts.googleapis.com/css?family=Roboto:400,
300,
100,
500,
700
);
@import url(
https://fonts.googleapis.com/css?family=Roboto+Condensed:400,
300,
700
);
@import url(https://fonts.googleapis.com/css?family=Glegoo);
body {
font-family: "Roboto", sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
color: rgba(0, 0, 0, 0.8);
font-size: 20px;
line-height: 1.4;
overflow-x: hidden;
}
div {
display: block;
}
img {
border: 0;
max-width: 90%;
height: auto;
}
a {
text-decoration: none;
color: rgba(100, 100, 100, 0.8);
}
a:hover {
color: inherit;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
background-color: transparent;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
h2 {
display: block;
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
h3 {
display: block;
font-size: 1.17em;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
.clear {
display: table;
content: " ";
clear: both;
}
.lightText {
color: rgba(0, 0, 0, 0.54);
fill: rgba(0, 0, 0, 0.54);
}
.line-spacer {
margin-top: 5px;
margin-bottom: 5px;
height: 0.5pt;
background-color: rgba(0, 0, 0, 0.3);
}
.content {
}
.fof {
margin-left: auto;
margin-right: auto;
}
/*= Topbar =*/
.topbar {
top: 0;
width: 100%;
background: #fff;
color: #fff;
transition: all 0.2s ease-out 0s;
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
border-bottom: 1px solid #dedede;
z-index: 10;
height: 67px;
}
.topbar.animated-header {
padding: 20px 0;
background: #fff;
box-shadow: none;
}
.brand {
margin: 10px;
height: 47px;
}
.brand-title,
.brand-title a {
position: relative;
color: rgba(0, 0, 0, 0.8);
font-weight: 600;
font-size: 26px;
line-height: 1.6;
margin-left: auto;
}
.navbar {
border: 0;
border-radius: 0;
margin-bottom: 0;
padding: 0;
}
.navbar.bg-light {
background: #fff !important;
}
.navbar .nav-item .nav-link {
color: #444 !important;
font-size: 14px;
font-weight: 500;
transition: 0.3s all;
text-transform: uppercase;
padding: 5px 15px;
display: block;
}
.navbar .nav-item .nav-link:hover {
color: #02bdd5 !important;
}
.navbar .nav-item:last-child .nav-link {
padding-right: 0;
}
.head-spacer {
padding: 10px;
}
/*= Collection Body =*/
.collection {
margin-bottom: 40px !important;
max-width: 100%;
}
.collection-item-large {
max-width: 1072px !important;
width: 100vw;
margin-bottom: 15px !important;
box-sizing: border-box;
max-height: 350px;
}
.collection-item-large-thumb,
.collection-item-large-content {
position: relative;
min-height: 1px;
max-height: 350px;
}
.collection-item-large-content {
padding-left: 20px;
}
.collection-item-large-thumb {
width: 100%;
height: 350px !important;
}
.collection-item-large-headline {
font-weight: 600;
font-size: 34px;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
}
.collection-item-large-description,
.collection-item-description {
font-weight: 400 !important;
font-size: 20px !important;
line-height: 1.2 !important;
}
.collection-item-clearfix {
margin-top: 20px;
font-size: 15px;
line-height: 1.4px;
padding-left: 10px;
padding-top: 15px;
}
.collection-item {
margin-top: 15px !important;
margin-bottom: 15px !important;
box-sizing: border-box;
}
.collection-item-thumb,
.collection-item-large-thumb {
display: block;
background-origin: border-box !important;
background-size: cover !important;
}
.collection-item-thumb {
height: 172px;
}
.collection-item-content {
position: relative;
min-height: 1px;
}
.collection-item-headline {
word-break: break-word;
word-wrap: break-word;
text-overflow: ellipsis !important;
line-height: 1.1;
font-size: 26px;
font-weight: 600;
color: rgba(0, 0, 0, 0.8);
}
/*= Footer =*/
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100vw;
height: 40px;
color: #000;
background-color: #fff;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.copyright,
.impressum,
.social {
margin-top: 10px !important;
margin-bottom: 10px !important;
font-size: 18px;
color: rgba(0, 0, 0, 0.8);
}
.impressum {
float: right;
margin-right: 40px;
}
.impressum a {
color: rgba(0, 0, 0, 0.8);
}
.copyright {
margin-left: 10px;
}
.social {
font-size: 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: 10px;
}
.social a {
color: rgba(0, 0, 0, 0.8);
}
/*= Post =*/
.post {
position: relative;
width: 100%;
margin-bottom: 40px;
}
.post-header {
margin-left: auto;
margin-right: auto;
width: 60%;
max-width: 1072px;
}
.maintitle {
padding-top: 16px !important;
}
.subtitle {
font-weight: 400;
margin-top: 5px;
margin-bottom: 22px;
font-size: 28px;
line-height: 1.22;
letter-spacing: -0.012em;
}
.figure {
position: relative;
z-index: 100;
margin-top: 22px;
margin-bottom: 40px;
width: 100%;
}
.figure img {
visibility: visible;
opacity: 1;
transition: visibility 0s linear 0s, opacity 0.4s 0s;
}
/*= Paginator =*/
.paginator {
margin-top: 40px;
margin-left: auto;
margin-right: auto;
display: inline-block;
}
.paginator .paginator-item {
float: left;
margin-right: 10px;
}
.paginator .paginator-item a[disabled] {
cursor: pointer;
opacity: 0.5;
pointer-events: none;
user-select: none;
}
.paginator .paginator-item a.active {
border: 1px solid rgba(0, 0, 0, 0.6);
border-radius: 5px;
}
.paginator .paginator-item a:hover:not(.active) {
background-color: rgba(0, 0, 0, 0.3);
}
/*= Resize =*/
@media (min-width: 1200px) {
.collection-latest {
margin-left: auto !important;
margin-right: auto !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.collection-latest {
margin-left: 30px;
}
.collection-item-large-thumb {
width: 100%;
height: 350px !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.collection-latest {
height: 700px;
}
.collection-item-large-thumb {
max-width: 690px;
padding-left: 15px;
padding-right: 15px;
margin-left: 30px;
}
.collection-item-large-content {
margin-left: 10px;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.collection-item-large-thumb {
width: 510px;
height: 172px !important;
margin-left: 30px;
}
.collection-item-large-content {
margin-left: 10px;
}
.collection-item-large-headline {
word-break: break-word;
word-wrap: break-word;
text-overflow: ellipsis !important;
line-height: 1.1;
font-size: 26px;
font-weight: 600;
}
.collection-item-large-description {
font-weight: 400 !important;
font-size: 20px !important;
line-height: 1.2 !important;
}
.line-spacer {
display: none;
}
}
@media (max-width: 575px) {
.collection-item-large-thumb {
margin-right: 47px;
height: 172px !important;
margin-left: 30px;
}
.collection-item-large-content {
margin-left: 10px;
}
.collection-item-large-headline {
word-break: break-word;
word-wrap: break-word;
text-overflow: ellipsis !important;
line-height: 1.1;
font-size: 26px;
font-weight: 600;
}
.collection-item-large-description {
font-weight: 400 !important;
font-size: 20px !important;
line-height: 1.2 !important;
}
.line-spacer {
display: none;
}
}
@media (max-width: 300px) {
.brand-title {
display: none;
}
}

View file

@ -1,23 +0,0 @@
baseURL = "https://example.com"
languageCode = "en-us"
defaultContentLanguage = "en"
title = "Bleach Example"
theme = "Bleach"
[params]
description = "A simple and lightweight Hugo theme for a blazing fast static blog!"
author = "Your Name"
logo = "images/logo.jpg"
dateFormat = "Jan 2, 2006"
googleAnalitycsID = "Your ID"
[params.footer]
impressum = false
company = "example Inc."
[params.social]
facebook = "https://facebooke.com"
twitter = "https://twitter.com"
instagram = "https://instagram.com"
# github = "https://github.com"
# linkedin = "https://linkedin.com"

View file

@ -1,10 +0,0 @@
---
title: "Impressum"
date: "2019-03-07"
type: "impressum"
author: Daniel Igel
---
# Impressum
This site is really only necessary for German users. Do learn more about an Impressum click [here](https://www.e-recht24.de/artikel/datenschutz/209.html) (German).

View file

@ -1,8 +0,0 @@
---
title: "Basic Block Post"
date: "2019-03-07"
description: "This is an example blog post."
tags: ["basic", "templates", "example"]
---
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

View file

@ -1,325 +0,0 @@
---
date: "2014-04-02"
tags: ["go", "templates", "hugo"]
title: "(Hu)go Template Primer"
image: "images/program.jpeg"
---
Hugo uses the excellent [Go][] [html/template][gohtmltemplate] library for
its template engine. It is an extremely lightweight engine that provides a very
small amount of logic. In our experience that it is just the right amount of
logic to be able to create a good static website. If you have used other
template systems from different languages or frameworks you will find a lot of
similarities in Go templates.
This document is a brief primer on using Go templates. The [Go docs][gohtmltemplate]
provide more details.
## Introduction to Go Templates
Go templates provide an extremely simple template language. It adheres to the
belief that only the most basic of logic belongs in the template or view layer.
One consequence of this simplicity is that Go templates parse very quickly.
A unique characteristic of Go templates is they are content aware. Variables and
content will be sanitized depending on the context of where they are used. More
details can be found in the [Go docs][gohtmltemplate].
## Basic Syntax
Golang templates are HTML files with the addition of variables and
functions.
**Go variables and functions are accessible within {{ }}**
Accessing a predefined variable "foo":
{{ foo }}
**Parameters are separated using spaces**
Calling the add function with input of 1, 2:
{{ add 1 2 }}
**Methods and fields are accessed via dot notation**
Accessing the Page Parameter "bar"
{{ .Params.bar }}
**Parentheses can be used to group items together**
{{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }}
## Variables
Each Go template has a struct (object) made available to it. In hugo each
template is passed either a page or a node struct depending on which type of
page you are rendering. More details are available on the
[variables](/layout/variables) page.
A variable is accessed by referencing the variable name.
<title>{{ .Title }}</title>
Variables can also be defined and referenced.
{{ $address := "123 Main St."}}
{{ $address }}
## Functions
Go template ship with a few functions which provide basic functionality. The Go
template system also provides a mechanism for applications to extend the
available functions with their own. [Hugo template
functions](/layout/functions) provide some additional functionality we believe
are useful for building websites. Functions are called by using their name
followed by the required parameters separated by spaces. Template
functions cannot be added without recompiling hugo.
**Example:**
{{ add 1 2 }}
## Includes
When including another template you will pass to it the data it will be
able to access. To pass along the current context please remember to
include a trailing dot. The templates location will always be starting at
the /layout/ directory within Hugo.
**Example:**
{{ template "chrome/header.html" . }}
## Logic
Go templates provide the most basic iteration and conditional logic.
### Iteration
Just like in Go, the Go templates make heavy use of range to iterate over
a map, array or slice. The following are different examples of how to use
range.
**Example 1: Using Context**
{{ range array }}
{{ . }}
{{ end }}
**Example 2: Declaring value variable name**
{{range $element := array}}
{{ $element }}
{{ end }}
**Example 2: Declaring key and value variable name**
{{range $index, $element := array}}
{{ $index }}
{{ $element }}
{{ end }}
### Conditionals
If, else, with, or, & and provide the framework for handling conditional
logic in Go Templates. Like range, each statement is closed with `end`.
Go Templates treat the following values as false:
- false
- 0
- any array, slice, map, or string of length zero
**Example 1: If**
{{ if isset .Params "title" }}<h4>{{ index .Params "title" }}</h4>{{ end }}
**Example 2: If -> Else**
{{ if isset .Params "alt" }}
{{ index .Params "alt" }}
{{else}}
{{ index .Params "caption" }}
{{ end }}
**Example 3: And & Or**
{{ if and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
**Example 4: With**
An alternative way of writing "if" and then referencing the same value
is to use "with" instead. With rebinds the context `.` within its scope,
and skips the block if the variable is absent.
The first example above could be simplified as:
{{ with .Params.title }}<h4>{{ . }}</h4>{{ end }}
**Example 5: If -> Else If**
{{ if isset .Params "alt" }}
{{ index .Params "alt" }}
{{ else if isset .Params "caption" }}
{{ index .Params "caption" }}
{{ end }}
## Pipes
One of the most powerful components of Go templates is the ability to
stack actions one after another. This is done by using pipes. Borrowed
from unix pipes, the concept is simple, each pipeline's output becomes the
input of the following pipe.
Because of the very simple syntax of Go templates, the pipe is essential
to being able to chain together function calls. One limitation of the
pipes is that they only can work with a single value and that value
becomes the last parameter of the next pipeline.
A few simple examples should help convey how to use the pipe.
**Example 1 :**
{{ if eq 1 1 }} Same {{ end }}
is the same as
{{ eq 1 1 | if }} Same {{ end }}
It does look odd to place the if at the end, but it does provide a good
illustration of how to use the pipes.
**Example 2 :**
{{ index .Params "disqus_url" | html }}
Access the page parameter called "disqus_url" and escape the HTML.
**Example 3 :**
{{ if or (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
Stuff Here
{{ end }}
Could be rewritten as
{{ isset .Params "caption" | or isset .Params "title" | or isset .Params "attr" | if }}
Stuff Here
{{ end }}
## Context (aka. the dot)
The most easily overlooked concept to understand about Go templates is that {{ . }}
always refers to the current context. In the top level of your template this
will be the data set made available to it. Inside of a iteration it will have
the value of the current item. When inside of a loop the context has changed. .
will no longer refer to the data available to the entire page. If you need to
access this from within the loop you will likely want to set it to a variable
instead of depending on the context.
**Example:**
{{ $title := .Site.Title }}
{{ range .Params.tags }}
<li> <a href="{{ $baseurl }}/tags/{{ . | urlize }}">{{ . }}</a> - {{ $title }} </li>
{{ end }}
Notice how once we have entered the loop the value of {{ . }} has changed. We
have defined a variable outside of the loop so we have access to it from within
the loop.
# Hugo Parameters
Hugo provides the option of passing values to the template language
through the site configuration (for sitewide values), or through the meta
data of each specific piece of content. You can define any values of any
type (supported by your front matter/config format) and use them however
you want to inside of your templates.
## Using Content (page) Parameters
In each piece of content you can provide variables to be used by the
templates. This happens in the [front matter](/content/front-matter).
An example of this is used in this documentation site. Most of the pages
benefit from having the table of contents provided. Sometimes the TOC just
doesn't make a lot of sense. We've defined a variable in our front matter
of some pages to turn off the TOC from being displayed.
Here is the example front matter:
```
---
title: "Permalinks"
date: "2013-11-18"
aliases:
- "/doc/permalinks/"
groups: ["extras"]
groups_weight: 30
notoc: true
---
```
Here is the corresponding code inside of the template:
{{ if not .Params.notoc }}
<div id="toc" class="well col-md-4 col-sm-6">
{{ .TableOfContents }}
</div>
{{ end }}
## Using Site (config) Parameters
In your top-level configuration file (eg, `config.yaml`) you can define site
parameters, which are values which will be available to you in chrome.
For instance, you might declare:
```yaml
params:
CopyrightHTML: "Copyright &#xA9; 2013 John Doe. All Rights Reserved."
TwitterUser: "spf13"
SidebarRecentLimit: 5
```
Within a footer layout, you might then declare a `<footer>` which is only
provided if the `CopyrightHTML` parameter is provided, and if it is given,
you would declare it to be HTML-safe, so that the HTML entity is not escaped
again. This would let you easily update just your top-level config file each
January 1st, instead of hunting through your templates.
```
{{if .Site.Params.CopyrightHTML}}<footer>
<div class="text-center">{{.Site.Params.CopyrightHTML | safeHtml}}</div>
</footer>{{end}}
```
An alternative way of writing the "if" and then referencing the same value
is to use "with" instead. With rebinds the context `.` within its scope,
and skips the block if the variable is absent:
```
{{with .Site.Params.TwitterUser}}<span class="twitter">
<a href="https://twitter.com/{{.}}" rel="author">
<img src="/images/twitter.png" width="48" height="48" title="Twitter: {{.}}"
alt="Twitter"></a>
</span>{{end}}
```
Finally, if you want to pull "magic constants" out of your layouts, you can do
so, such as in this example:
```
<nav class="recent">
<h1>Recent Posts</h1>
<ul>{{range first .Site.Params.SidebarRecentLimit .Site.Recent}}
<li><a href="{{.RelPermalink}}">{{.Title}}</a></li>
{{end}}</ul>
</nav>
```
[go]: https://golang.org/
[gohtmltemplate]: https://golang.org/pkg/html/template/

View file

@ -1,79 +0,0 @@
---
date: "2014-04-02"
tags: ["hugo", "git", "fun"]
title: "Getting Started with Hugo"
image: "images/draw.jpeg"
---
## Step 1. Install Hugo
Go to [Hugo releases](https://github.com/spf13/hugo/releases) and download the
appropriate version for your OS and architecture.
Save it somewhere specific as we will be using it in the next step.
More complete instructions are available at [Install Hugo](https://gohugo.io/getting-started/installing/)
## Step 2. Build the Docs
Hugo has its own example site which happens to also be the documentation site
you are reading right now.
Follow the following steps:
1. Clone the [Hugo repository](http://github.com/spf13/hugo)
2. Go into the repo
3. Run hugo in server mode and build the docs
4. Open your browser to http://localhost:1313
Corresponding pseudo commands:
git clone https://github.com/spf13/hugo
cd hugo
/path/to/where/you/installed/hugo server --source=./docs
> 29 pages created
> 0 tags index created
> in 27 ms
> Web Server is available at http://localhost:1313
> Press ctrl+c to stop
Once you've gotten here, follow along the rest of this page on your local build.
## Step 3. Change the docs site
Stop the Hugo process by hitting Ctrl+C.
Now we are going to run hugo again, but this time with hugo in watch mode.
/path/to/hugo/from/step/1/hugo server --source=./docs --watch
> 29 pages created
> 0 tags index created
> in 27 ms
> Web Server is available at http://localhost:1313
> Watching for changes in /Users/spf13/Code/hugo/docs/content
> Press ctrl+c to stop
Open your [favorite editor](http://vim.spf13.com) and change one of the source
content pages. How about changing this very file to *fix the typo*. How about changing this very file to *fix the typo*.
Content files are found in `docs/content/`. Unless otherwise specified, files
are located at the same relative location as the url, in our case
`docs/content/overview/quickstart.md`.
Change and save this file.. Notice what happened in your terminal.
> Change detected, rebuilding site
> 29 pages created
> 0 tags index created
> in 26 ms
Refresh the browser and observe that the typo is now fixed.
Notice how quick that was. Try to refresh the site before it's finished building. I double dare you.
Having nearly instant feedback enables you to have your creativity flow without waiting for long builds.
## Step 4. Have fun
The best way to learn something is to play with it.

View file

@ -1,9 +0,0 @@
---
title: "Example latest Post"
date: 2019-03-07T00:00:01
description: "This is an example latest post, for you to see how i looks."
image: "images/latest.jpeg"
tags: ["latest", "hugo", "example"]
---
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 692 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 281 KiB

View file

@ -1,5 +0,0 @@
{{ define "main"}}
<div class="d-flex justify-content-center align-content-center">
404 PAGE NOT FOUND
</div>
{{ end }}

View file

@ -1,15 +0,0 @@
<!DOCTYPE html>
<html lang="{{ with.Site.LanguageCode }}{{ . }}{{ else }}en-US{{ end }}">
{{- partial "head.html" . -}}
<body>
{{- partial "header.html" . -}}
<div class="content">
{{- block "main" . }}{{- end }}
</div>
{{- partial "footer.html" . -}}
{{- partial "scripts.html" . -}}
</body>
</html>

View file

@ -1 +0,0 @@

View file

@ -1,54 +0,0 @@
{{ define "main" }}
{{ $dateFormat := $.Site.Params.dateFormat | default "Jan 2, 2006" }}
<div class="container">
<div class="post">
<div class="post-header row">
<div class="title-tile col-md-6">
<h1 class="maintitle">
{{ .Title }}
</h1>
<h2 class="subtitle lightText">
{{ .Description }}
</h2>
<div class="clearfix lightText">
<i class="icon ion-md-calendar"></i> {{ dateFormat $dateFormat .Date }}
</div>
</div>
<div class="figure col-md-6">
<img class="img-fluid"
src="{{ absURL (default "images/default-img-header.jpeg" (default .Params.image .Params.thumbnail)) }}"
alt="figure" />
</div>
</div>
<div class="post-content">
{{ .Content }}
</div>
</div>
{{ if .Params.series }}
{{ $name := index .Params.series 0 }}
<hr/>
<p><a href="" id="series"></a>This is a post in the
<b>{{$name}}</b> series.<br/>
Other posts in this series:</p>
{{ $name := $name | urlize }}
{{ $series := index .Site.Taxonomies.series $name }}
<ul class="series">
{{ range $series.Pages }}
<li>{{.Date.Format "Jan 02, 2006"}} -
<a href="{{.Permalink}}">{{.LinkTitle}}</a></li>
{{end}}
</ul>
{{end}}
{{if .NextInSection}}<p>Next: <a href="{{.NextInSection.Permalink}}">{{.NextInSection.Title}}</a></p>{{end}}
{{if .PrevInSection}}<p>Previous: <a href="{{.PrevInSection.Permalink}}">{{.PrevInSection.Title}}</a></p>{{end}}
</div>
{{ end }}

View file

@ -1,13 +0,0 @@
{{ define "main" }}
<div class="container">
<div class="post">
<div class="post-content">
{{ .Content }}
</div>
</div>
</div>
{{ end }}

View file

@ -1,69 +0,0 @@
{{ define "main" }}
{{ $dateFormat := $.Site.Params.dateFormat | default "Jan 2, 2006" }}
{{ $posts := where .Pages.ByDate.Reverse "Section" "posts" }}
{{ $paginator := .Paginate (after 1 $posts) 3 }}
<div class="collection">
<div class="container">
<div class="row">
<div class="collection-latest">
{{ range first 1 $posts }}
<section class="collection-item-large">
<div class="row">
<a href="{{ .Permalink }}" class="col-lg-7 collection-item-large-thumb"
style="background-image: url('{{ absURL (default "images/default-img-header.jpeg" (default .Params.image .Params.thumbnail)) }}'); background-position: 50% 50% !important;"></a>
<div class="col-lg-5 collection-item-large-content">
<a href="{{ .Permalink }}">
<h3 class="collection-item-large-headline">
{{ .Title }}
</h3>
<div class="collection-item-large-description lightText">
{{ .Description | markdownify }}
</div>
</a>
<div class="collection-item-clearfix lightText">
<i class="icon ion-md-calendar"></i> {{ dateFormat $dateFormat .Date }}
</div>
</div>
</div>
</section>
{{ end }}
</div>
</div>
<div class="line-spacer"></div>
<div class="collection-list">
<div class="row">
{{ range $paginator.Pages }}
<div class="col-md-4 collection-item">
<a href="{{ .Permalink }}" class="collection-item-thumb"
style="background-image: url('{{ absURL (default "images/default-img-header.jpeg" (default .Params.image .Params.thumbnail)) }}'); background-position: 50% 50% !important;"></a>
<div class="collection-item-content">
<a href="{{ .Permalink }}">
<h3 class="collection-item-headline">
{{ .Title }}
</h3>
<div class="collection-item-description lightText">
{{ .Description | markdownify }}
</div>
</a>
<div class="collection-item-clearfix lightText">
<i class="ion-md-calendar"></i> {{ dateFormat $dateFormat .Date }}
</div>
</div>
</div>
{{ end }}
</div>
</div>
{{ partial "paginator.html" . }}
</div>
</div>
</div>
{{ end }}

View file

@ -1,81 +0,0 @@
<div class="archive-header">
<h1>
Category: {{ .Title }}
{{ if .Site.Params.social.rss }}
<a href="{{ .RSSLink }}" data-animate-hover="pulse" class="in-page-rss" target="_blank">
<i class="fas fa-rss" title="rss"></i>
<span class="screen-reader-text">rss</span>
</a>
{{ end }}
</h1>
</div>
<h1 class="screen-reader-text">Posts</h1>
<div id="loop-container" class="loop-container">
{{ range $index, $element := (where .Pages "Section" "post").ByDate.Reverse }}
{{ $scratch := newScratch }}
{{ if .Site.Params.writers }}
{{ $scratch.Set "writer" (index .Site.Params.writers (lower .Params.writer) | default dict) }}
{{ else }}
{{ $scratch.Set "writer" .Site.Params.social | default dict }}
{{ end }}
{{ $writer := $scratch.Get "writer" }}
{{ if and (isset .Params "image") .Params.image }}
{{ if eq (mod $index 2) 0 }}
<div class="post type-post status-publish format-standard has-post-thumbnail hentry category-design tag-memories tag-normal-post tag-standard-2 excerpt zoom full-without-featured odd excerpt">
{{ else }}
<div class="post type-post status-publish format-standard has-post-thumbnail hentry category-design tag-memories tag-normal-post tag-standard-2 excerpt zoom full-without-featured even excerpt">
{{ end }}
{{ else }}
<div class="post type-post status-publish format-standard hentry category-standard category-travel excerpt zoom full-without-featured odd excerpt">
{{ end }}
{{ if and (isset .Params "image") .Params.image }}
<a class="featured-image-link" href="{{ .Permalink }}"><div class='featured-image lazy lazy-bg-image' {{if isset .Site.Params "usepostimgfolder"}}data-background="{{ .Permalink }}{{ .Params.image }}"{{ else }}data-background="{{ .Params.image | absURL }}"{{ end }}></div></a>
{{ end }}
<div class="excerpt-container">
<div class="excerpt-meta">
<span class="date">{{ .Date.Format "02 January" }}</span>
{{ if and (isset .Site.Params "authorlink") .Site.Params.authorLink }}
{{ if and (isset .Site.Params "author") .Site.Params.author }}
<span> / </span>
<span class="author">
<a href="{{ $writer.link | default .Site.Params.authorlink | absURL }}" title="Posts by {{ .Params.writer | default .Site.Params.author }}" rel="author">{{ .Params.writer | default .Site.Params.author }}</a>
</span>
{{ end }}
{{ else }}
<span class="author">
{{ .Params.writer | default .Site.Params.author }}
</span>
{{ end }}
{{ range .Params.categories }}
<span> / </span>
<span class="category">
<a href="/categories/{{ . | urlize }}">{{ . }}</a>
</span>
{{ end }}
</div>
<div class='excerpt-header'>
<h2 class='excerpt-title'>
<a href="{{ .Permalink }} "> {{ .Title }} </a>
</h2>
</div>
<div class='excerpt-content'>
<article>
{{ .Summary }}
<div class="more-link-wrapper"><a class="more-link" href="{{ .Permalink }}">Read the post<span class="screen-reader-text">This is a Standard Post</span></a></div>
</article>
</div>
</div>
</div>
{{ end }}
</div>

View file

@ -1,20 +0,0 @@
<div class="footer">
<div class="clearfix">
<div class="copyright float-left">
<span>&copy;</span>
<script>document.write(new Date().getFullYear())</script>
<span>
{{ if isset .Site.Params.footer "company"}}
{{ .Site.Params.footer.company }}
{{ else }}
digiVend
{{ end }}
</span>
</div>
{{ if .Site.Params.footer.impressum }}
<div class="impressum">
<a href="/impressum">Impressum</a>
</div>
{{ end }}
</div>
</footer>

View file

@ -1,38 +0,0 @@
{{ "<!-- Basic Page Needs -->" | safeHTML }}
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="description"
content="{{ with.Description }}{{ . }}{{ else }}{{ with.Site.Params.description }}{{ . }}{{ end }}{{ end }}" />
{{ with.Site.Params.author }}
<meta name="author" content="{{ . }}" />
{{ end }}
{{ .Hugo.Generator }}
{{ "<!-- Mobile Specific Metas -->" | safeHTML }}
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{{ $title := print .Title " | " .Site.Title }}
{{ if .IsHome }}
{{ $title = .Site.Title }}
{{ end }}
<title>{{ $title }}</title>
<link rel="icon" href="{{"images/favicon.png" | absURL}}">
{{ if .Site.Params.debug }}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
{{ else }}
<link rel="stylesheet" type="text/css" href="{{"plugins/bootstrap/bootstrap.min.css" | absURL}}" />
{{ end }}
<link rel="stylesheet" type="text/css" href="{{"plugins/ionicons/ionicons.min.css" | absURL}}" />
{{ "<!-- template main css file -->" | safeHTML }}
{{ $styles := resources.Get "css/style.css" | minify}}
<link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen" />
</head>

View file

@ -1,47 +0,0 @@
<div class="topbar">
<div class="row">
<div class="col-lg-12">
<nav class="navbar navbar-expand-lg">
<a href="{{ .Site.BaseURL }}">
<img class="brand" src="{{ absURL (default "images/logo.jpg" (default .Site.Params.logo)) }}" alt="logo" />
</a>
<div class="brand-title">
{{ if isset .Site.Params "title"}}
<a href="{{ .Site.BaseURL }}">
{{ .Site.Params.title }}
</a>
{{ end }}
</div>
<div class="social">
{{ if isset .Site.Params.social "facebook" }}
<a href="{{ .Site.Params.social.facebook | absURL }}">
<i class="ion-logo-facebook"></i>
</a>
{{ end }}
{{ if isset .Site.Params.social "twitter" }}
<a href="{{ .Site.Params.social.twitter | absURL }}">
<i class="ion-logo-twitter"></i>
</a>
{{ end }}
{{ if isset .Site.Params.social "instagram" }}
<a href="{{ .Site.Params.social.instagram | absURL }}">
<i class="ion-logo-instagram"></i>
</a>
{{ end }}
{{ if isset .Site.Params.social "linkedin" }}
<a href="{{ .Site.Params.social.linkedin | absURL }}">
<i class="ion-logo-linkedin"></i>
</a>
{{ end }}
{{ if isset .Site.Params.social "github" }}
<a href="{{ .Site.Params.social.github | absURL }}">
<i class="ion-logo-github"></i>
</a>
{{ end }}
</div>
</nav>
</div>
</div>
</div>
<div class="head-spacer"></div>

View file

@ -1,20 +0,0 @@
{{ $pag := $.Paginator }}
{{ if gt $pag.TotalPages 1 }}
<div class="row">
<div class="paginator">
<div class="paginator-item">
<a {{ if not $pag.HasPrev }} disabled{{ end }} href="{{ if $pag.HasPrev }}{{ $pag.Prev.URL }}{{ end }}">
&laquo;</a> </div>
<div class="paginator-item">
{{$pag.PageNumber}}
</div>
<div class="paginator-item">
<a {{ if not $pag.HasNext }} disabled{{ end }}
href="{{ if $pag.HasNext }}{{ $pag.Next.URL }}{{ end }}">&raquo;</a>
</div>
</div>
</div>
{{ end }}

View file

@ -1,70 +0,0 @@
<div class="archive-header">
<h1>
Series: {{ .Title }}
{{ if .Site.Params.social.rss }}
<a href="{{ .RSSLink }}" data-animate-hover="pulse" class="in-page-rss" target="_blank">
<i class="fas fa-rss" title="rss"></i>
<span class="screen-reader-text">rss</span>
</a>
{{ end }}
</h1>
</div>
<h1 class="screen-reader-text">Posts</h1>
<div id="loop-container" class="loop-container">
{{ range $index, $element := (where .Pages "Section" "post").ByDate.Reverse }}
{{ if and (isset .Params "image") .Params.image }}
{{ if eq (mod $index 2) 0 }}
<div class="post type-post status-publish format-standard has-post-thumbnail hentry category-design tag-memories tag-normal-post tag-standard-2 excerpt zoom full-without-featured odd excerpt">
{{ else }}
<div class="post type-post status-publish format-standard has-post-thumbnail hentry category-design tag-memories tag-normal-post tag-standard-2 excerpt zoom full-without-featured even excerpt">
{{ end }}
{{ else }}
<div class="post type-post status-publish format-standard hentry category-standard category-travel excerpt zoom full-without-featured odd excerpt">
{{ end }}
{{ if and (isset .Params "image") .Params.image }}
<a class="featured-image-link" href="{{ .Permalink }}"><div class='featured-image lazy lazy-bg-image' data-background="{{ .Params.image | absURL }}"></div></a>
{{ end }}
<div class="excerpt-container">
<div class="excerpt-meta">
<span class="date">{{ .Date.Format "02 January 2006" }}</span> <span> / </span>
{{ if and (isset .Site.Params "author") .Site.Params.author }}
<span class="author">
{{ if and (isset .Site.Params "authorlink") .Site.Params.authorLink }}
<a href="{{ .Site.Params.authorLink | default "" | absURL }}" title="Posts by {{ .Site.Params.author | default "" }}" rel="author">{{ .Site.Params.author | default "" }}</a>
{{ else }}
{{ .Site.Params.author | default "" }}
{{ end }}
</span>
{{ end }}
{{ range .Params.series }}
<span> / </span>
<span class="series">
<a href="/series/{{ . | urlize }}">{{ . }}</a>
</span>
{{ end }}
</div>
<div class='excerpt-header'>
<h2 class='excerpt-title'>
<a href="{{ .Permalink }} "> {{ .Title }} </a>
</h2>
</div>
<div class='excerpt-content'>
<article>
{{ .Summary }}
<div class="more-link-wrapper"><a class="more-link" href="{{ .Permalink }}">Read the post<span class="screen-reader-text">This is a Standard Post</span></a></div>
</article>
</div>
</div>
</div>
{{ end }}
</div>

View file

@ -1,70 +0,0 @@
<div class="archive-header">
<h1>
Tag: {{ .Title }}
{{ if .Site.Params.social.rss }}
<a href="{{ .RSSLink }}" data-animate-hover="pulse" class="in-page-rss" target="_blank">
<i class="fas fa-rss" title="rss"></i>
<span class="screen-reader-text">rss</span>
</a>
{{ end }}
</h1>
</div>
<h1 class="screen-reader-text">Posts</h1>
<div id="loop-container" class="loop-container">
{{ range $index, $element := (where .Pages "Section" "post").ByDate.Reverse }}
{{ if and (isset .Params "image") .Params.image }}
{{ if eq (mod $index 2) 0 }}
<div class="post type-post status-publish format-standard has-post-thumbnail hentry category-design tag-memories tag-normal-post tag-standard-2 excerpt zoom full-without-featured odd excerpt">
{{ else }}
<div class="post type-post status-publish format-standard has-post-thumbnail hentry category-design tag-memories tag-normal-post tag-standard-2 excerpt zoom full-without-featured even excerpt">
{{ end }}
{{ else }}
<div class="post type-post status-publish format-standard hentry category-standard category-travel excerpt zoom full-without-featured odd excerpt">
{{ end }}
{{ if and (isset .Params "image") .Params.image }}
<a class="featured-image-link" href="{{ .Permalink }}"><div class='featured-image lazy lazy-bg-image' data-background="{{ .Params.image | absURL }}"></div></a>
{{ end }}
<div class="excerpt-container">
<div class="excerpt-meta">
<span class="date">{{ .Date.Format "02 January 2006" }}</span> <span> / </span>
{{ if and (isset .Site.Params "author") .Site.Params.author }}
<span class="author">
{{ if and (isset .Site.Params "authorlink") .Site.Params.authorLink }}
<a href="{{ .Site.Params.authorLink | default "" | absURL }}" title="Posts by {{ .Site.Params.author | default "" }}" rel="author">{{ .Site.Params.author | default "" }}</a>
{{ else }}
{{ .Site.Params.author | default "" }}
{{ end }}
</span>
{{ end }}
{{ range .Params.categories }}
<span> / </span>
<span class="category">
<a href="/categories/{{ . | urlize }}">{{ . }}</a>
</span>
{{ end }}
</div>
<div class='excerpt-header'>
<h2 class='excerpt-title'>
<a href="{{ .Permalink }} "> {{ .Title }} </a>
</h2>
</div>
<div class='excerpt-content'>
<article>
{{ .Summary }}
<div class="more-link-wrapper"><a class="more-link" href="{{ .Permalink }}">Read the post<span class="screen-reader-text">This is a Standard Post</span></a></div>
</article>
</div>
</div>
</div>
{{ end }}
</div>

View file

@ -1,26 +0,0 @@
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<head>{{ partial "head.html" . }}</head>
<body class="home blog ct-body standard">
<div id="overflow-container" class="overflow-container">
<a class="skip-content" href="#main">Skip to content</a>
<header id="site-header" class="site-header" role="banner">
<div class='top-navigation'>
{{ partial "topnavigation.html" . }}
</div>
<div class="container">
{{ partial "header.html" . }}
</div>
</header>
<div id="main" class="main" role="main">
{{ partial "category.html" . }}
</div>
{{ partial "footer.html" . }}
</div>
{{ partial "scripts.html" . }}
</body>

View file

@ -1,45 +0,0 @@
<!DOCTYPE html>
<html lang="{{ .Page.Language | default "en" }}">
<head>{{ partial "head.html" . }}</head>
<body class="home blog ct-body standard">
<div id="overflow-container" class="overflow-container">
<a class="skip-content" href="#main">Skip to content</a>
<header id="site-header" class="site-header" role="banner">
<div class="container">
{{ partial "header.html" . }}
</div>
</header>
<div id="main" class="main" role="main">
<main id="site-main">
{{ if .Site.Params.categoriesByCount }}
{{ $.Scratch.Set "categories" .Data.Terms.ByCount }}
{{ else }}
{{ $.Scratch.Set "categories" .Data.Terms.Alphabetical }}
{{ end }}
<ul class="posts">
<header>
<h1>{{ i18n .Data.Plural }}</h1>
</header>
{{ $data := .Data }}
{{ range $key, $value := $.Scratch.Get "categories" }}
<li>
<article>
<header>
{{ if ne $value.Name "" }}
<a href="{{ printf "/%s/%s" $data.Plural $value.Name | urlize | relLangURL }}">{{ $value.Name }}<span style="float:right;">{{ $value.Count }}</span></a>
{{ else }}
{{ i18n "uncategorized" }}<span style="float:right;">{{ $value.Count }}</span>
{{ end }}
</header>
</article>
</li>
{{ end }}
</ul>
</main>
{{ $.Scratch.Set "showCategories" false }}
</div>
{{ partial "scripts" . }}
</body>
</html>

View file

@ -1,23 +0,0 @@
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<head>{{ partial "head.html" . }}</head>
<body class="home blog ct-body standard">
<div id="overflow-container" class="overflow-container">
<a class="skip-content" href="#main">Skip to content</a>
<header id="site-header" class="site-header" role="banner">
<div class="container">
{{ partial "header.html" . }}
</div>
</header>
<div id="main" class="main" role="main">
{{ partial "series.html" . }}
</div>
{{ partial "footer.html" . }}
</div>
{{ partial "scripts.html" . }}
</body>

View file

@ -1,45 +0,0 @@
<!DOCTYPE html>
<html lang="{{ .Page.Language | default "en" }}">
<head>{{ partial "head.html" . }}</head>
<body class="home blog ct-body standard">
<div id="overflow-container" class="overflow-container">
<a class="skip-content" href="#main">Skip to content</a>
<header id="site-header" class="site-header" role="banner">
<div class="container">
{{ partial "header.html" . }}
</div>
</header>
<div id="main" class="main" role="main">
<main id="site-main">
{{ if .Site.Params.seriesByCount }}
{{ $.Scratch.Set "series" .Data.Terms.ByCount }}
{{ else }}
{{ $.Scratch.Set "series" .Data.Terms.Alphabetical }}
{{ end }}
<ul class="posts">
<header>
<h1>{{ i18n .Data.Plural }}</h1>
</header>
{{ $data := .Data }}
{{ range $key, $value := $.Scratch.Get "series" }}
<li>
<article>
<header>
{{ if ne $value.Name "" }}
<a href="{{ printf "/%s/%s" $data.Plural $value.Name | urlize | relLangURL }}">{{ $value.Name }}<span style="float:right;">{{ $value.Count }}</span></a>
{{ else }}
{{ i18n "uncategorized" }}<span style="float:right;">{{ $value.Count }}</span>
{{ end }}
</header>
</article>
</li>
{{ end }}
</ul>
</main>
{{ $.Scratch.Set "showCategories" false }}
</div>
{{ partial "scripts" . }}
</body>
</html>

View file

@ -1,26 +0,0 @@
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<head>{{ partial "head.html" . }}</head>
<body class="home blog ct-body standard">
<div id="overflow-container" class="overflow-container">
<a class="skip-content" href="#main">Skip to content</a>
<header id="site-header" class="site-header" role="banner">
<div class='top-navigation'>
{{ partial "topnavigation.html" . }}
</div>
<div class="container">
{{ partial "header.html" . }}
</div>
</header>
<div id="main" class="main" role="main">
{{ partial "tag.html" . }}
</div>
{{ partial "footer.html" . }}
</div>
{{ partial "scripts.html" . }}
</body>

View file

@ -1,45 +0,0 @@
<!DOCTYPE html>
<html lang="{{ .Page.Language | default "en" }}">
<head>{{ partial "head.html" . }}</head>
<body class="home blog ct-body standard">
<div id="overflow-container" class="overflow-container">
<a class="skip-content" href="#main">Skip to content</a>
<header id="site-header" class="site-header" role="banner">
<div class="container">
{{ partial "header.html" . }}
</div>
</header>
<div id="main" class="main" role="main">
<main id="site-main">
{{ if .Site.Params.tagsByCount }}
{{ $.Scratch.Set "tags" .Data.Terms.ByCount }}
{{ else }}
{{ $.Scratch.Set "tags" .Data.Terms.Alphabetical }}
{{ end }}
<ul class="posts">
<header>
<h1>{{ i18n .Data.Plural }}</h1>
</header>
{{ $data := .Data }}
{{ range $key, $value := $.Scratch.Get "tags" }}
<li>
<article>
<header>
{{ if ne $value.Name "" }}
<a href="{{ printf "/%s/%s" $data.Plural $value.Name | urlize | relLangURL }}">{{ $value.Name }}<span style="float:right;">{{ $value.Count }}</span></a>
{{ else }}
{{ i18n "uncategorized" }}<span style="float:right;">{{ $value.Count }}</span>
{{ end }}
</header>
</article>
</li>
{{ end }}
</ul>
</main>
{{ $.Scratch.Set "showCategories" false }}
</div>
{{ partial "scripts" . }}
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 85 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

Before

Width:  |  Height:  |  Size: 326 KiB

File diff suppressed because one or more lines are too long

View file

@ -1,12 +0,0 @@
name = "Bleach"
license = "MIT"
licenselink = "https://github.com/digivend/bleach-theme/blob/master/LICENSE.md"
description = "Simple and lightweight Blog theme for Hugo"
homepage = "https://github.com/digivend/bleach-theme"
tags = ["blog", "lighweight", "simple", "fast", "light", "modern", "hugo-theme", "responsive", "bootstrap", "white", "clean", "company"]
features = ["blog"]
min_version = "0.41"
[author]
name = "digiVend"
homepage = "https://github.com/digivend/"

View file

@ -1,33 +0,0 @@
---
name: Bug report
about: Create a report to help improve the theme.
title: "[BUG] "
labels: ''
assignees: ''
---
**Describe the bug**
A clear and concise description of what the bug is. **Please state this in the form of a problem, such as "[BUG] The door will not unlock without the key."**
**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
**Expected behavior**
A clear and concise description of what you expected to happen.
**Screenshots**
If applicable, add screenshots to help explain your problem.
**Device information):**
- Device [e.g. MacBook, iPhone, ...]
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
**Additional context**
Add any other context about the problem here.

View file

@ -1,23 +0,0 @@
---
name: Feature request
about: Suggest an idea for this project
title: "[FEATURE] "
labels: ''
assignees: ''
---
**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
**Describe the solution you'd like**
A clear and concise description of what you want to happen. What problem does this solve, for whom, in what types of circumstances? What is the value of your idea?
**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered. Screenshots or mockups are helpful.
**Additional context**
Add any other context or screenshots about the feature request here.
**Does it fit with Story's design?**
Tell us why your idea is a good fit for Story in particular, rather than generically being a good idea. Does it align well with Story's goals of simplicity, elegance? Is your idea targeted towards Story's intended audience and use case?

View file

@ -1,3 +0,0 @@
*.swp
.DS_Store
public

View file

@ -1,20 +0,0 @@
The MIT License (MIT)
Copyright (c) 2018 Baron Schwartz
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View file

@ -1,24 +0,0 @@
# Story
Story is a beautiful [Hugo theme](https://gohugo.io) for showcasing your writing
and presentations. There's a robust [demo site](https://story.xaprb.com/) where you can see its
many features in action, and learn more about how to use them. You can also see Story in use on a real site by [Baron Schwartz](https://www.xaprb.com/).
![Story screenshot](https://raw.githubusercontent.com/xaprb/story/master/images/screenshot.png)
Story is targeted to technical writers and
speakers: people such as software engineers and open source developers, who want a
website for their technical work, such as blogging about software
engineering. It's a great way to share your writing and speaking with the world.
It has a lot of features for people who invest effort in their websites and blogs!
- Beautiful, responsive typography for long-form content on screen and in print, including blogs, essays, and single pages.
- Support for [RemarkJS slides](https://remarkjs.com/).
- LaTeX math typesetting with [KaTeX](https://github.com/Khan/KaTeX)
- A built-in search page with [LunrJS](https://github.com/olivernn/lunr.js).
- Music notation typesetting with [abcjs](https://abcjs.net/).
- Easy-to-use, backwards-compatible Markdown enhancements such as ways to control image behavior (size, float, etc) with CSS.
This is just a fraction of Story's feature set, see the [demo site](https://story.xaprb.com/) for much more
documentation and screenshots.

View file

@ -1,12 +0,0 @@
---
title: '{{ replace .TranslationBaseName "-" " " | title }}'
date: "{{ .Date }}"
url: "/{{ .Dir }}{{ .Name }}"
description: ""
tldr: ""
image: ""
credit: ""
thumbnail: ""
categories:
- Uncategorized
---

View file

@ -1,33 +0,0 @@
---
title: {{ .Name | humanize | title }}
date: "{{ .Date }}"
url: "/{{ .Dir }}"
image: "/slides/{{ .Name }}/cover.jpg"
description: ""
ratio: "16:9"
themes:
- apron
- adirondack
- descartes
---
class: title
background-image: url(cover.jpg)
# {{ .Name | humanize | title }}
## Subtitle
---
# About Me
- Slides are at {{ "talks/" | absURL }}
- Ask questions anytime
---
# Slides and Contact Information
.qrcode.db.fr.w-40pct.ml-4[]
Slides are at {{ .Site.BaseURL }}talks/ or you can scan the QR code.
Contact:

View file

@ -1,13 +0,0 @@
---
title: '{{ replace .TranslationBaseName "-" " " | title }}'
date: "{{ .Date }}"
url: "/{{ .Dir }}{{ .Name }}/"
event: ""
location: ""
site: ""
video: ""
slides: "/slides/{{ .Name }}/"
thumbnail: "/slides/{{ .Name }}/thumbnail.jpg"
image: "/slides/{{ .Name }}/cover.jpg"
description: ""
---

View file

@ -1,37 +0,0 @@
# Site settings
baseurl = "https://example.com/"
title = "Hugo Story Theme"
paginate = 5
buildFuture = true
[[menu.social]]
name = "GitHub"
title = "fab fa-github-square"
url = "https://github.com/xaprb/story/"
[[menu.main]]
name = "Talks"
title = "Talks"
url = "/talks/"
[[menu.main]]
name = "Slides"
title = "Slides"
url = "/slides/"
[[menu.main]]
name = "Archives"
title = "Archives"
url = "/archives/"
[params]
author = "Baron Schwartz"
twitter = "xaprb"
classes = []
[outputs]
home = ["HTML", "JSON", "RSS"]
page = ["HTML"]
section = ["HTML", "RSS"]
taxonomy = ["HTML", "RSS"]
taxonomyTerm = ["HTML", "RSS"]

View file

@ -1,10 +0,0 @@
---
title: Story Hugo Theme Demo Site
subtitle: "Showcase Your Work"
---
[![Baron Schwartz](/img/baron-square.jpg)](https://www.xaprb.com)
Baron Schwartz is the founder and CTO of [VividCortex](https://vividcortex.com), author of
several books, and creator of various open-source software. He writes about topics
such as technology, entrepreneurship, and fitness. [More about
Baron](https://www.xaprb.com/).

View file

@ -1,43 +0,0 @@
---
title: The Story Hugo Theme
date: "2018-09-03"
url: "/about-story"
description: "Story is a beautiful responsive Hugo blog theme with many extra features including presentations, math typesetting, and search."
tldr: "Story is a beautiful responsive Hugo blog theme with powerful extra features out-of-the-box. It's targeted to people who want to showcase their technical work online."
credit: "https://unsplash.com/photos/o-ubWHV29Uk"
image: "img/unsplash-photos-o-ubWHV29Uk.jpg"
thumbnail: img/unsplash-photos-o-ubWHV29Uk.tn-500x500.jpg
categories:
- Demo
---
Story is a beautiful Hugo theme. [Hugo](https://gohugo.io) is a static website
generator, which builds websites by rendering
[Markdown](https://commonmark.org/help/) content into templates from themes like
Story. The resulting site is fast, secure, and easy to build and maintain.
Story is a responsive theme that supports blogs, with many extra features such
as presentations, math and music typesetting, and search. The Story design
philosophy prioritizes simplicity and elegance, so it can be sophisticated
and powerful at the same time.
<!--more-->
Story is easy to use, making it a great way to share your writing and speaking
with the world. Story is targeted to technical writers and speakers: people
such as software engineers and open source developers, who want a website for
their technical work and side projects---for example, those who write and speak
about software engineering.
Story is deceptively simple, while offering the features you need:
- Beautiful, responsive typography for long-form content on screen and in print, including blogs and single pages.
- Support for Remark in-browser slideshows, written in simple Markdown.
- LaTeX math equation typesetting.
- Sheet music rendering from ABC music notation.
- Built-in site search.
Story has many more features than this.
Explore Story and learn all the ways it can help you showcase your work!
Read next: [Story's features](/theme-features).

View file

@ -1,9 +0,0 @@
---
layout: archives
url: /archives/
title: Archives
classes:
- feature-nosubtitle
- feature-nohdr
- feature-depth
---

View file

@ -1,111 +0,0 @@
---
author: Elvis Presley
title: Story's Author Profiles
url: /author-profiles
date: "2018-08-29"
description: "With Story, you can define global and per-item author profiles/biographies."
image: "img/unsplash-photos-TzMi5Ov7QeM.jpg"
credit: "https://unsplash.com/photos/TzMi5Ov7QeM"
thumbnail: "img/unsplash-photos-TzMi5Ov7QeM.tn-500x500.jpg"
categories:
- Demo
---
Story supports author profiles, so you can highlight your bio.
It's possible to set this globally for the entire site, or individually for each
piece of content. Or you can set a global default and override it on individual
pieces of content.
Scroll to the bottom of any page on this site to see how author profiles are
styled.
<!--more-->
Story's author profile system is a slightly simplified (incomplete)
implementation of the ideas laid out in [Netlify's how-to
document](https://www.netlify.com/blog/2018/07/24/hugo-tips-how-to-create-author-pages/).
It allows only one author per piece of content, and doesn't require Hugo to
create the authors taxonomy. Because it's incomplete, it's a) missing a few of the
features Netlify describes, and b) easier to set up.
### Global And Per-Content Authors
If you want to specify an author in the front matter of each post, it's
simply specified like this (YAML example):
```
---
author: "Elvis Presley"
---
```
If you want to set a global author parameter for the entire site, which will serve as
the default in case any pieces of content don't specify their own, use your
config file's `params` array:
```
params:
author: "Baron Schwartz"
```
That's exactly what this sample site you're reading right now does: Baron is the
author by default, but Elvis is the author of _this_ content you're reading now.
### Creating Author Profiles
To create author profiles, you need to create the author hierarchy under
`content`, and a slugified directory for each author. Then, place an `_index.md`
file into each of those directories, and give it the content needed to describe
the author.
For example:
```
└── content/
└── authors/
├── elvis-presley/
│ └── _index.md
├── aretha-franklin/
│ └── _index.md
└── stevie-wonder/
└── _index.md
```
You can put any content you want in the file, but Story has CSS to nicely format
a square image followed by a paragraph of text. This page you're viewing right
now has "Elvis Presley" as its author, and the content of
`content/authors/elvis-presley/_index.md` is:
```
---
---
![Elvis](/img/elvis.jpg)
Elvis Aaron Presley (January 8, 1935 August 16, 1977) was an American singer
and actor. Regarded as one of the most significant cultural icons of the 20th
century, he is often referred to as the "King of Rock and Roll" or simply "the
King".
```
### Global Fallback Content
Even if you don't have an author directory and a specific author's file as
described above, you can create content that will serve as a fallback across the
whole site. If Story doesn't find a specific author's profile page, it'll look
for the default `_index.md` content for the section it's currently rendering.
The top-level default for the whole site is `content/_index.md`, which this demo
site uses to provide Baron Schwartz's author information. This information will
appear on all pages _other than_ the current page, which is authored by Elvis
Presley. This fallback information from `content/_index.md` looks like the
following:
```
[![Baron Schwartz](/img/baron-square.jpg)](https://www.xaprb.com)
Baron Schwartz is the founder and CTO of [VividCortex](https://vividcortex.com), author of
several books, and creator of various open-source software. He writes about topics
such as technology, entrepreneurship, and fitness. [More about
Baron](https://www.xaprb.com/).
```
This content is a (non-author-specific) fallback for the entire site.
You can see it on all the other pages of this site.
Read next: [Story's figures, captions, and tables](/figures/).

View file

@ -1,8 +0,0 @@
---
---
![Elvis](/img/elvis.jpg)
Elvis Aaron Presley (January 8, 1935 August 16, 1977) was an American singer
and actor. Regarded as one of the most significant cultural icons of the 20th
century, he is often referred to as the "King of Rock and Roll" or simply "the
King".

View file

@ -1,9 +0,0 @@
X: 1
T: Cooley's
M: 4/4
L: 1/8
K: Emin
|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|
EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|
|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|
eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:|

View file

@ -1,109 +0,0 @@
---
title: Story's Feature Flags
date: "2018-08-30"
url: "/features"
description: "Story comes with a lot of power, but it's all configurable: almost every extra feature is optional."
credit: "https://unsplash.com/photos/QRkew0KwXSM"
image: "img/unsplash-photos-QRkew0KwXSM.jpg"
thumbnail: img/unsplash-photos-QRkew0KwXSM.tn-500x500.jpg
classes:
categories:
- Demo
---
Feature flags, which are called _classes_ in the markup, control many of Story's features.
You can enable and disable them in your site config, or in an individual post's front matter.
This article documents Story's feature flags.
<!--more-->
### Enabling Feature Flags
Feature flags can be enabled globally or locally, and the combination of these determines content behavior.
This lets you enable them for the entire site, or for an individual post.
The combined list of features that applies to a piece of content is the union of the two lists.
Here's how to enable the "example" feature for the entire site, in your site's `config.yaml` file:
```yaml
params:
classes:
- feature-example
```
Here's how to enable the "misc" feature in an individual piece of content, via its YAML front matter:
```yaml
---
classes:
- feature-misc
---
```
The contents of both feature lists are combined and put into the `<body>` tag's `class` attribute, verbatim:
```html
<body class="feature-example feature-misc">...</body>
```
If you're using TOML, then the syntax in `config.toml` looks like this:
```toml
[params]
classes = ["feature-example", "feature-misc"]
```
### Disabling Features
Many features can be _negated_ by prefixing the feature name with `no`, like this:
```yaml
---
classes:
- feature-noexample
---
```
If a feature is enabled globally and negated in a single piece of content's front matter, both the positive and negative form will appear in the CSS classes.
Features in Story are inside of code that checks not only whether flags are enabled, but also whether they're overridden with a negation.
One consequence of this is that if you disable a feature globally in `config.yaml`, you can't enable it locally in a single piece of content.
You can only enable globally and disable locally, not the other way around.
There's nothing special about a feature flag, and you can put arbitrary values into the configuration arrays.
Story only recognizes and supports specific values; it ignores others.
You can take advantage of this to add any values into the arrays that you want, if they're useful for your other purposes.
For example, you can use this ability to set any desired CSS class, for selection either with your custom CSS, or to work with something off-the-shelf that happens to look for a specific class.
### List Of Features
Features have varying implementations.
Some affect how Hugo processes content, some affect CSS presentation, and some are implemented in unobtrusive JavaScript after the page finishes loading.
Here's a list of all of Story's features and how they're implemented.
The first column links to a demo of those features.
For brevity, the `feature-` prefix is omitted, but all of Story's classes have that prefix to avoid naming conflicts.
| Feature | Explanation | Implementation |
|--------------------|---------------------------------------------------------------------------------------------|----------------|
| [3dbook-covers](/images) | Styles images to resemble a hardcover book | JS + CSS |
| [figcaption](/figures) | Transforms images into captioned figures | JS + CSS |
| [figcaption-hidden](/figures) | Hides figure captions, revealing them on mouseover | CSS |
| [figcaption-visible](/figures) | Formats figure captions visibly | CSS |
| [figlink](/figures) | Links text like "Figure/Table 3" to the corresponding figure or table | JS |
| [fignum](/figures) | Auto-numbers figures and tables | CSS |
| [h3-cl](/typography) | Adds CSS `clear: left` to all `<h3>` tags | CSS |
| [h3-cr](/typography) | Adds CSS `clear: right` to all `<h3>` tags | CSS |
| [h3-cb](/typography) | Adds CSS `clear: both` to all `<h3>` tags | CSS |
| [highlight](/typography) | Applies syntax highlighting to code blocks, using HighlightJS | JS + CSS |
| [hrdinkus](/typography) | Styles `<hr>` elements as a dinkus (three asterisks) | CSS |
| [hrfleuron](/typography) | Styles `<hr>` elements as a fleuron (&#10086;) | CSS |
| [hyphenate](/typography) | Enables line-breaks and hyphenation of text via the browser | CSS |
| [justify](/typography) | Aligns text with full-justification | CSS |
| [math](/math) | Enables LaTeX math typesetting using KaTeX | JS |
| [music](/music) | Enables rendering abc notation as sheet music with abcjs | JS |
| [nohdr](/images/) | Disables header images locally; when applied globally, disables preview thumbnails in lists | Hugo |
| [subtitle](/typography) | Enabled by default; disable to hide page subtitles | CSS |
| [tablefig](/figures) | Styles tables similar to scientific papers | JS + CSS |
| [tablefw](/figures) | Sets table cells in a font with fixed-width numerals | CSS |
| titlecase | Not enabled by default; Transforms All Content Titles to Titlecase | Hugo |
| [tweetquote](/typography) | Renders a blockquote in a simplistic tweet style, if it follows conventions | JS + CSS |
Read next: [Story's author biographies](/author-profiles/).

View file

@ -1,149 +0,0 @@
---
title: Story's Figures, Captions, and Tables
date: "2018-08-22"
url: "/figures"
description: "This article shows you how to enhance your images and tables with features such as captions and alternative stylings."
credit: "https://unsplash.com/photos/vHnVtLK8rCc"
image: "img/unsplash-photos-vHnVtLK8rCc.jpg"
thumbnail: img/unsplash-photos-vHnVtLK8rCc.tn-500x500.jpg
classes:
- feature-figcaption
- feature-figcaption-hidden
- feature-figlink
- feature-fignum
- feature-tablecaption
categories:
- Demo
---
Story can automatically transform images into figures with captions.
It can also add captions to tables.
And it adds features and styling to both images and tables.
This article is a demo of Story's features for figures, tables, and captions.
<!--more-->
### Image Captions and Figures
If the `feature-figcaption` flag is set (and not negated), Story will transform
your images into figures, and add a caption. There are several ways this can be done. Story tries
each method, in the following order.
First, if an image is followed immediately by an `<em>` _in the same paragraph_, Story treats
the content of the `<em>` as the image caption. To enable this, the image and
the text must not have a blank line between them. Example:
```md
![Water Lily](/img/unsplash-photos-vHnVtLK8rCc.jpg)
_Water lily photo by Zoltan Tasi on Unsplash_
```
This markup results in a `<p><img...><em...></p>` markup that Story converts into a captioned figure.
Hover your mouse over the picture to see the caption:
![Water Lily](/img/unsplash-photos-vHnVtLK8rCc.jpg)
_Water lily photo by Zoltan Tasi on Unsplash_
If there's no `<em>` to use, Story uses the image's `title` attribute as a fallback:
```md
![Water Lily](/img/unsplash-photos-vHnVtLK8rCc.jpg "A water lily")
```
![Water Lily](/img/unsplash-photos-vHnVtLK8rCc.jpg "A water lily")
Finally, Story falls back to the `alt` attribute:
```md
![Water Lily](/img/unsplash-photos-vHnVtLK8rCc.jpg)
```
![Water Lily](/img/unsplash-photos-vHnVtLK8rCc.jpg)
### Table Styling
Story has multiple built-in table styles that you can apply with feature flags.
The default is similar to GitHub's table styling:
| Command | Description |
| --- | --- |
| `git status` | List all *new or modified* files |
| `git diff` | Show file differences that **haven't been** staged |
| `git commit` | Record changes to the repository |
| `git branch` | List, create, or delete branches |
There is _also_ a style designed for tables that are part of an
article with figures, resembling scientific papers or other more formal use
cases. This is enabled with `feature-tablefig`. Click <a
id="tablefig">here</a> to toggle.
| Item | Estimated | Positive and Significant | Negative and Significant |
|-------------------------------------------|:---------:|:------------------------:|:------------------------:|
| Demographic Variables for Head | | | |
| Male | 85 | 74 | 11 |
| Age | 85 | 85 | 0 |
| Age Squared | 85 | 0 | 85 |
| Head's Education | | | |
| Completed primary or incomplete secondary | 76 | 76 | 0 |
| Completed secondary or higher | 60 | 60 | 0 |
| Completed secondary | 19 | 19 | 0 |
| Higher | 20 | 20 | 0 |
| Unknown | 12 | 12 | 0 |
Tables with columns of right-aligned numbers are more readable with fixed-width numerals; click to toggle <a id="tablefw">`feature-tablefw`</a>. Observe the table below and see how its columns are easier to read with fixed-width numerals. This is noticeable with Github-style table formatting, but not with academic-style.
Date | Inclination, deg. | Longitude, Asc. Node, deg. | Mean Distance, au | Eccentricity | Mean Longitude, deg. |
--------------|------------------:|---------------------------:|------------------:|--------------:|----------------------:|
Jan.&nbsp;28 | 7.0052 | 48.486 | 0.387097 | 0.205644 | 355.3943 |
Mar.&nbsp;9 | 7.0052 | 48.487 | 0.387098 | 0.205646 | 159.0899 |
Apr.&nbsp;18 | 7.0052 | 48.489 | 0.387097 | 0.205649 | 322.7854 |
May&nbsp;28 | 7.0052 | 48.490 | 0.387097 | 0.205650 | 126.4812 |
July&nbsp;7 | 7.0052 | 48.492 | 0.387098 | 0.205645 | 290.1771 |
Aug.&nbsp;16 | 7.0052 | 48.493 | 0.387098 | 0.205645 | 93.8725 |
Sept.&nbsp;25 | 7.0052 | 48.494 | 0.387098 | 0.205642 | 257.5683 |
Nov.&nbsp;4 | 7.0052 | 48.495 | 0.387099 | 0.205635 | 61.2628 |
Dec.&nbsp;14 | 7.0052 | 48.497 | 0.387099 | 0.205635 | 224.9579 |
Dec.&nbsp;54 | 7.0052 | 48.498 | 0.387098 | 0.205633 | 28.6524 |
_Mercury's Heliocentric Osculating Orbital Elements Referred to the Mean Equinox and Ecliptic of Date for 2013_
### Caption Styling And Linking
Story uses JavaScript and CSS to make figures and tables more beautiful and
functional.
- Figures and tables get sequentially numbered `ID` attributes of `#fig-1` and so on, so
you can link to them.
- The `feature-figlink` feature flag searches the article for text such as
Figure 1 and automatically links it to the appropriate figure.
- If the `feature-fignum` feature is enabled, the text of the caption is
prepended with the figure number. Click here to <a id="fignum">toggle this
feature</a>, then inspect the captions again to see the effect.
- The `feature-figcaption-hidden` feature makes the captions hidden until you
move the mouse over them. The `feature-figcaption-visible` feature flag
overrides this and makes the captions visible immediately below the image.
Click here to <a id="figvisible">toggle this feature</a>.
### Table Captions
Story doesn't convert tables to figures, but it can add captions to tables.
See Table 3, which is followed by a paragraph whose entire content is inside an `<em>` tag.
If the `feature-tablecaption` feature is enabled, Story will use unobtrusive JavaScript to move that paragraph's text into the table's `<caption>` element.
Tables can be autolinked and table captions can be numbered, similar to images.
These features are controlled by the same `feature-figlink` and `feature-fignum` flags that control image captioning and linking, so they'll be consistently applied.
<script type="text/javascript">
$( "#fignum" ).click(function() {
$("body").toggleClass("feature-fignum");
});
$( "#figvisible" ).click(function() {
$("body").toggleClass("feature-figcaption-visible");
});
$( "#tablefig" ).click(function() {
$("body").toggleClass("feature-tablefig");
});
$( "#tablefw" ).click(function() {
$("body").toggleClass("feature-tablefw");
});
</script>
Read next: [Story's image formatting features](/images/).

View file

@ -1,115 +0,0 @@
---
title: Story's Image Formatting Controls
date: "2018-08-21"
url: "/images"
description: "Story gives you extra control over image formatting using only Markdown syntax."
classes:
- feature-figcaption
- feature-figcaption-hidden
- feature-3dbook-covers
- feature-tablecaption
- feature-depth
categories:
- Demo
---
This article is a demo of Story's image-related features (other than [figure captions](/figures)).
Story can apply a variety of stylistic and layout transformations to your images.
These features are enabled by unobtrusive, accessibility-friendly tricks that give you more control over images than Markdown typically provides.
Story also has out-of-the-box support for header and preview images, for a visually stunning site.
<!--more-->
### Shrinking Large Images
Story's CSS automatically shrinks images to fit into the width of the article.
![Default header image](/img/default-header-img.jpg)
The image above is much wider than the content region, but it's sized to fit.
### Control Over Image Formatting
Story uses [URL fragment
techniques](https://www.xaprb.com/blog/how-to-style-images-with-markdown/) to
give you control over image styling.
Images that use this technique don't get converted into [figures with captions](/figures).
![Small Lily](/img/lily.jpg# fr)
For example, you can float an image right with the `fr` URL fragment:
```md
![Small Lily](/img/lily.jpg# fr)
```
There's a selection of these pseudo-classes built into Story via the Descartes
CSS file; inspect the CSS or LESS source to see what styles you can attach to
images.
If floated images interfere with headings, you can use [heading clear feature flags](/features) to fix this.
### Book Cover Mockups
[![Small Lily](/img/lily.jpg# 3dbook)](https://unsplash.com/photos/vHnVtLK8rCc)
A book cover image that's inside an `<a>` link can be floated right and given
a 3d look with the `3dbook` URL fragment pseudo-class.
```
[![Small Lily](/img/lily.jpg# 3dbook)](https://unsplash.com/photos/vHnVtLK8rCc)
```
### Header Images
Story is designed for visual impact, with a featured image for each piece of content.
Use the `image` property in the article's front-matter to set the image.
Use the `credit` to give credit to the image's creator if you wish; Story will put a small camera icon in the header if it finds that parameter.
Use the `thumbnail` property to supply a smaller version of the image in list views.
A typical piece of content will have front matter like the following:
```yaml
image: "/img/unsplash-photos-QRkew0KwXSM.jpg"
thumbnail: /img/unsplash-photos-QRkew0KwXSM.tn-500x500.jpg
credit: "https://unsplash.com/photos/QRkew0KwXSM"
```
If there's no thumbnail, Story falls back to the full-size image.
If there's no article-specific image, Story uses its default, `/img/default-header-img.jpg`, or the thumbnail equivalent, `/img/default-header-img.tn-500x500.jpg`.
This page doesn't supply its own header image, so Story is using the default.
You can supply your own default header image by simply putting an image with the same name in your *site's* `/static/img` directory.
If Hugo finds that you've added an image of your own, it will take precedence.
You can also override section-specific header images in list
(non-individual-page) views with parameters in the `_index.md` content file in
that section. (The `title` and `subtitle` parameters in those files can also
override what's shown in list page headers.)
### Imageless Layout Options
If you don't want header images or preview thumbnails in list views, you can set
the `feature-nohdr` feature. Set locally in a piece of content, it will display
no header/banner image. Here's an example of what a page looks like with and
without the header image:
![A page in Story, with and without the header](/img/page-header-formatting.png)
Set globally for the whole site, it will make the site simply ignore all header
and preview images:
![A site in Story, with and without header and preview images](/img/site-header-formatting.png)
To illustrate this feature, the [search page](/search) has this feature set, so
it has a plain, bannerless layout.
### Adding Depth To Headers
Articles (but not list pages) can be given a bit of extra depth with the
`feature-depth` class, which is negatable with `feature-nodepth`. This article
is an example: notice how the content is shifted up slightly to overlap the
header image a bit, with rounded corners and a shadow around it.
The `feature-depth` class can be set globally in your `config.yaml` or similar,
and overridden as you wish on individual pages.
Read next: [Story's built-in search features](/search-page/).

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 127 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 120 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 150 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 254 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 187 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 198 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 185 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

View file

@ -1,69 +0,0 @@
---
title: "Story's MailChimp Integration Features"
date: "2018-08-18"
url: "/mailchimp-features"
description: "Story makes it easy to grow a MailChimp subscriber list and send beautifully formatted emails to them automatically."
image: "img/jessy-hoffmann-720198-unsplash.jpg"
credit: "https://unsplash.com/photos/EsNkWAv6Vmw/"
thumbnail: "img/jessy-hoffmann-720198-unsplash.tn-500x500.jpg"
categories:
- Demo
---
If you're a blogger, you might use MailChimp to build a subscriber list, and
Story makes that easy. MailChimp also has the ability to automatically send your
new content to the list from an RSS feed, and guess what---Story helps you
create an RSS feed customized just for that if you like, too.
<!--more-->
First, MailChimp subscriber forms. If you want to add a subscription form at the
bottom of each page, just add your MailChimp URL as a parameter in your
configuration file. Here's a YAML example for `config.yaml`:
```yaml
params:
- mailchimp: "your URL here"
```
And here's an example for `config.toml`:
```toml
[params]
mailchimp = "your URL here"
```
You can copy the URL from the address bar of your MailChimp subscriber form. It
becomes the `action` of the form, which will appear at the bottom of each page
near your author biography.
Next, an RSS feed. Story has an RSS layout customized to create summaries of
your content's title, description, featured image, and summary content. The
summary content is either delimited explicitly by the `<!--more-->` comment in
your Markdown source, or generated automatically by Hugo. (Read more
[here](https://gohugo.io/content-management/summaries/).)
The default content of the RSS feed entries is generated from the page's
`description` front matter and `.Summary` content, but you can provide your own
to override this. Simply add an excerpt in the `tldr` front matter property.
To enable the RSS feed, you need to create a special `.md` file that won't
appear as regular content, but will render an extra RSS feed file. Its content
is ignored, and only its front matter is important. For example, you could
create it as `content/mailchimp/_index.md` with the following contents, using YAML
front matter:
```yaml
---
layout: mailchimp
outputs:
- rss
---
```
Now Hugo will build an extra feed at
[`/mailchimp/index.xml`](/mailchimp/index.xml), and you can use it to create
[RSS campaigns in
MailChimp](https://mailchimp.com/help/share-your-blog-posts-with-mailchimp/). Of
course, you can also use your normal RSS feed, but Story's default is to put
full content into that, so it might be more than you want.
Read next: [Story's 'talks' feature for presentations](/talks/adirondack/).

View file

@ -1,7 +0,0 @@
---
skip: true
layout: mailchimp
outputs:
- rss
- html
---

View file

@ -1,58 +0,0 @@
---
title: Story's Mathematical Equation Typesetting
date: "2018-08-20"
url: "/math"
description: "If you ever write equations or mathematical formulas, Story has the features you need."
credit: "https://unsplash.com/photos/5mZ_M06Fc9g/download"
image: "img/unsplash-photos-5mZ_M06Fc9g.jpg"
thumbnail: img/unsplash-photos-5mZ_M06Fc9g.tn-500x500.jpg
classes:
- feature-math
categories:
- Demo
---
This article is a demo of Story's ability to typeset mathematical equations,
both inline and in block form.
<!--more-->
Story uses the [KaTeX](https://khan.github.io/KaTeX/) library to typeset
mathematical formulae in {{< math >}}\LaTeX{{< /math >}} notation. KaTeX is
similar to MathJax, but simpler and faster. It provides most of the features
needed for typesetting equations, both inline and in block form.
Story provides a `math` Hugo shortcode to help avoid problems that result from
Markdown processing. Here's an example of using the shortcode for inline math:
<pre><code>The quadratic equation is &#123;{< math >}}x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}&#123;{< /math >}}.</code></pre>
The quadratic equation is {{< math >}}x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}{{< /math >}}.
And in equation mode,
<pre><code>&#123;{< math >}}
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
&#123;{< /math >}}</code></pre>
{{< math >}}
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
{{< /math >}}
You don't have to use the shortcode, but it saves you from needing to
backslash-escape special characters, and fixes problems like backslashes and
spaces at the end of the line, which Hugo's Markdown processor will otherwise
mangle. This enables frustration-free typesetting of more advanced equations
such as the following:
{{< math >}}
\left\{
\begin{array}{c}
a_1x+b_1y+c_1z=d_1 \\
a_2x+b_2y+c_2z=d_2 \\
a_3x+b_3y+c_3z=d_3
\end{array}
\right.
{{< /math >}}
Math typesetting is controlled with the `feature-[no]math` flag.
Read next: [Story's music notation](/music/).

View file

@ -1,62 +0,0 @@
---
title: Story's Music Notation
date: "2018-08-20 04:00:00"
url: "/music"
description: "Story can render music notation in your website."
credit: "https://unsplash.com/photos/UpdR5OaUJl0"
image: "img/jordan-mixson-372435-unsplash.jpg"
thumbnail: img/jordan-mixson-372435-unsplash.tn-500x500.jpg
classes:
- feature-music
categories:
- Demo
---
Story uses the [abcjs](https://github.com/paulrosen/abcjs) library to transform
[abc](https://www.abcnotation.com) music notation into "sheet music" dynamically.
This works well for displaying a wide variety of music notation in a web
browser conveniently, without embedding images or PDFs or the like.
<!--more-->
To generate sheet music within a page, enter it in a code listing with the language `abc`, like this:
```abc
[ABC music notation goes here]
```
If you enable music notation rendering with the `feature-[no]music` flag, then Story's
JavaScript, which runs when the page loads, will search for every `abc` code listing and transform it.
Here's an example:
```abc
X: 76
T:Mazurka
C:F. Chopin
T: Op.33 No.1
M:3/4
L:1/4
Q:"Mesto"
K:B
%%staves {(RH1 RH2) (LH1 LH2)}
V: RH1 clef=treble name="Piano"
V: RH2 clef=treble
V: LH1 clef=bass
V: LH2 clef=bass
%
[V: RH1] (!p!LD | E/>D/ [^^CGB][^C^^FA] | G2-) (G/A/ | B/c/ d {/f}e | (d/g//)) z// (Ld2 |
[V: RH2] x | x x x | z [B,D] z | x x x | x z [G-B-]|
[V: LH1] x | x x x | z [D,G,] x | x3 | x3 |
[V: LH2] z | z z (D,, | G,,2) z | z3 | z z [G,-D-]|
%
[V: RH1] d/>c/ e d) | {/c}(B/>A/ [EGc][DGB]) | (E/>D/ [^^CGB][^C^^FA] | G2 B | d/>c/e d) |
[V: RH2] [GB] [GA] [GB] | x3 | x3 | z [B,D][B,D] | z [GA] [GB] |
[V: LH1] x3 | x3 | x3 | z [D,G,] [D,G,] | x3 |
[V: LH2] [G,D] ([C,C] [G,,G,]) | z ([C,C,,] [G,,,G,,]) | z z (D,, | G,,2) x | z ([C,C] [G,,G,])
```
Story also has a `music` shortcode, which simply takes the name of an abc file as an argument, e.g. the following example code and the resulting music notation. This enables you to store your music files separately from your content and include them easily.
<pre><code>&#123;{< music "/cooleys.abc" >}}</code></pre>
{{< music "/cooleys.abc" >}}
Read next: [Story's beautiful typography](/typography/).

View file

@ -1,56 +0,0 @@
---
title: Story's Theme Features
url: /theme-features
date: "2018-09-01"
description: "This page is a tour of Story's features, so you can take full advantage of its power."
image: "img/unsplash-photos-nehfi_SfqtU.jpg"
credit: "https://unsplash.com/photos/nehfi_SfqtU"
thumbnail: "img/unsplash-photos-nehfi_SfqtU.tn-500x500.jpg"
categories:
- Demo
---
Story has a lot of features, but most are optional and have smart defaults!
This page is an introduction to Story, with links to further pages that go into
more details. There's also a listing of features that either don't need
a separate documentation page, or just don't have full documentation yet.
<!--more-->
- [Gorgeous, responsive typography on all devices and in print](/typography)
- [Beautiful featured images and thumbnails](/images/) (optional)
- [Multiple layouts](/images/)
- [Flexibility via feature toggles](/features)
- [Author profile pages](/author-profiles)
- [Remark browser-based presentation support](/slides/), including CSS themes and multiple aspect ratios
- [Automatic table and image enhancements](/figures)
- [Advanced image styling features](/images)
- [Mathematical equation typesetting](/math)
- [Formatting ABC music notation as sheet music](/music)
- [Built-in search](/search-page)
- [MailChimp subscribe forms and RSS feeds](/mailchimp-features)
Story also has support for the following, which aren't extensively documented:
- Code syntax highlighting
- Google Analytics
- Categories
- All types of blogs; Story isn't opinionated about what you call them (you
can put your content under `/posts/`, `/blog/`, `/articles/`, or whatever)
- A section for "talks," which is different from slideshows; a talks page is a
place to put information about your presentations, including links to videos,
the location, slides, and so on. `/talks/` and `/slides/` are the only two
content types for which Story has special formatting and archetypes.
- An archive listing page, which uses the `archives` layout analogously to the [search](/search-page) feature
- 404 error page
- Social-media meta tags to make your content look great when shared on social
media sites
- Using `skip` to hide content from default lists, but generating HTML pages for it
- Meta keywords
- Font Awesome icon fonts
- Custom header meta tags with any content you want
- Custom footer content with any HTML, JS, or CSS you want; useful for adding
custom features from third-parties that provide script blocks to paste into
your site
- Custom CSS classes in the `<body>` tag
- Custom content and social link menus with any content you want (not limited to predefined)
Read next: [Story's feature flags](/features/).

View file

@ -1,80 +0,0 @@
---
title: Story's JavaScript Search
date: "2018-08-21"
url: "/search-page"
description: "With Story, your site will have built-in search with no external dependencies."
image: "img/unsplash-photos-4zxSWESyZio.jpg"
credit: "https://unsplash.com/photos/4zxSWESyZio"
thumbnail: "img/unsplash-photos-4zxSWESyZio.tn-500x500.jpg"
categories:
- Demo
---
This article documents Story's built-in search features, which don't rely on external search engines.
Story uses the [LunrJS](https://lunrjs.com/) library to provide fast browser-based search.
This page first explains how search setup works, and then provides copy-paste
ready code samples for you to use.
<!--more-->
To get Story's search to work, you need to take a couple of steps:
1. Create a piece of content with the URL you want. Story assumes you want
`/search/` and adds an icon for that in the top menu automatically. So you
can simply create `content/search/_index.md` and that should work.
2. Give this content the `search` layout, and a title.
There doesn't need to be any Markdown content; the `search` layout ignores it.
This will create the search page, but you also need to tell Hugo that it should
build the JSON index of the content in the site, which LunrJS uses. To do this,
configure the `home` output type to include JSON, which isn't included by
default. This will override the default output settings, so you'll need to
explicitly specify the defaults in addition. Here's a YAML config file section
for your `config.yaml` file to enable this:
```
outputs:
home:
- HTML
- JSON
- RSS
page:
- HTML
section:
- HTML
- RSS
taxonomy:
- HTML
- RSS
taxonomyTerm:
- HTML
- RSS
```
If you use TOML, use this:
```
[outputs]
home = ["HTML", "JSON", "RSS"]
page = ["HTML"]
section = ["HTML", "RSS"]
taxonomy = ["HTML", "RSS"]
taxonomyTerm = ["HTML", "RSS"]
```
There's more you can do. If you want to create a full-featured search page easily, just paste the following code into `content/search/_index.md`
```
---
layout: search
url: /search/
title: Search
classes:
- feature-nosubtitle
- feature-nohdr
---
```
This illustrates an additional layout feature in Story:
displaying it without a header image.
Read next: [Story's mathematical equation typesetting features](/math/).

View file

@ -1,9 +0,0 @@
---
layout: search
url: /search/
title: Search
classes:
- feature-nosubtitle
- feature-nohdr
- feature-depth
---

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

View file

@ -1,606 +0,0 @@
---
title: 'Creating Beautiful Presentations with Story'
date: "2018-04-25T09:50:00-07:00"
url: "slides/adirondack/"
image: "slides/adirondack/leo-serrat-533922-unsplash.jpg"
thumbnail: slides/adirondack/thumbnail.jpg
description: "Story's Remark frameworks help you create sophisticated slides with simple, clean Markdown. There are predefined layouts for most presentation needs, beautiful typography and colors, precise image control, and a simple modular way to create custom layouts."
ratio: "16:9"
themes:
- apron
- descartes
- adirondack
classes:
- feature-math
- feature-qrcode
- feature-nohighlight
- feature-music
---
class: title, smokescreen, shelf, no-footer
background-image: url(leo-serrat-533922-unsplash.jpg)
# Creating Beautiful Presentations
### With Remark, Apron, Adirondack, and Descartes
---
# The Story Remark Themes
[Story](https://github.com/xaprb/story) offers helper themes for creating
beautiful presentations with [Remark](https://remarkjs.com/), using simple
Markdown to create slide layouts.
- Apron defines the layouts' structure and size.
- Adirondack adds typography, theme colors, and helpful features.
- Descartes provides element and image positioning and colors.
Story has a design goal of clean, simple Markdown content. Avoiding "raw" HTML
and Remark's Markdown extensions makes things easier.
View the source of this page to see the Markdown that creates it.
These characteristics make it easy to build gorgeous slideshows. They're also
a great foundation for creating your own themes.
---
# What is Remark?
Remark (sometimes called RemarkJS) is a browser-based slideshow system. It's
simple but surprisingly powerful:
- You write slides in simple Markdown
- It supports a presenter mode, slide notes, and dual monitors
- It supports slide layouts, templates, and incremental slides
- It's easy to extend and customize with simple CSS
Story integrates Remark into Hugo, creating a live-reload editing experience,
and a permanent home for your slides on your own website!
View this page's source to see how easily you can compose slideshows
with Remark.
---
name: getting-started
# Getting Started
To get started, use `hugo new slides/my-presentation.md` and ensure that the
following `themes` are in the front matter, for example:
```yaml
---
title: 'Creating Beautiful Presentations with Story'
date: "2018-04-25T09:50:00-07:00"
url: "/slides/adirondack/"
ratio: "16:9"
themes:
- apron
- descartes
- adirondack
```
---
class: compact
# Apron's Slide Layouts
It's easy to create common slide layouts with Remark's slide classes.
![Slide Layouts](slide-layouts.svg# maxw-70pct center)
---
class: img-right
# Heading, Content, and Image
![Yosemite](leo-serrat-533922-unsplash.jpg)
This is the `img-right` slide class. The content consists simply of a
header, an image, and this text.
* The image's aspect ratio and cropping are not altered.
* All content after the image goes in the lefthand column.
Although this text is in the lefthand column, the image comes _first_ in the
markdown source.
---
class: img-left
# Heading, Image, and Content
![Yosemite](leo-serrat-533922-unsplash.jpg)
This is the `img-left` slide class. The content is structured in just the same
way as the `img-right` slide class.
- All content after the image goes in the right-hand column.
--
- These columns require no wrapper `<div>`, just plain Markdown.
- This avoids interference with Remark features.
--
- Incremental builds with `--` work fine, for example.
---
class: img-right-full
![](kari-shea-272383-unsplash.jpg)
# Content and Image
This is the `img-right-full` class. The content is simply an image and text
(including a header in this case).
The image is 2x larger than the visible area and its position is set to `left`.
This lets you pair this layout with the following one.
- A red flare silhouetted the jagged edge of a wing.
- Almost before we knew it, we had left the ground.
---
class: img-left-full
![](kari-shea-272383-unsplash.jpg)
# The Other Side of the Coin
This slide's class is `img-left-full`. Like the previous slide, it's just an
image and some content. The image is exactly the same as the previous slide, but
it's positioned to reveal the other half.
- All their equipment and instruments are alive.
- I watched the storm, so beautiful yet terrific.
- Almost before we knew it, we had left the ground.
---
class: img-caption
![Image](will-turner-508747-unsplash.jpg)
This slide's class is `img-caption`. Its content is simply an image and this
text.
---
class: col-2
# Two-Column Layouts
This is a two-column layout, created with `class: col-2`.
There's no columnar markup (no DIVs, for example) in the content.
![](leo-serrat-533922-unsplash.jpg# mw-90 center)
The columns are created natively in CSS. The first H1 spans all columns.
> Relaxing in the Adirondack chair, I felt the gathering dusk creep on kitten
feet. It came to me, then, that a day lived in this paradise was better than a
lifetime anywhere else.
- I watched the storm, so beautiful yet terrific.
---
class: col-3
# Three-Column Layouts
This is a three-column layout, created with `class: col-3`.
As with `col-2`, Apron assumes the slide begins with an H1 header.
Mist enveloped the ship three hours out from port.
![](tanya-nevidoma-632010-unsplash.jpg# mw-90)
- My two natures had memory in common.
- The face of the moon was in shadow.
Call me Ishmael. Some years ago---never mind how long precisely---having little or
no money in my purse, and nothing particular to interest me on shore, I thought
I would sail about a little and see the watery part of the world.
---
# Apron's Layout Classes
Here are the Apron slide layouts classes and how to use them:
| Class | Content structuring guidelines |
|-------------------------------|-------------------------------------------------|
| title | Add a background-image, H1, and optional H2/H3. |
| img-caption | Add an image and optional caption text. |
| img-right, img-left | Add a header, image, and content. |
| img-right-full, img-left-full | Add an image, _then_ headers and content. |
| col-2, col-3 | Add a header, then any content desired. |
---
class: compact
# A Compact Slide
This slide's class is `compact`, which reduces font sizes, line heights, and
slide padding. This makes it possible to fit more content on the slide, which
can be useful.
- I watched the storm, so beautiful yet terrific.
- Almost before we knew it, we had left the ground.
```javascript
function $initHighlight(block, cls) {
if (cls.search(/\bno\-highlight\b/) != -1)
return process(block, true, 0x0F) + ` class="${cls}"`;
for (var i = 0 / 2; i < classes.length; i++) {
if (checkCondition(classes[i]) === undefined)
console.log('undefined');
}
}
```
---
class: compact, col-3
# Compact Three-Column Layout
This is a three-column layout,
created with `class: col-3, compact`.
The `compact` class works well three columns, which have less room.
![](tanya-nevidoma-632010-unsplash.jpg# maxw-90pct)
A shining crescent far beneath the flying vessel.
- It was going to be a lonely trip back.
- Mist enveloped the ship three hours out from port.
- My two natures had memory in common.
- Silver mist suffused the deck of the ship.
- The face of the moon was in shadow.
Call me Ishmael. Some years ago---never mind how long precisely---having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.
---
class: roomy
# A Roomy Slide
This slide doesn't have as much content, so I gave it the class `roomy` to let
its content stretch out a bit for readability.
- A red flare silhouetted the jagged edge of a wing.
- I watched the storm, so beautiful yet terrific.
- Almost before we knew it, we had left the ground.
- All their equipment and instruments are alive.
---
class: roomy, col-2
# Room For Two Columns
This roomy slide has two columns: `class: roomy, col-2`. Bulleted lists
shouldn't break across columns.
- A red flare silhouetted the jagged edge of a wing.
- I watched the storm, so beautiful yet terrific.
- Almost before we knew it, we had left the ground.
- All their equipment and instruments are alive.
---
class: compact
# Apron's Auxiliary Classes
Apron offers the following additional slide classes:
| Class | Applies To | Content structuring guidelines |
|------------|------------|------------------------------------------------------------------------------------|
| top | title | Moves the title and subtitle to the top of the slide. |
| bottom | title | Moves the title and subtitle to the bottom. |
| shelf | title | Extends the title's background and locates the subtitle above it. |
| compact | (all) | Reduces text size and margins to fit more content. |
| roomy | (all) | Increases text size to fill more space. |
| fullbleed | (all) | Removes margins from the slide and its text. |
| no-footer | (all) | Hides the footer (including slide number). |
| debug | (all) | Outlines elements in gold to make formatting visible. Variants: -white and -black. |
| debug-grid | (all) | Displays a layout grid. Variants: -8, -16, -solid, and combinations of these. |
---
class: title, fogscreen
background-image: url(tanya-nevidoma-632010-unsplash.jpg)
# Adirondack's Typography and Features
---
# Adirondack
Adirondack is built on top of Apron, and adds beautiful typography, colors, and
extra features. This section is a demo and documentation of those features.
# Heading Level 1
## Heading Level 2
### Heading Level 3
Text with _italics_, __bold__, ~~strikethrough~~, `<code>`,
[link](https://www.wikipedia.org/).
---
class: col-2
# Bulleted Lists Demo
This column illustrates bulleted lists.
* A bulleted list.
* Another bullet.
* Nested bullets.
* Another.
* Deeply nested.
* Back to the top-level again.
This column has numbered lists.
2. Another bullet.
3. The last bullet.
1. Nested numbered lists.
2. Another.
3. Deeper.
1. Top-level again.
---
# Code Typography Demo
Remark offers [HighlightJS](https://highlightjs.org/) code syntax highlighting.
Story enables/disables this with [feature flags](/features/).
```javascript
function $initHighlight(block, cls) {
if (cls.search(/\bno\-highlight\b/) != -1)
return process(block, true, 0x0F) + ` class="${cls}"`;
for (var i = 0 / 2; i < classes.length; i++) {
if (checkCondition(classes[i]) === undefined)
console.log('undefined');
}
}
```
---
class: col-2
# Math Typesetting
Story supports math equation typesetting using the KaTeX library,
if [`feature-math`](/math/) is enabled.
\\[
\left( \beta mc^2 + c \left ( \sum_{n=1}^3 \alpha_n p\_n \right ) \right) \psi(x,t) = i \hbar \frac{\partial \psi(x,t) }{\partial t}
\\]
The coherence is the \\(\kappa\\) coefficient of \\(n^2\\),
which is \\(e^{i\pi}-1=0\\).
\\[
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
\\]
![Universal Scalability Law](linear3.svg)
You can also display equations inline, such as the quadratic equation, which is
\\(x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}\\)
---
class: compact
# Music Notation and Sheet Music
Story supports [formatting sheet music from ABC](/music).
```abc
X: 1
T: Cooley's
M: 4/4
L: 1/8
K: Emin
|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|
EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|
```
---
class: fit-h1, roomy
# This Slide Has A Very Long Multi-Line Heading That Has Been Shrunk
The `fit-h1` slide class will automatically shrink the first H1 heading until it
fits on a single line.
This doesn't work on title slides.
Story also applies 6'2" tall "smartypants" processing to replace 'straight
quotes,' en- and em-dashes (boil for 12--15 minutes---longer if needed),
and ellipses with their nicer typographical equivalents... isn't that nice?
---
# Share Your Slides With QR Codes
.qrcode.db.fr.w-40pct.ml-4[]
Adirondack has built-in support for QR codes to share your slides easily. No
more emailing links or files! Your audience can simply snap a picture of the
screen.
Just enable the `feature-qrcode` [flag](/features/) and add markup like the
following to your slide:
```
.qrcode.db.fr.w-40pct.ml-4[]
```
The `qrcode` class is important but the rest is up to you.
---
# Export Your Slides To PDFs
Remark has support for printing slides to a PDF, using Google Chrome's print
dialog (not the native system dialog).
There are some bugs in it... but Story implements workarounds so you don't even
need to think about it.
Just print with Chrome and save to a PDF file.
This works for both 16:9 and 4:3 ratio slides. Speaking of which, you select
that with the `ratio` in the front matter, as shown on the [getting
started](#getting-started) slide.
---
layout: true
.footer[
- @xaprb
- ![logo](vividcortex-horizontal-web.svg)
]
---
class: compact
# Footer Content
This slide builds on content from the previous (hidden, layout) slide, whose
content is:
```
---
layout: true
.footer[
- @xaprb
- ![logo](vividcortex-horizontal-web.svg)
]
```
This content uses Adirondack's built-in `footer` css styling to define footer
elements. You can see them at the bottom of this slide. In the next section,
you'll learn Descartes classes you can add
to the div to style it, e.g. `.footer.bt.bc-cornflower[...]`.
You can hide both the Remark and custom footer on any slide with `class: no-footer`.
---
layout: false
# Adirondacks Slide Classes
Here are Adirondack's slide classes:
| Class | Notes |
|---------------|----------------------------------------------------------------------|
| `smokescreen` | Creates a dark shaded semi-transparent background on `title` slides. |
| `fogscreen` | Similar to `smokescreen`, but uses a white shading. |
| `fit-h1` | Shrinks the H1 heading's font-size to fit on a single line. |
---
class: title, smokescreen, shelf
background-image: url(will-turner-508747-unsplash.jpg)
# Positioning Images And Elements
## Using Descartes To Create Intricate Layouts
---
# Descartes' Styling Functionality
Descartes is an add-on that gives lots of power over image and element formatting with
Markdown. It uses composable, functional pseudo-classes in the image's URL
fragment (the part after the `#` character). For example, this image will be 33% width,
display as block, 2rem right margin, and float left:
```
![Image](tom-barrett-364228-unsplash.jpg# w-33pct db fl mr-4)
```
![Image](tom-barrett-364228-unsplash.jpg# w-33pct db fl mr-4)
That URL has four "words" in the fragment, delimited by whitespace. The
whitespace is important!
Image classes are also available for `<div>`s.
---
class: center
This image collage has no "raw" markup or Remark `<div>` extensions. The next
slide illustrates Descartes's grid of 12ths.
![](kari-shea-272383-unsplash.jpg# l-0 t-20pct w-two-thirds h-80pct ofv absolute)
![](leo-serrat-533922-unsplash.jpg# w-third h-40pct t-20pct r-0 ofv absolute)
![](will-turner-508747-unsplash.jpg# w-third h-40pct t-60pct r-0 ofv absolute)
---
class: fullbleed
background-color: black
![](kari-shea-272383-unsplash.jpg# absolute ofv w-9-12th h-7-12th)
![](leo-serrat-533922-unsplash.jpg# absolute ofv w-3-12th h-3-12th t-0 l-9-12th)
![](nasa-53884-unsplash.jpg# absolute ofv w-2-12th h-9-12th t-3-12th l-9-12th)
![](tom-barrett-364228-unsplash.jpg# absolute ofv w-1-12th h-5-12th t-3-12th l-11-12th)
![](will-turner-508747-unsplash.jpg# absolute ofv w-1-12th h-4-12th t-8-12th l-11-12th opr)
![](tanya-nevidoma-632010-unsplash.jpg# absolute ofv w-5-12th h-5-12th t-7-12th l-0)
![](tom-barrett-364228-unsplash.jpg# absolute ofv w-4-12th h-3-12th t-7-12th l-5-12th)
![](will-turner-508747-unsplash.jpg# absolute ofv w-4-12th h-2-12th t-10-12th l-5-12th)
.absolute.w-7-12th.pa-3.l-1-12th.t-20pct.ba.bw-4.br-4.bg-white-60pct[
This slide is composed only of simple Markdown markup, no raw HTML.
]
---
# Using Descartes' Coordinate Grids
Descartes offers several length scales for element sizes and positions. For
each, a class naming convention selects the value:
- rems, from 1 rem (-1) to 96rem (-9)
- tenths, in 10% increments from -10pct to -100pct, plus -33pct, -34pct, and -75pct
- twelfths, in 1/12th increments from -1-12th to -11-12th
- thirds, as -third and -two-thirds
There's always a prefix that specifies what the item is, and a suffix that
selects the units. So for example, if you want an element to have a width of
50%, you can give it a class of `w-50pct`, and if you want it to be 25% width
you can use `w-3-12th`.
---
class: col-2
# Descartes' Coordinate Selectors
You can apply the length scales from the previous slide to a variety of element
properties (see right). The X can be any of the suffixes discussed on the
previous slide.
These can be applied as classes to a DIV, or image pseudo-classes:
```
.w-50pct.h-1-12th.t-0.l-50pct[....]
![img](pic.jpg# w-50pct h-1-12th t-0 l-50pct)
```
- w-X: width
- maxw-X: max-width
- minw-X: min-width
- h-X: height
- maxh-X: max-height
- minh-X: min-height
- t-X: top
- r-X: right
- b-X: bottom
- l-X: left
---
# Descartes' Other Features
Descartes also has classes to control color (text, border, background,
transparency), opacity, borders (sides, width, radius), spacing (padding,
margin), centering, display types, floats, clearfix, position types, background
image fitting and positioning, and box shadows.
For many of these, there's a set of units and sizing scales.
These cannot be documented fully in this slideshow, but hopefully it gives you a
sense of what's possible. You should read the `.less` files; they are short and
easy to understand.
---
# Where Did The Names Come From?
For some reason, I named my Remark slideshow layouts after iconic chair designs
(Monobloc, Adirondack, etc).
![Chair parts](chair-parts.png# fr ml-2)
The apron is the part of the chair upon which everything rests, so I gave the
underlying "supporting" set of CSS that name. I named Descartes after the famous
inventor of the Cartesian coordinate system.
Credit: http://www.props.eric-hart.com/

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 221 KiB

View file

@ -1,415 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 731.0755 360.29779"
height="360.29779"
width="731.0755"
xml:space="preserve"
version="1.1"
id="svg2"><metadata
id="metadata8"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs6"><clipPath
id="clipPath12"
clipPathUnits="userSpaceOnUse"><path
id="path14"
d="M 0,0 612,0 612,360 0,360 0,0 Z" /></clipPath><clipPath
id="clipPath22"
clipPathUnits="userSpaceOnUse"><path
id="path24"
d="M 0,0 612,0 612,360 0,360 0,0 Z" /></clipPath><clipPath
id="clipPath32"
clipPathUnits="userSpaceOnUse"><path
id="path34"
d="m 59.04,73.44 522.72,0 0,227.52 -522.72,0 0,-227.52 z" /></clipPath><clipPath
id="clipPath78"
clipPathUnits="userSpaceOnUse"><path
id="path80"
d="M 0,0 612,0 612,360 0,360 0,0 Z" /></clipPath><clipPath
id="clipPath158"
clipPathUnits="userSpaceOnUse"><path
id="path160"
d="m 59.04,73.44 522.72,0 0,227.52 -522.72,0 0,-227.52 z" /></clipPath><clipPath
id="clipPath204"
clipPathUnits="userSpaceOnUse"><path
id="path206"
d="M 0,0 612,0 612,360 0,360 0,0 Z" /></clipPath></defs><g
clip-path="url(#clipPath12)"
transform="matrix(1.25,0,0,-1.25,0,380.214)"
id="g10"><g
id="g16" /><g
id="g18"><g
clip-path="url(#clipPath22)"
id="g20"><path
id="path26"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="M 0,0 612,0 612,360 0,360 0,0 Z" /></g></g><g
id="g28"><g
clip-path="url(#clipPath32)"
id="g30"><path
id="path36"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 133.5,103.45 35,13.71" /><path
id="path38"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 181.9,122.41 35,13.71" /><path
id="path40"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 230.3,141.37 35,13.71" /><path
id="path42"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 278.7,160.33 35,13.71" /><path
id="path44"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 327.1,179.29 35,13.71" /><path
id="path46"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 375.5,198.25 35,13.71" /><path
id="path48"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 423.9,217.21 35,13.71" /><path
id="path50"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 472.3,236.17 35,13.71" /><path
id="path52"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 520.7,255.13 35,13.71" /><path
id="path54"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 124.1,100.83 c 0,1.48 1.21,2.7 2.7,2.7 1.48,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.22,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
id="path56"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 172.5,119.79 c 0,1.48 1.21,2.7 2.7,2.7 1.49,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.21,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
id="path58"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 220.9,138.75 c 0,1.48 1.21,2.7 2.7,2.7 1.49,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.21,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
id="path60"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 269.3,157.71 c 0,1.48 1.21,2.7 2.7,2.7 1.49,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.21,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
id="path62"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 317.7,176.67 c 0,1.48 1.21,2.7 2.7,2.7 1.48,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.22,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
id="path64"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 366.1,195.63 c 0,1.48 1.21,2.7 2.7,2.7 1.48,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.22,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
id="path66"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 414.5,214.59 c 0,1.48 1.21,2.7 2.7,2.7 1.49,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.21,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
id="path68"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 462.9,233.55 c 0,1.48 1.21,2.7 2.7,2.7 1.48,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.22,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
id="path70"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 511.3,252.51 c 0,1.48 1.21,2.7 2.7,2.7 1.48,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.22,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
id="path72"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 559.7,271.47 c 0,1.48 1.21,2.7 2.7,2.7 1.48,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.22,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /></g></g><g
id="g74"><g
clip-path="url(#clipPath78)"
id="g76"><path
id="path82"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 78.4,73.44 484,0" /><path
id="path84"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 78.4,73.44 0,-7.2" /><path
id="path86"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 175.2,73.44 0,-7.2" /><path
id="path88"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 272,73.44 0,-7.2" /><path
id="path90"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 368.8,73.44 0,-7.2" /><path
id="path92"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 465.6,73.44 0,-7.2" /><path
id="path94"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 562.4,73.44 0,-7.2" /><text
id="text96"
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1,0,0,-1,73.95,47.52)"><tspan
id="tspan98"
y="0"
x="0">0</tspan></text>
<text
id="text100"
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1,0,0,-1,170.75,47.52)"><tspan
id="tspan102"
y="0"
x="0">2</tspan></text>
<text
id="text104"
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1,0,0,-1,267.55,47.52)"><tspan
id="tspan106"
y="0"
x="0">4</tspan></text>
<text
id="text108"
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1,0,0,-1,364.35,47.52)"><tspan
id="tspan110"
y="0"
x="0">6</tspan></text>
<text
id="text112"
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1,0,0,-1,461.15,47.52)"><tspan
id="tspan114"
y="0"
x="0">8</tspan></text>
<text
id="text116"
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1,0,0,-1,553.5,47.52)"><tspan
id="tspan118"
y="0"
x="0 8.8959999">10</tspan></text>
<path
id="path120"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 59.04,81.87 0,210.66" /><path
id="path122"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 59.04,81.87 -7.2,0" /><path
id="path124"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 59.04,134.53 -7.2,0" /><path
id="path126"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 59.04,187.2 -7.2,0" /><path
id="path128"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 59.04,239.87 -7.2,0" /><path
id="path130"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 59.04,292.53 -7.2,0" /><text
id="text132"
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(0,1,1,0,41.76,77.42)"><tspan
id="tspan134"
y="0"
x="0">0</tspan></text>
<text
id="text136"
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(0,1,1,0,41.76,116.74)"><tspan
id="tspan138"
y="0"
x="0 8.8959999 17.792 26.688">5000</tspan></text>
<text
id="text140"
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(0,1,1,0,41.76,217.63)"><tspan
id="tspan142"
y="0"
x="0 8.8959999 17.792 26.688 35.584">15000</tspan></text>
<path
id="path144"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 59.04,73.44 522.72,0 0,227.52 -522.72,0 0,-227.52" /><text
id="text146"
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1,0,0,-1,298.61,18.72)"><tspan
id="tspan148"
y="0"
x="0 8.8959999 17.792 26.688 35.584">nodes</tspan></text>
<text
id="text150"
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(0,1,1,0,12.96,148.95)"><tspan
id="tspan152"
y="0"
x="0 4.448 13.344 18.672001 27.568001 36.464001 45.360001 54.256001 63.152 72.047997">throughput</tspan></text>
</g></g><g
id="g154"><g
clip-path="url(#clipPath158)"
id="g156"><path
id="path162"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 133.64,103.07 34.72,11.35" /><path
id="path164"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 182.19,118.37 34.42,8.41" /><path
id="path166"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 230.7,129.65 34.2,5.61" /><path
id="path168"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 279.17,137.12 34.06,3.3" /><path
id="path170"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 327.59,141.45 34.02,1.57" /><path
id="path172"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 376,143.43 34,0.38" /><path
id="path174"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 424.4,143.8 34,-0.43" /><path
id="path176"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 472.8,143.08 34,-0.93" /><path
id="path178"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 521.2,141.69 34,-1.23" /><path
id="path180"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 124.1,100.83 c 0,1.48 1.21,2.7 2.7,2.7 1.48,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.22,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
id="path182"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 172.5,116.66 c 0,1.48 1.21,2.7 2.7,2.7 1.49,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.21,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
id="path184"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 220.9,128.49 c 0,1.48 1.21,2.7 2.7,2.7 1.49,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.21,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
id="path186"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 269.3,136.43 c 0,1.48 1.21,2.7 2.7,2.7 1.49,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.21,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
id="path188"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 317.7,141.12 c 0,1.48 1.21,2.7 2.7,2.7 1.48,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.22,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
id="path190"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 366.1,143.35 c 0,1.48 1.21,2.7 2.7,2.7 1.48,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.22,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
id="path192"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 414.5,143.89 c 0,1.48 1.21,2.7 2.7,2.7 1.49,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.21,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
id="path194"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 462.9,143.28 c 0,1.48 1.21,2.7 2.7,2.7 1.48,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.22,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
id="path196"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 511.3,141.95 c 0,1.48 1.21,2.7 2.7,2.7 1.48,0 2.7,-1.22 2.7,-2.7 0,-1.49 -1.22,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.21 -2.7,2.7" /><path
id="path198"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 559.7,140.2 c 0,1.49 1.21,2.7 2.7,2.7 1.48,0 2.7,-1.21 2.7,-2.7 0,-1.48 -1.22,-2.7 -2.7,-2.7 -1.49,0 -2.7,1.22 -2.7,2.7" /></g></g><g
id="g200"><g
clip-path="url(#clipPath204)"
id="g202"><path
id="path208"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 78.4,73.44 484,0" /><path
id="path210"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 78.4,73.44 0,-7.2" /><path
id="path212"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 175.2,73.44 0,-7.2" /><path
id="path214"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 272,73.44 0,-7.2" /><path
id="path216"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 368.8,73.44 0,-7.2" /><path
id="path218"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 465.6,73.44 0,-7.2" /><path
id="path220"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 562.4,73.44 0,-7.2" /><text
id="text222"
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1,0,0,-1,73.95,47.52)"><tspan
id="tspan224"
y="0"
x="0">0</tspan></text>
<text
id="text226"
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1,0,0,-1,170.75,47.52)"><tspan
id="tspan228"
y="0"
x="0">2</tspan></text>
<text
id="text230"
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1,0,0,-1,267.55,47.52)"><tspan
id="tspan232"
y="0"
x="0">4</tspan></text>
<text
id="text234"
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1,0,0,-1,364.35,47.52)"><tspan
id="tspan236"
y="0"
x="0">6</tspan></text>
<text
id="text238"
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1,0,0,-1,461.15,47.52)"><tspan
id="tspan240"
y="0"
x="0">8</tspan></text>
<text
id="text242"
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1,0,0,-1,553.5,47.52)"><tspan
id="tspan244"
y="0"
x="0 8.8959999">10</tspan></text>
<path
id="path246"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 59.04,81.87 0,210.66" /><path
id="path248"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 59.04,81.87 -7.2,0" /><path
id="path250"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 59.04,134.53 -7.2,0" /><path
id="path252"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 59.04,187.2 -7.2,0" /><path
id="path254"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 59.04,239.87 -7.2,0" /><path
id="path256"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 59.04,292.53 -7.2,0" /><text
id="text258"
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(0,1,1,0,41.76,77.42)"><tspan
id="tspan260"
y="0"
x="0">0</tspan></text>
<text
id="text262"
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(0,1,1,0,41.76,116.74)"><tspan
id="tspan264"
y="0"
x="0 8.8959999 17.792 26.688">5000</tspan></text>
<text
id="text266"
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(0,1,1,0,41.76,217.63)"><tspan
id="tspan268"
y="0"
x="0 8.8959999 17.792 26.688 35.584">15000</tspan></text>
<path
id="path270"
style="fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 59.04,73.44 522.72,0 0,227.52 -522.72,0 0,-227.52" /><text
id="text272"
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1,0,0,-1,298.61,18.72)"><tspan
id="tspan274"
y="0"
x="0 8.8959999 17.792 26.688 35.584">nodes</tspan></text>
<text
id="text276"
style="font-variant:normal;font-weight:normal;font-size:16px;font-family:Helvetica;-inkscape-font-specification:Helvetica;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(0,1,1,0,12.96,148.95)"><tspan
id="tspan278"
y="0"
x="0 4.448 13.344 18.672001 27.568001 36.464001 45.360001 54.256001 63.152 72.047997">throughput</tspan></text>
</g></g></g></svg>

Before

Width:  |  Height:  |  Size: 28 KiB

Some files were not shown because too many files have changed in this diff Show more