dual contrast CSS
Peter Molnar hello@petermolnar.eu
Sun, 17 Jun 2018 17:30:50 +0000
11 files changed,
192 insertions(+),
82 deletions(-)
M
nasg.py
→
nasg.py
@@ -560,6 +560,11 @@ return False
return True @property + def is_old(self): + tdiff = arrow.utcnow() - arrow.get(self.mtime) + return (tdiff.days > 2*365) + + @property def htmlfile(self): return os.path.join( shared.config.get('common', 'build'),@@ -842,7 +847,8 @@ 'syndicate': self.syndicate,
'tags': self.tags, 'photo': False, 'enclosure': False, - 'review': self.review + 'review': self.review, + 'is_old': self.is_old } if self.photo: self._tmplvars.update({
M
templates/Category.html
→
templates/Category.html
@@ -71,7 +71,7 @@ {% endif %}
{% if taxonomy.page - 4 > 0 %} <li> - <span class="page-numbers dots">…</span> + <span class="dots">…</span> </li> {% endif %}@@ -84,7 +84,7 @@ {% endif %}
<li> - <span class="page-numbers taxonomy.page">{{ taxonomy.page }}</span> + <span class="current">{{ taxonomy.page }}</span> </li>@@ -97,7 +97,7 @@
{% if taxonomy.page + 3 < taxonomy.total %} <li> - <span class="page-numbers dots">…</span> + <span class="dots">…</span> </li> {% endif %}
M
templates/Category_article.html
→
templates/Category_article.html
@@ -6,14 +6,15 @@
{% include 'block_header_close.html' %} <section class="content-body h-feed"> - <aside class="follow"> - <p> - <svg class="icon" width="16" height="16"> - <use xlink:href="#icon-rss" /> - </svg> - <a title="follow {{ taxonomy.title }}" rel="feed" href="{{ site.url }}{{ taxonomy.feed }}">XML feed</a> + <nav> + <p class="follow"> + <a title="follow {{ taxonomy.title }}" rel="feed" href="{{ site.url }}{{ taxonomy.feed }}"> + <svg class="icon" width="16" height="16"> + <use xlink:href="#icon-rss" /> + </svg> + </a> </p> - </aside> + </nav> <h1 class="p-name hide">{{ taxonomy.name }}</h1>
M
templates/Search.html
→
templates/Search.html
@@ -4,7 +4,10 @@ <head>
<meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1" /> <style media="all"> - {% include 'style.css' %} + {% include 'style-dark.css' %} + </style> + <style media="none"> + {% include 'style-light.css' %} </style> <title>Search results for "{{ term }}"</title> </head>
M
templates/Singular.html
→
templates/Singular.html
@@ -18,6 +18,14 @@ <header>
<h1>{% include 'Singular_title.html' %}</h1> </header> +{% if post.category == 'article' and post.is_old %} + <div class="warning"> + <p> + This article is older, than 2 years. It might be outdated. + </p> + </div> +{% endif %} + {% if post.review %} <div class="h-review hreview"> <h2>Review summary</h2>@@ -38,7 +46,6 @@
{% if post.summary %} <div class="e-summary entry-summary"> {{ post.summary }} - <br class="clear" /> </div> {% endif %}
M
templates/block_header_close.html
→
templates/block_header_close.html
@@ -1,6 +1,19 @@
- <style media="all"> -{% include 'style.css' %} + <style id="dark" media="all"> + {% include 'style-dark.css' %} + </style> + <style id="light" media="none"> + {% include 'style-light.css' %} </style> + <script> + function toggleStylesheet(trigger){ + var curr = document.querySelector('#light').getAttribute("media"); + var setto = 'all'; + if (curr == 'all') { + setto = 'none'; + } + document.querySelector('#light').setAttribute("media", setto); + } + </script> </head> <body>@@ -66,5 +79,11 @@ <input type="search" class="search-field" placeholder="search..." value="" name="s" id="s" title="Search for:" />
<input type="submit" class="search-submit" value="Go ➡" /> </form> - <br class="clear" /> + <p class="contrast"> + <a title="toggle site colour scheme" href="#" onclick="toggleStylesheet(this)"> + <svg class="icon" width="16" height="16"><use xlink:href="#icon-contrast" /></svg> + </a> + </p> + + </header>
M
templates/block_header_open.html
→
templates/block_header_open.html
@@ -9,7 +9,8 @@ <link rel="http://webmention.org/" href="{{ site.url }}/webmention" />
<link rel="webmention" href="{{ site.url }}/webmention" /> <!-- https://indieweb.org/Microsub --> <link rel="hub" href="{{ site.websub.hub }}" /> - <!-- https://indieweb.org/Micropub --> + <!-- https://indieweb.org/Micropub <link rel="authorization_endpoint" href="{{ site.url }}micropub-auth" /> <link rel="token_endpoint" href="{{ site.url }}micropub-token" /> <link rel="micropub" href="{{ site.url }}micropub" /> + -->
A
templates/style-light.css
@@ -0,0 +1,41 @@
+html, body { + color: #222; + background-color: #eee; +} + +a { + color: #3173b4; +} + + +a:hover { + color: #115394; + border-bottom: 1px solid #115394; +} + +code, +pre { + color: darkgreen; + background-color: #eee; +} + +.sourceCode .co { color: gray; } +.sourceCode .ex { color: darkorange; } +.sourceCode .fu { color: darkorange; } +.sourceCode .kw { color: darkcyan; } +.sourceCode .st { color: darkmagenta; } +.sourceCode .va { color: darkturquoise; } + +.donation li a { + color: #333; + border-bottom: 3px solid #933 !important; +} + +.donation li a:hover { + color: #600; + border-bottom: 3px solid #600 !important; +} + +.h-entry.singular h1 a { + color: #111; +}
M
templates/style.css
→
templates/style-dark.css
@@ -8,7 +8,7 @@ margin: 0;
} html, -.content-footer, +.content-footer, .content-header { position: relative; background-color: #111;@@ -17,9 +17,10 @@ }
html, body { min-height: 100%; - font-family: "Liberation Sans", "Helvetica Neue", "Roboto", "Helvetica", sans-serif; + font-family: "Liberation Sans", sans-serif; color: #ccc; background-color: #222; + font-size: 102%; } hr {@@ -31,11 +32,13 @@ }
a { color: #5193D4; - text-decoration:none; + border-bottom: 1px solid transparent; + text-decoration: none; } a:hover { color: #71B3F4; + border-bottom: 1px solid #71B3F4; } ul,@@ -73,7 +76,7 @@ line-height: 1.2em;
} h1 { - font-size: 1.6em; + font-size: 1.6em; } h2 {@@ -106,7 +109,7 @@ td,
th { padding: 0.3em; border: 1px solid #111; - text-align:left; + text-align:left; } th {@@ -172,25 +175,34 @@ code {
padding: 0.1em; } - -.sourceCode .re { } /* RegionMarkerTok */ -.sourceCode .dv, -.sourceCode .bn, -.sourceCode .fl { color: #D33682; } /* DecValTok (decimal value), BaseNTok, FloatTok */ -.sourceCode .kw { color: #268BD2; } /* KeyWordTok */ -.sourceCode .dt { color: #268BD2; } /* DataTypeTok */ -.sourceCode .ch { color: #DC322F; } /* CharTok */ -.sourceCode .st { color: #2AA198; } /* StringTok */ -.sourceCode .co { color: #93A1A1; } /* CommentTok */ -.sourceCode .ot { color: #A57800; } /* OtherTok */ -.sourceCode .fu { color: #268BD2; } /* FunctionTok */ -.sourceCode .al { color: #CB4B16; font-weight: bold; } /* AlertTok */ -.sourceCode .er { color: #D30102; font-weight: bold; } /* ErrorTok */ +.sourceCode .al { color: green; } +.sourceCode .at { color: green; } +.sourceCode .bn { color: green; } +.sourceCode .bu { color: green; } +.sourceCode .cf { color: green; } +.sourceCode .ch { color: green; } +.sourceCode .co { color: gray; } +.sourceCode .dt { color: green; } +.sourceCode .dv { color: green; } +.sourceCode .er { color: green; } +.sourceCode .ex { color: orange; } +.sourceCode .fl { color: green; } +.sourceCode .fu { color: orange; } +.sourceCode .im { color: green; } +.sourceCode .kw { color: cyan; } +.sourceCode .op { color: green; } +.sourceCode .ot { color: green; } +.sourceCode .pp { color: green; } +.sourceCode .sc { color: green; } +.sourceCode .ss { color: green; } +.sourceCode .st { color: magenta; } +.sourceCode .va { color: turquoise; } .limit, .content-body { - max-width: 72ch; + max-width: 86ch; margin: 0 auto; + padding: 0.6em; } .icon {@@ -204,9 +216,10 @@ vertical-align:text-top;
margin: 0 0.1em; } -.content-navigation { +.content-header { font-size: 1.1em; text-align:center; + padding: 0 0 1em 0; } .content-navigation ul {@@ -243,31 +256,46 @@ display: none;
} .search-form { - margin-top: 0.6em; - text-align: center; + margin: 0.6em; } .search-form .search-field { width: 10em; } +.contrast { + position: absolute; + top:0.6em; + right: 0.6em; + margin: 0; + padding: 0; +} + +.contrast a { + color: #ccc; +} + @media all and (min-width: 56em) { .content-header { display: flex; justify-content: space-between; padding: 0.6em 0.3em; } - + .content-navigation ul li a { padding-bottom: 0.1em; } - + .content-navigation ul li a svg { display:inline-block; } .search-form { - margin: 0 0 0 auto; + margin: 0.3em 2em 0 auto; + } + + .contrast { + top:1em; } }@@ -308,6 +336,7 @@
.exif dd { display: inline-block; margin: 0 0.6em 0 0; + padding: 0.3em 0; } .exif .icon {@@ -318,6 +347,11 @@ .footnoteRef,
.footnoteRef:hover { border: 0; white-space: nowrap; + margin-left: 0.2em; +} + +.footnotes ol li p { + margin: 0; } .footnotes ol li a {@@ -390,25 +424,6 @@ height: 1em;
width: auto; } -.donation ul { - list-style-type: none; - margin: 0; -} - -.donation li { - padding: 0.3em; -} - -.donation li a { - color: #999; - border-bottom: 3px solid #933; -} - -.donation li a:hover { - color: #fff; - border-bottom: 3px solid #c66; -} - .reactions dt { display: none; }@@ -418,10 +433,11 @@ list-style-type: none;
margin: 0; } - +/* .h-feed .h-entry { margin-left: 1em; } +*/ .h-feed h2, .h-entry.singular .e-content h2 {@@ -433,6 +449,7 @@ .h-feed h3,
.h-entry.singular .e-content h3 { border-bottom: 1px dotted #777; } + .h-feed > h1 { display: none;@@ -448,26 +465,21 @@ }
.pagination { margin: 2em 0 0 0; - font-size: 1.3em; + font-size: 1.4em; } .pagination ul { - text-align:center; list-style-type: none; + text-align: center; } .pagination li { - display:inline-block; + display: inline-block; + padding: 0.3em 0.6em; } -.pagination a, -.pagination span { - padding: 0.3em; - margin: 0.3em; -} - -.pagination a { - border-bottom: 3px solid #5193D4; +.pagination .current { + color: #999; } .follow {@@ -476,6 +488,24 @@ text-align: right;
} +.donation ul { + list-style-type: none; + margin: 0; +} + +.donation li { + padding: 0.3em; +} + +.donation li a { + color: #999; + border-bottom: 3px solid #933 !important; +} + +.donation li a:hover { + color: #fff; + border-bottom: 3px solid #c66 !important; +} @media print { * {@@ -559,13 +589,13 @@ border: 1pt dotted #666;
padding: 0.6em; } - code.sourceCode span { color: black; } - code.sourceCode span.co { color: darkgray; } - code.sourceCode span.ex { color: darkorange; } - code.sourceCode span.fu { color: darkorange; } - code.sourceCode span.kw { color: darkcyan; } - code.sourceCode span.st { color: magenta; } - code.sourceCode span.va { color: darkturquoise; } + .sourceCode span { color: black; } + .sourceCode .co { color: darkgray; } + .sourceCode .ex { color: darkorange; } + .sourceCode .fu { color: darkorange; } + .sourceCode .kw { color: darkcyan; } + .sourceCode .st { color: magenta; } + .sourceCode .va { color: darkturquoise; } figcaption { font-size: 0.9em;
M
templates/symbols.svg
→
templates/symbols.svg
@@ -61,4 +61,7 @@ </symbol>
<symbol id="icon-creative-commons" viewBox="0 0 16 16"> <path d="M5.402 11.009c1.464 0 2.259-0.893 2.295-0.929 0.071-0.089 0.089-0.223 0.027-0.321l-0.402-0.732c-0.036-0.080-0.125-0.134-0.214-0.152-0.089-0.009-0.179 0.027-0.241 0.098-0.009 0-0.571 0.598-1.393 0.598-0.902 0-1.554-0.661-1.554-1.58 0-0.911 0.634-1.563 1.518-1.563 0.741 0 1.232 0.5 1.232 0.5 0.063 0.063 0.143 0.098 0.232 0.089s0.17-0.054 0.214-0.125l0.473-0.696c0.071-0.107 0.063-0.25-0.018-0.348-0.027-0.036-0.75-0.857-2.17-0.857-1.759 0-3.071 1.295-3.071 3.009 0 1.741 1.286 3.009 3.071 3.009zM11.027 11.009c1.473 0 2.259-0.893 2.295-0.929 0.071-0.089 0.089-0.223 0.036-0.321l-0.402-0.732c-0.045-0.080-0.125-0.134-0.223-0.152-0.089-0.009-0.179 0.027-0.241 0.098-0.009 0-0.571 0.598-1.393 0.598-0.902 0-1.554-0.661-1.554-1.58 0-0.911 0.634-1.563 1.518-1.563 0.75 0 1.232 0.5 1.232 0.5 0.063 0.063 0.143 0.098 0.232 0.089s0.17-0.054 0.214-0.125l0.473-0.696c0.071-0.107 0.063-0.25-0.018-0.348-0.027-0.036-0.75-0.857-2.17-0.857-1.75 0-3.071 1.295-3.071 3.009 0 1.741 1.286 3.009 3.071 3.009zM8 1.429c-3.625 0-6.571 2.946-6.571 6.571s2.946 6.571 6.571 6.571 6.571-2.946 6.571-6.571-2.946-6.571-6.571-6.571zM8 0c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8z"></path> </symbol> + <symbol id="icon-contrast" viewBox="0 0 16 16"> + <path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM2 8c0-3.314 2.686-6 6-6v12c-3.314 0-6-2.686-6-6z"></path> + </symbol> </svg>