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;
}
h1, h2, h3, h4, h5, h6 {
font-family: serif;
}
h1 {
font-size: 200%;
}
input[type=checkbox] {
display: none;
@ -57,7 +66,7 @@ li:last-child {
font-family: sans-serif;
font-size: 200%;
font-weight: bold;
padding: 1em;
padding: 0.5em 1em;
position: absolute;
right: 0;
text-align: center;
@ -72,6 +81,10 @@ li:last-child {
display: none;
}
#menu-button:hover {
background-color: #9cf;
}
input#ui-menu:checked ~ #menu-button {
@ -86,6 +99,10 @@ input#ui-menu:checked ~ #menu-button > .opened {
display: inline;
}
input#ui-menu:checked ~ #menu-button:hover {
color: #9cf;
}
#menu {
@ -422,7 +439,7 @@ input#i-tri:checked ~ main > .block > .column > .int.i-tri {
</label>
<aside id="menu">
<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>
<h3>Try these out:</h3>
<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">
m2 (M7): minor 2nd (major 7th)
</label>
<h2>Links</h2>
<h2>Learn more</h2>
<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>
</aside>
<main>