// ----------------------------------------------------------- // General // // This file is meant for general styles and containers // that apply everywhere throughout the website. Add more // always repeating elements right below. // ----------------------------------------------------------- // Default structural element .block { @include background-cover(); background-position: center; background-color: #fff; position: relative; min-height: 100px; max-width: $layout-max-width; margin: 0 auto; } // Default shade on top of blocks .shade { background: #333; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 0; opacity: .15; } // Site wrapper .site { max-width: 100%; margin-left: auto; margin-right: auto; position: relative; overflow: hidden; } // Containers .container { margin: 0 auto; padding-top: $container-default-pad-y; padding-bottom: $container-default-pad-y; padding-left: $container-default-pad-x; padding-right: $container-default-pad-x; @if $grid-type == fluid { max-width: $grid-base-size; margin-left: auto; margin-right: auto; padding-left: $container-default-pad-x; padding-right: $container-default-pad-x; } @else if $grid-type == snappy { width: 100%; @media (min-width: $container-ipad) { width: 700px; } @media (min-width: $container-ipad-landscape) { width: 900px; } @media (min-width: $container-desktop) { width: $grid-base-size; } } @else { @include center($max_width: $grid-base-size, $pad: 0); } @media (max-width: $container-ipad - 10px) { padding-top: $container-default-pad-y / 2; padding-bottom: $container-default-pad-y / 2; } } // Clear block containers by default .site-main .container { overflow: hidden; clear: both; } // Meta actions .entry-footer { overflow: hidden; clear: both; display: block; } // Edit .edit-link { text-align: left; width: 100%; display: block; clear: both; max-width: 100%; min-width: 0; margin-bottom: 0; margin-top: 0; top: 0; bottom: 0; padding: 0; overflow: hidden; a { clear: both; display: block; margin-top: 40px; padding: 0; } } // Global link helper // This is useful in services -type of areas where the whole block is a link // Remember to define aria-label or screen-reader-text for accessibility a.global-link { width: 100%; height: 100%; z-index: 3; position: absolute; top: 0; left: 0; }