@imiobe/plonetheme-smartweb-base 0.0.6 → 0.1.1

package/src/scss/sections/_se-link.scss

@@ -1,149 +1,155 @@
 .sectionlinks {
-    @include section-padding-top;
-    @include section-padding-bottom;
-    @if $enable-light-color-section-link {
-        h2,
-        span,
-        p {
-            color: #fff;
-        }
+  @include section-padding-top;
+  @include section-padding-bottom;
+
+  @if $enable-light-color-section-link {
+    h2,
+    span,
+    p {
+      color: #fff;
     }
-    @if $enable-full-width-section-link {
-        // &:after{
-        //     @include full-width;
-        //     background:$section-link-background-color;
-        // }
+  }
+  background: $section-link-background-color;
+  position: relative;
+
+  .section_files_list {
+    @include ul-rm-padding;
+  }
+
+  .display-paysage {
+    .table_image:not(.no-image) {
+      .image.d-block.is-image.w-100 {
+        aspect-ratio: 1.67;
+        margin-bottom: 10px;
+      }
     }
-    background: $section-link-background-color;
-    position: relative;
-    .section_files_list {
-        @include ul-rm-padding;
+  }
+
+  .display-portrait {
+    .table_image:not(.no-image) {
+      .image.d-block.is-image.w-100 {
+        aspect-ratio: 0.7;
+        margin-bottom: 10px;
+      }
     }
-    li {
-        list-style: none;
-        .section_files_link {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            .section_files_image {
-                width: 36px;
-                height: 44px;
-                margin-left: 1rem;
-                @include media-breakpoint-up(md) {
-                    width: 160px;
-                    height: 121px;
-                    margin-left: 0;
-                }
-                position: relative;
-                img {
-                    @include fit-cover;
-                }
-            }
-            .section_files_text {
-                .section_files_item_description {
-                    margin: 0;
-                }
-            }
+  }
+
+  li {
+    list-style: none;
+
+    .section_files_link {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .section_files_image {
+        width: 36px;
+        height: 44px;
+        margin-left: 1rem;
+
+        @include media-breakpoint-up(md) {
+          width: 160px;
+          height: 121px;
+          margin-left: 0;
         }
+        position: relative;
+
+        img {
+          @include fit-cover;
+        }
+      }
+
+      .section_files_text {
+        .section_files_item_description {
+          margin: 0;
+        }
+      }
     }
+  }
 }
 
 // for bal
 .sectionfiles {
-    .section-container.section_links {
-        @include media-breakpoint-up(lg) {
-            display: flex;
-            gap: 6.8181%;
-        }
-        .section_files_list {
-            margin-bottom: 0;
-            max-width: max-content;
-            @include media-breakpoint-up(lg) {
-                max-width: inherit;
-            }
-        }
+  .section-container.section_links {
+    @include media-breakpoint-up(lg) {
+      display: flex;
+      gap: 6.8181%;
     }
-    .section-title {
-        &::before {
-            // content: url(../svg/files.svg);
-            display: inline-block;
-            vertical-align: middle;
-            margin-right: 1.5rem;
-        }
+
+    .section_files_list {
+      margin-bottom: 0;
+      max-width: max-content;
+
+      @include media-breakpoint-up(lg) {
+        max-width: inherit;
+      }
     }
-    .section_files_link {
-        border: solid 1px rgba(255, 255, 255, 0.25);
-        border-radius: 10px 10px 10px 0px;
-        text-decoration: none;
-        &:hover,
-        &:focus {
-            background: rgba(255, 255, 255, 0.09);
-            border: solid 1px rgba(255, 255, 255, 0);
-            &:after {
-                // background: url(../svg/download-arrow-blue.svg) no-repeat center #fff;
-            }
-        }
-        &:after {
-            content: "";
-            width: 30px;
-            height: 30px;
-            border: 1px solid #FFFFFF;
-            border-radius: 30px;
-            // background: url(../svg/download-arrow.svg) no-repeat center;
-            margin-right: 1rem;
-            background-size: 35%;
-            @include media-breakpoint-up(lg) {
-                width: 60px;
-                height: 60px;
-                background-size: initial;
-                margin-right: 2.5rem;
-                flex-shrink: 0;
-            }
-        }
-        .section_files_image {
-            border-radius: 10px 10px 10px 0px;
-            flex-shrink: 0;
-            // background: url(../svg/files.svg) no-repeat center $primary; 
-            @include media-breakpoint-up(md) {
-                border: 1px solid #FFFFFF;
-            }
-            img {
-                border-radius: 10px 10px 10px 0px;
-                display: none;
-                @include media-breakpoint-up(md) {
-                    display: block;
-                }
-            }
-        }
-        &[href$=".pdf"] {
-            .section_files_image {
-                // background: url(../svg/pdf-file-icon.svg) no-repeat center $primary; 
-            }
-        }
-        &[href$=".jpg"],
-        &[href$=".jpeg"],
-        &[href$=".png"],
-        &[href$=".svg"] {
-            .section_files_image {
-                // background: url(../svg/image-file-icon.svg) no-repeat center $primary; 
-            }
-        }
-        &[href$=".mp4"],
-        &[href$=".webm"],
-        &[href$=".avi"] {
-            .section_files_image {
-                // background: url(../svg/video-file-icon.svg) no-repeat center $primary; 
-            }
-        }
-        .section_files_text {
-            font-weight: bold;
-            font-size: 18px;
-            margin: 1rem .5rem;
-            max-width: 300px;
-            margin: 1rem 1.5rem;
-            @include media-breakpoint-up(lg) {
-                margin: 1rem 2.5rem;
-            }
+  }
+
+  .section-title {
+    &::before {
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: 1.5rem;
+    }
+  }
+
+  .section_files_link {
+    border: solid 1px rgba(255, 255, 255, 25%);
+    border-radius: 10px 10px 10px 0;
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      background: rgba(255, 255, 255, 9%);
+      border: solid 1px rgba(255, 255, 255, 0%);
+    }
+
+    &::after {
+      content: "";
+      width: 30px;
+      height: 30px;
+      border: 1px solid #fff;
+      border-radius: 30px;
+      margin-right: 1rem;
+      background-size: 35%;
+
+      @include media-breakpoint-up(lg) {
+        width: 60px;
+        height: 60px;
+        background-size: initial;
+        margin-right: 2.5rem;
+        flex-shrink: 0;
+      }
+    }
+
+    .section_files_image {
+      border-radius: 10px 10px 10px 0;
+      flex-shrink: 0;
+
+      @include media-breakpoint-up(md) {
+        border: 1px solid #fff;
+      }
+
+      img {
+        border-radius: 10px 10px 10px 0;
+        display: none;
+
+        @include media-breakpoint-up(md) {
+          display: block;
         }
+      }
     }
-}
+
+    .section_files_text {
+      font-weight: bold;
+      font-size: 18px;
+      max-width: 300px;
+      margin: 1rem 1.5rem;
+
+      @include media-breakpoint-up(lg) {
+        margin: 1rem 2.5rem;
+      }
+    }
+  }
+}

package/src/scss/sections/_se-linked-content.scss

@@ -1,4 +1,4 @@
-.sectionselections{
-    @include section-padding-top;
-    @include section-padding-bottom;
-}
+.sectionselections {
+  @include section-padding-top;
+  @include section-padding-bottom;
+}

package/src/scss/sections/_se-plan-geo.scss

@@ -1,83 +1,101 @@
-body.faceted-map{
-    .button-map-content{
-        display: none;
+body.faceted-map {
+  .button-map-content {
+    display: none;
+  }
+
+  nav.d-flex.justify-content-center:first-child {
+    display: none;
+  }
+
+  .d-flex.justify-content-center {
+    justify-content: left !important;
+  }
+
+  #main-container {
+    #content {
+      #center-content-area {
+        @include media-breakpoint-up(md) {
+          display: grid;
+        }
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: repeat(4, auto);
+
+        #faceted-results {
+          grid-column: 1;
+
+          @include media-breakpoint-up(md) {
+            margin-right: 1rem;
+          }
+          display: block !important;
+          opacity: 100% !important;
+        }
+
+        .faceted-map {
+          grid-column: 2;
+          grid-row: 2;
+          flex: 1;
+          padding-left: 1rem;
+        }
+      }
     }
-    nav.d-flex.justify-content-center:first-child{
-        display: none;
+  }
+
+  #faceted-results-items {
+    @include media-breakpoint-down(md) {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 15px;
     }
-    .d-flex.justify-content-center{
-        justify-content: left!important;
+
+    @include media-breakpoint-down(sm) {
+      grid-template-columns: 1fr;
     }
-    #main-container{
-        #content{
-            #center-content-area {
-                @include media-breakpoint-up(md) {
-                    display: grid;
-                }   
-                grid-template-columns: 1fr 1fr;
-                grid-template-rows: repeat(4,auto);
-                #faceted-results {
-                    grid-column: 1;
-                    @include media-breakpoint-up(md) {
-                        margin-right: 1rem;
-                    }   
-                    display: block !important;
-                    opacity: 1 !important;
-                }
-                .faceted-map {
-                    grid-column: 2;
-                    grid-row: 2;
-                    flex: 1;
-                    padding-left: 1rem;
-                }
-            }
-        }  
+  }
+
+  .faceted-map-text {
+    margin: 0;
+
+    @include media-breakpoint-up(md) {
+      margin: 1rem 0;
     }
-    #faceted-results-items{
-        @include media-breakpoint-down(md) {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 15px;
-        }
-        @include media-breakpoint-down(sm) {
-            grid-template-columns: 1fr;
-        }
+    box-shadow: rgba(0, 0, 0, 16%) 0 1px 4px;
+
+    a {
+      text-decoration: none;
     }
-    .faceted-map-text{
-        margin: 0;
-        @include media-breakpoint-up(md) {
-            margin: 1rem 0;
+
+    .items-content {
+      display: flex;
+
+      @include media-breakpoint-down(md) {
+        flex-direction: column;
+        align-items: center;
+      }
+
+      .geo-item-image {
+        max-width: 250px;
+
+        img {
+          width: 100%;
         }
-        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
-        a{
-            text-decoration: none;
+      }
+
+      .geo-item-text {
+        padding: 1rem 1.5rem;
+
+        .geo-item-title {
+          color: #1f1f1f;
+          font-weight: bold;
+          font-size: 15px;
+          text-decoration: none;
         }
-        .items-content{
-            display: flex;
-            @include media-breakpoint-down(md) {
-                flex-direction: column;
-                align-items: center;
-            }
-            .geo-item-image{
-                max-width: 250px;
-                img{
-                    width: 100%;
-                }
-            }
-            .geo-item-text{
-                padding: 1rem 1.5rem;
-                .geo-item-title{
-                    color: #1f1f1f;
-                    font-weight: bold;
-                    font-size: 15px;
-                    text-decoration: none;
-                }
-                .geo-item-description{
-                    margin-top: 0.3rem;
-                    font-size: 15px;
-                    color: #1f1f1f;
-                }
-            }
+
+        .geo-item-description {
+          margin-top: 0.3rem;
+          font-size: 15px;
+          color: #1f1f1f;
         }
+      }
     }
-}
+  }
+}

package/src/scss/sections/_se-plan.scss

@@ -1,3 +1,3 @@
 div#body-section-localisation {
-    padding-bottom: 2rem;
-}
+  padding-bottom: 2rem;
+}

package/src/scss/sections/_se-postit.scss

@@ -1,17 +1,19 @@
-#body-section-post-it{
-    .swiper-slide{
-        background: #f7f7f7;
-        padding: 2rem 4rem;
-        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
-    }
-    .swiper-button-prev{
-        top: 50%!important;
-        transform: translateY(-50%)!important;
-        left: 0!important;
-    }
-    .swiper-button-next{
-        top: 50%!important;
-        transform: translateY(-50%)!important;
-        right: 0!important;
-    }
-}
+#body-section-post-it {
+  .swiper-slide {
+    background: #f7f7f7;
+    padding: 2rem 4rem;
+    box-shadow: rgba(0, 0, 0, 16%) 0 1px 4px;
+  }
+
+  .swiper-button-prev {
+    top: 50% !important;
+    transform: translateY(-50%) !important;
+    left: 0 !important;
+  }
+
+  .swiper-button-next {
+    top: 50% !important;
+    transform: translateY(-50%) !important;
+    right: 0 !important;
+  }
+}

package/src/scss/sections/_se-textes.scss

@@ -1,8 +1,14 @@
+.mark,
+mark {
+  display: block;
+}
+
 .sectiontext {
   font-size: $font-size-texte;
+
   mark {
     display: inline-block;
-    padding: $mark-padding;
+    padding: $mark-padding-sec;
     border: $mark-border;
     background-color: $mark-background-color;
     border-radius: $mark-radius;
@@ -24,24 +30,28 @@
     margin-top: $section-text-h3-margin-top;
     margin-bottom: $section-text-h3-margin-bottom;
   }
+
   ol {
-    list-style-type:none;        
+    list-style-type: none;
     counter-reset: sectioncounter;
-    li{
+
+    & > li {
       display: table;
       padding-left: 1rem;
-      &:before{
-        content: counter(sectioncounter) ":";
+
+      &::before {
+        content: counter(sectioncounter) ".";
         counter-increment: sectioncounter;
-        display:inline-block; 
-        width:2em; 
-        text-align:right;
-        position:relative; 
-        left:-2.5em; 
-        margin-right:-2em;
+        display: inline-block;
+        width: 2em;
+        text-align: right;
+        position: relative;
+        left: -2.5em;
+        margin-right: -2em;
       }
     }
-  } 
+  }
+
   ul li {
     position: relative;
     display: table;
@@ -71,8 +81,9 @@
 
       &.figure-left {
         figure {
-          display: block;
+          display: table;
           max-width: 100%;
+
           @include media-breakpoint-up(md) {
             max-width: 45%;
             margin-right: 2.5rem;
@@ -80,15 +91,16 @@
           }
 
           img {
-            width: 100%;
+            width: auto;
           }
         }
       }
 
       &.figure-right {
         figure {
-          display: block;
+          display: table;
           max-width: 100%;
+
           @include media-breakpoint-up(md) {
             max-width: 45%;
             margin-left: 2.5rem;
@@ -96,7 +108,7 @@
           }
 
           img {
-            width: 100%;
+            width: auto;
           }
         }
 
@@ -133,7 +145,7 @@
         }
 
         figcaption {
-          // display: table-caption;
+          display: table-caption;
           caption-side: bottom;
           font-size: $font-size-sm;
         }
@@ -148,10 +160,11 @@
 }
 
 div:not(.sectiontext) {
-  &+.sectiontext {
+  & + .sectiontext {
     // @include section-padding-top;
     h2 {
       margin-top: 10px !important;
+
       @include media-breakpoint-up(md) {
         margin-top: 50px !important;
       }
@@ -176,12 +189,11 @@ blockquote::before {
   position: relative;
   top: 9px;
   height: 10px;
-  margin-right: 0.25rem;
   content: '"';
   font-size: 32px;
   font-weight: 600;
   line-height: 0;
-  margin-right: .75rem;
+  margin-right: 0.75rem;
 }
 
 blockquote::after {
@@ -205,25 +217,7 @@ strong {
   padding-left: 0;
 }
 
-.r-content-text {
-  li {
-    position: relative;
-    display: table;
-    padding-left: 1rem;
-    margin: 0.25rem 0;
-    list-style: none;
-
-    &::before {
-      position: absolute;
-
-      // content: $list-style-custom;
-      top: -2px;
-      left: 0;
-    }
-  }
-}
-
 .sectiontext table tr td ul li::before {
-	position: initial !important;
-	margin-right: 0.5rem;
-}
+  position: initial !important;
+  margin-right: 0.5rem;
+}