quatuorbellefeuille.com

commit e17ad68625b6f2bf0579785322b11b2f2fb1e411
parent 46eb8fc54d5004cb8d8625fc7f9c9bbbf3a6c4d2
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Thu, 26 Nov 2020 00:26:42 +0100

Add links

Diffstat:
M
actualités.html
 | 
18
++++++++++--------
M
commun.css
 | 
20
++++++++++++++++++--
M
quatuor.html
 | 
18
++++++++++--------

3 files changed, 38 insertions(+), 18 deletions(-)
diff --git a/actualités.html b/actualités.html
@@ -10,17 +10,19 @@
     <header class="banner">
 
       <div class="brand">
-        <img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Golden_Sun_icon.png"
-             alt="logo">
-        <h1 class="qname">Quatuor Camelot</h1>
+        <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>le quatuor</li>
-          <li>actualités</li>
-          <li>programmes</li>
-          <li>médias</li>
+          <li><a href="quatuor.html">Le quatuor</a></li>
+          <li class="current"><a href="actualités.html">Actualités</a></li>
+          <li><a href="programmes.html">Programmes</a></li>
+          <li><a href="médias.html">Médias</a></li>
         </ol>
       </nav>
 
@@ -263,7 +265,7 @@
       <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">
       <p class="contact">
-        Contact
+        <a href="contact.html">Contact</a>
       </p>
     </footer>
 
diff --git a/commun.css b/commun.css
@@ -16,12 +16,17 @@ header.banner {
 
 header.banner .brand {
     grid-column: 1;
-    display: flex;
-    align-items: center;
     padding-left: 2vw;
     padding-right: 2vw;
 }
 
+header.banner .brand a {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    color: inherit;
+}
+
 header.banner .brand img {
     transition: filter 1s;
 }
@@ -66,6 +71,14 @@ nav ol li {
     padding: 0.5em 0.1em;
 }
 
+nav ol li.current {
+    background: white;
+}
+
+nav ol li a {
+    text-decoration: none;
+}
+
 .lang {
     grid-column: 3;
     background-color: black;
@@ -112,6 +125,9 @@ footer.social {
     margin-inline-start: 0.5em;
 }
 
+.contact a {
+    text-decoration: none;
+}
 
 footer.legal {
     grid-column: 1 / -1;
diff --git a/quatuor.html b/quatuor.html
@@ -10,17 +10,19 @@
     <header class="banner">
 
       <div class="brand">
-        <img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Golden_Sun_icon.png"
-             alt="logo">
-        <h1 class="qname">Quatuor Camelot</h1>
+        <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>le quatuor</li>
-          <li>actualités</li>
-          <li>programmes</li>
-          <li>médias</li>
+          <li class="current"><a href="quatuor.html">Le quatuor</a></li>
+          <li><a href="actualités.html">Actualités</a></li>
+          <li><a href="programmes.html">Programmes</a></li>
+          <li><a href="médias.html">Médias</a></li>
         </ol>
       </nav>
 
@@ -90,7 +92,7 @@
       <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">
       <p class="contact">
-        Contact
+        <a href="contact.html">Contact</a>
       </p>
     </footer>