quatuorbellefeuille.com

commit 52685fe92b09626d2b048c3ea870a0470aeaa8c9
parent b10a19c40538101d60469022b2c37e9167152557
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Sat,  6 Mar 2021 19:42:01 +0100

Tweak calendar

Simplify HTML, highlight on hover, change aspect ratio, move closer to
corner.

Diffstat:
A
images/calendar-gold.svg
 | 
2
++
M
images/calendar.svg
 | 
2
+-
M
index.html
 | 
4
+---
M
stylesheets/index.css
 | 
24
++++++++++++------------

4 files changed, 16 insertions(+), 16 deletions(-)
diff --git a/images/calendar-gold.svg 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
@@ -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
@@ -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
@@ -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;
 }