body {
background-color: #f0f0f0;
font-family: Roboto, sans-serif;
margin: 8px;
display: flex;
flex-direction: column;
row-gap: 10px;
height: 100vh;
}
header {
margin: 0 15px;
.container {
display: flex;
justify-content: start;
gap: 2em;
align-items: center;
}
.logo {
font-family: Roboto, sans-serif;
font-size: 1.5em;
font-weight: bold;
text-decoration: none;
color: black;
}
nav {
ul {
list-style-type: none;
padding: 0;
display: flex;
li {
display: inline-block;
margin: 0 10px;
border-radius: 5px;
padding: 10px;
}
.active {
background-color: lightgray;
}
}
a {
font-weight: bold;
text-decoration: none;
color: black;
}
}
select {
border-radius: 5px;
padding: 10px;
font-weight: bold;
font-size: 1em;
}
}
#main {
display: flex;
flex-direction: row;
column-gap: 10px;
flex: 1.0;
#navigation {
width: 200px;
background-color: white;
padding: 10px;
border-radius: 5px;
ul {
list-style-type: none;
padding: 0;
li {
margin: 5px 0;
a {
color: #2b2b2b;
text-decoration: none;
&:hover {
}
}
.active {
font-weight: bold;
color: hsl(195 89.2% 71%);
}
}
li.active a {
font-weight: bold;
text-decoration: underline;
}
}
}
#content {
background-color: white;
padding: 10px;
border-radius: 5px;
flex: 1.0;
}
}
#navigation {
ul {
list-style-type: none;
padding: 0;
li {
margin: 0 10px;
a {
color: #2b2b2b;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
li.active a {
font-weight: bold;
text-decoration: underline;
}
}
div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 2px;
a {
color: #2b2b2b;
text-decoration: none;
padding: 5px;
border: 1px solid #e0e0e0;
&:hover {
text-decoration: underline;
}
}
}
}
.note-list {
display: flex;
flex-wrap: wrap;
row-gap: 5px;
column-gap: 5px;
padding: 10px;
background-color: white;
border-radius: 10px;
div {
padding: 5px 10px;
border-radius: 5px;
vertical-align: middle;
.note {
font-weight: bold;
margin-right: 5px;
}
.interval {
color: #555;
font-style: italic;
}
}
}
.note-select {
display: flex;
flex-wrap: nowrap;
padding-bottom: 5px;
margin-bottom: 5px;
padding: 10px;
border-bottom: 1px solid #e0e0e0;
span {
margin: 0 5px;
padding: 5px;
background-color: #e0e0e0;
border-radius: 5px;
cursor: pointer;
vertical-align: middle;
a {
color: #2b2b2b;
text-decoration: none;
padding: 5px;
height: 100%;
&:hover {
text-decoration: underline;
}
}
}
.selected {
background-color: hsl(195 89.2% 71%);
font-weight: bold;
}
}
#chord-diagrams {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
div {
padding: 10px;
border-radius: 10px;
h3 {
margin-top: 0;
margin-bottom: 5px;
text-align: center;
}
svg {
width: 100%;
height: auto;
}
}
}
footer {
text-align: center;
span {
margin: 1em;
}
a {
color: black;
}
}
.interval_unison {
background-color: #d3dcf8;
}
.interval_minorsecond {
background-color: #f6d5e0;
}
.interval_majorsecond {
background-color: #e8dfec;
}
.interval_minorthird {
background-color: #d1eafa;
}
.interval_majorthird {
background-color: #d6f5e4;
}
.interval_perfectfourth {
background-color: #d7f4f2;
}
.interval_augmentedfourth {
background-color: #ffe6cc;
}
.interval_perfectfifth {
background-color: #e4e0eb;
}
.interval_minorsixth {
background-color: #ffccd7;
}
.interval_majorsixth {
background-color: #d6f4f5;
}
.interval_minorseventh {
background-color: #d5f2f6;
}
.interval_majorseventh {
background-color: #fff0cc;
}
h1.page-title {
color: white;
}