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

Improved copy and UX of the menu.

This commit is contained in:
Emilis Dambauskas 2020-12-12 16:14:03 +02:00
parent aa5db4dd29
commit 08b46711af
1 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
index.html
View File

@ -27,6 +27,15 @@ a:hover {
background-color: #123; background-color: #123;
} }
h1, h2, h3, h4, h5, h6 {
font-family: serif;
}
h1 {
font-size: 200%;
}
input[type=checkbox] { input[type=checkbox] {
display: none; display: none;
@ -57,7 +66,7 @@ li:last-child {
font-family: sans-serif; font-family: sans-serif;
font-size: 200%; font-size: 200%;
font-weight: bold; font-weight: bold;
padding: 1em; padding: 0.5em 1em;
position: absolute; position: absolute;
right: 0; right: 0;
text-align: center; text-align: center;
@ -72,6 +81,10 @@ li:last-child {
display: none; display: none;
} }
#menu-button:hover {
background-color: #9cf;
}
input#ui-menu:checked ~ #menu-button { input#ui-menu:checked ~ #menu-button {
@ -86,6 +99,10 @@ input#ui-menu:checked ~ #menu-button > .opened {
display: inline; display: inline;
} }
input#ui-menu:checked ~ #menu-button:hover {
color: #9cf;
}
#menu { #menu {
@ -422,7 +439,7 @@ input#i-tri:checked ~ main > .block > .column > .int.i-tri {
</label> </label>
<aside id="menu"> <aside id="menu">
<h1>Harmonorasi</h1> <h1>Harmonorasi</h1>
<p>A tool to see harmonic relationships between musical pitch classes.</p> <p>A tool to view harmonic relationships between musical pitch classes.</p>
<p>Click on the circles to highlight them and see the intervals.</p> <p>Click on the circles to highlight them and see the intervals.</p>
<h3>Try these out:</h3> <h3>Try these out:</h3>
<ul> <ul>
@ -460,9 +477,9 @@ 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>Links</h2> <h2>Learn more</h2>
<ul> <ul>
<li><a href="https://en.wikipedia.org/wiki/Tonnetz">Tonnetz</a></li> <li><a href="https://en.wikipedia.org/wiki/Tonnetz">Wikipedia: Tonnetz</a></li>
</ul> </ul>
</aside> </aside>
<main> <main>