// Formatting for the widgets. Note that widgets are small. .widget {
font-size: $small-2-font-size; h1 { font-size: $small-1-font-size; font-weight: bold; } h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure { margin-bottom: 0; }
}
// The separator between widgets, a thin horizontal line. .widget-separator {
margin-top: $vspacing-unit / 2; margin-left: 0; margin-bottom: $vspacing-unit / 2; margin-right: 0; border-bottom: 1px solid $widget-separator-color; @if $widget-separator-display { display: block; } @else { display: none; }
}
// Separator between primary, secondary and tertiary .secondary-widget-separator { @extend .widget-separator; } .tertiary-widget-separator { @extend .widget-separator; }
// Used to include an iframe that scales with the column width in HD (16:9) format. // To be used for the div that wraps an iframe like: // <div class=“scaling-iframe-wrapper-hd”><iframe>…</iframe></div> // Very usefull for video players etc. .scaling-iframe-wrapper-hd {
position: relative; padding-bottom: 56.25%; // HD ratio is 16:9 => (9/16)*100%= 56.25% padding-top: 30px; overflow: hidden; margin-top: $vspacing-unit; margin-bottom: $vspacing-unit; iframe { // Allows component to extend over the padding area position: absolute; // Let the upper left corner be the upper left corner of the containg element top: 0; left: 0; // Make the iframe as big as its container. width: 100%; height: 100%; }
}
// Used by the older-posts widget .older-posts {
h1 { margin-bottom: $vspacing-unit/2; } .year-details { summary { outline: none; // Prevent blue input-active activity border } .month-details { padding-left: $hspacing-unit; p { padding: 0 0 0 (2 * $hspacing-unit); margin: 0 0 0 0; text-indent: -$hspacing-unit; } } }
}
// For the categories .categories {
// Do not display the checkbox input { display: none; } p { margin: 0 } a { text-decoration: none; display: block; background: $category-item-background; } a:hover { background: $category-item-background-hover; } label h1 { background: $category-header-background; } label h1:hover { background: $category-header-background-hover; } .title { padding: $category-item-padding; } // Only display the categories when the cat input checkbox is active .title { display: none; } input:checked ~ { .title { display: block; } }
}