+ +
+ +
diff --git a/static/rouen/_collapsible.scss b/static/rouen/_collapsible.scss
new file mode 100644
index 0000000..d77ee89
--- /dev/null
+++ b/static/rouen/_collapsible.scss
@@ -0,0 +1,87 @@
+/* Collapsible element */
+.collapsible {
+ display: block;
+ position: relative;
+ background-color: #2e2d2c;
+ color: #fff;
+ margin: 3em 0;
+ padding: 0 0.7em 0.7em 0.7em;
+
+ .collapsible { background-color: #5e5d5c; }
+
+ /* Title */
+ h1, h2, h3, h4 { color: #fff; }
+
+ /* Legend */
+ &>:first-child, &>:first-child a, &>:first-child a:visited {
+ color: #000;
+ border-bottom: none;
+ display: block;
+ }
+
+ &>legend:first-child { margin-bottom: 0; }
+
+ &>:first-child {
+ position: relative;
+ color: #000;
+ width: 100%;
+ padding: 0.5em 0;
+ margin: 0 0 0.7em 0;
+ font-size: 100%;
+ font-weight: normal;
+ background-color: #ee787c;
+
+ /* Left padding */
+ &:before {
+ content: " ";
+ display: block;
+ width: 0.7em;
+ position: absolute;
+ height: 100%;
+ top: 0;
+ left: -0.7em;
+ background-color: #ee787c;
+ }
+
+ /* Right padding */
+ &>:after {
+ content: " ";
+ display: block;
+ width: 0.7em;
+ position: absolute;
+ height: 100%;
+ top: 0;
+ right: -0.7em;
+ background-color: #ee787c;
+ }
+
+ /* Right button */
+ a:after {
+ height: 100%;
+ width: 1.15em;
+ right: 0.8em;
+ position: absolute;
+ top: 0;
+ margin-right: -1.15em;
+ font-size: 200%;
+ content: "\e011";
+ font-family: MarsIcons;
+ font-weight: normal;
+ text-align: center;
+ line-height: 130%;
+ background-color: #2e2d2c;
+ color: #ee787c;
+ z-index: 1;
+ }
+ }
+
+ table { color: #000; }
+
+ &.collapsed {
+ padding: 0 0.7em;
+
+ &>:first-child a:after { content: "\e012"; }
+ &>* { display: none; }
+ &>:first-child { display: inherit; }
+ }
+}
\ No newline at end of file
diff --git a/static/rouen/_custom.scss b/static/rouen/_custom.scss
index 24b85cf..aeaab2a 100644
--- a/static/rouen/_custom.scss
+++ b/static/rouen/_custom.scss
@@ -1,15 +1,22 @@
@import '../../publik-base-theme/static/includes/font-roboto';
-
@font-face {
font-family: 'MarsIcons';
src: url('fonts/marsicons12.ttf') format('truetype'),
- url('fonts/marsicons12.woff') format('woff'),
- url('fonts/marsicons12.woff2') format('woff2');
+ url('fonts/marsicons12.woff') format('woff'),
+ url('fonts/marsicons12.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
+element-invisible {
+ position: absolute !important;
+ clip: rect(1px, 1px, 1px, 1px);
+ overflow: hidden;
+ height: 1px;
+ width: 1px;
+ word-wrap: normal;
+}
h1, h2, h3, h4, div.textcell h3, div.textcell h4 {
font-weight: bold;
@@ -28,6 +35,17 @@ h2 {
font-size: 187%;
}
+#login-page h2 {
+ color: $red;
+ font-size: 237%;
+ padding-left: 0;
+ text-align: left;
+ padding-top: 0;
+ padding-bottom: 0;
+}
+
+#login-page div.block h2 + div { padding: 0; }
+
h3 {
color: $link-color;
font-size: 162%;
@@ -37,12 +55,44 @@ h4 {
font-size: 137%;
}
+.gru-content div.a2-block h2, .gru-content div.block h2, div.links-list h2,
+div#rub_service h2 {
+ color: #C64A59;
+ font-size: 187%;
+}
+
+div#rub_service div.category h3, .gru-content div.a2-block h2,
+.gru-content div.block h2, div.links-list h2,
+div#services > ul > li > strong > a,
+.gru-content div.textcell h2:first-child,
+.gru-content div.cell h2:first-child, div#tracking-code h3,
+div#rub_service h2, #toplinks {
+ background-color: transparent;
+}
+
+div#header {
+ @media screen and (max-width: $mobile-limit) {
+ padding: 0;
+
+ h1 {
+ padding-left: 0;
+ background-position: inherit;
+ }
+ }
+}
+
h1#logo a {
- background: url(img/logo.png) no-repeat left bottom;
- background-size: contain;
+ background: url(img/logo.svg) no-repeat left bottom;
+ background-size: auto 1.3em;
+ background-position: 0.4em center;
display: block;
- height: 83px;
+ height: 2em;
text-indent: -9999px;
+
+ @media screen and (max-width: $mobile-limit) {
+ background-size: auto 0.7em;
+ background-position: 0.4em 0.42em;
+ }
}
div#nav li {
@@ -151,7 +201,6 @@ div#footer div#footer-content {
display: inline;
font-weight: bold;
line-height: 1.6em;
- margin-bottom: 0;
a {
border-bottom: none;
color: $black;
@@ -175,8 +224,17 @@ div#rub_service h2 {
text-align: left;
}
-button {
- font-weight: bold;
+button { font-weight: bold; }
+
+form.quixote div.widget { margin-bottom: 2em; }
+form.quixote div.widget div.widget { margin-bottom: inherit; }
+
+@media screen and (min-width: $mobile-limit) {
+ div#rub_service form.quixote, div#rub_service h2,
+ body.authentic #content, #messages {
+ max-width: 50rem;
+ margin: 0 auto;
+ }
}
%icon-common {
@@ -224,7 +282,10 @@ select {
@extend %border-style;
}
-input[type=text], input[type=password], input[type=email], input[type=color], input[type=date], input[type=datetime], input[type=datetime-local], input[type=month], input[type=number], input[type=range], input[type=search], input[type=tel], input[type=time], input[type=url], input[type=week], textarea {
+input[type=text], input[type=password], input[type=email], input[type=color],
+input[type=date], input[type=datetime], input[type=datetime-local],
+input[type=month], input[type=number], input[type=range], input[type=search],
+input[type=tel], input[type=time], input[type=url], input[type=week], textarea {
@extend %border-style;
background-color: #FFF;
display: inline-block;
@@ -233,13 +294,20 @@ input[type=text], input[type=password], input[type=email], input[type=color], in
-webkit-appearance: none;
}
-form.quixote div.title label{
+form.quixote div.title label, body.authentic label {
display: block;
font-weight: bold;
font-size: 122%;
margin-bottom: 0.5em;
}
+body.authentic label { margin-top: 1.7em; }
+
+div.a2-block form button, div.a2-block form input[type="submit"] {
+ margin-top: 1.7em;
+ min-width: inherit;
+}
+
div#content div.buttons.submit {
@include flexbox();
& div.submit-button {
@@ -248,7 +316,9 @@ div#content div.buttons.submit {
}
div#content div.SubmitWidget {
- button[name=submit][value=Suivant], button[name=submit][value=Valider], button[name=previous] {
+ button[name=submit][value=Suivant],
+ button[name=submit][value=Valider],
+ button[name=previous] {
background-color: $primary-color;
background-repeat: no-repeat;
background-position: right;
@@ -279,52 +349,6 @@ div#nav #nav-button.toggled + ul li {
}
}
-div#toplinks {
- border: none;
- border-radius: 0;
- box-shadow: none;
- margin-top: 0.5em;
- padding: 0;
- right: 0.2em;
- a.login,a.logout {
- @include flexbox();
- @include vendor-prefix(justify-content, flex-end);
- div.logtext {
- background: $primary-color;
- color: $black;
- font-size: 122%;
- font-weight: 700;
- height: 2em;
- padding: 0 0.5em;
- text-align: center;
- line-height: 2em;
- }
- div.logicon {
- background-color: $black;
- background-image: url(img/picto_btn_connexion.svg);
- background-position: center;
- background-repeat: no-repeat;
- background-size: 70%;
- content: "";
- width: 2em;
- }
- }
- a.registration {
- @include flexbox();
- @include vendor-prefix(justify-content, flex-end);
- color: $red;
- font-weight: 500;
- margin-top: 0.4em;
- span.pre-register {
- color: $light-black;
- margin-right: 0.2em;
- }
- span.register {
- text-decoration: underline;
- }
- }
-}
-
div#gauche {
clear: both;
width: auto;
@@ -336,109 +360,38 @@ div#gauche + div#rub_service {
float: none;
}
-div#tracking-code {
- text-align: center;
- h3 {
- margin: 0;
- padding: 0;
- @media screen and (max-width: $mobile-limit) {
- padding-right: 1ex;
- }
- }
- a {
- padding: 0;
- }
- margin-bottom: 2rem;
- @media screen and (max-width: $mobile-limit) {
- order: 0;
- margin-bottom: 0;
+#publik-portal-agent { display: none; }
+
+#messages {
+ li.info {
+ background-color: transparent;
+ color: inherit;
+ margin: inherit;
+ padding-left: 1em;
+
+ &::before, &::after { display: none; }
}
}
-div#steps ol {
- display: -ms-flexbox;
- display: flex;
- li.first.last::after {
- background: none;
- }
- li {
- position: relative;
- -ms-flex: 1;
- flex: 1;
- padding: 0;
- text-transform: uppercase;
- color: $primary-color;
- font-size: 24px;
- margin-bottom: 0;
- border: none;
- min-width: 30px;
- min-height: 40px;
- &::after {
- content: '';
- height: 5px;
- width: 100%;
- display: block;
- position: absolute;
- left: 0;
- bottom: 5px;
- background: #9b9b9b;
- @media screen and (max-width: $mobile-limit) {
- bottom: 15px;
- }
- }
- &:first-child::after {
- left: 50%;
- width: 50%;
- }
- &:last-child::after {
- right: 50%;
- width: 50%;
- }
- span.marker {
- position: absolute;
- bottom: 0;
- overflow: hidden;
- left: 50%;
- text-indent: -1000px;
- border: none;
- color: $primary-color;
- background: white;
- width: 15px;
- height: 15px;
- box-shadow: 0 0 0 5px #9b9b9b;
- border-radius: 10px;
- z-index: 100;
- @media screen and (max-width: $mobile-limit) {
- padding: 0;
- bottom: 10px;
- }
- }
- span.label {
- display: block;
- width: 100%;
- text-align: center;
- font-size: $font-size;
- padding-right: 0;
- text-transform: none;
- color: #9b9b9b;
- padding-bottom: 30px;
- @media screen and (max-width: $mobile-limit) {
- display: none;
- }
- }
- &.current {
- span.marker {
- background: $primary-color;
- box-shadow: 0 0 0 5px $primary-color;
- @media screen and (max-width: $mobile-limit) {
- border-radius: 10px;
- }
- }
- }
- &.step-before {
- span.marker {
- background: #9b9b9b;
- }
- }
- }
+.fargo-pick-popup button, button.ui-button, a.pk-button, a.pk-big-button,
+a#a2-continue, div.gru-content button, input[type="submit"], div.buttons input {
+ box-shadow: none;
+ height: 2.5em;
}
+
+.fargo-pick-popup button:hover, button.ui-button:hover, a.pk-button:hover,
+a.pk-big-button:hover, a#a2-continue:hover, div.gru-content button:hover,
+input[type="submit"]:hover, div.buttons input:hover {
+ box-shadow: none;
+}
+
+/* Account management */
+#profile span.label {
+ display: block;
+ color: $red;
+ font-size: inherit;
+ font-weight: bold;
+}
+
+div.a2-block p { margin-left: 0; }
+div.a2-block form, div.a2-block > p { margin: 1em 1em; }
\ No newline at end of file
diff --git a/static/rouen/_info_block.scss b/static/rouen/_info_block.scss
new file mode 100644
index 0000000..fdf1f38
--- /dev/null
+++ b/static/rouen/_info_block.scss
@@ -0,0 +1,35 @@
+/* Warning, emphasize, validate blocks */
+.warning, .emphasize, .validate, .messages {
+ position: relative;
+ font-weight: bold;
+ padding: 0.7em 0.88em;
+ border: 0.2em solid white;
+ border-right: 2.3em solid white;
+ background-color: white;
+ margin: 2em 0;
+}
+
+.warning:after, .emphasize:after, .validate:after, .messages:after {
+ display: block;
+ width: 1.15em;
+ right: -1.15em;
+ position: absolute;
+ top: 50%;
+ margin-top: -0.5em;
+ margin-right: -0.27em;
+ font-size: 130%;
+ content: "\e033";
+ font-family: MarsIcons;
+ font-weight: normal;
+ text-align: center;
+ line-height: 100%;
+ color: white;
+}
+
+.warning { color: #e53323; border-color: #e53323; }
+.emphasize, .messages { color: #164193; border-color: #164193; }
+.validate { color: #39a935; border-color: #39a935; }
+
+.warning:after { content: "\e033"; }
+.emphasize:after, .messages:after { content: "\e035"; }
+.validate:after { content: "\e038"; }
\ No newline at end of file
diff --git a/static/rouen/_links.scss b/static/rouen/_links.scss
new file mode 100644
index 0000000..0b87371
--- /dev/null
+++ b/static/rouen/_links.scss
@@ -0,0 +1,273 @@
+/* Links */
+a, div#account-management ul>li>a {
+ text-decoration: none;
+ border-bottom-width: 0.08em;
+ border-bottom-style: solid;
+ transition: border 0.2s ease-out;
+ color: #c64a59;
+ border-bottom-color: #c64a59;
+
+ &:hover {
+ color: #c64a59;
+ border-bottom-color: #c64a59;
+ border-bottom-width: 0.20em;
+ }
+
+ &:visited {
+ color: #198468;
+ border-bottom-color: #198468;
+ }
+}
+
+#logo a { border: none; }
+
+/* Collapsible */
+.collapsible a, .collapsible a:visited {
+ color: #fff;
+ border-color: #fff;
+}
+
+a.elf-external.elf-icon:after {
+ content: " \e05f";
+ font-family: MarsIcons;
+}
+
+/* Block links */
+a.blocklink, div#account-management ul>li>a {
+ font-weight: bold;
+ border-bottom-width: 0.16em;
+ border-bottom-style: solid;
+ transition: border 0.2s ease-out;
+ line-height: 200%;
+
+ &.inline { display: inline-block; }
+
+ &:hover { border-bottom-width: 0.32em; }
+
+ &:before {
+ display: block;
+ float: left;
+ content: "\e032\a0";
+ font-family: MarsIcons;
+ position: relative;
+ font-size: 150%;
+ font-weight: normal;
+ top: 0.1em;
+ }
+}
+
+/* Button links */
+a.btlnk {
+ display: inline-block;
+ position: relative;
+ font-weight: bold;
+ font-size: 122%;
+ color: #000;
+ padding: 0.5em 0.727em;
+ border: none;
+ border-right: 2.3em solid #2d2d2d;
+ margin-bottom: 1.5em;
+ background-color: #ee787c;
+
+ &.fullwidth { display: block; width: auto; }
+ &.complement { background-color: #82CEBB; }
+ &:visited { color: #000; }
+
+ &::after {
+ display: block;
+ width: 1.15em;
+ right: -1.15em;
+ position: absolute;
+ top: 50%;
+ margin-top: -0.47em;
+ margin-right: -0.27em;
+ font-size: 130%;
+ content: "\e014";
+ font-family: MarsIcons;
+ font-weight: normal;
+ text-align: center;
+ line-height: 100%;
+ color: #ee787c;
+ }
+
+ &.strong { background-color: #82cebb; }
+ &.strong::after { color: #82cebb; }
+ &.complement::after { color: #82CEBB; }
+}
+
+.E003::after { content: "\e003"; }
+.E004::after { content: "\e004"; }
+.E005::after { content: "\e005"; }
+.E006::after { content: "\e006"; }
+.E007::after { content: "\e007"; }
+.E008::after { content: "\e008"; }
+.E009::after { content: "\e009"; }
+.E00A::after { content: "\e00a"; }
+.E00B::after { content: "\e00b"; }
+.E00C::after { content: "\e00c"; }
+.E00D::after { content: "\e00d"; }
+.E00E::after { content: "\e00e"; }
+.E00F::after { content: "\e00f"; }
+.E010::after { content: "\e010"; }
+.E011::after { content: "\e011"; }
+.E012::after { content: "\e012"; }
+.E013::after { content: "\e013"; }
+.E014::after { content: "\e014"; }
+.E015::after { content: "\e015"; }
+.E016::after { content: "\e016"; }
+.E017::after { content: "\e017"; }
+.E018::after { content: "\e018"; }
+.E019::after { content: "\e019"; }
+.E01A::after { content: "\e01a"; }
+.E01B::after { content: "\e01b"; }
+.E01C::after { content: "\e01c"; }
+.E01D::after { content: "\e01d"; }
+.E01E::after { content: "\e01e"; }
+.E01F::after { content: "\e01f"; }
+.E020::after { content: "\e020"; }
+.E021::after { content: "\e021"; }
+.E022::after { content: "\e022"; }
+.E023::after { content: "\e023"; }
+.E024::after { content: "\e024"; }
+.E025::after { content: "\e025"; }
+.E026::after { content: "\e026"; }
+.E027::after { content: "\e027"; }
+.E028::after { content: "\e028"; }
+.E029::after { content: "\e029"; }
+.E02A::after { content: "\e02a"; }
+.E02B::after { content: "\e02b"; }
+.E02C::after { content: "\e02c"; }
+.E02D::after { content: "\e02d"; }
+.E02E::after { content: "\e02e"; }
+.E02F::after { content: "\e02f"; }
+.E030::after { content: "\e030"; }
+.E031::after { content: "\e031"; }
+.E032::after { content: "\e032"; }
+.E033::after { content: "\e033"; }
+.E034::after { content: "\e034"; }
+.E035::after { content: "\e035"; }
+.E036::after { content: "\e036"; }
+.E037::after { content: "\e037"; }
+.E038::after { content: "\e038"; }
+.E039::after { content: "\e039"; }
+.E03A::after { content: "\e03a"; }
+.E03B::after { content: "\e03b"; }
+.E03C::after { content: "\e03c"; }
+.E03D::after { content: "\e03d"; }
+.E03E::after { content: "\e03e"; }
+.E03F::after { content: "\e03f"; }
+.E040::after { content: "\e040"; }
+.E041::after { content: "\e041"; }
+.E042::after { content: "\e042"; }
+.E043::after { content: "\e043"; }
+.E044::after { content: "\e044"; }
+.E05C::after { content: "\e05c"; }
+.E05D::after { content: "\e05d"; }
+.E05E::after { content: "\e05e"; }
+.E05F::after { content: "\e05f"; }
+.E060::after { content: "\e060"; }
+.E061::after { content: "\e061"; }
+.E062::after { content: "\e062"; }
+.E063::after { content: "\e063"; }
+.E064::after { content: "\e064"; }
+.E065::after { content: "\e065"; }
+.E066::after { content: "\e066"; }
+.E06E::after { content: "\e06e"; }
+.E08E::after { content: "\e08e"; }
+.E08F::after { content: "\e08f"; }
+.E090::after { content: "\e090"; }
+.E09C::after { content: "\e09c"; }
+.E09D::after { content: "\e09d"; }
+.E09E::after { content: "\e09e"; }
+.E09F::after { content: "\e09f"; }
+.E0A0::after { content: "\e0a0"; }
+.E0A1::after { content: "\e0a1"; }
+.E0A2::after { content: "\e0a2"; }
+.E0A3::after { content: "\e0a3"; }
+.E0A4::after { content: "\e0a4"; }
+.E0A5::after { content: "\e0a5"; }
+.E0A6::after { content: "\e0a6"; }
+.E0A7::after { content: "\e0a7"; }
+.E0E9::after { content: "\e0e9"; }
+.E0EA::after { content: "\e0ea"; }
+.E0EB::after { content: "\e0eb"; }
+.E0EC::after { content: "\e0ec"; }
+.E0ED::after { content: "\e0ed"; }
+.E100::after { content: "\e100"; }
+.E101::after { content: "\e101"; }
+.E102::after { content: "\e102"; }
+.E104::after { content: "\e104"; }
+.E105::after { content: "\e105"; }
+.E106::after { content: "\e106"; }
+.E107::after { content: "\e107"; }
+.E108::after { content: "\e108"; }
+.E109::after { content: "\e109"; }
+
+/* Authentication links */
+div#toplinks {
+ border: none;
+ border-radius: 0;
+ box-shadow: none;
+ margin-top: 0.5em;
+ padding: 0;
+ right: 0.2em;
+ text-align: right;
+
+ a.login, a.logout {
+ @include flexbox();
+ @include vendor-prefix(justify-content, flex-end);
+
+ border: none;
+
+ div.logtext {
+ background: $primary-color;
+ color: $black;
+ font-size: 122%;
+ font-weight: 700;
+ height: 2em;
+ padding: 0 0.5em;
+ text-align: center;
+ line-height: 2em;
+ }
+
+ div.logicon {
+ background-color: $black;
+ background-image: url(img/picto_btn_connexion.svg);
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: 70%;
+ content: "";
+ width: 2.441em;
+ }
+ }
+
+ a.registration {
+ color: $red;
+ font-weight: 500;
+ margin-top: 0.4em;
+
+ &:visited {
+ color: #198468;
+ border-bottom-color: #198468;
+ }
+
+ span.pre-register {
+ color: $light-black;
+ margin-right: 0.2em;
+ }
+ }
+}
+
+/* Account management */
+div#account-management ul {
+ padding: 1rem;
+
+ &>li {
+ &>a {
+ display: inline;
+ padding: inherit;
+
+ &:hover { background-color: transparent; }
+ }
+ }
+}
\ No newline at end of file
diff --git a/static/rouen/_side_block.scss b/static/rouen/_side_block.scss
new file mode 100644
index 0000000..20f4fee
--- /dev/null
+++ b/static/rouen/_side_block.scss
@@ -0,0 +1,149 @@
+/* Steps and tracking code */
+div#side { position: relative; }
+
+body.one-step div#tracking-code {
+ display: inline-block;
+ position: relative;
+ top: 1em;
+}
+
+div#tracking-code {
+ position: absolute;
+ top: 5em;
+ left: 50%;
+ text-align: center;
+
+ margin-bottom: 2rem;
+ @media screen and (max-width: $mobile-limit) {
+ order: 0;
+ margin-bottom: 0;
+ }
+
+ h3 { padding: 0; }
+
+ a {
+ padding: 0;
+ border: none;
+ text-decoration: underline;
+ }
+}
+
+div.tracking-code-part {
+ position: relative;
+ left: -43%;
+ background-color: #82cebb;
+ padding: 1em 2em;
+
+ &::before {
+ content: ' ';
+ background-image: url(img/ticket.svg);
+ position: absolute;
+ height: 100%;
+ width: 3.3em;
+ left: -3.3em;
+ top: 0;
+ background-size: contain;
+ @media screen and (max-width: $mobile-limit) {
+ width: 4.3em;
+ left: -3.6em;
+ }
+ }
+}
+
+body.one-step div#steps { display: none; }
+body.without-tracking-code div#steps { margin-bottom: 2em; }
+
+div#steps {
+ margin-top: 8em;
+ margin-bottom: 9.5em;
+
+ @media screen and (max-width: $mobile-limit) {
+ margin-top: 0;
+ margin-bottom: 7.5em;
+ }
+
+ ol {
+ display: -ms-flexbox;
+ display: flex;
+ li.first.last::after {
+ background: none;
+ }
+
+ li {
+ position: relative;
+ -ms-flex: 1;
+ flex: 1;
+ padding: 0;
+ text-transform: uppercase;
+ color: $primary-color;
+ font-size: 24px;
+ margin-bottom: 0;
+ border: none;
+ min-width: 30px;
+ min-height: 40px;
+ &::after {
+ content: '';
+ height: 5px;
+ width: 100%;
+ display: block;
+ position: absolute;
+ left: 0;
+ bottom: 5px;
+ background: #9b9b9b;
+ @media screen and (max-width: $mobile-limit) {
+ bottom: 15px;
+ }
+ }
+ &:first-child::after { left: 50%; width: 50%; }
+ &:last-child::after { right: 50%; width: 50%; }
+ span.marker {
+ position: absolute;
+ bottom: 0;
+ overflow: hidden;
+ left: 50%;
+ text-indent: -1000px;
+ border: none;
+ color: $primary-color;
+ background: white;
+ width: 15px;
+ height: 15px;
+ box-shadow: 0 0 0 5px #9b9b9b;
+ border-radius: 10px;
+ z-index: 100;
+ @media screen and (max-width: $mobile-limit) {
+ padding: 0;
+ bottom: 10px;
+ }
+ }
+ span.label {
+ display: block;
+ left: 50%;
+ position: absolute;
+ width: 12em;
+ font-size: $font-size;
+ padding-right: 0;
+ text-transform: none;
+ color: #9b9b9b;
+ transform: rotate(-45deg);
+ transform-origin: top left;
+ top: -0.2em;
+
+ @media screen and (max-width: $mobile-limit) {
+ display: none;
+ }
+ }
+ &.current {
+ span.marker {
+ background: $primary-color;
+ box-shadow: 0 0 0 5px $primary-color;
+ @media screen and (max-width: $mobile-limit) {
+ border-radius: 10px;
+ }
+ }
+ }
+ &.step-before {
+ span.marker { background: #9b9b9b; }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/static/rouen/img/logo.png b/static/rouen/img/logo.png
deleted file mode 100644
index b6604cb..0000000
Binary files a/static/rouen/img/logo.png and /dev/null differ
diff --git a/static/rouen/img/logo.svg b/static/rouen/img/logo.svg
new file mode 100644
index 0000000..e330ae5
--- /dev/null
+++ b/static/rouen/img/logo.svg
@@ -0,0 +1,63 @@
+
+
diff --git a/static/rouen/img/ticket.svg b/static/rouen/img/ticket.svg
new file mode 100644
index 0000000..c2d93e0
--- /dev/null
+++ b/static/rouen/img/ticket.svg
@@ -0,0 +1,27 @@
+
+
\ No newline at end of file
diff --git a/static/rouen/js/collapse.js b/static/rouen/js/collapse.js
new file mode 100644
index 0000000..84b0232
--- /dev/null
+++ b/static/rouen/js/collapse.js
@@ -0,0 +1,67 @@
+(function ($) {
+ /**
+ * Scroll a given fieldset into view as much as possible.
+ */
+ const collapseScrollIntoView = function (node) {
+ var h = document.documentElement.clientHeight || document.body.clientHeight || 0;
+ var offset = document.documentElement.scrollTop || document.body.scrollTop || 0;
+ var posY = $(node).offset().top;
+ var fudge = 55;
+ if (posY + node.offsetHeight + fudge > h + offset) {
+ if (node.offsetHeight > h) {
+ window.scrollTo(0, posY);
+ }
+ else {
+ window.scrollTo(0, posY + node.offsetHeight - h + fudge);
+ }
+ }
+ };
+
+ /**
+ * Toggle the visibility of a block.
+ */
+ const toggleblock = function (block) {
+ var $block = $(block);
+ if ($block.is('.collapsed')) {
+ $block
+ .removeClass('collapsed')
+ .attr('aria-expanded', 'true')
+ .find('>:first-child .collapse-action').html("Cacher");
+
+ collapseScrollIntoView(block);
+ } else {
+ $block
+ .addClass('collapsed')
+ .attr('aria-expanded', 'false')
+ .find('>:first-child .collapse-action').html("Montrer");
+ }
+ };
+
+ $('.collapsible').each(function () {
+ const $block = $(this);
+
+ // Add the Aria attributes to our custom element
+ if ($block.hasClass('collapsed')) {
+ $block.attr('aria-expanded', 'false');
+ } else {
+ $block.attr('aria-expanded', 'true');
+ }
+
+ // Turn the legend into a clickable link
+ const $legend = $('>:first-child', this);
+
+ $('')
+ .append($block.hasClass('collapsed') ? "Montrer" : "Cacher")
+ .prependTo($legend)
+ .after(' ');
+
+ // .wrapInner() does not retain bound events.
+ const $link = $('')
+ .prepend($legend.contents())
+ .appendTo($legend)
+ .click(function () {
+ toggleblock($block.get(0));
+ return false;
+ });
+ });
+})($);
\ No newline at end of file
diff --git a/static/rouen/style.scss b/static/rouen/style.scss
index 1b85f31..eed8859 100644
--- a/static/rouen/style.scss
+++ b/static/rouen/style.scss
@@ -3,4 +3,9 @@
@import 'vars';
@import '../../publik-base-theme/static/includes/publik';
@import '../../publik-base-theme/static/includes/flexbox_mixins';
+
@import 'custom';
+@import 'links';
+@import 'collapsible';
+@import 'info_block';
+@import 'side_block';
\ No newline at end of file
diff --git a/templates/variants/rouen/authentic2/base.html b/templates/variants/rouen/authentic2/base.html
new file mode 100644
index 0000000..d3b452b
--- /dev/null
+++ b/templates/variants/rouen/authentic2/base.html
@@ -0,0 +1,70 @@
+{% extends theme_base %}
+
+{% block extra-body-args %}
+ {% block bodyargs %}{% endblock %}
+{% endblock %}
+
+{% block placeholder-content %}
+ {% block content %}{% endblock %}
+{% endblock %}
+
+{% block extra-body-class %}
+ {{ block.super }}
+
+ authentic
+
+ {% if request.path_info == "/accounts/" %}
+ account-management
+ {% endif %}
+
+ {% if request.path_info == "/accounts/change-email/" %}
+ account-management
+ account-mail
+ {% endif %}
+
+ {% if request.path_info == "/accounts/password/change/" %}
+ account-management
+ account-password
+ {% endif %}
+
+ {% if request.path_info == "/accounts/edit/" %}
+ account-management
+ account-edit
+ {% endif %}
+
+ {% if request.path_info == "/accounts/delete/" %}
+ account-management
+ account-delete
+ {% endif %}
+
+{% endblock %}
+
+{% block user-info %}
+ {% if user.is_authenticated %}
+
+