npm - @thegetty/quire-cli - Versions diffs - 0.20.3 → 0.20.4 - Mend

@thegetty/quire-cli 0.20.3 → 0.20.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (370) hide show

package/bin/themes/default/source/css/layout.scss ADDED Viewed

@@ -0,0 +1,186 @@
+// =============================================================================
+// Layout.scss
+// -----------------------------------------------------------------------------
+// This file defines the top-level page layout for the site, defined as rules
+// targeting the .quire class which has been applied to the <body>. Modifier
+// classes like .no-js are also supported. Has the following components:
+//
+// - .quire: base container class applied to body; gets .no-js modifier if no
+//     JS support is detected.
+// - .quire.no-js: modifier class
+//
+// - .quire__primary: The container for main content elements (including nav)
+// - .quire__secondary: the container for the site menu (which contains a
+//     standard Bulma .menu component). When JS is not supported this element
+//     sits at the bottom of the page via Flexbox. When JS is available, this
+//     element is positioned absolutely and shifted out of the viewport until
+//     it is toggled.
+// - .quire__secondary.is-expanded: modifier class
+//
+// - .visually-hidden: A utility class to hide accessibility-related content
+//     without obscuring it from screen readers, etc.
+// scss-lint:disable NameFormat
+// .quire
+// -----------------------------------------------------------------------------
+[hidden] {
+  display: none;
+  animation: 0.25s ease-out 0s 1 fadeOut !important;
+}
+.quire {
+  width: 100%;
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: $quire-headings-font;
+    @if $quire-headings-font == $ibm-sans {
+      letter-spacing: -0.025em;
+    }
+  }
+  // Styles used whether JS is enabled or not
+  #main {
+    background-color: $secondary-background-color;
+    @media print {
+      background-color: transparent;
+    }
+  }
+  &__secondary {
+    background-color: $quire-menu-color;
+    padding: 1.25em;
+    @include foreground-color($quire-menu-color, $quire-menu-text-color);
+    .title {
+      font-size: inherit;
+      font-weight: inherit;
+      line-height: inherit;
+    }
+  }
+  // Styles when JS is not supported; menu at bottom
+  &.no-js {
+    min-height: 100vh;
+    .quire__primary {
+    }
+    .quire__secondary {
+      width: 100%;
+      display: none;
+    }
+  }
+  // Styles with JS enabled (sliding menu, etc.)
+  &:not(.no-js) {
+    .quire__primary {
+      display: flex;
+      flex-direction: column;
+      /* height: 100vh; */
+      transition-property: transform;
+      transition-duration: 0.15s;
+      transition-timing-function: linear;
+      width: 100%;
+      z-index: 9999;
+      #main {
+        /* margin-top: $navbar-height; */
+        color: background-color-text($secondary-background-color);
+        flex: 1 1 auto;
+        -webkit-overflow-scrolling: touch;
+        /* overflow-y: scroll; */
+        position: relative;
+        @media print {
+          color: $print-text-color;
+        }
+      }
+      .section {
+        padding-left: 0;
+        padding-right: 0;
+      }
+      .quire-navbar {
+        flex: 0 0 auto;
+      }
+    }
+    .quire__secondary {
+      height: 100%;
+      position: fixed;
+      top: 0;
+      right: 0;
+      transform: translate3d(calc(100% - 0rem), 0, 0);
+      // transform: translateX(($quire-menu-width));
+      transition-property: transform;
+      transition-duration: 0.05s;
+      transition-timing-function: linear; // transition: all 0.15s linear;
+      // width: $quire-menu-width;
+      display: block;
+      z-index: 100;
+      // Keyboard navigation fix; users should only be able to tab through the
+      // links inside the site menu when it is expanded. Setting display:none
+      // for the menu content when it is not visible (and then un-setting when
+      // that changes) produces the desired behavior.
+      // scss-lint:disable IdSelector
+      #site-menu__inner {
+        transition-property: display;
+        transition-duration: 0.1s;
+        transition-timing-function: linear;
+        display: none;
+      }
+      &.is-expanded {
+        overflow-y: scroll;
+        transform: translate3d(0, 0, 0);
+        width: calc(#{$quire-menu-width} - 2em);
+        // width: calc(100% - 3rem);
+        @media screen and (max-width: $quire-menu-width) {
+          width: calc(100% - 3rem);
+        }
+        #site-menu__inner {
+          display: block;
+        }
+        + .quire__primary {
+          // right: $quire-menu-width;
+          // width: calc(100% - #{$quire-menu-width});
+          // transform: translate3d($quire-menu-width, 0, 0);
+          transform: translate3d(calc(-#{$quire-menu-width} + 2em), 0, 0);
+          // position: fixed;
+          // transform: translate3d(-352px, 0 ,0);
+          @media screen and (max-width: $quire-menu-width) {
+            // right: $quire-menu-width;
+            // width: calc(100vh - #{$quire-menu-width});
+            transform: translate3d(calc(-100% + 3rem), 0, 0);
+            // right: calc(100vw - #{$navbar-height});
+            // transform: translate3d(- $quire-menu-width, 0, 0);
+            // width: #{$navbar-height};
+          }
+        }
+      }
+    }
+  }
+}
+// Print overrides
+// scss-lint:disable ImportantRule
+@media print {
+  .quire {
+    &__primary {
+      display: block !important;
+      height: 100%;
+    }
+    &__secondary {
+      display: none;
+    }
+  }
+}