template updates, switch to dark theme more or less finished

This commit is contained in:
Peter Molnar 2017-10-27 10:26:17 +01:00
parent f5c390ecf3
commit 112448cf92
6 changed files with 220 additions and 391 deletions

View file

@ -37,18 +37,12 @@
<p class="published">
<time class="dt-published" datetime="{{ post.pubtime }}">{{ post.pubdate }}</time>
</p>
<p class="shorturl">
<a href="/{{ post.shortslug }}">{{ site.url }}/{{ post.shortslug }}</a>
</p>
<div class="hide">
{% include 'block_author.html' %}
</div>
<p class="hide">
<a class="u-url u-uuid" rel="bookmark" href="{{ site.url}}/{{ post.slug }}/"></a>
</p>
</footer>
</article>
<aside class="content-note">
<hr />
<p class="license">
{% if post.licence.text == 'CC BY 4.0' %}
<a rel="license" href="https://creativecommons.org/licenses/by/4.0/" class="hide u-license">CC BY 4.0</a>
@ -61,11 +55,11 @@
{% else %}
<a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" class="hide u-license">CC BY-NC-ND 4.0</a>
<svg class="icon"><use xlink:href="#icon-creative-commons" /></svg>
Licensed under <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International</a>. You are free to share if you link back here for non commercial use, but you can\'t publish any altered versions of it. For commercial use please contact the author.
Licensed under <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International</a>. You are free to share if you link back here for non commercial use, but you can't publish any altered versions of it. For commercial use please contact the author.
{% endif %}
</p>
</aside>
</footer>
</article>
</section>

View file

@ -1,20 +1,4 @@
{% if post.is_bookmark %}
<p class="p-name">{{ post.title }}</p>
<p>
<svg class="icon"><use xlink:href="#icon-bookmark" /></svg>
<a href="{{ post.is_bookmark }}" class="u-bookmark-of" title="Bookmarked URL: {{ post.is_bookmark }}">
{{ post.is_bookmarkl }}
</a>
</p>
{% elif post.is_fav %}
<p class="p-name">{{ post.title }}</p>
<p>
<svg class="icon"><use xlink:href="#icon-repost" /></svg>
<a href="{{ post.is_fav }}" class="u-favorite-of" title="Favorite of: {{ post.is_fav }}">
{{ post.is_fav }}
</a>
</p>
{% elif post.is_reply %}
{% if post.is_reply %}
<p class="p-name">
<svg class="icon"><use xlink:href="#icon-reply" /></svg>
<a href="{{ post.is_reply }}" class="u-in-reply-to" title="Reply to: {{ post.is_reply }}">

View file

@ -17,9 +17,9 @@
<dt>Shutter speed</dt>
<dd><svg class="icon"><use xlink:href="#icon-clock" /></svg>{{ photo.exif.shutter_speed }} sec</dd>
{% endif %}
{% if photo.exif.focal_length %}
{% if photo.exif.focallength %}
<dt>Focal length (as set)</dt>
<dd><svg class="icon"><use xlink:href="#icon-focallength" /></svg>{{ photo.exif.focal_length }} mm</dd>
<dd><svg class="icon"><use xlink:href="#icon-focallength" /></svg>{{ photo.exif.focallength }}</dd>
{% endif %}
{% if photo.exif.iso %}
<dt>Sensitivity</dt>

View file

@ -1,7 +1,6 @@
<footer class="content-footer" id="main-footer">
<div class="limit">
<nav class="footer-contact p-author h-card vcard">
<nav class="footer-contact p-author h-card vcard limit">
<img class="photo avatar u-photo u-avatar" src="{{ site.author.avatar }}" alt="Photo of {{ site.author.name }}" />
<dl>
@ -19,29 +18,15 @@
<svg class="icon"><use xlink:href="#icon-key" /></svg>
<a rel="me" class="u-gpg gpg" href="{{ site.url }}/pgp.asc"> {{ site.author.gpg }}</a>
</dd>
{% for silo, url in site.author.socials.items() %}
{% for silo, url in site.author.socials.items() %}
<dt>{{ silo }}</dt>
<dd>
<svg class="icon"><use xlink:href="#icon-{{ silo }}" /></svg>
<a rel="me" class="u-{{ silo }} url u-url" href="{{ url }}">{{ silo }}</a>
</dd>
{% endfor %}
<dt>Feed</dt>
<dd>
<svg class="icon"><use xlink:href="#icon-rss" /></svg>
<a title="Feed" href="{{ site.url }}/feed/">Feed</a>
</dd>
<dt>CV</dt>
<dd>
<svg class="icon"><use xlink:href="#icon-note" /></svg>
<a class="u-url u-resume" href="{{ site.author.url }}/cv">CV</a>
</dd>
{% endfor %}
</dl>
</nav>
<aside class="footer-notes p-note">
{{ site.author.note }}
</aside>
</div>
</footer>
</body>

View file

@ -58,16 +58,6 @@
notes
</a>
</li>
{% set cssclass = '' %}
{% if (post is defined and post.category == 'bookmark' ) or ( taxonomy is defined and taxonomy.slug == 'bookmark' ) %}
{% set cssclass = 'active' %}
{% endif %}
<li>
<a title="bookmarks" href="/category/bookmark/" class="{{ cssclass }}">
<svg class="icon"><use xlink:href="#icon-bookmark" /></svg>
bookmarks
</a>
</li>
</ul>
</nav>

View file

@ -4,19 +4,18 @@
box-sizing: border-box;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
html, body, div, span,
h1, h2, h3, h4, h5, h6,
a, p, blockquote, pre, cite, code,
del, em, ins, strong, sub, sup, tt, b, u, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
article, aside, details,
figure, figcaption, img,
footer, header, hgroup,
menu, nav, section, summary,
time, audio, video {
margin: 0;
padding: 0;
border: 0;
@ -81,9 +80,8 @@ li p {
blockquote {
margin: 0.3rem;
padding-left: 0.6rem;
font-style: italic;
border-left: 2px solid #999;
color: #666;
font-family: "Times New Roman", serif;
}
table {
@ -104,26 +102,15 @@ hr {
display: block;
height: 1px;
border: none;
border-top: 1px solid #999;
margin: 1.3rem 0 1rem 0;
border-top: 1px solid #444;
margin: 1rem 0;
clear:both;
}
.limit,
.content-body {
max-width: 70ch;
margin: 1rem auto;
}
.h-entry {
padding: 0 0.6rem;
font-size: 0.86rem;
}
h1, h2, h3, h4, h5, h6, dt {
font-weight:bold;
clear:both;
font-size: 1rem;
}
h1, h2, h3, h4, h5, h6 {
@ -145,47 +132,6 @@ h3 {
font-size: 1rem;
}
.h-feed .h-entry h2 {
border: none;
font-size: 1rem;
margin: 0;
padding: 0;
}
.h-feed .h-entry {
margin: 2rem 0 0 0;
padding: 1rem;
border-bottom: 2px solid #333;
}
.h-entry footer {
opacity: 0.8;
}
.h-entry footer p {
padding: 0.3rem 0;
}
.h-entry footer .vcard img {
height: 1rem;
vertical-align: text-bottom;
}
.published, .updated {
display: inline;
}
.content-note a,
.e-content a {
color:#3173C4;
}
.content-note a:hover,
.e-content a:hover {
color:#004283;
}
.icon {
transform: rotate(0.01deg);
width: 19px;
@ -196,34 +142,11 @@ h3 {
overflow: visible;
}
code.sourceCode span.al { color: black; }
code.sourceCode span.at { color: black; }
code.sourceCode span.bn { color: black; }
code.sourceCode span.bu { color: black; }
code.sourceCode span.cf { color: black; }
code.sourceCode span.ch { color: black; }
code.sourceCode span.co { color: darkgray; }
code.sourceCode span.dt { color: black; }
code.sourceCode span.dv { color: black; }
code.sourceCode span.er { color: black; }
code.sourceCode span.ex { color: darkorange; }
code.sourceCode span.fl { color: black; }
code.sourceCode span.fu { color: darkorange; }
code.sourceCode span.im { color: black; }
code.sourceCode span.kw { color: darkcyan; }
code.sourceCode span.op { color: black; }
code.sourceCode span.ot { color: black; }
code.sourceCode span.pp { color: black; }
code.sourceCode span.sc { color: black; }
code.sourceCode span.ss { color: black; }
code.sourceCode span.st { color: magenta; }
code.sourceCode span.va { color: darkturquoise; }
code,
pre {
font-family: "Inconsolata", monospace;
font-size: 0.8rem;
color: darkslategrey;
font-family: "Inconsolata", "Courier New", monospace;
font-size: 0.7rem;
color: limegreen;
direction: ltr;
text-align: left;
white-space: pre;
@ -231,8 +154,8 @@ pre {
word-break: normal;
tab-size: 2;
hyphens: none;
border: 1px solid #ccc;
background-color: whitesmoke;
border: 1px solid #666;
background-color: #222;
}
pre {
@ -244,7 +167,7 @@ pre {
code {
display: inline-block;
padding: 0 0.3rem;
line-height: 1.1rem;
line-height: 0.9rem;
}
pre code {
@ -253,6 +176,69 @@ pre code {
padding: 0;
}
code.sourceCode span.al { color: limegreen; }
code.sourceCode span.at { color: limegreen; }
code.sourceCode span.bn { color: limegreen; }
code.sourceCode span.bu { color: limegreen; }
code.sourceCode span.cf { color: limegreen; }
code.sourceCode span.ch { color: limegreen; }
code.sourceCode span.co { color: gray; }
code.sourceCode span.dt { color: limegreen; }
code.sourceCode span.dv { color: limegreen; }
code.sourceCode span.er { color: limegreen; }
code.sourceCode span.ex { color: orange; }
code.sourceCode span.fl { color: limegreen; }
code.sourceCode span.fu { color: orange; }
code.sourceCode span.im { color: limegreen; }
code.sourceCode span.kw { color: cyan; }
code.sourceCode span.op { color: limegreen; }
code.sourceCode span.ot { color: limegreen; }
code.sourceCode span.pp { color: limegreen; }
code.sourceCode span.sc { color: limegreen; }
code.sourceCode span.ss { color: limegreen; }
code.sourceCode span.st { color: magenta; }
code.sourceCode span.va { color: turquoise; }
.limit,
.content-body {
max-width: 70ch;
margin: 1rem auto;
}
.h-entry {
padding: 0 0.6rem;
font-size: 0.9rem;
}
.h-feed .h-entry {
margin: 2rem 0 0 0;
padding: 1rem;
border-bottom: 2px solid #333;
}
/* titles in taxonomy pages */
.h-feed .h-entry h2 {
border: none;
font-size: 1rem;
margin: 0;
padding: 0;
}
/* licence, time, author */
.h-entry footer p {
opacity: 0.7;
padding: 0 0.6rem 0 0;
display: inline-block;
}
.e-content a {
color:#5193D4;
}
.e-content a:hover {
color:#71B3F4;
}
.singular footer {
margin: 2rem 0;
}
@ -307,7 +293,7 @@ pre code {
}
.footnotes ol li a[href^="#"]:hover:after {
color: #000;
color: #ccc;
}
.content-header,
@ -330,57 +316,38 @@ pre code {
.content-footer {
margin-top: 2rem;
padding: 1rem 0;
padding: 0.3rem 0;
opacity: 0.8;
}
.footer-contact,
.footer-notes {
display: block;
padding: 1rem;
font-size: 0.9rem;
.content-footer img {
width: 1.1rem;
float: left;
margin: 0 0.3rem 0rem 0;
}
.footer-contact dl,
.footer-contact img {
display: inline-block;
vertical-align: top;
.content-footer dl {
font-size: 0.86rem;
}
.footer-contact dl {
width: 80%;
padding-left: 1rem;
}
.footer-contact img {
width: 18%;
}
.footer-contact .p-name {
font-size: 1.1rem;
font-variant: small-caps;
}
.footer-contact dl dt {
.content-footer svg,
.content-footer dl dt {
display:none;
visibility: hidden;
}
.footer-contact dl dd {
line-height: 2rem;
border-bottom: 1px solid #666;
.content-footer dl dd {
display:inline-block;
}
.footer-contact dl dd:first-of-type {
border-bottom: none;
.content-footer dl dd:after {
content: '\00B7';
margin: 0 0.3rem;
}
.footer-notes figure {
display: inline-block;
margin-right: 1rem;
}
.footer-notes figure img {
width:7rem;
.content-footer dl dd:last-of-type:after {
content: '';
}
input {
@ -448,59 +415,28 @@ input[type=submit]:hover {
border-bottom: 3px solid #fefefe;
}
/* above is mobile first; this is the desktop */
@media all and (min-width: 50rem) {
.content-navigation ul li a {
font-size: 0.9rem;
}
.content-navigation ul li a svg {
display:inline-block;
}
.search-form,
.content-navigation {
display:inline-block;
}
.search-form {
float:right;
margin: 0.1rem;
}
.footer-contact,
.footer-notes {
display: inline-block;
max-width: 48%;
padding: 1rem;
vertical-align: top;
}
}
figure {
background-color: #333;
margin: 0.6rem 0;
padding: 0.6rem 0 0 0;
margin: 1rem 0;
}
figcaption {
padding: 0.6rem;
margin: 0.6rem 0 0 0;
background-color: #444;
background-color: #111;
text-align: left;
max-width: 722px;
margin: 0 auto;
padding: 0.6rem;
}
.favurl img,
.adaptimg {
display: block;
max-height: 98vh;
max-width: 100%;
width:auto;
height:auto;
margin: 0.3rem auto;
margin: 0 auto;
padding: 0;
outline: 1px solid #111;
outline: 1px solid #000;
}
.follow {
@ -548,77 +484,20 @@ figcaption {
padding: 0.3rem 0.6rem;
}
time {
font-size: 0.8rem;
}
.exif {
font-size: 0.7rem;
font-family: mono;
letter-spacing: -0.04rem;
margin-top: 0.3rem;
}
.hide,
.comments .u-uuid,
.comments dl time,
.exif dt {
display: none;
visibility: hidden;
}
.exif dd {
display: inline-block;
margin: 0 0.3rem;
}
.exif dd i {
margin-right: 0.3rem;
}
/* replies */
.comments ol .e-content,
.comments ol {
margin: 1rem 0 0 1rem;
}
.comments ol li {
margin-bottom: 1.3rem;
}
.comments ol .p-name {
font-weight: bold;
display: block;
}
.comments ol time,
.comments ol .u-repost-of {
font-size: 0.8rem;
margin: 0;
}
.comments ol .u-repost-of:before {
content: '\2022';
margin: 0 0.3rem;
}
.comments dt,
.comments dd,
.comments dl ul,
.comments dl li {
display: inline;
}
.comments dl li {
margin:0;
padding:0 0.3rem;
}
.comments dl a.u-repost-of {
margin-left: 0.3rem;
}
.content-note {
font-size: 0.8rem;
margin: 0 0.6rem 0 0;
}
.w25,
@ -634,42 +513,6 @@ time {
width: 24%;
}
.favurl img {
z-index:1;
opacity: 0.5;
}
.favurl,
.favurl:hover {
border: none;
position: relative;
display: block;
}
.favurl::after,
.favurl:hover::after {
display: block;
position: absolute;
opacity: 0.9;
right: 0;
left: 0;
bottom: 1rem;
content:attr(href);
padding: 0.5rem 1rem;
font-weight: bold;
color: #fff;
background-color: #000;
}
.favurl:hover::after {
opacity: 0.8;
}
.u-favorite-of {
font-size: 0.9rem;
font-weight: initial;
}
.u-in-reply-to::before {
content: 'RE:';
dislay: inline-block;
@ -677,6 +520,7 @@ time {
font-weight: bold;
}
.search-section {
margin-bottom: 1rem;
}
@ -691,9 +535,34 @@ time {
margin: 1rem 0.6rem;
}
/* above is mobile first; this is the desktop */
@media all and (min-width: 50rem) {
.content-navigation ul li a {
font-size: 0.9rem;
}
.content-navigation ul li a svg {
display:inline-block;
}
.search-form,
.content-navigation {
display:inline-block;
}
.search-form {
float:right;
margin: 0.1rem;
}
}
@media print {
* {
background-color: #fff !important;
color: #222;
}
html, body {
@ -717,36 +586,17 @@ time {
page-break-after: avoid;
}
p, li, pre, blockquote, aside, .footnotes {
p, li, blockquote, figure, .footnotes {
page-break-inside: avoid !important;
}
figure {
max-height: 45vh;
}
a {
border: none;
}
.e-content .photo {
display:block;
page-break-inside: avoid !important;
}
.e-content .adaptive {
display:block;
max-width: 100%;
max-height: 45vh;
text-align:center;
border:none;
text-decoration:none;
padding:0;
margin: 1rem auto;
page-break-inside: avoid !important;
}
.e-content .adaptive img {
page-break-inside: avoid !important;
max-width: 100%;
max-height:45vh;
color: #000;
}
.content-note, .content-header, .content-footer,
@ -764,13 +614,39 @@ time {
border: none;
}
code.sourceCode span { color: #000; }
pre.sourceCode, code, pre {
color: #222;
word-break: break-all;
word-wrap: break-word;
overflow: initial;
line-height: 1rem;
page-break-inside: enabled;
}
code.sourceCode span { color: black; }
code.sourceCode span.al { color: black; }
code.sourceCode span.at { color: black; }
code.sourceCode span.bn { color: black; }
code.sourceCode span.bu { color: black; }
code.sourceCode span.cf { color: black; }
code.sourceCode span.ch { color: black; }
code.sourceCode span.co { color: darkgray; }
code.sourceCode span.dt { color: black; }
code.sourceCode span.dv { color: black; }
code.sourceCode span.er { color: black; }
code.sourceCode span.ex { color: darkorange; }
code.sourceCode span.fl { color: black; }
code.sourceCode span.fu { color: darkorange; }
code.sourceCode span.im { color: black; }
code.sourceCode span.kw { color: darkcyan; }
code.sourceCode span.op { color: black; }
code.sourceCode span.ot { color: black; }
code.sourceCode span.pp { color: black; }
code.sourceCode span.sc { color: black; }
code.sourceCode span.ss { color: black; }
code.sourceCode span.st { color: magenta; }
code.sourceCode span.va { color: darkturquoise; }
}