themeswitcher actually seems to be working + styling cleanup for themeswitcher
This commit is contained in:
parent
534daff81a
commit
f9f540d034
3 changed files with 71 additions and 88 deletions
|
@ -58,6 +58,12 @@
|
||||||
notes
|
notes
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
<li>
|
||||||
|
<a title="follow petermolnar.net" href="{{ site.url }}/follow/">
|
||||||
|
<svg width="16" height="16"><use xlink:href="#icon-feed" /></svg>
|
||||||
|
follow
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
@ -85,15 +91,6 @@
|
||||||
<input type="submit" value="➡" />
|
<input type="submit" value="➡" />
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<p class="follow">
|
|
||||||
<a title="follow petermolnar.net" href="{{ site.url }}/follow/">
|
|
||||||
<svg width="16" height="16">
|
|
||||||
<use xlink:href="#icon-feed" />
|
|
||||||
</svg>
|
|
||||||
follow
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
|
@ -15,15 +15,11 @@ body {
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
background-color: #222;
|
background-color: #222;
|
||||||
font-size: 100%;
|
|
||||||
line-height: 1.3em;
|
line-height: 1.3em;
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
@ -92,6 +88,7 @@ figcaption {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
video,
|
||||||
figure img {
|
figure img {
|
||||||
display: block;
|
display: block;
|
||||||
max-height: 98vh;
|
max-height: 98vh;
|
||||||
|
@ -102,16 +99,16 @@ figure img {
|
||||||
border: 1px solid #000;
|
border: 1px solid #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
figcaption dt {
|
figcaption dd, label {
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
figcaption dd {
|
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin:0.3em 0.3em;
|
margin:0.3em 0.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
padding-left: 1.3em;
|
padding-left: 1.3em;
|
||||||
}
|
}
|
||||||
|
@ -131,33 +128,6 @@ input, button, label {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 0.8em;
|
|
||||||
cursor: pointer;
|
|
||||||
margin: 0 0.3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme {
|
|
||||||
margin: 0 0.3em;
|
|
||||||
display: none;
|
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme input {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme input + label::before {
|
|
||||||
content: '\2718';
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0 0.1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme input:checked + label::before {
|
|
||||||
content: '\2714';
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
input {
|
||||||
border-bottom: 3px solid #ccc;
|
border-bottom: 3px solid #ccc;
|
||||||
}
|
}
|
||||||
|
@ -175,7 +145,7 @@ nav li {
|
||||||
|
|
||||||
code, pre, q, figcaption {
|
code, pre, q, figcaption {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
font-size: 0.94em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
code, pre {
|
code, pre {
|
||||||
|
@ -238,20 +208,10 @@ body > footer {
|
||||||
background-color: #111;
|
background-color: #111;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > header form {
|
|
||||||
padding: 0.2em 0 0 0;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
body > header p {
|
body > header p {
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > svg,
|
|
||||||
body > script {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
body > header {
|
body > header {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
@ -260,12 +220,19 @@ body > header nav {
|
||||||
margin: 0.3em 0;
|
margin: 0.3em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body > header form {
|
||||||
|
padding: 0.6em;
|
||||||
|
color: #ccc;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
body > header a {
|
body > header a {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
border-bottom: 3px solid transparent;
|
border-bottom: 3px solid transparent;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
padding-bottom: 0.3em;
|
padding-bottom: 0.3em;
|
||||||
|
font-size: 0.9em;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > header a:hover,
|
body > header a:hover,
|
||||||
|
@ -281,6 +248,14 @@ body > header a svg {
|
||||||
margin: 0.1em auto;
|
margin: 0.1em auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.theme input + label {
|
||||||
|
border-bottom: 3px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme input:checked + label {
|
||||||
|
border-bottom: 3px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
body > main,
|
body > main,
|
||||||
body > nav,
|
body > nav,
|
||||||
body > footer > div {
|
body > footer > div {
|
||||||
|
@ -315,10 +290,6 @@ body > footer img {
|
||||||
width: 1em;
|
width: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > footer h2 {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
body > footer > ul >li > a > span {
|
body > footer > ul >li > a > span {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
|
@ -337,11 +308,17 @@ body > footer > ul >li > a > span {
|
||||||
margin: 0 0 0 0.1em;
|
margin: 0 0 0 0.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-feed h1 {
|
figcaption dt,
|
||||||
|
body > svg,
|
||||||
|
body > script,
|
||||||
|
body > footer h2,
|
||||||
|
.h-feed h1,
|
||||||
|
.theme,
|
||||||
|
.theme input {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 56em) {
|
@media all and (min-width: 58em) {
|
||||||
body > header {
|
body > header {
|
||||||
text-align: unset;
|
text-align: unset;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -356,4 +333,10 @@ body > footer > ul >li > a > span {
|
||||||
body > header a svg {
|
body > header a svg {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
body > header form {
|
||||||
|
padding: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
|
@ -3,15 +3,12 @@ var ALT_THEME = 'light';
|
||||||
var STORAGE_KEY = 'theme';
|
var STORAGE_KEY = 'theme';
|
||||||
var colorscheme = document.getElementsByName('colorscheme');
|
var colorscheme = document.getElementsByName('colorscheme');
|
||||||
|
|
||||||
function setTheme(e) {
|
function indicateTheme(mode) {
|
||||||
var mode = e.target.value;
|
for(var i = colorscheme.length; i--; ) {
|
||||||
if (mode == 'auto') {
|
if(colorscheme[i].value == mode) {
|
||||||
localStorage.removeItem(STORAGE_KEY);
|
colorscheme[i].checked = true;
|
||||||
}
|
}
|
||||||
else {
|
|
||||||
localStorage.setItem(STORAGE_KEY, mode);
|
|
||||||
}
|
}
|
||||||
applyTheme(mode);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function applyTheme(mode) {
|
function applyTheme(mode) {
|
||||||
|
@ -22,32 +19,38 @@ function applyTheme(mode) {
|
||||||
else {
|
else {
|
||||||
st.setAttribute('media', 'speech');
|
st.setAttribute('media', 'speech');
|
||||||
}
|
}
|
||||||
|
|
||||||
for(var i = colorscheme.length; i--; ) {
|
|
||||||
if(colorscheme[i].value == mode) {
|
|
||||||
colorscheme[i].checked = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function mqlTheme(e) {
|
function setTheme(e) {
|
||||||
if (localStorage.getItem(STORAGE_KEY) != null) {
|
var mode = e.target.value;
|
||||||
return false;
|
if (mode == 'auto') {
|
||||||
}
|
localStorage.removeItem(STORAGE_KEY);
|
||||||
if (e.matches) {
|
|
||||||
applyTheme(ALT_THEME);
|
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
applyTheme(DEFAULT_THEME);
|
localStorage.setItem(STORAGE_KEY, mode);
|
||||||
}
|
}
|
||||||
|
var e = window.matchMedia('(prefers-color-scheme: ' + ALT_THEME + ')');
|
||||||
|
autoTheme(e);
|
||||||
}
|
}
|
||||||
|
|
||||||
var current = localStorage.getItem(STORAGE_KEY);
|
function autoTheme(e) {
|
||||||
if (current == null) { current = 'auto'; }
|
var current = localStorage.getItem(STORAGE_KEY);
|
||||||
applyTheme(current);
|
var mode = 'auto';
|
||||||
|
var indicate = 'auto';
|
||||||
|
if ( current != null) {
|
||||||
|
indicate = mode = current;
|
||||||
|
}
|
||||||
|
else if (e.matches) {
|
||||||
|
mode = ALT_THEME;
|
||||||
|
}
|
||||||
|
applyTheme(mode);
|
||||||
|
indicateTheme(indicate);
|
||||||
|
}
|
||||||
|
|
||||||
var mql = window.matchMedia('(prefers-color-scheme: ' + ALT_THEME + ')');
|
var mql = window.matchMedia('(prefers-color-scheme: ' + ALT_THEME + ')');
|
||||||
mql.addListener(mqlTheme);
|
autoTheme(mql);
|
||||||
|
mql.addListener(autoTheme);
|
||||||
|
|
||||||
for(var i = colorscheme.length; i--; ) {
|
for(var i = colorscheme.length; i--; ) {
|
||||||
colorscheme[i].onclick = setTheme;
|
colorscheme[i].onclick = setTheme;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue