diff --git a/css/affiches/Arvo-Bold.ttf b/css/affiches/Arvo-Bold.ttf new file mode 100644 index 0000000..38341b1 Binary files /dev/null and b/css/affiches/Arvo-Bold.ttf differ diff --git a/css/affiches/AzeretMono-VariableFont_wght.ttf b/css/affiches/AzeretMono-VariableFont_wght.ttf new file mode 100644 index 0000000..4e508e8 Binary files /dev/null and b/css/affiches/AzeretMono-VariableFont_wght.ttf differ diff --git a/css/affiches/cafe.css b/css/affiches/cafe.css new file mode 100644 index 0000000..c6c4f52 --- /dev/null +++ b/css/affiches/cafe.css @@ -0,0 +1,34 @@ +@font-face { + font-family: "Azeret Mono"; + src: url("./AzeretMono-VariableFont_wght.ttf"); +} + +.affiche-cafe { + font-family: "Azeret Mono", monospace; + line-height: 1.3; + font-size: 0.9rem; +} + +.affiche-cafe > * { + margin: 0; + margin-bottom: 0.9rem; +} + +.affiche-cafe > *:last-child { + margin-bottom: 0; +} + +@keyframes cursor-blink { + 0% {opacity: 0;} + 65% {opacity: 1;} + 100% {opacity: 1;} +} + +.affiche-cafe .cursor { + animation: cursor-blink 1.5s steps(1) infinite; +} + +.affiche-cafe h1 { + font-weight: normal; + font-size: 2em; +} \ No newline at end of file diff --git a/css/affiches/perm.css b/css/affiches/perm.css new file mode 100644 index 0000000..a16a82b --- /dev/null +++ b/css/affiches/perm.css @@ -0,0 +1,35 @@ +@font-face { + font-family: "Arvo"; + src: url("./Arvo-Bold.ttf"); + font-weight: bold; +} + +.affiche-perm { + background: black url("../../images/affiches/perm-bg.svg"); + background-size: cover; + background-repeat: no-repeat; + + text-align: center; + + padding-left: 25px; + padding-right: 25px; + + font-size: 0.9rem; + line-height: 1.5; +} + +.affiche-perm h1 { + font-size: 1.8em; + margin-top: 50px; + font-weight: normal; + font-family: "Arvo"; +} + +.affiche-perm .event-hours { + font-weight: bold; + text-align: center; + margin-top: 25px; + margin-bottom: 25px; + font-size: 1.2em; + font-family: "Arvo"; +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index f680707..b36e2bf 100644 --- a/css/style.css +++ b/css/style.css @@ -30,9 +30,10 @@ a:link { text-decoration: none; } -a:hover { +a:hover, a:focus { color: white; background-color:black; + text-decoration: underline; } a:visited { @@ -49,81 +50,42 @@ a:visited { gap: 15px; - padding: 10px; + padding: 50px 10px 10px; position: relative; margin-bottom: 25px; } -#main-header::before { - content: ""; - z-index: -1; - width: 100vw; - background: black; - height: 100%; - position: absolute; - top: 0; - left: 50%; - transform: translateX(-50%); -} - -#main-header > nav { - flex: 1; - - display: flex; - flex-direction: row; - justify-content: end; - align-items: center; -} - @media screen and (max-width: 600px) { #main-header { - flex-direction: column; - align-items: center; - } - - #main-header > nav { justify-content: center; } } -/* main area */ +#main-header h1 { + line-height: 25px; + font-size: 20px; + font-weight: normal; + font-family: monospace; + color: yellow; +} + +/* main area */ main { display: grid; grid-template-columns: 1fr 400px; grid-auto-rows: min-content; - gap: 5px; -} - -main > section { - padding: 0 10px; -} - -main aside { - padding: 10px; + row-gap: 15px; + column-gap: 10px; + padding-left: 10px; + padding-right: 10px; } main .toolbar { grid-column: 1 / 3; - padding: 0 10px; - text-align: right; } -@media screen and (max-width: 889px){ - main { - grid-template-columns: 1fr; - } - - main > aside { - grid-row: 3; - } - - main .toolbar { - grid-row: 1; - } -} - /* toolbar */ main .toolbar button { @@ -148,6 +110,8 @@ main .toolbar button img[hidden] { #description { text-align: left; line-height: 1.5; + + grid-column: 1; } #description > *:first-child { @@ -186,23 +150,23 @@ dl.definitions > dt { /* side */ -#main-side h2 { - color: white; - font-size: 1em; +main > aside { + grid-column: 2; + text-align: center; } -#main-side address { +#main-info address { display: inline; } -#main-side .info > * { +#main-info > * { margin: 1.33em 0; font-weight: bold; color: yellow; } @media screen and (max-width: 889px){ - #main-side { + #main-info { text-align: center; } } @@ -253,4 +217,71 @@ dl.definitions > dt { bottom: 0; left: 0; background: linear-gradient(to top, black, rgba(0,0,0,0)); +} + +/* nav */ + +#main-nav { + text-align: center; + margin-top: 25px; + margin-bottom: 25px; +} + +#main-nav > *:not(:last-child)::after { + content: " | "; + text-decoration: none !important; +} + +/* Affiches */ + +.affiche { + border: solid 1px currentColor; + padding: 10px; + background: black; + position: relative; +} + +.affiche:not(:first-child){ + margin-top: 25px; +} + +.affiche:not(:last-child){ + margin-bottom: 25px; +} + +.affiche .credits { + font-size: 0.5em; + text-align: right; +} + +.affiche .credits, .affiche .credits * { + color: inherit; +} + +/* mobile */ + +@media screen and (max-width: 889px){ + main { + grid-template-columns: 1fr; + + row-gap: 50px; + } + + main > aside { + grid-row: 3; + grid-column: 1; + } + + main .toolbar { + grid-row: 1; + grid-column: 1; + } + + #description { + grid-column: 1; + } + + #events { + grid-row: 4; + } } \ No newline at end of file diff --git a/images/affiches/perm-bg.svg b/images/affiches/perm-bg.svg new file mode 100644 index 0000000..56581c5 --- /dev/null +++ b/images/affiches/perm-bg.svg @@ -0,0 +1,471 @@ + + diff --git a/index.html b/index.html index 7166c5a..b86e2e8 100644 --- a/index.html +++ b/index.html @@ -13,12 +13,15 @@ + + +