index page projets

2024-11-05 01:44:18 +01:00
parent 018960837d
commit bd1b450a45
34 changed files with 1084 additions and 382 deletions
--- a/web/themes/erabletheme/scss/_projets.scss
+++ b/web/themes/erabletheme/scss/_projets.scss
@@ -0,0 +1,150 @@
+.fullpage.projets {
+  padding-top: 5vh;
+  > .intro_map {
+    @media (min-width: $breakpoint_desktop) {
+      display: flex;
+      flex-direction: row;
+    }
+    > header {
+      margin-right: 5vw;
+      padding: 0 3vw;
+      @include main_text_content();
+      h1, h2, h3,
+      h4, h5, h6 {
+        padding: 0 !important;
+        margin: 0 !important;
+        @include sous_titre_alt();
+      }
+      > h2 {
+        margin-bottom: 5vh !important;
+        padding-bottom: 3.5vh !important;
+        border-bottom: 1px solid $teal;
+        @include main_title();
+        @media (min-width: $breakpoint_desktop) {
+          width: 100%;
+        }
+      }
+    }
+    .projets_intro {
+      display: none;
+    }
+    #sites-map-container {
+      width: 70%;
+      padding: 0 !important;
+      @media screen and (min-width: $breakpoint_tablet) {
+        width: 50%;
+      }
+      @media (min-width: $breakpoint_desktop) {
+        margin-right: 8vw !important;
+        width: 85%;
+      }
+      #popup {
+        h3 {
+          @include sous_titre();
+        }
+        p {
+          @include main_text_content();
+        }
+      }
+    }
+  }
+  > .projets_list {
+    display: grid;
+    margin: 3vh $x_margin;
+    margin-top: 8vh;
+    grid-template-columns: 1fr;
+    gap: 2rem;
+    @media (min-width: $breakpoint_tablet) {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    @media (min-width: $breakpoint_desktop) {
+        grid-template-columns: repeat(3, 1fr);
+    }
+    > h3 {
+      display: none;
+    }
+    > .views-row{
+      display: grid;
+      grid-template-columns: 0.5fr 1fr;
+      grid-template-rows: repeat(4, auto);
+      > .views-field-field-diaporama {
+        grid-column: 1;
+        grid-row: 1/5;
+        align-self: center;
+        > .field-content {
+          width: 8rem;
+          height: 8rem;
+          > a {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            display: block;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            img {
+              width: 100%;
+              height: 100%;
+              mask-image: url('/themes/erabletheme/assets/shapes/shape_1.svg');
+              mask-repeat: no-repeat;
+              mask-size: 100% 100%;
+              mask-position: center;
+              object-fit: cover;
+            }
+          }
+        }
+      }
+      > .views-field-title {
+        grid-column: 2;
+        grid-row: 1;
+        margin-bottom: 1rem;
+        a {
+          color: $teal;
+        }
+        @include sous_titre();
+      }
+      > .views-field-field-sous-titre {
+        grid-column: 2;
+        grid-row: 2;
+        font-size: 1.1rem !important;
+        margin-bottom: 1rem;
+        line-height: 1.3;
+        a {
+          color: black;
+        }
+        @include sous_titre_alt();
+      }
+      > .views-field-field-localisation-textuel {
+        grid-column: 2;
+        grid-row: 3;
+        margin-bottom: 1rem;
+        @include main_text_content();
+        a {
+          color: black;
+        }
+      }
+      > .views-field-field-th {
+        grid-column: 2;
+        grid-row: 4;
+        ul {
+          li {
+            display: inline-block;
+            font-size: 0.8rem !important;
+            background-color: #d3f0ea;
+            margin: 0.2rem;
+            transition: background-color 0.3s ease;
+            @include main_text_content();
+            &:hover {
+              background-color: #8ec2b8;
+            }
+            a {
+              display: block;
+              color: black;
+              padding: 0.2rem 0.4rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}