armornick/tumblr-theme.html

## tumblr-theme.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="Description" content="{MetaDescription}" />
    <title>{block:SearchPage}{lang:Search results for SearchQuery} - {/block:SearchPage}{block:PostTitle}{PostTitle} - {/block:PostTitle}{Title}</title>

    <link rel="shortcut icon" href="{Favicon}" />
    <link rel="apple-touch-icon" href="{PortraitURL-128}"/>
    <link rel="alternate" type="application/rss+xml" href="{RSS}" />

    <!-- Default Colors -->
    <meta name="color:Background" content="#E8FDF5" />
    <meta name="color:Body Text" content="#111" />
    <meta name="color:Header Background" content="#19A974" />
    <meta name="color:Header Text" content="#111" />
    <meta name="color:Navigation Buttons Background" content="#9EEBCF" />
    <meta name="color:Navigation Buttons Text" content="#111" />
    <meta name="color:Navigation Buttons Hover Background" content="#137752" />
    <meta name="color:Navigation Buttons Hover Text" content="#9EEBCF" />
    <meta name="color:Post Background" content="#EEEEEE" />
    <meta name="color:Post Text" content="#111" />
    <meta name="color:Footer Background" content="#CCCCCC" />
    <meta name="color:Footer Text" content="#111" />
    <meta name="color:Link Color" content="#137752" />

    <!-- Options -->
    <meta name="if:Show Tags" content="1" />
    <meta name="if:Show Archive Link" content="1" />
    <meta name="if:Show Home Link in Navigation" content="1" />
    <meta name="if:Show RSS Link in Navigation" content="1" />
    <meta name="if:Show Album Artwork on Audio Posts" content="1" />
    <meta name="if:Show People I Follow" content="0" />
    <meta name="if:Show Posts I Like" content="0" />
    <meta name="text:Random Post Label" content="" />

    <style>
/* VARIABLES */
:root {
    --body-bg: {color:Background};
    --body-color: {color:Body Text};
    --header-bg: {color:Header Background};
    --header-color: {color:Header Text};
    --main-nav-bg: {color:Navigation Buttons Background};
    --main-nav-color: {color:Navigation Buttons Text};
    --main-nav-hover-bg: {color:Navigation Buttons Hover Background};
    --main-nav-hover-color: {color:Navigation Buttons Hover Text};
    --post-bg: {color:Post Background};
    --post-color: {color:Post Text};
    --footer-bg: {color:Footer Background};
    --footer-color: {color:Footer Text};
    --link-color: {color:Link Color};
}

/* CSS RESET */
*,
*::before,
*::after {
  box-sizing: border-box;
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

img,
video {
  max-width: 100%;
  height: auto;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

/* BASE STYLES */
body {
    color: var(--body-color);
    background-color: var(--body-bg);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    line-height: 1.5;
    margin: 0;
}

/* STRUCTURAL STYLES */
.container {
    max-width: 45rem;
    margin-inline: auto;
    padding: 1rem;
}

.main-header {
    background-color: var(--header-bg);
    color: var(--header-color);
    padding: .5rem 1rem;
}

.site-title {
    font-size: 3rem;
    text-align: center;
}

.main-nav li + li {
    margin-top: .5rem;
}

.main-nav a {
    display: block;
    padding: .25rem 1rem;
    background-color: var(--main-nav-bg, #9EEBCF);
    color: var(--main-nav-color, #111);
    border-radius: .25rem;;
}

.main-nav a:where(:focus, :hover) {
    background-color: var(--main-nav-hover-bg, #137752);
    color: var(--main-nav-hover-color, #9EEBCF);
}

main {
    margin-bottom: 1rem;
}

.post {
    background-color: var(--post-bg);
    color: var(--post-color);
}

.content {
    padding: .5rem 1rem;
}

.content.photo {
    display: flex;
    flex-direction: column;
    align-items: center;
}

:where(.content, .tags) a {
    color: var(--link-color);
    opacity: 1;
    transition: opacity .15s ease-in;
}

:where(.content, .tags) a:is(:hover, :focus) {
    opacity: .5;
    transition: opacity .15s ease-in;
}

.content h3 {
    font-size: 2rem;
    font-weight: 600;
}

.content p {
    margin-block: .5rem;
}

.content blockquote {
    border-left: 4px solid #ccc;
    padding: .5rem 1rem;
}

.post footer {
    border-top: 1px solid #19A974;
    font-size: .875rem;
    margin-top: 1rem;
    padding: .5rem 1rem;
}

.main-footer {
    background-color: var(--footer-bg);
    color: var(--footer-color);
}

@media (min-width: 45rem) {

    :root {
        --sidebar-width: 20rem;
    }

    .wrapper {
        display: grid;
        grid-template-columns: var(--sidebar-width) auto;
        grid-template-areas: "sidebar content" "sidebar footer";
    }

    .main-header {
        grid-area: sidebar;
    }

    main {
        grid-area: content;
    }

    .main-footer {
        grid-area: footer;
    }

}

@media (min-width: 60rem) {

    :root {
        --sidebar-width: 25rem;
    }

}

/* COMPONENT STYLES */

.tags {
    display: flex;
}

.tags > li + li::before {
    content: ', ';
}

.btn {
    background-color: #555555;
    color: #F4F4F4;
    cursor: pointer;
    padding: .5rem 1rem;
}

.btn:where(:hover, :focus) {
    background-color: #777777;
}

.notes li {
    padding: .5rem 1rem;
}

.notes .avatar_frame {
    padding-right: 1rem;
}

.notes li + li {
    border-top: 1px solid #ccc;
}

.notes blockquote {
    border-left: 3px solid #ccc;
    padding-left: 1rem;
    margin-top: .5rem;
}


/* UTILITY CLASSES */
.flex { display: flex; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.space-y-2 > * + * { margin-top: 1rem; }

    </style>
    <style type="text/css">{CustomCSS}</style>
</head>
<body>
<div class="wrapper">
    <header class="main-header">
    <div class="container space-y-2">
        <div class="flex justify-center">
            <img src="{PortraitURL-48}" alt="{Title}" />
        </div>
        <div>
            <h1 class="site-title"><a href="/">{Title}</a></h1>
            <div>{Description}</div>
        </div>
        <nav class="main-nav">
            <ul>
                {block:IfShowHomeLinkInNavigation}<li><a href="/">Home</a></li>{/block:IfShowHomeLinkInNavigation}
                {block:HasPages}{block:Pages}<li><a href="{URL}">{Label}</a></li>{/block:Pages}{/block:HasPages}
                {block:AskEnabled}<li><a href="/ask">{AskLabel}</a></li>{/block:AskEnabled}
                {block:SubmissionsEnabled}<li><a href="/submit">{SubmitLabel}</a></li>{/block:SubmissionsEnabled}
                {block:IfRandomPostLabel}<li><a href="/random">{text:Random Post label}</a></li>{/block:IfRandomPostLabel}
                {block:IfShowArchiveLink}<li><a href="/archive">Archive</a></li>{/block:IfShowArchiveLink}
                {block:IfShowRSSLinkInNavigation}<li><a href="{RSS}">RSS Feed</a></li>{/block:IfShowRSSLinkInNavigation}
            </ul>
        </nav>
        {block:IfShowPostsILike}
        {block:Likes}
        <div>
            <h3>Posts I Like</h3>
			{Likes limit="5" width="250"}
        </div>
        {/block:Likes}
        {/block:IfShowPostsILike}

        {block:IfShowPeopleIFollow}
        <div>
            <h3>People I Follow</h3>
            {block:Following}
            <ul>
                {block:Followed}<li><a href="{FollowedURL}" title="{FollowedTitle}"><img src="{FollowedPortraitURL-30}" alt="{FollowedTitle}" /></a></li>{/block:Followed}
            </ul>
            {/block:Following}
        </div>
        {/block:IfShowPeopleIFollow}
    </div>
    </header>
    <main class="container space-y-2">
        {block:TagPage}
		    <h2>Posts tagged with <span>"{Tag}"</span></h2>
	    {/block:TagPage}

	    {block:SearchPage}
		    <h2>{SearchResultCount} Results for <span>"{SearchQuery}"</span></h2>
	    {/block:SearchPage}

	    {block:NoSearchResults}
		    <h2>No search results for <span>"{SearchQuery}"</span></h2>
	    {/block:NoSearchResults}

        {block:Posts}
            <article class="post">
                {block:Text}
                <div class="content text">
                    {block:Title}<h3><a href="{Permalink}">{Title}</a></h3>{/block:Title}
			        {Body}
                </div>
                {/block:Text}
                {block:Photo}
                <div class="content photo">
                    {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
			        {block:Caption}{Caption}{/block:Caption}
                </div>
                {/block:Photo}
                {block:Photoset}
                <div class="content photoset">
                    {Photoset-400}
			        {block:Caption}{Caption}{/block:Caption}
                </div>
                {/block:Photoset}
                {block:Quote}
		        <div class="content quote">
		        	<p class="quote">{Quote}</p>
		        	<p class="source">{block:Source}- {Source}{/block:Source}</p>
                </div>
		        {/block:Quote}
                {block:Link}
		        <div class="content link">
		        	<h3><a href="{URL}" {Target}>{Name}</a></h3>
		        	{block:Description}
		        	{Description}
		        	{/block:Description}
                </div>
		        {/block:Link}
                {block:Chat}
                <div class="content chat">
                    {block:Title}<h3><a href="{Permalink}">{Title}</a></h3>{/block:Title}
                    <ul>
                        {block:Lines}
				        <li>{block:Label}<span>{Label}</span> {/block:Label}{Line}</li>
				        {/block:Lines}
                    </ul>
                </div>
                {/block:Chat}
                {block:Audio}
                <div class="content audio">
                    {block:IfShowAlbumArtworkOnAudioPosts}{block:AlbumArt}<img src="{AlbumArtURL}" alt="{Album}" width="75" class="album-art" />{/block:AlbumArt}{/block:IfShowAlbumArtworkOnAudioPosts}
                    <div class="audio-player">{AudioPlayerGrey}</div>
			        <p class="track-info">{block:TrackName}<strong>{TrackName}</strong><br />{/block:TrackName}{block:Artist}{Artist}{/block:Artist}</p>
			        {block:Caption}{Caption}{/block:Caption}
                </div>
                {/block:Audio}
                {block:Video}
                <div class="content video">
                    <div class="video-container">{Video-400}</div>
                    {block:Caption}{Caption}{/block:Caption}
                </div>
                {/block:Video}
                {block:Answer}
                <div class="content answer">
                    <blockquote>
                        <p>{Question}</p>
                    </blockquote>
                    <div class="answer">{Answer}</div>
                </div>
                {/block:Answer}
                {block:PostNotes}
                <div>
                    {PostNotes}
                </div>
                {/block:PostNotes}
                <footer class="flex justify-between">
                    {block:Date}
		            <div class="date">
			            {Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}
		            </div>
		            {/block:Date}
                    {block:NotReblog}
				    <div class="posttime">
                        <a href="{Permalink}">Posted {TimeAgo}</a>
                    </div>
				    {/block:NotReblog}
                    {block:Reblog}
				    <div class="reblogged">
                        <a href="{Permalink}">Reblogged {TimeAgo}</a> from <a href="{ReblogParentURL}">{ReblogParentName}</a>
                    </div>
				    {/block:Reblog}
                    {block:NoteCount}
				    <div class="notes">
                        <a href="{Permalink}#permalink-notes">{NoteCountWithLabel}</a>
                    </div>
				    {/block:NoteCount}
                    {block:IfShowTags}
				        {block:HasTags}
                        <div>
                            <ul class="tags">
                                {block:Tags}<li><a href="{TagURL}">{Tag}</a></li>{/block:Tags}
                            </ul>
                        </div>
                        {/block:HasTags}
				    {/block:IfShowTags}
                </footer>
            </article>
        {/block:Posts}
    </main>
    <footer class="main-footer">
        {block:Pagination}
		<div class="container flex justify-between">
			<div>{block:PreviousPage}<a href="{PreviousPage}" class="btn">Prev Page</a>{/block:PreviousPage}</div>
			<div>{block:NextPage}<a href="{NextPage}" class="btn">Next Page</a>{/block:NextPage}</div>
		</div> <!-- #pagination -->
	    {/block:Pagination}
    </footer>
</div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="Description" content="{MetaDescription}" />
	<title>{block:SearchPage}{lang:Search results for SearchQuery} - {/block:SearchPage}{block:PostTitle}{PostTitle} - {/block:PostTitle}{Title}</title>

	<link rel="shortcut icon" href="{Favicon}" />
	<link rel="apple-touch-icon" href="{PortraitURL-128}"/>
	<link rel="alternate" type="application/rss+xml" href="{RSS}" />

	<!-- Default Colors -->
	<meta name="color:Background" content="#E8FDF5" />
	<meta name="color:Body Text" content="#111" />
	<meta name="color:Header Background" content="#19A974" />
	<meta name="color:Header Text" content="#111" />
	<meta name="color:Navigation Buttons Background" content="#9EEBCF" />
	<meta name="color:Navigation Buttons Text" content="#111" />
	<meta name="color:Navigation Buttons Hover Background" content="#137752" />
	<meta name="color:Navigation Buttons Hover Text" content="#9EEBCF" />
	<meta name="color:Post Background" content="#EEEEEE" />
	<meta name="color:Post Text" content="#111" />
	<meta name="color:Footer Background" content="#CCCCCC" />
	<meta name="color:Footer Text" content="#111" />
	<meta name="color:Link Color" content="#137752" />

	<!-- Options -->
	<meta name="if:Show Tags" content="1" />
	<meta name="if:Show Archive Link" content="1" />
	<meta name="if:Show Home Link in Navigation" content="1" />
	<meta name="if:Show RSS Link in Navigation" content="1" />
	<meta name="if:Show Album Artwork on Audio Posts" content="1" />
	<meta name="if:Show People I Follow" content="0" />
	<meta name="if:Show Posts I Like" content="0" />
	<meta name="text:Random Post Label" content="" />

	<style>
	/* VARIABLES */
	:root {
	--body-bg: {color:Background};
	--body-color: {color:Body Text};
	--header-bg: {color:Header Background};
	--header-color: {color:Header Text};
	--main-nav-bg: {color:Navigation Buttons Background};
	--main-nav-color: {color:Navigation Buttons Text};
	--main-nav-hover-bg: {color:Navigation Buttons Hover Background};
	--main-nav-hover-color: {color:Navigation Buttons Hover Text};
	--post-bg: {color:Post Background};
	--post-color: {color:Post Text};
	--footer-bg: {color:Footer Background};
	--footer-color: {color:Footer Text};
	--link-color: {color:Link Color};
	}

	/* CSS RESET */
	*,
	*::before,
	*::after {
	box-sizing: border-box;
	}

	blockquote,
	dl,
	dd,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	hr,
	figure,
	p,
	pre {
	margin: 0;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
	font-size: inherit;
	font-weight: inherit;
	}

	img,
	video {
	max-width: 100%;
	height: auto;
	}

	ol,
	ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}

	a {
	color: inherit;
	text-decoration: none;
	}

	/* BASE STYLES */
	body {
	color: var(--body-color);
	background-color: var(--body-bg);
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	line-height: 1.5;
	margin: 0;
	}

	/* STRUCTURAL STYLES */
	.container {
	max-width: 45rem;
	margin-inline: auto;
	padding: 1rem;
	}

	.main-header {
	background-color: var(--header-bg);
	color: var(--header-color);
	padding: .5rem 1rem;
	}

	.site-title {
	font-size: 3rem;
	text-align: center;
	}

	.main-nav li + li {
	margin-top: .5rem;
	}

	.main-nav a {
	display: block;
	padding: .25rem 1rem;
	background-color: var(--main-nav-bg, #9EEBCF);
	color: var(--main-nav-color, #111);
	border-radius: .25rem;;
	}

	.main-nav a:where(:focus, :hover) {
	background-color: var(--main-nav-hover-bg, #137752);
	color: var(--main-nav-hover-color, #9EEBCF);
	}

	main {
	margin-bottom: 1rem;
	}

	.post {
	background-color: var(--post-bg);
	color: var(--post-color);
	}

	.content {
	padding: .5rem 1rem;
	}

	.content.photo {
	display: flex;
	flex-direction: column;
	align-items: center;
	}

	:where(.content, .tags) a {
	color: var(--link-color);
	opacity: 1;
	transition: opacity .15s ease-in;
	}

	:where(.content, .tags) a:is(:hover, :focus) {
	opacity: .5;
	transition: opacity .15s ease-in;
	}

	.content h3 {
	font-size: 2rem;
	font-weight: 600;
	}

	.content p {
	margin-block: .5rem;
	}

	.content blockquote {
	border-left: 4px solid #ccc;
	padding: .5rem 1rem;
	}

	.post footer {
	border-top: 1px solid #19A974;
	font-size: .875rem;
	margin-top: 1rem;
	padding: .5rem 1rem;
	}

	.main-footer {
	background-color: var(--footer-bg);
	color: var(--footer-color);
	}

	@media (min-width: 45rem) {

	:root {
	--sidebar-width: 20rem;
	}

	.wrapper {
	display: grid;
	grid-template-columns: var(--sidebar-width) auto;
	grid-template-areas: "sidebar content" "sidebar footer";
	}

	.main-header {
	grid-area: sidebar;
	}

	main {
	grid-area: content;
	}

	.main-footer {
	grid-area: footer;
	}

	}

	@media (min-width: 60rem) {

	:root {
	--sidebar-width: 25rem;
	}

	}

	/* COMPONENT STYLES */

	.tags {
	display: flex;
	}

	.tags > li + li::before {
	content: ', ';
	}

	.btn {
	background-color: #555555;
	color: #F4F4F4;
	cursor: pointer;
	padding: .5rem 1rem;
	}

	.btn:where(:hover, :focus) {
	background-color: #777777;
	}

	.notes li {
	padding: .5rem 1rem;
	}

	.notes .avatar_frame {
	padding-right: 1rem;
	}

	.notes li + li {
	border-top: 1px solid #ccc;
	}

	.notes blockquote {
	border-left: 3px solid #ccc;
	padding-left: 1rem;
	margin-top: .5rem;
	}


	/* UTILITY CLASSES */
	.flex { display: flex; }
	.justify-between { justify-content: space-between; }
	.justify-center { justify-content: center; }
	.space-y-2 > * + * { margin-top: 1rem; }

	</style>
	<style type="text/css">{CustomCSS}</style>
	</head>
	<body>
	<div class="wrapper">
	<header class="main-header">
	<div class="container space-y-2">
	<div class="flex justify-center">
	<img src="{PortraitURL-48}" alt="{Title}" />
	</div>
	<div>
	<h1 class="site-title"><a href="/">{Title}</a></h1>
	<div>{Description}</div>
	</div>
	<nav class="main-nav">
	<ul>
	{block:IfShowHomeLinkInNavigation}<li><a href="/">Home</a></li>{/block:IfShowHomeLinkInNavigation}
	{block:HasPages}{block:Pages}<li><a href="{URL}">{Label}</a></li>{/block:Pages}{/block:HasPages}
	{block:AskEnabled}<li><a href="/ask">{AskLabel}</a></li>{/block:AskEnabled}
	{block:SubmissionsEnabled}<li><a href="/submit">{SubmitLabel}</a></li>{/block:SubmissionsEnabled}
	{block:IfRandomPostLabel}<li><a href="/random">{text:Random Post label}</a></li>{/block:IfRandomPostLabel}
	{block:IfShowArchiveLink}<li><a href="/archive">Archive</a></li>{/block:IfShowArchiveLink}
	{block:IfShowRSSLinkInNavigation}<li><a href="{RSS}">RSS Feed</a></li>{/block:IfShowRSSLinkInNavigation}
	</ul>
	</nav>
	{block:IfShowPostsILike}
	{block:Likes}
	<div>
	<h3>Posts I Like</h3>
	{Likes limit="5" width="250"}
	</div>
	{/block:Likes}
	{/block:IfShowPostsILike}

	{block:IfShowPeopleIFollow}
	<div>
	<h3>People I Follow</h3>
	{block:Following}
	<ul>
	{block:Followed}<li><a href="{FollowedURL}" title="{FollowedTitle}"><img src="{FollowedPortraitURL-30}" alt="{FollowedTitle}" /></a></li>{/block:Followed}
	</ul>
	{/block:Following}
	</div>
	{/block:IfShowPeopleIFollow}
	</div>
	</header>
	<main class="container space-y-2">
	{block:TagPage}
	<h2>Posts tagged with <span>"{Tag}"</span></h2>
	{/block:TagPage}

	{block:SearchPage}
	<h2>{SearchResultCount} Results for <span>"{SearchQuery}"</span></h2>
	{/block:SearchPage}

	{block:NoSearchResults}
	<h2>No search results for <span>"{SearchQuery}"</span></h2>
	{/block:NoSearchResults}

	{block:Posts}
	<article class="post">
	{block:Text}
	<div class="content text">
	{block:Title}<h3><a href="{Permalink}">{Title}</a></h3>{/block:Title}
	{Body}
	</div>
	{/block:Text}
	{block:Photo}
	<div class="content photo">
	{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
	{block:Caption}{Caption}{/block:Caption}
	</div>
	{/block:Photo}
	{block:Photoset}
	<div class="content photoset">
	{Photoset-400}
	{block:Caption}{Caption}{/block:Caption}
	</div>
	{/block:Photoset}
	{block:Quote}
	<div class="content quote">
	<p class="quote">{Quote}</p>
	<p class="source">{block:Source}- {Source}{/block:Source}</p>
	</div>
	{/block:Quote}
	{block:Link}
	<div class="content link">
	<h3><a href="{URL}" {Target}>{Name}</a></h3>
	{block:Description}
	{Description}
	{/block:Description}
	</div>
	{/block:Link}
	{block:Chat}
	<div class="content chat">
	{block:Title}<h3><a href="{Permalink}">{Title}</a></h3>{/block:Title}
	<ul>
	{block:Lines}
	<li>{block:Label}<span>{Label}</span> {/block:Label}{Line}</li>
	{/block:Lines}
	</ul>
	</div>
	{/block:Chat}
	{block:Audio}
	<div class="content audio">
	{block:IfShowAlbumArtworkOnAudioPosts}{block:AlbumArt}<img src="{AlbumArtURL}" alt="{Album}" width="75" class="album-art" />{/block:AlbumArt}{/block:IfShowAlbumArtworkOnAudioPosts}
	<div class="audio-player">{AudioPlayerGrey}</div>
	<p class="track-info">{block:TrackName}<strong>{TrackName}</strong><br />{/block:TrackName}{block:Artist}{Artist}{/block:Artist}</p>
	{block:Caption}{Caption}{/block:Caption}
	</div>
	{/block:Audio}
	{block:Video}
	<div class="content video">
	<div class="video-container">{Video-400}</div>
	{block:Caption}{Caption}{/block:Caption}
	</div>
	{/block:Video}
	{block:Answer}
	<div class="content answer">
	<blockquote>
	<p>{Question}</p>
	</blockquote>
	<div class="answer">{Answer}</div>
	</div>
	{/block:Answer}
	{block:PostNotes}
	<div>
	{PostNotes}
	</div>
	{/block:PostNotes}
	<footer class="flex justify-between">
	{block:Date}
	<div class="date">
	{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}
	</div>
	{/block:Date}
	{block:NotReblog}
	<div class="posttime">
	<a href="{Permalink}">Posted {TimeAgo}</a>
	</div>
	{/block:NotReblog}
	{block:Reblog}
	<div class="reblogged">
	<a href="{Permalink}">Reblogged {TimeAgo}</a> from <a href="{ReblogParentURL}">{ReblogParentName}</a>
	</div>
	{/block:Reblog}
	{block:NoteCount}
	<div class="notes">
	<a href="{Permalink}#permalink-notes">{NoteCountWithLabel}</a>
	</div>
	{/block:NoteCount}
	{block:IfShowTags}
	{block:HasTags}
	<div>
	<ul class="tags">
	{block:Tags}<li><a href="{TagURL}">{Tag}</a></li>{/block:Tags}
	</ul>
	</div>
	{/block:HasTags}
	{/block:IfShowTags}
	</footer>
	</article>
	{/block:Posts}
	</main>
	<footer class="main-footer">
	{block:Pagination}
	<div class="container flex justify-between">
	<div>{block:PreviousPage}<a href="{PreviousPage}" class="btn">Prev Page</a>{/block:PreviousPage}</div>
	<div>{block:NextPage}<a href="{NextPage}" class="btn">Next Page</a>{/block:NextPage}</div>
	</div> <!-- #pagination -->
	{/block:Pagination}
	</footer>
	</div>
	</body>
	</html>