206 lines
3.2 KiB
CSS
206 lines
3.2 KiB
CSS
cite {
|
|
display: block;
|
|
}
|
|
|
|
cite::before {
|
|
content: "—";
|
|
}
|
|
|
|
th {
|
|
text-align: right;
|
|
}
|
|
|
|
main {
|
|
display: grid;
|
|
}
|
|
|
|
#the-quote {
|
|
grid-column: 2;
|
|
}
|
|
|
|
.intro {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
|
|
#country-list {
|
|
grid-column: 1 / 3;
|
|
grid-row: 2;
|
|
justify-self: left;
|
|
}
|
|
|
|
#permalink {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
margin-left: auto;
|
|
}
|
|
|
|
#summary {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
|
|
@media (max-width: 40rem) {
|
|
#the-quote {
|
|
grid-column: 2;
|
|
}
|
|
|
|
.intro {
|
|
grid-column: 1 / 3;
|
|
grid-row: 2;
|
|
}
|
|
|
|
#country-list {
|
|
grid-column: 1 / 3;
|
|
grid-row: 3;
|
|
}
|
|
|
|
#permalink {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
margin-left: auto;
|
|
}
|
|
|
|
#summary {
|
|
grid-column: 1 /3;
|
|
grid-row: 2;
|
|
}
|
|
}
|
|
|
|
.intro {
|
|
margin: 3em;
|
|
font-family: MontserratAlternates;
|
|
font-weight: 300;
|
|
font-size: 1.2rem;
|
|
line-height: 1.7rem;
|
|
}
|
|
|
|
#country-list input {
|
|
margin: 0.2em 0.5em;
|
|
}
|
|
|
|
input:focus {
|
|
box-shadow: 0 0 0.2em 0.2em hsl(240 100% 70%);
|
|
}
|
|
|
|
@font-face {
|
|
font-family: MontserratAlternates;
|
|
src: url(MontserratAlternates-Light.ttf);
|
|
font-weight: 300;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: MontserratAlternates;
|
|
src: url(MontserratAlternates-Regular.ttf);
|
|
font-weight: 400;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: MontserratAlternates;
|
|
src: url(MontserratAlternates-Medium.ttf);
|
|
font-weight: 500;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: MontserratAlternates;
|
|
src: url(MontserratAlternates-Bold.ttf);
|
|
font-weight: 700;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: MontserratAlternates;
|
|
src: url(MontserratAlternates-LightItalic.ttf);
|
|
font-weight: 300;
|
|
font-style: italic;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: MontserratAlternates;
|
|
src: url(MontserratAlternates-MediumItalic.ttf);
|
|
font-weight: 500;
|
|
font-style: italic;
|
|
}
|
|
|
|
th {
|
|
vertical-align: baseline;
|
|
font-family: MontserratAlternates;
|
|
font-weight: 400;
|
|
font-color: #444;
|
|
}
|
|
|
|
td {
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
body {
|
|
background-image: url("guitar.png");
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
text-shadow: 0 0 1.0em #FFFFFF,
|
|
0 0 0.2em #FFFFFF;
|
|
font-family: MontserratAlternates;
|
|
font-weight: 300;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.band {
|
|
font-family: MontserratAlternates;
|
|
font-weight: 300;
|
|
white-space: nowrap;
|
|
}
|
|
.band.by_user {
|
|
font-weight: 500;
|
|
font-style: italic;
|
|
}
|
|
|
|
table {
|
|
border-spacing: 1em 0.3em;
|
|
}
|
|
|
|
#permalink a {
|
|
text-decoration: none;
|
|
color: #444;
|
|
padding: 0.5em;
|
|
border: 1px dotted black;
|
|
}
|
|
|
|
#summary {
|
|
margin-left: 3em;
|
|
}
|
|
|
|
.buttonrow {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.btn {
|
|
margin-top: 2em;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
text-decoration: none;
|
|
color: #000;
|
|
border: solid 1px #888;
|
|
background-color: #CCD;
|
|
padding: 1em;
|
|
border-radius: 0.5em;
|
|
box-shadow: 0 0 0.3em 0.2em hsla(0, 0%, 70%, 0.5);
|
|
font-weight: 700;
|
|
display: inline-block;
|
|
}
|
|
|
|
.btn:focus, .btn:hover {
|
|
background-color: #DDF;
|
|
border: solid 1px #88F;
|
|
box-shadow: 0 0 0.3em 0.4em hsla(240, 30%, 70%, 0.5);
|
|
}
|
|
|
|
p {
|
|
background-color: #FFFFFF80;
|
|
}
|
|
|
|
/*
|
|
vim: sw=4
|
|
*/
|
|
|