@kitconcept/volto-light-theme 6.0.0-alpha.9 → 6.0.1

package/src/theme/_footer.scss

@@ -1,37 +1,28 @@
 #footer {
-  margin-top: $footer-vertical-spacing-top;
+  padding-top: $footer-vertical-spacing-top;
   text-align: center;
 
-  ul.footer-logos {
-    display: grid;
-    align-items: center;
-    justify-content: center;
-    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(175px, 1fr));
-    list-style: none;
-
-    &.l img {
-      max-width: min(100%, 240px);
-      max-height: 165px;
-    }
+  .container {
+    padding: 0 1rem;
+  }
 
-    &.s img {
-      max-width: min(100%, 175px);
-      max-height: 120px;
-    }
+  .post-footer {
+    padding: $spacing-xlarge 2rem;
+    background: var(--footer-background);
+    color: var(--footer-foreground, $black);
+    font-size: 18px;
   }
 
   .footer {
-    padding: 4.2rem 2rem;
-    background-color: $lightgrey;
+    padding: $spacing-xlarge 2rem;
+    color: var(--footer-foreground, $black);
     font-size: 18px;
 
+    a {
+      color: var(--footer-foreground);
+    }
+
     a.powered-by {
-      color: $blue-for-grey-contrast;
       font-size: 14px;
     }
     .footer-branding {
@@ -41,39 +32,301 @@
     .footer-message {
       font-weight: $bold;
       a {
-        color: $blue-for-grey-contrast;
         font-weight: inherit;
         text-decoration: underline;
       }
     }
 
-    ul {
+    .followus-and-links {
       display: flex;
-      flex-wrap: wrap;
+      flex-direction: column;
+      align-items: center;
       justify-content: center;
-      padding-left: 0;
-      margin-top: 1.4rem;
-      list-style: none;
+    }
+
+    .follow-us {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      text-align: center;
+    }
+
+    .footer-links {
+      ul {
+        justify-content: center;
+      }
+    }
+
+    .logo {
+      display: flex;
+      justify-content: center;
+      margin: 5rem 0 1.8rem 0;
+
+      a {
+        display: block;
+        max-width: 200px;
+        max-height: 80px;
+
+        img {
+          max-width: 100%;
+          height: auto;
+        }
+      }
+    }
 
-      li {
-        padding: 0 7px;
-        font-size: 18px;
+    .footer-grid {
+      display: grid;
+      gap: 1rem;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      text-align: left;
 
-        a {
-          color: $blue-for-grey-contrast;
+      h2 {
+        @include text-heading-h4();
+        margin-bottom: $spacing-small;
+      }
+
+      ul {
+        display: flex;
+        flex-direction: column;
+        padding-left: 0;
+        margin: 0;
+        list-style: none;
+
+        li {
+          padding: 0 7px;
+          font-size: 18px;
+
+          a {
+            text-decoration: underline;
+          }
+        }
+      }
+
+      .address-column {
+        justify-self: start;
+        @include body-text();
+
+        img {
+          margin-bottom: 38px;
+        }
+      }
+
+      @media only screen and (max-width: $largest-mobile-screen) {
+        gap: $spacing-xlarge;
+
+        text-align: center;
+
+        .address-column {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+
+        .address-column,
+        .column-left,
+        .column-middle,
+        .column-right {
+          justify-self: center;
         }
       }
     }
+  }
+
+  .follow-us-links-and-logo {
+    display: flex;
+    margin-bottom: 50px;
+
+    &.no-logo {
+      justify-content: center;
+
+      .followus-and-links {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .follow-us {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        text-align: center;
+      }
 
-    ul.footer-links li {
-      border-right: 1px solid #205c90;
-      &:last-of-type {
-        border: none;
+      .footer-links {
+        ul {
+          justify-content: center;
+        }
       }
     }
 
-    .logo {
-      margin: 5rem 0 1.8rem 0;
+    @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;
+      }
+
+      .follow-us {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        text-align: center;
+      }
+
+      .footer-links {
+        ul {
+          justify-content: center;
+        }
+      }
+
+      .footer-logo {
+        padding-top: 50px;
+        margin: 0 auto;
+        span {
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  .followus-and-links {
+    flex-direction: column;
+  }
+
+  .footer-links,
+  .follow-us {
+    ul {
+      display: flex;
+      padding-left: 0;
+      margin: 0;
+      list-style: none;
+    }
+  }
+
+  .follow-us {
+    margin-bottom: 50px;
+    text-align: left;
+
+    span {
+      @include headtitle2();
+      display: block;
+      margin-bottom: 50px;
+      text-transform: uppercase;
+    }
+
+    .image-wrapper {
+      line-height: 0;
+    }
+
+    li {
+      margin-right: 15px;
+    }
+
+    li span {
+      display: none;
+    }
+  }
+
+  .footer-links {
+    li {
+      position: relative;
+      padding: 0 8px;
+      @include add(size, xs);
+      @include add(height, s);
+
+      &:not(:last-child):after {
+        position: absolute;
+        right: -3px;
+        display: inline-block;
+        color: var(--footer-foreground, $black);
+        content: '|';
+      }
+
+      a {
+        @include add(size, xs);
+        @include add(height, s);
+        color: var(--footer-foreground);
+      }
+    }
+  }
+
+  .footer-logo {
+    min-width: 180px;
+    max-width: 240px;
+    height: auto;
+    margin-left: auto;
+
+    span {
+      display: block;
+      margin-bottom: 50px;
+      text-align: left;
+      text-transform: uppercase;
+      @include headtitle2();
+    }
+
+    img {
+      width: 100%;
+    }
+  }
+
+  .colophon {
+    @include add(size, xs);
+    @include add(height, s);
+    padding-bottom: $spacing-small;
+
+    a {
+      @include add(size, xs);
+      @include add(height, s);
+      color: var(--footer-foreground);
+      text-decoration: underline;
     }
+
+    img {
+      margin-top: 25px;
+    }
+
+    &:before {
+      display: block;
+      padding-top: 50px;
+      border-top: 1px solid var(--footer-foreground, $black);
+      content: '';
+      @include default-container-width();
+    }
+  }
+
+  .footer + .post-footer {
+    background-color: transparent;
+  }
+}
+
+ul.logos-container {
+  display: grid;
+  align-items: center;
+  justify-content: center;
+  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));
+  list-style: none;
+
+  &.s {
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  }
+
+  &.l img {
+    max-width: min(100%, 240px);
+    max-height: 165px;
+  }
+
+  &.s img {
+    max-width: min(100%, 175px);
+    max-height: 120px;
   }
 }

package/src/theme/_header.scss

@@ -11,8 +11,29 @@
     padding-bottom: 35px;
 
     .logo {
+      max-width: 200px;
+      max-height: 80px;
       flex: 1 1 0;
       align-self: center;
+
+      a {
+        display: block;
+
+        img {
+          max-width: 100%;
+          height: auto;
+        }
+      }
+    }
+
+    .complementary-logo {
+      max-width: 200px;
+      max-height: 80px;
+
+      img {
+        max-width: 100%;
+        height: auto;
+      }
     }
 
     .navigation {
@@ -220,11 +241,21 @@
     justify-content: space-between;
     padding-top: 16px;
 
-    .intranet {
+    .intranet-flag {
       padding: 10px $spacing-small;
+      border: none;
       margin-top: -16px;
-      margin-left: 213px;
+      margin-left: 200px;
       background-color: $secondary-grey;
+
+      @media only screen and (max-width: $computer-breakpoint) {
+        margin-left: 150px;
+      }
+
+      @media only screen and (max-width: $tablet-breakpoint) {
+        margin-left: 125px;
+      }
+
       @media only screen and (max-width: $narrow-container-width) {
         margin-left: 0px;
       }
@@ -283,43 +314,123 @@
 
 .header-wrapper.intranet-header {
   .header {
-    flex-direction: column;
-
     .logo-nav-wrapper {
-      flex-wrap: wrap;
-      justify-content: flex-start;
-
-      .logo {
-        flex: 0 1 auto;
-      }
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
 
       @media only screen and (max-width: $narrow-container-width) {
         position: relative;
+        flex-wrap: wrap;
+        justify-content: space-between;
       }
 
       .mobile-nav.mobile.only {
         @media only screen and (max-width: $narrow-container-width) {
-          position: absolute;
-          top: 19px;
-          right: 0;
+          display: flex;
+          flex: 0 1 130px;
+          flex-direction: row-reverse;
+          order: 2;
         }
 
         .menu-drawer {
           @media only screen and (max-width: $computer-breakpoint) {
             top: 210px;
+
+            .search-button {
+              display: none;
+            }
           }
         }
       }
+      .logo {
+        @media only screen and (max-width: $narrow-container-width) {
+          order: 0;
+        }
+        @media only screen and (max-width: $computer-breakpoint) {
+          flex: 0 1 130px;
+        }
+      }
       .navigation {
-        flex-basis: 100%;
         margin: 29px auto 0 auto;
       }
     }
 
+    .navigation {
+      display: flex;
+      flex: 3.5 1 0;
+      align-self: center;
+      justify-content: center;
+      margin-bottom: 40px;
+
+      @media only screen and (max-width: $largest-mobile-screen) {
+        display: none;
+      }
+
+      .desktop.menu {
+        display: flex;
+        justify-content: flex-end;
+
+        a.item {
+          padding: 0 5px;
+          margin: 0 5px;
+          color: $black;
+          font-size: 18px;
+          font-weight: 600;
+          line-height: 24px;
+          text-align: center;
+        }
+      }
+
+      .mobile-menu {
+        .mobile-menu-nav {
+          > div {
+            display: flex;
+            flex-direction: column;
+          }
+
+          a.item {
+            width: 100%;
+            padding: 2rem 1.2rem 1.5rem 1.2rem;
+            color: $black;
+            font-size: 18px;
+
+            &.active {
+              border-bottom: 4px solid $black;
+            }
+          }
+        }
+      }
+    }
+
+    .complementary-logo {
+      display: flex;
+      max-width: 200px;
+      flex: 1 1 auto;
+      flex-direction: row-reverse;
+
+      @media only screen and (max-width: $computer-breakpoint) {
+        flex: 0 1 55px;
+      }
+
+      @media only screen and (max-width: $narrow-container-width) {
+        order: 1;
+      }
+    }
+
     .search-wrapper {
-      flex: 0 1 auto;
+      display: flex;
+      max-width: 600px;
+      flex: 1 1 0;
       align-self: center;
-      margin-left: 209px;
+      justify-content: center;
+
+      @media only screen and (max-width: $narrow-container-width) {
+        flex: 1 1 auto;
+        order: 3;
+      }
+
       @media only screen and (max-width: $narrow-container-width) {
         width: 100%;
         margin-left: 0%;
@@ -329,10 +440,11 @@
         width: 100%;
         border-bottom: 2px solid $secondary-grey;
         .field.searchbox {
+          padding-right: 1em;
           border: none;
 
           .ui.input input {
-            width: 500px;
+            width: 90%;
 
             &::placeholder {
               color: #808080;
@@ -532,8 +644,9 @@ body.has-toolbar.has-sidebar {
         position: absolute;
         top: 27px;
         right: 75px;
+        display: grid;
+        padding: 0;
         border: 0;
-        margin-left: 28px;
         color: $black;
         cursor: pointer;
         &:focus {
@@ -938,7 +1051,7 @@ body.has-toolbar.has-sidebar {
 
 .has-toolbar .menu-drawer,
 .has-toolbar-collapsed .menu-drawer {
-  top: 158px;
+  top: 258px;
   width: 100%;
   height: calc(100vh - 158px);
 }

package/src/theme/_layout.scss

@@ -72,8 +72,18 @@ html[style*='padding-right'] .sidebar-container {
   margin-right: 15px;
 }
 
+// Set desktop flex direction starting at largest-mobile-screen to prevent layout from breaking at 768px with expanded toolbar.
+body {
+  @media only screen and (min-width: $largest-mobile-screen) {
+    flex-direction: row;
+  }
+}
+
 // We expect initially three main containers
 .header-wrapper {
+  // This is the pusher for the header under 1440px so over that is tight to the border
+  padding: 0 1em;
+
   .q.container,
   .a.container {
     @include container-preference-order(12);
@@ -129,7 +139,7 @@ footer {
 
 .header-wrapper .header {
   @include layout-container-width();
-  @include adjustMarginsToContainer($layout-container-width);
+  // @include adjustMarginsToContainer($layout-container-width);
 }
 
 .breadcrumbs .breadcrumb {

package/src/theme/_sitemap.scss

@@ -1,6 +1,10 @@
 @use 'sass:map';
 .section-sitemap {
   #page-sitemap {
+    .q.container {
+      @include default-container-width();
+    }
+
     h1 {
       @include page-title();
       @include vertical-space-h1();

package/src/theme/_utils.scss

@@ -37,7 +37,20 @@
 
 @mixin default-aspect-ratio {
   height: auto; // needed width width, height props and aspect ratio
-  aspect-ratio: $aspect-ratio;
+  aspect-ratio: var(--image-aspect-ratio, $aspect-ratio);
   object-fit: cover;
   object-position: top left;
 }
+
+@mixin button-style {
+  padding: 7px 10px;
+  border: 2px solid var(--quanta-sapphire);
+  border-radius: 10px;
+  margin-bottom: 10px; // Covers long button texts
+  background-color: transparent;
+  color: var(--quanta-sapphire);
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 0;
+  opacity: 0.8;
+}

package/src/theme/_variables.scss

@@ -114,6 +114,11 @@ $secondary-grey: #ececec !default;
   syntax: '<color>';
 }
 
+@property --image-aspect-ratio {
+  inherits: true;
+  syntax: '<number> | auto';
+}
+
 :root {
   --background: initial;
   --text-color: initial;
@@ -424,8 +429,12 @@ $line-heights: (
 }
 
 @mixin external-link-icon() {
-  display: inline;
-  content: '\a0'
-    url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='external-link-alt' class='svg-inline--fa fa-external-link-alt fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='11' height='11' %3E%3Cpath fill='%23007EB1' d='M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z'%3E%3C/path%3E%3C/svg%3E");
+  display: inline-block;
+  width: 11px;
+  height: 11px;
+  background-color: var(--link-foreground-color, #0070a2);
+  content: '';
+  mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='external-link-alt' class='svg-inline--fa fa-external-link-alt fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z'/%3E%3C/svg%3E")
+    no-repeat center;
   white-space: nowrap;
 }