Default Theme Style Variables

Defined Variables

This default theme includes a number of style variables intended to allow for relatively easy customization without having to dig into the stylesheets and CSS markup. They are explained below and can be found and changed in /source/css/variables.scss file. Take special note of thee $theme variable which can be set to “modern” or “classic”, and the $accent-color variable which will give your publication a distinct feel in coloring all links, buttons and other navigation elements.

Variable TypeVariableExpected ValueDescription
Primary$accent-colorcolor valueThe color of buttons, links and navigation elements
$content-background-colorcolor valueMain text area background color
$secondary-background-colorcolor valueAdditional background color, only for modern version of the theme
$theme“modern”, “classic”Shifts the overall feel and typography of the publication
$navbar“normal”, “accent”Predefined options for your navbar, white or the accent color
Page typography$quire-base-font-sizeunit value16px default
$quire-page-paragraph-style“line-space”, “indent”Paragraph display styles, either a line space and no indent, or an indent and no line space
Cover typography$quire-cover-text-colorcolor value
$quire-cover-text-scaleintegerUse decimal numbers such as .8 or 1.3 to shift the text larger or smaller
Menu colors$quire-menu-colorcolor value
$quire-menu-text-colorcolor value
Image viewer colors (pop-up figure viewer & entry page viewer)$quire-entry-image-colorcolor valueThe background of the image viewer on entry pages
$quire-entry-image-icons-colorcolor value
Highlight color$quire-hover-colorcolor valueUsed on active links and when hovering over table rows
Print/PDF output$print-widthunit value8.5in default
$print-heightunit value11in default
$print-bleedunit value.125in default
$print-base-font-sizeunit value8.5pt default
$print-text-colorcolor valueSpecifying a plain black will avoid excessive color printing costs
$print-splash-colorcolor valueBackground color for full-bleed splash pages
$print-entry-image-colorcolor valueBackground color for full-bleed image pages
$print-entry-image-display“all”, “first”Output “all” the images associated with an object on an entry page, or only the “first”, main image
Fonts$quire-primary-fontfont nameThis theme includes three embedded, open license fonts, (Noto Sans, Noto Serif, and IBM Plex Sans Condensed) and also uses the widely available Times. While other fonts can be specified for use, do so with caution and line spacing, element width and margin can all shift from font to font.
$quire-headings-fontfont nameSee above
$quire-footnotes-fontfont nameSee above
$quire-navigation-fontfont nameSee above
Navbar$quire-navbar-colorcolor value
$quire-navbar-hover-colorcolor value
$quire-navbar-text-colorcolor value
Cover colors$quire-cover-color-1color valueThe cover includes a gradient of two colors, specified here, and a white/transparent wave graphic specified in the of the content files
$quire-cover-color-2color value
Layout sizes$quire-menu-widthunit value352px default
$navbar-heightunit value3rem default
$quire-entry-header-heightunit value6rem default, determines the relative height of the entry page image viewer when in horizontal viewing mode
$quire-map-heightunit value500px default
$quire-deepzoom-heightunit value500px default

Special Classes

page-oneFor PDF output, should be used on the page/chapter where you want page 1 to start, class: page-one, often an Introduction or first essay rather than the Contents pages or other frontmatter
backmatterCan be applied to Markdown text with the q-class shortcode and text will be styled smaller, like the default footnotes style
is-pulled-left, is-pulled-rightCan be applied to figures or figure groups with their shortcodes, will make figures roughly half-column width and will float them to the left or right of the text
brief, list, abstract, gridCan be applied to pages with a type: contents, will alter how the contents are displayed
side-by-side, landscapeCan be applied to pages with a type: entry, will alter how the image viewer is displayed

Configuration Parameters

Outside of the theme files themselves, a Quire project will also have a config.yml file which includes a number of parameters the theme relies on.

ParameterExpected ValueDescription
runTestsbooleanTurn on or off the built-in tests that check for certain common errors and post error messages in the CLI output.
searchEnabledbooleanTurn on or off the built-in text search capability for users
licenseIconsbooleanWhether or not to display Creative Commons license icons
pageLabelDividerstring“. " default, etermines the text/spacing to be inserted between page .label and page .title
citationPageLocationDividerstring“, " default, determines the text/spacing to be inserted between the citation and the page number in the q-cite shortcode
displayBiblioShortbooleanWhether a bibilography generated with the q-cite or q-bibliography shorcodes should display the short form of the reference, along with the long.
imageDirstring“img” default, the directory in the /static/ directory where you put your images
menuClass“brief”, “list”“list” is the default, “brief” will show only top-level pages and sections, no sub-sections.
prevPageButtonTextstring“Back” default
nextPageButtonTextstring“Next” default
entryPageSideBySideLayoutbooleanEntry pages can have a side-by-side layout with image on the left and text on the right, this can be controlled by class: side-by-side in the page YAML, or globally with this parameter
entryPageObjectLinkTextstring“View in Collection” default
figureLabelLocation“on-top”, “below”Whether the figure label is “on-top” of the image in the upper left corner, or “below” it with the caption
figureModalbooleanIf figures should be clickable to open into a full-screen modal window
figureModalIconsbooleanWhether to display icons with the figure modal links
figureZoombooleanWhether figures should zoom or not inside the modal