add ticket animation / link

assets/css/src/events-grid.css

@@ -5,3 +5,19 @@
 .events-grid h4 {
   margin-bottom: 1rem;
 }
+
+.event-card picture {
+  margin-bottom: calc(var(--space-m) / 2);
+}
+
+.event-card__infos > div {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+.event-card__infos > div:first-child {
+  margin-bottom: calc(var(--space-m) / 2);
+}
+
+.event-card__infos > div > *:not(h5):last-child {
+  place-self: end;
+}

assets/css/src/generic.css

@@ -12,3 +12,50 @@ body.progress * {
 .grid__item {
   grid-column: span var(--span);
 }
+
+@keyframes vibrate {
+  0%,
+  100% {
+    scale: 1;
+    transform: rotate(0deg);
+  }
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: rotate(5deg);
+  }
+
+  20% {
+    scale: 0.95;
+  }
+
+  50% {
+    scale: 1.05;
+  }
+
+  80% {
+    scale: 0.95;
+  }
+
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: rotate(-5deg);
+  }
+}
+
+.ticket:hover svg {
+  animation: vibrate 0.5s forwards;
+}
+
+.ticket:hover svg path:not(.dot) {
+  fill: var(--color-salmon);
+  stroke: var(--color-salmon);
+}
+
+.ticket:hover svg path.dot {
+  fill: #fff;
+}

assets/css/src/reset.css

@@ -24,8 +24,11 @@ figure {
 }
 
 a {
+  margin: 0;
+  padding: 0;
   text-decoration: none;
   color: inherit;
+  cursor: pointer;
 }
 
 a:visited {

assets/css/src/text.css

@@ -34,5 +34,11 @@ h3,
 h4,
 .h4 {
   font-size: var(--font-size-h4);
-  font-weight: bold;
+  font-weight: 500;
+}
+
+h5,
+.h5 {
+  font-size: var(--font-size-h5);
+  font-weight: 600;
 }

assets/css/src/variables.css

@@ -2,6 +2,7 @@
   --border: 1px solid #000;
 
   --font-size-body: 1.25rem;
+  --font-size-h5: 1.5625rem;
   --font-size-h4: 1.5625rem;
   --font-size-h3: 1.5625rem;
   --font-size-h2: 1.875rem;