dumb/static/style.css
2022-10-08 22:46:48 +01:00

152 lines
2.4 KiB
CSS

/* inter-regular - latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: local(''),
url('/static/fonts/inter-v11-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('/static/fonts/inter-v11-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* inter-500 - latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
src: local(''),
url('/static/fonts/inter-v11-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('/static/fonts/inter-v11-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* inter-700 - latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
src: local(''),
url('/static/fonts/inter-v11-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('/static/fonts/inter-v11-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
* {
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.5rem;
font-family: inter;
background-color: #f9f9f9;
}
#lyrics {
color: #171717;
line-height: 2.5rem;
}
#lyrics a {
background-color: #ddd;
color: inherit;
}
#lyrics a:hover {
background-color: #ccc;
}
#nav {
font-size: 2.5rem;
text-align: center;
font-weight: 700;
background-color: #FFCD38;
color: #1B1A17;
padding: 0.5rem;
letter-spacing: 1rem;
font-family: monospace;
}
a {
text-decoration: none;
}
#metadata {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
#metadata h1 {
font-size: 2rem;
color: #171717;
}
#metadata h2 {
font-size: 1.4rem;
color: #1E1E1E;
font-weight: 500;
}
#metadata > img {
width: 20rem;
border-radius: 3px;
box-shadow: 0 1px 1px #ddd;
}
#container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
padding: 5rem 10rem;
gap: 5rem;
}
#credits {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
#title {
font-size: 2rem;
color: #1B1A17;
}
#credits summary {
font-size: 1.4rem;
cursor: pointer;
color: #1E1E1E;
}
#credits p {
font-size: 1.3rem;
padding: 0.5rem;
color: #171717;
}
#info {
display: flex;
flex-direction: column;
gap: 2rem;
}
#about {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
#about p {
font-size: 1.4rem;
color: #171717;
line-height: 1.8rem;
cursor: pointer;
}
.hidden {
display: none;
}