@thegetty/quire-cli 0.20.2 → 0.20.3

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

@@ -1,651 +0,0 @@
-// =============================================================================
-// 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%;
-          }
-        }
-      }
-    }
-  }
-}