From 9c11794aaf87d3f1f16bd9de9bd7d2ee94e6fc92 Mon Sep 17 00:00:00 2001 From: Valentin Date: Sat, 25 Mar 2023 03:07:32 +0100 Subject: [PATCH] =?UTF-8?q?ajouts=20des=20=C3=A9l=C3=A9ments=20de=20l'ui?= =?UTF-8?q?=20globale?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/fonts/Ortica-Bold.woff2 | Bin 0 -> 13424 bytes assets/pictos/action-2.svg | 174 ++++++++++++++++++ assets/pictos/arrow_back.svg | 1 + assets/pictos/arrow_forward.svg | 1 + assets/pictos/info.svg | 1 + assets/pictos/login.svg | 1 + assets/pictos/proximite.svg | 1 + assets/pictos/puissance-d-agir.svg | 1 + assets/pictos/search.svg | 1 + assets/pictos/superposition.svg | 1 + assets/pictos/terrain-de-vie.svg | 8 - fichiertest | 0 index.html | 92 +++++++--- styles.css | 264 ++++++++++++++++++++++------ styles.css.map | 2 +- styles.scss | 273 ++++++++++++++++++++++------- styles.scss.map | 1 + 17 files changed, 669 insertions(+), 153 deletions(-) create mode 100644 assets/fonts/Ortica-Bold.woff2 create mode 100644 assets/pictos/action-2.svg create mode 100644 assets/pictos/arrow_back.svg create mode 100644 assets/pictos/arrow_forward.svg create mode 100644 assets/pictos/info.svg create mode 100644 assets/pictos/login.svg create mode 100644 assets/pictos/search.svg delete mode 100644 fichiertest create mode 100644 styles.scss.map diff --git a/assets/fonts/Ortica-Bold.woff2 b/assets/fonts/Ortica-Bold.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..f467e2d92d8d1d583a3e18f5d9e11505542ee404 GIT binary patch literal 13424 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 SBP`Me<;RE9>?Sb>0000Hw6sJ3 literal 0 HcmV?d00001 diff --git a/assets/pictos/action-2.svg b/assets/pictos/action-2.svg new file mode 100644 index 0000000..7eb3a08 --- /dev/null +++ b/assets/pictos/action-2.svg @@ -0,0 +1,174 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/pictos/arrow_back.svg b/assets/pictos/arrow_back.svg new file mode 100644 index 0000000..5227c9c --- /dev/null +++ b/assets/pictos/arrow_back.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/pictos/arrow_forward.svg b/assets/pictos/arrow_forward.svg new file mode 100644 index 0000000..81d149c --- /dev/null +++ b/assets/pictos/arrow_forward.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/pictos/info.svg b/assets/pictos/info.svg new file mode 100644 index 0000000..c0e8076 --- /dev/null +++ b/assets/pictos/info.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/pictos/login.svg b/assets/pictos/login.svg new file mode 100644 index 0000000..ca9be8b --- /dev/null +++ b/assets/pictos/login.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/pictos/proximite.svg b/assets/pictos/proximite.svg index e5ad6ae..d120ebd 100644 --- a/assets/pictos/proximite.svg +++ b/assets/pictos/proximite.svg @@ -22,6 +22,7 @@ L 1, 12 Z" /> \ No newline at end of file diff --git a/assets/pictos/superposition.svg b/assets/pictos/superposition.svg index 592b183..174ba49 100644 --- a/assets/pictos/superposition.svg +++ b/assets/pictos/superposition.svg @@ -59,6 +59,7 @@ Z" /> - diff --git a/fichiertest b/fichiertest deleted file mode 100644 index e69de29..0000000 diff --git a/index.html b/index.html index 9b51217..2affefa 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,9 @@ +
+ @@ -21,37 +23,73 @@ -
- -
- -

Terrain de vie

-
-
- -

Proximité

-
-
- -

Superposition

-
-
- -

Puissance d'agir

-
-
- -

Action

-
-
- -

Doléancer

-
-
+
+
+ +
+
+

L'atlas

+

Les cartes

+
+
+ +
+ +
+ +

Terrain de vie

+
+
+ +

Proximité

+
+
+ +

Superposition

+
+
+ +

Puissance d'agir

+
+
+ +

Action

+
+
+ +

Doléancer

+
+
+ +
+ + +
+ + + + diff --git a/styles.css b/styles.css index f6b5ace..28e18b1 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,4 @@ @charset "UTF-8"; -/* mix blend mode est dépendant du stacking context */ @font-face { font-family: "Public"; font-style: normal; @@ -12,6 +11,12 @@ font-weight: 300; src: url("assets/fonts/PublicSans-Light.ttf") format("TrueType"); } +@font-face { + font-family: "Ortica"; + font-style: bold; + font-weight: 300; + src: url("assets/fonts/Ortica-Bold.woff2") format("woff2"); +} * { margin: 0; padding: 0; @@ -23,7 +28,10 @@ body { } #content { + padding: 1.5vh 1vw; position: fixed; + top: 0; + left: 0; width: 100vw; height: 100vh; display: flex; @@ -32,16 +40,17 @@ body { z-index: 1; } #content svg { - width: 30%; - height: auto; + position: absolute; + height: 50%; } #content svg path { cursor: pointer; } #content svg#fill { fill: white; + /* mix blend mode est dépendant du stacking context */ mix-blend-mode: overlay; - opacity: 0.6; + opacity: 0.4; } #content svg#stroke { position: absolute; @@ -49,64 +58,12 @@ body { stroke: black; stroke-width: 1px; } -#content #buttons_container { - position: absolute; - bottom: 5vh; - display: flex; - justify-content: center; - align-items: center; - z-index: 1; -} -#content #buttons_container .mode { - display: flex; - align-items: center; - justify-content: center; - background-color: white; - margin: 0px 10px; - padding: 7px 15px; - padding-left: 10px; - border-radius: 50px; - cursor: pointer; - border: solid 0.8px rgba(0, 0, 0, 0.5); - transition: border 0.4s ease-in-out; - font-weight: 300; - font-size: 1rem; -} -#content #buttons_container .mode svg { - width: 28px; - height: auto; - margin-right: 10px; -} -#content #buttons_container .mode svg .thick { - transition: stroke-width 0.2s ease-in-out; - stroke-width: 0.8; - stroke: black; -} -#content #buttons_container .mode svg .thin { - transition: stroke-width 0.2s ease-in-out; - stroke-width: 0.5; - stroke: black; -} -#content #buttons_container .mode p { - height: fit-content; - margin-bottom: 3px; -} -#content #buttons_container .mode.active { - font-weight: 400; - border: solid 1.2px rgb(0, 0, 0); -} -#content #buttons_container .mode.active svg .thick { - stroke-width: 1.2; - stroke: black; -} -#content #buttons_container .mode.active svg .thin { - stroke-width: 0.6; - stroke: black; -} #content #BG_BG_BG { position: absolute; width: 100vw; height: 100vh; + top: 0; + left: 0; background-size: 100% 100%; background-repeat: no-repeat; z-index: -1; @@ -117,6 +74,8 @@ body { position: absolute; width: 100vw; height: 100vh; + top: 0; + left: 0; background-size: 100% 100%; background-repeat: no-repeat; z-index: -2; @@ -134,4 +93,193 @@ body { position: relative; } +#buttons_container { + position: fixed; + top: 0; + left: 0; + z-index: 1; + display: flex; + align-items: center; + margin: 1.5vh 1vw; + height: 4vh; +} +#buttons_container .niveau_profondeur { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; + margin-right: 30px; + width: 5vw; +} +#buttons_container .niveau_profondeur p { + font-weight: 300; + cursor: pointer; +} +#buttons_container .niveau_profondeur p.selected { + font-weight: 400; + text-decoration: underline; +} +#buttons_container .niveau_profondeur p:hover { + font-weight: 400; +} +#buttons_container .arrow { + margin-right: 15px; +} +#buttons_container .arrow svg { + height: 27px; + width: auto; + fill: white; + stroke: black; + stroke-width: 0; + cursor: pointer; + margin-top: 4px; + transition: fill 0.2s ease-out; +} +#buttons_container .arrow svg:hover { + fill: rgb(110, 110, 110); +} +#buttons_container .arrow svg:active { + fill: rgb(50, 50, 50); +} +#buttons_container .arrow:last-of-type { + margin-right: 0; + margin-left: 12px; +} +#buttons_container .mode { + display: flex; + align-items: center; + justify-content: center; + background-color: white; + margin: 0; + margin-right: 14px; + padding: 7px 15px; + padding-left: 10px; + border-radius: 50px; + cursor: pointer; + border: solid 0.8px rgb(110, 110, 110); + color: rgba(0, 0, 0, 0.5); + transition: border 0.1s ease-out, color 0.1s ease-out; + font-weight: 300; + font-size: 1rem; +} +#buttons_container .mode svg { + width: 28px; + height: auto; + margin-right: 10px; +} +#buttons_container .mode svg .thick { + transition: stroke-width 0.2s ease-out, fill 0.2s ease-out, stroke 0.2s ease-out; + stroke-width: 0.8; + stroke: rgb(110, 110, 110); +} +#buttons_container .mode svg .thin { + transition: stroke-width 0.2s ease-out, fill 0.2s ease-out, stroke 0.2s ease-out; + stroke-width: 0.5; + stroke: rgb(110, 110, 110); +} +#buttons_container .mode svg .circle-fill { + fill: rgb(110, 110, 110); +} +#buttons_container .mode p { + height: fit-content; + margin-bottom: 3px; +} +#buttons_container .mode.active { + font-weight: 400; + border: solid 1.2px rgb(0, 0, 0); + color: rgb(0, 0, 0); +} +#buttons_container .mode.active svg .thick { + stroke-width: 1.2; + stroke: rgb(0, 0, 0); +} +#buttons_container .mode.active svg .thin { + stroke-width: 0.6; + stroke: rgb(0, 0, 0); +} +#buttons_container .mode.active svg .circle-fill { + fill: rgb(0, 0, 0); +} +#buttons_container .mode:hover { + color: rgb(50, 50, 50); + border-color: rgb(50, 50, 50); +} +#buttons_container .mode:hover svg .thick, #buttons_container .mode:hover svg .thin { + stroke: rgb(50, 50, 50); +} +#buttons_container .mode:hover svg .circle-fill { + fill: rgb(50, 50, 50); +} + +#global_nav { + position: fixed; + bottom: 0; + left: 0; + margin: 1.5vh 1vw; + z-index: 1; +} +#global_nav h1 { + font-family: "Ortica"; + font-size: 1.7em; + margin-bottom: 10px; + margin-left: 5px; +} +#global_nav #menu { + display: flex; +} +#global_nav #menu #search { + display: flex; + align-items: center; +} +#global_nav #menu #search input[type=search] { + height: 34px; + width: 10vw; + padding-left: 13px; + padding-right: 30px; + padding-bottom: 2px; + font-family: "Public"; + font-size: 1em; + font-weight: 300; + border-radius: 20px; + border: solid rgb(110, 110, 110) 1.2px; + color: rgb(110, 110, 110); + transition: color 0.2s ease-out; +} +#global_nav #menu #search input[type=search]:hover { + color: rgb(50, 50, 50); +} +#global_nav #menu #search input[type=search]:active { + color: black; +} +#global_nav #menu #search button { + background: none; + border: none; + cursor: pointer; +} +#global_nav #menu #search button svg { + margin-top: 3px; + margin-left: -45px; + height: 24px; + fill: rgb(110, 110, 110); + transition: fill 0.2s ease-out; +} +#global_nav #menu #search button svg:hover { + fill: rgb(50, 50, 50); +} +#global_nav #menu .menu_item { + font-weight: 300; + display: flex; + align-items: center; + cursor: pointer; + margin: 0 10px; + padding-bottom: 2px; +} +#global_nav #menu .menu_item svg { + height: 24px; + margin-right: -5px; +} +#global_nav #menu .menu_item:hover { + font-weight: 400; +} + /*# sourceMappingURL=styles.css.map */ diff --git a/styles.css.map b/styles.css.map index 78da76f..e3cf67b 100644 --- a/styles.css.map +++ b/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAAA;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAOJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAKJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGR;EACI;EACA;;AAGR;EACI;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAKZ;EACI;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;;AAMR;EACI;EACA;EACA;;;AAGJ;EACI","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAOA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAMJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAMJ;EACI,SA7Ca;EA8Cb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;;AAIR;EACI;AACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;;AAMR;EACI;EACA;EACA;;;AAGJ;EACI;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA,QA/Ha;EAgIb;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGR;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI,MA7JI;;AA+JR;EACI,MA/JC;;AAkKT;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA,QA9LA;;AAgMJ;EACI;EACA;EACA,QAnMA;;AAqMJ;EACE,MAtME;;AAyMR;EACI;EACA;;AAGR;EACI;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACE;;AAGN;EACI,OA9NK;EA+NL,cA/NK;;AAgOL;EACI,QAjOC;;AAmOL;EACI,MApOC;;;AAyOb;EACI;EACA;EACA;EACA,QAlPa;EAmPb;;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAtQA;EAuQA;;AAEJ;EACI,OAzQH;;AA2QD;EACI;;AAEJ;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA,MAvRJ;EAwRI;;AAEJ;EACI,MA1RP;;AA8RL;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAGR;EACI","file":"styles.css"} \ No newline at end of file diff --git a/styles.scss b/styles.scss index 6472326..f3b3afe 100644 --- a/styles.scss +++ b/styles.scss @@ -1,4 +1,9 @@ -/* mix blend mode est dépendant du stacking context */ +$global_margins: 1.5vh 1vw; + +$buttons_border_width: 1.2px; + +$grey_inactive: rgb(110, 110, 110); +$grey_hover: rgb(50, 50, 50); @font-face { font-family: 'Public'; @@ -14,6 +19,12 @@ src: url('assets/fonts/PublicSans-Light.ttf') format('TrueType'); } +@font-face { + font-family: 'Ortica'; + font-style: bold; + font-weight: 300; + src: url('assets/fonts/Ortica-Bold.woff2') format('woff2'); +} @@ -30,8 +41,12 @@ body { + #content { + padding: $global_margins; position: fixed; + top: 0; + left: 0; width: 100vw; height: 100vh; display: flex; @@ -40,8 +55,8 @@ body { z-index: 1; svg { - width: 30%; - height: auto; + position: absolute; + height: 50%; path { cursor: pointer; } @@ -49,8 +64,9 @@ body { svg#fill { fill: white; + /* mix blend mode est dépendant du stacking context */ mix-blend-mode: overlay; - opacity: 0.6; + opacity: 0.4; } svg#stroke { @@ -59,66 +75,13 @@ body { stroke: black; stroke-width: 1px; } - - #buttons_container { - position: absolute; - bottom: 5vh; - display: flex; - justify-content: center; - align-items: center; - z-index: 1; - .mode { - display: flex; - align-items: center; - justify-content: center; - background-color: white; - margin: 0px 10px; - padding: 7px 15px; - padding-left: 10px; - border-radius: 50px; - cursor: pointer; - border: solid 0.8px rgba(0, 0, 0, 0.5); - transition: border 0.4s ease-in-out; - font-weight: 300; - font-size: 1rem; - svg { - width: 28px; - height: auto; - margin-right: 10px; - .thick { - transition: stroke-width 0.2s ease-in-out; - stroke-width: 0.8; - stroke: black; - } - .thin { - transition: stroke-width 0.2s ease-in-out; - stroke-width: 0.5; - stroke: black; - } - } - p { - height: fit-content; - margin-bottom: 3px; - } - } - .mode.active { - font-weight: 400; - border: solid 1.2px rgba(0, 0, 0, 1); - svg .thick { - stroke-width: 1.2; - stroke: black; - } - svg .thin { - stroke-width: 0.6; - stroke: black; - } - } - } #BG_BG_BG { position: absolute; width: 100vw; height: 100vh; + top: 0; + left: 0; background-size: 100% 100%; background-repeat: no-repeat; @@ -131,6 +94,8 @@ body { position: absolute; width: 100vw; height: 100vh; + top: 0; + left: 0; background-size: 100% 100%; background-repeat: no-repeat; @@ -150,4 +115,194 @@ body { #grain-bg > * { position: relative; +} + + +#buttons_container { + position: fixed; + top: 0; + left: 0; + z-index: 1; + display: flex; + align-items: center; + margin: $global_margins; + height: 4vh; + .niveau_profondeur { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; + margin-right: 30px; + width: 5vw; + p { + font-weight: 300; + cursor: pointer; + } + p.selected { + font-weight: 400; + text-decoration: underline; + } + p:hover { + font-weight: 400; + } + } + .arrow { + margin-right: 15px; + svg { + height: 27px; + width: auto; + fill: white; + stroke: black; + stroke-width: 0; + cursor: pointer; + margin-top: 4px; + transition: fill 0.2s ease-out; + } + svg:hover { + fill: $grey_inactive; + } + svg:active { + fill: $grey_hover; + } + } + .arrow:last-of-type { + margin-right: 0; + margin-left: 12px; + } + .mode { + display: flex; + align-items: center; + justify-content: center; + background-color: white; + margin: 0; + margin-right: 14px; + padding: 7px 15px; + padding-left: 10px; + border-radius: 50px; + cursor: pointer; + border: solid 0.8px $grey_inactive; + color: rgba(0, 0, 0, 0.5); + transition: border 0.1s ease-out, color 0.1s ease-out; + font-weight: 300; + font-size: 1rem; + svg { + width: 28px; + height: auto; + margin-right: 10px; + .thick { + transition: stroke-width 0.2s ease-out, fill 0.2s ease-out, stroke 0.2s ease-out; + stroke-width: 0.8; + stroke: $grey_inactive; + } + .thin { + transition: stroke-width 0.2s ease-out, fill 0.2s ease-out, stroke 0.2s ease-out; + stroke-width: 0.5; + stroke: $grey_inactive; + } + .circle-fill { + fill: $grey_inactive; + } + } + p { + height: fit-content; + margin-bottom: 3px; + } + } + .mode.active { + font-weight: 400; + border: solid $buttons_border_width rgba(0, 0, 0, 1); + color: rgba(0, 0, 0, 1); + svg .thick { + stroke-width: 1.2; + stroke: rgba(0, 0, 0, 1); + } + svg .thin { + stroke-width: 0.6; + stroke: rgba(0, 0, 0, 1); + } + svg .circle-fill { + fill: rgba(0, 0, 0, 1); + } + } + .mode:hover { + color: $grey_hover; + border-color: $grey_hover; + svg .thick, svg .thin { + stroke: $grey_hover; + } + svg .circle-fill { + fill: $grey_hover; + } + } +} + +#global_nav { + position: fixed; + bottom: 0; + left: 0; + margin: $global_margins; + z-index: 1; + h1 { + font-family: 'Ortica'; + font-size: 1.7em; + margin-bottom: 10px; + margin-left: 5px; + } + #menu { + display: flex; + #search { + display: flex; + align-items: center; + input[type="search"] { + height: 34px; + width: 10vw; + padding-left: 13px; + padding-right: 30px; + padding-bottom: 2px; + font-family: 'Public'; + font-size: 1em; + font-weight: 300; + border-radius: 20px; + border: solid $grey_inactive $buttons_border_width; + color: $grey_inactive; + transition: color 0.2s ease-out; + } + input[type="search"]:hover { + color: $grey_hover; + } + input[type="search"]:active { + color: black; + } + button { + background: none; + border: none; + cursor: pointer; + svg { + margin-top: 3px; + margin-left: -45px; + height: 24px; + fill: $grey_inactive; + transition: fill 0.2s ease-out; + } + svg:hover { + fill: $grey_hover; + } + } + } + .menu_item { + font-weight: 300; + display: flex; + align-items: center; + cursor: pointer; + margin: 0 10px; + padding-bottom: 2px; + svg { + height: 24px; + margin-right: -5px; + } + } + .menu_item:hover { + font-weight: 400; + } + } } \ No newline at end of file diff --git a/styles.scss.map b/styles.scss.map new file mode 100644 index 0000000..97c768b --- /dev/null +++ b/styles.scss.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["styles.css"],"names":[],"mappings":";AACA;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF","file":"styles.scss"} \ No newline at end of file