start footer

assets/css/src/callout.css

@@ -0,0 +1,20 @@
+section.callout {
+  --padding-vertical: var(--space-m);
+  background-color: var(--color-salmon);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+section.callout h4 {
+  margin-bottom: 2rem;
+}
+
+section.callout a {
+  display: flex;
+  align-items: center;
+}
+
+section.callout .ticket {
+  margin-right: 1rem;
+}

assets/css/src/events-grid.css

@@ -10,8 +10,8 @@
   margin-bottom: calc(var(--space-m) / 2);
 }
 
-.event-card__infos h5 {
-  max-width: 95%;
+.event-card__infos > div a {
+  max-width: 85%;
 }
 
 .event-card__infos .ticket {
@@ -25,7 +25,3 @@
 .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/footer.css

@@ -0,0 +1,9 @@
+.main-footer {
+  background-color: var(--color-yellow-fluo);
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.main-footer p {
+  margin-bottom: 1rem;
+}

assets/css/src/generic.css

@@ -29,53 +29,16 @@ body.progress * {
   object-fit: cover;
 }
 
-@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);
-  }
+.logo {
+  font-weight: normal;
+  transition: opacity 0.2s ease-in-out;
+  font-size: var(--font-size-h2);
 }
 
-.ticket {
-  display: inline-flex;
+.logo > * {
+  display: block;
 }
 
-.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;
+.logo > *:not(:first-child) {
+  margin-left: 2.4ch;
 }

assets/css/src/nav.css

@@ -7,20 +7,6 @@
   padding: 1rem;
 }
 
-.main-nav .logo {
-  font-weight: normal;
-  transition: opacity 0.2s ease-in-out;
-  font-size: var(--font-size-h2);
-}
-
-.main-nav .logo > * {
-  display: block;
-}
-
-.main-nav .logo > *:not(:first-child) {
-  margin-left: 2.4ch;
-}
-
 .main-nav__right {
   display: flex;
 }

assets/css/src/reset.css

@@ -76,8 +76,17 @@ input {
 ::placeholder {
   color: #000;
   opacity: 1; /* Firefox */
+  transition: all 0.2s ease-in-out;
 }
 ::-ms-input-placeholder {
   /* Edge 12 -18 */
   color: #000;
+  transition: color 0.2s ease-in-out;
+}
+:focus::placeholder {
+  opacity: 0.5; /* Firefox */
+}
+::-ms-input-placeholder {
+  /* Edge 12 -18 */
+  color: rgba(0, 0, 0, 125);
 }

assets/css/src/ticket.css

@@ -0,0 +1,58 @@
+@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 {
+  display: inline-flex;
+}
+
+a:hover .ticket svg,
+.ticket:hover svg {
+  animation: vibrate 0.5s forwards;
+}
+
+.ticket:hover svg path:not(.dot) {
+  fill: var(--color-salmon);
+  stroke: var(--color-salmon);
+}
+a:hover .ticket svg path:not(.dot) {
+  fill: #fff;
+  stroke: #fff;
+}
+
+.ticket:hover svg path.dot {
+  fill: #fff;
+}
+a:hover .ticket svg path.dot {
+  fill: var(--color-salmon);
+}

assets/css/src/vanilla.css

@@ -1,4 +1,5 @@
-section {
+section,
+footer {
   padding: var(--padding-vertical) var(--space-m);
 }
 picture {

assets/css/src/variables.css

@@ -9,6 +9,7 @@
   --font-size-h1: 2.8125rem;
 
   --curve-quick-slow: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --padding-vertical: 2rem;
   --space-m: 4vw;
 
   --color-pink: #ed268f;