Display HCP site thumbnails in event sections

Author: Florent Biville

_data/events.yml

@@ -1,9 +1,9 @@
 upcoming:
   - name: Paris 2020
     url: https://paris2020.hack-commit-pu.sh/
-
-  - name: More to come
+    img: hcp-paris-2020.png
 
 past:
   - name: Paris 2019
-    url: https://paris2019.hack-commit-pu.sh/
+    url: https://paris2019.hack-commit-pu.sh/
+    img: hcp-paris-2019.png

_includes/_events.html

@@ -14,7 +14,10 @@
 			{% if event.url != nil %}
 			<a href="{{event.url}}" rel="noopener" target="_blank">
 			{% endif %}
-			<span class="wow bounceIn name">{{event.name}}</span>
+			{% if event.img != nil %}
+			<img src="img/{{event.img}}" alt="{{event.name}} website thumbnail" />
+			{% endif %}
+			<div>{{event.name}}</div>
 			{% if event.url != nil %}
 			</a>
 			{% endif %}

css/main.scss

@@ -211,17 +211,26 @@ header .header-content {
 	}
 
 	.event {
-		height: 10vh;
-		width: 10vh;
-		&, a {
-			margin: 0 auto;
-			display: flex;
-			justify-content: center;
-			align-items: center;
+		display: inline-flex;
+		max-width: 100%;
+
+		img {
+			max-width: 100%;
+		}
+
+		div {
+			display:none;
+			padding: 2%;
+			font-size: 1.5em;
 		}
-		.name {
-			margin-bottom: 0;
-		}	
+	}
+
+	a:hover > div {
+		display: inline-block;
+		position: absolute;
+		left: 50%;
+		top: 20%;
+		transform: translate(-50%,-50%);
 	}
 }