@thegetty/quire-cli 0.20.3 → 0.20.4

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

@@ -0,0 +1,329 @@
+// =============================================================================
+// Quire-contents-list.scss
+// -----------------------------------------------------------------------------
+//
+// Quire uses Bulma's Menu component for the list of links inside the TOC. This
+// class exists to provide a small amount of additional styling for the main
+// TOC page of the book. Print TOC styles can also be defined on this element.
+
+// .quire-contents
+// -----------------------------------------------------------------------------
+
+
+.quire-contents .quire-page__content .container .content {
+  background-color: transparent;
+  padding-left: 0;
+  padding-right: 0;
+  margin-bottom: 2.5rem;
+  color: background-color-text-classic($secondary-background-color);
+}
+@media print {
+  .quire-page__content .container.is-fullhd {
+    padding: 0;
+  }
+}
+
+// Default list styles
+// -----------------------------------------------------------------------------
+.quire-contents-list {
+  color: background-color-text-classic($secondary-background-color);
+  &.list {
+    // Bulma overrides
+    background-color: transparent;
+    box-shadow: none;
+  }
+  @media screen {
+    font-family: $quire-headings-font;
+    margin-bottom: 5rem !important;
+  }
+  .quire-contributor {
+    font-style: italic;
+  }
+  .page-item,
+  .section-item > a,
+  .section-item > .list-header {
+    display: block;
+    margin-bottom: 1.375rem;
+    width: fit-content;
+    @media print {
+      margin-bottom: 1rem;
+    }
+  }
+  li li {
+    padding-left: 1.5rem;
+  }
+  a {
+    @media screen {
+      color: background-color-text-classic($secondary-background-color);
+      transition: all .25s ease;
+      padding-bottom: .1em;
+      border-bottom: 1px dotted background-color-text-classic($secondary-background-color);
+    }
+    @media print {
+      color: $print-text-color;
+    }
+    &:hover {
+      color: $accent-color;
+      border-bottom: 1px solid $accent-color;
+    }
+  }
+  .arrow svg {
+    display: none;
+    position: absolute;
+    width: 1em;
+    height: 1em;
+    transition: all .25s ease;
+    @if $theme == classic {
+      margin-top: .25em;
+    } @else {
+      margin-top: .375em;
+    }
+    fill: background-color-text-classic($secondary-background-color);
+  }
+  @media screen {
+    // Special styling for top-level list items
+    ul:first-child > li > a,
+    ul:first-child > li > .list-header {
+      font-size: 1.375em;
+      padding-bottom: 0;
+      border-bottom-width: 0;
+      .arrow svg {
+        display: inline-block;
+      }
+      &:hover {
+        border-bottom-width: 0;
+        .arrow svg {
+          margin-left: .75rem;
+          fill: $accent-color;
+          transition: all .25s ease;
+        }
+      }
+    }
+  }
+}
+
+// Additional "brief" list styles
+// -----------------------------------------------------------------------------
+.quire-contents-list.brief {
+  li li {
+    display: none;
+  }
+}
+
+// Additional "abstract" list styles
+// -----------------------------------------------------------------------------
+.quire-contents-list.abstract {
+  .abstract-text {
+    font-size: 1rem;
+    margin-top: .375rem;
+    p {
+      margin-bottom: .375rem;
+    }
+    @media print {
+      font-size: .875rem;
+      margin-top: .25rem;
+      p {
+        margin-bottom: .25rem;
+      }
+    }
+  }
+}
+
+// Additional "grid" list styles
+// -----------------------------------------------------------------------------
+.quire-contents-list.grid {
+  ul {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-gap: 1rem;
+  }
+  li li {
+    padding-left: 0;
+  }
+  @media screen and (min-width: $desktop) {
+    ul {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+  @media screen and (min-width: $widescreen) {
+    ul {
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+  }
+  @media screen and (min-width: $fullhd) {
+    ul {
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+  }
+  .page-item,
+  .section-item > a,
+  .section-item > .list-header {
+    width: inherit;
+  }
+
+  // Grid headers that aren't links
+  // Top-level headers
+  ul:first-child > li.section-item {
+    padding: 1.5rem 0;
+    margin-bottom: 1.5rem;
+    border-top: 1px solid;
+    border-bottom: 1px solid;
+    @if (lightness($secondary-background-color) > 50) {
+      border-color: darken($secondary-background-color, 20%);
+    } @else {
+      border-color: lighten($secondary-background-color, 20%);
+    }
+    > .list-header {
+      font-size: 1.75rem;
+    }
+  }
+  // All other headers
+  .section-item {
+    grid-column: 1/-1;
+    font-size: 1.125rem;
+    .list-header {
+      text-align: center;
+    }
+  }
+  // Headers that are links
+  .section-item {
+    > a {
+      max-width: inherit;
+      text-align: center;
+      margin-bottom: 0;
+      border-bottom-width: 0;
+      .card {
+        min-height: inherit;
+        background-color: transparent;
+        .card-content {
+          font-size: 1.75rem;
+          .arrow {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+
+  // Cards
+  .section-item .card,
+  .page-item .card {
+    box-shadow: none;
+    padding: 1.25rem;
+    min-height: 300px;
+    .card-content {
+      font-size: 2rem;
+      font-weight: 700;
+      line-height: 1.25;
+      padding: 0;
+      color: $accent-color;
+      .arrow svg {
+        display: inline-block;
+        fill: $accent-color;
+        @if $theme == classic {
+          margin-top: 0;
+        } @else {
+          margin-top: .1625em;
+        }
+      }
+    }
+    .card-image {
+      transition: all .25s ease;
+    }
+    .card-image + .card-content {
+      padding-top: 1.25rem;
+      padding-bottom: .25rem;
+      font-size: 1.125rem;
+      line-height: 1.35;
+    }
+    &:hover {
+      .card-image {
+        box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
+        transition: all .25s ease;
+      }
+      .card-content {
+        color: darken($accent-color, 15%);
+        .arrow svg {
+          fill: darken($accent-color, 15%);
+        }
+      }
+    }
+  }
+  @if $theme == classic {
+    .page-item .card {
+      padding: 0 0 1.25rem 0;
+      &.no-image {
+        padding: 1.25rem;
+        background-color: $off-white;
+      }
+    }
+  }
+
+  // Grid print styles
+  @media print {
+
+    $column-width: $print-width - $print-outer-margin - $print-inner-margin;
+    $card-width: ($column-width - .5625in) / 3;
+    $card-height: ($card-width * 1.25);
+
+    ul {
+      display: block;
+    }
+    .page-item {
+      float: left;
+      width: $card-width;
+      margin: 0 .09375in;
+      .card {
+        background-color: $off-white;
+        page-break-inside: avoid;
+        height: $card-height;
+        min-height: inherit;
+        .card-content {
+          color: $print-text-color;
+          font-size: 1.75rem;
+        }
+      }
+      a::after {
+        position: inherit;
+        text-align: right;
+        display: block;
+        margin-left: 0;
+        font-size: 1.125rem;
+        font-weight: 700;
+        padding: 0 .5rem;
+        background-color: $off-white;
+        margin-bottom: 3rem;
+        page-break-before: avoid;
+      }
+    }
+    .card-image img {
+      height: 1in;
+      width: auto;
+    }
+    .section-item {
+      width: $column-width;
+      margin: 0;
+      float: none;
+      clear: both;
+      page-break-after: avoid;
+      + .page-item {
+        clear: left;
+      }
+      > a {
+        .card {
+          .card-content {
+            color: $print-text-color;
+            font-weight: 400;
+          }
+        }
+        &::after {
+          display: none;
+        }
+      }
+    }
+    // Remove border for top-level items
+    ul:first-child > li.section-item {
+      border-width: 0;
+    }
+  }
+}

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

@@ -0,0 +1,131 @@
+// =============================================================================
+// Quire-contributors.scss
+// -----------------------------------------------------------------------------
+// Styles for the contributors partial and shortcode
+// .quire-contributors-list is the list-level element
+// .quire-contributor is the individual contributor element
+
+
+// .quire-contributors-list
+// -----------------------------------------------------------------------------
+.quire-contributors-list,
+.content ul.quire-contributors-list {
+  list-style-type: none;
+  margin-left: 0;
+  
+  &.align-right {
+    text-align: right;
+    margin-right: 2rem;
+  }
+  &.align-center {
+    text-align: center;
+  }
+  
+  .title {
+    color: background-color-text($content-background-color);
+    @media print {
+      color: $print-text-color;
+    }
+  }
+  
+  li.quire-contributor {
+    margin-left: 0;
+  }
+  
+  &.initials {
+    li.quire-contributor__name {
+      display: inline;
+      margin-left: 0;
+      &::before {
+        content: "";
+      }
+    }
+  }
+  
+  &.name-title-block {
+    display: flex;
+    flex-wrap: wrap;
+    .quire-contributor {
+      margin-right: 2rem;
+    }
+    .quire-contributor__title,
+    .quire-contributor__affiliation {
+      display: block;
+      font-style: italic;
+    }
+    &.align-right {
+      justify-content: flex-end;
+      .quire-contributor {
+        margin-right: 0;
+        margin-left: 2rem;
+      }
+    }
+    &.align-center {
+      justify-content: center;
+      .quire-contributor {
+        margin-right: 2rem;
+        margin-left: 2rem;
+      }
+    }
+  }
+}
+
+// .quire-contributor
+// -----------------------------------------------------------------------------
+.quire-contributor {
+  &:before {
+    display: none !important;
+  }
+  .title {
+    margin-bottom: .5rem;
+  }
+  
+  .quire-page__content .content &__url {
+    border-bottom-width: 0px;
+    svg {
+      width: .875em;
+      height: .875em;
+      @if $theme == classic {
+        fill: background-color-text-classic($content-background-color);
+      } @else {
+        fill: $accent-color;
+      }
+    }
+    &:hover {
+      border-bottom-width: 0px !important;
+      svg {
+        fill: link-hover-color($content-background-color);
+      }
+    }
+  }
+  
+  &__pic {
+    width: 100px;
+    border-radius: 60px;
+    margin: .8em 1em .8em 0;
+    overflow: hidden;
+    @media screen and (min-width: $tablet) { max-width: 200px; }
+  }
+  .media {
+    padding-bottom: 1em;
+  }
+  .media-left {
+    margin-right: .5rem;
+    float: left;
+  }
+  
+  &__bio {
+    line-height: inherit;
+  }
+
+  &__details {
+    font-size: 1em;
+    p {
+      margin-bottom: .5rem !important;
+    }
+  }
+  
+  &__page-link {
+    @media print { display: none; }
+  }
+}

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

@@ -0,0 +1,28 @@
+// =============================================================================
+// Quire-copyright.scss
+// -----------------------------------------------------------------------------
+//
+// Styling for copyright and license info which normally appears at the bottom
+// of the site menu.
+
+// .quire-copyright
+// -----------------------------------------------------------------------------
+.quire-copyright {
+  padding: 0 1em;
+  font-family: $quire-navigation-font;
+
+  &__icon {
+    height: 2.5em;
+    max-width: 100%;
+    & img {
+      max-height: 100%;
+    }
+    &__logo {
+      height: 3em;
+      margin-bottom: .25em;
+      margin-right: 1em;
+      max-width: 100%;
+      display: inline-block;
+    }
+  }
+}

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

@@ -0,0 +1,216 @@
+// =============================================================================
+// Quire-cover.scss
+// -----------------------------------------------------------------------------
+//
+// Cover component (used in the layout for 'cover' page types)
+
+// .quire-cover
+// -----------------------------------------------------------------------------
+.quire-cover {
+  
+  
+  @media print {
+    $splash-page-width: $print-width + $print-bleed + $print-bleed;
+    $splash-page-height: $print-height + $print-bleed + $print-bleed;
+    
+    width: $splash-page-width;
+    height: $splash-page-height;
+    margin: -$print-bleed;
+  }
+
+  &__overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    min-height: calc(95vh - #{$navbar-height} - #{$quire-progress-bar-height});
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    @media print {
+      height: 100%;
+    }
+  }
+
+  &__hero {
+    background-color: $quire-cover-color-1;
+    background-image: linear-gradient(90deg, $quire-cover-color-1, $quire-cover-color-2);
+    position: relative;
+    min-height: calc(95vh - #{$navbar-height} - #{$quire-progress-bar-height}) !important;
+    text-align: left;
+    display: flex;
+    align-items: center;
+
+    @media print {
+      width: 100%;
+      height: 100%;
+      
+      .hero-body {
+        height: auto;
+        // title/author box
+        .container {
+          width: 75%;
+          padding-left: .75in;
+        }
+      }
+    }
+
+    .title {
+      font-family: $quire-headings-font;
+      font-size: calc(2rem * #{$quire-cover-text-scale});
+      font-weight: 700;
+      line-height: 1.07;
+      margin-bottom: calc(.5rem * #{$quire-cover-text-scale});
+      color: $quire-cover-text-color;
+      @media print {
+        font-size: 40pt;
+        margin-top: 0;
+        margin-bottom: 1em;
+        color: $quire-cover-text-color;
+        page-break-before: right;
+      }
+    }
+
+    .subtitle {
+      display: block;
+      margin-top: calc(.5rem * #{$quire-cover-text-scale});
+      font-size: calc(1.5rem * #{$quire-cover-text-scale});
+      font-weight: 400;
+      line-height: 1.02;
+      color: $quire-cover-text-color;
+      @media print {
+        font-size: 30pt;
+        margin-top: .25em;
+        color: $quire-cover-text-color;
+      }
+    }
+
+    .reading-line {
+      font-family: $quire-headings-font;
+      font-style: italic;
+      font-size: calc(1.25rem * #{$quire-cover-text-scale});
+      line-height: 1.2;
+      color: $quire-cover-text-color;
+      @media print {
+        font-size: 18pt;
+        color: $quire-cover-text-color;
+      }
+    }
+
+    .contributor {
+      font-family: $quire-headings-font;
+      font-size: calc(1em * #{$quire-cover-text-scale});
+      margin-top: calc(.5rem * #{$quire-cover-text-scale});
+      color: $quire-cover-text-color;
+      @media print {
+        font-size: 18pt;
+        color: $quire-cover-text-color;
+      }
+    }
+  }
+  &__more {
+    @media print {
+      display: none;
+    }
+    & .hero-more {
+      display: block;
+      position: relative;
+      line-height: 50px;
+      color: background-color-text($black);
+      width: 50px;
+      height: 50px;
+      background: $black;
+      border-radius: 25px;
+      margin: -25px auto 25px auto;
+      text-align: center;
+      svg {
+        height: 3.5rem;
+        width: 3.5rem;
+        margin-left: .25rem;
+        margin-top: .25rem;
+        -webkit-transition: all .5s ease;
+        transition: all .5s ease;
+        fill: background-color-text($black);
+        img {
+          padding: 7px 0;
+        }
+        &:hover {
+          margin-top: .3rem;
+        }
+      }
+      &.next-page {
+        transform: rotate(-90deg);
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &__button {
+    background-color: $accent-color;
+    color: findColorInvert($accent-color);
+    border-width: 0px;
+    border-radius: 2px;
+    font-family: $quire-navigation-font;
+    font-size: 1rem !important;
+    padding: 0 !important;
+    width: 140px;
+    height: 44px;
+    svg {
+      width: 1.25rem;
+      height: 1.25rem;
+      margin-left: .25rem;
+      margin-bottom: .05rem;
+      fill: findColorInvert($accent-color);
+    }
+    &:hover {
+      background-color: darken($accent-color, 15%);
+      color: $white;
+    }
+  }
+
+  .quire-page__content {
+    padding-bottom: 0;
+    .container.is-fluid {
+      .content {
+        padding-top: 2em !important;
+        color: background-color-text-classic($secondary-background-color);
+        background-color: $secondary-background-color;
+        p {
+          line-height: 2em;
+          font-family: $quire-primary-font;
+        }
+      }
+      @media screen and (min-width: 1028px) {
+        max-width: 900px;
+        width: 900px;
+        margin: 0 auto;
+      }
+      @media print {
+        display: none;
+      }
+    }
+  }
+
+  .quire-contents-buttons {
+    ul {
+      li.quire-nav-button {
+        line-height: 34px;
+        a {
+          padding-top: 0.325em;
+          color: $content-background-color;
+        }
+        svg {
+          fill: $content-background-color;
+        }
+      }
+    }
+    .nav-title {
+      font-size: initial;
+    }
+  }
+
+}
+
+
+
+