From 69ed14f28a446070438058b9cbb881f3a73d1a43 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon.vieille@trinaps.com>
Date: Sat, 7 Oct 2023 17:49:15 +0200
Subject: [PATCH] add halloween theme

---
 assets/css/app.scss                      |  24 +-
 assets/css/app/config.scss               |   3 +-
 assets/images/halloween/spider.svg       | 390 +++++++++++++++++++++++
 templates/page/simple/projects.html.twig |  30 +-
 4 files changed, 429 insertions(+), 18 deletions(-)
 create mode 100644 assets/images/halloween/spider.svg

diff --git a/assets/css/app.scss b/assets/css/app.scss
index 917742a..a3dce8e 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -962,10 +962,32 @@ $links: (
 }
 
 .card {
-  transition: transform .2s;
+  transition: transform .2s, background .2s, border .2s;
+
+  &:nth-child(2n+1) {
+    background-image: url(../images/halloween/spider.svg) !important;
+    background-repeat: no-repeat !important;
+    background-position: calc(100% - 10px) 100px !important;
+  }
+
+  &:nth-child(2n+2) {
+    background-image: url(../images/halloween/spider.svg) !important;
+    background-repeat: no-repeat !important;
+    background-position: calc(100% - 10px) 100px !important;
+  }
 
   &:hover {
     transform: scale(1.02);
+    background: $color-blue2;
+    background-position: calc(100% - 10px) 150px !important;
+
+    img {
+      border-bottom: 2px solid #333;
+    }
+
+    h3 a, p {
+      color: #fff;
+    }
   }
 
   figure {
diff --git a/assets/css/app/config.scss b/assets/css/app/config.scss
index 9ed0c22..076255c 100644
--- a/assets/css/app/config.scss
+++ b/assets/css/app/config.scss
@@ -12,7 +12,8 @@ $color-red: #b02e2a;
 
 $code-color: $color-blue;
 
-$color-navigation-item-background: darken($color-dark-grey, 8%);
+//$color-navigation-item-background: darken($color-dark-grey, 8%);
+$color-navigation-item-background: darken($color-blue2, 8%);
 $color-navigation-item-background-active: lighten($color-dark-grey, 10%);
 
 $color-small-menu-background: $color-dark-grey;
diff --git a/assets/images/halloween/spider.svg b/assets/images/halloween/spider.svg
new file mode 100644
index 0000000..043a200
--- /dev/null
+++ b/assets/images/halloween/spider.svg
@@ -0,0 +1,390 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="36.965439"
+   height="100"
+   viewBox="0 0 9.7804388 26.458333"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
+   sodipodi:docname="spider.svg">
+  <metadata
+     id="metadata6">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#ffffff"
+     inkscape:document-units="px"
+     inkscape:document-rotation="0"
+     showgrid="false"
+     inkscape:zoom="5.2382156"
+     inkscape:cx="51.916187"
+     inkscape:cy="65.68455"
+     inkscape:window-width="1918"
+     inkscape:window-height="1038"
+     inkscape:window-x="0"
+     inkscape:window-y="20"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <defs
+     id="defs1">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient1586">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop1582" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0;"
+         offset="1"
+         id="stop1584" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1586"
+       id="linearGradient1588"
+       x1="-10.670271"
+       y1="396.36423"
+       x2="0.2785832"
+       y2="352.64908"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(-215.04257,53.193899)" />
+  </defs>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(220.6747,19.379824)">
+    <g
+       id="g1510"
+       transform="matrix(0.05431415,0,0,0.05431415,-208.68894,-18.327225)">
+      <rect
+         style="color:#000000;overflow:visible;fill:#1a1a1a;stroke-width:0.25744;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+         id="rect962"
+         width="10.560449"
+         height="37.23737"
+         x="339.20847"
+         y="228.86655"
+         ry="5.2802243"
+         transform="rotate(80.141439)" />
+      <rect
+         style="color:#000000;overflow:visible;fill:#4d4d4d;stroke-width:0.25744;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+         id="rect962-3"
+         width="10.560452"
+         height="29.427628"
+         x="58.227398"
+         y="423.90332"
+         ry="5.2802243"
+         transform="rotate(36.060271)" />
+      <rect
+         style="color:#000000;overflow:visible;fill:#1a1a1a;stroke-width:0.25744;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+         id="rect962-3-5"
+         width="10.560452"
+         height="29.427628"
+         x="-179.66049"
+         y="415.8244"
+         ry="5.2802243"
+         transform="rotate(5.4519952)"
+         inkscape:transform-center-x="1.6060938"
+         inkscape:transform-center-y="3.0115919" />
+      <rect
+         style="color:#000000;overflow:visible;fill:#1a1a1a;stroke-width:0.25744;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+         id="rect962-6"
+         width="10.560449"
+         height="37.23737"
+         x="180.74762"
+         y="380.55725"
+         ry="5.2802243"
+         transform="rotate(49.4151)" />
+      <rect
+         style="color:#000000;overflow:visible;fill:#4d4d4d;stroke-width:0.25744;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+         id="rect962-3-2"
+         width="10.560452"
+         height="29.427628"
+         x="-154.35168"
+         y="428.24945"
+         ry="5.2802243"
+         transform="rotate(6.200258)" />
+      <rect
+         style="color:#000000;overflow:visible;fill:#1a1a1a;stroke-width:0.25744;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+         id="rect962-3-5-9"
+         width="10.560452"
+         height="29.427628"
+         x="-399.80807"
+         y="265.58777"
+         ry="5.2802243"
+         transform="rotate(-31.328887)"
+         inkscape:transform-center-x="-0.51683556"
+         inkscape:transform-center-y="3.3737526" />
+      <rect
+         style="color:#000000;overflow:visible;fill:#1a1a1a;stroke-width:0.25744;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+         id="rect962-6-1"
+         width="10.560449"
+         height="37.23737"
+         x="-264.7019"
+         y="319.94562"
+         ry="5.2802243"
+         transform="rotate(-22.023483)" />
+      <rect
+         style="color:#000000;overflow:visible;fill:#4d4d4d;stroke-width:0.25744;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+         id="rect962-3-2-2"
+         width="10.560452"
+         height="29.427628"
+         x="44.973415"
+         y="434.28424"
+         ry="5.2802243"
+         transform="rotate(20.824725)" />
+      <rect
+         style="color:#000000;overflow:visible;fill:#1a1a1a;stroke-width:0.25744;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+         id="rect962-3-5-9-7"
+         width="10.560452"
+         height="29.427628"
+         x="188.48347"
+         y="415.05444"
+         ry="5.2802243"
+         transform="rotate(39.35706)"
+         inkscape:transform-center-x="3.0129304"
+         inkscape:transform-center-y="1.60359" />
+      <rect
+         style="color:#000000;overflow:visible;fill:#1a1a1a;stroke-width:0.25744;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+         id="rect962-6-0"
+         width="10.560449"
+         height="37.23737"
+         x="-396.88443"
+         y="110.33471"
+         ry="5.2802243"
+         transform="rotate(-57.767469)" />
+      <rect
+         style="color:#000000;overflow:visible;fill:#4d4d4d;stroke-width:0.25744;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+         id="rect962-3-2-2-9"
+         width="10.560452"
+         height="29.427628"
+         x="-224.31264"
+         y="354.09039"
+         ry="5.2802243"
+         transform="rotate(-19.751182)" />
+      <rect
+         style="color:#000000;overflow:visible;fill:#1a1a1a;stroke-width:0.25744;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+         id="rect962-3-5-9-7-3"
+         width="10.560452"
+         height="29.427628"
+         x="31.731018"
+         y="431.6391"
+         ry="5.2802243"
+         transform="rotate(14.874494)"
+         inkscape:transform-center-x="2.0774712"
+         inkscape:transform-center-y="2.7080125" />
+      <rect
+         style="color:#000000;overflow:visible;fill:#1a1a1a;stroke-width:0.25744;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+         id="rect962-6-0-6"
+         width="10.560449"
+         height="37.23737"
+         x="-385.12241"
+         y="-105.38716"
+         ry="5.2802243"
+         transform="rotate(-89.372472)" />
+      <rect
+         style="color:#000000;overflow:visible;fill:#4d4d4d;stroke-width:0.25744;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+         id="rect962-3-2-2-9-0"
+         width="10.560452"
+         height="29.427628"
+         x="-321.51315"
+         y="-228.36681"
+         ry="5.2802243"
+         transform="rotate(-113.96375)" />
+      <rect
+         style="color:#000000;overflow:visible;fill:#1a1a1a;stroke-width:0.25744;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+         id="rect962-3-5-9-7-3-6"
+         width="10.560452"
+         height="29.427628"
+         x="175.24963"
+         y="305.39377"
+         ry="5.2802243"
+         transform="rotate(37.497696)"
+         inkscape:transform-center-x="2.9593085"
+         inkscape:transform-center-y="1.7004981" />
+      <rect
+         style="color:#000000;overflow:visible;fill:#1a1a1a;stroke-width:0.25744;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+         id="rect962-6-0-6-2"
+         width="10.560449"
+         height="37.23737"
+         x="-256.46777"
+         y="-292.27197"
+         ry="5.2802243"
+         transform="rotate(-123.81743)" />
+      <rect
+         style="color:#000000;overflow:visible;fill:#4d4d4d;stroke-width:0.25744;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+         id="rect962-3-2-2-9-0-6"
+         width="10.560452"
+         height="29.427628"
+         x="-173.66693"
+         y="-323.36835"
+         ry="5.2802243"
+         transform="rotate(-139.81004)" />
+      <rect
+         style="color:#000000;overflow:visible;fill:#1a1a1a;stroke-width:0.25744;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+         id="rect962-3-5-9-7-3-6-1"
+         width="10.560452"
+         height="29.427628"
+         x="-87.327805"
+         y="303.24057"
+         ry="5.2802243"
+         transform="rotate(-3.3798593)"
+         inkscape:transform-center-x="1.1246826"
+         inkscape:transform-center-y="3.2224766" />
+      <rect
+         style="color:#000000;overflow:visible;fill:#1a1a1a;stroke-width:0.25744;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+         id="rect962-6-0-6-8"
+         width="10.560449"
+         height="37.23737"
+         x="-366.74966"
+         y="149.27838"
+         ry="5.2802243"
+         transform="rotate(-38.689657)" />
+      <rect
+         style="color:#000000;overflow:visible;fill:#4d4d4d;stroke-width:0.25744;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+         id="rect962-3-7"
+         width="10.560452"
+         height="29.427628"
+         x="-285.86499"
+         y="250.49252"
+         ry="5.2802243"
+         transform="rotate(-17.285608)" />
+      <rect
+         style="color:#000000;overflow:visible;fill:#1a1a1a;stroke-width:0.25744;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+         id="rect962-3-5-92"
+         width="10.560452"
+         height="29.427628"
+         x="-124.5529"
+         y="331.38336"
+         ry="5.2802243"
+         transform="rotate(12.113797)"
+         inkscape:transform-center-x="1.9446173"
+         inkscape:transform-center-y="2.8049425" />
+      <rect
+         style="color:#000000;overflow:visible;fill:#1a1a1a;stroke-width:0.25744;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+         id="rect962-6-0-6-8-2"
+         width="10.560449"
+         height="37.23737"
+         x="-194.70097"
+         y="308.48895"
+         ry="5.2802243"
+         transform="rotate(-4.3172138)" />
+      <rect
+         style="color:#000000;overflow:visible;fill:#4d4d4d;stroke-width:0.25744;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+         id="rect962-3-7-3"
+         width="10.560452"
+         height="29.427628"
+         x="-48.101986"
+         y="336.93149"
+         ry="5.2802243"
+         transform="rotate(20.615546)" />
+      <rect
+         style="color:#000000;overflow:visible;fill:#1a1a1a;stroke-width:0.25744;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+         id="rect962-3-5-92-7"
+         width="10.560452"
+         height="29.427628"
+         x="101.25393"
+         y="302.17734"
+         ry="5.2802243"
+         transform="rotate(45.966429)"
+         inkscape:transform-center-x="3.1774758"
+         inkscape:transform-center-y="1.2461632" />
+    </g>
+    <ellipse
+       style="color:#000000;overflow:visible;fill:#333333;fill-opacity:1;stroke-width:0.0128871;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+       id="path863-2"
+       cx="-203.556"
+       cy="70.642334"
+       rx="2.2505465"
+       ry="3.0628297"
+       transform="rotate(18.912919)" />
+    <path
+       style="fill:#808080;fill-rule:evenodd;stroke:#000000;stroke-width:0.0143706px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m -218.22055,4.4175518 c 0.85731,0.9766939 -0.0464,1.1790983 -0.22936,0.1685086 z"
+       id="path933"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="fill:#808080;fill-rule:evenodd;stroke:#000000;stroke-width:0.0143706px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m -216.36678,4.3267315 c 0.22439,1.2863975 -0.95801,1.0630903 -0.18007,0.080446 z"
+       id="path933-5"
+       sodipodi:nodetypes="ccc" />
+    <circle
+       style="color:#000000;overflow:visible;fill:#4d4d4d;stroke-width:0.0115444;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+       id="path865-3"
+       cx="-217.48129"
+       cy="3.7207096"
+       r="1.3328036" />
+    <ellipse
+       style="color:#000000;overflow:visible;fill:url(#linearGradient1588);fill-opacity:1;stroke-width:0.0128871;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+       id="path863-2-8"
+       cx="-203.556"
+       cy="70.642334"
+       rx="2.2505465"
+       ry="3.0628297"
+       transform="rotate(18.912919)" />
+    <circle
+       style="color:#000000;overflow:visible;fill:#1a1a1a;stroke-width:0.0139826;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+       id="path865"
+       cx="-217.16289"
+       cy="3.0791352"
+       r="1.6143011" />
+    <circle
+       style="color:#000000;overflow:visible;fill:#f9f9f9;stroke-width:0.0110463;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+       id="path887"
+       cx="-217.91484"
+       cy="3.2273026"
+       r="0.51482779" />
+    <circle
+       style="color:#000000;overflow:visible;fill:#ececec;stroke-width:0.0110463;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+       id="path887-6"
+       cx="-217.07199"
+       cy="3.2430224"
+       r="0.51482779" />
+    <ellipse
+       style="color:#000000;overflow:visible;fill:#000000;stroke-width:0.0139826;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+       id="path909"
+       cx="-217.92955"
+       cy="3.3541305"
+       rx="0.12689655"
+       ry="0.23106584" />
+    <ellipse
+       style="color:#000000;overflow:visible;fill:#000000;stroke-width:0.0139826;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke markers fill;stop-color:#000000"
+       id="path909-7"
+       cx="-217.0741"
+       cy="3.3541305"
+       rx="0.12689655"
+       ry="0.23106584" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#333333;stroke-width:0.379384;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M -214.45616,-1.7927667 V -19.379824"
+       id="path1590" />
+  </g>
+</svg>
diff --git a/templates/page/simple/projects.html.twig b/templates/page/simple/projects.html.twig
index cc5375a..64f7d23 100644
--- a/templates/page/simple/projects.html.twig
+++ b/templates/page/simple/projects.html.twig
@@ -16,24 +16,22 @@
     <div class="grid grid-flow-row-dens grid-cols-12 md:p-8 gap-5">
         {% for project in projects %}
             <div class="card shadow-md col-span-12 md:col-span-6 lg:col-span-4 m-3 bg-box">
-                <div class="card">
-                    {% if project.image %}
-                        <figure>
-                            <img src="{{ asset(project.image)|imagine_filter('project_preview_filter') }}" alt="{{ project.label }}">
-                        </figure>
-                    {% endif %}
-                    <div class="card-body">
-                        <h2 class="card-title">{{ project.label }}</h2>
+                {% if project.image %}
+                    <figure>
+                        <img src="{{ asset(project.image)|imagine_filter('project_preview_filter') }}" alt="{{ project.label }}">
+                    </figure>
+                {% endif %}
+                <div class="card-body">
+                    <h2 class="card-title">{{ project.label }}</h2>
 
-                        {{- project.description|murph_url|markdown('post') -}}
+                    {{- project.description|murph_url|markdown('post') -}}
 
-                        <div class="card-actions mt-5">
-                            {% for link in project.links %}
-                                <a class="btn btn-xs" href="{{ link.url|murph_url }}" target="_blank">
-                                    {{- link.label -}}
-                                </a>
-                            {% endfor %}
-                        </div>
+                    <div class="card-actions mt-5">
+                        {% for link in project.links %}
+                            <a class="btn btn-xs" href="{{ link.url|murph_url }}" target="_blank">
+                                {{- link.label -}}
+                            </a>
+                        {% endfor %}
                     </div>
                 </div>
             </div>