themeswitcher actually seems to be working + styling cleanup for themeswitcher

This commit is contained in:
Peter Molnar 2018-11-16 22:39:12 +00:00
parent 534daff81a
commit f9f540d034
3 changed files with 71 additions and 88 deletions

View file

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

View file

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

View file

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