96 lines
1.7 KiB
CSS
96 lines
1.7 KiB
CSS
@font-face {
|
|
font-family: 'IBM Plex Mono';
|
|
src: url('/static/fonts/IBMPlexMono-Regular.ttf');
|
|
font-weight: 400;
|
|
}
|
|
@font-face {
|
|
font-family: 'IBM Plex Mono';
|
|
src: url('/static/fonts/IBMPlexMono-SemiBold.ttf');
|
|
font-weight: 600;
|
|
}
|
|
@font-face {
|
|
font-family: 'IBM Plex Mono';
|
|
src: url('/static/fonts/IBMPlexMono-Bold.ttf');
|
|
font-weight: 700;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
font-size: 14px;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
}
|
|
main {
|
|
width: 100%;
|
|
max-width: 60rem;
|
|
margin: 0 auto;
|
|
padding: 8px;
|
|
}
|
|
h1 {
|
|
font-weight: 600;
|
|
}
|
|
p {
|
|
display: block;
|
|
padding-bottom: 4px;
|
|
unicode-bidi: embed;
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
white-space: pre;
|
|
overflow-x: auto;
|
|
}
|
|
a {
|
|
color: #4a34e1;
|
|
}
|
|
a.button {
|
|
padding: 6px 8px;
|
|
color: #4a34e1;
|
|
border: solid 1px #4a34e1;
|
|
border-radius: 3px;
|
|
text-decoration: none;
|
|
}
|
|
a.button:focus, a.button:hover {
|
|
color: #fff;
|
|
background-color:#4a34e1;
|
|
}
|
|
|
|
span.section {
|
|
color: #777;
|
|
text-transform: uppercase;
|
|
}
|
|
span.section::before {
|
|
content: '[';
|
|
}
|
|
span.section::after {
|
|
content: ']';
|
|
}
|
|
span.chords {
|
|
color: #9740ff;
|
|
}
|
|
|
|
.explorer {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
|
grid-gap: 8px;
|
|
}
|
|
.explorer--directories a.button {
|
|
color: #0a6f52;
|
|
border: solid 1px #0a6f52;
|
|
}
|
|
.explorer--directories a.button:focus, .explorer--directories a.button:hover {
|
|
color: #fff;
|
|
background-color:#0a6f52;
|
|
}
|
|
.explorer--audio a.button {
|
|
color: #bd5900;
|
|
border: solid 1px #bd5900;
|
|
}
|
|
.explorer--audio a.button:focus, .explorer--audio a.button:hover {
|
|
color: #fff;
|
|
background-color:#bd5900;
|
|
}
|
|
|
|
audio {
|
|
width: 100%;
|
|
} |