@kitconcept/volto-light-theme 2.0.0 → 2.1.0

package/src/theme/_typography.scss

@@ -16,7 +16,7 @@
 
 #sidebar *,
 #toolbar * {
-  font-family: 'Metropolis', $page-font !important;
+  font-family: $cmsui-font !important;
 }
 
 #sidebar,
@@ -34,247 +34,3 @@
     font-size: 14px;
   }
 }
-
-// //
-// Metropolis Font
-// //
-
-// @font-face {
-//   font-family: 'Metropolis Extra';
-//   src: url('./fonts/metropolis/Metropolis-ExtraLightItalic.eot');
-//   src: local('Metropolis Extra Light Italic'), local('Metropolis-ExtraLightItalic'),
-//       url('./fonts/metropolis/Metropolis-ExtraLightItalic.eot?#iefix') format('embedded-opentype'),
-//       url('./fonts/metropolis/Metropolis-ExtraLightItalic.woff2') format('woff2'),
-//       url('./fonts/metropolis/Metropolis-ExtraLightItalic.woff') format('woff'),
-//       url('./fonts/metropolis/Metropolis-ExtraLightItalic.ttf') format('truetype');
-//   font-weight: 200;
-//   font-style: italic;
-// }
-
-@font-face {
-  font-family: 'Metropolis';
-  font-style: italic;
-  font-weight: normal;
-  src: url('./fonts/metropolis/Metropolis-RegularItalic.eot');
-  src:
-    local('Metropolis Regular Italic'),
-    local('Metropolis-RegularItalic'),
-    url('./fonts/metropolis/Metropolis-RegularItalic.eot?#iefix')
-      format('embedded-opentype'),
-    url('./fonts/metropolis/Metropolis-RegularItalic.woff2') format('woff2'),
-    url('./fonts/metropolis/Metropolis-RegularItalic.woff') format('woff'),
-    url('./fonts/metropolis/Metropolis-RegularItalic.ttf') format('truetype');
-}
-
-// @font-face {
-//   font-family: 'Metropolis Semi';
-//   src: url('./fonts/metropolis/Metropolis-SemiBoldItalic.eot');
-//   src: local('Metropolis Semi Bold Italic'), local('Metropolis-SemiBoldItalic'),
-//       url('./fonts/metropolis/Metropolis-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
-//       url('./fonts/metropolis/Metropolis-SemiBoldItalic.woff2') format('woff2'),
-//       url('./fonts/metropolis/Metropolis-SemiBoldItalic.woff') format('woff'),
-//       url('./fonts/metropolis/Metropolis-SemiBoldItalic.ttf') format('truetype');
-//   font-weight: 600;
-//   font-style: italic;
-// }
-
-// @font-face {
-//   font-family: 'Metropolis';
-//   src: url('./fonts/metropolis/Metropolis-BlackItalic.eot');
-//   src: local('Metropolis Black Italic'), local('Metropolis-BlackItalic'),
-//       url('./fonts/metropolis/Metropolis-BlackItalic.eot?#iefix') format('embedded-opentype'),
-//       url('./fonts/metropolis/Metropolis-BlackItalic.woff2') format('woff2'),
-//       url('./fonts/metropolis/Metropolis-BlackItalic.woff') format('woff'),
-//       url('./fonts/metropolis/Metropolis-BlackItalic.ttf') format('truetype');
-//   font-weight: 900;
-//   font-style: italic;
-// }
-
-// @font-face {
-//   font-family: 'Metropolis';
-//   src: url('./fonts/metropolis/Metropolis-ThinItalic.eot');
-//   src: local('Metropolis Thin Italic'), local('Metropolis-ThinItalic'),
-//       url('./fonts/metropolis/Metropolis-ThinItalic.eot?#iefix') format('embedded-opentype'),
-//       url('./fonts/metropolis/Metropolis-ThinItalic.woff2') format('woff2'),
-//       url('./fonts/metropolis/Metropolis-ThinItalic.woff') format('woff'),
-//       url('./fonts/metropolis/Metropolis-ThinItalic.ttf') format('truetype');
-//   font-weight: 100;
-//   font-style: italic;
-// }
-
-// @font-face {
-//   font-family: 'Metropolis Extra';
-//   src: url('./fonts/metropolis/Metropolis-ExtraBold.eot');
-//   src: local('Metropolis Extra Bold'), local('Metropolis-ExtraBold'),
-//       url('./fonts/metropolis/Metropolis-ExtraBold.eot?#iefix') format('embedded-opentype'),
-//       url('./fonts/metropolis/Metropolis-ExtraBold.woff2') format('woff2'),
-//       url('./fonts/metropolis/Metropolis-ExtraBold.woff') format('woff'),
-//       url('./fonts/metropolis/Metropolis-ExtraBold.ttf') format('truetype');
-//   font-weight: 800;
-//   font-style: normal;
-// }
-
-// @font-face {
-//   font-family: 'Metropolis Semi';
-//   src: url('./fonts/metropolis/Metropolis-SemiBold.eot');
-//   src: local('Metropolis Semi Bold'), local('Metropolis-SemiBold'),
-//       url('./fonts/metropolis/Metropolis-SemiBold.eot?#iefix') format('embedded-opentype'),
-//       url('./fonts/metropolis/Metropolis-SemiBold.woff2') format('woff2'),
-//       url('./fonts/metropolis/Metropolis-SemiBold.woff') format('woff'),
-//       url('./fonts/metropolis/Metropolis-SemiBold.ttf') format('truetype');
-//   font-weight: 600;
-//   font-style: normal;
-// }
-
-@font-face {
-  font-family: 'Metropolis';
-  font-style: italic;
-  font-weight: 500;
-  src: url('./fonts/metropolis/Metropolis-MediumItalic.eot');
-  src:
-    local('Metropolis Medium Italic'),
-    local('Metropolis-MediumItalic'),
-    url('./fonts/metropolis/Metropolis-MediumItalic.eot?#iefix')
-      format('embedded-opentype'),
-    url('./fonts/metropolis/Metropolis-MediumItalic.woff2') format('woff2'),
-    url('./fonts/metropolis/Metropolis-MediumItalic.woff') format('woff'),
-    url('./fonts/metropolis/Metropolis-MediumItalic.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Metropolis';
-  font-style: normal;
-  font-weight: 500;
-  src: url('./fonts/metropolis/Metropolis-Medium.eot');
-  src:
-    local('Metropolis Medium'),
-    local('Metropolis-Medium'),
-    url('./fonts/metropolis/Metropolis-Medium.eot?#iefix')
-      format('embedded-opentype'),
-    url('./fonts/metropolis/Metropolis-Medium.woff2') format('woff2'),
-    url('./fonts/metropolis/Metropolis-Medium.woff') format('woff'),
-    url('./fonts/metropolis/Metropolis-Medium.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Metropolis';
-  font-style: italic;
-  font-weight: 300;
-  src: url('./fonts/metropolis/Metropolis-LightItalic.eot');
-  src:
-    local('Metropolis Light Italic'),
-    local('Metropolis-LightItalic'),
-    url('./fonts/metropolis/Metropolis-LightItalic.eot?#iefix')
-      format('embedded-opentype'),
-    url('./fonts/metropolis/Metropolis-LightItalic.woff2') format('woff2'),
-    url('./fonts/metropolis/Metropolis-LightItalic.woff') format('woff'),
-    url('./fonts/metropolis/Metropolis-LightItalic.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Metropolis';
-  font-style: normal;
-  font-weight: 300;
-  src: url('./fonts/metropolis/Metropolis-Light.eot');
-  src:
-    local('Metropolis Light'),
-    local('Metropolis-Light'),
-    url('./fonts/metropolis/Metropolis-Light.eot?#iefix')
-      format('embedded-opentype'),
-    url('./fonts/metropolis/Metropolis-Light.woff2') format('woff2'),
-    url('./fonts/metropolis/Metropolis-Light.woff') format('woff'),
-    url('./fonts/metropolis/Metropolis-Light.ttf') format('truetype');
-}
-
-// @font-face {
-//   font-family: 'Metropolis';
-//   src: url('./fonts/metropolis/Metropolis-Black.eot');
-//   src: local('Metropolis Black'), local('Metropolis-Black'),
-//       url('./fonts/metropolis/Metropolis-Black.eot?#iefix') format('embedded-opentype'),
-//       url('./fonts/metropolis/Metropolis-Black.woff2') format('woff2'),
-//       url('./fonts/metropolis/Metropolis-Black.woff') format('woff'),
-//       url('./fonts/metropolis/Metropolis-Black.ttf') format('truetype');
-//   font-weight: 900;
-//   font-style: normal;
-// }
-
-// @font-face {
-//   font-family: 'Metropolis';
-//   src: url('./fonts/metropolis/Metropolis-Thin.eot');
-//   src: local('Metropolis Thin'), local('Metropolis-Thin'),
-//       url('./fonts/metropolis/Metropolis-Thin.eot?#iefix') format('embedded-opentype'),
-//       url('./fonts/metropolis/Metropolis-Thin.woff2') format('woff2'),
-//       url('./fonts/metropolis/Metropolis-Thin.woff') format('woff'),
-//       url('./fonts/metropolis/Metropolis-Thin.ttf') format('truetype');
-//   font-weight: 100;
-//   font-style: normal;
-// }
-
-// @font-face {
-//   font-family: 'Metropolis Extra';
-//   src: url('./fonts/metropolis/Metropolis-ExtraBoldItalic.eot');
-//   src: local('Metropolis Extra Bold Italic'), local('Metropolis-ExtraBoldItalic'),
-//       url('./fonts/metropolis/Metropolis-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
-//       url('./fonts/metropolis/Metropolis-ExtraBoldItalic.woff2') format('woff2'),
-//       url('./fonts/metropolis/Metropolis-ExtraBoldItalic.woff') format('woff'),
-//       url('./fonts/metropolis/Metropolis-ExtraBoldItalic.ttf') format('truetype');
-//   font-weight: 800;
-//   font-style: italic;
-// }
-
-// @font-face {
-//   font-family: 'Metropolis Extra';
-//   src: url('./fonts/metropolis/Metropolis-ExtraLight.eot');
-//   src: local('Metropolis Extra Light'), local('Metropolis-ExtraLight'),
-//       url('./fonts/metropolis/Metropolis-ExtraLight.eot?#iefix') format('embedded-opentype'),
-//       url('./fonts/metropolis/Metropolis-ExtraLight.woff2') format('woff2'),
-//       url('./fonts/metropolis/Metropolis-ExtraLight.woff') format('woff'),
-//       url('./fonts/metropolis/Metropolis-ExtraLight.ttf') format('truetype');
-//   font-weight: 200;
-//   font-style: normal;
-// }
-
-@font-face {
-  font-family: 'Metropolis';
-  font-style: normal;
-  font-weight: bold;
-  src: url('./fonts/metropolis/Metropolis-Bold.eot');
-  src:
-    local('Metropolis Bold'),
-    local('Metropolis-Bold'),
-    url('./fonts/metropolis/Metropolis-Bold.eot?#iefix')
-      format('embedded-opentype'),
-    url('./fonts/metropolis/Metropolis-Bold.woff2') format('woff2'),
-    url('./fonts/metropolis/Metropolis-Bold.woff') format('woff'),
-    url('./fonts/metropolis/Metropolis-Bold.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Metropolis';
-  font-style: normal;
-  font-weight: normal;
-  src: url('./fonts/metropolis/Metropolis-Regular.eot');
-  src:
-    local('Metropolis Regular'),
-    local('Metropolis-Regular'),
-    url('./fonts/metropolis/Metropolis-Regular.eot?#iefix')
-      format('embedded-opentype'),
-    url('./fonts/metropolis/Metropolis-Regular.woff2') format('woff2'),
-    url('./fonts/metropolis/Metropolis-Regular.woff') format('woff'),
-    url('./fonts/metropolis/Metropolis-Regular.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Metropolis';
-  font-style: italic;
-  font-weight: bold;
-  src: url('./fonts/metropolis/Metropolis-BoldItalic.eot');
-  src:
-    local('Metropolis Bold Italic'),
-    local('Metropolis-BoldItalic'),
-    url('./fonts/metropolis/Metropolis-BoldItalic.eot?#iefix')
-      format('embedded-opentype'),
-    url('./fonts/metropolis/Metropolis-BoldItalic.woff2') format('woff2'),
-    url('./fonts/metropolis/Metropolis-BoldItalic.woff') format('woff'),
-    url('./fonts/metropolis/Metropolis-BoldItalic.ttf') format('truetype');
-}

package/src/theme/_variables.scss

@@ -24,8 +24,10 @@ $heading-text-bottom-spacing: 25px !default;
 
 // Fonts
 $custom-fontname: 'Inter' !default;
+$cmsui-fontname: 'Metropolis' !default;
 $page-font-template: $custom-fontname, sans-serif !default;
 $page-font: var(--custom-main-font, $page-font-template) !default;
+$cmsui-font: var(--custom-cms-font, $cmsui-fontname, $page-font) !default;
 $header-font: var(--custom-headers-font, $page-font) !default;
 
 // Breakpoints
@@ -37,6 +39,11 @@ $computer-breakpoint: 941px !default;
 $large-monitor-width: 1440px !default;
 $large-monitor-breakpoint: 1441px !default;
 
+// Container widths
+$layout-container-width: 1440px !default;
+$default-container-width: 940px !default;
+$narrow-container-width: 620px !default;
+
 // Rest of theme variables
 
 :root {
@@ -332,3 +339,10 @@ $line-heights: (
   @include add(height, s);
   @include add(weight, light);
 }
+
+@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");
+  white-space: nowrap;
+}

package/src/theme/blocks/_grid.scss

@@ -35,6 +35,14 @@
   .block.teaser {
     margin-bottom: 0;
     background-color: $lightgrey;
+
+    // External link icon
+    a.external {
+      .content h2:after {
+        @include external-link-icon();
+      }
+    }
+
     .teaser-item {
       height: 100%;
 

package/src/theme/blocks/_image.scss

@@ -180,7 +180,7 @@ figcaption {
   .credits {
     margin-top: 5px;
     color: $blue-for-grey-contrast;
-    -webkit-font-smoothing: anitaliased;
+    -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
     @include marginal-description();

package/src/theme/blocks/_listing.scss

@@ -1,5 +1,5 @@
 // Listing Block
-.block.listing,
+#main .block.listing,
 .column > .block.listing,
 .block.search,
 .block-editor-search {
@@ -25,10 +25,7 @@
 
     a.external {
       .listing-body h2:after {
-        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");
-        white-space: nowrap;
+        @include external-link-icon();
       }
     }
 
@@ -209,6 +206,115 @@
     }
   }
 
+  .image-gallery {
+    .ui.button {
+      margin: 0;
+      box-shadow: none !important;
+      color: black !important;
+      filter: none;
+
+      &.image-gallery-left-nav {
+        top: calc(50% - 47px);
+        left: -68px;
+      }
+
+      &.image-gallery-right-nav {
+        top: calc(50% - 47px);
+        right: -68px;
+      }
+
+      &.image-gallery-fullscreen-button,
+      &.image-gallery-play-button {
+        bottom: -94px;
+        border: solid 1px black;
+        border-radius: 0;
+
+        svg {
+          vertical-align: top;
+        }
+      }
+
+      &.image-gallery-play-button {
+        right: 49px;
+        left: auto;
+      }
+
+      .icon {
+        margin: 0;
+      }
+    }
+
+    & .fullscreen .ui.button {
+      color: white !important;
+
+      &.image-gallery-left-nav {
+        left: 20px;
+      }
+
+      &.image-gallery-right-nav {
+        right: 20px;
+      }
+    }
+
+    .image-gallery-description {
+      position: relative;
+      bottom: auto;
+      left: auto;
+      display: block;
+      padding: 25px 0 0 0;
+      background: none;
+      color: #666;
+      font-size: 14px;
+      font-weight: 300;
+      line-height: 18px;
+      text-align: left;
+      white-space: initial;
+
+      .title {
+        margin-bottom: 10px;
+        font-weight: 700;
+      }
+
+      .credits,
+      .download,
+      .download a {
+        min-height: 18px;
+        margin-top: 5px;
+        color: #0070a2;
+        font-size: 14px;
+        line-height: 18px;
+      }
+
+      .description {
+        min-height: 18px;
+      }
+
+      .download {
+        float: right;
+      }
+    }
+
+    .fullscreen .image-gallery-description {
+      color: white;
+    }
+
+    .image-gallery-thumbnails {
+      padding: 40px 0;
+
+      .image-gallery-thumbnail {
+        border: 0;
+        margin-left: 20px;
+        opacity: 50%;
+
+        &.active,
+        &:hover,
+        &:focus {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
   .documentFirstHeading
     + &.previous--has--same--backgroundColor:not(.has--headline) {
     margin-top: 0;

package/src/theme/blocks/_teaser.scss

@@ -15,10 +15,7 @@
 
   a.external {
     .content h2:after {
-      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");
-      white-space: nowrap;
+      @include external-link-icon();
     }
   }
 

package/src/theme/main.scss

@@ -1,5 +1,7 @@
+/* No CSS above next line */
 @import 'addonsThemeCustomizationsVariables';
 @import 'variables';
+@import 'fonts';
 @import 'typography';
 @import 'utils';
 @import 'layout';
@@ -12,6 +14,8 @@
 @import 'content';
 @import 'footer';
 
+@import 'sitemap';
+
 @import 'blocks/accordion';
 @import 'blocks/image';
 @import 'blocks/introduction';
@@ -30,6 +34,6 @@
 
 @import 'temp';
 
+/* No CSS beyond this point except next line */
 @import 'addonsThemeCustomizationsMain';
-
 /* No CSS beyond this point */