emilis
/
tonnetz.eu
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Implemented black-on-white theme and printing stylesheet.

This commit is contained in:
Emilis Dambauskas 2020-12-12 17:50:25 +02:00
parent 08b46711af
commit 9910571f4e
1 changed files with 138 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
index.html
View File

@ -6,14 +6,24 @@
<title>Harmonorasi</title> <title>Harmonorasi</title>
<style type="text/css"> <style type="text/css">
html {
margin: 0;
padding: 0;
position: relative;
}
body { body {
background-color: #111; background-color: #111;
color: #eee; color: #eee;
font-family: serif; font-family: serif;
font-size: 100%; font-size: 100%;
height: 100%;
line-height: 1.6; line-height: 1.6;
/*
margin: 0;
padding: 0;
*/
} }
a { a {
@ -36,7 +46,8 @@ h1 {
font-size: 200%; font-size: 200%;
} }
input[type=checkbox] { input[type=checkbox],
input[type=radio] {
display: none; display: none;
} }
@ -55,7 +66,22 @@ li:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
/*- Main menu --------------------------------------------------------------- */ /*- Background -------------------------------------------------------------- */
#background {
background-color: #111;
bottom: 0;
content: '';
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: -3;
}
/*- Menu button ------------------------------------------------------------- */
#menu-button { #menu-button {
@ -86,11 +112,6 @@ li:last-child {
background-color: #9cf; background-color: #9cf;
} }
input#ui-menu:checked ~ #menu-button {
background-color: transparent;
color: #69c;
}
input#ui-menu:checked ~ #menu-button > .closed { input#ui-menu:checked ~ #menu-button > .closed {
display: none; display: none;
@ -99,18 +120,17 @@ input#ui-menu:checked ~ #menu-button > .opened {
display: inline; display: inline;
} }
input#ui-menu:checked ~ #menu-button:hover {
color: #9cf; /*- Main menu --------------------------------------------------------------- */
}
#menu { #menu {
background-color: rgba( 0, 0, 0, 0.9 ); background-color: rgba( 0, 0, 0, 0.9 );
border-radius: 1em; border-radius: 0 0 0 1em;
box-sizing: border-box;
display: none; display: none;
font-family: sans-serif; font-family: sans-serif;
font-size: 100%; max-width: 80%;
padding: 1em 2em; padding: 1em 2em;
position: absolute; position: absolute;
right: 0; right: 0;
@ -124,14 +144,14 @@ input#ui-menu:checked ~ #menu {
display: block; display: block;
} }
#menu > .toggle-interval { #menu > label {
display: block; display: block;
color: #9cf; color: #9cf;
padding: 0.5em 0; padding: 0.5em 0;
} }
#menu > .toggle-interval::before { #menu > label::before {
content: '❌'; content: '❌';
display: inline-block; display: inline-block;
@ -139,11 +159,13 @@ input#ui-menu:checked ~ #menu {
position: relative; position: relative;
} }
#menu > .toggle-interval:hover { #menu > label:hover {
background-color: #123; background-color: #123;
} }
input#theme-default:checked ~ #menu > .for-theme-default,
input#theme-bow:checked ~ #menu > .for-theme-bow,
input#i-p4:checked ~ #menu > .toggle-interval.for-i-p4, input#i-p4:checked ~ #menu > .toggle-interval.for-i-p4,
input#i-ma2:checked ~ #menu > .toggle-interval.for-i-ma2, input#i-ma2:checked ~ #menu > .toggle-interval.for-i-ma2,
input#i-ma6:checked ~ #menu > .toggle-interval.for-i-ma6, input#i-ma6:checked ~ #menu > .toggle-interval.for-i-ma6,
@ -154,6 +176,8 @@ input#i-tri:checked ~ #menu > .toggle-interval.for-i-tri {
font-weight: bold; font-weight: bold;
} }
input#theme-default:checked ~ #menu > .for-theme-default::before,
input#theme-bow:checked ~ #menu > .for-theme-bow::before,
input#i-p4:checked ~ #menu > .toggle-interval.for-i-p4::before, input#i-p4:checked ~ #menu > .toggle-interval.for-i-p4::before,
input#i-ma2:checked ~ #menu > .toggle-interval.for-i-ma2::before, input#i-ma2:checked ~ #menu > .toggle-interval.for-i-ma2::before,
input#i-ma6:checked ~ #menu > .toggle-interval.for-i-ma6::before, input#i-ma6:checked ~ #menu > .toggle-interval.for-i-ma6::before,
@ -422,10 +446,96 @@ input#i-tri:checked ~ main > .block > .column > .int.i-tri {
visibility: visible; visibility: visible;
} }
/*- Themes ------------------------------------------------------------------ */
input#theme-bow:checked ~ #background {
background-color: white;
}
input#theme-bow:checked ~ #menu-button {
background-color: #ccc;
}
input#theme-bow:checked ~ #menu {
background-color: #eee;
color: #222;
}
input#theme-bow:checked ~ #menu a,
input#theme-bow:checked ~ #menu > label {
color: #036;
}
input#theme-bow:checked ~ #menu a:hover,
input#theme-bow:checked ~ #menu > label:hover {
background-color: #ccc;
}
input#theme-bow:checked ~ main > .block > .column > label {
color: #333;
border-color: #666;
}
input#theme-bow:checked ~ main > .block > .column > label:hover {
box-shadow: 0 0 6px black;
}
input#theme-bow:checked ~ main > .block > .column > .int {
background-color: #666;
}
input#theme-bow:checked ~ main > .block > .column > .int.i-tri {
background-color: transparent;
border-color: #666;
}
/*- Printing ---------------------------------------------------------------- */
@media print {
@page {
margin: 0;
}
body {
font-size: 5pt;
line-height: 1;
}
#background,
#menu-button,
#menu,
.int {
display: none !important;
}
main > .block > .column {
margin-right: 20pt !important;
}
main > .block > .column:nth-child(2) { margin-top: 30pt; }
main > .block > .column:nth-child(3) { margin-top: 60pt; }
main > .block > .column:nth-child(4) { margin-top: 20pt; }
main > .block > .column:nth-child(5) { margin-top: 50pt; }
main > .block > .column:nth-child(6) { margin-top: 10pt; }
main > .block > .column:nth-child(7) { margin-top: 40pt; }
main > .block > .column > label {
border: 1pt solid #666 !important;
height: 20pt !important;
line-height: 20pt !important;
margin-bottom: 50pt !important;
width: 20pt !important;
}
}
</style> </style>
</head> </head>
<body> <body>
<input type="checkbox" id="ui-menu" checked> <input type="checkbox" id="ui-menu" checked>
<input type="radio" name="theme" id="theme-default" checked>
<input type="radio" name="theme" id="theme-bow">
<input type="checkbox" id="i-p4" checked> <input type="checkbox" id="i-p4" checked>
<input type="checkbox" id="i-ma2" checked> <input type="checkbox" id="i-ma2" checked>
<input type="checkbox" id="i-ma6" checked> <input type="checkbox" id="i-ma6" checked>
@ -433,6 +543,7 @@ input#i-tri:checked ~ main > .block > .column > .int.i-tri {
<input type="checkbox" id="i-ma3" checked> <input type="checkbox" id="i-ma3" checked>
<input type="checkbox" id="i-ma7" checked> <input type="checkbox" id="i-ma7" checked>
<input type="checkbox" id="i-tri" checked> <input type="checkbox" id="i-tri" checked>
<div id="background"></div>
<label id="menu-button" for="ui-menu"> <label id="menu-button" for="ui-menu">
<span class="opened">X</span> <span class="opened">X</span>
<span class="closed">Menu</span> <span class="closed">Menu</span>
@ -455,6 +566,10 @@ input#i-tri:checked ~ main > .block > .column > .int.i-tri {
<li>Highlight a major scale (show only P5, M3 & m3 intervals). Highlight other scales.</li> <li>Highlight a major scale (show only P5, M3 & m3 intervals). Highlight other scales.</li>
<li>Find roots of chords. Find chords with multiple roots. Find chords without roots.</li> <li>Find roots of chords. Find chords with multiple roots. Find chords without roots.</li>
</ul> </ul>
<h3>Learn more</h3>
<ul>
<li><a href="https://en.wikipedia.org/wiki/Tonnetz">Wikipedia: Tonnetz</a></li>
</ul>
<h2>Show/hide intervals:</h2> <h2>Show/hide intervals:</h2>
<label class="toggle-interval for-i-p4" for="i-p4"> <label class="toggle-interval for-i-p4" for="i-p4">
P5 & P4: perfect 5th and perfect 4th P5 & P4: perfect 5th and perfect 4th
@ -477,10 +592,13 @@ input#i-tri:checked ~ main > .block > .column > .int.i-tri {
<label class="toggle-interval for-i-mi2" for="i-mi2"> <label class="toggle-interval for-i-mi2" for="i-mi2">
m2 (M7): minor 2nd (major 7th) m2 (M7): minor 2nd (major 7th)
</label> </label>
<h2>Learn more</h2> <h2>Color scheme:</h2>
<ul> <label class="change-theme for-theme-default" for="theme-default">
<li><a href="https://en.wikipedia.org/wiki/Tonnetz">Wikipedia: Tonnetz</a></li> Colors on black (default)
</ul> </label>
<label class="change-theme for-theme-bow" for="theme-bow">
Black on white
</label>
</aside> </aside>
<main> <main>
<input type="checkbox" id="c-a"> <input type="checkbox" id="c-a">