@thegetty/quire-cli 0.20.3 → 0.20.4

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

@@ -0,0 +1,651 @@
+// =============================================================================
+// Quire-entry.scss
+// -----------------------------------------------------------------------------
+// Entry-layout specific styles (catalogue-style pages with prominent images at
+// the beginning). The main text content area of this page uses the .quire-page
+// class and sub-classes, but elements specific to this layout use .quire-entry
+// instead.
+
+// scss-lint:disable EmptyRule
+$image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQgAAABYCAQAAACjBqE3AAAB6klEQVR4Ae3bsWpUQRTG8YkkanwCa7GzVotsI/gEgk9h4Vu4ySLYmMYgbJrc3lrwZbJwC0FMt4j7F6Y4oIZrsXtgxvx/1c0ufEX4cnbmLCmSJEmSJEmSJEmSJP3XCBPvbJU+8doWmDFwyZpLBmYlNJebz0KwzykwsuSYJSNwykEJreV2BaBMaLIQZ2xYcFgqDlmw4ayE/FwL0dDk4Qh4W37DAjgqIT+3HRbigjH+iikVdxgZStgyN0Su2sXIeTwTT+esdpcbIlfNAuZ/TxresG4zV8kYWSZNiKUTokMMSWeIwTNEn4fK2TW3gRNgVkJLuVksROA9G+bEvoATNlBCa7nZXEwdxEZxzpKRKFh+bsv8LmPFmhX1OwfIz81jIRJQ5eeqG9B+riRJkiRJkiRJkiRJkiRJkiRJUkvA/8RQoEpKlJWINFkJ62AlrEP/mNBibnv2yz/A3t7Uq3LcpoxP8COjC1T5vxoAD5VdoEqdDrd5QuW1swtUSaueh3zkiuBiqgtA2OlkeMcP/uDqugsJdbjHF65VdPMKwS0+WQc/MgKvrIOHysB9vgPwk8+85hmPbnQdvHZyDMAFD7L3EOpgMcVdvnHFS0/vlatrXvCVx0U9gt3fxvnA0/hB4nmRJEmSJEmSJEmSJGmHfgFLaDPoMu5xWwAAAABJRU5ErkJggg==);
+
+// .quire-entry
+// -----------------------------------------------------------------------------
+.quire-entry {
+  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 {
+    font-size: 1.75em;
+    line-height: 1.2;
+    font-weight: 400;
+    // @media screen and (min-width: $tablet) {
+    //   font-size: 1.675em; /** approx 26px **/
+    //   line-height: 1.15em; /** approx 30px **/
+    // }
+    @media print {
+      padding: 0;
+      margin: 0.75in 0 0.5in;
+    }
+    // @media screen and (max-width: $tablet) {
+    //   font-size: 27px;
+    //   line-height: 31px;
+    // }
+  }
+
+  h2 {
+    font-size: 1.3125rem;
+    line-height: 1.3;
+    @media print {
+      margin: 0.5714em 0;
+      line-height: inherit;
+    }
+  }
+
+  h3 {
+    font-size: 1.1875rem;
+    font-style: italic;
+    line-height: 1.3;
+  }
+
+  h4 {
+    font-size: 1.0625rem;
+    line-height: 1.4;
+  }
+
+  h5 {
+    font-size: 1.0625rem;
+    line-height: 1.4;
+    font-weight: 400;
+    font-style: italic;
+    letter-spacing: 0;
+  }
+
+  h6 {
+    font-size: 1rem;
+    line-height: 1.4;
+    font-weight: 400;
+    letter-spacing: 0;
+  }
+
+  &__image {
+    @include foreground-color(
+      $quire-entry-image-color,
+      $quire-entry-image-icons-color
+    );
+    background-color: $black;
+    min-height: calc(100vh - #{$quire-entry-header-height} - #{$navbar-height} - #{$quire-progress-bar-height});
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    @media print {
+      display: block;
+      background-color: transparent;
+    }
+
+    &__group-container {
+      width: 100%;
+      height: 100%;
+      top: 10px;
+      right: 10px;
+    }
+
+    figure {
+      flex: 1 1 100%;
+      width: 100%;
+      height: calc(100vh - #{$quire-entry-header-height} - #{$navbar-height} - #{$quire-progress-bar-height});
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      
+      @media screen and (max-width: $desktop) {
+        height: 60vh;
+      }
+
+      @media print {
+        margin: 0 auto;
+        padding: 0;
+        height: auto;
+      }
+
+      iframe {
+        margin: 0 auto;
+        max-width: 900px;
+        position: relative;
+        height: 56.7%;
+      }
+
+      .quire-image-counter-download-container {
+        position: absolute;
+        top: 20px;
+        right: 10px;
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: space-around;
+        z-index: 401;
+
+        @media print {
+          position: relative;
+        }
+
+        div.quire-counter-container {
+          position: relative;
+          margin: auto;
+          top: unset;
+          right: unset;
+        }
+
+        a {
+          position: relative;
+          margin: auto;
+        }
+      }
+
+      .quire-deepzoom-entry {
+        width: 100%;
+        height: 100%;
+      }
+
+      .quire-image-control--download {
+        bottom: 0;
+        height: 30px;
+        background: $off-black-semi-transparent;
+        width: 30px;
+
+        svg {
+          width: 30px;
+          height: 15px;
+          margin-top: 6px;
+        }
+      }
+    }
+
+    &.fullscreen {
+      img {
+        margin: 0 auto;
+        max-height: calc(100vh - #{$quire-entry-header-height} - #{$navbar-height} - #{$quire-progress-bar-height});    
+        
+        @media screen and (max-width: $desktop) {
+          max-height: 60vh;
+        }
+        
+      }
+      figure {
+        height: 100vh;
+      }
+    }
+
+    .quire-image-control {
+      position: absolute;
+      bottom: 1rem;
+      z-index: 401;
+
+      &.quire-image-info {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        padding: 0 10px 25px;
+        z-index: 1046;
+
+        @media print {
+          position: relative;
+          padding-top: 1rem;
+          padding-bottom: 0;
+        }
+
+        > span.quire-image-info__wrap {
+          color: $print-entry-caption-color;
+          position: relative;
+          display: block;
+          padding: 6px 10px;
+          background: $off-black-semi-transparent;
+          font-family: $quire-headings-font;
+          font-size: 0.875rem;
+          font-weight: bold;
+          
+          @media print {
+            background-color: transparent;
+            display: block;
+            font-size: 9pt;
+            line-height: 14pt;
+            text-align: center;
+            padding: 0;
+          }
+        }
+
+        &__caption {
+          @media print {
+            display: block;
+            font-size: 9pt;
+            line-height: 14pt;
+          }
+        }
+
+        &__credit {
+          @media print {
+            display: block;
+            font-size: 7.5pt;
+            line-height: 14pt;
+          }
+        }
+      }
+
+      &--more {
+        right: 4.5rem;
+
+        &:hover,
+        &:focus {
+          border-left-width: 0;
+          border-top-width: 0;
+
+          + .quire-image-info,
+          + .quire-image-info {
+            display: block;
+          }
+        }
+      }
+
+      &--prev-image {
+        background: $image no-Repeat top left $off-black-semi-transparent;
+        background-position-x: -139px;
+        background-position-y: -44px;
+        left: 10px;
+
+        width: 30px;
+        height: 30px;
+        display: block;
+        border: none;
+        outline: none;
+        margin: 0;
+        transform: scale(1);
+        opacity: 1;
+        top: 50%;
+        transform: translateY(-50%);
+        cursor: pointer;
+      }
+
+      &--next-image {
+        background: $image no-Repeat top right $off-black-semi-transparent;
+        background-position-x: -95px;
+        background-position-y: -44px;
+        right: 10px;
+
+        width: 30px;
+        height: 30px;
+        display: block;
+        border: none;
+        outline: none;
+        margin: 0;
+        transform: scale(1);
+        opacity: 1;
+        top: 50%;
+        transform: translateY(-50%);
+        cursor: pointer;
+      }
+
+      svg {
+        position: relative;
+        height: 1.5em;
+        width: 1.5em;
+
+        & img {
+          position: absolute;
+          top: 0;
+          left: 0;
+          max-height: 1.5em;
+        }
+      }
+    }
+  }
+
+  &__header {
+    // TEMPORARY TO TEST PDF LAYOUT
+    // @media print {
+    //   border: 1px solid Cyan;
+    // }
+
+    margin-top: 0em;
+
+    .container {
+      @media print {
+        padding: 0;
+        margin: 0.75in 0 0.5in;
+      }
+    }
+
+    .quire-page__header__title {
+      padding: 1em 2rem 0;
+      margin-bottom: 1rem;
+      // @media print {
+      //   padding: 0;
+      //   margin: .75in 0 .5in;
+      // }
+      @media screen and (max-width: $tablet) {
+        padding: 1rem 1.25rem 0;
+      }
+    }
+
+    .quire-page__header__contributor {
+      margin-top: 0;
+      padding: 0 2rem;
+      @media print {
+        padding: 0;
+      }
+      @media screen and (max-width: $tablet) {
+        padding: 1rem 1.25rem 0;
+      }
+    }
+
+    .container {
+      background-color: $content-background-color;
+      padding-bottom: 2rem;
+      @media screen and (max-width: $tablet) {
+        margin-right: 0;
+        margin-left: 0;
+      }
+      @media print {
+        margin: 0;
+        padding: 0;
+        background-color: transparent;
+      }
+    }
+
+    @media print {
+      text-align: center;
+      margin: 0 0.5in 1in;
+      @if $print-width <= 7 {
+        margin: 0 0 1in;
+      }
+    }
+  }
+
+  &__tombstone {
+    // TEMPORARY TO TEST PDF LAYOUT
+    // @media print {
+    //   border: 1px solid Lime;
+    // }
+    font-family: $quire-primary-font;
+
+    a {
+      @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);
+        border-bottom: 1px solid link-hover-color($content-background-color);
+      }
+
+      @media print {
+        color: $print-text-color;
+        border-bottom-width: 0;
+      }
+    }
+
+    a.button {
+      -webkit-transition: all 0.25s ease;
+      transition: all 0.25s ease;
+
+      @if $theme==classic {
+        color: background-color-text-classic($content-background-color);
+
+        svg {
+          fill: background-color-text-classic($content-background-color);
+        }
+      } @else {
+        color: $accent-color;
+      }
+
+      &:hover {
+        background-color: link-hover-color($content-background-color);
+        border-color: link-hover-color($content-background-color);
+
+        color: findColorInvert($accent-color);
+
+        svg {
+          fill: findColorInvert($accent-color);
+        }
+      }
+    }
+
+    > div.container {
+      background-color: $content-background-color;
+      padding-bottom: 2em;
+      @media screen and (max-width: $tablet) {
+        margin-right: 0;
+        margin-left: 0;
+      }
+      @media print {
+        margin: 0;
+        padding: 0;
+        background-color: transparent;
+      }
+    }
+
+    .table {
+      width: 90.5%;
+      margin: 0 auto;
+      @media print {
+        margin: 0;
+        width: 100%;
+      }
+      padding-bottom: 1em;
+      border-top: 1px solid background-color-text($content-background-color);
+      border-bottom: 1px solid background-color-text($content-background-color);
+      background-color: $content-background-color;
+      color: background-color-text($content-background-color);
+      @media print {
+        color: $print-text-color;
+        border-color: $print-text-color;
+        background-color: transparent;
+      }
+      font-size: 0.875em;
+
+      td {
+        border: none;
+      }
+    }
+
+    .button {
+      margin-left: 2em;
+      margin-top: 1.5em;
+      background-color: $content-background-color;
+      -moz-border-radius: 2px;
+      -webkit-border-radius: 2px;
+      border-radius: 2px;
+
+      @if $theme==classic {
+        border: 1px solid $off-black;
+      } @else {
+        border: 1px solid $accent-color;
+      }
+    }
+
+    svg {
+      position: relative;
+      height: 1em;
+      width: 1em;
+      margin-left: 0.5em;
+      fill: $accent-color;
+
+      & img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        max-height: 1.5em;
+      }
+    }
+
+    tr {
+      td {
+        &:first-child {
+          font-weight: 700;
+        }
+      }
+
+      &:hover {
+        background-color: $quire-hover-color;
+        color: background-color-text($quire-hover-color);
+      }
+    }
+  }
+
+  &__content {
+    // TEMPORARY TO TEST PDF LAYOUT
+    // @media print {
+    //   border: 1px solid OrangeRed;
+    // }
+
+    position: relative;
+    animation: 0.5s ease 0s 1 slideFromRight;
+
+    @media screen and (max-width: $tablet) {
+      margin-top: -1em;
+    }
+
+    .quire-page__content {
+      animation: none;
+      .content {
+        @media print {
+          padding: 0;
+        }
+      }
+    }
+  }
+
+  .quire-page__content {
+    padding-bottom: 1.5rem;
+
+    .content {
+      background-color: $content-background-color;
+      margin-top: 0;
+      padding: 0 2rem 2.5em;
+      @media print {
+        padding: 0;
+        background-color: transparent;
+      }
+      @media screen and (max-width: $tablet) {
+        padding: 0 1.25rem 2.5em;
+      }
+
+      p {
+        line-height: 1.5;
+      }
+    }
+  }
+
+  .quire-contents-buttons {
+    padding-bottom: 3rem;
+  }
+
+  div.side-by-side {
+    display: block;
+
+    @media screen and (min-width: $widescreen) {
+      display: flex;
+    }
+
+    div.quire-entry__image-wrap {
+      position: relative;
+      width: 100%;
+      overflow: hidden;
+
+      @media screen and (min-width: $widescreen) {
+        width: 56%;
+        flex: none;
+      }
+
+      div.quire-entry__image {
+        position: relative;
+        width: 100%;
+        height: calc(100vh - #{$quire-entry-header-height} - #{$navbar-height} - #{$quire-progress-bar-height});
+
+        @media screen and (min-width: $widescreen) {
+          position: fixed;
+          width: calc(56% - 8px);
+          height: 100vh;
+          &.menu_open {
+            width: calc(56% - 197px);
+          }
+        }
+        
+        @media screen and (max-width: $desktop) {
+          height: 60vh;
+          min-height: inherit;
+        }
+
+        .quire-entry__image__group-container {
+          figure {
+            @media screen and (min-width: $widescreen) {
+              height: calc(100vh - #{$navbar-height} - #{$quire-progress-bar-height});
+            }
+
+            .quire-image-info {
+              @media screen and (min-width: $widescreen) {
+                // bottom: 53px;
+              }
+            }
+          }
+        }
+
+        &.fullscreen {
+          width: 100vw;
+          .quire-entry__image__group-container {
+            figure {
+              height: 100vh;
+            }
+          }
+        }
+      }
+    }
+
+    div.quire-entry__content {
+      width: 100%;
+
+      @media screen and (min-width: $widescreen) {
+        width: 44%;
+        flex: none;
+        background: $secondary-background-color;
+      }
+
+      section.section,
+      section,
+      header {
+        @media screen and (min-width: $widescreen) {
+          padding-left: 20px;
+          padding-right: 20px;
+        }
+
+        div.container {
+          @media screen and (min-width: $widescreen) {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}