Skip to content

Instantly share code, notes, and snippets.

@haschek
Last active August 29, 2015 14:20
Show Gist options
  • Save haschek/a561faa1cf8ed5810810 to your computer and use it in GitHub Desktop.
Save haschek/a561faa1cf8ed5810810 to your computer and use it in GitHub Desktop.
Vorlage Theme: A Bootstrap Template for Tumblr Themes. http://eye48.com/go/vorlagetheme
<html class="{select:Layout}">
<head>
{block:Hidden}
<!--
Vorlage Theme: A Boilerplate to bootstrap Tumblr Themes.
========================================================
You can use it as foundation to develop your own Tumblr theme.
It primarily focuses on Tumblr template tags and demonstrates
their features. It comes with basic HTML markup and simple
responsive CSS layout, it's supposed to be changed.
@see https://www.tumblr.com/docs/custom_themes
@see https://www.tumblr.com/docs/localizing_themes
@see https://groups.google.com/group/tumblr-themes
@see http://developers.tumblr.com/
## License: CC-BY 4.0
You can use Vorlage Theme free of charge for personal and
commercial projects under the CC-BY 4.0 International License.
Please attribute usage in site footer or imprint page, including
a link to http://eye48.com/go/vorlagetheme
Permissions beyond the scope of this license may be
available at http://48augen.de/.
@link http://eye48.com/go/vorlagetheme
@version 1.0.0
@author Michael Haschke <http://michael.haschke.biz/>
@license http://creativecommons.org/licenses/by/4.0/
-->
{/block:Hidden}
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{block:Hidden}
<!--
## Configuration Options
Beside global config option like ``{HeaderImage}`` you can define
your own config option for font and color values, false/true switches,
text and select options.
@see https://www.tumblr.com/docs/de/custom_themes#theme-options
-->
<meta name="select:Layout" content="layout-left" title="Left">
<meta name="select:Layout" content="layout-center" title="Centered">
<meta name="select:Fontsize" content="1.1em" title="Normal">
<meta name="select:Fontsize" content="1.35em" title="Big">
<meta name="select:Fontsize" content="0.85em" title="Small">
<meta name="font:Title" content="sans-serif">
<meta name="color:Title" content="#660000">
<meta name="font:Text" content="serif">
<meta name="color:Text" content="#333333">
<meta name="color:Background" content="#ffffff">
<meta name="color:Accent" content="#000066">
<meta name="if:Show Archive Link" content="1">
<meta name="if:Show Keyword Search" content="1">
<meta name="if:Give SEO Credits for Links and Reblogs" content="1">
<meta name="if:Prevent Double Content on Index Pages" content="1">
<meta name="text:Disqus shortname" content="">
<meta name="text:Website URL" content="">
<meta name="text:Facebook URL" content="">
{/block:Hidden}
{block:Hidden}
<!--
## Title and Meta Description
The title should be represent the shown content of the page
because it is used in the browser title bar and on result
pages of search engines. The ``{MetaDescription}`` tag
contains the blog description on index pages and a preview
of the post content on permaling pages.
@see https://www.tumblr.com/docs/de/custom_themes#basic_variables
-->
{/block:Hidden}
<title>
{block:PermalinkPage}
{block:PostSummary}
{PostSummary} —
{/block:PostSummary}
{/block:PermalinkPage}
{block:SearchPage}
{lang:Search results for SearchQuery} —
{/block:SearchPage}
{block:TagPage}
{lang:Archive}: {Tag} —
{/block:TagPage}
{block:DayPage}
{lang:Archive}: {Year}-{MonthNumberWithZero}-{DayOfMonthWithZero} —
{/block:DayPage}
{Title}
{block:IndexPage}
({lang:Page CurrentPage of TotalPages})
{block:IndexPage}
</title>
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
{block:Hidden}
<!--
## Basic options for Search Engine Optimization (SEO)
Try to prevent double content on your page if you can, or
your page may be rated down. Index pages hold content of all
single posts, so we should try that they are not indexed
by search engines. If you add link posts and reblog posts
from other Tumblr blogs your page double their content,
prevent indexing those page, too. Addionally you can
credit the original work via canonical links.
-->
{/block:Hidden}
{block:IfPreventDoubleContentonIndexPages}
{block:Hidden}
<!-- prevent double content of index pages. -->
{/block:Hidden}
{block:IndexPage}<meta name="robots" content="noindex, follow" />{/block:IndexPage}
{/block:IfPreventDoubleContentonIndexPages}
{block:IfGiveSeoCreditsForLinksAndReblogs}
{block:Hidden}
<!-- do not hijack other content, give credit to the original source -->
{/block:Hidden}
{block:Posts}{block:PermalinkPage}
{block:RebloggedFrom}<link rel="canonical" href="{ReblogRootURL}" />{/block:RebloggedFrom}
{block:Link}<link rel="canonical" href="{URL}" />{/block:Link}
{/block:PermalinkPage}{/block:Posts}
{/block:IfGiveSeoCreditsForLinksAndReblogs}
{block:Hidden}
<!--
## Favicon and Logo used for Touch Icon
You probably can ignore tag for touch icon on iPhone
devices, but set a favicon.
-->
{/block:Hidden}
<link rel="shortcut icon" href="{Favicon}" />
<link rel="apple-touch-icon" href="{PortraitURL-128}" />
{block:Hidden}
<!--
## RSS Feeds
Add the standard RSS feed, RSS feed for tags on their
archive pages, and comments feed. Even if RSS is not
so popular as it was when the Blogosphere did hit the world
but it is still useful for your readers and search engines.
-->
{/block:Hidden}
<link rel="alternate" type="application/rss+xml" href="{RSS}" title="{lang:Subscribe via RSS}: {PlaintextTitle}" />
{block:TagPage}
{block:Hidden}
<!-- looks like ``{TagURL}`` is not working here anymore.
@see https://www.tumblr.com/docs/de/custom_themes#tags -->
{/block:Hidden}
<link rel="alternate" type="application/rss+xml" href="/tagged/{URLSafeTag}/rss" title="{lang:Subscribe via RSS}: {lang:Posts tagged Tag}" />
{/block:TagPage}
{block:IfDisqusShortname}
<link rel="alternate" type="application/rss+xml" href="http://{text:Disqus Shortname}.disqus.com/latest.rss" title="{lang:Subscribe via RSS}: {lang:Recent comments}" />
{/block:IfDisqusShortname}
{MobileAppHeaders}
{block:Hidden}
<!--
## CSS Rules
Only some basic rules, remove them and add yours. Using
config values here, don't forget ``{CustomCSS}`` as last
element before closing styles.
This block uses config options and it demonstrates usage
for RGBcolor transformations.
@see https://www.tumblr.com/docs/de/custom_themes#theme-options
@see https://www.tumblr.com/docs/de/custom_themes#variable-transformations
-->
{/block:Hidden}
<style type="text/css">
/* Layout */
html {
background-color: {color:Background};
{block:ShowHeaderImage}
background-image: linear-gradient( to bottom, rgba({RGBcolor:Text}, 0.25), rgba({RGBcolor:Background}, 0.25)), url({HeaderImage});
background-attachment: fixed;
background-size: cover;
background-position: center;
{/block:ShowHeaderImage}
color: {color:Text};
font-size: 0.9em;
line-height: 1.6;
padding: 1rem;
}
a {
color: {color:Accent};
text-decoration: underline;
}
a:focus, a:hover {
text-decoration: none;
}
.avatar-circle .avatar {
border-radius: 100%;
overflow: hidden;
}
#header, #main, #sidebar, #footer {
padding: 1rem;
}
header, h1, h2, h3, h4 {
font-family: {font:Title};
color: {color:Title};
}
header p {
color: {color:Text};
}
.layout-center header {
text-align: center;
}
.bloglogo {
height: 4.8rem;
border: solid 0.25rem rgba({RGBcolor:Background}, 0.5);
}
.blogtitle {
font-size: 2.4rem;
display: block;
font-weight: {TitleFontWeight};
margin: 0.125rem 0;
}
.blogtitle a {
color: {color:Background};
background-color: rgba({RGBcolor:Title}, 0.8);
padding: 0.125rem 0;
text-decoration: none;
}
.blogdescription {
font-size: 1.6rem;
font-weight: normal;
color: {color:Text};
background-color: rgba({RGBcolor:Background}, 0.8);
padding: 0.125rem 0;
}
#header nav {
text-transform: uppercase;
font-family: {font:Title};
}
#header nav a {
color: {color:Background};
background-color: rgba({RGBcolor:Title}, 0.8);
border: none;
padding: 0.5rem;
line-height: 1;
white-space: nowrap;
}
nav li {
display: inline-block;
margin: 0 0.125rem 0.75rem 0;
}
#header form {
display: inline-block;
margin: 0;
padding: 0;
}
dt, dd {
display: inline-block;
margin: 0 0.125rem;
}
dt {
font-weight: bold;
}
nav ol, nav ul {
padding-left: 0;
margin-left: 0;
}
#search button,
#search input {
font-family: {font:Title};
color: {color:Background};
background-color: {color:Title};
border: none;
padding: 0.5rem;
margin: 0;
font-size: 1rem;
line-height: 1;
}
#search input {
color: {color:Text};
background-color: {color:Background};
}
#sidebar {
background-color: rgba({RGBcolor:Background}, 0.75);
}
#main {
background-color: {color:Background};
}
hr {
width: 62.5%;
margin: 3.2rem auto 3.2rem 0;
border: 0;
border-top: solid 1px rgba({RGBcolor:Accent}, 0.25);
}
.layout-center hr {
margin-left: auto;
margin-right: auto;
}
.hideme {
position: absolute;
left: -5000em;
}
.control-button iframe,
.control-button svg {
vertical-align: middle;
}
.layout-center #pagination {
text-align: center;
}
#footer {
color: {color:Background};
background-color: {color:Text};
}
#footer a {
color: {color:Background};
}
#profiles {
list-style: none;
padding: 0;
}
#profiles li {
display: inline-block;
margin-right: 0.4em;
}
@media (min-width: 50em) {
html {
padding: 1.6rem 3.2rem;
font-size: {select:Fontsize};
font-family: {font:Text};
}
#header, #main, #sidebar, #footer {
max-width: 50em;
padding: 1.6rem 3.2rem;
}
.layout-center #header,
.layout-center #main,
.layout-center #sidebar,
.layout-center #footer {
margin-left: auto;
margin-right: auto;
}
}
/* Text */
h1 {
font-size: 3.2rem;
}
.post-description h1 {
font-size: 2.4rem;
}
h2 {
font-size: 1.6rem;
}
header > h1:first-child,
header > h2:first-child {
margin-top: 0;
}
h1, h2, h3, h4, h5, h6 {
line-height: inherit;
margin-bottom: 0.8rem;
line-height: 1.2;
}
blockquote, q {
font-style: italic;
}
img {
max-width: 100%;
height: auto;
width: auto;
}
figure {
margin-left: 0;
margin-right: 0;
}
/* Link */
.is-link img {
max-width: 38%;
max-height: 6.4em;
float: left;
margin-right: 1.6em;
}
.is-link .post-description {
overflow: hidden;
}
/* Quote */
blockquote.quote {
margin: 0 0 1.6rem 0;
}
blockquote.short {
font-size: 3.2rem;
}
blockquote.medium {
font-size: 2.2rem;
}
blockquote.long {
font-size: 1.2rem;
}
/* Photo */
.media-photo img {
display: block;
height: auto;
width: auto;
max-height: 90vh;
}
.layout-center .media-photo img {
margin-left: auto;
margin-right: auto;
}
/* Photoset */
.media-photoset iframe {
display: block;
max-width: 700px;
}
.layout-center .media-photoset iframe {
margin-left: auto;
margin-right: auto;
}
/* Video */
.media-video {
width: 100%;
height: 0;
padding-bottom: 56.25%;
position: relative;
}
.media-video iframe {
position: absolute;
width: 100%;
height: 100%;
}
/* Video */
.media-audio iframe {
display: block;
max-width: 700px;
width: 100%;
max-height: 70vh;
}
.layout-center .media-audio iframe {
margin-left: auto;
margin-right: auto;
}
/* Chat */
.conversation {
padding-left: 0;
list-style: none;
}
.conversation li {
margin-bottom: 0.8rem;
}
.chat-odd strong {
color: {color:Accent};
}
/* Post Notes & Following*/
.notes,
#following ol,
#groupblog ol
{
padding-left: 0;
}
#notes .note,
#following li,
#groupblog li
{
display: inline-block;
margin-left: 0;
margin-right: 1rem;
margin-bottom: 0.25em;
}
.notes .avatar,
#following .avatar,
#groupblog .avatar
{
height: 1.6rem;
vertical-align: middle;
margin-right: 0.25rem;
}
/* Likes */
#likes {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
#likes li {
position: relative;
height: 10em;
overflow: hidden;
margin-bottom: 1.6em;
background-color: {color:Background};
}
#likes img {
width: 100%;
min-height: 10em;
height: auto;
}
#likes .post_info_bottom {
display: block !important;
background-color: rgba({RGBcolor:Background}, 0.5);
padding: 0.8em;
position: absolute;
left: 0;
bottom: 0;
font-size: 0.8em;
}
#likes .post_info_bottom a:first-child {
color: {color:Background};
background-color: {color:Accent};
font-weight: bold;
}
@media (min-width: 50em) {
#likes > li {
float:left;
width: 30%;
}
#likes > li:nth-of-type(3n + 1) {
clear: left;
}
#likes > li:nth-of-type(3n + 2) {
margin: 0 5%;
}
}
{CustomCSS}
</style>
</head>
<body data-urlencoded-name="{URLEncodedName}" class="avatar-{AvatarShape}">
{block:Hidden}
<!--
## Header
The page header contains logo/avatar, title, blog description
and the navigation. Tumblr block tags are used here to show or
hide some of that contents. Some parts are not included (e.g.
logo and description), some parts are included but hidden (e.g.
the blog title), it they are configured to not to be shown. No
usage of headlines here because the global <header> is used and
headlines are getting used for the main content.
@see https://www.tumblr.com/docs/de/custom_themes#global_appearance
-->
{/block:Hidden}
<header id="header">
{block:ShowAvatar}
<a href="{BlogURL}"><img class="avatar bloglogo" src="{PortraitURL-128}" alt="" /></a>
{/block:ShowAvatar}
<p>
<strong class="blogtitle{block:HideTitle} hideme{block:HideTitle}">
<a href="{BlogURL}">{Title}</a>
</strong>
{block:ShowDescription}
<span class="blogdescription">
{Description}
</span>
{/block:ShowDescription}
</p>
{block:Hidden}
<!--
### Navigation
If enabled, the navigation contains links to pages/forwardings, question
and submit forms, content archive and keyword search.
@see https://www.tumblr.com/docs/de/custom_themes#navigation
-->
{/block:Hidden}
<nav>
<ol>
{block:HasPages}
{block:Pages}
<li>
<a href="{URL}" class="page">{Label}</a>
</li>
{/block:Pages}
{/block:HasPages}
{block:IfShowArchiveLink}
<li>
<a href="/archive" class="archive">{lang:Archive}</a>
</li>
{/block:IfShowArchiveLink}
{block:AskEnabled}
<li>
<a href="/ask" class="ask">{AskLabel}</a>
</li>
{/block:AskEnabled}
{block:SubmissionsEnabled}
<li>
<a href="/submit" class="submit">{SubmitLabel}</a>
</li>
{/block:SubmissionsEnabled}
{block:IfShowKeywordSearch}
<li>
<form action="/search" method="get" id="search">
<label for="q" class="hideme">{lang:Search}</label>
<input type="text" name="q" id="q" placeholder="{lang:Search}" value="{SearchQuery}">
<button type="submit">{lang:Search}</button>
</form>
</li>
{/block:IfShowKeywordSearch}
</ol>
</nav>
</header>
<hr class="hideme" />
{block:Hidden}
<!--
## Main Content
It contains the post index including headers for search, tag
and day pages, or it contains the permalink post including
share options, metadata, tags, notes and comments. The main
content is finished by the pagination to navigate over index
and permalink pages.
-->
{/block:Hidden}
<main data-page-id="{CurrentPage}" id="main">
{block:Hidden}
<!--
### Index Page Header
On index pages for keyword searches, tags and days we use
headline level 1 to describe them. This part demonstrates
how to use the localized template strings to improve
internationalization (I18N) of the blog interface.
@see https://www.tumblr.com/docs/de/localizing_themes
-->
{/block:Hidden}
{block:SearchPage}
<!-- Header: Search Archive -->
<header>
<h1>
{lang:SearchResultCount results for SearchQuery 2}
{block:NoSearchResults}
{lang:No search results for SearchQuery 2}
{/block:NoSearchResults}
</h1>
<p>{lang:Page CurrentPage of TotalPages}</p>
</header>
{/block:SearchPage}
{block:TagPage}
<!-- Header: Tag Archive -->
<header>
<h1>{lang:TagResultCount posts tagged Tag 3}</h1>
<p>{lang:Page CurrentPage of TotalPages}</p>
</header>
{/block:TagPage}
{block:DayPage}
<!-- Header: Day Pages -->
<header>
<h1>
{lang:Archive}:
{block:English}{Month} {DayOfMonth}, {Year}{/block:English}
{block:NotEnglish}{DayOfMonth}. {Month} {Year}{/block:NotEnglish}
</h1>
<p>{lang:Page CurrentPage of TotalPages}</p>
</header>
{/block:DayPage}
{block:Hidden}
<!--
### Posts
On index pages we use multiple ``<section>`` elements
that contain one ``<article>`` (post) each. On permalink
pages we only use the ``<article>`` markup. Vorlage Theme
supports all Tumblr content types.
@see https://www.tumblr.com/docs/de/custom_themes#posts
-->
{/block:Hidden}
{block:Posts}
{block:IndexPage}<section>{/block:IndexPage}
<article
class="
is-{PostType}
{block:Photoset}is-photoset{/block:Photoset}
{block:Answer}is-answer{/block:Answer}
{block:RebloggedFrom}is-reblogged{/block:RebloggedFrom}
{block:Date}is-post post-{PostID}{/block:Date}
{block:PermalinkPage}is-permalink{/block:PermalinkPage}
{TagsAsClasses}
{block:IndexPage}
{block:Odd}is-odd{/block:Odd}
{block:Even}is-even{/block:Even}
{/block:IndexPage}
"
{block:Date}data-post-id="post_{PostID}"{/block:Date}
>
{block:Hidden}
<!--
#### Article Header
We use a very own block for post title to insert
always titles for a consistant structure. Most other
other themes lack titles for some post types, e.g.
photosets and audio posts. Headlines level 1 is
used on permalink pages, on index pages we use
level 2 headlines.
The article header also contains the permalink,
timestamp, author name and notes count.
One comment on this @ Tumblr: you guys should
support ``{PostSummary}`` tags on index pages!
-->
{/block:Hidden}
<header>
{block:PermalinkPage}<h1>{/block:PermalinkPage}
{block:IndexPage}<h2>{/block:IndexPage}
{block:Text}
{block:IndexPage}
<span class="hideme">{lang:Text}:</span> {block:Title}{Title}{/block:Title}
{/block:IndexPage}
{block:PermalinkPage}
{block:PostSummary}{PostSummary}{/block:PostSummary}
{/block:PermalinkPage}
{/block:Text}
{block:Photo}
<span class="hideme">{lang:Photo}{block:PostSummary}: {PostSummary}{/block:PostSummary}</span>
{/block:Photo}
{block:Photoset}
<span class="hideme">{lang:Photoset}{block:PostSummary}: {PostSummary}{/block:PostSummary}</span>
{/block:Photoset}
{block:Quote}
<span class="hideme">{lang:Quote}{block:PostSummary}: {PostSummary}{/block:PostSummary}</span>
{/block:Quote}
{block:Answer}
<span class="hideme">{lang:Answer}{block:PostSummary}: {PostSummary}{/block:PostSummary}</span>
{/block:Answer}
{block:Link}
<span class="hideme">{lang:Link}:</span>
<a href="{URL}" {Target}>{Name}{block:Host} ({Host}){/block:Host} ➯</a>
{/block:Link}
{block:Chat}
{block:IndexPage}
<span class="hideme">{lang:Chat}:</span> {block:Title}{Title}{/block:Title}
{/block:IndexPage}
{block:PermalinkPage}
<span class="hideme">{lang:Chat}:</span> {block:PostSummary}{PostSummary}{/block:PostSummary}
{/block:PermalinkPage}
{/block:Chat}
{block:Audio}
<span class="hideme">{lang:Audio}:
{block:Artist}{Artist}{/block:Artist}
{block:TrackName}"{TrackName}"{/block:TrackName}
{block:Album}({Album}){/block:Album}</span>
{/block:Audio}
{block:Video}
<span class="hideme">{lang:Video}{block:PostSummary}: {PostSummary}{/block:PostSummary}</span>
{/block:Video}
{block:Answer}
<span class="hideme">{lang:Answer}{block:PostSummary}: {PostSummary}{/block:PostSummary}</span>
{/block:Answer}
{block:PermalinkPage}</h1>{/block:PermalinkPage}
{block:IndexPage}</h2>{/block:IndexPage}
<p>
{block:Date}
<a href="{Permalink}" title="{lang:Permalink}{block:PostSummary}: {PlaintextPostSummary}{/block:PostSummary}"
><time datetime="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}T{24HourWithZero}:{Minutes}:{Seconds}">{TimeAgo}</time></a>
·
{block:Submission}
<a href="{SubmitterURL}">{Submitter}</a>
·
{/block:Submission}
{block:Answer}
{lang:Asked by Asker 2}
·
{/block:Answer}
{PostAuthorName}
{/block:Date}
{block:RebloggedFrom}
· {lang:Reblogged from}
<a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a>
{/block:RebloggedFrom}
{block:NoteCount}
· <a href="{Permalink}#notes">{NoteCountWithLabel}</a>
{/block:NoteCount}
</p>
</header>
{block:Hidden}
<!--
#### Text
@see https://www.tumblr.com/docs/de/custom_themes#text-posts
-->
{/block:Hidden}
{block:Text}
{block:Body}
<div class="post-description">
{Body}
</div>
{/block:Body}
{/block:Text}
{block:Hidden}
<!--
#### Link
@see https://www.tumblr.com/docs/de/custom_themes#link-posts
-->
{/block:Hidden}
{block:Link}
<div class="post-description">
{block:Thumbnail}
<img src="{Thumbnail}" alt="" class="avatar">
{/block:Thumbnail}
{block:Description}
{Description}
{/block:Description}
</div>
{/block:Link}
{block:Hidden}
<!--
#### Chat
@see https://www.tumblr.com/docs/de/custom_themes#chat-posts
-->
{/block:Hidden}
{block:Chat}
<ul class="conversation">
{block:Lines}
<li class="chat-{Alt}">
{block:Label}<strong>{Label}</strong>{/block:Label}
<q>{Line}</q>
</li>
{/block:Lines}
</ul>
{/block:Chat}
{block:Hidden}
<!--
#### Photo
@see https://www.tumblr.com/docs/de/custom_themes#photo-posts
-->
{/block:Hidden}
{block:Photo}
<figure class="{block:Caption}with-caption{/block:Caption}">
<div class="media-photo">
{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">{LinkCloseTag}
</div>
{block:Caption}
<figcaption class="post-description">
{Caption}
</figcaption>
{/block:Caption}
</figure>
{/block:Photo}
{block:Hidden}
<!--
#### Photoset
@see https://www.tumblr.com/docs/de/custom_themes#photoset-posts
-->
{/block:Hidden}
{block:Photoset}
<figure class="{block:Caption}with-caption{/block:Caption}">
<div class="media-photoset">
{Photoset}
</div>
{block:Caption}
<figcaption class="post-description">
{Caption}
</figcaption>
{/block:Caption}
</figure>
{/block:Photoset}
{block:Hidden}
<!--
#### Quote
@see https://www.tumblr.com/docs/de/custom_themes#quote-posts
-->
{/block:Hidden}
{block:Quote}
<figure class="{block:Source}with-caption{/block:Source}">
<blockquote class="quote {Length}">
{Quote}
</blockquote>
{block:Source}
<figcaption class="post-description">
{Source}
</figcaption>
{/block:Source}
</figure>
{/block:Quote}
{block:Hidden}
<!--
#### Audio
@see https://www.tumblr.com/docs/de/custom_themes#audio-posts
-->
{/block:Hidden}
{block:Audio}
<figure class="{block:Caption}with-caption{/block:Caption}">
<div class="media-audio">
{block:AudioEmbed}
{AudioEmbed}
{/block:AudioEmbed}
{block:AudioPlayer}
{AudioPlayer}
{/block:AudioPlayer}
</div>
{block:Caption}
<figcaption class="post-description">
{Caption}
</figcaption>
{/block:Caption}
</figure>
{/block:Audio}
{block:Hidden}
<!--
#### Video
@see https://www.tumblr.com/docs/de/custom_themes#video-posts
-->
{/block:Hidden}
{block:Video}
<figure class="{block:Caption}with-caption{/block:Caption}">
<div class="media-video">
{VideoEmbed-700}
</div>
{block:Caption}
<figcaption class="post-description">
{Caption}
</figcaption>
{/block:Caption}
</figure>
{/block:Video}
{block:Hidden}
<!--
#### Answer
@untested
@see https://www.tumblr.com/docs/de/custom_themes#answer-posts
-->
{/block:Hidden}
{block:Answer}
<div class="post-description">
<div class="question">
<blockquote class="long">
{lang:Asker asked}: {Question}
</blockquote>
</div>
<div class="answer">
{block:Answerer}
<p><strong>{Answerer}</strong></p>
{/block:Answerer}
{Replies}
</div>
</div>
{/block:Answer}
{block:Hidden}
<!--
#### Read More
-->
{/block:Hidden}
{block:More}
<p><a href="{Permalink}">{lang:Read more} ➯</a></p>
{/block:More}
<hr/>
{block:PermalinkPage}
<footer>
{block:Hidden}
<!--
#### Share Buttons
Insert links to share the tumblr post on social networks
like Facebook, Twitter, Pinterest and via Email. Using
the Tumblr buttons to like and reblog the post.
@see https://www.tumblr.com/docs/de/custom_themes#like_and_reblog_buttons
-->
{/block:Hidden}
<dl>
<dt>{lang:Share this}:</dt>
{block:Date}
<dd class="control like-control control-button">
{LikeButton}
</dd>
<dd class="control reblog-control control-button">
{ReblogButton}
</dd>
{/block:Date}
<dd>
<a href="http://facebook.com/sharer.php?u={URLEncodedPermalink}&amp;t={URLEncodedTitle}" target="_blank">Facebook</a>
</dd>
<dd>
<a href="https://twitter.com/intent/tweet?text={URLEncodedTweetSummary}" target="_blank">Tweet</a>
</dd>
{block:Photo}
<dd>
<a href="//www.pinterest.com/pin/create/button/?url={URLEncodedPermalink}&amp;media={PhotoURL-500}" target="_blank">Pinterest</a>
</dd>
{/block:Photo}
{block:Video}
{block:VideoThumbnail}
<dd>
<a href="//www.pinterest.com/pin/create/button/?url={URLEncodedPermalink}&amp;media={VideoThumbnailURL}&amp;is_video=true" target="_blank">Pinterest</a>
</dd>
{/block:VideoThumbnail}
{/block:Video}
<dd>
<a href="mailto:?subject={URLEncodedShareString}&amp;body={URLEncodedMailSummary}">Mail</a>
</dd>
</dl>
{block:Hidden}
<!--
#### Metadata
Metadata is important! always! Beside the timestamp
(it's above the post content) it includes tags and
credentials for reblogs, original content source and
submitter name.
@see https://www.tumblr.com/docs/de/custom_themes#tags
@see https://www.tumblr.com/docs/de/custom_themes#reblogs
@see https://www.tumblr.com/docs/de/custom_themes#content-sources
@see https://www.tumblr.com/docs/de/custom_themes#submissions
-->
{/block:Hidden}
<dl>
{block:Exif}
<dt>{lang:Photo}</dt>
<dd>
{block:Camera}{Camera}{/block:Camera}
{block:Aperture}{Aperture}{/block:Aperture}
{block:Exposure}{Exposure}{/block:Exposure}
{block:FocalLength}{FocalLength}{/block:FocalLength}
</dd>
{/block:Exif}
{block:HasTags}
<dt>{lang:Filed under}:</dt>
{block:Tags}
<dd><a href="{TagURL}">{Tag}</a></dd>
{/block:Tags}
{/block:HasTags}
{block:RebloggedFrom}
<dt>{lang:Reblogged}:</dt>
<dd><a href="{ReblogParentURL}">{ReblogParentName}</a></dd>
{/block:RebloggedFrom}
{block:ContentSource}
<dt>{lang:Source}:</dt>
<dd><a href="{SourceURL}">{SourceTitle}</a></dd>
{/block:ContentSource}
{block:Submission}
<dt>{lang:Submitter}:</dt> <!-- no official Submitter translation? -->
<dd><a href="{SubmitterURL}">{Submitter}</a></dd>
{/block:Submission}
</dl>
</footer>
<aside>
{block:Hidden}
<!--
#### Comments
If Disqus is enabled (shortname of the Disqus
channel is configuraed) then the Disqus Javascript
is imported, including the Disqus channel URL as
fallback for disabled Javascript.
This section demonstrates how text configuration
options are used.
-->
{/block:Hidden}
{block:IfDisqusShortname}
<section id="comments">
<h2>{lang:Recent comments}</h2>
<div id="disqus_thread">
<noscript>
<p>
Please enable JavaScript to
<a href="https://disqus.com/home/forums/{text:Disqus Shortname}/">view the comments</a>.
</p>
</noscript>
</div>
<script type="text/javascript">
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://{text:Disqus Shortname}.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
</section>
{/block:IfDisqusShortname}
{block:Hidden}
<!--
#### Tumblr Notes
Notes section shows when the post was liked and
reblogged by other Tumblr users.
@see https://www.tumblr.com/docs/de/custom_themes#notes
-->
{/block:Hidden}
{block:PostNotes}
<section id="notes">
{block:NoteCount}
<h2>{lang:Notes}</h2>
{/block:NoteCount}
{PostNotes-16}
</section>
{/block:PostNotes}
</aside>
{/block:PermalinkPage}
</article>
{block:IndexPage}</section>{/block:IndexPage}
{/block:Posts}
{block:Hidden}
<!--
### Pagination
Navigation between pages of the Tumblr blog. Three different
types are available:
* Pagination over Index Pages
* Pagination over Day Pages
* Pagination between Permalink Pages
@see https://www.tumblr.com/docs/de/custom_themes#navigation
@see https://www.tumblr.com/docs/de/custom_themes#day-pages
-->
{/block:Hidden}
{block:Hidden}
<!-- Index Pagination -->
{/block:Hidden}
{block:IndexPage}
{block:Pagination}
<nav id="pagination" data-current-page="{CurrentPage}" data-total-pages="{TotalPages}">
<ol>
{block:PreviousPage}
<li><a href="{PreviousPage}">{lang:Previous}</a></li>
{/block:PreviousPage}
{block:JumpPagination length="5"}
{block:CurrentPage}
<li><strong>{PageNumber}</strong></li>
{/block:CurrentPage}
{block:JumpPage}
<li><a href="{URL}">{PageNumber}</a></li>
{/block:JumpPage}
{/block:JumpPagination}
{block:NextPage}
<li><a href="{NextPage}">{lang:Next}</a></li>
{/block:NextPage}
</ol>
</nav>
{/block:Pagination}
{/block:IndexPage}
{block:Hidden}
<!-- Day Pagination -->
{/block:Hidden}
{block:DayPage}
<nav id="pagination">
<ol>
{block:PreviousDayPage}
<li><a href="{PreviousDayPage}">{lang:Previous day}</a></li>
{/block:PreviousDayPage}
{block:NextDayPage}
<li><a href="{NextDayPage}">{lang:Next day}</a></li>
{/block:NextDayPage}
</ol>
</nav>
{/block:DayPage}
{block:Hidden}
<!-- Permalink Pagination -->
{/block:Hidden}
{block:PermalinkPagination}
<nav id="pagination">
<ol>
{block:PreviousPost}
<li><a href="{PreviousPost}">{lang:Previous post}</a></li>
{/block:PreviousPost}
{block:NextPost}
<li><a href="{NextPost}">{lang:Next post}</a></li>
{/block:NextPost}
</ol>
</nav>
{/block:PermalinkPagination}
</main>
<hr class="hideme" />
{block:Hidden}
<!--
## Sidebar Content
Secondary content like your last likes and followed blogs on Tumblr.
It is only inserted on Index pages.
-->
{/block:Hidden}
{block:IndexPage}
<aside id="sidebar">
{block:Hidden}
<!--
### Likes
Showing some Tumblr posts that you liked.
@see https://www.tumblr.com/docs/de/custom_themes#likes
-->
{/block:Hidden}
{block:Likes}
<section>
<h2><a href="http://www.tumblr.com/liked/by/{Name}">{lang:Likes}</a></h2>
{Likes limit="6" summarize="144"}
</section>
{/block:Likes}
{block:Hidden}
<!--
### Following
Showing Tumblr blogs that you follow.
@see https://www.tumblr.com/docs/de/custom_themes#following
-->
{/block:Hidden}
{block:Following}
<section id="following">
<h2>{lang:Following}</h2>
<ol>
{block:Followed}
<li>
<a href="{FollowedURL}" target="_blank">
<img alt="" class="avatar " src="{FollowedPortraitURL-48}">
{FollowedName}
</a>
</li>
{/block:Followed}
</ol>
</section>
{/block:Following}
{block:Hidden}
<!--
### Group Members
If it is a group blog then show all members of the blog.
@see https://www.tumblr.com/docs/de/custom_themes#group-blogs
-->
{/block:Hidden}
{block:GroupMembers}
<section id="groupblog">
<h2>{lang:Group members}</h2>
<ol>
{block:GroupMember}
<li>
<a href="{GroupMemberURL}" target="_blank" title="{GroupMemberTitle}">
<img alt="" class="avatar " src="{GroupMemberPortraitURL-48}">
{GroupMemberName}
</a>
</li>
{/block:GroupMember}
</ol>
</section>
{/block:GroupMembers}
</aside>
<hr class="hideme" />
{/block:IndexPage}
{block:Hidden}
<!--
## Footer
Ending the page with some links to your Social Network profiles,
info about the running time of the blog and the parental website.
Twitter is the only social network that has a very own template
tag, all other networks might be included by addional option
parameters for the theme.
@see https://www.tumblr.com/docs/de/custom_themes#twitter
@see https://www.tumblr.com/docs/de/custom_themes#basic_variables
-->
{/block:Hidden}
<footer id="footer">
<ul id="profiles">
{block:IfFacebookUrl}
<li><a href="{text:Facebook URL}">Facebook</a></li>
{/block:IfFacebookUrl}
{block:Twitter}<li><a href="https://twitter.com/{TwitterUsername}">Twitter</a></li>{/block:Twitter}
</ul>
<p>
&copy; {CopyrightYears}
{block:IfWebsiteUrl}
<a href="{text:Website URL}">{text:Website URL}</a>
{/block:IfWebsiteUrl}
</p>
<p>
<a href="http://eye48.com/go/vorlagetheme">{lang:Install this theme}: Vorlage Theme</a>
</p>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment