Commit e9e187a1 authored by Michael Aaron Murphy's avatar Michael Aaron Murphy
Browse files

🎉 First commit

parents
MIT License
Copyright (c) 2019 Michael Aaron Murphy <mmstick@pm.me>
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.
# Zola Dock Theme
A theme for use with [Zola](https://www.getzola.org/), which provides a dock-like sidebar.
## Variables
Under the `[extra]` table in your `config.toml`, the following variables are supported for use with the theme.
The `sidebar_pages` variable controls the content in the upper left portion of the sidebar, whereas the `sidebar_social` variable controls the bottom left portion of the sidebar.
The `index_css` variable defines additional CSS files to include in the header for the index page, and all pages built from the index page.
```toml
sidebar_pages = [
{ id = "Home", url = "/", img = "home.svg" }
]
sidebar_social = [
{ id ="GitHub", url = "https://github.com/mmstick", img = "social/github.svg" },
{ id ="GitLab", url = "https://gitlab.com/mmstick", img = "social/gitlab.svg" },
{ id ="Twitter", url = "https://twitter.com/mmstick", img = "social/twitter.svg"},
{ id ="Mastodon", url = "https://fosstodon.org/@mmstick", img = "social/mastodon.svg" },
{ id ="Keybase", url = "https://keybase.io/mmstick", img = "social/keybase.svg" },
{ id ="Email", url = "mailto:mmstick@pm.me", img = "social/email.svg" }
]
```
# The URL the site will be built for
base_url = "https://example.com"
# Whether to automatically compile all Sass files in the sass directory
compile_sass = true
# Whether to do syntax highlighting
# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
highlight_code = false
# Whether to build a search index to be used later on by a JavaScript library
build_search_index = false
[extra]
# Put all your custom variables here
$primary: #494949
$secondary: #09f
$tertiary: #e70
html, body
width: 100%
height: 100%
margin: 0
color: $primary
a
text-decoration: unset
color: $secondary
display: inline-block
a:hover
color: $tertiary
code
background: #ddd
padding: .1em
border-radius: .333em
h1, h2, h3, h4, p
padding: .5rem 0
margin: 0
ul
margin: 0
padding-top: .25rem
padding-bottom: .25rem
li
list-style: none
li:before
content: "\2022"
color: $secondary
font-weight: bold
font-size: 18pt
display: inline-block
width: 1rem
margin-left: -1em
li > ul
padding-top: 0
padding-bottom: 0
p, li
line-height: 1.5em
h1, h2, h3
line-height: 1.2em
h1
font-size: 24pt
h2
font-size: 18pt
h3
font-size: 14pt
pre
margin: 1em 2em
padding: .5em
blockquote
border-left: .5rem solid $secondary
margin: 1rem 2rem
padding: .5rem 1rem
blockquote blockquote
border-color: $tertiary
img
max-width: 100%
figure
margin: auto
padding: 1rem
display: flex
flex-flow: column
figure
text-align: center
figcaption
font-style: italic
body a
display: unset !important
strong
color: #000
body
height: 100%
display: flex
#content
padding-left: 3.8rem
width: 100%
background: #eee
overflow: auto
> article
margin: 0 auto 2rem auto
max-width: 50rem
padding: .25rem 1rem 1rem 1rem
background: #fff
> header
font-weight: bold
padding-bottom: .25em
margin-bottom: .5em
border-bottom: .2em solid $primary
#post-title
font-size: 2.25rem
padding-bottom: 0
color: $secondary
#created, #categories, #tags
display: flex
padding: .2rem 0
#categories .elm, #tags .elm, time
padding-left: .25rem
color: $secondary
#sidebar
background: $primary
width: 3.5rem
height: 100vh
padding: 0 .15em
position: fixed
display: flex
flex-direction: column
a
line-height: 0
img
border-radius: 50%
background: #fff
object-fit: cover
width: 48px
height: 48px
margin: .125em auto
padding: .125rem
img:hover
box-shadow: 0 0 .333rem #fff
#index
display: flex
flex-direction: column
justify-content: space-between
max-width: 50em
margin: auto
padding: 1rem
time
text-align: center
padding: .1rem .5rem
width: 5em
article
padding: .5rem 0
background: #fff
box-shadow: .1em .2em .4em
transition: all .2s ease-in-out
margin: .75rem 0
h1, p
padding: 0 .5rem
margin: 0
article:hover
transform: scale(1.03)
header
display: flex
flex-direction: column
font-weight: bold
margin-bottom: .5em
h1
font-size: 1.5rem
flex-grow: 1
border-bottom: .25rem solid $primary
.details
display: flex
justify-content: flex-end
color: #fff
time
background: $primary
font-size: 1rem
align-self: end
padding-bottom: .125rem
.cats
display: flex
background: $secondary
padding: .1rem .3rem
div
padding: 0 .2rem
@media screen and (max-width: 480)
#index article > header
flex-direction: column
#sidebar_start, #sidebar_end
margin: auto
#sidebar_start
padding-top: .25em
#sidebar_end
padding-bottom: .25em
flex-grow: 1
display: flex
flex-direction: column
justify-content: end
.tooltip
position: relative
border-bottom: 1px dotted black
.tooltip .tooltiptext
visibility: hidden
background-color: $primary
color: #fff
text-align: center
margin-left: 1em
top: .5em
padding: 1rem 1rem
border-radius: 6px
position: absolute
z-index: 1
.tooltip:hover .tooltiptext
visibility: visible
#sections
margin: auto
#zola-continue-reading
visibility: hidden
line-height: 0
padding: 0
margin: 0
#pagination
max-width: 50em
margin: auto
padding: 1rem
font-weight: bold
font-size: 1.25em
#previous
float: left
#next
float: right
#sidebar
display: none !important
#content
margin: 0 auto
width: 100%
float: none
display: initial
#posts
width: 100%
float: none
display: initial
padding-left: 1rem
padding-right: 1rem
margin: 0 auto
{% extends "master.html" %}
{% block content %}
<main id="404">
<h1 class="post-title">404: Page Not Found</h1>
<p>The page that you seek does not exist. It may have been renamed.</p>
</main>
{% endblock content %}
{% extends "master.html" %}
{% block content %}
<main id="index">
{% for page in paginator.pages %}
<article>
<header>
<h1><a href="{{ page.permalink | safe }}">{{ page.title }}</a></h1>
<div class="details">
<div class="cats">
{% for category in page.taxonomies.categories %}
{% if loop.index != 1 %}
<div>::</div>
{% endif %}
<div>{{category}}</div>
{% endfor %}
</div>
<time>{{ page.date }}</time>
</div>
</header>
<p>{{ page.summary | safe }}</p>
</article>
{% endfor %}
</main>
<nav id="pagination">
{% if paginator.previous %}
<a id="previous" href="{{ paginator.previous }}">‹ Previous</a>
{% endif %}
{% if paginator.next %}
<a id="next" href="{{ paginator.next }}">Next ›</a>
{% endif %}
</nav>
{% endblock %}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<title>{% block title %}{{ config.title }}{% endblock title %}</title>
<link rel="stylesheet" href="/zola-dock-print.css" media="print">
<link rel="stylesheet" href="/zola-dock-main.css">
{% block head %}
{% endblock %}
</head>
<body>
<div id="sidebar">
<div id="sidebar_start">
{% for item in config.extra.sidebar_start %}
<a href="{{ item.url | safe }}">
<div class="tooltip">
<img src="/{{ item.img | safe }}" />
<span class="tooltiptext">{{ item.id }}</span>
</div>
</a>
{% endfor %}
</div>
<nav id="sidebar_end">
{% for item in config.extra.sidebar_end %}
<a href="{{ item.url | safe }}">
<div class="tooltip">
<img id="{{ item.id }}" class="sidebar-icon" src="/{{ item.img | safe }}"
alt="{{ item.id }}" />
<span class="tooltiptext">{{ item.id }}</span>
</div>
</a>
{% endfor %}
</nav>
</div>
<div id="content">{% block content %}{% endblock content %}</div>
</body>
</html>
{% extends "master.html" %}
{% block title %}{{ page.title }}{% endblock title %}
{% block content %}
<article>
<header>
<h1 id="post-title">{{ page.title }}</h1>
<details>
<div id="created">Date written: <time class="post-date">{{ page.date | date(format="%Y-%m-%d") }}</time></div>
<div id="categories">
Categories:
{% for category in page.taxonomies.categories %}
{% if loop.index != 1 %}
<div>,</div>
{% endif %}
<div class="elm">{{category}}</div>
{% endfor %}
</div>
<div id="tags">
Tags:
{% for tag in page.taxonomies.tags %}
{% if loop.index != 1 %}
<div>,</div>
{% endif %}
<div class="elm">{{tag}}</div>
{% endfor %}
</div>
</details>
</header>
{{ page.content | safe }}
</article>
{% endblock content %}
name = "Zola Dock"
description = "A theme with a dock-like sidebar"
license = "MIT"
homepage = "https://github.com/Keats/zola-hyde"
# The minimum version of Zola required
min_version = "0.4.0"
# An optional live demo URL
demo = "https://mmstick.keybase.pub"
# Any variable there can be overriden in the end user `config.toml`
# You don't need to prefix variables by the theme name but as this will
# be merged with user data, some kind of prefix or nesting is preferable
# Use snake_casing to be consistent with the rest of Zola
[extra]
# The theme author info: you!
[author]
name = "Michael Aaron Murphy"
homepage = "https://mmstick.keybase.pub/"
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment