diff options
| -rw-r--r-- | Makefile | 2 | ||||
| -rw-r--r-- | actualités.css | 115 | ||||
| -rw-r--r-- | close.svg | 1 | ||||
| -rw-r--r-- | commun.css | 416 | ||||
| -rw-r--r-- | contact.css | 30 | ||||
| -rw-r--r-- | gallerie.css | 36 | ||||
| -rw-r--r-- | menu.svg | 1 | ||||
| -rw-r--r-- | programmes.css | 71 | ||||
| -rw-r--r-- | quatuor.css | 129 | ||||
| -rw-r--r-- | share.svg | 1 | ||||
| -rw-r--r-- | template.html | 82 |
11 files changed, 583 insertions, 301 deletions
@@ -23,7 +23,7 @@ $(resources): $(OUTDIR)/%: % | $(OUTDIR) cp $< $@ # TODO: optional dependency to .sh template parameters. -$(pages): $(OUTDIR)/%.html: %.html | $(OUTDIR) +$(pages): $(OUTDIR)/%.html: %.html template.html | $(OUTDIR) ./build.sh $< $@ clean: diff --git a/actualités.css b/actualités.css index 26e147e..9df8593 100644 --- a/actualités.css +++ b/actualités.css @@ -1,15 +1,6 @@ -main { - display: grid; - grid-template-columns: 60% 40%; -} - -main > div { - padding: 1em; - overflow: auto; -} - #event-list { max-height: 60vh; + overflow: auto; scrollbar-width: thin; scrollbar-color: darkblue #8ad; } @@ -29,46 +20,100 @@ main > div { .events { display: grid; - grid-auto-rows: 12em; - grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); + grid-auto-rows: var(--cell-height); + grid-template-columns: repeat(auto-fit, minmax(var(--cell-width), 1fr)); grid-gap: 0.8em; } .event a { - position: relative; display: flex; - align-items: center; justify-content: center; - height: 100%; + align-items: center; width: 100%; - text-decoration: none; -} - -.event img { - position: absolute; - object-position: center; - object-fit: cover; height: 100%; - width: 100%; - transition: 0.5s; -} - -.event:hover img { - filter: grayscale(0.8) brightness(0.4); + text-decoration: none; } .event .summary { - opacity: 0; - z-index: 1; font-weight: bold; color: white; - transition: 0.5s; } -.event:hover .summary { - opacity: 1; +@media (min-width: 40em) { + main { + display: grid; + grid-template-columns: 60% 40%; + } + + main > div { + padding: 1em; + } + + .events { + --cell-width: 14em; + --cell-height: 12em; + } + + .event a { + position: relative; + } + + .event img { + position: absolute; + object-position: center; + object-fit: cover; + height: 100%; + width: 100%; + transition: 0.5s; + } + + .event:hover img { + filter: grayscale(0.8) brightness(0.4); + } + + .event .summary { + opacity: 0; + z-index: 1; + transition: 0.5s; + } + + .event:hover .summary { + opacity: 1; + } + + .details.active > *:first-child { + margin-top: 0; + } } -.details.active > *:first-child { - margin-top: 0; +@media (max-width: 40em) { + main { + padding-left: 0.8em; + padding-right: 0.8em; + } + + .events { + --cell-width: 10em; + --cell-height: 8em; + } + + .event { + position: relative; + } + + .event img { + object-position: center; + object-fit: cover; + height: 100%; + width: 100%; + } + + .event .summary { + position: absolute; + text-align: center; + bottom: 0; + margin: 0; + width: 100%; + background: #0008; + } } diff --git a/close.svg b/close.svg new file mode 100644 index 0000000..7d5875c --- /dev/null +++ b/close.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
\ No newline at end of file @@ -1,164 +1,63 @@ body { - min-height: 100vh; - display: grid; - grid-template-columns: 7fr 1fr; - grid-template-rows: auto 1fr auto; margin: 0; background-color: #acf; } -header.banner { - grid-column: 1 / -1; - display: grid; - grid-template-columns: 2fr 1fr 3fr 1fr 1fr; +.current { + background-color: white; } -header.banner .brand { - grid-column: 1; +header a, .contact a { + text-decoration: none; } -header.banner .brand a { +header a, footer a { + color: inherit; +} + +header.banner a { display: flex; align-items: center; - text-decoration: none; } - -header.banner .brand img { +header.banner img { + filter: brightness(0%); transition: filter 1s; } -header.banner .brand h1 { - transition: color 1s; -} -header.banner .brand:hover img { +header.banner:hover img { filter: brightness(100%) sepia(100%); } -header.banner .brand:hover h1 { - color: #d82; -} - -.brand h1 { +header.banner h1 { margin: 0; - font-size: 1.5rem; -} - -.brand img { - width: 10rem; - filter: brightness(0%); + transition: color 1s; } - -nav { - grid-column: 3; - margin-top: 2rem; +header.banner:hover h1 { + color: #d82; } -nav > ol { - display: flex; - align-items: center; - align-content: stretch; - flex-wrap: wrap; - padding-left: 0; - text-align: center; +nav > ol, nav li.dropdown > ul { list-style-type: none; + padding-left: 0; } - -nav > ol > li { - flex: 1; -} - nav > ol > li > a { display: block; padding: 0.5em 0.1em; } - -nav li.dropdown { - position: relative; -} -nav li.dropdown ul { - position: absolute; - padding-left: 0; - width: 100%; - text-align: left; - background: lightgrey; - z-index: 1; - - overflow: hidden; - max-height: 0; - transition: max-height 0.5s; -} -nav li.dropdown:hover ul { - /* ⚠ Magic constant: must be big enough to show the whole dropdown, - but not too big otherwise the transition will be "delayed". */ - max-height: 5em; -} -nav li.dropdown > ul > li { - list-style-type: none; -} -nav li.dropdown > ul > li:hover { - background: white; -} -nav li.dropdown > ul > li a { - display: block; /* Make link span whole containing block. */ - padding-inline-start: 10%; -} nav li.dropdown > ul > li a img { width: 1em; height: 1em; } -.current { - background-color: white; -} - -nav li a { - text-decoration: none; -} - .lang { - grid-column: 5; background-color: black; border-radius: 50% 50% 50% 0; color: white; padding: 0.5em; - margin: auto; - margin-top: 3rem; } -main { - grid-row: 2; - grid-column: 1; - padding-left: 4%; -} - -footer.social { - grid-row: 2; - grid-column: 2; - +footer.social > .content { display: flex; flex-direction: column; align-items: center; - position: sticky; - top: 0; -} - -.social img { - width: 2em; - margin-top: 0.5em; - margin-bottom: 0.5em; -} - -.contact { - /* Ideally should be just: */ - /* writing-mode: sideways-lr; */ - /* but of course We Can't Have Nice Things. */ - writing-mode: vertical-rl; - transform: rotate(180deg); - - margin: 0; - padding: 1em 0.5em; -} - -.contact a { - text-decoration: none; } footer.legal { @@ -169,6 +68,279 @@ footer.legal { font-size: 75%; } -header a, footer a { - color: inherit; +@media (min-width: 40em) { + .togglable > input.toggle, + .togglable > img.button, + .togglable > label { + display: none; + } + + body { + min-height: 100vh; + display: grid; + grid-template-columns: 2fr 1fr 3fr 1fr 1fr; + grid-template-rows: auto 1fr auto; + } + + header.banner { + grid-column: 1; + } + header.banner img { + width: 10rem; + } + header.banner h1 { + font-size: 1.5rem; + } + + header.menu { + grid-column: 3 / -1; + } + header.menu > .content { + display: grid; + grid-template-columns: 3fr 1fr 1fr; + } + + header.menu nav { + grid-column: 1; + margin-top: 2rem; + } + header.menu .lang { + grid-column: 3; + } + + nav > ol { + display: flex; + align-items: center; + align-content: stretch; + flex-wrap: wrap; + text-align: center; + } + + nav > ol > li { + flex: 1; + } + + nav li.dropdown { + position: relative; + } + nav li.dropdown ul { + position: absolute; + width: 100%; + text-align: left; + background: lightgrey; + z-index: 1; + + overflow: hidden; + max-height: 0; + transition: max-height 0.5s; + } + nav li.dropdown:hover ul { + /* ⚠ Magic constant: must be big enough to show the whole dropdown, + but not too big otherwise the transition will be "delayed". */ + max-height: 5em; + } + nav li.dropdown > ul > li { + list-style-type: none; + } + nav li.dropdown > ul > li:hover { + background: white; + } + nav li.dropdown > ul > li a { + display: block; /* Make link span whole containing block. */ + padding-inline-start: 10%; + } + + .lang { + grid-column: 5; + margin: auto; + margin-top: 3rem; + } + + main { + grid-row: 2; + grid-column: 1 / -2; + padding-left: 4%; + } + + footer.social { + grid-row: 2; + grid-column: 5; + position: sticky; + top: 0; + } + + .social img { + width: 2em; + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + .contact { + /* Ideally should be just: */ + /* writing-mode: sideways-lr; */ + /* but of course We Can't Have Nice Things. */ + writing-mode: vertical-rl; + transform: rotate(180deg); + + margin: 0; + padding: 1em 0.5em; + } +} + +@media (max-width: 40em) { + body { + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: auto auto 1fr auto; + min-height: 100vh; + } + + header.banner { + grid-row: 1 / 3; + grid-column: 1; + } + header.menu { + grid-row: 1; + grid-column: 2; + } + footer.social { + grid-row: 2; + grid-column: 2; + } + footer.legal { + grid-row: 4; + } + main { + grid-row: 3; + grid-column: 1 / -1; + } + + header.menu { + --open-button-size: 2.4rem; + } + header.menu > label { + font-size: 1.2rem; + } + footer.social { + --open-button-size: 1.8rem; + } + footer.social > label { + font-size: 0.8rem; + } + + /* Ideally, we'd use display: grid to have labels aligned. + * Unfortunately, afaict on mobile Safari brainfarts and fails to + * move the input to its fixed top-right position when it is + * checked; instead it moves it… somewhere… + * + * Use display: flex, absolute positions, and margins instead. + */ + .togglable { + display: flex; + position: relative; + align-items: center; + --open-button-max-size: 2.4rem; + --close-button-size: 2rem; + --togglable-origin: left; + --togglable-transform: translate(-100vw); + } + .togglable > input.toggle { + position: absolute; + margin: 0; + margin-left: calc(var(--open-button-max-size) - var(--open-button-size)); + width: var(--open-button-size); + height: var(--open-button-size); + opacity: 0; + cursor: pointer; + } + .togglable > img.button.open { + margin-left: calc(var(--open-button-max-size) - var(--open-button-size)); + padding: calc(0.1 * var(--open-button-size)); + width: calc(0.8 * var(--open-button-size)); + height: calc(0.8 * var(--open-button-size)); + object-fit: contain; + object-position: center; + } + .togglable > img.button.close { + display: block; + position: fixed; + top: calc(var(--close-button-size) / 2); + right: calc(var(--close-button-size) / 2); + width: var(--close-button-size); + height: var(--close-button-size); + margin: 0; + transform-origin: var(--togglable-origin); + transform: var(--togglable-transform); + transition: transform 0.5s; + z-index: 4; + } + .togglable > label { + position: absolute; + left: calc(1.2 * var(--open-button-max-size)); + cursor: pointer; + } + .togglable > .content { + display: block; + position: fixed; + overflow: auto; + width: 100vw; + height: 100vh; + top: 0; + left: 0; + margin: 0; + background: #dddd; + transform-origin: var(--togglable-origin); + transform: var(--togglable-transform); + transition: transform 0.5s; + z-index: 3; + } + .togglable > input.toggle:checked { + display: block; + position: fixed; + top: calc(var(--close-button-size) / 2); + right: calc(var(--close-button-size) / 2); + width: var(--close-button-size); + height: var(--close-button-size); + z-index: 5; + } + .togglable > input.toggle:checked ~ img.button.close { + transform: none; + } + .togglable > input.toggle:checked ~ .content { + transform: none; + } + + header.banner img { + width: 4rem; + height: 4rem; + } + header.banner h1 { + font-size: 1.6rem; + } + + header.menu .content { + display: grid; + --cell-size: calc(var(--close-button-size) * 2); + grid-template-columns: auto var(--cell-size); + grid-template-rows: var(--cell-size) var(--cell-size) auto; + } + header.menu .content nav { + grid-row: 1 / -1; + grid-column: 1; + padding: 2rem; + } + header.menu .content .lang { + grid-row: 2; + grid-column: 2; + margin: auto; + } + + .social > .content img { + width: 3em; + margin-top: 0.5em; + margin-bottom: 0.5em; + } + .contact { + padding: 1em; + } } diff --git a/contact.css b/contact.css index 0fc5988..6bd68ec 100644 --- a/contact.css +++ b/contact.css @@ -1,18 +1,20 @@ -main { - display: grid; - grid-template-columns: 60% 40%; - padding-right: 4%; -} +@media (min-width: 40em) { + main { + display: grid; + grid-template-columns: 60% 40%; + padding-right: 4%; + } -main > div { - padding: 2%; -} + main > div { + padding: 2%; + } -#contact-us dl { - display: grid; - grid-template-columns: 1fr 2fr; -} + #contact-us dl { + display: grid; + grid-template-columns: 1fr 2fr; + } -#contact-us dd { - margin-left: inherit; + #contact-us dd { + margin-left: inherit; + } } diff --git a/gallerie.css b/gallerie.css index f8f6369..a75faf7 100644 --- a/gallerie.css +++ b/gallerie.css @@ -1,18 +1,9 @@ -main { - padding-top: 2%; - padding-bottom: 2%; - padding-right: 2%; -} - .mosaic { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--mosaic-side), 1fr)); grid-gap: 0.8em; } -.mosaic.photos { - --mosaic-side: 14em; -} .mosaic .photo { position: relative; width: 100%; @@ -38,9 +29,6 @@ main { filter: none; } -.mosaic.videos { - --mosaic-side: 25em; -} .mosaic .video { position: relative; width: 100%; @@ -54,3 +42,27 @@ main { width: 100%; height: 100%; } + +@media (min-width: 40em) { + main { + padding-top: 2%; + padding-bottom: 2%; + padding-right: 2%; + } + + .mosaic.photos { + --mosaic-side: 14em; + } + .mosaic.videos { + --mosaic-side: 25em; + } +} + +@media (max-width: 40em) { + .mosaic.photos { + --mosaic-side: 8em; + } + .mosaic.videos { + --mosaic-side: 10em; + } +} diff --git a/menu.svg b/menu.svg new file mode 100644 index 0000000..e8a84a9 --- /dev/null +++ b/menu.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
\ No newline at end of file diff --git a/programmes.css b/programmes.css index 95907ac..87ead6c 100644 --- a/programmes.css +++ b/programmes.css @@ -1,15 +1,6 @@ -main { - display: grid; - grid-template-columns: 50% 50%; -} - -main > div { - padding: 1em; - overflow: auto; -} - #program-list { max-height: 60vh; + overflow: auto; scrollbar-width: thin; scrollbar-color: darkblue #8ad; } @@ -29,8 +20,8 @@ main > div { .programs { display: grid; - grid-auto-rows: 10em; - grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(var(--cell-width), 1fr)); + grid-auto-rows: var(--cell-height); grid-gap: 0.8em; } @@ -40,33 +31,57 @@ main > div { .program a { display: flex; - align-items: center; justify-content: center; - height: 100%; + align-items: center; width: 100%; - text-decoration: none; + height: 100%; color: inherit; - transition: color 0.5s; -} - -.program:hover a { - color: white; + text-decoration: none; } .program .summary { font-weight: bold; - text-align: center; - transition: 0.5s; -} - -.program:hover .summary { - opacity: 1; } details summary .duration { font-family: monospace; } -.details.active > *:first-child { - margin-top: 0; +@media (min-width: 40em) { + main { + display: grid; + grid-template-columns: 50% 50%; + } + + main > div { + padding: 1em; + } + + .programs { + --cell-width: 10em; + --cell-height: 10em; + } + + .program a { + transition: color 0.5s; + } + .program:hover a { + color: white; + } + + .details.active > *:first-child { + margin-top: 0; + } +} + +@media (max-width: 40em) { + main { + padding-left: 0.8em; + padding-right: 0.8em; + } + + .programs { + --cell-width: 8em; + --cell-height: 4em; + } } diff --git a/quatuor.css b/quatuor.css index 8b044f1..f72c9af 100644 --- a/quatuor.css +++ b/quatuor.css @@ -1,66 +1,89 @@ -main { - display: flex; -} +@media (min-width: 40em) { + main { + display: flex; + } -main div { - padding: 2%; -} + main div { + padding: 2%; + } -main #photos { - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr 1fr; + main #photos { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; - position: sticky; - top: 0; - max-height: 80vh; -} + position: sticky; + top: 0; + max-height: 80vh; + } -#photos > * { - position: relative; - width: 6em; - height: 100%; - background-color: #ddd; /* Workaround for chromium bug#377847. */ - border-color: #ddd; - border-width: 0.3em; - border-style: solid; - border-radius: 0.3em; - overflow: hidden; -} + #photos > * { + position: relative; + width: 6em; + height: 100%; + background-color: #ddd; /* Workaround for chromium bug#377847. */ + border-color: #ddd; + border-width: 0.3em; + border-style: solid; + border-radius: 0.3em; + overflow: hidden; + } -#photos img.portrait { - position: absolute; - width: 100%; - height: 100%; - object-fit: cover; - object-position: center; - filter: grayscale(1); - transition: filter 1s, transform 1s; -} + #photos img.portrait { + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + filter: grayscale(1); + transition: filter 1s, transform 1s; + } -#photos img.portrait:hover { - filter: none; - transform: scale(1.05); -} + #photos img.portrait:hover { + filter: none; + transform: scale(1.05); + } -#photos > *:nth-of-type(1) { - top: -0.4em; -} + #photos > *:nth-of-type(1) { + top: -0.4em; + } -#photos > *:nth-of-type(2) { - left: -1.6em; - top: 1.2em; -} + #photos > *:nth-of-type(2) { + left: -1.6em; + top: 1.2em; + } -#photos > *:nth-of-type(3) { - left: 1.6em; - top: -1.2em; -} + #photos > *:nth-of-type(3) { + left: 1.6em; + top: -1.2em; + } -#photos > *:nth-of-type(4) { - top: 0.4em; + #photos > *:nth-of-type(4) { + top: 0.4em; + } + + #bio > *:first-child { + margin-top: 0; + } } -#bio > *:first-child { - margin-top: 0; +@media (max-width: 40em) { + #photos { + display: grid; + grid-template-columns: repeat(4, 20%); + justify-content: space-evenly; + width: 100%; + } + + #photos > * { + width: 100%; + height: 50vh; + } + + #photos img.portrait { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + } } diff --git a/share.svg b/share.svg new file mode 100644 index 0000000..09b1c7b --- /dev/null +++ b/share.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share-2"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg>
\ No newline at end of file diff --git a/template.html b/template.html index 523aef2..59b9996 100644 --- a/template.html +++ b/template.html @@ -2,6 +2,7 @@ <html lang="fr"> <head> <meta charset="utf-8"> + <meta name="viewport" content="width=device-width"> <title>{TITLE} - Quatuor Camelot</title> <link rel="stylesheet" href="commun.css"> {STYLESHEETS} @@ -9,48 +10,57 @@ </head> <body> <header class="banner"> + <a href="index.html"> + <img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Golden_Sun_icon.png" + alt="logo"> + <h1>Quatuor Camelot</h1> + </a> + </header> - <div class="brand"> - <a href="index.html"> - <img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Golden_Sun_icon.png" - alt="logo"> - <h1 class="qname">Quatuor Camelot</h1> - </a> - </div> - - <nav> - <ol> - <li class="dropdown"><a href="quatuor.html">Le quatuor</a> - <ul> - <li><a href="vlad.html"><img src="https://static.wikia.nocookie.net/goldensun/images/8/87/Isaac2.gif">Vlad</a></li> - <li><a href="garet.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3e/Garet_icon.gif">Garet</a></li> - <li><a href="ivan.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3d/Ivan_platinum.gif">Ivan</a></li> - <li><a href="sofia.html"><img src="https://static.wikia.nocookie.net/goldensun/images/4/43/Mia.gif">Sofia</a></li> - </ul> - </li> - <li><a href="actualités.html">Actualités</a></li> - <li><a href="programmes.html">Programmes</a></li> - <li><a href="gallerie.html">Gallerie</a></li> - </ol> - </nav> - - <div class="lang"> - EN + <header class="menu togglable"> + <input type="checkbox" class="toggle" id="menu"> + <img class="button open" src="menu.svg"> + <img class="button close" src="close.svg"> + <label for="menu">Menu</label> + <div class="content"> + <nav> + <ol> + <li class="dropdown"><a href="quatuor.html">Le quatuor</a> + <ul> + <li><a href="vlad.html"><img src="https://static.wikia.nocookie.net/goldensun/images/8/87/Isaac2.gif">Vlad</a></li> + <li><a href="garet.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3e/Garet_icon.gif">Garet</a></li> + <li><a href="ivan.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3d/Ivan_platinum.gif">Ivan</a></li> + <li><a href="sofia.html"><img src="https://static.wikia.nocookie.net/goldensun/images/4/43/Mia.gif">Sofia</a></li> + </ul> + </li> + <li><a href="actualités.html">Actualités</a></li> + <li><a href="programmes.html">Programmes</a></li> + <li><a href="gallerie.html">Gallerie</a></li> + </ol> + </nav> + <div class="lang"> + EN + </div> </div> - </header> {MAIN} - <footer class="social"> - <img src="https://upload.wikimedia.org/wikipedia/en/9/9f/Twitter_bird_logo_2012.svg"> - <img src="https://upload.wikimedia.org/wikipedia/commons/c/c2/F_icon.svg"> - <a href="feed.xml"> - <img src="https://upload.wikimedia.org/wikipedia/en/4/43/Feed-icon.svg"> - </a> - <p class="contact"> - <a href="contact.html">Contact</a> - </p> + <footer class="social togglable"> + <input type="checkbox" class="toggle" id="social"> + <img class="button open" src="share.svg"> + <img class="button close" src="close.svg"> + <label for="social">Nous contacter</label> + <div class="content"> + <img src="https://upload.wikimedia.org/wikipedia/en/9/9f/Twitter_bird_logo_2012.svg"> + <img src="https://upload.wikimedia.org/wikipedia/commons/c/c2/F_icon.svg"> + <a href="feed.xml"> + <img src="https://upload.wikimedia.org/wikipedia/en/4/43/Feed-icon.svg"> + </a> + <p class="contact"> + <a href="contact.html">Contact</a> + </p> + </div> </footer> <footer class="legal"> |
