templating cleanup
This commit is contained in:
Peter Molnar
parent
555b4e957a
commit
3937bbef29
10 changed files with 129 additions and 241 deletions
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
{% block pagination %}
|
||||
{% if category.paginated %}
|
||||
<div class="pagination">
|
||||
<nav class="pagination">
|
||||
<ol>
|
||||
{% for y, url in category.years.items() %}
|
||||
{% if (y == category.year) or (not category.year and loop.first) %}
|
||||
|
|
@ -30,12 +30,12 @@
|
|||
{% endif %}
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<main class="h-feed hatom">
|
||||
<main id="main" class="h-feed hatom">
|
||||
|
||||
{% set year = [0] %}
|
||||
{% for post in posts %}
|
||||
|
|
|
|||
|
|
@ -14,15 +14,15 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<main class="h-feed hatom">
|
||||
<aside class="intro">
|
||||
<main id="main" class="h-feed hatom">
|
||||
<section class="intro">
|
||||
<div>
|
||||
{{ post.text }}
|
||||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
{% for category, post in posts %}
|
||||
<section class="section home">
|
||||
<section id="home">
|
||||
<h2>in:
|
||||
<a href="{{ category.url|relurl(baseurl) }}">
|
||||
<svg width="16" height="16"><use xlink:href="#icon-{{ category.name }}" /></svg>
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<main class="main">
|
||||
<main id="main">
|
||||
<article class="h-entry hentry" lang="{{ post.inLanguage }}" id="article">
|
||||
<header class="entry-header">
|
||||
<h1 class="p-name entry-title">
|
||||
|
|
@ -145,7 +145,7 @@
|
|||
</header>
|
||||
|
||||
{% if post.review %}
|
||||
<div class="h-review hreview">
|
||||
<section class="h-review hreview">
|
||||
<strong>Review summary of: <a href="{{ post.review.url }}" class="p-name u-url p-item h-product item fn url">{{ post.review.name }}</a></strong>
|
||||
<p>
|
||||
By
|
||||
|
|
@ -162,18 +162,18 @@
|
|||
</span>
|
||||
</p>
|
||||
<p class="p-summary summary">{{ post.review.text }}</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{% if post.description|length %}
|
||||
<div class="e-summary entry-summary">
|
||||
<section class="e-summary entry-summary">
|
||||
{{ post.description|relurl(baseurl) }}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
<div class="e-content entry-content">
|
||||
<section class="e-content entry-content">
|
||||
{{ post.text|relurl(baseurl) }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% if 'WebPage' != post['@type'] %}
|
||||
<section class="syndication">
|
||||
|
|
|
|||
|
|
@ -39,34 +39,38 @@
|
|||
or ( category is defined and category.name == name )%}class="active"{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
<header class="header">
|
||||
<ul>
|
||||
{% for key, data in menu.items() %}
|
||||
<li>
|
||||
<a title="{{ data.text }}" href="{{ data.url|relurl(baseurl) }}" {{ activemenu(key) }} >
|
||||
<svg width="16" height="16">
|
||||
<use xlink:href="#icon-{{ key }}" />
|
||||
</svg>
|
||||
{{ data.text }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<header id="header">
|
||||
<div>
|
||||
<nav>
|
||||
<ul>
|
||||
{% for key, data in menu.items() %}
|
||||
<li>
|
||||
<a title="{{ data.text }}" href="{{ data.url|relurl(baseurl) }}" {{ activemenu(key) }} >
|
||||
<svg width="16" height="16">
|
||||
<use xlink:href="#icon-{{ key }}" />
|
||||
</svg>
|
||||
{{ data.text }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div id="header-forms">
|
||||
{% for action in site.potentialAction %}
|
||||
{% if 'SearchAction' == action['@type'] %}
|
||||
<form id="search" role="search" method="get" action="{{ action.url|relurl(baseurl) }}">
|
||||
<label for="qsub">
|
||||
<input type="submit" value="search" id="qsub" name="qsub" />
|
||||
<svg width="16" height="16">
|
||||
<use xlink:href="#icon-search"></use>
|
||||
</svg>
|
||||
</label>
|
||||
<input type="search" placeholder="search..." value="" name="q" id="q" title="Search for:" />
|
||||
</form>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div id="header-forms">
|
||||
{% for action in site.potentialAction %}
|
||||
{% if 'SearchAction' == action['@type'] %}
|
||||
<form id="search" role="search" method="get" action="{{ action.url|relurl(baseurl) }}">
|
||||
<label for="qsub">
|
||||
<input type="submit" value="search" id="qsub" name="qsub" />
|
||||
<svg width="16" height="16">
|
||||
<use xlink:href="#icon-search"></use>
|
||||
</svg>
|
||||
</label>
|
||||
<input type="search" placeholder="search..." value="" name="q" id="q" title="Search for:" />
|
||||
</form>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
@ -76,7 +80,8 @@
|
|||
{% block pagination %}
|
||||
{% endblock %}
|
||||
|
||||
<footer class="footer p-author h-card vcard">
|
||||
<footer id="footer" class="p-author h-card vcard">
|
||||
<div>
|
||||
<p>
|
||||
<a href="https://creativecommons.org/">CC</a>,
|
||||
1999-2019,
|
||||
|
|
@ -107,19 +112,21 @@
|
|||
</a>
|
||||
</li>
|
||||
{% for url in site.author.sameAs %}
|
||||
{% if 'cv.html' in url %}
|
||||
<li>
|
||||
{% if 'cv.html' in url %}
|
||||
<a href="{{ url }}" class="u-url">
|
||||
<svg width="16" height="16"><use xlink:href="#icon-resume" /></svg>
|
||||
resume
|
||||
</a>
|
||||
{% elif 'github' in url %}
|
||||
</li>
|
||||
{% elif 'github' in url %}
|
||||
<li>
|
||||
<a rel="me" href="{{ url }}">
|
||||
<svg width="16" height="16"><use xlink:href="#icon-github" /></svg>
|
||||
github
|
||||
</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<p>
|
||||
|
|
@ -142,51 +149,7 @@
|
|||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<!--
|
||||
<section>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://indieweb.org/">
|
||||
<svg width="80" height="15">
|
||||
<use xlink:href="#button-indieweb"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://microformats.org/">
|
||||
<svg width="80" height="15">
|
||||
<use xlink:href="#button-microformats"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.w3.org/TR/webmention/">
|
||||
<svg width="80" height="15">
|
||||
<use xlink:href="#button-webmention"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
{% block cc %}
|
||||
<li>
|
||||
<a href="{{ site.license }}">
|
||||
<svg width="80" height="15">
|
||||
<use xlink:href="#button-cc"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
{% endblock %}
|
||||
<li>
|
||||
<svg width="80" height="15">
|
||||
<use xlink:href="#button-nojs"/>
|
||||
</svg>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</section>
|
||||
-->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,4 @@ function kcl(cb) {
|
|||
kcl(function () {
|
||||
var st = document.getElementById('css_surprise');
|
||||
st.setAttribute('media', 'all');
|
||||
var e = document.createElement('img');
|
||||
e.src = '/iddqd.gif';
|
||||
document.body.appendChild(e);
|
||||
})
|
||||
|
|
|
|||
|
|
@ -24,18 +24,18 @@
|
|||
</header>
|
||||
|
||||
{% if post.description|length %}
|
||||
<div class="e-summary entry-summary">
|
||||
<section class="e-summary entry-summary">
|
||||
{{ post.description|relurl(baseurl) }}
|
||||
<span class="more">
|
||||
<a href="{{ post.url|relurl(baseurl) }}">
|
||||
{% if post.inLanguage == 'hu' %}Tovább »{% else %}Continue »{% endif %}
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
{% else %}
|
||||
<div class="e-content entry-content">
|
||||
<section class="e-content entry-content">
|
||||
{{ post.text|relurl(baseurl) }}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
<footer class="entry-footer" aria-hidden="true" hidden="hidden">
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ a:hover {
|
|||
border-bottom-color: #014384;
|
||||
}
|
||||
|
||||
.header a:hover {
|
||||
#header a:hover {
|
||||
border-bottom-color: #eee;
|
||||
}
|
||||
|
||||
|
|
@ -46,15 +46,15 @@ pre > code::before {
|
|||
color: #222;
|
||||
}
|
||||
|
||||
.header,
|
||||
.footer {
|
||||
#header,
|
||||
#footer {
|
||||
background-color: #333;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.header a,
|
||||
.footer a,
|
||||
.theme input + label {
|
||||
#header a,
|
||||
#footer a,
|
||||
#theme input + label {
|
||||
color: #71B3F4;
|
||||
}
|
||||
|
||||
|
|
@ -62,19 +62,17 @@ input {
|
|||
background-color: #222;
|
||||
}
|
||||
|
||||
.footer a:hover {
|
||||
#footer a:hover {
|
||||
color: #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
|
||||
.pagination a {
|
||||
#pagination a {
|
||||
border-bottom: 1px solid #3173b4;
|
||||
}
|
||||
|
||||
.comments .u-url:hover,
|
||||
.footnotes a:hover,
|
||||
.h-feed aside a:hover,
|
||||
.h-feed article a:hover,
|
||||
body > nav > ul > li a:hover {
|
||||
#comments .u-url:hover,
|
||||
#main a:hover,
|
||||
#pagination a:hover {
|
||||
border-bottom: 1px solid #014384;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
main.photo {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
main.photo article {
|
||||
max-width: 24em;
|
||||
margin: 0.6em;
|
||||
display: grid;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
main.photo article figure {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
main.photo article h2 {
|
||||
margin: 0;
|
||||
padding: 0.6em;
|
||||
background: rgba(0,0,0,0.7);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
main.photo article figcaption,
|
||||
main.photo article p,
|
||||
main.photo article section {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -29,7 +29,7 @@ p {
|
|||
h1 {
|
||||
text-transform:uppercase;
|
||||
text-align: center;
|
||||
padding-bottom: 1em;
|
||||
margin: 1em 0 2em 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
|
|
@ -88,7 +88,7 @@ input {
|
|||
border: none;
|
||||
background-color: #555;
|
||||
color: #eee;
|
||||
|
||||
|
||||
}
|
||||
|
||||
video,
|
||||
|
|
@ -110,20 +110,20 @@ figcaption {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
figcaption > dl {
|
||||
.exif {
|
||||
margin-top: 1em;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
figcaption > dl * {
|
||||
.exif * {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
figcaption > dl dt {
|
||||
.exif dt {
|
||||
display: none;
|
||||
}
|
||||
|
||||
figcaption > dl dd {
|
||||
.exif dd {
|
||||
margin: 0 0.3em;
|
||||
}
|
||||
|
||||
|
|
@ -180,12 +180,12 @@ th, tr:nth-child(even) {
|
|||
background-color: rgba(255, 255, 255, .1);
|
||||
}
|
||||
|
||||
.main ul {
|
||||
#main ul {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.main ol {
|
||||
margin-left: 3em;
|
||||
#main ol {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
li p {
|
||||
|
|
@ -198,7 +198,7 @@ li p {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.comments .u-url,
|
||||
#comments .u-url,
|
||||
.footnotes a {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
|
|
@ -217,30 +217,30 @@ li p {
|
|||
margin: 0 0 0 0.6em;
|
||||
}
|
||||
|
||||
.pagination ol,
|
||||
#pagination ol,
|
||||
.footnotes ol,
|
||||
.header ul,
|
||||
.footer ul {
|
||||
#header ul,
|
||||
#footer ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header li,
|
||||
.footer li {
|
||||
#header li,
|
||||
#footer li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
#footer p {
|
||||
margin:0.3em;
|
||||
}
|
||||
|
||||
.header a {
|
||||
#header a {
|
||||
border-bottom: 3px none #eee;
|
||||
padding-bottom: 0.1em;
|
||||
}
|
||||
|
||||
.header a.active,
|
||||
.header a:hover {
|
||||
#header a.active,
|
||||
#header a:hover {
|
||||
border-bottom-style: solid;
|
||||
color: #eee;
|
||||
}
|
||||
|
|
@ -249,54 +249,60 @@ li p {
|
|||
height: 1em;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
#pagination {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pagination li {
|
||||
#pagination li {
|
||||
display: inline-block;
|
||||
padding: 0.3em;
|
||||
}
|
||||
|
||||
.pagination a {
|
||||
#pagination a {
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
|
||||
.header,
|
||||
.footer {
|
||||
#header,
|
||||
#footer {
|
||||
background-color: #111;
|
||||
text-align: center;
|
||||
|
||||
padding: 0.6em 1em;
|
||||
}
|
||||
|
||||
.pagination,
|
||||
.h-feed,
|
||||
.h-entry {
|
||||
#footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#header > *,
|
||||
#footer > * {
|
||||
max-width: 54em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#pagination,
|
||||
#main {
|
||||
margin:0 auto;
|
||||
max-width: 54em;
|
||||
padding: 0 0.3em 2em 0.3em;
|
||||
padding: 1em 0.3em;
|
||||
}
|
||||
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
justify-items:center;
|
||||
#header #header-forms {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.header form, .header > * {
|
||||
#header form, #header > div > * {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.theme {
|
||||
#theme {
|
||||
margin: 0 1em;
|
||||
}
|
||||
|
||||
.theme input, input[type=submit] {
|
||||
#theme input, input[type=submit] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme input + label {
|
||||
#theme input + label {
|
||||
color: #f90;
|
||||
cursor: pointer;
|
||||
border-bottom: 3px solid transparent;
|
||||
|
|
@ -304,81 +310,39 @@ li p {
|
|||
margin-left:0.6em;
|
||||
}
|
||||
|
||||
.theme input:hover + label,
|
||||
.theme input:checked + label {
|
||||
#theme input:hover + label,
|
||||
#theme input:checked + label {
|
||||
border-bottom: 3px solid #eee;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
@media all and (min-width: 78em) {
|
||||
.header,
|
||||
.footer {
|
||||
text-align: left;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
z-index: 10;
|
||||
width: 22em;
|
||||
padding: 1em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.footer {
|
||||
z-index: 20;
|
||||
bottom: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.pagination,
|
||||
.h-feed,
|
||||
.main {
|
||||
margin-left: 22em;
|
||||
padding: 1em;
|
||||
max-width: 54em;
|
||||
}
|
||||
|
||||
.header li,
|
||||
.footer li {
|
||||
display: block;
|
||||
margin: 0.2em 0;
|
||||
}
|
||||
|
||||
.theme {
|
||||
margin: 0 0.3em 0 0;
|
||||
}
|
||||
|
||||
.theme, #search {
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 16em;
|
||||
}
|
||||
|
||||
.h-feed .exif {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media all and (max-width: 46em) {
|
||||
.header {
|
||||
@media all and (max-width: 47em) {
|
||||
#header > * {
|
||||
display: block;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.header > * {
|
||||
|
||||
#header #header-forms {
|
||||
display: block;
|
||||
float:unset;
|
||||
}
|
||||
|
||||
#search {
|
||||
margin-top: 0.6em;
|
||||
}
|
||||
|
||||
.header a {
|
||||
|
||||
#header a {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-bottom: 0.6em;
|
||||
}
|
||||
|
||||
.header a svg {
|
||||
|
||||
#header a svg {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -58,7 +58,7 @@ function autoTheme(e) {
|
|||
|
||||
function doTheme() {
|
||||
var themeform = document.createElement('form');
|
||||
themeform.className = "theme";
|
||||
themeform.id = "theme";
|
||||
themeform.innerHTML='<svg width="16" height="16"><use xlink:href="#icon-contrast"></use></svg>';
|
||||
theme_container.insertBefore(themeform, theme_insbefore);
|
||||
var schemes = ["dark", "light"];
|
||||
|
|
|
|||
Loading…
Reference in a new issue