diff options
| -rw-r--r-- | Makefile | 2 | ||||
| -rw-r--r-- | close.svg | 1 | ||||
| -rw-r--r-- | commun.css | 122 | ||||
| -rw-r--r-- | menu.svg | 1 | ||||
| -rw-r--r-- | share.svg | 1 | ||||
| -rw-r--r-- | template.html | 7 |
6 files changed, 126 insertions, 8 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/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 @@ -20,7 +20,6 @@ header.banner a { align-items: center; } header.banner img { - width: 10rem; filter: brightness(0%); transition: filter 1s; } @@ -29,7 +28,6 @@ header.banner:hover img { } header.banner h1 { margin: 0; - font-size: 1.5rem; transition: color 1s; } header.banner:hover h1 { @@ -37,7 +35,9 @@ header.banner:hover h1 { } @media (min-width: 40em) { - .togglable > input.toggle, .togglable > img.button { + .togglable > input.toggle, + .togglable > img.button, + .togglable > .name { display: none; } @@ -51,11 +51,17 @@ header.banner:hover h1 { 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 > div { + header.menu > .content { display: grid; grid-template-columns: 3fr 1fr 1fr; } @@ -145,7 +151,7 @@ header.banner:hover h1 { top: 0; } - footer.social > div { + footer.social > .content { display: flex; flex-direction: column; align-items: center; @@ -176,3 +182,109 @@ header.banner:hover h1 { font-size: 75%; } } + +@media (max-width: 40em) { + body { + --togglable-origin: left; + --togglable-transform: translate(-100vw); + + 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; + grid-column: 1 / -1; + } + main { + grid-row: 3; + grid-column: 1 / -1; + } + + .togglable { + display: grid; + position: relative; + grid-template-columns: 2rem auto; + align-items: center; + } + .togglable > input.toggle { + z-index: 2; + grid-column: 1 / -1; + position: absolute; + width: 100%; + height: 100%; + margin: 0; + opacity: 0; + } + .togglable > img.button.open { + grid-column: 1; + width: 1.6rem; + height: 1.6rem; + object-fit: contain; + object-position: center; + } + .togglable > img.button.close { + display: block; + position: fixed; + top: 1rem; + right: 1rem; + width: 1.5rem; + height: 1.5rem; + transform-origin: var(--togglable-origin); + transform: var(--togglable-transform); + transition: transform 0.5s; + z-index: 4; + } + .togglable > .name { + grid-column: 2; + } + .togglable > .content { + display: block; + position: fixed; + overflow: auto; + width: 100%; + height: 100%; + 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: 1rem; + right: 1rem; + width: 1.5rem; + height: 1.5rem; + 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; + } +} 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/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 18dffff..a544179 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} @@ -20,7 +21,8 @@ <input type="checkbox" class="toggle"> <img class="button open" src="menu.svg"> <img class="button close" src="close.svg"> - <div> + <div class="name">Menu</div> + <div class="content"> <nav> <ol> <li class="dropdown"><a href="quatuor.html">Le quatuor</a> @@ -48,7 +50,8 @@ <input type="checkbox" class="toggle"> <img class="button open" src="share.svg"> <img class="button close" src="close.svg"> - <div> + <div class="name">Nous contacter</div> + <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"> |
