summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--images/calendar-gold.svg2
-rw-r--r--images/calendar.svg2
-rw-r--r--index.html4
-rw-r--r--stylesheets/index.css24
4 files changed, 16 insertions, 16 deletions
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;
}