test/styles/website/_markup.scss
2018-12-13 14:35:49 +01:00

375 lines
11 KiB
SCSS
Executable file

// # Markup
// Styling for markup
// *******************************************************
// ## Variables
// *******************************************************
// Stylings for H1-H6
$heading-map : (
color: $color-headings,
font-family: $font-family-headings
) !default;
$heading-1-map : map-merge( $heading-map, (font-size: $font-size-h1) ) !default;
$heading-2-map : map-merge( $heading-map, (font-size: $font-size-h2) ) !default;
$heading-3-map : map-merge( $heading-map, (font-size: $font-size-h3) ) !default;
$heading-4-map : map-merge( $heading-map, (font-size: $font-size-h4) ) !default;
$heading-5-map : map-merge( $heading-map, (font-size: $font-size-h5) ) !default;
$heading-6-map : map-merge( $heading-map, (font-size: $font-size-h6) ) !default;
// Styling for links
$link-map : (
color: $color-primary,
text-decoration: none
) !default;
// Styling for links on hover
$link-hover-map : ( text-decoration: underline ) !default;
// Styling for P elements
$p-map : ( line-height: $line-height-base ) !default;
// Styling for HR elements
$hr-map : (
height: 4px,
margin: $spacing-unit*3 0,
background-color: $color-border
) !default;
// Styling for BLOCKQUOTE elements
$blockquote-map : (
margin: 0 0 0 $spacing-unit,
padding: 0 $spacing-unit * 2,
color: $color-text-muted,
border-left: 4px solid $color-border
) !default;
// Styling for image elemnets
$image-map : ( max-width: 100% ) !default;
// Styling for TABLE elements
$table-map : () !default;
// Styling for TR elements
$table-tr-map : (
background-color: white,
border-top: 1px solid $color-gray-lighter
) !default;
// Styling for even-numbered rows
$table-tr-2-map : ( background-color: $color-gray-lightest ) !default;
// Styling for TD elements
$table-td-map : (
padding: $spacing-unit/2 $spacing-unit,
border: 1px solid $color-gray-lighter
) !default;
// Styling for TH elements
$table-th-map : map-merge( $table-td-map, ( font-weight: bold ) ) !default;
// Styling for UL elements
$ul-map : (
margin-bottom: $spacing-unit,
padding-left: 2em
) !default;
// Styling for OL elements
$ol-map : (
margin-bottom: $spacing-unit,
padding-left: 2em
) !default;
// Styling for nested OL elements
$ol-ol-map : ( list-style-type: lower-roman ) !default;
// Styling for LI elements
$li-map : () !default;
// Styling for dl
$dl-map : () !default;
// Styling for dt
$dt-map : (
padding: 0,
margin-top: $spacing-unit,
font-style: italic,
font-weight: bold
) !default;
// Styling for
$dd-map : (
padding: 0 $spacing-unit,
margin-bottom: $spacing-unit
) !default;
// Styling for PRE elements
$pre-map : (
margin: 0px,
padding: 0.85em 1em,
margin-bottom: $spacing-unit,
background: $color-gray-lightest,
) !default;
// Styling for code block divs
$code-block-map : (
font-family: $font-family-mono,
margin: 0px,
padding: 0px,
border: none
) !default;
// Styling for text inside code blocks
$code-block-text-map : (
font-size: 0.85em,
background: transparent
) !default;
// Styling for inline code snippets
$code-inline-map : (
padding: 0.2em,
margin: 0,
font-size: 0.85em,
background-color: $color-gray-lightest
) !default;
// *******************************************************
// ## Text
// *******************************************************
a { @include print( $link-map ); }
a:hover { @include print( $link-hover-map ); }
// ### Defintions for font sizes controlled by "Font Settings" dropdown in header
.book.font-size-0 .book-body .page-inner section { font-size: $font-size-0; }
.book.font-size-1 .book-body .page-inner section { font-size: $font-size-1; }
.book.font-size-2 .book-body .page-inner section { font-size: $font-size-2; }
.book.font-size-3 .book-body .page-inner section { font-size: $font-size-3; }
.book.font-size-4 .book-body .page-inner section { font-size: $font-size-4; }
// *******************************************************
// ## Markdown wrapper div
// *******************************************************
.markdown-section
{
display: block;
word-wrap: break-word;
overflow: hidden;
line-height: $line-height-base;
text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
}
.markdown-section *
{
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.markdown-section > *:first-child { margin-top: 0 !important; }
.markdown-section > *:last-child { margin-bottom: 0 !important; }
.markdown-section .glossary-term
{
cursor: help;
text-decoration: underline;
}
// *******************************************************
// ## Printing
// *******************************************************
pre, code, blockquote, tr, img, table, figure
{
page-break-inside: avoid;
}
p, h2, h3, h4, h5
{
orphans: 3;
widows: 3;
}
h1, h2, h3, h4, h5
{
page-break-after: avoid;
}
// *******************************************************
// ## Paragraphs
// *******************************************************
p { @include print( $p-map ); }
// *******************************************************
// ## Images
// *******************************************************
img
{
border: 0;
@include print( $image-map );
}
// *******************************************************
// ## Horizontal lines
// *******************************************************
hr
{
overflow: hidden;
padding: 0;
border: none;
@include print( $hr-map );
}
// *******************************************************
// ## Headings
// *******************************************************
h1 { @include print( $heading-1-map ); }
h2 { @include print( $heading-2-map ); }
h3 { @include print( $heading-3-map ); }
h4 { @include print( $heading-4-map ); }
h5 { @include print( $heading-5-map ); }
h6 { @include print( $heading-6-map ); }
// *******************************************************
// ## Code Blocks
// *******************************************************
code, pre
{
direction: ltr;
@include print( $code-block-map );
}
pre
{
overflow: auto;
word-wrap: normal;
@include print( $pre-map );
}
pre > code
{
display: inline;
max-width: initial;
padding: 0;
margin: 0;
overflow: initial;
line-height: inherit;
white-space: pre;
@include print( $code-block-text-map );
&:before, &:after { content: normal; }
}
code
{
@include print( $code-inline-map );
&:before, &:after
{
letter-spacing: -0.2em;
content: "\00a0";
}
}
// *******************************************************
// ## Table
// *******************************************************
table
{
display: table;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
overflow: auto;
@include print( $table-map );
}
tr
{
@include print( $table-tr-map );
&:nth-child(2n) { @include print( $table-tr-2-map ); }
}
th { @include print( $table-th-map ); }
td { @include print( $table-td-map ); }
// *******************************************************
// ## Lists
// *******************************************************
.markdown-section
{
ul { @include print( $ul-map ); }
ol { @include print( $ol-map ); }
ol ol { @include print( $ol-ol-map ); }
li { @include print( $li-map ); }
}
// *******************************************************
// ## Blockquote
// *******************************************************
blockquote
{
@include print( $blockquote-map );
&:first-child { margin-top: 0; }
&:last-child { margin-bottom: 0; }
}
// *******************************************************
// ## Description Lists
// *******************************************************
dl
{
padding: 0;
@include print( $dl-map );
}
dl dt { @include print( $dt-map ); }
dl dd { @include print( $dd-map ); }
dd { margin-left: 0; }