@thegetty/quire-cli 0.20.2 → 0.20.3

package/bin/themes/default/source/css/components/quire-menu.scss

@@ -1,209 +0,0 @@
-// =============================================================================
-// Quire-menu.scss
-// -----------------------------------------------------------------------------
-//
-// Site-wide sidebar menu component. Most of the styles for this come from the
-// Bulma .menu class and subclasses or else are applied in the layout.scss file
-// for this component's immediate container, .quire__secondary. However, some
-// elements of the menu require other specific style rules and those should live
-// here.
-
-// scss-lint:disable EmptyRule
-// scss-lint:disable SingleLinePerSelector
-
-// Override for Bulma menu element inside of .content
-// -----------------------------------------------------------------------------
-.content .menu-list {
-  list-style-type: none;
-  margin-left: 0;
-}
-
-// .quire-menu
-// -----------------------------------------------------------------------------
-.quire-menu {
-  font-family: $quire-primary-font;
-  line-height: 1.25;
-
-  .arrow {
-    display: none;
-  }
-
-  &__header {
-    margin: .25em 0 1em;
-
-    a {
-      padding-left: 0.75em;
-      &:hover {
-        text-decoration: none !important;
-      }
-    }
-
-    &__title,
-    &__title-link {
-      display: block;
-    }
-
-    &__title {
-      font-size: 1.375em;
-      font-weight: 700;
-      line-height: 1.2em;
-      color: $white;
-      font-family: $quire-headings-font;
-      @if $theme == classic {
-        letter-spacing: 0;
-      }
-    }
-    &__contributors {
-      margin: .25em 0 1.5em;
-      font-style: italic;
-    }
-
-    h1, h2, h3, h4, h5, h6 { color: $quire-menu-text-color; }
-
-  }
-
-  // Temporary until the headings/semantics of the menu can be reworked. Style matches backmatter h2
-  h6 {
-    font-family: $quire-headings-font;
-    @if $theme == classic {
-      letter-spacing: .5px;
-    } @else {
-      letter-spacing: .25px;
-    }
-    color: background-color-text-classic($content-background-color);
-    font-size: .875rem;
-    line-height: 1.28;
-    font-weight: 700;
-    text-transform: uppercase;
-    margin-top: 20px;
-    padding-bottom: 6px;
-    border-bottom: 1px solid background-color-text-classic($content-background-color);
-  }
-
-  &__formats {
-    margin-top: 2rem;
-    h6 {
-      @if (lightness($quire-menu-text-color) > 50) {
-        color: darken($quire-menu-text-color, 40%);
-        border-color: darken($quire-menu-text-color, 40%);
-
-        color: lighten($quire-menu-color, 40%);
-        border-color: lighten($quire-menu-color, 40%);
-
-      } @else {
-        color: $off-black;
-        border-color: $off-black;
-      }
-    }
-    .menu-list {
-      margin-top: .75em;
-    }
-  }
-
-  &__header,
-  &__list,
-  &__formats {
-    a {
-      margin: 0 -.75rem;
-      border-radius: 0;
-      &:hover {
-        background-color: $quire-menu-color;
-        text-decoration: underline;
-        border-left-width: 0;
-      }
-    }
-  }
-
-  &__footer {
-    margin: 2rem 0;
-    font-size: .75rem;
-    p {
-      margin-bottom: 1em;
-    }
-    .menu-list {
-      display: flex;
-      margin-top: .5em;
-      li + li {
-        margin-top: 0;
-      }
-      a {
-        padding: .5em;
-        &:hover {
-          background-color: inherit;
-        }
-      }
-    }
-    .quire-copyright {
-      padding: 0 .5em;
-    }
-  }
-
-  .page-item, .section-item {
-    a {
-      font-family: $quire-primary-font;
-      &.active {
-        margin-left: -1.25em;
-        border-left: 4px solid $accent-color;
-        color: $accent-color !important;
-        text-decoration: none;
-        padding-left: calc(.75em + 4px);
-        &:hover {
-          border-left-width: 4px;
-        }
-        * {
-          color: $accent-color !important;
-        }
-      }
-    }
-    .page-item {
-      a.active {
-        margin-left: calc(-2.75em + -4px);
-        padding-left: 2.65em;
-      }
-    }
-    &.no-landing {
-      .list-header {
-        display: block;
-        padding: .5em .75em .5em 0;
-      }
-    }
-  }
-
-  .section-item ul {
-    font-size: .875em;
-    line-height: 1.5;
-  }
-
-  .main {
-    padding-top: 1em;
-  }
-
-  .menu-list {
-    line-height: 1.5em;
-    li > ul {
-      margin-top: .25em;
-      margin-bottom: .25em;
-    }
-    li ul {
-      border-left-width: 0;
-    }
-    .section-list {
-      .section-list {
-        .page-item:not(:first-child) {
-          a {
-            padding-left: 2em;
-            line-height: .5em;
-            margin-top: .5em;
-            margin-bottom: .75em;
-            font-size: .875em;
-          }
-        }
-      }
-    }
-  }
-
-  a.quire-copyright__icon__link:hover {
-    background-color: transparent;
-  }
-}
-

package/bin/themes/default/source/css/components/quire-navbar.scss

@@ -1,366 +0,0 @@
-// =============================================================================
-// Quire-navbar.scss
-// -----------------------------------------------------------------------------
-//
-// Top-level container / banner for the site navigation. Full-width, optional
-// background color. Fixed positioning causes some issues so not using this for
-// now. Has the following components:
-//
-// - .quire-navbar-skip-link: Accessibility element, allows users of assistive
-//     technologies to quickly skip to #main content.
-// - .quire-navbar-controls: the various UI elements including search and menu
-// - .quire-navbar-page-controls: central part of the controls which includes
-//     page title, site title, and next/prev controls.
-// - .quire-navbar-button: overrides of native button styles, but the <button>
-//     element is used for accessibility reasons.
-//
-// Where possible this component will borrow from Bulma's .navbar component, but
-// the needs are different and this will not support all of Bulma's
-// functionality out of the box.
-//
-
-// scss-lint:disable NameFormat
-
-// .quire-navbar
-// -----------------------------------------------------------------------------
-.quire-navbar {
-  font-family: $quire-navigation-font;
-  font-weight: 400;
-  font-size: .875em;
-  position: sticky;
-  z-index: 1;
-
-  svg {
-    height: calc(#{$navbar-height} * .65);
-    width: calc(#{$navbar-height} * .65);
-    max-height: 1rem;
-    max-width: 1rem;
-    vertical-align: sub;
-  }
-
-  @if $navbar-height <= 2rem {
-    font-size: .85rem;
-  }
-  @if $navbar-height <= 1rem {
-    font-size: .65rem;
-  }
-
-  @include foreground-color($quire-navbar-color,$quire-navbar-text-color);
-  background-color: $quire-navbar-color;
-  min-height: $navbar-height;
-  top: 0 !important;
-  width: 100%;
-
-  a {
-    display: block;
-    padding: 0 0.5em;
-  }
-
-  @media print {
-    display: none;
-  }
-}
-
-// .quire-progress-bar
-// -----------------------------------------------------------------------------
-.quire-progress-bar {
-  height: $quire-progress-bar-height;  
-  -webkit-transition: all .25s ease;
-  transition: all .25s ease;
-  font-family: $quire-navigation-font;
-  font-size: 0.75rem;
-  background-color: background-color($secondary-background-color);
-  border-bottom: none;
-  span {
-    color: $white;
-    display: none;
-  }
-  div {
-    height: $quire-progress-bar-height;
-    width: 100%;
-    background-color: $accent-color;
-    text-align: right;
-    padding-right: .5em;
-    position: relative;
-    animation: .5s ease-out 0s 1 slideFromLeft;
-  }
-}
-
-// .quire-navbar-controls
-// -----------------------------------------------------------------------------
-.quire-navbar-controls {
-  display: flex;
-  flex-wrap: no-wrap;
-  justify-content: space-between;
-  line-height: $navbar-height;
-  height: $navbar-height;
-
-  &__left {
-    align-self: flex-start;
-    flex: 0 1 $navbar-height;
-  }
-
-  &__center { flex: 1 1 auto; }
-
-  &__right {
-    flex: 0 1 $navbar-height;
-    text-align: right;
-  }
-
-  &__left, &__right, .quire-navbar-page-controls__item {
-    button {
-      background-color: transparent;
-    }
-    a {
-      button {
-        &:hover {
-          background-color: transparent;
-        }
-      }
-    }
-    a, button, .button {
-      transition: all .25s ease;
-      &:hover {
-        color: findColorInvert($accent-color) !important;
-        background-color: $accent-color;
-        svg {
-          fill: findColorInvert($accent-color);
-        }
-        * {
-          color: findColorInvert($accent-color) !important;
-        }
-        @if $navbar == accent {
-          color: $accent-color !important;
-          background-color: findColorInvert($accent-color);
-          svg {
-            fill: $accent-color !important;
-          }
-          * {
-            color: $accent-color !important;
-          }
-        }
-      }
-    }
-    svg {
-      & img {
-        position: absolute;
-        top: 0;
-        left: 0;
-      }
-    }
-  }
-}
-
-.quire-navbar-page-controls {
-  display: flex;
-  flex-wrap: no-wrap;
-  justify-content: center;
-
-  &__item {
-    padding: 0 1rem;
-    max-height: $navbar-height;
-    overflow: hidden;
-    display: none;
-
-    a, svg {
-      transition: all .25s ease;
-    }
-
-    span.nav-label {
-      display: inline-block;
-      color: inherit;
-    }
-
-    .menu-button {
-      width: 18px;
-      display: inline-block;
-    }
-
-    &.quire-current-page {
-      font-style: italic;
-    }
-
-    &.quire-previous-page {
-      a {
-        padding: 0 1.5em 0 0.5em;
-      }
-      svg {
-        margin-right: 1em;
-      }
-    }
-
-    &.quire-next-page {
-      font-style: normal;
-      a {
-        padding: 0 0.5em 0 1.5em;
-      }
-      svg {
-        margin-left: 0.25em;
-        margin-right: 0.5em;
-      }
-    }
-    @media screen and (max-width: $quire-menu-width) {
-      a {
-        padding: 0;
-      }
-    }
-
-    @media screen and (max-width: $desktop) {
-      &.quire-home-page {
-        display: block;
-        padding-left: 0;
-        padding-right: 0;
-      }
-      &.quire-next-page,
-      &.quire-previous-page {
-        display: block;
-      }
-      span.nav-label {
-        display: none;
-      }
-    }
-
-    @media screen and (min-width: 500px) {
-      &.quire-home-page {
-        display: block;
-      }
-    }
-
-    @media screen and (min-width: $desktop) {
-      &.quire-current-page {
-        display: block;
-      }
-      &.quire-next-page,
-      &.quire-previous-page {
-        display: block;
-      }
-    }
-
-    @media screen and (min-width: 900px) {
-      &.quire-section-page {
-        display: block;
-      }
-    }
-  }
-
-  @media screen and (min-width: $desktop) {
-    .quire-navbar-button {
-      display: none;
-      &.home-button, &.play-button {
-        display: inline-block;
-      }
-    }
-  }
-}
-
-// .quire-navbar-button
-// -----------------------------------------------------------------------------
-.quire-navbar-button {
-  // scss-lint:disable PropertySortOrder
-  // scss-lint:disable SpaceAfterPropertyColon
-  -webkit-appearance: none;
-  -moz-appearance:    none;
-  appearance:         none;
-  // scss-lint:enable PropertySortOrder
-  // scss-lint:enable SpaceAfterPropertyColon
-
-  background-color: transparent;
-  border: 0;
-  height: $navbar-height;
-  width: $navbar-height;
-  padding: 0;
-
-  svg {
-    position: relative;
-    top: 2px;
-    & img {
-      position: absolute;
-      top: 0;
-      left: 0;
-    }
-  }
-
-  &.search-button,
-  &.menu-button {
-    svg {
-      height: calc(#{$navbar-height} * .75);
-      width: calc(#{$navbar-height} * .75);
-      max-height: 1.25rem;
-      max-width: 1.25rem;
-      & img {
-        max-height: 1.25rem;
-      }
-    }
-  }
-
-  &.arrow-button {
-    text-align: center;
-    svg {
-      height: calc(#{$navbar-height} * .65);
-      width: calc(#{$navbar-height} * .65);
-      max-height: 1rem;
-      max-width: 1rem;
-      & img {
-        max-height: 1rem;
-      }
-    }
-    @media screen and (max-width: $tablet) {
-      svg {
-        top: 0;
-      }
-    }
-    a {
-      -webkit-transition: all .25s ease;
-      transition: all .25s ease;
-      &:hover {
-        color: findColorInvert($accent-color) !important;
-        background-color: $accent-color;
-        svg {
-          fill: findColorInvert($accent-color);
-        }
-      }
-    }
-  }
-  &.play-button,
-  &.home-button {
-    text-align: center;
-    svg {
-      height: calc(#{$navbar-height} * .65);
-      width: calc(#{$navbar-height} * .65);
-      max-height: 2.5rem;
-      max-width: 2.5rem;
-      top: 0;
-      vertical-align: middle;
-      margin-left: 0.5rem;
-      margin-top: 0.25rem;
-      & img {
-        max-height: 2.5rem;
-      }
-    }
-  }
-}
-
-// .quire-navbar-skip-link
-// -----------------------------------------------------------------------------
-.quire-navbar-skip-link {
-  &:not(:focus) {
-    clip: rect(1px, 1px, 1px, 1px);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    width: 1px;
-    transition: 0;
-  }
-
-  &:focus {
-    background-color: darken($quire-navbar-color, 5%);
-    clip: unset;
-    height: $navbar-height;
-    line-height: $navbar-height;
-    position: absolute;
-    padding-left: 2rem;
-    padding-right: 2rem;
-    z-index: 1200;
-  }
-}
-