@kitconcept/volto-light-theme 8.0.0-alpha.3 → 8.0.0-alpha.30

package/src/theme/_footer.scss

@@ -13,8 +13,11 @@
     --footer-foreground: var(--primary-foreground-color, #{$black});
   }
 
-  .container {
-    padding: 0 1rem;
+  & > .container:not(:empty) {
+    padding: $spacing-xlarge 0;
+    .container {
+      @include adjustMarginsToContainer($default-container-width);
+    }
   }
 
   & > :first-child:not(:empty) {
@@ -35,7 +38,6 @@
     --footer-background: var(--secondary-color, #{$white});
     --footer-foreground: var(--secondary-foreground-color, #{$black});
 
-    padding: $spacing-xlarge 2rem;
     background: var(--footer-background);
     color: var(--footer-foreground, $black);
 
@@ -94,25 +96,26 @@
 
     .logo {
       display: flex;
-      justify-content: center;
-      margin: 5rem 0 1.8rem 0;
-
+      max-width: 300px;
+      max-height: 90px;
+      margin-bottom: $spacing-medium;
       a {
         display: block;
-        max-width: 200px;
-        max-height: 80px;
+        max-width: 100%;
 
         img {
           max-width: 100%;
-          height: auto;
+          max-height: 90px;
         }
       }
     }
 
     .footer-grid {
       display: grid;
-      gap: 1rem;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: $spacing-small;
+      grid-auto-columns: 1fr;
+      grid-auto-flow: column;
+      grid-template-columns: auto;
       text-align: left;
 
       h2 {
@@ -128,8 +131,8 @@
         list-style: none;
 
         li {
-          padding: 0 7px;
           font-size: 18px;
+          line-height: 30px;
 
           a {
             text-decoration: underline;
@@ -141,93 +144,124 @@
         justify-self: start;
         @include body-text();
 
-        img {
-          margin-bottom: 38px;
+        &:has(~ div li),
+        &:has(~ div h2) {
+          width: 380px;
+          .logo ~ * {
+            padding-right: $spacing-xlarge;
+          }
         }
       }
 
-      @media only screen and (max-width: $largest-mobile-screen) {
-        gap: $spacing-xlarge;
+      .column-left,
+      .column-middle,
+      .column-right {
+        &:has(ul:empty):not(:has(h2)) {
+          display: none;
+        }
+      }
 
-        text-align: center;
+      @media only screen and (max-width: $largest-mobile-screen) {
+        gap: $spacing-medium;
+        grid-auto-flow: row;
+        grid-template-columns: 1fr;
 
         .address-column {
           display: flex;
+          width: 100% !important;
           flex-direction: column;
-          align-items: center;
+          align-items: flex-start;
+          margin-bottom: $spacing-medium;
         }
 
         .address-column,
         .column-left,
         .column-middle,
         .column-right {
-          justify-self: center;
+          justify-self: start;
         }
       }
     }
   }
 
   .post-footer {
-    padding: $spacing-xlarge 2rem;
     background: var(--footer-background);
     color: var(--footer-foreground, $black);
     font-size: 18px;
   }
 
   .follow-us-links-and-logo {
-    display: flex;
-    margin-bottom: 50px;
+    display: grid;
 
-    &.no-logo {
-      justify-content: center;
+    margin-bottom: $spacing-large;
+    grid-template-areas:
+      'social logo'
+      'links  links';
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 
-      .followus-and-links {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-      }
+    .follow-us {
+      grid-area: social;
+    }
+    .footer-logo {
+      grid-area: logo;
+    }
+    .footer-links {
+      grid-area: links;
+    }
 
-      .follow-us {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        text-align: center;
-      }
+    &:not(:has(.footer-logo)) .follow-us {
+      grid-column: 1 / -1;
+    }
+    &:not(:has(.follow-us)) .footer-logo {
+      grid-column: 1 / -1;
+      justify-self: center;
+    }
+    .follow-us {
+      display: flex;
+      flex-direction: column;
+      text-align: center;
+    }
 
-      .footer-links {
-        ul {
-          justify-content: center;
-        }
+    .footer-links {
+      ul {
+        justify-content: center;
       }
     }
 
     @media only screen and (max-width: $largest-mobile-screen) {
-      flex-direction: column;
       align-items: center;
-
-      .followus-and-links {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-      }
+      grid-template-areas:
+        'social'
+        'logo'
+        'links';
+      grid-template-columns: minmax(0, 1fr);
 
       .follow-us {
         display: flex;
         flex-direction: column;
         justify-content: center;
         text-align: center;
+        ul.social-networks {
+          flex-wrap: wrap;
+          gap: 10px;
+          li {
+            margin-right: 0;
+          }
+        }
       }
 
       .footer-links {
+        margin-top: $spacing-large;
         ul {
-          justify-content: center;
+          flex-wrap: wrap;
+          gap: 10px 0;
+          li {
+            margin-right: 0;
+          }
         }
       }
 
       .footer-logo {
-        padding-top: 50px;
         margin: 0 auto;
         span {
           text-align: center;
@@ -244,6 +278,8 @@
   .follow-us {
     ul {
       display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
       padding-left: 0;
       margin: 0;
       list-style: none;
@@ -251,13 +287,13 @@
   }
 
   .follow-us {
-    margin-bottom: 50px;
+    margin-bottom: $spacing-large;
     text-align: left;
 
     span {
       @include headtitle2();
       display: block;
-      margin-bottom: 50px;
+      margin-bottom: $spacing-large;
       text-transform: uppercase;
     }
 
@@ -278,41 +314,46 @@
     li {
       position: relative;
       padding: 0 8px;
+      margin-bottom: 8px;
       @include add(size, xs);
       @include add(height, s);
 
       &:not(:last-child):after {
         position: absolute;
-        right: -3px;
+        right: 0;
         display: inline-block;
         color: var(--footer-foreground, $black);
         content: '|';
+        transform: translateX(50%);
       }
 
       a {
         @include add(size, xs);
         @include add(height, s);
         color: var(--footer-foreground);
+        text-decoration: underline;
       }
     }
   }
 
   .footer-logo {
-    min-width: 180px;
-    max-width: 240px;
-    height: auto;
-    margin-left: auto;
-
+    display: flex;
+    max-width: 200px;
+    flex-direction: column;
+    margin-bottom: $spacing-large;
+    justify-self: end;
     span {
       display: block;
-      margin-bottom: 50px;
+      margin-bottom: $spacing-large;
       text-align: left;
       text-transform: uppercase;
       @include headtitle2();
     }
 
     img {
-      width: 100%;
+      max-width: 100%;
+      height: auto;
+      object-fit: contain;
     }
   }
 
@@ -320,29 +361,56 @@
     @include add(size, xs);
     @include add(height, s);
 
-    a {
+    .slate.widget {
+      width: fit-content;
+      margin-right: auto;
+      margin-left: auto;
       @include add(size, xs);
       @include add(height, s);
+      ul,
+      ol,
+      li,
+      p,
+      a {
+        margin-bottom: 0;
+        font: inherit;
+        line-height: inherit;
+      }
+    }
+
+    a {
       color: var(--footer-foreground);
+      font: inherit;
       text-decoration: underline;
     }
 
+    p {
+      @include add(size, xs);
+      @include add(height, s);
+      margin-bottom: 0;
+    }
+
     img {
       margin-top: 25px;
     }
 
     &:before {
       display: block;
-      padding-top: 50px;
+      padding-top: $spacing-large;
       border-top: 1px solid var(--footer-foreground, $black);
       content: '';
       @include default-container-width();
     }
+    &:has(.slate p:only-child:empty) {
+      display: none;
+    }
   }
 
   .main-footer + .post-footer {
     background-color: var(--primary-color, $white);
     color: var(--primary-foreground-color, $black);
+    --social-network-icon-color-main: #{$black};
+    --social-network-icon-color-hover: #{$black};
   }
 }
 
@@ -353,9 +421,8 @@ ul.logos-container {
   padding: $pre-footer-vertical-spacing 0;
   padding-left: 0;
   margin-top: 0;
-  margin-bottom: $spacing-medium;
   gap: 60px 20px;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   list-style: none;
 
   .logo-image {

package/src/theme/_header.scss

@@ -15,13 +15,14 @@
       max-height: 80px;
       flex: 1 1 0;
       align-self: center;
-
       a {
         display: block;
 
         img {
+          width: auto;
           max-width: 100%;
           height: auto;
+          max-height: 80px;
         }
       }
     }
@@ -157,6 +158,10 @@
           height 600ms ease-in-out;
         transition-property: top, height;
 
+        @media only screen and (max-width: ($large-monitor-width + 36px)) {
+          left: -1em;
+          width: calc(100% + 2em);
+        }
         &.active {
           top: 0;
           height: 188px;
@@ -183,7 +188,6 @@
               padding-bottom: 0.5rem;
               border-bottom: 2px solid $black;
               border-left: none;
-              margin-left: 12.6rem;
 
               @media only screen and (max-width: $tablet-breakpoint) {
                 padding-top: 2rem;
@@ -238,7 +242,6 @@
   .tools-wrapper {
     display: flex;
     flex-direction: row-reverse;
-    justify-content: space-between;
     padding-top: 16px;
 
     .intranet-flag {
@@ -272,6 +275,7 @@
     }
 
     .language-selector a {
+      color: $black;
       text-transform: uppercase;
     }
 
@@ -370,7 +374,7 @@
       flex: 3.5 1 0;
       align-self: center;
       justify-content: center;
-      margin-bottom: 40px;
+      margin-bottom: 11px;
 
       @media only screen and (max-width: $largest-mobile-screen) {
         display: none;
@@ -410,6 +414,18 @@
           }
         }
       }
+      .desktop-menu {
+        .item {
+          padding-top: 15px;
+          &:hover::before,
+          &.active::before {
+            bottom: -20px;
+          }
+        }
+        .submenu-wrapper {
+          margin-top: 11px;
+        }
+      }
     }
 
     .complementary-logo {
@@ -418,6 +434,10 @@
       flex: 1 1 auto;
       flex-direction: row-reverse;
 
+      @media only screen and (max-width: $largest-mobile-screen) {
+        display: none;
+      }
+
       @media only screen and (max-width: $computer-breakpoint) {
         flex: 0 1 55px;
       }
@@ -587,7 +607,7 @@ body.has-toolbar.has-sidebar {
       }
     }
 
-    & > li:first-child > button {
+    & > li:first-child > .item {
       margin-left: 0;
     }
 

package/src/theme/_insets.scss

@@ -6,7 +6,7 @@
   align-items: center;
   justify-content: center;
   border-radius: 100%;
-  background-color: #ecebeb;
+  background-color: var(--theme-high-contrast-color);
   .day {
     font-size: 52px;
     font-style: normal;