Generation du frontend pour les evenements

static/css/perso.css

@@ -1,4 +1,6 @@
+/***********************************************/
 /*                  Sous-menu                  */
+/***********************************************/
 
 #header nav ul.left {
 	position: absolute;
@@ -20,9 +22,10 @@
 	#header nav ul li {
 		display: block;
 		position: relative;
-		width: intrinsic;
+		width: max-content;
 		width: -moz-max-content;
 		width: -webkit-max-content;
+		width: -ms-max-content;
 	}
 
 		#header nav ul li ul {
@@ -77,8 +80,9 @@
 
 
 
-
+/***********************************************/
 /*          Couleur non transparentes          */
+/***********************************************/
 
 #header nav ul {
 	background-color: rgba(27, 31, 34, 0.85);
@@ -90,8 +94,9 @@
 
 
 
-
+/***********************************************/
 /*                   Soutien                   */
+/***********************************************/
 
 #header .soutien {
 	background-color: rgba(27, 31, 34, 0.85);
@@ -164,7 +169,111 @@
 }
 
 
+
+
+/***********************************************/
 /*             Ajustement vertical             */
+/***********************************************/
+
 body:not(.is-article-visible) #wrapper {
 	padding: 0;
 }
+
+
+
+
+/***********************************************/
+/*                   Events                    */
+/***********************************************/
+
+.event {
+	margin: 2rem;
+	position: relative;
+	border: 1px solid #ffffff;
+	border-radius: 4px;
+	display: block;
+}
+
+	.event:hover {
+		background-color: rgba(255, 255, 255, 0.075);
+		border-bottom-color: #ffffff;
+	}
+
+	.event::before {
+		content: '';
+		display: block;
+		position: absolute;
+		top: calc(-2rem - 1px);
+		left: calc(50% - 1px);
+		width: 1px;
+		height: calc(2rem + 1px);
+		background: #ffffff;
+	}
+
+	.event .date, .event .title {
+		position: absolute;
+		top: 0.5rem;
+		font-size: 1.1rem;
+		color: #ffffff;
+		font-weight: 600;
+		letter-spacing: 0.1rem;
+	}
+
+		.event .date {
+			right: 1rem;
+		}
+
+		.event .title {
+			left: 1rem;
+		}
+
+	.event .description {
+		max-height: 20rem;
+		overflow: hidden;
+		border-top: 1px solid #ffffff;
+		margin-top: 3rem;
+		padding: 15px;
+	}
+
+#main article .major .date {
+	position: absolute;
+	right: 2rem;
+	top: 4.5rem;
+}
+
+#main article .previous {
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 4rem;
+	height: 4rem;
+	cursor: pointer;
+	text-indent: 4rem;
+	overflow: hidden;
+	white-space: nowrap;
+	border: 0;
+}
+
+	#main article .previous::before {
+		-moz-transition: background-color 0.2s ease-in-out;
+		-webkit-transition: background-color 0.2s ease-in-out;
+		-ms-transition: background-color 0.2s ease-in-out;
+		transition: background-color 0.2s ease-in-out;
+		content: '';
+		display: block;
+		position: absolute;
+		top: 0.75rem;
+		left: 0.75rem;
+		width: 2.5rem;
+		height: 2.5rem;
+		border-radius: 100%;
+		background-position: center;
+		background-image: url("../images/baseline_arrow_back_white_24dp.png");
+		background-size: 20px 20px;
+		background-repeat: no-repeat;
+	}
+
+		#main article .previous:hover::before {
+			background-color: rgba(255, 255, 255, 0.075);
+		}

templates/events.html

@@ -17,6 +17,11 @@
 {% if mds %}
     {% for md in mds %}
         <article id="event-{{ md[0].strftime('%d-%m-%Y') }}-{{ md[1] }}">
+            <a class="previous" href="#events">Previous</a>
+            <h2 class="major">
+                {{ md[1] }}
+                <div class="date">{{ md[0].strftime('%a %d %b %Y') }}</div>
+            </h2>
             {{ md[3] | safe }}
         </article>
     {% endfor %}