Improved copy and UX of the menu.
This commit is contained in:
parent
aa5db4dd29
commit
08b46711af
25
index.html
25
index.html
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue