diff options
| -rwxr-xr-x | build.sh | 4 | ||||
| -rw-r--r-- | stylesheets/commun.css | 89 | ||||
| -rw-r--r-- | stylesheets/dark.css | 4 | ||||
| -rw-r--r-- | template.html | 10 |
4 files changed, 59 insertions, 48 deletions
@@ -18,14 +18,14 @@ cp template.html ${output} transform-li-current-a () { local old="<li><a href=\"$1.html\">" - local new="<li class=\"current\"><a href=\"$1.html\">" + local new="<li><a class=\"current\" href=\"$1.html\">" echo "s/${old}/${new}/" } transform-li-dropdown-current-a () { local old="<li class=\"dropdown\"><a href=\"$1.html\">" - local new="<li class=\"dropdown current\"><a href=\"$1.html\">" + local new="<li class=\"dropdown\"><a class=\"current\" href=\"$1.html\">" echo "s/${old}/${new}/" } diff --git a/stylesheets/commun.css b/stylesheets/commun.css index 1f600c5..524b3a8 100644 --- a/stylesheets/commun.css +++ b/stylesheets/commun.css @@ -1,25 +1,28 @@ body { --gold: #E4B63A; + --banner-logo-height: 11rem; + --banner-name-height: 2.4rem; + --menu-top-margin: calc((var(--banner-logo-height) + - 2 * var(--banner-name-height)) + / 2); margin: 0; background-color: white; font-family: 'Open Sans', sans-serif; } -.current > a { +a { + color: inherit; +} +a.current { color: var(--gold); } -header a, .contact a { +header a { text-decoration: none; - font-size: 1.2rem; font-weight: bold; } - -header a, footer a { - color: inherit; -} -nav a:hover, .contact a:hover { +nav a:hover { color: var(--gold); background: white; } @@ -29,7 +32,7 @@ header.banner a { align-items: center; } header.banner img { - margin: 0.5em; + margin: 0.6rem; } header.banner h1 { margin: 0; @@ -46,6 +49,10 @@ header.banner:hover { color: var(--gold); } +nav a { + font-size: 1.2rem; +} + nav > ol, nav li.dropdown > ul { list-style-type: none; padding-left: 0; @@ -55,18 +62,28 @@ nav > ol > li > a { padding: 0.5em 0.1em; } -a.lang { +footer.social a { + text-decoration: none; + font-size: 1.2rem; + font-weight: bold; +} +footer.social a.contact:hover { + color: var(--gold); + background: white; +} + +footer.social a.lang { display: block; - padding: 0.5em; + padding: 0.5rem; border-radius: 50%; font-size: 1rem; - border: 0.15em solid black; + border: 0.15rem solid black; } -a.lang:hover { +footer.social a.lang:hover { color: white; background: var(--gold); - border: 0.15em solid var(--gold); + border: 0.15rem solid var(--gold); } footer.social > .content { @@ -101,28 +118,25 @@ footer.legal { grid-column: 1; } header.banner img { - height: 11rem; + height: var(--banner-logo-height); } header.banner h1 { - font-size: 2.4rem; + font-size: var(--banner-name-height); font-weight: normal; max-width: 6em; /* Force linebreak. */ } header.menu { - grid-column: 3 / -1; + grid-column: 3 / -2; } header.menu > .content { display: grid; - grid-template-columns: 3fr 1fr 1fr; + grid-template-columns: 3fr 1fr; } header.menu nav { grid-column: 1; - margin-top: 2rem; - } - header.menu .lang { - grid-column: 3; + margin-top: var(--menu-top-margin); } nav > ol { @@ -131,6 +145,7 @@ footer.legal { align-content: stretch; flex-wrap: wrap; text-align: center; + margin: 0; } nav > ol > li { @@ -169,12 +184,6 @@ footer.legal { display: block; /* Make link span whole containing block. */ } - .lang { - grid-column: 5; - margin: auto; - margin-top: 3rem; - } - main { grid-row: 2; grid-column: 1 / -2; @@ -182,28 +191,28 @@ footer.legal { } footer.social { - grid-row: 2; + grid-row: 1 / -2; grid-column: 5; - position: sticky; - top: 0; + margin-top: var(--menu-top-margin); } - .social img { - width: 2em; - padding: 0.5em; + .social a { + display: block; + margin: 1rem; } - .contact { + .social a > img { + width: 2.2rem; + } + + a.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; - } - .contact a { - padding: 1em 0.5em; + padding: 1rem 0.5rem; + margin: 0; /* Compensate padding. */ } } diff --git a/stylesheets/dark.css b/stylesheets/dark.css index 8f24915..297b27a 100644 --- a/stylesheets/dark.css +++ b/stylesheets/dark.css @@ -3,10 +3,10 @@ body { color: white; } -a.lang { +footer.social a.lang { border-color: white; } -a.lang:hover { +footer.social a.lang:hover { color: var(--gold); background: white; border-color: white; diff --git a/template.html b/template.html index 9219b8e..d6e0406 100644 --- a/template.html +++ b/template.html @@ -42,7 +42,6 @@ <li><a href="gallerie.html">gallerie</a></li> </ol> </nav> - <a class="lang" href="">EN</a> </div> </header> @@ -54,6 +53,9 @@ <img class="button close" src="images/close.svg"> <label for="social">Nous contacter</label> <div class="content"> + <a class="lang" href=""> + EN + </a> <a href="https://www.facebook.com/quatuorbellefeuille/" target="_blank" rel="noreferrer noopener"> <img src="images/facebook-logo.svg"> @@ -66,9 +68,9 @@ target="_blank" rel="noreferrer noopener"> <img src="images/youtube-logo.svg"> </a> - <p class="contact"> - <a href="contact.html">contact</a> - </p> + <a class="contact" href="contact.html"> + contact + </a> </div> </footer> |