@thegetty/quire-cli 0.20.3 → 0.20.4

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

@@ -0,0 +1,920 @@
+// =============================================================================
+// Quire-page.scss
+// -----------------------------------------------------------------------------
+//
+// Page container component
+// - .quire-page__header: Styled with Bulma hero classes by default, but the
+//     top-level <section> elemement has this class for overrides.
+// - .quire-page__content: Uses Bulma's section & container elements for layout;
+//     most styles here relate only to typography.
+//
+// This stylesheet also controls some of the fundamentals of print layout since
+// it governs the body text. It is possible to keep body copy columns mostly
+// aligned to a baseline grid but care must be taken to ensure that font-size,
+// margins, and line-height add up to mulitples of the body text line-height.
+
+// html
+// -----------------------------------------------------------------------------
+html {
+  font-size: $quire-base-font-size;
+  @media print {
+    font-size: $print-base-font-size;
+  }
+
+  @media print {
+    // otherwise shows white areas on splash pages in the princexml output
+    background-color: transparent;
+  }
+
+  p,
+  div {
+    -webkit-touch-callout: text; /* iOS Safari */
+    -webkit-user-select: text; /* Safari */
+    -khtml-user-select: text; /* Konqueror HTML */
+    -moz-user-select: text; /* Firefox */
+    -ms-user-select: text; /* Internet Explorer/Edge */
+    user-select: text; /* Non-prefixed version, currently
+                                  supported by Chrome and Opera */
+  }
+  overflow-y: visible;
+}
+
+// .quire-page
+// -----------------------------------------------------------------------------
+.quire-page {
+  min-height: calc(100vh - #{$navbar-height} - #{$quire-progress-bar-height});
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-bottom: 1rem;
+    color: background-color-text($secondary-background-color);
+    @media print {
+      color: $print-text-color;
+    }
+
+    &:not(:first-child) {
+      margin-top: 1rem;
+    }
+  }
+
+  h1,
+  &__header__title {
+    font-size: 3em;
+    font-weight: 700;
+    line-height: 1.15;
+    margin: 1rem 0;
+
+    @media print {
+      margin-top: 0.75in;
+    }
+    @media screen and (max-width: $tablet) {
+      font-size: 2.5em;
+    }
+  }
+
+  h2 {
+    text-transform: uppercase;
+    font-size: 1.75rem;
+    line-height: 1.15;
+  }
+
+  h3 {
+    font-style: italic;
+    font-size: 1.5rem;
+    line-height: 1.25;
+  }
+
+  &__header__contributor {
+    font-family: $quire-primary-font;
+    font-weight: 400;
+    font-style: italic;
+    margin-top: 3rem;
+    opacity: 0.75;
+    font-size: 1em;
+    em {
+      font-style: normal;
+    }
+
+    @media print {
+      margin: 0.375in 0.5in 0;
+    }
+  }
+
+  h4 {
+    font-size: 1.375rem;
+    line-height: 1.3;
+  }
+
+  h5 {
+    font-size: 1.25rem;
+    font-weight: 400;
+    font-style: italic;
+    line-height: 1.4;
+  }
+
+  h6 {
+    font-size: 1.1875rem;
+    font-weight: 400;
+    line-height: 1.4;
+  }
+
+  &__content {
+    // TEMPORARY TO TEST PDF LAYOUT
+    // @media print {
+    //   border: 1px solid Lime;
+    //   .content {
+    //     border: 1px solid Blue;
+    //   }
+    // }
+
+    font-family: $quire-primary-font;
+    font-size: 1em;
+    line-height: 1.78;
+    font-weight: 400;
+    padding-top: 0;
+    padding-bottom: 0;
+    position: relative;
+    animation: 0.5s ease 0s 1 slideFromRight;
+    color: background-color-text-classic($content-background-color);
+    @media print {
+      color: $print-text-color;
+    }
+    font-size: 1em;
+    font-weight: 400;
+    line-height: 1.6;
+
+    table {
+      font-size: 0.875em;
+    }
+
+    .container {
+      @media screen and (max-width: $tablet) {
+        margin-left: 0;
+        margin-right: 0;
+      }
+      @media print {
+        margin: 0;
+      }
+
+      .content {
+        margin-top: 45px;
+        padding: 2.5rem 2.5rem;
+        background-color: $content-background-color;
+
+        @media screen and (max-width: $tablet) {
+          padding: 1.5rem 1.25rem;
+        }
+
+        @media print {
+          padding: 0;
+          margin: 0 auto;
+          background-color: transparent;
+        }
+
+        // eliminates a blank space that can otherwise show up between
+        // abstract/tombstone and the main content
+        > *:first-child {
+          margin-top: 0;
+        }
+
+        hr {
+          background-color: transparent;
+          overflow: visible;
+          text-align: center;
+
+          &:after {
+            @if $theme == classic {
+              content: "✦\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0✦\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0✦";
+              font-size: 1em;
+            } @else {
+              content: "◆\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0◆\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0◆";
+            }
+            font-size: 0.875rem;
+            position: relative;
+            top: -0.875rem;
+          }
+        }
+
+        li {
+          margin: 0 0 1em 0;
+        }
+
+        table {
+          margin: 2em 0;
+          td,
+          th {
+            color: background-color-text($content-background-color);
+            @media print {
+              color: $print-text-color;
+            }
+            border-width: 0 0 1px;
+          }
+        }
+
+        ul {
+          list-style: none;
+          li {
+            margin-left: 1em;
+            &:before {
+              @if $theme == classic {
+                content: "✦";
+              } @else {
+                content: "◆";
+              }
+              font-size: 0.875rem;
+              display: block;
+              float: left;
+              width: 1em;
+              margin-left: -1.3em;
+              box-sizing: border-box;
+              vertical-align: text-top;
+            }
+          }
+        }
+
+        dl {
+          dt {
+            font-weight: 700;
+          }
+          dd {
+            margin-left: 0;
+            margin-bottom: 1em;
+          }
+        }
+
+        p {
+          line-height: 2;
+          @media print {
+            line-height: 1.5;
+          }
+        }
+
+        blockquote {
+          border-left: none;
+          position: relative;
+          p,
+          ul,
+          ol,
+          dl,
+          h1,
+          h2,
+          h3,
+          h4,
+          h5,
+          h6 {
+            position: relative;
+            @media screen {
+              &:first-child:before {
+                @if (lightness($content-background-color) < 50) {
+                  color: background-color-text($content-background-color);
+                } @else if (lightness($secondary-background-color) > 50) {
+                  color: darken($secondary-background-color, 15%);
+                } @else {
+                  color: darken($content-background-color, 15%);
+                }
+                font-size: 5em;
+                line-height: 0.1em;
+                margin-right: 0.25em;
+                content: "“";
+                position: absolute;
+                top: 0.35em;
+                left: -0.55em;
+                @if $theme == classic {
+                  font-family: $quire-headings-font;
+                  font-style: normal;
+                  font-weight: bold;
+                  font-size: 4em;
+                  color: background-color-text($content-background-color);
+                  top: 0.45em;
+                  left: -0.7em;
+                  font-size: 3.125em;
+                }
+              }
+            }
+          }
+          ul,
+          dl {
+            margin-left: 0;
+          }
+          ol {
+            margin-left: 1em;
+            &:first-child:before {
+              @if $theme == classic {
+                left: -1em;
+              } @else {
+                left: -0.75em;
+              }
+            }
+          }
+        }
+
+        .backmatter {
+          font-family: $quire-footnotes-font;
+          font-size: 0.875rem;
+          line-height: 1.6;
+          padding-top: 0;
+
+          h2,
+          h3,
+          h4 {
+            font-family: $quire-headings-font;
+            @if $theme == classic {
+              letter-spacing: 0.5px;
+            } @else {
+              letter-spacing: 0.25px;
+            }
+            color: background-color-text-classic($content-background-color);
+            @media print {
+              color: $print-text-color;
+            }
+            font-size: 1em;
+            line-height: 1.28em;
+            text-transform: uppercase;
+            margin-top: 20px;
+            padding-bottom: 6px;
+            border-bottom: 1px solid
+              background-color-text-classic($content-background-color);
+            @media print {
+              border-color: $print-text-color;
+            }
+          }
+          h3,
+          h4 {
+            font-weight: bold;
+            font-style: normal;
+            border-bottom-width: 0;
+            padding-bottom: 0;
+          }
+          h4 {
+            font-weight: normal;
+          }
+          h5,
+          h6 {
+            font-size: 1.0625em;
+            letter-spacing: 0;
+          }
+          .title {
+            color: background-color-text($content-background-color);
+            @media print {
+              color: $print-text-color;
+            }
+          }
+
+          p {
+            // font-size: 0.875em;
+            line-height: 1.6em !important;
+          }
+          dl {
+          }
+
+          .media {
+            display: flex;
+          }
+        }
+
+        .footnotes {
+          font-size: 0.875em;
+          font-family: $quire-footnotes-font;
+          hr {
+            display: none;
+          }
+          * {
+            line-height: 1.6em;
+          }
+          @if $theme == classic {
+            ul {
+              li {
+                &:before {
+                  content: "✦";
+                  font-size: 1em;
+                  display: inline-block;
+                  width: 1em;
+                  margin-left: -0.75em;
+                  box-sizing: border-box;
+                  vertical-align: text-bottom;
+                }
+              }
+            }
+          }
+        }
+      }
+      &.is-fullhd {
+        padding: 0 2em;
+      }
+    }
+  }
+
+  &__abstract {
+    // TEMPORARY TO TEST PDF LAYOUT
+    // @media print {
+    //   border: 1px solid DarkViolet;
+    // }
+
+    font-style: italic;
+    padding-bottom: 0;
+    padding-top: 1em;
+    margin-bottom: -3.5em;
+    font-size: 0.875em;
+    line-height: 1.7em;
+
+    @media screen and (max-width: $tablet) {
+      margin-bottom: -3.25em;
+    }
+    @media print {
+      padding: 0;
+      color: $print-text-color;
+    }
+
+    em {
+      font-style: normal;
+    }
+
+    h2 {
+      font-weight: 400;
+      font-size: 1.625em;
+      font-family: $quire-headings-font;
+    }
+
+    .container {
+      background-color: $content-background-color;
+      padding: 2em 2.75em 0em;
+      margin: 0 auto;
+      max-width: $desktop + (1.25 * $gap);
+      width: $desktop + (1.25 * $gap);
+      @media print {
+        background-color: transparent;
+        max-width: initial;
+        width: initial;
+        padding: 0;
+      }
+      @media screen and (max-width: $desktop) {
+        width: 100%;
+        max-width: 100%;
+      }
+
+      &:after {
+        display: block;
+        text-align: center;
+        @if $theme == classic {
+          content: "✦\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0✦\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0✦";
+          font-size: 1em;
+        } @else {
+          content: "◆\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0◆\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0◆";
+        }
+        margin: 0 auto;
+        background-color: transparent;
+        font-style: normal;
+        margin-top: 1em;
+
+        @media print {
+          margin-top: 0;
+        }
+      }
+
+      .content {
+        margin: 0;
+        padding: 0 0 1em;
+        line-height: 1.714em;
+
+        @media print {
+          max-width: 100%;
+        }
+      }
+    }
+  }
+
+  &--frontmatter {
+    @media print {
+      background-color: transparent;
+    }
+  }
+}
+
+// .quire-page-header
+// -----------------------------------------------------------------------------
+.quire-page__header {
+  // TEMPORARY TO TEST PDF LAYOUT
+  // @media print {
+  //   border: 1px solid OrangeRed;
+  // }
+
+  background-color: $secondary-background-color;
+  color: background-color-text($secondary-background-color);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: cover;
+  text-align: center;
+  -webkit-animation: fadeIn 2s;
+  /* Safari, Chrome and Opera > 12.1 */
+  -moz-animation: fadeIn 2s;
+  /* Firefox < 16 */
+  -ms-animation: fadeIn 2s;
+  /* Internet Explorer */
+  -o-animation: fadeIn 2s;
+  /* Opera < 12.1 */
+  animation: fadeIn 2s;
+
+  @media print {
+    background-color: transparent;
+    color: $print-text-color;
+    margin: 0 0.5in 1in;
+    @if $print-width <= 7 {
+      margin: 0 0 1in;
+    }
+  }
+
+  &.hero__image {
+    height: 80vh;
+    .quire-page__header {
+      &__title,
+      &__subtitle {
+        color: $content-background-color;
+      }
+    }
+  }
+
+  .hero-body {
+    @media screen and (max-width: $tablet) {
+      padding: 1.25em;
+    }
+
+    .label {
+      line-height: 1.3;
+      display: table;
+      width: fit-content;
+      @if $theme == classic {
+        font-size: 1.4rem;
+        font-weight: normal;
+        @if (lightness($secondary-background-color) > 50) {
+          background-color: darken($secondary-background-color, 35%);
+        } @else {
+          background-color: $white;
+        }
+        color: $secondary-background-color;
+        padding: 0.35rem 0.45rem;
+        margin: 0 auto 1.7em;
+        min-width: 2.6rem;
+        @media print {
+          min-width: 0.3125in;
+        }
+      } @else {
+        font-size: 1.2rem;
+        color: background-color-text($secondary-background-color);
+        @media print {
+          color: $print-text-color;
+        }
+        border-top: 2px solid $accent-color;
+        border-bottom: 2px solid $accent-color;
+        padding: 0.2rem 0.3rem;
+        letter-spacing: 0;
+        margin: 0 auto 1.9em;
+      }
+    }
+
+    @media screen and (min-width: $desktop) {
+      margin: 0 5rem;
+    }
+  }
+}
+
+.quire-splash {
+  .quire-page__header {
+    &.hero-image {
+      background-color: transparent;
+      height: 50vh;
+      max-height: 500px;
+      background-position: center;
+      @media print {
+        $splash-page-width: $print-width + $print-bleed + $print-bleed;
+        $splash-page-height: $print-height + $print-bleed + $print-bleed;
+
+        background-color: $print-splash-color;
+        color: $white;
+        width: $splash-page-width;
+        height: $splash-page-height;
+        max-height: $splash-page-height;
+        margin: -$print-bleed;
+      }
+      .hero-body {
+        .label,
+        .quire-page__header__title,
+        .quire-page__header__contributor {
+          color: $white;
+        }
+        .quire-page__header__contributor {
+          font-weight: 700;
+        }
+      }
+      // add some space above the start of the content
+      + .quire-page__content p:first-child,
+      + .quire-page__content figure:first-child {
+        @media print {
+          padding-top: 1.375in;
+        }
+      }
+    }
+    &--full-height {
+      height: calc(100vh - #{$navbar-height} - #{$quire-progress-bar-height});
+      &.hero-image {
+        height: calc(100vh - #{$navbar-height} - #{$quire-progress-bar-height});
+        max-height: initial;
+        .hero-body {
+          @media print {
+            margin-top: 0;
+          }
+        }  
+      }
+      .hero-body {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-grow: .7;
+      }   
+    }
+    background-color: transparent;
+    .hero-body {
+      .quire-page__header__title {
+        color: background-color-text($secondary-background-color);
+        @media print {
+          color: background-color-text($print-splash-color);
+        }
+      }
+      .label {
+        color: background-color-text($secondary-background-color);
+        @media print {
+          color: background-color-text($print-splash-color);
+        }
+      }
+    }
+  }
+
+  .quire-page__content {
+    .container .content {
+      background-color: $secondary-background-color;
+      @media print {
+        background-color: transparent;
+      }
+    }
+    p {
+      &:first-child {
+        &:first-letter {
+          font-size: 9em;
+          float: left;
+          margin-top: 0;
+          margin-left: -0.09em;
+          padding-right: 0.025em;
+          line-height: 0.85em;
+        }
+      }
+    }
+  }
+}
+
+@supports (-moz-appearance: none) {
+  .quire-splash {
+    .quire-page__content {
+      p {
+        &:first-child {
+          &:first-letter {
+            font-size: 9em;
+            float: left;
+            margin-top: 0.1em !important;
+            margin-left: -0.09em;
+            padding-right: 0.025em;
+            line-height: 0.85em;
+          }
+        }
+      }
+    }
+  }
+}
+
+.quire-page__content {
+  // Overrides to Bulma's .content styles where needed.
+  padding-bottom: 0;
+  .content {
+    a {
+      @media print {
+        color: $print-text-color;
+        border-bottom-width: 0;
+      }
+      line-height: 1.6;
+      @if $theme == classic {
+        color: background-color-text-classic($content-background-color);
+        border-bottom: 1px
+          dotted
+          background-color-text-classic($content-background-color);
+      } @else {
+        color: $accent-color;
+        border-bottom: 1px dotted $accent-color;
+      }
+
+      &:hover {
+        color: link-hover-color($content-background-color) !important;
+        border-bottom: 1px solid link-hover-color($content-background-color) !important;
+      }
+
+      &:focus {
+        background-color: $quire-hover-color;
+        color: background-color-text($quire-hover-color) !important;
+      }
+    }
+
+    figure > a {
+      &:hover {
+        border-bottom-width: 0 !important;
+      }
+    }
+
+    .footnote-ref a,
+    a.footnote-return,
+    a.footnote-backref,
+    a.footnote-ref {
+      border-bottom-width: 0;
+      font-weight: bold;
+      @media print {
+        font-weight: normal;
+        font-size: inherit;
+      }
+      font-size: 0.925rem;
+      line-height: 0;
+      margin-left: 0.1em;
+      &:hover {
+        color: link-hover-color($content-background-color) !important;
+        border-bottom-width: 0 !important;
+      }
+    }
+
+    .quire-page__content__references {
+      dl {
+        margin-left: 0;
+      }
+      ul {
+        list-style-type: none;
+        margin-left: 0;
+        li {
+          margin-left: 0;
+          &:before {
+            content: none;
+          }
+        }
+      }
+    }
+
+    tbody {
+      tr {
+        &:hover {
+          background-color: $quire-hover-color;
+          color: background-color-text($quire-hover-color) !important;
+        }
+      }
+    }
+
+    ol,
+    dl {
+      margin-left: 3em;
+    }
+
+    hr {
+      height: 1px;
+    }
+
+    blockquote {
+      padding: 0 0 0 1.5em;
+      margin: 1em 0 1em 0;
+
+      @media screen and (min-width: $tablet) {
+        padding: 0 0 0 1.5em;
+        margin: 1.5em 0 1.5em 1.5em;
+      }
+
+      background-color: transparent;
+      font-style: italic;
+
+      em {
+        font-style: normal;
+      }
+      
+      // footnote numbers in blockquotes should be roman
+      sup.footnote-ref {
+        font-style: normal;
+      }
+
+      @media print {
+        border-left-width: 0;
+      }
+    }
+
+    .footnotes {
+      margin-top: -0.35em;
+
+      hr {
+        background-color: $off-black;
+        height: 1px;
+      }
+
+      ol {
+        margin-left: 1em;
+        @media print {
+          margin-left: 1.5em;
+        }
+
+        li {
+          margin-bottom: 1em;
+        }
+      }
+
+      blockquote {
+        margin: 1em 0 1em 0;
+        p,
+        ul,
+        ol,
+        dl,
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+          position: relative;
+          @media screen {
+            &:first-child:before {
+              content: "";
+            }
+          }
+        }
+      }
+    }
+
+    .leaflet-control {
+      a {
+        color: $off-black;
+      }
+    }
+
+    @if $quire-page-paragraph-style== "indent" {
+      p {
+        margin-bottom: 0;
+        text-indent: 1.5em;
+      }
+
+      > p:first-child,
+      blockquote > p:first-child,
+      .quire-contributor__details > p:first-of-type,
+      hr + p,
+      h1 + p,
+      h2 + p,
+      h3 + p,
+      h4 + p,
+      h5 + p,
+      h6 + p {
+        text-indent: 0;
+      }
+
+      .footnotes {
+        p {
+          margin-bottom: 0;
+          text-indent: 1.5em;
+        }
+        li > p:first-child {
+          text-indent: 0;
+        }
+      }
+    }
+
+    @media print {
+      h2 {
+        margin-bottom: 0.5em;
+        margin-top: 1.5em;
+
+        + h3 {
+          margin-bottom: 0.5em;
+          margin-top: 0;
+        }
+      }
+
+      h3 {
+        margin-bottom: 1em;
+        margin-top: 1em;
+      }
+
+      ul {
+        margin-bottom: 0;
+        margin-top: 0;
+      }
+      @if $quire-page-paragraph-style== "indent" {
+        ul {
+          margin-top: 1em;
+        }
+      }
+
+      li + li {
+        margin-top: 0;
+      }
+    }
+  }
+}