Browse Source

first commit

val 1 year ago
commit
bf635fea29
52 changed files with 1389 additions and 0 deletions
  1. BIN
      .gitignore
  2. BIN
      _WORKFILES/captures/boussole - associations-1.png.png
  3. BIN
      _WORKFILES/captures/boussole - associations.png.png
  4. BIN
      _WORKFILES/captures/boussole - doleance.png.png
  5. BIN
      _WORKFILES/captures/boussole - proximité V2.png.png
  6. BIN
      _WORKFILES/captures/boussole - proximité.png.png
  7. BIN
      _WORKFILES/captures/boussole - puissance d'agir-1.png-2.png
  8. BIN
      _WORKFILES/captures/boussole - puissance d'agir-1.png.png
  9. BIN
      _WORKFILES/captures/boussole - supperpositions-1.png-2.png
  10. BIN
      _WORKFILES/captures/boussole - supperpositions-1.png.png
  11. BIN
      _WORKFILES/captures/boussole - supperpositions.png.png
  12. BIN
      _WORKFILES/captures/boussole - terrain de vie V2-2.png.png
  13. BIN
      _WORKFILES/captures/boussole - terrain de vie V2.png.png
  14. BIN
      _WORKFILES/captures/boussole - terrain de vie- zoom.png.png
  15. BIN
      _WORKFILES/captures/boussole - terrain de vie-1.png.png
  16. BIN
      _WORKFILES/captures/boussole - terrain de vie-2.png.png
  17. BIN
      _WORKFILES/captures/boussole - terrain de vie.png-2.png
  18. BIN
      _WORKFILES/captures/boussole - terrain de vie.png.png
  19. BIN
      _WORKFILES/captures/carte - associations.png.png
  20. BIN
      _WORKFILES/captures/carte - doléance.png.png
  21. BIN
      _WORKFILES/captures/carte - proximité V2.png.png
  22. BIN
      _WORKFILES/captures/carte - proximité.png.png
  23. BIN
      _WORKFILES/captures/carte - puissance d'agir.png.png
  24. BIN
      _WORKFILES/captures/carte - superpositions.png.png
  25. BIN
      _WORKFILES/captures/carte - terrain de vie V2.png.png
  26. BIN
      _WORKFILES/captures/carte - terrain de vie.png-2.png
  27. BIN
      _WORKFILES/captures/carte - terrain de vie.png.png
  28. BIN
      _WORKFILES/captures/interactions - terrain de vie.png.png
  29. BIN
      _WORKFILES/captures/interraction - association.png.png
  30. 131 0
      _WORKFILES/dessin-pictos.svg
  31. 42 0
      _WORKFILES/dev_design_fevrier.txt
  32. BIN
      _WORKFILES/ref-pîcto-action-sorcellerie-capitaliste.png
  33. BIN
      _WORKFILES/schéma navigation/schéma navigation.png
  34. BIN
      assets/fonts/PublicSans-Light.ttf
  35. BIN
      assets/fonts/PublicSans-Regular.ttf
  36. BIN
      assets/fonts/PublicSans-Thin.ttf
  37. 108 0
      assets/pictos/action.svg
  38. 114 0
      assets/pictos/doleance.svg
  39. 63 0
      assets/pictos/proximite.svg
  40. 53 0
      assets/pictos/puissance-d-agir.svg
  41. 96 0
      assets/pictos/superposition.svg
  42. 59 0
      assets/pictos/terrain-de-vie.svg
  43. 126 0
      background.js
  44. 9 0
      grained/LICENSE
  45. 60 0
      grained/README.md
  46. 26 0
      grained/bower.json
  47. 148 0
      grained/grained.js
  48. 6 0
      grained/grained.min.js
  49. 58 0
      index.html
  50. 137 0
      styles.css
  51. 0 0
      styles.css.map
  52. 153 0
      styles.scss

BIN
.gitignore


BIN
_WORKFILES/captures/boussole - associations-1.png.png


BIN
_WORKFILES/captures/boussole - associations.png.png


BIN
_WORKFILES/captures/boussole - doleance.png.png


BIN
_WORKFILES/captures/boussole - proximité V2.png.png


BIN
_WORKFILES/captures/boussole - proximité.png.png


BIN
_WORKFILES/captures/boussole - puissance d'agir-1.png-2.png


BIN
_WORKFILES/captures/boussole - puissance d'agir-1.png.png


BIN
_WORKFILES/captures/boussole - supperpositions-1.png-2.png


BIN
_WORKFILES/captures/boussole - supperpositions-1.png.png


BIN
_WORKFILES/captures/boussole - supperpositions.png.png


BIN
_WORKFILES/captures/boussole - terrain de vie V2-2.png.png


BIN
_WORKFILES/captures/boussole - terrain de vie V2.png.png


BIN
_WORKFILES/captures/boussole - terrain de vie- zoom.png.png


BIN
_WORKFILES/captures/boussole - terrain de vie-1.png.png


BIN
_WORKFILES/captures/boussole - terrain de vie-2.png.png


BIN
_WORKFILES/captures/boussole - terrain de vie.png-2.png


BIN
_WORKFILES/captures/boussole - terrain de vie.png.png


BIN
_WORKFILES/captures/carte - associations.png.png


BIN
_WORKFILES/captures/carte - doléance.png.png


BIN
_WORKFILES/captures/carte - proximité V2.png.png


BIN
_WORKFILES/captures/carte - proximité.png.png


BIN
_WORKFILES/captures/carte - puissance d'agir.png.png


BIN
_WORKFILES/captures/carte - superpositions.png.png


BIN
_WORKFILES/captures/carte - terrain de vie V2.png.png


BIN
_WORKFILES/captures/carte - terrain de vie.png-2.png


BIN
_WORKFILES/captures/carte - terrain de vie.png.png


BIN
_WORKFILES/captures/interactions - terrain de vie.png.png


BIN
_WORKFILES/captures/interraction - association.png.png


+ 131 - 0
_WORKFILES/dessin-pictos.svg

@@ -0,0 +1,131 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="210mm"
+   height="297mm"
+   viewBox="0 0 210 297"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
+   sodipodi:docname="dessin-pictos.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1"
+     inkscape:cx="154.5"
+     inkscape:cy="29"
+     inkscape:window-width="2880"
+     inkscape:window-height="1526"
+     inkscape:window-x="-11"
+     inkscape:window-y="-11"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="page"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g2528"
+       inkscape:label="terrain-de-vie-REGULAR-MENU"
+       transform="translate(6.2177084,-2.2489583)"
+       inkscape:export-filename="..\assets\pictos\terrain-de-vie-REGULAR-MENU.svg"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96">
+      <ellipse
+         style="fill:none;stroke:#000000;stroke-width:0.211667;stroke-dasharray:none;stroke-opacity:1"
+         id="path790"
+         cx="71.357956"
+         cy="19.674818"
+         rx="4.5815058"
+         ry="4.5815053" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:0.079375;stroke-dasharray:none;stroke-opacity:1"
+         d="m 71.357956,15.044283 v 9.216103"
+         id="path1684" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:0.079375;stroke-dasharray:none;stroke-opacity:1"
+         d="M 75.966008,19.674818 H 66.749905"
+         id="path1686" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:0.079375;stroke-dasharray:none;stroke-opacity:1"
+         d="M 71.376784,15.172736 72.33624,16.30742"
+         id="path1688" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:0.079375;stroke-dasharray:none;stroke-opacity:1"
+         d="m 71.331631,15.175325 -0.959456,1.134683"
+         id="path1690" />
+      <path
+         style="fill:#ffffff;stroke:#000000;stroke-width:0.211667;stroke-dasharray:none;stroke-opacity:1"
+         d="m 68.731778,18.579643 1.555716,-1.285982 1.88169,-0.245245 1.930202,1.322245 0.02279,1.904879 -1.590524,1.765844 -2.806214,0.467818 -1.274387,-1.625623 z"
+         id="path1694"
+         sodipodi:nodetypes="ccccccccc" />
+    </g>
+    <g
+       id="g4074"
+       inkscape:label="puissance-d-agir-REGULAR-MENU"
+       transform="translate(3.175,-1.7197917)"
+       inkscape:export-filename="..\assets\pictos\puissance-d-agir-REGULAR-MENU.svg"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96">
+      <circle
+         style="fill:none;stroke:#000000;stroke-width:0.211667;stroke-dasharray:none;stroke-opacity:1"
+         id="path3315"
+         cx="92.027863"
+         cy="19.082895"
+         r="4.6104493" />
+      <ellipse
+         style="fill:none;stroke:#000000;stroke-width:0.079375;stroke-dasharray:none;stroke-opacity:1"
+         id="circle4047"
+         cx="92.027863"
+         cy="19.082895"
+         rx="2.2631533"
+         ry="2.2631531" />
+      <circle
+         style="fill:#000000;stroke:none;stroke-width:0.0672404;stroke-dasharray:none;stroke-opacity:1"
+         id="path4049"
+         cx="92.027863"
+         cy="19.082895"
+         r="0.39687499" />
+      <path
+         style="fill:#000000;stroke:#000000;stroke-width:0.0738563;stroke-dasharray:none;stroke-opacity:1"
+         d="m 87.381484,19.082895 h 9.292758"
+         id="path4051" />
+      <path
+         style="fill:#000000;stroke:#000000;stroke-width:0.0738563;stroke-dasharray:none;stroke-opacity:1"
+         d="M 92.027863,23.729274 V 14.436516"
+         id="path4053" />
+      <path
+         style="fill:#000000;stroke:#000000;stroke-width:0.0738563;stroke-dasharray:none;stroke-opacity:1"
+         d="m 94.351053,23.106777 -4.64638,-8.047764"
+         id="path4057" />
+      <path
+         style="fill:#000000;stroke:#000000;stroke-width:0.0738563;stroke-dasharray:none;stroke-opacity:1"
+         d="M 96.051746,21.406084 88.00398,16.759706"
+         id="path4059" />
+      <path
+         style="fill:#000000;stroke:#000000;stroke-width:0.0738563;stroke-dasharray:none;stroke-opacity:1"
+         d="m 96.051745,16.759705 -8.047764,4.64638"
+         id="path4061" />
+      <path
+         style="fill:#000000;stroke:#000000;stroke-width:0.0738563;stroke-dasharray:none;stroke-opacity:1"
+         d="m 94.351052,15.059012 -4.646378,8.047766"
+         id="path4063" />
+    </g>
+  </g>
+</svg>

+ 42 - 0
_WORKFILES/dev_design_fevrier.txt

@@ -0,0 +1,42 @@
+I / PICTOS
+
+OUTILS D'ENQUETE
+1.1 terrain de vie
+1.2 proximité
+1.3 superposition
+1.4 puissance d'agir
+1.5 actions
+1.6 doléancier
+
+Deux graisse : regular (0.8px, 0.3px) et active (1.2px, 0.6px)
+Deux tailles : 35px (menu) et 28px (cartel)
+Points : 3px 5px
+
+NAVIGATION
+2.1 mode d'emploi
+2.2 connexion
+2.3 rechercher
+2.4 retour aux cartes vivantes
+2.5 casque écoute
+2.6 chevron fermer onglet
+2.7 entités liées (sens de liaison)
+2.8 scrollbar
+2.9 custom video/sound player
+
+FOND D'ENQUÊTE
+3.1 terrain de vie
+3.2 puissance d'agir
+3.3 doléance
+
+Essayer les pictos contextuellement	-> +ieurs tailles et épaisseurs ?
+					-> rapport à la typo
+
+
+II / ANIMATIONS
+1. Terrains de vie en particules
+2. Survol terrains de vie sur carte
+3. Ecoute terrain de vie sur carte
+4. Survol association sur carte
+5. Survol entité sur enquête
+6. Apparition volets latéraux enquête
+7. Clic/survol menu mode de navigation

BIN
_WORKFILES/ref-pîcto-action-sorcellerie-capitaliste.png


BIN
_WORKFILES/schéma navigation/schéma navigation.png


BIN
assets/fonts/PublicSans-Light.ttf


BIN
assets/fonts/PublicSans-Regular.ttf


BIN
assets/fonts/PublicSans-Thin.ttf


+ 108 - 0
assets/pictos/action.svg

@@ -0,0 +1,108 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="35px"
+   height="35px"
+   viewBox="0 0 35 35"
+   xmlns="http://www.w3.org/2000/svg">
+   <g id="picto">
+    <circle
+        class="thin"
+        fill="white"
+        stroke="none"
+        cx="17.5"
+        cy="17.5"
+        r="9" />
+    <line
+        class="thin"
+        x1="17.5"
+        y1="12"
+        x2="17.5"
+        y2="23" />
+    <line
+        class="thin"
+        x1="17.5"
+        y1="12"
+        x2="17.5"
+        y2="23"
+        transform="rotate(45, 17.5, 17.5)" />
+    <line
+        class="thin"
+        x1="17.5"
+        y1="12"
+        x2="17.5"
+        y2="23"
+        transform="rotate(90, 17.5, 17.5)" />
+    <line
+        class="thin"
+        x1="17.5"
+        y1="12"
+        x2="17.5"
+        y2="23"
+        transform="rotate(135, 17.5, 17.5)" />
+    <path
+        class="thick"
+        fill="white"
+        d="M 14, 25.5
+            L 17.5, 17.5
+            L 21, 25.5"
+        transform-origin="center"
+        transform="translate(0 -16)" />
+    <path
+        class="thick"
+        fill="white"
+        d="M 14, 25.5
+            L 17.5, 17.5
+            L 21, 25.5"
+        transform-origin="center"
+        transform="rotate(45) translate(0 -16)" />
+    <path
+        class="thick"
+        fill="white"
+        d="M 14, 25.5
+            L 17.5, 17.5
+            L 21, 25.5"
+        transform-origin="center"
+        transform="rotate(90) translate(0 -16)" />
+    <path
+        class="thick"
+        fill="white"
+        d="M 14, 25.5
+            L 17.5, 17.5
+            L 21, 25.5"
+        transform-origin="center"
+        transform="rotate(135) translate(0 -16)" />
+    <path
+        class="thick"
+        fill="white"
+        d="M 14, 25.5
+            L 17.5, 17.5
+            L 21, 25.5"
+        transform-origin="center"
+        transform="rotate(180) translate(0 -16)" />
+    <path
+        class="thick"
+        fill="white"
+        d="M 14, 25.5
+            L 17.5, 17.5
+            L 21, 25.5"
+        transform-origin="center"
+        transform="rotate(225) translate(0 -16)" />
+    <path
+        class="thick"
+        fill="white"
+        d="M 14, 25.5
+            L 17.5, 17.5
+            L 21, 25.5"
+        transform-origin="center"
+        transform="rotate(270) translate(0 -16)" />
+    <path
+        class="thick"
+        fill="white"
+        d="M 14, 25.5
+            L 17.5, 17.5
+            L 21, 25.5"
+        transform-origin="center"
+        transform="rotate(315) translate(0 -16)" />
+
+    </g> 
+</svg>

+ 114 - 0
assets/pictos/doleance.svg

@@ -0,0 +1,114 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="35px"
+   height="35px"
+   viewBox="0 0 35 35"
+   xmlns="http://www.w3.org/2000/svg">
+   <g id="picto">
+        <circle
+            class="thick"
+            fill="white"
+            cx="17.5"
+            cy="17.5"
+            r="17" />
+        <line
+            class="thin"
+            x1="17.5"
+            y1="0"
+            x2="17.5"
+            y2="35" />
+        <line
+            class="thin"
+            x1="17.5"
+            y1="0"
+            x2="17.5"
+            y2="35"
+            transform="rotate(45, 17.5, 17.5)" />
+        <line
+            class="thin"
+            x1="17.5"
+            y1="0"
+            x2="17.5"
+            y2="35"
+            transform="rotate(90, 17.5, 17.5)" />
+        <line
+            class="thin"
+            x1="17.5"
+            y1="0"
+            x2="17.5"
+            y2="35"
+            transform="rotate(135, 17.5, 17.5)" />
+        <circle
+            class="thin"
+            fill="white"
+            cx="17.5"
+            cy="17.5"
+            r="8" />
+
+        <path
+            class="thin"
+            fill="none"
+            d="M 15.5, 20.5
+                L 17.5, 17.5
+                L 19.5, 20.5"
+            transform-origin="center"
+            transform="translate(-12 2)" />
+        <path
+            class="thin"
+            fill="none"
+            d="M 15.5, 20.5
+                L 17.5, 17.5
+                L 19.5, 20.5"
+            transform-origin="center"
+            transform="rotate(45) translate(-12 2)" />
+        <path
+            class="thin"
+            fill="none"
+            d="M 15.5, 20.5
+                L 17.5, 17.5
+                L 19.5, 20.5"
+            transform-origin="center"
+            transform="rotate(90) translate(-12 2)" />
+        <path
+            class="thin"
+            fill="none"
+            d="M 15.5, 20.5
+                L 17.5, 17.5
+                L 19.5, 20.5"
+            transform-origin="center"
+            transform="rotate(135) translate(-12 2)" />
+        <path
+            class="thin"
+            fill="none"
+            d="M 15.5, 20.5
+                L 17.5, 17.5
+                L 19.5, 20.5"
+            transform-origin="center"
+            transform="rotate(180) translate(-12 2)" />
+        <path
+            class="thin"
+            fill="none"
+            d="M 15.5, 20.5
+                L 17.5, 17.5
+                L 19.5, 20.5"
+            transform-origin="center"
+            transform="rotate(225) translate(-12 2)" />
+        <path
+            class="thin"
+            fill="none"
+            d="M 15.5, 20.5
+                L 17.5, 17.5
+                L 19.5, 20.5"
+            transform-origin="center"
+            transform="rotate(270) translate(-12 2)" />
+        <path
+            class="thin"
+            fill="none"
+            d="M 15.5, 20.5
+                L 17.5, 17.5
+                L 19.5, 20.5"
+            transform-origin="center"
+            transform="rotate(315) translate(-12 2)" />
+
+    </g> 
+</svg>

+ 63 - 0
assets/pictos/proximite.svg

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="35px"
+   height="35px"
+   viewBox="0 0 35 35"
+   xmlns="http://www.w3.org/2000/svg">
+   <g id="picto">
+    <path
+        class="thick"
+        fill="white"
+        d="M 4, 4
+           L 13, 1
+           L 19, 5
+           L 28, 3
+           L 34, 12
+           L 29, 22
+           L 27, 29
+           L 21, 34
+           L 14, 31
+           L 12, 23
+           L 4, 17
+           L 1, 12
+           Z" />    
+    <circle
+        fill="black"
+        cx="17.5"
+        cy="17.5"
+        r="2.5" />
+    <path 
+        class="thin"
+        fill="none"
+        d="M 7, 7
+           L 11, 5
+           L 15, 7
+           L 12, 12
+           L 12, 15
+           L 9, 16
+           L 5, 12
+           Z" />
+    <path 
+        class="thin"
+        fill="none"
+        d="M 20, 11
+           L 22, 9
+           L 24, 9
+           L 27, 7
+           L 29, 11
+           L 26, 15
+           L 24, 16
+           L 21, 14
+           Z" />
+    <path 
+        class="thin"
+        fill="none"
+        d="M 18, 23
+           L 22, 22
+           L 24, 25
+           L 22, 28
+           L 20, 29
+           L 17, 27
+           Z" />
+    </g> 
+</svg>

+ 53 - 0
assets/pictos/puissance-d-agir.svg

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="35px"
+   height="35px"
+   viewBox="0 0 35 35"
+   xmlns="http://www.w3.org/2000/svg">
+   <g id="picto">
+    <circle
+        class="thick"
+        fill="white"
+        cx="17.5"
+        cy="17.5"
+        r="17" />
+    <circle
+        class="thin"
+        fill="none"
+        cx="17.5"
+        cy="17.5"
+        r="9.3" />
+    <circle
+        fill="black"
+        cx="17.5"
+        cy="17.5"
+        r="2.5" />
+    <line
+        class="thin"
+        x1="17.5"
+        y1="0"
+        x2="17.5"
+        y2="35" />
+    <line
+        class="thin"
+        x1="17.5"
+        y1="0"
+        x2="17.5"
+        y2="35"
+        transform="rotate(45, 17.5, 17.5)" />
+    <line
+        class="thin"
+        x1="17.5"
+        y1="0"
+        x2="17.5"
+        y2="35"
+        transform="rotate(90, 17.5, 17.5)" />
+    <line
+        class="thin"
+        x1="17.5"
+        y1="0"
+        x2="17.5"
+        y2="35"
+        transform="rotate(135, 17.5, 17.5)" />
+    </g> 
+</svg>

+ 96 - 0
assets/pictos/superposition.svg

@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="35px"
+   height="35px"
+   viewBox="0 0 35 35"
+   xmlns="http://www.w3.org/2000/svg">
+   <g id="picto">    
+    <path 
+        class="thick"
+        d="M 12, 13
+           L 21, 13
+           L 31, 22
+           L 22, 32
+           L 8, 26
+           Z" />
+    <path 
+        class="thick"
+        d="M 1, 11
+           L 9, 2
+           L 25, 9
+           L 21, 23
+           L 3, 20
+           Z" />
+    <path 
+        class="thick"
+        d="M 21, 2
+           L 30, 6
+           L 33, 13
+           L 25, 24
+           L 18, 27
+           L 7, 12
+           Z" />
+           
+            
+    <path 
+        fill="white"
+        d="M 12, 13
+           L 21, 13
+           L 31, 22
+           L 22, 32
+           L 8, 26
+           Z" />
+    <path 
+        fill="white"
+        d="M 1, 11
+           L 9, 2
+           L 25, 9
+           L 21, 23
+           L 3, 20
+           Z" />
+    <path 
+        fill="white"
+        d="M 21, 2
+           L 30, 6
+           L 33, 13
+           L 25, 24
+           L 18, 27
+           L 7, 12
+           Z" />
+
+    <circle
+        fill="black"
+        cx="17.5"
+        cy="17.5"
+        r="2.5" />
+
+    <path 
+        class="thin"
+        fill="none"
+        d="M 12, 13
+           L 21, 13
+           L 31, 22
+           L 22, 32
+           L 8, 26
+           Z" />
+    <path 
+        class="thin"
+        fill="none"
+        d="M 1, 11
+           L 9, 2
+           L 25, 9
+           L 21, 23
+           L 3, 20
+           Z" />
+    <path 
+        class="thin"
+        fill="none"
+        d="M 21, 2
+           L 30, 6
+           L 33, 13
+           L 25, 24
+           L 18, 27
+           L 7, 12
+           Z" />
+    </g> 
+</svg>

+ 59 - 0
assets/pictos/terrain-de-vie.svg

@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="35px"
+   height="35px"
+   viewBox="0 0 35 35"
+   xmlns="http://www.w3.org/2000/svg">
+   <g id="picto">
+    <circle
+        class="thick"
+        fill="white"
+        cx="17.5"
+        cy="17.5"
+        r="17" />
+    <line
+        class="thin"
+        x1="17.5"
+        y1="0"
+        x2="17.5"
+        y2="35" />
+    <line
+        class="thin"
+        x1="17.5"
+        y1="0"
+        x2="17.5"
+        y2="35"
+        transform="rotate(90, 17.5, 17.5)" />
+    <path
+        class="thick"
+        fill="white"
+        d="M 9, 12
+           L 21, 8
+           L 27, 14
+           L 27, 21
+           L 19, 26
+           L 12, 27
+           L 6, 21
+           Z"
+        transform="translate(0 0.5)"
+    />
+
+    <path
+        class="thin"
+        fill="none"
+        d="M 15, 20.5
+            L 17.5, 17.5
+            L 20, 20.5"
+        transform-origin="center"
+        transform="translate(0 -15.75)" />
+    <path
+        class="thin"
+        fill="none"
+        d="M 15, 20.5
+            L 17.5, 17.5
+            L 20, 20.5"
+        transform-origin="center"
+        transform="rotate(90) translate(0 -15.75)" />
+
+    </g> 
+</svg>

+ 126 - 0
background.js

@@ -0,0 +1,126 @@
+// grain
+grained('#grain-bg', {
+    animate: true,
+    patternWidth: 100,
+    patternHeight: 100,
+    grainOpacity: 0.5,
+    grainDensity: 1,
+    grainWidth: 1,
+    grainHeight: 1,
+    grainChaos: 10,
+    grainSpeed: 1
+});
+
+/* 
+|O couleur prev      O  |
+|     couleur d'appoint |
+|                       |
+|                       |
+|                       |
+|        couleur next  O|
+*/
+
+//  au clic sur le mode suivant :
+//  - couleurs prev devient la next précédente (ou inverse si page cliquée < page courante)
+//  - couleurs next (ou prev) est une nouvelle couleur
+//  - couleur appoint s'adapte en fonction de couleur next
+
+
+let pageAmount = 0;
+let currentPage = 1, prevPage;
+
+document.querySelectorAll('.mode').forEach(function(node, index) {
+    pageAmount++;
+    node.addEventListener('click', function() {
+        document.querySelectorAll('.active').forEach(function(el) {
+            el.classList.remove('active'); 
+        });
+        node.classList.toggle('active');
+        prevPage = currentPage;
+        currentPage = index + 1;
+
+        console.log(currentPage, prevPage);
+
+        if (currentPage != prevPage) {
+            if (currentPage > prevPage) {
+                couleurs.prev.h = couleurs.next.h + (360 / pageAmount) * (currentPage - prevPage - 1);
+                couleurs.next.h = couleurs.next.h + (360 / pageAmount) * (currentPage - prevPage);
+            } else {
+                couleurs.next.h = couleurs.prev.h + (360 / pageAmount) * (currentPage - prevPage + 1);
+                couleurs.prev.h = couleurs.prev.h + (360 / pageAmount) * (currentPage - prevPage);
+            }
+            couleurs.appoint.h = couleurs.next.h + 200;
+            console.log(couleurs.prev.h, couleurs.next.h);
+    
+            let mainContainer = document.getElementById('BG_BG_BG');
+            let containerTmp = document.getElementById('BG_BG_BG_tmp');
+            containerTmp.style.background = `
+            radial-gradient(circle at 0% 14%, 
+                    hsl(${couleurs.prev.h} ${couleurs.prev.s}% ${couleurs.prev.l}%) 40%,
+                    rgba(255, 255, 255, 0) 100%),
+            radial-gradient(circle at 93% 95%,
+                hsl(${couleurs.next.h} ${couleurs.next.s}% ${couleurs.next.l}%) 0%,
+                rgba(255, 255, 255, 0) 100%),
+            radial-gradient(circle at 73% 10%,
+                hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%,
+                rgba(255, 255, 255, 0) 100%)
+            `;
+            containerTmp.style.opacity = 1;
+            setTimeout(function() {
+                mainContainer.style.opacity = 0;
+            },100);
+    
+            setTimeout(function() {
+                mainContainer.style.background = `
+                radial-gradient(circle at 0% 14%, 
+                        hsl(${couleurs.prev.h} ${couleurs.prev.s}% ${couleurs.prev.l}%) 40%,
+                        rgba(255, 255, 255, 0) 100%),
+                radial-gradient(circle at 93% 95%,
+                    hsl(${couleurs.next.h} ${couleurs.next.s}% ${couleurs.next.l}%) 0%,
+                    rgba(255, 255, 255, 0) 100%),
+                radial-gradient(circle at 73% 10%,
+                    hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%,
+                    rgba(255, 255, 255, 0) 100%)
+                `;
+                containerTmp.style.opacity = 0;
+                mainContainer.style.opacity = 1;
+            }, 500);
+        }
+
+    })
+});
+
+let couleurs = {
+    prev: {
+        h: 42,
+        s: 40.6,
+        l: 44.9 + 20,
+    },
+    next: {
+        h: 0,
+        s: 30.5,
+        l: 46.3 + 20,
+    },
+    appoint: {
+        h: 0,
+        s: 66,
+        l: 35.7 + 20,
+    }
+}
+
+couleurs.next.h = couleurs.prev.h + (360 / pageAmount);
+couleurs.appoint.h = couleurs.next.h + 200;
+console.log(couleurs.prev.h, couleurs.next.h);
+
+let container = document.getElementById("BG_BG_BG");
+container.style.background = `
+radial-gradient(circle at 0% 14%, 
+        hsl(${couleurs.prev.h} ${couleurs.prev.s}% ${couleurs.prev.l}%) 40%,
+        rgba(255, 255, 255, 0) 100%),
+radial-gradient(circle at 93% 95%,
+    hsl(${couleurs.next.h} ${couleurs.next.s}% ${couleurs.next.l}%) 0%,
+    rgba(255, 255, 255, 0) 100%),
+radial-gradient(circle at 73% 10%,
+    hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%,
+    rgba(255, 255, 255, 0) 100%)
+`;

+ 9 - 0
grained/LICENSE

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) 2014, Sarath Saleem
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

+ 60 - 0
grained/README.md

@@ -0,0 +1,60 @@
+
+Add animated grain texture effect to your content.
+--------------------------------------------------
+
+With **grained.js** you can add customized noise effect on your web page. It has easily customizable options to generate the animated noise effect.
+The animation is added using CSS3 key-frame animation and instantly generated png noise image.
+
+[!["Create your own"](http://sarathsaleem.github.io/grained/img/textute-list.gif)](http://sarathsaleem.github.io/grained)
+
+**[Create your own](http://sarathsaleem.github.io/grained)**
+
+How to use
+------------
+
+Include the library file in your html page.
+
+    <script src="grained.js"></script>
+
+initialize the library by
+
+    grained('elementId',options)
+
+*`'elementId'`* is the id of the container element to add the grain effect.  It is important to note that grainedjs will not change the background of the container element. It appends a div element as the first child of the container. Grainedjs will add two style changes to the container element *`'position:relative;overflow:hidden'.`* If the container position is absolute it will remand as absolute only.
+
+Since a `'div'` element with class `'grained'` is added as first child element with position absolute it will have the z index priority and appears on top of other contents in the container element. If you want the other elements in container element on top of grained effect you have to  add a css like
+
+*`#container > * { position:relative; }`*
+
+So the ideal structure of implementaion is like follows
+
+    <div id="container">
+       <div class="contents">
+         your contents goes here .. like <a>, <p> etc
+       </div>
+    </div>
+after initilizing  `grained('#container', {});` it will look like this
+
+
+    <div id="container">
+        <div class='grained'></div>
+        <div class="contents">
+            your contents goes here .. like <a>, <p> etc
+        </div>
+    </div>
+
+Options
+-------
+
+With these options you can crate customized grained effect , these are the option parameter you can change and the default values.
+
+     var options = {
+             animate: true,
+             patternWidth: 100,
+             patternHeight: 100,
+             grainOpacity: 0.05,
+             grainDensity: 1,
+             grainWidth: 1,
+             grainHeight: 1
+     };
+With animation true/false you can create textures with grain movement and a static one. The other value you can see the live in **[online generator](http://sarathsaleem.github.io/grained)**

+ 26 - 0
grained/bower.json

@@ -0,0 +1,26 @@
+{
+  "name": "Grained",
+  "main": "grained.js",
+  "version": "0.0.1",
+  "homepage": "https://github.com/sarathsaleem/grained",
+  "authors": [
+    "Sarath Saleem <https://github.com/sarathsaleem>"
+  ],
+  "description": "Add animated grain noise texture effect to your web content",
+  "keywords": [
+    "texture",
+    "grained",
+    "grain-effect",
+    "noise",
+    "noise-effect",
+    "generate-texture"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}

+ 148 - 0
grained/grained.js

@@ -0,0 +1,148 @@
+/*! Grained.js
+* Author : Sarath Saleem  - https://github.com/sarathsaleem
+* MIT license: http://opensource.org/licenses/MIT
+* GitHub : https://github.com/sarathsaleem/grained
+* v0.0.1
+*/
+(function (window, doc) {
+
+    "use strict";
+
+    function grained(ele, opt) {
+
+        var element = null,
+            elementId = null,
+            selectorElement = null;
+
+        if (typeof ele === 'string') {
+            element = doc.getElementById(ele.split('#')[1]);
+        }
+
+        if (!element) {
+            console.error('Grained: cannot find the element with id ' + ele);
+            return;
+        } else {
+            elementId = element.id;
+        }
+
+        //set style for parent
+        if (element.style.position !== 'absolute') {
+            element.style.position = 'relative';
+        }
+        element.style.overflow = 'hidden';
+
+        var prefixes = ["", "-moz-", "-o-animation-", "-webkit-", "-ms-"];
+
+        //default option values
+        var options = {
+            animate: true,
+            patternWidth: 100,
+            patternHeight: 100,
+            grainOpacity: 0.1,
+            grainDensity: 1,
+            grainWidth: 1,
+            grainHeight: 1,
+            grainChaos: 0.5,
+            grainSpeed: 20
+
+        };
+
+        Object.keys(opt).forEach(function (key) {
+            options[key] = opt[key];
+        });
+
+
+        var generateNoise = function () {
+            var canvas = doc.createElement('canvas');
+            var ctx = canvas.getContext('2d');
+            canvas.width = options.patternWidth;
+            canvas.height = options.patternHeight;
+            for (var w = 0; w < options.patternWidth; w += options.grainDensity) {
+                for (var h = 0; h < options.patternHeight; h += options.grainDensity) {
+                    var rgb = Math.random() * 256 | 0;
+                    ctx.fillStyle = 'rgba(' + [rgb, rgb, rgb, options.grainOpacity].join() + ')';
+                    ctx.fillRect(w, h, options.grainWidth, options.grainHeight);
+                }
+            }
+            return canvas.toDataURL('image/png');
+        };
+
+        function addCSSRule(sheet, selector, rules, index) {
+            var ins = '';
+            if (selector.length) {
+                ins = selector + "{" + rules + "}";
+            } else {
+                ins = rules;
+            }
+
+            if ("insertRule" in sheet) {
+                sheet.insertRule(ins, index);
+            } else if ("addRule" in sheet) {
+                sheet.addRule(selector, rules, index);
+            }
+        }
+
+
+        var noise = generateNoise();
+
+        var animation = '',
+            keyFrames = ['0%:-10%,10%', '10%:-25%,0%', '20%:-30%,10%', '30%:-30%,30%', '40%::-20%,20%', '50%:-15%,10%', '60%:-20%,20%', '70%:-5%,20%', '80%:-25%,5%', '90%:-30%,25%', '100%:-10%,10%'];
+
+        var pre = prefixes.length;
+        while (pre--) {
+            animation += '@' + prefixes[pre] + 'keyframes grained{';
+            for (var key = 0; key < keyFrames.length; key++) {
+                var keyVal = keyFrames[key].split(':');
+                animation += keyVal[0] + '{';
+                animation += prefixes[pre] + 'transform:translate(' + keyVal[1] + ');';
+                animation += '}';
+            }
+            animation += '}';
+        }
+
+        //add animation keyframe
+        var animationAdded = doc.getElementById('grained-animation');
+        if (animationAdded) {
+            animationAdded.parentElement.removeChild(animationAdded);
+        }
+        var style = doc.createElement("style");
+        style.type = "text/css";
+        style.id = 'grained-animation';
+        style.innerHTML = animation;
+        doc.body.appendChild(style);
+
+        //add custimozed style
+        var styleAdded = doc.getElementById('grained-animation-' + elementId);
+        if (styleAdded) {
+            styleAdded.parentElement.removeChild(styleAdded);
+        }
+
+        style = doc.createElement("style");
+        style.type = "text/css";
+        style.id = 'grained-animation-' + elementId;
+        doc.body.appendChild(style);
+
+        var rule = 'background-image: url(' + noise + ');';
+        rule += 'position: absolute;content: "";height: 300%;width: 300%;left: -100%;top: -100%;';
+        pre = prefixes.length;
+        if (options.animate) {
+            while (pre--) {
+                rule += prefixes[pre] + 'animation-name:grained;';
+                rule += prefixes[pre] + 'animation-iteration-count: infinite;';
+                rule += prefixes[pre] + 'animation-duration: ' + options.grainChaos + 's;';
+                rule += prefixes[pre] + 'animation-timing-function: steps(' +options.grainSpeed + ', end);';
+            }
+        }
+
+        //selecter element to add grains
+        selectorElement = '#' + elementId + '::before';
+
+
+        addCSSRule(style.sheet, selectorElement, rule);
+
+
+    }
+
+    window.grained = grained;
+    //END
+})(window, document);

File diff suppressed because it is too large
+ 6 - 0
grained/grained.min.js


+ 58 - 0
index.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title></title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="styles.css">
+        <script type="text/javascript" src="https://unpkg.com/external-svg-loader@latest/svg-loader.min.js" async></script>
+    </head>
+    <body>
+        <div id="content">
+            <!-- deux svg pour pouvoir utiliser mix blend mode avec les histoires de stacking context -->
+            <svg id="stroke" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="-8697.766 17429.18 677.183 706.257">
+                <path rx="0" ry="0" d="M-8219.035,17632.029L-8107.295,17867.024L-8229.636,17969.717L-8291.783,18096.894L-8492.425,17938.383L-8596.599,17808.682L-8580.356,17588.946L-8468.630,17500.749L-8219.035,17632.029Z">
+                </path>
+            </svg>
+
+            <svg id="fill" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="-8697.766 17429.18 677.183 706.257">
+                <path rx="0" ry="0" d="M-8219.035,17632.029L-8107.295,17867.024L-8229.636,17969.717L-8291.783,18096.894L-8492.425,17938.383L-8596.599,17808.682L-8580.356,17588.946L-8468.630,17500.749L-8219.035,17632.029Z">
+                </path>
+            </svg>
+            <div id="buttons_container">
+                <!-- svg dans object pour pouvoir les manipuler avec css -->
+                <div class="mode active">
+                    <svg data-src="assets/pictos/terrain-de-vie.svg" data-cache="disabled"></svg>
+                    <p>Terrain de vie</p>
+                </div>
+                <div class="mode">
+                    <svg data-src="assets/pictos/proximite.svg" data-cache="disabled"></svg>
+                    <p>Proximité</p>
+                </div>
+                <div class="mode">
+                    <svg data-src="assets/pictos/superposition.svg" data-cache="disabled"></svg>
+                    <p>Superposition</p>
+                </div>
+                <div class="mode">
+                    <svg data-src="assets/pictos/puissance-d-agir.svg" data-cache="disabled"></svg>
+                    <p>Puissance d'agir</p>
+                </div>
+                <div class="mode">
+                    <svg data-src="assets/pictos/action.svg" data-cache="disabled"></svg>
+                    <p>Action</p>
+                </div>
+                <div class="mode">
+                    <svg data-src="assets/pictos/doleance.svg" data-cache="disabled"></svg>
+                    <p>Doléancer</p>
+                </div>
+            </div>
+            <div id="BG_BG_BG"></div>
+            <div id="BG_BG_BG_tmp"></div>
+        </div>
+        <div id="grain-bg"></div>
+        <script src="grained/grained.js" defer></script>
+        <script src="background.js" defer></script>
+    </body>
+</html>

+ 137 - 0
styles.css

@@ -0,0 +1,137 @@
+@charset "UTF-8";
+/* mix blend mode est dépendant du stacking context */
+@font-face {
+  font-family: "Public";
+  font-style: normal;
+  font-weight: 400;
+  src: url("assets/fonts/PublicSans-Regular.ttf") format("TrueType");
+}
+@font-face {
+  font-family: "Public";
+  font-style: normal;
+  font-weight: 300;
+  src: url("assets/fonts/PublicSans-Light.ttf") format("TrueType");
+}
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: "Public", sans-serif;
+  font-weight: 400;
+}
+
+#content {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+}
+#content svg {
+  width: 30%;
+  height: auto;
+}
+#content svg path {
+  cursor: pointer;
+}
+#content svg#fill {
+  fill: white;
+  mix-blend-mode: overlay;
+  opacity: 0.6;
+}
+#content svg#stroke {
+  position: absolute;
+  fill: none;
+  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;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  z-index: -1;
+  opacity: 1;
+  transition: opacity 0.5s ease-in-out;
+}
+#content #BG_BG_BG_tmp {
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  z-index: -2;
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+}
+
+#grain-bg {
+  position: absolute !important;
+  width: 100vw;
+  height: 100vh;
+}
+
+#grain-bg > * {
+  position: relative;
+}
+
+/*# sourceMappingURL=styles.css.map */

File diff suppressed because it is too large
+ 0 - 0
styles.css.map


+ 153 - 0
styles.scss

@@ -0,0 +1,153 @@
+/* mix blend mode est dépendant du stacking context */
+
+@font-face {
+    font-family: 'Public';
+    font-style: normal;
+    font-weight: 400;
+    src: url('assets/fonts/PublicSans-Regular.ttf') format('TrueType');
+}
+
+@font-face {
+    font-family: 'Public';
+    font-style: normal;
+    font-weight: 300;
+    src: url('assets/fonts/PublicSans-Light.ttf') format('TrueType');
+}
+
+
+
+
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'Public', sans-serif;
+    font-weight: 400;
+}
+
+
+
+#content {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+
+    svg {
+        width: 30%;
+        height: auto;
+        path {
+            cursor: pointer;
+        }
+    }
+
+    svg#fill {
+        fill: white;
+        mix-blend-mode: overlay;
+        opacity: 0.6;
+    }
+
+    svg#stroke {
+        position: absolute;
+        fill: none;
+        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;
+    
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        z-index: -1;
+        opacity: 1;
+        transition: opacity 0.5s ease-in-out;
+    }
+    
+    #BG_BG_BG_tmp {
+        position: absolute;
+        width: 100vw;
+        height: 100vh;
+    
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        z-index: -2;
+        opacity: 0;
+        transition: opacity 0.5s ease-in-out;
+    }
+
+
+}
+
+#grain-bg {
+    position: absolute !important;
+    width: 100vw;
+    height: 100vh;
+}
+
+#grain-bg > * {
+    position: relative;
+}

Some files were not shown because too many files changed in this diff