@kitconcept/volto-light-theme 1.0.0-rc.0

package/src/theme/_header.scss

@@ -0,0 +1,253 @@
+.header-wrapper .header {
+  display: flex;
+  flex-direction: column-reverse;
+
+  .logo-nav-wrapper {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 2;
+    align-items: baseline;
+    justify-content: space-between;
+    padding-top: 2rem;
+    padding-bottom: 1rem;
+
+    .logo {
+      align-self: center;
+    }
+
+    .navigation {
+      display: flex;
+      flex-grow: 2;
+      align-self: center;
+      justify-content: center;
+      @media only screen and (max-width: $computer-width) {
+        justify-content: flex-end;
+      }
+
+      .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;
+        }
+      }
+
+      .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;
+            }
+          }
+        }
+      }
+    }
+  }
+  .search-wrapper {
+    display: flex;
+    flex-direction: row-reverse;
+
+    .search {
+      .searchbox {
+        display: flex;
+
+        input {
+          border: none;
+
+          &:focus {
+            outline: none;
+          }
+        }
+      }
+
+      .search-button {
+        text-align: right;
+      }
+
+      button {
+        width: 75px;
+        height: 75px;
+        border: none;
+        background-color: transparent;
+        border-radius: 50%;
+        transition: background-color 200ms ease-in-out, color 300ms ease-in-out;
+
+        svg {
+          transition: transform 300ms ease-in-out;
+          transition-property: transform;
+        }
+
+        &:hover {
+          background-color: $darkGrey;
+          color: $white;
+          cursor: pointer;
+
+          svg {
+            transform: scale(0.75);
+          }
+        }
+        &:active {
+          transform: scale(0.85);
+          transition-duration: 100ms;
+          transition-property: transform;
+        }
+      }
+
+      .search-bar {
+        position: absolute;
+        z-index: 10;
+        top: -135px;
+        left: 0;
+        width: 100%;
+        height: 90px;
+        padding-top: 2rem;
+        background-color: $lightgrey;
+        transition: top 500ms ease-in-out, height 600ms ease-in-out;
+        transition-property: top height;
+
+        &.active {
+          top: 0;
+          height: 190px;
+
+          @media only screen and (max-width: $largest-mobile-screen) {
+            height: 232px;
+          }
+        }
+
+        .ui.container {
+          display: flex;
+          height: 100%;
+          align-items: center;
+          justify-content: center;
+
+          form {
+            width: 100%;
+
+            .searchbox {
+              justify-content: space-between;
+              padding-top: 0;
+              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;
+                margin-left: 0.5rem;
+              }
+              @media only screen and (max-width: $large-monitor-breakpoint) {
+                padding-top: 0;
+              }
+
+              input {
+                overflow: hidden;
+                width: 70%;
+                padding-left: 0;
+                margin-right: 1rem;
+                background-color: $lightgrey;
+                color: $black;
+                font-size: 1.5rem;
+                @media only screen and (min-width: $tablet-breakpoint) and (max-width: 788px) {
+                  margin-left: 1.5rem;
+                }
+
+                &::placeholder {
+                  color: $black;
+                  opacity: 0.5;
+                }
+              }
+
+              button {
+                width: 75px;
+                height: 75px;
+                padding: 10px;
+                margin-right: 7px;
+
+                &:hover {
+                  background-color: $darkGrey;
+                  border-radius: 50%;
+                  svg {
+                    fill: $white !important;
+                  }
+                }
+
+                svg {
+                  fill: $black !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .tools-wrapper {
+    display: flex;
+    flex-direction: row-reverse;
+    padding-top: 16px;
+
+    .language-selector {
+      padding-left: 40px;
+    }
+
+    .language-selector a {
+      text-transform: uppercase;
+    }
+    .tools {
+      display: flex;
+    }
+    .tools a {
+      margin-right: 10px;
+      color: $black;
+      font-size: 14px;
+      text-align: center;
+    }
+
+    .tools a::after {
+      padding-right: 0;
+      padding-left: 10px;
+      content: '|';
+      font-size: 1rem;
+    }
+
+    .tools a:last-child:after {
+      padding-right: 5px;
+      padding-left: 5px;
+      content: '';
+    }
+
+    .tools .anontools {
+      display: flex;
+      margin-right: 10px;
+
+      a {
+        margin-right: 0;
+        color: $black;
+      }
+
+      > div {
+        &:first-of-type::after {
+          content: '|';
+          font-size: 1rem;
+        }
+      }
+    }
+  }
+}

package/src/theme/_layout.scss

@@ -0,0 +1,271 @@
+:root {
+  --layout-container-width: 1440px;
+  --default-container-width: 940px;
+  --narrow-container-width: 620px;
+}
+
+// Container queries still do not work with CSS properties
+// They should be exact numbers
+// For now, maintain in sync with the above
+$layout-container-width: 1440px;
+$default-container-width: 940px;
+$narrow-container-width: 620px;
+
+@mixin narrow-container-width() {
+  max-width: var(--narrow-container-width);
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@mixin default-container-width() {
+  max-width: var(--default-container-width);
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@mixin layout-container-width() {
+  max-width: var(--layout-container-width);
+  margin-right: auto;
+  margin-left: auto;
+}
+
+// One still cannot use variables or CSS properties directly on @container queries
+@mixin adjustMarginsToContainer($width) {
+  @container (max-width: #{$width - 1}) {
+    margin-right: 2rem;
+    margin-left: 2rem;
+  }
+}
+
+// Container adjustments for dealing correctly with absoluted elements
+@mixin container-preference-order($zindex) {
+  position: relative;
+  z-index: $zindex;
+}
+
+// We expect initially three main containers
+.header-wrapper {
+  .a.container {
+    @include container-preference-order(12);
+  }
+}
+
+.content-area {
+  .a.container {
+    @include container-preference-order(10);
+  }
+}
+
+footer {
+  .a.container {
+    @include container-preference-order(8);
+  }
+}
+
+// If using popperjs, we need also to set preference too to the
+// popperjs container.
+[data-popper-placement] {
+  @include container-preference-order(100);
+}
+
+// Container widths for configurable via block styling wrapper
+// TODO: consider renaming "align" property to something more meaningful
+.has--align--center {
+  @include narrow-container-width();
+}
+
+.has--align--wide {
+  @include default-container-width();
+}
+
+.has--align--full {
+  @include layout-container-width();
+}
+
+// Container definitions for elements
+#page-document > * {
+  @include layout-container-width();
+}
+
+#page-history > * {
+  @include layout-container-width();
+}
+
+#page-contents > * {
+  @include layout-container-width();
+}
+
+.header-wrapper .header,
+.breadcrumbs .breadcrumb {
+  @include layout-container-width();
+  @include adjustMarginsToContainer($layout-container-width);
+}
+
+// Content Layout Styling
+#page-document .blocks-group-wrapper {
+  & > h2,
+  & > h3,
+  & > h4,
+  & > h5,
+  & > h6,
+  & > ul,
+  & > ol,
+  & > li,
+  & > p,
+  & > span,
+  & > blockquote,
+  & > .block.image.align.left.medium,
+  & > .block.image.align.left.small,
+  & > .block.image.align.right.medium,
+  & > .block.image.align.right.small,
+  .block.image.align.center figure,
+  .event-details,
+  .download-event,
+  .block.separator.has--align--left .line,
+  .block.separator.has--align--center .line,
+  & > table,
+  & > pre,
+  & > .block.code {
+    @include narrow-container-width();
+    @include adjustMarginsToContainer($narrow-container-width + 2 * 36px);
+  }
+
+  & > h1.documentFirstHeading,
+  & > .block.image.align.left,
+  & > .block.image.align.right,
+  & > .block.image.align.wide figure,
+  & > .block.__button,
+  & > .block.listing .listing-item,
+  & > .block.listing .emptyListing,
+  & > .block.listing.grid,
+  & > .block h2.headline,
+  & > .block.heading .heading-wrapper,
+  & > .block.separator.has--align--full .line,
+  & > .block.introduction .block-container,
+  & > .block.teaser .grid-teaser-item.default,
+  & > .table-of-contents,
+  & > .slate blockquote {
+    @include default-container-width();
+  }
+
+  & > .block.teaser,
+  & > .block.image.align.full,
+  & > .block.video.align.full,
+  & > .block.maps.align.full {
+    @include layout-container-width();
+  }
+
+  & > h1.documentFirstHeading {
+    @include adjustMarginsToContainer($default-container-width);
+  }
+
+  & > .block {
+    // This is the default, same color spacing for all blocks
+    margin-bottom: $block-vertical-space;
+  }
+
+  &:last-child {
+    margin-bottom: -1rem !important;
+  }
+}
+
+// Setting a default, for all blocks
+// We want all blocks in edit go layout by default
+// But block's inner containers can go less (eg. grid)
+#page-add,
+#page-edit {
+  [class*='block-editor-'] {
+    @include layout-container-width();
+    @include adjustMarginsToContainer($layout-container-width);
+  }
+}
+
+// Add/Edit views
+#page-add,
+#page-edit {
+  .block.slate .slate-editor,
+  .block-editor-image.left.medium,
+  .block-editor-image.left.small,
+  .block-editor-image.right.medium,
+  .block-editor-image.right.small,
+  .block-editor-image.center figure,
+  .block-editor-separator.has--align--left .block.separator,
+  .block-editor-separator.has--align--center .block.separator,
+  .block-editor-slateTable,
+  .block-editor-codeBlock,
+  .block-editor-mermaidBlock {
+    @include narrow-container-width();
+    @include adjustMarginsToContainer($narrow-container-width);
+  }
+
+  .block-editor-title h1,
+  .block-editor-image.left.large,
+  .block-editor-image.right.large,
+  .block-editor-image.wide figure, // Wide images are always large
+  .block-editor-image.wide.large figure,
+  .block.introduction .slate-editor,
+  .block.heading .heading-wrapper,
+  .block-editor-listing .items,
+  .block-editor-listing .listing.message,
+  .block-editor-separator.has--align--full .block.separator,
+  .block-editor-separator .block.separator.has--align--full,
+  .block.teaser.has--align--center,
+  .block-editor-teaser .grid-teaser-item.default,
+  .block-editor-toc {
+    @include default-container-width();
+    @include adjustMarginsToContainer($default-container-width);
+  }
+
+  .block-editor-slate,
+  .block-editor-image,
+  .block-editor-slider,
+  .block-editor-teaser,
+  .block-editor-separator.has--align--left {
+    @include layout-container-width();
+    @include adjustMarginsToContainer($layout-container-width);
+  }
+}
+
+// Grids adjustments (has to be paired with collections/grid.variables)
+// TODO: Move to our own grid component
+.block.__grid .ui.stackable,
+.block.__grid h2.headline,
+.block.gridBlock .ui.stackable,
+.block.gridBlock .grid-items,
+.block.gridBlock h2.headline {
+  @include default-container-width();
+  max-width: calc(var(--default-container-width) + 1rem);
+}
+
+// Fix for Image Grid with only one image
+#page-document .block.gridBlock .block.image.align.center figure,
+#page-document .block.gridBlock .block.image.align.center figure {
+  max-width: unset;
+}
+
+// handlers adjustments
+body.has-toolbar.has-sidebar .drag.handle.wrapper {
+  margin-left: -30px !important;
+}
+
+body.has-toolbar.has-sidebar .block .ui.basic.button.delete-button {
+  margin-right: -30px !important;
+}
+
+#page-add,
+#page-edit {
+  .block-editor-accordion {
+    [class*='block-editor-'] {
+      margin-right: 0;
+      margin-left: 0;
+    }
+  }
+}
+
+.contenttype-file {
+  a {
+    text-decoration: underline;
+  }
+}
+
+@import 'bgcolor-blocks-layout';

package/src/theme/_temp.scss

@@ -0,0 +1,2 @@
+// Use for temporal fixes (eg. ones being in the pipeline in Volto itself or
+// other add-ons)

package/src/theme/_toolbar.scss

@@ -0,0 +1,3 @@
+#toolbar .toolbar-content {
+  z-index: 100;
+}

package/src/theme/_typo-custom.scss

@@ -0,0 +1,193 @@
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+a,
+li {
+  font-family: $page-font;
+  font-style: normal;
+  @include body-text();
+}
+
+p,
+ul,
+ol {
+  margin-bottom: $block-vertical-space;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+strong {
+  @include add(weight, bold);
+}
+
+em,
+em span span {
+  font-style: italic;
+}
+
+#page-document {
+  blockquote {
+    padding: 18px 40px;
+  }
+}
+
+h1.documentFirstHeading {
+  border: none;
+  @include page-title();
+  @include vertical-space-h1();
+  span {
+    border: none;
+    @include page-title();
+  }
+
+  &::before {
+    display: none;
+  }
+}
+
+// Block Title
+.block h2.headline {
+  @include block-title();
+  @include vertical-space-h2();
+}
+
+// Heading block
+.heading-wrapper h2,
+.block .heading-wrapper h2:last-child {
+  // Needed to cancel the Semantic one
+  @include block-title();
+  @include vertical-space-heading();
+}
+.heading-wrapper h3 {
+  padding-top: 3rem;
+  padding-bottom: 1rem;
+  font-size: 42px;
+  font-weight: $light;
+  line-height: 48px;
+}
+
+// Slate headings
+h2 {
+  @include text-heading-h2();
+  @include vertical-space-h2();
+  span {
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+  }
+}
+h3 {
+  @include text-heading-h3();
+  @include vertical-space-h3();
+  span {
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+  }
+}
+h4 {
+  @include text-heading-h4();
+  @include vertical-space-h4();
+  span {
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+  }
+}
+
+// Head-title
+.head-title,
+.head-title span {
+  @include body-text-bold();
+  padding-bottom: 10px;
+  letter-spacing: 1px;
+  text-transform: uppercase !important;
+}
+
+#page-add,
+#page-edit {
+  .head-title,
+  .head-title span {
+    user-select: none;
+  }
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: thin;
+  font-weight: 100;
+  src: local('Inter');
+  src: url('./fonts/Inter-Thin.ttf');
+  src: url('./fonts/Inter-Thin.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Inter';
+  // font-style: extra-light;
+  font-weight: 200;
+  src: local('Inter');
+  src: url('./fonts/Inter-ExtraLight.ttf');
+  src: url('./fonts/Inter-ExtraLight.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: light;
+  font-weight: 300;
+  src: local('Inter');
+  src: url('./fonts/Inter-Light.ttf');
+  src: url('./fonts/Inter-Light.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal; //regular
+  font-weight: 400;
+  src: local('Inter');
+  src: url('./fonts/Inter-Regular.ttf');
+  src: url('./fonts/Inter-Regular.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: medium;
+  font-weight: 500;
+  src: local('Inter');
+  src: url('./fonts/Inter-Medium.ttf');
+  src: url('./fonts/Inter-Medium.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Inter';
+  // font-style: semi-bold;
+  font-weight: 600;
+  src: local('Inter');
+  src: url('./fonts/Inter-SemiBold.ttf');
+  src: url('./fonts/Inter-SemiBold.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: bold;
+  font-weight: 700;
+  src: local('Inter');
+  src: url('./fonts/Inter-Bold.ttf');
+  src: url('./fonts/Inter-Bold.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Inter';
+  // font-style: extra-bold;
+  font-weight: 800;
+  src: local('Inter');
+  src: url('./fonts/Inter-ExtraBold.ttf');
+  src: url('./fonts/Inter-ExtraBold.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Inter';
+  // font-style: black;
+  font-weight: 900;
+  src: local('Inter');
+  src: url('./fonts/Inter-Black.ttf');
+  src: url('./fonts/Inter-Black.ttf') format('truetype');
+}