slug: bandnames
translates: bandnames
lang: en
title: Good names for a band
pageCreated: "2021-08-19"
pageUpdated: "2022-08-30"
extends ../../views/layout.pug
append presets
- hasSidenotes = false
- linkIcons = false
- hasComments = false
append head
style.
:root {
--background: #201404;
--accent: #FFFCDD;
}
body {
background: url("/bandnames/tileable-wood-coloured.png"), var(--background);
font-family: var(--serif);
}
main {
max-inline-size: 85ch;
}
h1 {
font-size: 2.5rem;
font-weight: normal;
}
ul#bandnames {
padding: 0;
}
ul#bandnames li {
--bg-image: url("/bandnames/beige-paper.png");
display: block;
color: #111D;
background: var(--bg-image), var(--bg-color);
text-align: center;
margin: 0.5em;
padding: 1.5rem 0;
text-shadow: 0px 2px 1px #FFF5, -1px -1px 1px #0001;
box-shadow: 0 4px 5px #0008;
transition: all .25s;
position: relative;
}
ul#bandnames li:hover, ul#bandnames li:focus {
transform: none !important;
z-index: 100;
}
ul#bandnames li > strong {
color: inherit;
font-family: Impact;
font-size: min(4rem, 10vw);
display: block;
line-height: 1.1;
}
ul#bandnames header, ul#bandnames footer {
text-align: center;
font-family: var(--gill-sans);
line-height: 1.1;
}
header strong, footer strong {
font-weight: normal;
color: inherit;
text-transform: uppercase;
font-style: normal;
letter-spacing: .2em;
}
ul#bandnames #de-oerknal {
--bg-color: #FFFCDD;
transform: rotate(-1deg);
}
ul#bandnames #de-oerknal > strong {
font-family: Helvetica Neue, Helvetica Now, Helvetica, Arial, Liberation Sans, Arimo, sans-serif;
letter-spacing: -.1em;
}
ul#bandnames #unisex-jumpsuit {
--bg-color: #CCE8FF;
transform: rotate(.5deg);
}
ul#bandnames #stephensons-rocket {
--bg-color: #F0F0F0;
transform: rotate(-0.2deg);
}
ul#bandnames #stephensons-rocket > strong {
font-family: Ferrite Core DX;
font-size: min(3.5rem, 7.5vw);
line-height: .7;
margin-block-end: .3em;
color: #2299FF;
font-style: italic;
}
ul#bandnames #paradice-death {
transform: rotate(2deg);
--rotation: 135deg;
--bg-image: linear-gradient(135deg, transparent 10%, #FFF2 20%, transparent 30%);
--bg-color: #111;
color: #FFFE;
text-shadow: 0px 2px 0px #282828;
padding: 1.5rem 1rem;
padding-block-end: 2rem;
}
ul#bandnames #paradice-death:hover, ul#bandnames #paradice-death:focus {
--rotation: 137deg;
background: linear-gradient(137deg, transparent 10%, #FFF2 20%, transparent 30%), #111;
}
ul#bandnames #paradice-death header {
text-align: start;
}
ul#bandnames #paradice-death header strong {
float: right;
}
ul#bandnames #paradice-death > strong {
font-weight: normal;
font-family: UnifrakturCook, UnifrakturMaguntia, Fraktur, blackletter, fantasy;
color: #E20;
}
ul#bandnames #tiresias-army {
--bg-color: #EEE0FF;
transform: rotate(-.333deg);
}
ul#bandnames #tiresias-army > strong {
text-transform: uppercase;
font-weight: normal;
font-family: var(--serif);
letter-spacing: 4px;
}
ul#bandnames #vantapink {
--bg-color: #040002;
--bg-image: none;
text-transform: uppercase;
color: #F0A;
transform: rotate(1deg);
text-shadow: none;
}
ul#bandnames #vantapink > footer {
font-family: Helvetica Neue, Arial, sans-serif;
font-variant-numeric: lining-nums;
}
ul#bandnames #vantapink > strong {
font-family: Helvetica Neue, Arial, sans-serif;
}
ul#bandnames #circadia {
--bg-image: none;
--bg-color: #EFFFFD;
color: #93AFAB;
}
ul#bandnames #circadia > strong {
font-family: Ferrite Core DX;
color: #FF4F9B;
text-shadow: 0 0 10px #FF4F9B88;
}
ul#bandnames #vietcong {
--bg-image: url("/bandnames/dark_paper.png");
--bg-color: #111;
color: yellow;
text-shadow: none;
}
ul#bandnames #toincoss {
--bg-color: #FAFAF8;
color: #080808;
}
ul#bandnames #toincoss > :is(header, footer, strong) {
font-family: Calibri, var(--system);
}
ul#bandnames #vietcong > footer {
font-family: Impact;
letter-spacing: 1px;
}
ul#bandnames #problemattic {
--bg-color: #DDF8FF;
--bg-image: linear-gradient(135deg, transparent 10%, #FFF8 20%, transparent 30%);
transform: rotate(.30deg);
}
ul#bandnames #problemattic > strong {
font-family: var(--cormorant);
}
ul#bandnames #problemattic > footer {
font-family: var(--serif);
}
main > footer {
margin-block-start: 2rem;
}
/* Fonts */
@font-face {
font-family: 'Ferrite Core DX';
font-style: normal;
font-weight: 700;
src: local('Ferrite Core DX Black'),
url('/fonts/Ferrite Core DX Black.woff2') format('woff2'),
url('/fonts/Ferrite Core DX Black.woff') format('woff');
}
@font-face {
font-family: 'UnifrakturCook';
font-style: normal;
font-weight: 700;
src: local('UnifrakturCook'), local('UnifrakturCook-Bold'),
url('/fonts/unifrakturcook.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('/fonts/unifrakturcook.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 600;
src: local("Cormorant Garamond SemiBold"),
local("CormorantGaramond-SemiBold"),
url("/fonts/cormorant-bold.woff2") format("woff2");
font-display: fallback;
}
block content
ul#bandnames
li.cardstock#de-oerknal(tabindex="0" lang="nl")
strong DeOerknal.
footer
| bij
strong De Andromeda, Amsterdam
li.cardstock#unisex-jumpsuit(tabindex="0")
header
strong Xanthous Industries
br
small
i presents
strong unisex jumpsuit
li.metal#stephensons-rocket(tabindex="0")
header
strong Euterpe Concerts
| presents
br
strong
| stephenson's
br
| rocket
footer
i + special guest(s)
li.metal#paradice-death(tabindex="0")
header
| 27 February 2031
strong Britannia Arena
br
strong Paradice Death
li.cardstock#tiresias-army(tabindex="0")
strong Tiresias’ Army
footer
| at
strong St Isidore’s Stadium
li.metal#vantapink(tabindex="0")
strong Vantapink.
footer at the Basement, 1900 Elm Street, Chicago.
li.metal#circadia(tabindex="0")
footer pacific records presents the debut album from
strong circadia
li.metal#toincoss(tabindex="0")
footer Come see
strong TOIN COSS
footer at Tim’s Bar, Stockford, 23 May
li.cardstock#vietcong(tabindex="0")
strong VIET CONG
footer I mean, hey, it’s not taken anymore
li.metal#problemattic(tabindex="0")
strong The Problem Attic
footer Live from an Attic in Yorkshire ⁓ 8 April 2020