petermolnar/nasg
1
0
Fork 0
Code Issues Pull requests 5 Projects Releases Packages Wiki Activity Actions

templating cleanup

Browse source
This commit is contained in:
Peter Molnar 2019-06-19 13:19:20 +01:00
parent 555b4e957a
commit 3937bbef29
10 changed files with 129 additions and 241 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
templates/Category.j2.html
View file

@ -12,7 +12,7 @@
{% block pagination %} {% block pagination %}
{% if category.paginated %} {% if category.paginated %}
<div class="pagination"> <nav class="pagination">
<ol> <ol>
{% for y, url in category.years.items() %} {% for y, url in category.years.items() %}
{% if (y == category.year) or (not category.year and loop.first) %} {% if (y == category.year) or (not category.year and loop.first) %}
@ -30,12 +30,12 @@
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</ol> </ol>
</div> </nav>
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<main class="h-feed hatom"> <main id="main" class="h-feed hatom">
{% set year = [0] %} {% set year = [0] %}
{% for post in posts %} {% for post in posts %}

8
templates/Home.j2.html
View file

@ -14,15 +14,15 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<main class="h-feed hatom"> <main id="main" class="h-feed hatom">
<aside class="intro"> <section class="intro">
<div> <div>
{{ post.text }} {{ post.text }}
</div> </div>
</aside> </section>
{% for category, post in posts %} {% for category, post in posts %}
<section class="section home"> <section id="home">
<h2>in: <h2>in:
<a href="{{ category.url|relurl(baseurl) }}"> <a href="{{ category.url|relurl(baseurl) }}">
<svg width="16" height="16"><use xlink:href="#icon-{{ category.name }}" /></svg> <svg width="16" height="16"><use xlink:href="#icon-{{ category.name }}" /></svg>

14
templates/Singular.j2.html
View file

@ -60,7 +60,7 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<main class="main"> <main id="main">
<article class="h-entry hentry" lang="{{ post.inLanguage }}" id="article"> <article class="h-entry hentry" lang="{{ post.inLanguage }}" id="article">
<header class="entry-header"> <header class="entry-header">
<h1 class="p-name entry-title"> <h1 class="p-name entry-title">
@ -145,7 +145,7 @@
</header> </header>
{% if post.review %} {% 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> <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> <p>
By By
@ -162,18 +162,18 @@
</span> </span>
</p> </p>
<p class="p-summary summary">{{ post.review.text }}</p> <p class="p-summary summary">{{ post.review.text }}</p>
</div> </section>
{% endif %} {% endif %}
{% if post.description|length %} {% if post.description|length %}
<div class="e-summary entry-summary"> <section class="e-summary entry-summary">
{{ post.description|relurl(baseurl) }} {{ post.description|relurl(baseurl) }}
</div> </section>
{% endif %} {% endif %}
<div class="e-content entry-content"> <section class="e-content entry-content">
{{ post.text|relurl(baseurl) }} {{ post.text|relurl(baseurl) }}
</div> </section>
{% if 'WebPage' != post['@type'] %} {% if 'WebPage' != post['@type'] %}
<section class="syndication"> <section class="syndication">

61
templates/base.j2.html
View file

@ -39,7 +39,9 @@
or ( category is defined and category.name == name )%}class="active"{% endif %} or ( category is defined and category.name == name )%}class="active"{% endif %}
{% endmacro %} {% endmacro %}
<header class="header"> <header id="header">
<div>
<nav>
<ul> <ul>
{% for key, data in menu.items() %} {% for key, data in menu.items() %}
<li> <li>
@ -52,6 +54,7 @@
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
</nav>
<div id="header-forms"> <div id="header-forms">
{% for action in site.potentialAction %} {% for action in site.potentialAction %}
@ -68,6 +71,7 @@
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</div> </div>
</div>
</header> </header>
{% block content %} {% block content %}
@ -76,7 +80,8 @@
{% block pagination %} {% block pagination %}
{% endblock %} {% endblock %}
<footer class="footer p-author h-card vcard"> <footer id="footer" class="p-author h-card vcard">
<div>
<p> <p>
<a href="https://creativecommons.org/">CC</a>, <a href="https://creativecommons.org/">CC</a>,
1999-2019, 1999-2019,
@ -107,19 +112,21 @@
</a> </a>
</li> </li>
{% for url in site.author.sameAs %} {% for url in site.author.sameAs %}
<li>
{% if 'cv.html' in url %} {% if 'cv.html' in url %}
<li>
<a href="{{ url }}" class="u-url"> <a href="{{ url }}" class="u-url">
<svg width="16" height="16"><use xlink:href="#icon-resume" /></svg> <svg width="16" height="16"><use xlink:href="#icon-resume" /></svg>
resume resume
</a> </a>
</li>
{% elif 'github' in url %} {% elif 'github' in url %}
<li>
<a rel="me" href="{{ url }}"> <a rel="me" href="{{ url }}">
<svg width="16" height="16"><use xlink:href="#icon-github" /></svg> <svg width="16" height="16"><use xlink:href="#icon-github" /></svg>
github github
</a> </a>
{% endif %}
</li> </li>
{% endif %}
{% endfor %} {% endfor %}
</ul> </ul>
<p> <p>
@ -142,51 +149,7 @@
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
</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>
-->
</footer> </footer>
<script> <script>

3
templates/konami.js
View file

@ -14,7 +14,4 @@ function kcl(cb) {
kcl(function () { kcl(function () {
var st = document.getElementById('css_surprise'); var st = document.getElementById('css_surprise');
st.setAttribute('media', 'all'); st.setAttribute('media', 'all');
var e = document.createElement('img');
e.src = '/iddqd.gif';
document.body.appendChild(e);
}) })

8
templates/meta-article.j2.html
View file

@ -24,18 +24,18 @@
</header> </header>
{% if post.description|length %} {% if post.description|length %}
<div class="e-summary entry-summary"> <section class="e-summary entry-summary">
{{ post.description|relurl(baseurl) }} {{ post.description|relurl(baseurl) }}
<span class="more"> <span class="more">
<a href="{{ post.url|relurl(baseurl) }}"> <a href="{{ post.url|relurl(baseurl) }}">
{% if post.inLanguage == 'hu' %}Tovább »{% else %}Continue »{% endif %} {% if post.inLanguage == 'hu' %}Tovább »{% else %}Continue »{% endif %}
</a> </a>
</span> </span>
</div> </section>
{% else %} {% else %}
<div class="e-content entry-content"> <section class="e-content entry-content">
{{ post.text|relurl(baseurl) }} {{ post.text|relurl(baseurl) }}
</div> </section>
{% endif %} {% endif %}
<footer class="entry-footer" aria-hidden="true" hidden="hidden"> <footer class="entry-footer" aria-hidden="true" hidden="hidden">

24
templates/style-alt.css
View file

@ -12,7 +12,7 @@ a:hover {
border-bottom-color: #014384; border-bottom-color: #014384;
} }
.header a:hover { #header a:hover {
border-bottom-color: #eee; border-bottom-color: #eee;
} }
@ -46,15 +46,15 @@ pre > code::before {
color: #222; color: #222;
} }
.header, #header,
.footer { #footer {
background-color: #333; background-color: #333;
color: #ccc; color: #ccc;
} }
.header a, #header a,
.footer a, #footer a,
.theme input + label { #theme input + label {
color: #71B3F4; color: #71B3F4;
} }
@ -62,19 +62,17 @@ input {
background-color: #222; background-color: #222;
} }
.footer a:hover { #footer a:hover {
color: #fff; color: #fff;
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
} }
.pagination a { #pagination a {
border-bottom: 1px solid #3173b4; border-bottom: 1px solid #3173b4;
} }
.comments .u-url:hover, #comments .u-url:hover,
.footnotes a:hover, #main a:hover,
.h-feed aside a:hover, #pagination a:hover {
.h-feed article a:hover,
body > nav > ul > li a:hover {
border-bottom: 1px solid #014384; border-bottom: 1px solid #014384;
} }

34
templates/style-gallery.css
View file

@ -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;
}

148
templates/style.css
View file

@ -29,7 +29,7 @@ p {
h1 { h1 {
text-transform:uppercase; text-transform:uppercase;
text-align: center; text-align: center;
padding-bottom: 1em; margin: 1em 0 2em 0;
} }
hr { hr {
@ -110,20 +110,20 @@ figcaption {
text-align: center; text-align: center;
} }
figcaption > dl { .exif {
margin-top: 1em; margin-top: 1em;
color: #666; color: #666;
} }
figcaption > dl * { .exif * {
display: inline-block; display: inline-block;
} }
figcaption > dl dt { .exif dt {
display: none; display: none;
} }
figcaption > dl dd { .exif dd {
margin: 0 0.3em; margin: 0 0.3em;
} }
@ -180,12 +180,12 @@ th, tr:nth-child(even) {
background-color: rgba(255, 255, 255, .1); background-color: rgba(255, 255, 255, .1);
} }
.main ul { #main ul {
margin-left: 2em; margin-left: 2em;
} }
.main ol { #main ol {
margin-left: 3em; margin-left: 2em;
} }
li p { li p {
@ -198,7 +198,7 @@ li p {
font-weight: bold; font-weight: bold;
} }
.comments .u-url, #comments .u-url,
.footnotes a { .footnotes a {
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;
@ -217,30 +217,30 @@ li p {
margin: 0 0 0 0.6em; margin: 0 0 0 0.6em;
} }
.pagination ol, #pagination ol,
.footnotes ol, .footnotes ol,
.header ul, #header ul,
.footer ul { #footer ul {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
} }
.header li, #header li,
.footer li { #footer li {
display: inline-block; display: inline-block;
} }
.footer p { #footer p {
margin:0.3em; margin:0.3em;
} }
.header a { #header a {
border-bottom: 3px none #eee; border-bottom: 3px none #eee;
padding-bottom: 0.1em; padding-bottom: 0.1em;
} }
.header a.active, #header a.active,
.header a:hover { #header a:hover {
border-bottom-style: solid; border-bottom-style: solid;
color: #eee; color: #eee;
} }
@ -249,54 +249,60 @@ li p {
height: 1em; height: 1em;
} }
.pagination { #pagination {
text-align: center; text-align: center;
} }
.pagination li { #pagination li {
display: inline-block; display: inline-block;
padding: 0.3em; padding: 0.3em;
} }
.pagination a { #pagination a {
border-bottom-style: solid; border-bottom-style: solid;
} }
.header, #header,
.footer { #footer {
background-color: #111; background-color: #111;
text-align: center;
padding: 0.6em 1em; padding: 0.6em 1em;
} }
.pagination, #footer {
.h-feed, text-align: center;
.h-entry { }
#header > *,
#footer > * {
max-width: 54em;
margin: 0 auto;
}
#pagination,
#main {
margin:0 auto; margin:0 auto;
max-width: 54em; max-width: 54em;
padding: 0 0.3em 2em 0.3em; padding: 1em 0.3em;
} }
#header #header-forms {
.header { float: right;
display: flex;
justify-content:space-between;
justify-items:center;
} }
.header form, .header > * { #header form, #header > div > * {
display: inline-block; display: inline-block;
} }
.theme { #theme {
margin: 0 1em; margin: 0 1em;
} }
.theme input, input[type=submit] { #theme input, input[type=submit] {
display: none; display: none;
} }
.theme input + label { #theme input + label {
color: #f90; color: #f90;
cursor: pointer; cursor: pointer;
border-bottom: 3px solid transparent; border-bottom: 3px solid transparent;
@ -304,81 +310,39 @@ li p {
margin-left:0.6em; margin-left:0.6em;
} }
.theme input:hover + label, #theme input:hover + label,
.theme input:checked + label { #theme input:checked + label {
border-bottom: 3px solid #eee; border-bottom: 3px solid #eee;
color: #eee; color: #eee;
} }
@media all and (min-width: 78em) { .h-feed .exif {
.header, display: none;
.footer { }
text-align: left;
position: fixed; @media all and (max-width: 47em) {
left: 0; #header > * {
height: 100vh;
z-index: 10;
width: 22em;
padding: 1em;
display: block; display: block;
text-align:center;
} }
.footer { #header #header-forms {
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;
}
}
@media all and (max-width: 46em) {
.header {
display: block;
}
.header > * {
display: block; display: block;
float:unset;
} }
#search { #search {
margin-top: 0.6em; margin-top: 0.6em;
} }
.header a { #header a {
display: block; display: block;
text-align: center; text-align: center;
margin-bottom: 0.6em; margin-bottom: 0.6em;
} }
.header a svg { #header a svg {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
} }
} }

2
templates/themeswitcher.js
View file

@ -58,7 +58,7 @@ function autoTheme(e) {
function doTheme() { function doTheme() {
var themeform = document.createElement('form'); 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>'; themeform.innerHTML='<svg width="16" height="16"><use xlink:href="#icon-contrast"></use></svg>';
theme_container.insertBefore(themeform, theme_insbefore); theme_container.insertBefore(themeform, theme_insbefore);
var schemes = ["dark", "light"]; var schemes = ["dark", "light"];