From 52685fe92b09626d2b048c3ea870a0470aeaa8c9 Mon Sep 17 00:00:00 2001
From: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date: Sat, 6 Mar 2021 19:42:01 +0100
Subject: Tweak calendar

Simplify HTML, highlight on hover, change aspect ratio, move closer to
corner.
---
 images/calendar-gold.svg |  2 ++
 images/calendar.svg      |  2 +-
 index.html               |  4 +---
 stylesheets/index.css    | 24 ++++++++++++------------
 4 files changed, 16 insertions(+), 16 deletions(-)
 create mode 100644 images/calendar-gold.svg

diff --git a/images/calendar-gold.svg b/images/calendar-gold.svg
new file mode 100644
index 0000000..235b726
--- /dev/null
+++ b/images/calendar-gold.svg
@@ -0,0 +1,2 @@
+<!-- Adapted from <https://feathericons.com>. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 18" fill="none" stroke="#E4B63A" stroke-width="0.3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="12" rx="2" ry="2"></rect><line x1="15" y1="3" x2="15" y2="5"></line><line x1="9" y1="3" x2="9" y2="5"></line><line x1="3" y1="7" x2="21" y2="7"></line></svg>
diff --git a/images/calendar.svg b/images/calendar.svg
index d66e52a..9789353 100644
--- a/images/calendar.svg
+++ b/images/calendar.svg
@@ -1,2 +1,2 @@
 <!-- Adapted from <https://feathericons.com>. -->
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="0.3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="12" rx="2" ry="2"></rect><line x1="15" y1="3" x2="15" y2="5"></line><line x1="9" y1="3" x2="9" y2="5"></line><line x1="3" y1="7" x2="21" y2="7"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 18" fill="none" stroke="#fff" stroke-width="0.3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="12" rx="2" ry="2"></rect><line x1="15" y1="3" x2="15" y2="5"></line><line x1="9" y1="3" x2="9" y2="5"></line><line x1="3" y1="7" x2="21" y2="7"></line></svg>
diff --git a/index.html b/index.html
index c3f6e7d..a62097b 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,9 @@
 <main>
-  <div id="next-concert">
-    <a href="actualités.html#concert-8">
+    <a id="next-concert" href="actualités.html#concert-8">
       <p>
         <span id="day">25</span>
         <br>
         <span id="month">décembre</span>
       </p>
     </a>
-  </div>
 </main>
diff --git a/stylesheets/index.css b/stylesheets/index.css
index 0949e5a..01cc43d 100644
--- a/stylesheets/index.css
+++ b/stylesheets/index.css
@@ -24,27 +24,27 @@ main {
     position: relative;
 }
 
-#next-concert {
+a#next-concert {
+    display: block;
     position: absolute;
-    bottom: 2%;
-    height: 10em;
-    width: 11em;
+    bottom: 0;
+    left: -2em;
+    padding: 2em;
+    width: 6em;
+    height: 3em;
     text-align: center;
+    text-decoration: none;
     background: no-repeat center/contain url('/images/calendar.svg');
 }
-
-#next-concert a {
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-    text-decoration: none;
+a#next-concert:hover {
+    color: var(--gold);
+    background-image: url('/images/calendar-gold.svg');
 }
 
 #next-concert p {
     position: relative;
-    top: 32%;
     margin: 0;
-    color: #eee;
+    margin-top: 1em;
     text-transform: uppercase;
 }
 
-- 
cgit v1.2.3