From 8d0eec4e68e412bc4f059b25c4fcc3a2f40e917f Mon Sep 17 00:00:00 2001 From: plaskier <105095125+plaskier@users.noreply.github.com> Date: Wed, 18 May 2022 15:05:38 +0800 Subject: [PATCH] Dark mode optimization. (#59) * Dark mode optimization. - Auto dark mode based on system preference. - Manual toggle switch at the bottom of the page. - Instant and dynamic responding. * default.html. Optimization on dark mode button. * improve dark theme toggle in default.html in advance * Fix inconsistency of font family. * Fix accidentally deleting archive navigator in footer. * Rewrite CSS based on variables. * Attempt to fix the logic of switching dark and light theme. (For most cases it works.) * Add auto theme option to theme switch. - Toggle option: dark, light, auto. - Reformat some files. - Fix the logic conflict of theme switch. * Fix the italic style of in button. --- .gitignore | 2 + _includes/footer.html | 2 +- _includes/head.html | 1 + _includes/header.html | 2 +- _layouts/default.html | 9 +- assets/auto-dark.js | 58 +++ assets/common.css | 4 +- assets/dark.css | 160 ++++++ assets/newspaper.css | 28 +- assets/post.css | 1130 ++++++++++++++++++++++++----------------- c1.html | 2 +- c2.html | 2 +- 12 files changed, 926 insertions(+), 474 deletions(-) create mode 100755 assets/auto-dark.js create mode 100755 assets/dark.css diff --git a/.gitignore b/.gitignore index 3fdee48f..0fb1acf0 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ _posts/ _site/ .*/ +/vendor +.DS_Store \ No newline at end of file diff --git a/_includes/footer.html b/_includes/footer.html index 0eb3e343..2dab5094 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -38,7 +38,7 @@

The Republic of Agora

{{archive.name}} | {% endfor %}

-

© {{ site.time | date: '%Y' }} The Agora Community
+

© 2022 The Agora Community
{% for editor in site.data.editors %} {{editor.class}} {{editor.name}} {% endfor %} diff --git a/_includes/head.html b/_includes/head.html index ad9a54f2..b00155b7 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -10,6 +10,7 @@ + diff --git a/_includes/header.html b/_includes/header.html index 65de922e..0f9d510a 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,7 +1,7 @@

{% if page.title %} {% else %} diff --git a/_layouts/default.html b/_layouts/default.html index 8812e97b..ee79a5d0 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -3,6 +3,7 @@ {% include head.html %} + @@ -20,6 +21,12 @@ {% include footer.html %} {% endif %} -

Made with by Agora

+ +

+ Made with by Agora + +

+ + diff --git a/assets/auto-dark.js b/assets/auto-dark.js new file mode 100755 index 00000000..e10521bf --- /dev/null +++ b/assets/auto-dark.js @@ -0,0 +1,58 @@ +document.addEventListener('DOMContentLoaded', () => { + 'use strict'; + + const root = document.querySelector(':root'); + const schemeMedia = window.matchMedia('(prefers-color-scheme: dark)'); + const themeBtn = document.querySelector('button.scheme'); + const themeIcon = themeBtn.querySelector('i'); + + themeBtn.classList.remove('hidden'); + + function setThemeUIState() { + const themeState = localStorage.getItem('theme') || 'auto'; + const icon = { + light: 'sun', + dark: 'moon', + }[themeState] || 'adjust'; + + themeIcon.className = `toggle d-${icon}`; + + if (themeState === 'auto') { + delete root.dataset.scheme; + } else { + root.dataset.scheme = themeState; + } + } + + function setThemeExplicitly() { + const themeOrder = schemeMedia.matches + ? ['auto', 'light', 'dark'] + : ['auto', 'dark', 'light']; + + const storedTheme = localStorage.getItem('theme'); + const themeState = themeOrder.includes(storedTheme) ? storedTheme : 'auto'; + const nextState = (() => { + let current; + do { + current = themeOrder.shift(); + themeOrder.push(current); + } while (current !== themeState); + return themeOrder.shift(); + })(); + + localStorage.setItem('theme', nextState); + setThemeUIState(); + } + + schemeMedia.addEventListener('change', () => { + document.body.className = 'transitions'; + setThemeUIState(); + }); + setThemeUIState(); + + themeBtn.addEventListener('click', () => { + document.body.className = 'transitions'; + setThemeExplicitly(); + }); +}); + diff --git a/assets/common.css b/assets/common.css index f93646ba..579df797 100644 --- a/assets/common.css +++ b/assets/common.css @@ -247,11 +247,13 @@ a:hover { } } +/* Corrects for the color of the footer */ .love{ margin: 0; font-size: 12px; - padding: 1em; + padding-top: 1em; + padding-bottom: 1em; text-align: center; font-family: Mansalva; } diff --git a/assets/dark.css b/assets/dark.css new file mode 100755 index 00000000..4c218523 --- /dev/null +++ b/assets/dark.css @@ -0,0 +1,160 @@ +/* light color set + --post-tc1: #222222; + --post-tc2: #888888; + --post-tc3: #444444; + + --news-tc1: #222222; + --news-tc2: #222222; + --news-bd: #222222; + + --bkg-color: #ffffff; + --page-num: #222222; + --page-next: #444444; +*/ + + +/* dark color set + --post-tc1: #e6e8ea; + --post-tc2: #a0a7ae; + --post-tc3: #e1dfdc; + + --news-tc1: #e6e8ea; + --news-tc2: #e1dfdc; + --news-bd: #c8cccf; + + --bkg-color: #1e2023; + --page-num: #adb3b9; + --page-next: #e1dfdc; +*/ + +:root { + --post-tc1: #222222; + --post-tc2: #888888; + --post-tc3: #444444; + + --news-tc1: #222222; + --news-tc2: #222222; + --news-bd: #222222; + + --bkg-color: #ffffff; + --page-num: #222222; + --page-next: #444444; +} + +:root[data-scheme="dark"] { + --post-tc1: #e6e8ea; /* h1, h2, h3 */ + --post-tc2: #a0a7ae; /* h4 */ + --post-tc3: #e1dfdc; /* p */ + + --news-tc1: #e6e8ea; /* h1, h2, h3 | h4 h5 h6 */ + --news-tc2: #e1dfdc; /* p, blockquote, ul, ol, li */ + --news-bd: #c8cccf; /* item border */ + + --bkg-color: #1e2023; /* universal */ + --page-num: #adb3b9; + --page-next: #e1dfdc; +} + +@media (prefers-color-scheme: dark) { + :root:not([data-scheme="light"]) { + --post-tc1: #e6e8ea; /* h1, h2, h3 */ + --post-tc2: #a0a7ae; /* h4 */ + --post-tc3: #e1dfdc; /* p */ + + --news-tc1: #e6e8ea; /* h1, h2, h3 | h4 h5 h6 */ + --news-tc2: #e1dfdc; /* p, blockquote, ul, ol, li */ + --news-bd: #c8cccf; /* item border */ + + --bkg-color: #1e2023; /* universal */ + --page-num: #adb3b9; + --page-next: #e1dfdc; + } +} + + +/* */ + +.hidden { + display:none +} + +button.scheme { + background: none; + border: none; + margin: 0; + outline: none; + padding:none +} + +button.scheme:hover { + cursor:pointer +} + +.toggle{ + font-size: 1em; + font-style: normal; +} + +.d-sun:after{ + content: "🌕"; +} + +.d-moon:after{ + content: "🌑"; +} + +.d-adjust:after{ + content: "🌓"; +} + +/* + body.light-theme { + --post-tc1: #222222; + --post-tc2: #888888; + --post-tc3: #444444; + + --news-tc1: #222222; + --news-tc2: #222222; + --news-bd: #222222; + + --bkg-color: #ffffff; + --page-num: #222222; + --page-next: #444444; + }*/ + + +/* + --bkg-color is universal. + + Default color settings: + post.css: + - post-tc1(h1, h2, h3): #222222 + - post-tc2(h4): #888888 + - post-tc3(p): #444444 + newspaper.css: + **Colors are not specified originally.** + - news-tc1(h1, h2, h3): #222222 + - news-tc2(p, blockquote): #222222 + - news-bd(item border): #222222 +*/ + +/*h1, p, h2, h3, h4, h5, h6, a, blockquote, ul, ol, li { + color: var(--text-color); +}*/ + +a.next, div.pagination{ + color: var(--page-next); +} + +span.page_number{ + color: var(--page-num); +} + + +.btn-toggle{ + cursor: pointer; + -webkit-user-select:none; + -moz-user-select:none; + -ms-user-select:none; + user-select:none; +} \ No newline at end of file diff --git a/assets/newspaper.css b/assets/newspaper.css index 08a855d2..2695b7f3 100644 --- a/assets/newspaper.css +++ b/assets/newspaper.css @@ -10,7 +10,7 @@ } .heroColumn img { max-width: 100%; -// height: 50%; +/* height: 50%;*/ margin-bottom: .75em; display: block; margin: auto; @@ -26,28 +26,41 @@ box-sizing: border-box; } body { + background: var(--bkg-color); font-family: 'Georgia', serif; margin: 0; } +ul,ol,li { + color: var(--news-tc2); +} p { + color: var(--news-tc2); text-align: justify; margin:.25em 0 .5em 0; line-height:1.35em; } + +h1, h2, h4, h5, h6 { + color: var(--news-tc1); +} + h3 { + color: var(--news-tc1); margin: 0; padding: 0 0 .25em; font-size:1.5em; text-align: center; } article { + color: var(--news-tc1); margin-bottom: 1.5em; } blockquote { + color: var(--news-tc2); padding: 1em 0; margin: 0 0; -// border-top: 1px solid #ccc; - border-bottom: 1px dotted #ccc; + /*border-top: 1px solid #ccc;*/ + border-bottom: 1px dotted var(--news-bd); font-family: sans-serif; } q { @@ -74,21 +87,20 @@ q { } .item { display: block; - background: #fff; + /*background: #fff;*/ padding: 0 1em; width: 104%; - -webkit-transition:1s ease all; + --webkit-transition:1s ease all; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; - border-left: 1px solid black; + border-left: 1px solid var(--news-bd); /* if using inline-block, doesn't requre min-height or height but columns don't stretch as well vertically */ min-height: 100%; height:100%; } -/* Corrects for the color of the footer */ -.love { +.love{ background-color: #414141; color: #ffffff; } diff --git a/assets/post.css b/assets/post.css index a9045d80..0a03b5fc 100644 --- a/assets/post.css +++ b/assets/post.css @@ -1,11 +1,10 @@ - /* Structure */ - - body { - background: #fff; - font-family: georgia, times, serif; - font-size: 100%; /* 16px */ - /* Hyphenate +body { + background: var(--bkg-color); + font-family: georgia, times, serif; + font-size: 100%; + /* 16px */ + /* Hyphenate -epub-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; @@ -28,493 +27,704 @@ -moz-hyphens: auto; hyphens: auto; */ - } +} /* Typography */ +h1 { + color: var(--post-tc1); + font-size: 2.8em; + font-family: Baskerville, serif; + line-height: 1.2em; + font-weight: 900; + margin: 0; + padding: 0; +} + +h2 { + color: var(--post-tc1); + font-family: 'UnifrakturMaguntia', cursive; + font-size: 1.375em; + font-weight: 600; + font-style: italic; + line-height: 1.364em; + margin: 0 2%; + padding: 0 0 0.25em 0; +} + +h3 { + color: var(--post-tc1); + font-family: sans-serif; + font-size: 1.25em; + font-weight: 500; + font-style: normal; + line-height: 1.25em; + margin: 0 0; + padding: 0 0 .75em 0; +} + +h4 { + color: var(--post-tc2); + font-family: Arial, Verdana, sans-serif; + font-size: 1em; + font-weight: 200; + font-style: italic; + line-height: 1.5em; + margin: 0; + padding: 0; + text-align: right; +} + +p { + color: var(--post-tc3); + font-size: 1em; + line-height: 1.438em; + margin: 0 2%; + padding: 0 0 1.4em 0; + text-align: justify; + text-justify: inter-word; +} + +ul, ol, li, blockquote { + color: var(--post-tc3); +} + +/* "Containers" */ + +header { + color: #888; + border-bottom: 1px dotted #ccc; + -moz-column-span: all; + -ms-column-span: all; + -o-column-span: all; + -webkit-column-span: all; + column-span: all; + display: block; + margin: 0 0 2% 0; + position: relative; +} + +picture { + -moz-column-span: all; + -ms-column-span: all; + -o-column-span: all; + -webkit-column-span: all; + column-span: all; + border-top: 1px dotted #ccc; + display: block; + margin: 2% 0; + padding: 2% 0 0 0; + position: relative; +} + +center { + color: #222; + font-size: 2.125em; + font-weight: 400; + font-style: italic; + line-height: 1.412em; + text-align: center; + -moz-column-span: all; + -ms-column-span: all; + -o-column-span: all; + -webkit-column-span: all; + column-span: all; + border-top: 1px dotted #ccc; + border-bottom: 1px dotted #ccc; + display: block; + margin: 2% 0; + padding: 0.5em 0; + position: relative; +} + +footer { + color: #444; + font-family: Arial, Verdana, sans-serif; + font-size: 1em; + line-height: 1.438em; + -moz-column-span: all; + -ms-column-span: all; + -o-column-span: all; + -webkit-column-span: all; + column-span: all; + border-top: 1px dotted #ccc; + border-bottom: 1px dotted #ccc; + display: block; + margin: 2% 0 1% 0; + padding: 0.75em; + position: relative; + text-align: center; +} + +/* Images */ + +.full { + display: block; + margin: 0; + padding: 0; + width: 100%; +} + +.fluid { + display: block; + margin: 0 2%; + max-width: 96%; + padding: 0; + +} + +.caption { + background: #ddd; + color: #666; + font-family: Arial, Verdana, sans-serif; + font-size: 0.875em; + font-weight: 200; + line-height: 1.538em; + margin: 0 2% 2em 2%; + max-width: 96%; + padding: 0.35em; + text-align: center; +} + +/* Breakepoints */ + +@media all and (min-width: 1920px) { + body { + font-size: 115%; + } + + header { + margin: 0 0.5% 2% 0.5% !important; + } + + picture { + margin: 2% 0.5% !important; + } + + center { + margin: 2% 0.5% !important; + } + + footer { + margin: 2% 0.5% 1% 0.5% !important; + } + + article { + position: relative; + margin: auto; + width: 75%; + padding-left: 4%; + padding-right: 4%; + padding-top: 2em; + padding-bottom: 2em; + -webkit-column-count: 4; + -moz-column-count: 4; + -o-column-count: 4; + -ms-column-count: 4; + column-count: 4; + -webkit-column-gap: 2em; + -moz-column-gap: 2em; + -o-column-gap: 2em; + -ms-column-gap: 2em; + column-gap: 2em; + -webkit-column-rule: 1px dotted #ccc; + -moz-column-rule: 1px dotted #ccc; + -o-column-rule: 1px dotted #ccc; + -ms-column-rule: 1px dotted #ccc; + column-rule: 1px dotted #ccc; + } + +} + +@media all and (max-width: 1919px) and (min-width: 1600px) { + body { + font-size: 100%; + } + + h1 { + font-size: 3.8em; + } + + header { + margin: 0 0.5% 2% 0.5% !important; + } + + picture { + margin: 2% 0.5% !important; + } + + center { + margin: 2% 0.5% !important; + } + + footer { + margin: 2% 0.5% 1% 0.5% !important; + } + + article { + position: relative; + margin: auto; + width: 75%; + padding-left: 4%; + padding-right: 4%; + padding-top: 2em; + padding-bottom: 2em; + -webkit-column-count: 4; + -moz-column-count: 4; + -o-column-count: 4; + -ms-column-count: 4; + column-count: 4; + -webkit-column-gap: 2em; + -moz-column-gap: 2em; + -o-column-gap: 2em; + -ms-column-gap: 2em; + column-gap: 2em; + -webkit-column-rule: 1px dotted #ccc; + -moz-column-rule: 1px dotted #ccc; + -o-column-rule: 1px dotted #ccc; + -ms-column-rule: 1px dotted #ccc; + column-rule: 1px dotted #ccc; + } + +} + +@media all and (max-width: 1599px) and (min-width: 1440px) { + body { + font-size: 125%; + } + + header { + margin: 0 0.66% 2% 0.66% !important; + } + + picture { + margin: 2% 0.66% !important; + } + + center { + margin: 2% 0.66% !important; + } + + footer { + margin: 2% 0.66% 1% 0.66% !important; + } + + article { + position: relative; + margin: auto; + width: 75%; + padding-left: 4%; + padding-right: 4%; + padding-top: 2em; + padding-bottom: 2em; + -webkit-column-count: 3; + -moz-column-count: 3; + -o-column-count: 3; + -ms-column-count: 3; + column-count: 3; + -webkit-column-gap: 2em; + -moz-column-gap: 2em; + -o-column-gap: 2em; + -ms-column-gap: 2em; + column-gap: 2em; + -webkit-column-rule: 1px dotted #ccc; + -moz-column-rule: 1px dotted #ccc; + -o-column-rule: 1px dotted #ccc; + -ms-column-rule: 1px dotted #ccc; + column-rule: 1px dotted #ccc; + } + +} + +@media all and (max-width: 1439px) and (min-width: 1281px) { + body { + font-size: 115%; + } + + header { + margin: 0 0.66% 2% 0.66% !important; + } + + picture { + margin: 2% 0.66% !important; + } + + center { + margin: 2% 0.66% !important; + } + + footer { + margin: 2% 0.66% 1% 0.66% !important; + } + + article { + position: relative; + margin: auto; + width: 75%; + padding-left: 4%; + padding-right: 4%; + padding-top: 2em; + padding-bottom: 2em; + -webkit-column-count: 3; + -moz-column-count: 3; + -o-column-count: 3; + -ms-column-count: 3; + column-count: 3; + -webkit-column-gap: 2em; + -moz-column-gap: 2em; + -o-column-gap: 2em; + -ms-column-gap: 2em; + column-gap: 2em; + -webkit-column-rule: 1px dotted #ccc; + -moz-column-rule: 1px dotted #ccc; + -o-column-rule: 1px dotted #ccc; + -ms-column-rule: 1px dotted #ccc; + column-rule: 1px dotted #ccc; + } + +} + +@media all and (max-width: 1280px) and (min-width: 1140px) { + body { + font-size: 100%; + } + + header { + margin: 0 0.66% 2% 0.66% !important; + } + + picture { + margin: 2% 0.66% !important; + } + + center { + margin: 2% 0.66% !important; + } + + footer { + margin: 2% 0.66% 1% 0.66% !important; + } + + article { + position: relative; + margin: auto; + width: 75%; + padding-left: 4%; + padding-right: 4%; + padding-top: 2em; + padding-bottom: 2em; + -webkit-column-count: 3; + -moz-column-count: 3; + -o-column-count: 3; + -ms-column-count: 3; + column-count: 3; + -webkit-column-gap: 2em; + -moz-column-gap: 2em; + -o-column-gap: 2em; + -ms-column-gap: 2em; + column-gap: 2em; + -webkit-column-rule: 1px dotted #ccc; + -moz-column-rule: 1px dotted #ccc; + -o-column-rule: 1px dotted #ccc; + -ms-column-rule: 1px dotted #ccc; + column-rule: 1px dotted #ccc; + } + +} + +@media all and (max-width: 1139px) and (min-width: 1024px) { + body { + font-size: 85%; + } + + header { + margin: 0 0.66% 2% 0.66% !important; + } + + picture { + margin: 2% 0.66% !important; + } + + center { + margin: 2% 0.66% !important; + } + + footer { + margin: 2% 0.66% 1% 0.66% !important; + } + + article { + position: relative; + margin: auto; + width: 80%; + padding-left: 4%; + padding-right: 4%; + padding-top: 2em; + padding-bottom: 2em; + -webkit-column-count: 3; + -moz-column-count: 3; + -o-column-count: 3; + -ms-column-count: 3; + column-count: 3; + -webkit-column-gap: 2em; + -moz-column-gap: 2em; + -o-column-gap: 2em; + -ms-column-gap: 2em; + column-gap: 2em; + -webkit-column-rule: 1px dotted #ccc; + -moz-column-rule: 1px dotted #ccc; + -o-column-rule: 1px dotted #ccc; + -ms-column-rule: 1px dotted #ccc; + column-rule: 1px dotted #ccc; + } + +} + +@media all and (max-width: 1023px) and (min-width: 960px) { + body { + font-size: 100%; + } + + header { + margin: 0 1% 2% 1% !important; + } + + picture { + margin: 2% 1% !important; + } + + center { + margin: 2% 1% !important; + } + + footer { + margin: 2% 1% 1% 1% !important; + } + + article { + position: relative; + margin: auto; + width: 85%; + padding-left: 4%; + padding-right: 4%; + padding-top: 2em; + padding-bottom: 2em; + -webkit-column-count: 2; + -moz-column-count: 2; + -o-column-count: 2; + -ms-column-count: 2; + column-count: 2; + -webkit-column-gap: 2em; + -moz-column-gap: 2em; + -o-column-gap: 2em; + -ms-column-gap: 2em; + column-gap: 2em; + -webkit-column-rule: 1px dotted #ccc; + -moz-column-rule: 1px dotted #ccc; + -o-column-rule: 1px dotted #ccc; + -ms-column-rule: 1px dotted #ccc; + column-rule: 1px dotted #ccc; + } + +} + +@media all and (max-width: 959px) and (min-width: 768px) { + body { + font-size: 95%; + } + + header { + margin: 0 1% 2% 1% !important; + } + + picture { + margin: 2% 1% !important; + } + + center { + margin: 2% 1% !important; + } + + footer { + margin: 2% 1% 1% 1% !important; + } + + article { + position: relative; + margin: auto; + width: 90%; + padding-left: 4%; + padding-right: 4%; + padding-top: 2em; + padding-bottom: 2em; + -webkit-column-count: 2; + -moz-column-count: 2; + -o-column-count: 2; + -ms-column-count: 2; + column-count: 2; + -webkit-column-gap: 2em; + -moz-column-gap: 2em; + -o-column-gap: 2em; + -ms-column-gap: 2em; + column-gap: 2em; + -webkit-column-rule: 1px dotted #ccc; + -moz-column-rule: 1px dotted #ccc; + -o-column-rule: 1px dotted #ccc; + -ms-column-rule: 1px dotted #ccc; + column-rule: 1px dotted #ccc; + } + +} + +@media all and (max-width: 767px) and (min-width: 640px) { + body { + font-size: 115%; + + } + h1 { - color: #222; - font-size: 2.8em; - font-family: Baskerville, serif; - line-height: 1.2em; - font-weight: 900; - margin: 0; - padding: 0; - } - - h2 { - color: #222; - font-family: 'UnifrakturMaguntia', cursive; - font-size: 1.375em; - font-weight: 600; - font-style: italic; - line-height: 1.364em; - margin: 0 2%; - padding: 0 0 0.25em 0; - } - - h3 { - color: #222; - font-family: sans-serif; - font-size: 1.25em; - font-weight: 500; - font-style: normal; - line-height: 1.25em; - margin: 0 0; - padding: 0 0 .75em 0; + font-size: 2em; } h4 { - color: #888; - font-family: Arial, Verdana, sans-serif; - font-size: 1em; - font-weight: 200; - font-style: italic; - line-height: 1.5em; - margin: 0; + font-size: 0.813em; + text-align: left; + } + + .fluid { + width: 100%; + } + + header { + margin: 1% 2% 6% 2%; + padding: 0 0 2% 0 + } + + picture { + margin: 1% 2% 6% 2%; + padding: 5% 0 0 0 + } + + center { + margin: 0 2% 5% 2%; + } + + footer { + margin: 2% 2%; + } + + article { + position: relative; + margin: 4% 5%; + width: 90%; padding: 0; - text-align: right; + -webkit-column-count: 1; + -moz-column-count: 1; + -o-column-count: 1; + -ms-column-count: 1; + column-count: 1; } - p { - color: #444; - font-size: 1em; - line-height: 1.438em; - margin: 0 2%; - padding: 0 0 1.4em 0; - text-align: justify; - text-justify: inter-word; +} + +@media all and (max-width: 639px) and (min-width: 480px) { + body { + font-size: 100%; + } -/* "Containers" */ + h1 { + font-size: 1.85em; + } + + h4 { + font-size: 0.813em; + text-align: left; + } + + .fluid { + width: 100%; + } header { - color: #888; - border-bottom: 1px dotted #ccc; - -moz-column-span: all; - -ms-column-span: all; - -o-column-span: all; - -webkit-column-span: all; - column-span: all; - display: block; - margin: 0 0 2% 0; - position: relative; + margin: 1% 2% 6% 2%; + padding: 0 0 2% 0 } picture { - -moz-column-span: all; - -ms-column-span: all; - -o-column-span: all; - -webkit-column-span: all; - column-span: all; - border-top: 1px dotted #ccc; - display: block; - margin: 2% 0; - padding: 2% 0 0 0; - position: relative; + margin: 1% 2% 6% 2%; + padding: 5% 0 0 0 } center { - color: #222; - font-size: 2.125em; - font-weight: 400; - font-style: italic; - line-height: 1.412em; - text-align: center; - -moz-column-span: all; - -ms-column-span: all; - -o-column-span: all; - -webkit-column-span: all; - column-span: all; - border-top: 1px dotted #ccc; - border-bottom: 1px dotted #ccc; - display: block; - margin: 2% 0; - padding: 0.5em 0; - position: relative; + margin: 0 2% 5% 2%; } footer { - color: #444; - font-family: Arial, Verdana, sans-serif; - font-size: 1em; - line-height: 1.438em; - -moz-column-span: all; - -ms-column-span: all; - -o-column-span: all; - -webkit-column-span: all; - column-span: all; - border-top: 1px dotted #ccc; - border-bottom: 1px dotted #ccc; - display: block; - margin: 2% 0 1% 0; - padding: 0.75em; - position: relative; - text-align: center; + margin: 2% 2%; } -/* Images */ + article { + position: relative; + margin: 4% 5%; + width: 90%; + padding: 0; + -webkit-column-count: 1; + -moz-column-count: 1; + -o-column-count: 1; + -ms-column-count: 1; + column-count: 1; + } + +} + +@media all and (max-width: 479px) { + body { + font-size: 80%; + + } + + h1 { + font-size: 1.75em; + } - .full { - display: block; - margin: 0; - padding: 0; - width: 100%; + h4 { + font-size: 0.813em; + text-align: left; } .fluid { - display: block; - margin: 0 2%; - max-width: 96%; - padding: 0; + width: 100%; + } + header { + margin: 1% 2% 6% 2%; + padding: 0 0 2% 0 } - .caption { - background: #ddd; - color: #666; - font-family: Arial, Verdana, sans-serif; - font-size: 0.875em; - font-weight: 200; - line-height: 1.538em; - margin: 0 2% 2em 2%; - max-width: 96%; - padding: 0.35em; - text-align: center; + picture { + margin: 1% 2% 6% 2%; + padding: 5% 0 0 0 } -/* Breakepoints */ + center { + margin: 0 2% 5% 2%; + } - @media all and (min-width: 1920px) { - body {font-size: 115%;} - header {margin: 0 0.5% 2% 0.5% !important;} - picture {margin: 2% 0.5% !important;} - center {margin: 2% 0.5% !important;} - footer {margin: 2% 0.5% 1% 0.5% !important;} - article { - position: relative; - margin: auto; - width: 75%; - padding-left: 4%; - padding-right: 4%; - padding-top: 2em; - padding-bottom: 2em; - -webkit-column-count: 4; - -moz-column-count: 4; - -o-column-count: 4; - -ms-column-count: 4; - column-count: 4; - -webkit-column-gap: 2em; - -moz-column-gap: 2em; - -o-column-gap: 2em; - -ms-column-gap: 2em; - column-gap: 2em; - -webkit-column-rule: 1px dotted #ccc; - -moz-column-rule: 1px dotted #ccc; - -o-column-rule: 1px dotted #ccc; - -ms-column-rule: 1px dotted #ccc; - column-rule: 1px dotted #ccc; - } - - } - - @media all and (max-width: 1919px) and (min-width: 1600px) { - body {font-size: 100%;} - h1 {font-size: 3.8em;} - header {margin: 0 0.5% 2% 0.5% !important;} - picture {margin: 2% 0.5% !important;} - center {margin: 2% 0.5% !important;} - footer {margin: 2% 0.5% 1% 0.5% !important;} - article { - position: relative; - margin: auto; - width: 75%; - padding-left: 4%; - padding-right: 4%; - padding-top: 2em; - padding-bottom: 2em; - -webkit-column-count: 4; - -moz-column-count: 4; - -o-column-count: 4; - -ms-column-count: 4; - column-count: 4; - -webkit-column-gap: 2em; - -moz-column-gap: 2em; - -o-column-gap: 2em; - -ms-column-gap: 2em; - column-gap: 2em; - -webkit-column-rule: 1px dotted #ccc; - -moz-column-rule: 1px dotted #ccc; - -o-column-rule: 1px dotted #ccc; - -ms-column-rule: 1px dotted #ccc; - column-rule: 1px dotted #ccc; - } - - } - - @media all and (max-width: 1599px) and (min-width: 1440px) { - body {font-size: 125%;} - header {margin: 0 0.66% 2% 0.66% !important;} - picture {margin: 2% 0.66% !important;} - center {margin: 2% 0.66% !important;} - footer {margin: 2% 0.66% 1% 0.66% !important;} - article { - position: relative; - margin: auto; - width: 75%; - padding-left: 4%; - padding-right: 4%; - padding-top: 2em; - padding-bottom: 2em; - -webkit-column-count: 3; - -moz-column-count: 3; - -o-column-count: 3; - -ms-column-count: 3; - column-count: 3; - -webkit-column-gap: 2em; - -moz-column-gap: 2em; - -o-column-gap: 2em; - -ms-column-gap: 2em; - column-gap: 2em; - -webkit-column-rule: 1px dotted #ccc; - -moz-column-rule: 1px dotted #ccc; - -o-column-rule: 1px dotted #ccc; - -ms-column-rule: 1px dotted #ccc; - column-rule: 1px dotted #ccc; - } - - } - - @media all and (max-width: 1439px) and (min-width: 1281px) { - body {font-size: 115%;} - header {margin: 0 0.66% 2% 0.66% !important;} - picture {margin: 2% 0.66% !important;} - center {margin: 2% 0.66% !important;} - footer {margin: 2% 0.66% 1% 0.66% !important;} - article { - position: relative; - margin: auto; - width: 75%; - padding-left: 4%; - padding-right: 4%; - padding-top: 2em; - padding-bottom: 2em; - -webkit-column-count: 3; - -moz-column-count: 3; - -o-column-count: 3; - -ms-column-count: 3; - column-count: 3; - -webkit-column-gap: 2em; - -moz-column-gap: 2em; - -o-column-gap: 2em; - -ms-column-gap: 2em; - column-gap: 2em; - -webkit-column-rule: 1px dotted #ccc; - -moz-column-rule: 1px dotted #ccc; - -o-column-rule: 1px dotted #ccc; - -ms-column-rule: 1px dotted #ccc; - column-rule: 1px dotted #ccc; - } - - } - - @media all and (max-width: 1280px) and (min-width: 1140px) { - body {font-size: 100%;} - header {margin: 0 0.66% 2% 0.66% !important;} - picture {margin: 2% 0.66% !important;} - center {margin: 2% 0.66% !important;} - footer {margin: 2% 0.66% 1% 0.66% !important;} - article { - position: relative; - margin: auto; - width: 75%; - padding-left: 4%; - padding-right: 4%; - padding-top: 2em; - padding-bottom: 2em; - -webkit-column-count: 3; - -moz-column-count: 3; - -o-column-count: 3; - -ms-column-count: 3; - column-count: 3; - -webkit-column-gap: 2em; - -moz-column-gap: 2em; - -o-column-gap: 2em; - -ms-column-gap: 2em; - column-gap: 2em; - -webkit-column-rule: 1px dotted #ccc; - -moz-column-rule: 1px dotted #ccc; - -o-column-rule: 1px dotted #ccc; - -ms-column-rule: 1px dotted #ccc; - column-rule: 1px dotted #ccc; - } - - } - - @media all and (max-width: 1139px) and (min-width: 1024px) { - body {font-size: 85%;} - header {margin: 0 0.66% 2% 0.66% !important;} - picture {margin: 2% 0.66% !important;} - center {margin: 2% 0.66% !important;} - footer {margin: 2% 0.66% 1% 0.66% !important;} - article { - position: relative; - margin: auto; - width: 80%; - padding-left: 4%; - padding-right: 4%; - padding-top: 2em; - padding-bottom: 2em; - -webkit-column-count: 3; - -moz-column-count: 3; - -o-column-count: 3; - -ms-column-count: 3; - column-count: 3; - -webkit-column-gap: 2em; - -moz-column-gap: 2em; - -o-column-gap: 2em; - -ms-column-gap: 2em; - column-gap: 2em; - -webkit-column-rule: 1px dotted #ccc; - -moz-column-rule: 1px dotted #ccc; - -o-column-rule: 1px dotted #ccc; - -ms-column-rule: 1px dotted #ccc; - column-rule: 1px dotted #ccc; - } - - } - - @media all and (max-width: 1023px) and (min-width: 960px) { - body {font-size: 100%;} - header {margin: 0 1% 2% 1% !important;} - picture {margin: 2% 1% !important;} - center {margin: 2% 1% !important;} - footer {margin: 2% 1% 1% 1% !important;} - article { - position: relative; - margin: auto; - width: 85%; - padding-left: 4%; - padding-right: 4%; - padding-top: 2em; - padding-bottom: 2em; - -webkit-column-count: 2; - -moz-column-count: 2; - -o-column-count: 2; - -ms-column-count: 2; - column-count: 2; - -webkit-column-gap: 2em; - -moz-column-gap: 2em; - -o-column-gap: 2em; - -ms-column-gap: 2em; - column-gap: 2em; - -webkit-column-rule: 1px dotted #ccc; - -moz-column-rule: 1px dotted #ccc; - -o-column-rule: 1px dotted #ccc; - -ms-column-rule: 1px dotted #ccc; - column-rule: 1px dotted #ccc; - } - - } - - @media all and (max-width: 959px) and (min-width: 768px) { - body {font-size: 95%;} - header {margin: 0 1% 2% 1% !important;} - picture {margin: 2% 1% !important;} - center {margin: 2% 1% !important;} - footer {margin: 2% 1% 1% 1% !important;} - article { - position: relative; - margin: auto; - width: 90%; - padding-left: 4%; - padding-right: 4%; - padding-top: 2em; - padding-bottom: 2em; - -webkit-column-count: 2; - -moz-column-count: 2; - -o-column-count: 2; - -ms-column-count: 2; - column-count: 2; - -webkit-column-gap: 2em; - -moz-column-gap: 2em; - -o-column-gap: 2em; - -ms-column-gap: 2em; - column-gap: 2em; - -webkit-column-rule: 1px dotted #ccc; - -moz-column-rule: 1px dotted #ccc; - -o-column-rule: 1px dotted #ccc; - -ms-column-rule: 1px dotted #ccc; - column-rule: 1px dotted #ccc; - } - - } - - @media all and (max-width: 767px) and (min-width: 640px) { - body {font-size: 115%; background: #fff;} - h1 {font-size: 2em;} - h4 {font-size: 0.813em; text-align: left;} - .fluid {width: 100%;} - header {margin: 1% 2% 6% 2%; padding: 0 0 2% 0} - picture {margin: 1% 2% 6% 2%; padding: 5% 0 0 0} - center {margin: 0 2% 5% 2%;} - footer {margin: 2% 2%;} - article { - position: relative; - margin: 4% 5%; - width: 90%; - padding: 0; - -webkit-column-count: 1; - -moz-column-count: 1; - -o-column-count: 1; - -ms-column-count: 1; - column-count: 1; - } - - } - - @media all and (max-width: 639px) and (min-width: 480px) { - body {font-size: 100%; background: #fff;} - h1 {font-size: 1.85em;} - h4 {font-size: 0.813em; text-align: left;} - .fluid {width: 100%;} - header {margin: 1% 2% 6% 2%; padding: 0 0 2% 0} - picture {margin: 1% 2% 6% 2%; padding: 5% 0 0 0} - center {margin: 0 2% 5% 2%;} - footer {margin: 2% 2%;} - article { - position: relative; - margin: 4% 5%; - width: 90%; - padding: 0; - -webkit-column-count: 1; - -moz-column-count: 1; - -o-column-count: 1; - -ms-column-count: 1; - column-count: 1; - } - - } - - @media all and (max-width: 479px){ - body {font-size: 80%; background: #fff;} - h1 {font-size: 1.75em;} - h4 {font-size: 0.813em; text-align: left;} - .fluid {width: 100%;} - header {margin: 1% 2% 6% 2%; padding: 0 0 2% 0} - picture {margin: 1% 2% 6% 2%; padding: 5% 0 0 0} - center {margin: 0 2% 5% 2%;} - footer {margin: 2% 2%;} - article { - position: relative; - margin: 4% 3%; - width: 94%; - padding: 0; - -webkit-column-count: 1; - -moz-column-count: 1; - -o-column-count: 1; - -ms-column-count: 1; - column-count: 1; - } + footer { + margin: 2% 2%; + } + article { + position: relative; + margin: 4% 3%; + width: 94%; + padding: 0; + -webkit-column-count: 1; + -moz-column-count: 1; + -o-column-count: 1; + -ms-column-count: 1; + column-count: 1; } + +} \ No newline at end of file diff --git a/c1.html b/c1.html index d8994f29..209926a5 100644 --- a/c1.html +++ b/c1.html @@ -29,7 +29,7 @@
{{site.description}} ♢ {{page.head}}
{% if paginator.previous_page %} ♢ {% endif %} - Page {{ paginator.page }} of {{ paginator.total_pages }} + Page {{ paginator.page }} of {{ paginator.total_pages }} {% if paginator.next_page %} ♢ {% endif %} diff --git a/c2.html b/c2.html index 68051903..79b41c59 100644 --- a/c2.html +++ b/c2.html @@ -29,7 +29,7 @@
{{site.description}} ♢ {{page.head}}
{% if paginator.previous_page %} ♢ {% endif %} - Page {{ paginator.page }} of {{ paginator.total_pages }} + Page {{ paginator.page }} of {{ paginator.total_pages }} {% if paginator.next_page %} ♢ {% endif %}