blocks
mixins
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
- [variable]
sidebarBlockFontSize
- [variable]
sidebarBlockLineHeight
- [variable]
sidebarBlockBodyTextFontFamily
- [variable]
sidebarBlockBodyTextFontSize
- [variable]
sidebarBlockParagraphTopMargin
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
- [variable]
popUpBlockTextColor
- [variable]
popUpBlockPadding
- [variable]
popUpBlockBorderRadius
- [variable]
popUpBlockBackgroundColor
- [variable]
popUpBlockBackgroundColor-hover
variables
sidebarBlockFontSize
$sidebarBlockFontSize: 0.85em !default;
Description
Defines general font size for Sidebar blocks.
Used by
- [mixin]
atavist-sidebar
sidebarBlockLineHeight
$sidebarBlockLineHeight: 1.3 !default;
Description
Defines line height for Sidebar blocks.
Used by
- [mixin]
atavist-sidebar
sidebarBlockBodyTextFontFamily
$sidebarBlockBodyTextFontFamily: $primaryFontFamily !default;
Description
Defines the body text font family for Sidebar blocks.
Used by
- [mixin]
atavist-sidebar
sidebarBlockBodyTextFontSize
$sidebarBlockBodyTextFontSize: $fontFamilyMultiplier * $paragraphFontSize !default;
Description
Defines the body text font size for Sidebar blocks.
Used by
- [mixin]
atavist-sidebar
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
- [mixin]
atavist-sidebar
popUpBlockTextColor
$popUpBlockTextColor: inherit !default;
Description
Defines the text color of pop-up block inline links.
Used by
- [mixin]
inline-block-styles
popUpBlockPadding
$popUpBlockPadding: 3px 4px 1px !default;
Description
Defines the padding of pop-up block inline links.
Used by
- [mixin]
inline-block-styles
popUpBlockBackgroundColor
$popUpBlockBackgroundColor: rgba(mix($primaryTextColor, $primaryBackgroundColor, 70%),0.175) !default;
Description
Defines the background color of pop-up block inline links.
Used by
- [mixin]
inline-block-styles
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
- [mixin]
inline-block-styles
popUpBlockBorderRadius
$popUpBlockBorderRadius: 2px !default;
Description
Defines the border radius of pop-up block inline links.
Used by
- [mixin]
inline-block-styles
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
- [mixin]
h3
- [mixin]
link-styles
See
- [variable]
primaryTextColor
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
- [mixin]
h3
- [mixin]
blockquote
See
- [variable]
primaryBackgroundColor
[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
- [variable]
alternateTextColor
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
- [mixin]
left-nav-story-title
See
- [variable]
alternateBackgroundColor
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
- [variable]
alternateBackgroundColor
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
- [variable]
primaryTextColor
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
- [variable]
primaryIconColor
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
- [variable]
alternateIconColor-Stroke
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
- [variable]
alternateIconColor
- [variable]
primaryTextColor
icons
variables
media queries and breakpoints
variables
verySmallBreakpoint
$verySmallBreakpoint: 450px !default;
Description
Defines the smallest breakpoint value.
Type
Length
See
- [variable]
smallBreakpoint
smallBreakpoint
$smallBreakpoint: 567px !default;
Description
Defines the second smallest breakpoint value.
Type
Length
Used by
- [mixin]
atavist-cover-h1
- [mixin]
atavist-cover-h2
See
- [variable]
verySmallBreakpoint
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
- [variable]
sectionTopPadding-smallBreakpoint
sectionTopPadding-smallBreakpoint
$sectionTopPadding-smallBreakpoint: 2rem !default;
Description
Defines the top padding of sections at the small breakpoint.
Type
Length
See
- [variable]
sectionTopPadding
sectionBottomPadding
$sectionBottomPadding: 5rem !default;
Description
Defines the bottom padding of sections.
Type
Length
See
- [variable]
sectionBottomPadding-smallBreakpoint
sectionBottomPadding-smallBreakpoint
$sectionBottomPadding-smallBreakpoint: 2rem !default;
Description
Defines the bottom padding of sections at the small breakpoint.
Type
Length
See
- [variable]
sectionBottomPadding
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
- [mixin]
header-base-styles
- [mixin]
blockquote
outsideGutterWidth
$outsideGutterWidth: 4rem !default;
Description
Defines the width of the left and right “gutters,” used to protect icons positioned there.
Type
Length
See
- [variable]
outsideGutterWidth-compressed
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
- [variable]
outsideGutterWidth
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
- [mixin]
atavist-caption
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
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
- [mixin]
atavist-cover-h1
- [mixin]
atavist-cover-h2
- [mixin]
atavist-cover-byline
- [mixin]
h1
- [mixin]
h2
- [mixin]
h3
- [mixin]
h4
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
- [mixin]
atavist-cover-h1
- [mixin]
atavist-cover-h2
- [mixin]
atavist-cover-byline
- [mixin]
h1
- [mixin]
h2
- [mixin]
h3
- [mixin]
h4
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
- [mixin]
blockquote
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
- [mixin]
link-styles
linkTextColor-h2
$linkTextColor-h2: inherit !default;
Description
Defines the color of link text in h2 elements.
Used by
- [mixin]
link-styles
linkTextColor-h3
$linkTextColor-h3: inherit !default;
Description
Defines the color of link text in h3 elements.
Used by
- [mixin]
link-styles
linkUnderlineColor
$linkUnderlineColor: mix($primaryBackgroundColor, $primaryTextColor, 50%) !default;
Description
Defines the color of link underlines.
Used by
- [mixin]
link-styles
linkUnderlineColor-h2
$linkUnderlineColor-h2: currentColor !default;
Description
Defines the color of link underlines in h2 elements.
Used by
- [mixin]
link-styles
linkUnderlineColor-h3
$linkUnderlineColor-h3: currentColor !default;
Description
Defines the color of link underlines in h3 elements.
Used by
- [mixin]
link-styles
linkBackgroundPositionY
$linkBackgroundPositionY: 90% !default;
Description
Defines the Y value of the background-position
property of link underlines.
Used by
- [mixin]
link-styles
linkBackgroundPositionY-h2
$linkBackgroundPositionY-h2: 92% !default;
Description
Defines the Y value of the background-position
property of link underlines in h2 elements.
Used by
- [mixin]
link-styles
linkBackgroundPositionY-h3
$linkBackgroundPositionY-h3: 89% !default;
Description
Defines the Y value of the background-position
property of link underlines in h3 elements.
Used by
- [mixin]
link-styles
linkBackgroundSizeY
$linkBackgroundSizeY: 2px !default;
Description
Defines the Y value of the background-size
property of link underlines.
Used by
- [mixin]
link-styles
linkBackgroundSizeY-h2
$linkBackgroundSizeY-h2: 4px !default;
Description
Defines the Y value of the background-size
property of link underlines in h2 elements.
Used by
- [mixin]
link-styles
linkBackgroundSizeY-h3
$linkBackgroundSizeY-h3: 3px !default;
Description
Defines the Y value of the background-size
property of link underlines in h3 elements.
Used by
- [mixin]
link-styles
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
- [variable]
outsidePaddingWidth
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
- [variable]
fontFamilyMultiplier
- [variable]
paragraphFontSize
- [variable]
smallBreakpoint
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
- [variable]
fontFamilyMultiplier
- [variable]
paragraphFontSize
- [variable]
smallBreakpoint
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
- [variable]
fontFamilyMultiplier
- [variable]
paragraphFontSize
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
- [variable]
fontFamilyMultiplier
- [variable]
paragraphFontSize
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
- [variable]
fontFamilyMultiplier
- [variable]
paragraphFontSize
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
- [variable]
fontFamilyMultiplier
- [variable]
paragraphFontSize
- [variable]
primaryTextColor
- [variable]
primaryBackgroundColor
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
- [variable]
fontFamilyMultiplier
- [variable]
paragraphFontSize
Used by
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
- [variable]
outsidePaddingWidth
- [variable]
textIndent
- [variable]
primaryTextColor
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.
link-styles
@mixin link-styles() { ... }
Description
EXPERIMENTAL — This approach to mixins is subject to change
Defines styles for link styles used within section content
If theme creators wish to overwrite this mixin, they should include a link-styles-theme
mixin in their theme files.
Parameters
None.
Requires
- [variable]
linkTextColor
- [variable]
linkUnderlineColor
- [variable]
linkBackgroundPositionY
- [variable]
linkBackgroundSizeY
- [variable]
primaryBackgroundColor
- [variable]
linkTextColor-h2
- [variable]
linkUnderlineColor-h2
- [variable]
linkTextColor-h3
- [variable]
linkUnderlineColor-h3
- [variable]
linkTextColor-captions
- [variable]
linkUnderlineColor-captions
- [variable]
linkBackgroundPositionY-h2
- [variable]
linkBackgroundSizeY-h2
- [variable]
linkBackgroundPositionY-h3
- [variable]
linkBackgroundSizeY-h3