@thegetty/quire-cli 0.20.3 → 0.20.4

package/bin/themes/default/source/css/utilities.scss

@@ -0,0 +1,345 @@
+// =============================================================================
+// Utilities.scss
+// -----------------------------------------------------------------------------
+// scss-lint:disable NameFormat
+// Mixins
+// -----------------------------------------------------------------------------
+// Adjust foreground colors based on an element's background
+@mixin foreground-color($bgcolor, $frcolor) {
+  * {
+    color: $frcolor;
+  }
+  svg {
+    fill: $frcolor;
+    &:hover {
+      fill: $frcolor;
+      background-color: transparent;
+    }
+  }
+  a,
+  button,
+  .button {
+    background-color: $bgcolor;
+    color: $frcolor !important;
+    &:hover,
+    &:focus {
+      // background-color: darken($bgcolor, 5%);
+      // color: $frcolor;
+    }
+  }
+  a {
+    border-bottom-color: $frcolor !important;
+  }
+}
+
+// Adjust text color based background
+@function background-color-text($color) {
+  @if (lightness($color) > 50) {
+    @return $off-black; // lighter background, return dark color
+  } @else {
+    @return $white; // darker background, return light color
+  }
+}
+
+// Adjust text color based background
+@function background-color-text-classic($color) {
+  @if (lightness($color) > 50) {
+    @if $theme == classic {
+      @return $black;
+    } @else {
+      @return $off-black; // lighter background, return dark color
+    }
+  } @else {
+    @return $white; // darker background, return light color
+  }
+}
+
+// Adjust button color based background
+@function button-color($color) {
+  @if $theme == classic {
+    @if (lightness($color) > 50) {
+      @return $off-black;
+    } @else {
+      @return $white;
+    }
+  } @else {
+    @return $accent-color;
+  }
+}
+
+// Adjust link hover color based on background color
+@function link-hover-color($color) {
+  @if $theme == classic {
+    @return $accent-color;
+  } @else {
+    @if (lightness($color) > 50) {
+      @return darken($accent-color, 15%);
+    } @else {
+      @return lighten($accent-color, 15%);
+    }
+  }
+}
+
+// Adjust background color
+@function background-color($color) {
+  @if (lightness($color) > 50) {
+    @return darken($color, 10%); // lighter background, return dark color
+  } @else {
+    @return lighten($color, 10%); // darker background, return light color
+  }
+}
+
+// General Bulma Overrides
+// -----------------------------------------------------------------------------
+.hero-body .container.is-fluid {
+  display: inline-block;
+  max-width: none;
+  background: $off-black-semi-transparent;
+  padding: 20px;
+  position: absolute;
+  bottom: 10%;
+  margin-left: 0;
+  left: 0;
+}
+
+.hero-body,
+.section,
+.footer {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+// Utility Classes
+// -----------------------------------------------------------------------------
+sup,
+sub {
+  line-height: 0;
+}
+
+// Visually Hidden utility class
+.visually-hidden {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+}
+
+.is-print-only {
+  @media screen {
+    display: none;
+  }
+}
+
+.is-screen-only {
+  @media print {
+    display: none;
+  }
+}
+
+.quire-error {
+  text-align: left;
+  p {
+    font-family: sans-serif;
+    margin-bottom: 1em;
+  }
+  pre {
+    margin-top: 1em;
+  }
+}
+// @keyframes
+//-------------------------------------------------------
+// fadein
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+/* Firefox < 16 */
+@-moz-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+/* Internet Explorer */
+@-ms-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+/* Opera < 12.1 */
+@-o-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+// fadeOut
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+/* Firefox < 16 */
+@-moz-keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+/* Internet Explorer */
+@-ms-keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+/* Opera < 12.1 */
+@-o-keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+// slideFromRight
+@keyframes slideFromRight {
+  from {
+    right: -100em;
+  }
+  to {
+    right: 0;
+  }
+}
+/* Firefox < 16 */
+@-moz-keyframes slideFromRight {
+  from {
+    right: -100em;
+  }
+  to {
+    right: 0;
+  }
+}
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes slideFromRight {
+  from {
+    right: -100em;
+  }
+  to {
+    right: 0;
+  }
+}
+/* Internet Explorer */
+@-ms-keyframes slideFromRight {
+  from {
+    right: -100em;
+  }
+  to {
+    right: 0;
+  }
+}
+/* Opera < 12.1 */
+@-o-keyframes slideFromRight {
+  from {
+    right: -100em;
+  }
+  to {
+    right: 0;
+  }
+}
+
+// slideFromRight
+@keyframes slideFromLeft {
+  from {
+    left: -100em;
+  }
+  to {
+    left: 0;
+  }
+}
+/* Firefox < 16 */
+@-moz-keyframes slideFromLeft {
+  from {
+    left: -100em;
+  }
+  to {
+    left: 0;
+  }
+}
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes slideFromLeft {
+  from {
+    left: -100em;
+  }
+  to {
+    left: 0;
+  }
+}
+/* Internet Explorer */
+@-ms-keyframes slideFromLeft {
+  from {
+    left: -100em;
+  }
+  to {
+    left: 0;
+  }
+}
+/* Opera < 12.1 */
+@-o-keyframes slideFromLeft {
+  from {
+    left: -100em;
+  }
+  to {
+    left: 0;
+  }
+}
+
+// Required by HTML Template Polyfill for older IE compatibility
+// -----------------------------------------------------------------------------
+// scss-lint:disable ImportantRule
+template {
+  display: none !important;
+}
+
+html {
+  overflow-y: auto;
+}

package/bin/themes/default/source/css/variables.scss

@@ -0,0 +1,144 @@
+// =============================================================================
+// Variables.scss
+// -----------------------------------------------------------------------------
+// Change values here to make changes to the type, color, cover and layout of
+// your publication. Variable names are always preceeded by a $ (dollar sign).
+// To avoid errors, variables names should not be changed or deleted, and be
+// sure to leave the colons (:) and semi-colons (;) in place.
+
+$accent-color: null;
+$content-background-color: null; // main text area background color
+$secondary-background-color: null; // only for modern theme
+
+// Declare the theme: modern/classic
+$theme: modern;
+
+// Declare the navbar color style: normal/accent
+$navbar: normal;
+
+
+
+// Pre-defined fonts
+// -----------------------------------------------------------------------------
+// This theme includes three embedded, open license fonts, and also uses
+// the widely available Times (files of which are not otherwise included here).
+$ibm-sans: 'IBM Plex Sans Condensed', sans-serif;
+$noto-sans: 'Noto Sans', sans-serif;
+$noto-serif: 'Noto Serif', serif;
+$times-serif: Times, serif;
+
+// Page typography
+// -----------------------------------------------------------------------------
+$quire-base-font-size: 16px;
+$quire-page-paragraph-style: line-space; // or use indent
+
+// Cover typography
+// -----------------------------------------------------------------------------
+$quire-cover-text-color: $white;
+$quire-cover-text-scale: 1; // use decimal numbers such as .8 or 1.3
+
+// Menu
+// -----------------------------------------------------------------------------
+$quire-menu-width: 352px;
+
+$quire-menu-color: $off-black;
+$quire-menu-text-color: $white;
+
+// Image viewer (pop-up figure viewer & entry page viewer)
+// -----------------------------------------------------------------------------
+$quire-entry-header-height: 6rem;
+
+$quire-entry-image-color: $black;
+$quire-entry-image-icons-color: $white;
+
+// Active link and table-row color
+// -----------------------------------------------------------------------------
+$quire-hover-color: $light-yellow;
+
+// Print/PDF stylesheet
+// -----------------------------------------------------------------------------
+$print-width: 8.5in;
+$print-height: 11in;
+$print-bleed: .125in;
+
+$print-base-font-size: 8.5pt;
+$print-text-color: $black;
+
+$print-splash-color: $off-white;
+
+$print-entry-image-color: $rich-black;
+$print-entry-caption-color: $white;
+$print-entry-image-display: all; // first | all
+
+// Themes
+// -----------------------------------------------------------------------------
+// Declare theme variables
+$quire-primary-font: null; // body and menu text
+$quire-headings-font: null; // headings
+$quire-footnotes-font: null; // footnotes and page backmatter
+$quire-navigation-font: null; // navbar and next/prev buttons
+
+@if $theme == classic {
+  // Classic Theme
+  $quire-primary-font: $noto-serif !default;
+  $quire-headings-font: $times-serif !default;
+  $quire-footnotes-font: $noto-sans !default;
+  $quire-navigation-font: $noto-sans !default;
+  $accent-color: $blue !default;
+  $content-background-color: $white !default;
+  $secondary-background-color: $content-background-color;
+} @else {
+  // Modern Theme (default)
+  $quire-primary-font: $noto-sans !default;
+  $quire-headings-font: $ibm-sans !default;
+  $quire-footnotes-font: $noto-serif !default;
+  $quire-navigation-font: $noto-sans !default;
+  $accent-color: $red !default;
+  $content-background-color: $white !default;
+  $secondary-background-color: $off-white !default;
+}
+
+// Navbar
+// -----------------------------------------------------------------------------
+$navbar-height: 3rem;
+$quire-progress-bar-height: 2px;
+
+// Declare navbar colors
+$quire-navbar-color: null;
+$quire-navbar-hover-color: null;
+$quire-navbar-text-color: null;
+
+@if $navbar == accent {
+  // Accent Navbar
+  $quire-navbar-color: $accent-color !default;
+  $quire-navbar-hover-color: darken($quire-navbar-color, 5%) !default;
+  $quire-navbar-text-color: $white !default;
+} @else {
+  // Normal Navbar (default)
+  $quire-navbar-color: $white !default;
+  $quire-navbar-hover-color: darken($quire-navbar-color, 5%) !default;
+  @if $theme == classic {
+    $quire-navbar-text-color: lighten($off-black, 20%) !default;
+  } @else {
+    $quire-navbar-text-color: $off-black !default;
+  }
+}
+
+// Cover colors
+// -----------------------------------------------------------------------------
+// Declare cover gradient colors (make them the same for a solid background)
+$quire-cover-color-1: null;
+$quire-cover-color-2: null;
+
+@if $theme == classic {
+  $quire-cover-color-1: $accent-color !default;
+  $quire-cover-color-2: $red !default;
+} @else {
+  $quire-cover-color-1: $blue !default;
+  $quire-cover-color-2: $accent-color !default;
+}
+
+// Layout sizes
+// -----------------------------------------------------------------------------
+$quire-map-height: 500px;
+$quire-deepzoom-height: 500px;