diff --git a/assets/fonts/Ortica-Bold.woff2 b/assets/fonts/Ortica-Bold.woff2 new file mode 100644 index 0000000..f467e2d Binary files /dev/null and b/assets/fonts/Ortica-Bold.woff2 differ 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