blocks

mixins

atavist-caption

@mixin atavist-caption() { ... }

Description

EXPERIMENTAL — This approach to mixins is subject to change

Defines styles for captions

If theme creators wish to overwrite this mixin, they should include a atavist-caption-theme mixin in their theme files.

Parameters

None.

Requires

atavist-sidebar

@mixin atavist-sidebar() { ... }

Description

EXPERIMENTAL — This approach to mixins is subject to change

Defines styles for Sidebar blocks

If theme creators wish to overwrite this mixin, they should include a atavist-sidebar-theme mixin in their theme files.

Parameters

None.

Requires

inline-block-styles

@mixin inline-block-styles() { ... }

Description

EXPERIMENTAL — This approach to mixins is subject to change

Defines styles for text associated with a Pop-Up Block

If theme creators wish to overwrite this mixin, they should include a inline-block-styles-theme mixin in their theme files.

Parameters

None.

Requires

variables

sidebarBlockFontSize

$sidebarBlockFontSize: 0.85em !default;

Description

Defines general font size for Sidebar blocks.

Used by

sidebarBlockLineHeight

$sidebarBlockLineHeight: 1.3 !default;

Description

Defines line height for Sidebar blocks.

Used by

sidebarBlockBodyTextFontFamily

$sidebarBlockBodyTextFontFamily: $primaryFontFamily !default;

Description

Defines the body text font family for Sidebar blocks.

Used by

sidebarBlockBodyTextFontSize

$sidebarBlockBodyTextFontSize: $fontFamilyMultiplier * $paragraphFontSize !default;

Description

Defines the body text font size for Sidebar blocks.

Used by

sidebarBlockParagraphTopMargin

$sidebarBlockParagraphTopMargin: 1em !default;

Description

Defines the paragraph top margin for Sidebar blocks, used when a project theme uses spaces between pargraphs (rather than indented paragraphs).

Used by

popUpBlockTextColor

$popUpBlockTextColor: inherit !default;

Description

Defines the text color of pop-up block inline links.

Used by

popUpBlockPadding

$popUpBlockPadding: 3px 4px 1px !default;

Description

Defines the padding of pop-up block inline links.

Used by

popUpBlockBackgroundColor

$popUpBlockBackgroundColor: rgba(mix($primaryTextColor, $primaryBackgroundColor, 70%),0.175) !default;

Description

Defines the background color of pop-up block inline links.

Used by

popUpBlockBackgroundColor-hover

$popUpBlockBackgroundColor-hover: rgba(mix($primaryTextColor, $primaryBackgroundColor, 70%),0.25) !default;

Description

Defines the hover state background color of pop-up block inline links.

Used by

popUpBlockBorderRadius

$popUpBlockBorderRadius: 2px !default;

Description

Defines the border radius of pop-up block inline links.

Used by

colors

variables

primaryBackgroundColor

$primaryBackgroundColor: #f9f9f9 !default;

Description

Defines the primary background color of a project, to be used where section content is rendered.

Type

Color

Used by

See

primaryTextColor

$primaryTextColor: rgb(50,50,50) !default;

Description

Defines the primary text color of a project, to be used where section content is rendered.

Type

Color

Used by

See

[private] _bg-is-dark

$_bg-is-dark: lightness($primaryBackgroundColor) < 75;

Description

A heuristic for determining whether the background color is relatively dark, which has implications for icon colors and how the alternate background color is generated.

Type

Boolean

alternateBackgroundColor

$alternateBackgroundColor: null !default;

Description

Defines the alternate background color of a project, to be used outside of areas where the main section content is rendered, e.g., for navigational areas.

If not specified, alternate background and text colors will be generated automatically based on the values of the primary background and text colors.

Type

Color

See

alternateTextColor

$alternateTextColor: null !default;

Description

Defines the alternate text color of a project, to be used outside of areas where the main section content is rendered, e.g., for navigational areas.

If not specified, alternate background and text colors will be generated automatically based on the values of the primary background and text colors.

Type

Color

Used by

See

hamburgerButtonBackgroundFill

$hamburgerButtonBackgroundFill: lighten($alternateBackgroundColor, 10%) !default;

Description

Defines the background fill color of the navigational icon, which appears behind the icon in certain small-screen contexts.

If not specified, it will be generated automatically based on the alternate background color.

Type

Color

See

primaryIconColor

$primaryIconColor: $primaryTextColor !default;

Description

Defines the background fill color of the fixed icons that appear within projects as they look under most circumstances, superimposed upon the project’s background color.

If not specified, it will be generated automatically based on the primary text color.

Type

Color

See

primaryIconColor-Stroke

$primaryIconColor-Stroke: if($_bg-is-dark, $primaryTextColor, $primaryBackgroundColor) !default;

Description

Defines the color of the stroke of the fixed icons that appear within projects as they look under most circumstances, superimposed upon the project’s background color.

If not specified, it will be generated automatically.

Type

Color

See

alternateIconColor

$alternateIconColor: if($_bg-is-dark, $primaryTextColor, $primaryBackgroundColor) !default;

Description

Defines the background fill color of the fixed icons that appear within projects as they look when positioned on the alternate background color, as in a navigational element.

If not specified, it will be generated automatically.

Type

Color

See

alternateIconColor-Stroke

$alternateIconColor-Stroke: $primaryTextColor !default;

Description

Defines the stroke color of the fixed icons that appear within projects as they look when positioned on the alternate background color, as in a navigational element.

If not specified, it will be generated automatically based on the primary text color.

Type

Color

See

navLinkColor

$navLinkColor: rgba($alternateTextColor,0.6) !default;

Description

Defines the text color of links to sections that appear in various navigation styles.

If not specified, it will be generated automatically based on the alternate text color.

Type

Color

See

navLinkColor-hover

$navLinkColor-hover: rgba($alternateTextColor,0.85) !default;

Description

Defines the hover state text color of links to sections that appear in various navigation styles.

If not specified, it will be generated automatically based on the alternate text color.

Type

Color

See

navLinkColor-currentSection

$navLinkColor-currentSection: rgba($alternateTextColor,0.85) !default;

Description

Defines the text color of the current section among the section links that appear in various navigation styles.

If not specified, it will be generated automatically based on the alternate text color.

Type

Color

See

navLinkColorBackgroundColor

$navLinkColorBackgroundColor: transparent !default;

Description

Defines the background color of links to sections that appear in various navigation styles.

Type

Color

navLinkColorBackgroundColor-hover

$navLinkColorBackgroundColor-hover: rgba($alternateTextColor,0.05) !default;

Description

Defines the hover state background color of links to sections that appear in various navigation styles.

Type

Color

navLinkColorBackgroundColor-currentSection

$navLinkColorBackgroundColor-currentSection: rgba($alternateTextColor,0.1) !default;

Description

Defines the background color of the current section among the section links that appear in various navigation styles.

Type

Color

icons

variables

navLinkOpacity-Hover

$navLinkOpacity-Hover: 1 !default;

Description

Defines the hover state opacity of the fixed icons that appear within projects.

Type

Number

navIconFillOpacity

$navIconFillOpacity: null !default;

Description

Defines the default fill opacity of the fixed icons that appear within projects.

Type

Number

navIconStrokeOpacity

$navIconStrokeOpacity: null !default;

Description

Defines the default stroke opacity of the fixed icons that appear within projects.

Type

Number

navIconStrokeWidth

$navIconStrokeWidth: null !default;

Description

Defines the default stroke width of the fixed icons that appear within projects.

Type

Number

navIconFillOpacity-Hover

$navIconFillOpacity-Hover: null !default;

Description

Defines the hover state fill opacity of the fixed icons that appear within projects.

Type

Number

navIconStrokeOpacity-Hover

$navIconStrokeOpacity-Hover: null !default;

Description

Defines the hover state stroke opacity of the fixed icons that appear within projects.

Type

Number

navIconFillOpacity-onCover

$navIconFillOpacity-onCover: 0.75 !default;

Description

Defines the fill opacity of the fixed icons that appear within projects when the icons appear superimposed on certain title designs, namely those with background images, videos, or colors that depart from the project norm.

Type

Number

navIconStrokeWidth-onCover

$navIconStrokeWidth-onCover: 0 !default;

Description

Defines the stroke width of the fixed icons that appear within projects when the icons appear superimposed on certain title designs, namely those with background images, videos, or colors that depart from the project norm.

Type

Number

navIconFillOpacity-onCover-Hover

$navIconFillOpacity-onCover-Hover: 0.95 !default;

Description

Defines the hover state fill opacity of the fixed icons that appear within projects when the icons appear superimposed on certain title designs, namely those with background images, videos, or colors that depart from the project norm.

Type

Number

media queries and breakpoints

variables

verySmallBreakpoint

$verySmallBreakpoint: 450px !default;

Description

Defines the smallest breakpoint value.

Type

Length

See

smallBreakpoint

$smallBreakpoint: 567px !default;

Description

Defines the second smallest breakpoint value.

Type

Length

Used by

See

mediumBreakpoint

$mediumBreakpoint: 700px !default;

Description

Defines the largest breakpoint value.

Type

Length

[private] textColumnBreakpoint

$textColumnBreakpoint: $textColumnWidth + (2 * $outsideGutterWidth) !default;

Description

Defines a breakpoint based on the width of the text column and surrounding gutters.

Type

Length

navigation: left drawer toc

navigation: top navigation bar toc

sections

variables

sectionTopPadding

$sectionTopPadding: 5rem !default;

Description

Defines the top padding of sections.

Type

Length

See

sectionTopPadding-smallBreakpoint

$sectionTopPadding-smallBreakpoint: 2rem !default;

Description

Defines the top padding of sections at the small breakpoint.

Type

Length

See

sectionBottomPadding

$sectionBottomPadding: 5rem !default;

Description

Defines the bottom padding of sections.

Type

Length

See

sectionBottomPadding-smallBreakpoint

$sectionBottomPadding-smallBreakpoint: 2rem !default;

Description

Defines the bottom padding of sections at the small breakpoint.

Type

Length

See

spacing and alignment

variables

textColumnWidth

$textColumnWidth: 42rem !default;

Description

Defines the width of a project’s primary text column.

Type

Length

outsidePaddingWidth

$outsidePaddingWidth: 0em !default;

Description

Defines the primary text column’s outside padding.

Type

Length

Used by

outsideGutterWidth

$outsideGutterWidth: 4rem !default;

Description

Defines the width of the left and right “gutters,” used to protect icons positioned there.

Type

Length

See

outsideGutterWidth-compressed

$outsideGutterWidth-compressed: 1rem !default;

Description

Defines the width of the left and right “gutters,” used to protect icons positioned there, at small breakpoints.

Type

Length

See

columnOfTextAlignment

$columnOfTextAlignment: center !default;

Description

Defines the alignment of the text column. Accepted values are “left,” “right,” and “center.”

Type

String

columnOfTextMarginSize

$columnOfTextMarginSize: 0rem !default;

Description

Defines the outside margin of the text column when left- and right-aligned.

Type

Length

totalOutsideGutterWidth

$totalOutsideGutterWidth: $outsideGutterWidth * 2 !default;

Description

Defines the combined values of the left and right gutters.

Type

Length

totalOutsideGutterWidth-compressed

$totalOutsideGutterWidth-compressed: $outsideGutterWidth-compressed * 2 !default;

Description

Defines the combined values of the left and right gutters at small breakpoints.

Type

Length

centeredBlockWidth

$centeredBlockWidth: 50rem !default;

Description

Defines the width of centered blocks.

Type

Length

alignedBlockWrapperWidth

$alignedBlockWrapperWidth: 80rem !default;

Description

Defines the width of the wrapper for left- and right-aligned blocks. This controls how far a block can “float away” from the text column before reaching an impassable boundary.

Type

Length

alignedBlockWidth

$alignedBlockWidth: 30rem !default;

Description

Defines the default width of left- and right-aligned blocks.

Type

Length

alignedBlockMaxWidth

$alignedBlockMaxWidth: 40% !default;

Description

Defines the max width of left- and right-aligned blocks.

Type

Length

alignedBlockLeftRightMargin

$alignedBlockLeftRightMargin: 2rem !default;

Description

Defines the left and right margins of left- and right-aligned blocks.

Type

Length

alignedBlockPercOfTextColumn

$alignedBlockPercOfTextColumn: 0.5 !default;

Description

When the text column is left- or right-aligned, this defines the width of left- and right-aligned blocks, expressed as a number between 0 and 1 representing a fraction of the text column’s width.

Type

Number

transitions and animations

variables

defaultTransitionDuration

$defaultTransitionDuration: 250ms !default;

Description

Defines the default duration of CSS transitions.

Type

Duration

paginationDuration

$paginationDuration: 750ms !default;

Description

Defines the duration of the page-to-page transitions for paginated projects.

Type

Duration

typography

variables

fontSmoothing

$fontSmoothing: if($_bg-is-dark, antialiased, auto) !default;

Description

Defines the -webkit-font-smoothing property set on a project’s html element

If not specified, it’s determined automatically based on the project’s color values.

Type

String

primaryFontFamily

$primaryFontFamily: 'yoga-sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;

Description

Defines a project’s primary font family. By default, the primary font family is used for titles, headings, captions, and navigational UI.

Type

List

Used by

secondaryFontFamily

$secondaryFontFamily: 'yoga-serif', Georgia, serif !default;

Description

Defines a project’s secondary font family. By default, the secondary font family is used for body text.

Type

List

defaultFontFamily

$defaultFontFamily: $primaryFontFamily !default;

Description

Defines a project’s default font family.

Type

List

headingFontFamily

$headingFontFamily: $primaryFontFamily !default;

Description

Defines the font family used for headings.

Type

List

captionFontFamily

$captionFontFamily: $primaryFontFamily !default;

Description

Defines the font family used for captions.

Type

List

bodyTextFontFamily

$bodyTextFontFamily: $secondaryFontFamily !default;

Description

Defines the font family used for body text.

Type

List

blockquoteFontFamily

$blockquoteFontFamily: $secondaryFontFamily !default;

Description

Defines the font family used for blockquotes.

Type

List

paragraphFontSize

$paragraphFontSize: 1.25em !default;

Description

Defines the default paragraph font size, based on an em value of 16px.

Type

Length

Used by

paragraphLineHeight

$paragraphLineHeight: 1.5 !default;

Description

Defines the default paragraph line height.

Type

Number

paragraphFontWeight

$paragraphFontWeight: 300 !default;

Description

Defines the default paragraph font weight.

Type

Number

fontFamilyMultiplier

$fontFamilyMultiplier: 1 !default;

Description

EXPERIMENTAL — The definition and use of this multiplier is subject to change

Represents the relationship in size between the primary and secondary font families. This value is used throughout the theming system to determine correct font sizes.

Type

Number

Used by

listMarginTop

$listMarginTop: 1em !default;

Description

Defines the top margin of bulleted and numbered lists.

Type

Length

listMarginBottom

$listMarginBottom: $listMarginTop !default;

Description

Defines the bottom margin of bulleted and numbered lists.

Type

Length

textIndent

$textIndent: 1.5em !default;

Description

Defines the value of text-indent when projects use indented paragraphs.

Type

Length

Used by

listIndent

$listIndent: $textIndent !default;

Description

Defines the width of the left indentation of bulleted and ordered lists.

Type

Length

listStyleType

$listStyleType: disc !default;

Description

Defines the list style used for bulleted lists.

Type

String

linkTextColor

$linkTextColor: inherit !default;

Description

Defines the color of link text.

Used by

linkTextColor-h2

$linkTextColor-h2: inherit !default;

Description

Defines the color of link text in h2 elements.

Used by

linkTextColor-h3

$linkTextColor-h3: inherit !default;

Description

Defines the color of link text in h3 elements.

Used by

linkTextColor-captions

$linkTextColor-captions: inherit !default;

Description

Defines the color of link text in captions.

Used by

linkUnderlineColor

$linkUnderlineColor: mix($primaryBackgroundColor, $primaryTextColor, 50%) !default;

Description

Defines the color of link underlines.

Used by

linkUnderlineColor-h2

$linkUnderlineColor-h2: currentColor !default;

Description

Defines the color of link underlines in h2 elements.

Used by

linkUnderlineColor-h3

$linkUnderlineColor-h3: currentColor !default;

Description

Defines the color of link underlines in h3 elements.

Used by

linkUnderlineColor-captions

$linkUnderlineColor-captions: currentColor !default;

Description

Defines the color of link underlines in captions.

Used by

linkBackgroundPositionY

$linkBackgroundPositionY: 90% !default;

Description

Defines the Y value of the background-position property of link underlines.

Used by

linkBackgroundPositionY-h2

$linkBackgroundPositionY-h2: 92% !default;

Description

Defines the Y value of the background-position property of link underlines in h2 elements.

Used by

linkBackgroundPositionY-h3

$linkBackgroundPositionY-h3: 89% !default;

Description

Defines the Y value of the background-position property of link underlines in h3 elements.

Used by

linkBackgroundSizeY

$linkBackgroundSizeY: 2px !default;

Description

Defines the Y value of the background-size property of link underlines.

Used by

linkBackgroundSizeY-h2

$linkBackgroundSizeY-h2: 4px !default;

Description

Defines the Y value of the background-size property of link underlines in h2 elements.

Used by

linkBackgroundSizeY-h3

$linkBackgroundSizeY-h3: 3px !default;

Description

Defines the Y value of the background-size property of link underlines in h3 elements.

Used by

mixins

header-base-styles

@mixin header-base-styles() { ... }

Description

EXPERIMENTAL — This approach to mixins is subject to change

Defines base styles for headings used throughout a project

If theme creators wish to overwrite this mixin, they should include a header-base-styles-theme mixin in their theme files.

Parameters

None.

Requires

atavist-cover-h1

@mixin atavist-cover-h1() { ... }

Description

EXPERIMENTAL — This approach to mixins is subject to change

Defines styles for h1 headings used as part of certain title designs

If theme creators wish to overwrite this mixin, they should include a atavist-cover-h1-theme mixin in their theme files.

Parameters

None.

Requires

atavist-cover-h2

@mixin atavist-cover-h2() { ... }

Description

EXPERIMENTAL — This approach to mixins is subject to change

Defines styles for h2 headings used as part of certain title designs

If theme creators wish to overwrite this mixin, they should include a atavist-cover-h2-theme mixin in their theme files.

Parameters

None.

Requires

atavist-cover-byline

@mixin atavist-cover-byline() { ... }

Description

EXPERIMENTAL — This approach to mixins is subject to change

Defines styles for bylines used as part of certain title designs

If theme creators wish to overwrite this mixin, they should include a atavist-cover-byline-theme mixin in their theme files.

Parameters

None.

Requires

h1

@mixin h1() { ... }

Description

EXPERIMENTAL — This approach to mixins is subject to change

Defines styles for h1 headings used within section content

If theme creators wish to overwrite this mixin, they should include a h1-theme mixin in their theme files.

Parameters

None.

Requires

h2

@mixin h2() { ... }

Description

EXPERIMENTAL — This approach to mixins is subject to change

Defines styles for h2 headings used within section content

If theme creators wish to overwrite this mixin, they should include a h2-theme mixin in their theme files.

Parameters

None.

Requires

h3

@mixin h3() { ... }

Description

EXPERIMENTAL — This approach to mixins is subject to change

Defines styles for h3 headings used within section content

If theme creators wish to overwrite this mixin, they should include a h3-theme mixin in their theme files.

Parameters

None.

Requires

h4

@mixin h4() { ... }

Description

EXPERIMENTAL — This approach to mixins is subject to change

Defines styles for h4 headings used within section content

If theme creators wish to overwrite this mixin, they should include a h4-theme mixin in their theme files.

Parameters

None.

Requires

Used by

  • [mixin] h5
  • [mixin] h6

h5

@mixin h5() { ... }

Description

EXPERIMENTAL — This approach to mixins is subject to change

Defines styles for h5 headings used within section content

If theme creators wish to overwrite this mixin, they should include a h5-theme mixin in their theme files.

Parameters

None.

Requires

  • [mixin] h4

h6

@mixin h6() { ... }

Description

EXPERIMENTAL — This approach to mixins is subject to change

Defines styles for h6 headings used within section content

If theme creators wish to overwrite this mixin, they should include a h6-theme mixin in their theme files.

Parameters

None.

Requires

  • [mixin] h4

blockquote

@mixin blockquote() { ... }

Description

EXPERIMENTAL — This approach to mixins is subject to change

Defines styles for blockquotes used within section content

If theme creators wish to overwrite this mixin, they should include a blockquote-theme mixin in their theme files.

Parameters

None.

Requires

hr

@mixin hr() { ... }

Description

EXPERIMENTAL — This approach to mixins is subject to change

Defines styles for horizontal rules used within section content

If theme creators wish to overwrite this mixin, they should include a hr-theme mixin in their theme files.

Parameters

None.

drop-cap

@mixin drop-cap() { ... }

Description

EXPERIMENTAL — This approach to mixins is subject to change

Defines styles for drop caps.

If theme creators wish to overwrite this mixin, they should include a drop-cap-theme mixin in their theme files.

Parameters

None.