From ebfd356d451aea1aa4197c92c4dc055ec15724d2 Mon Sep 17 00:00:00 2001
From: Serghei Mihai <smihai@entrouvert.com>
Date: Fri, 18 May 2018 14:30:43 +0200
Subject: [PATCH] meyzieu-2018: inverse steps label and number order (#22108)

---
 static/meyzieu-2018/_custom.scss | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/static/meyzieu-2018/_custom.scss b/static/meyzieu-2018/_custom.scss
index f0e14d6..6002238 100644
--- a/static/meyzieu-2018/_custom.scss
+++ b/static/meyzieu-2018/_custom.scss
@@ -294,8 +294,15 @@ div#nav {
 			text-align: center;
 		}
 		ol li {
+			@include flexbox();
+			@include flex-direction(row-reverse);
+			@include justify-content(flex-start);
+			align-items: center;
 			border: 0;
 			position: relative;
+			@media screen and (max-width: $mobile-limit) {
+				display: inline-block;
+			}
 			&.first span.marker::after {
 				display: none;
 			}
@@ -309,17 +316,18 @@ div#nav {
 					color: $primary-color;
 				}
 			}
-			 span {
+			span {
 				margin: 0 3px;
 				vertical-align: middle;
 				&.marker {
+					box-sizing: border-box;
 					display: inline-flex;
 					border-radius: 50%;
 					padding: 1em;
 					@include justify-content(center);
 					align-items: center;
-					width: 1vw;
-					height: 1vw;
+					width: 3.5vw;
+					height: 3.5vw;
 					background: #e0e0de;
 					font-size: calc(#{$font-size} + 0.5vw);
 					color: #c2c3c1;
@@ -335,7 +343,7 @@ div#nav {
 						@media screen and (max-width: $mobile-limit) {
 							width: 20%;
 							height: 1px;
-							left: -35%;
+							left: -40%;
 							top: 50%;
 						}
 					}
-- 
2.17.0