Replace zen grids with css grid. Move print styles print style file. Remove Drupal specific styles.
This commit is contained in:
Fredrik Jonsson
parent
ccb8a2637a
commit
265a50cda5
27 changed files with 201 additions and 398 deletions
|
|
@ -2,3 +2,25 @@
|
|||
* @file
|
||||
* Site custom styles
|
||||
*/
|
||||
|
||||
.header {
|
||||
&__logo {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
figure {
|
||||
margin-left: -($zen-gutters / 2);
|
||||
margin-right: -($zen-gutters / 2);
|
||||
|
||||
@include respond-to(s) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@include margin(1 $indent-amount/2);
|
||||
@include padding(0 $indent-amount/2);
|
||||
border-left: 2px solid color(border);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,9 +29,7 @@
|
|||
// The following sass modules are shared with all .scss files:
|
||||
// - [Breakpoint](http://breakpoint-sass.com/)
|
||||
// - [Chroma](https://github.com/JohnAlbin/chroma)
|
||||
// - [Support-for](https://github.com/JohnAlbin/support-for)
|
||||
// - [Typey](https://github.com/jptaranto/typey)
|
||||
// - [Zen Grids](http://zengrids.com/help/)
|
||||
//
|
||||
// Additional pre-built libraries can be found on the [Sache website](http://www.sache.in/).
|
||||
//
|
||||
|
|
@ -40,12 +38,8 @@
|
|||
// Add Chroma to manage colors.
|
||||
@import 'chroma';
|
||||
@import 'chroma/kss';
|
||||
// Add support-for to manage normalize-scss' browser support.
|
||||
@import 'support-for';
|
||||
// Add typey to manage font sizes and margins.
|
||||
@import 'typey';
|
||||
// Add the Zen Grids responsive layout mixins.
|
||||
@import 'zen-grids';
|
||||
|
||||
|
||||
// Mixins
|
||||
|
|
|
|||
|
|
@ -178,7 +178,7 @@ body {
|
|||
background-color: color(backdrop);
|
||||
}
|
||||
|
||||
.layout-center {
|
||||
.page {
|
||||
background-color: color(body-bg);
|
||||
}
|
||||
|
||||
|
|
@ -191,20 +191,16 @@ body {
|
|||
|
||||
&__logo {
|
||||
@include respond-to(s) {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
&__site-name {
|
||||
@include respond-to(s) {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
&__region {
|
||||
@include respond-to(s) {
|
||||
float: right;
|
||||
clear: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -334,41 +330,3 @@ body {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Print. */
|
||||
|
||||
aside,
|
||||
nav,
|
||||
footer {
|
||||
@extend %print-none;
|
||||
}
|
||||
|
||||
@media print {
|
||||
body,
|
||||
.layout-center {
|
||||
background-color: color(white);
|
||||
}
|
||||
|
||||
.layout-swap {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
[role='main'] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.layout-swap__top {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
/* Zen overrides */
|
||||
:link,
|
||||
:visited {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a[href]::after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,10 +45,6 @@ select {
|
|||
// Show the overflow in Edge.
|
||||
input {
|
||||
overflow: visible;
|
||||
@if support-for(firefox, 29) {
|
||||
// Firefox sets `line-height` using `!important` in the UA stylesheet.
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
// Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
|
|
@ -196,7 +192,6 @@ legend {
|
|||
// Style guide: forms.base.label
|
||||
|
||||
label {
|
||||
// Drupal-style form labels.
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,25 +49,3 @@ a:active,
|
|||
a:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
@media print {
|
||||
// Underline all links.
|
||||
:link,
|
||||
:visited {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
// Add visible URL after links.
|
||||
a[href]::after {
|
||||
content: ' (' attr(href) ')';
|
||||
font-weight: normal;
|
||||
font-size: $base-font-size;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Only display useful links.
|
||||
a[href^='javascript:']::after,
|
||||
a[href^='#']::after {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,13 +21,6 @@ abbr[title] {
|
|||
// Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
text-decoration: underline;
|
||||
text-decoration: underline dotted;
|
||||
|
||||
@media print {
|
||||
// Add visible title after abbreviations.
|
||||
&::after {
|
||||
content: ' (' attr(title) ')';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Bold
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
//
|
||||
// A simple box style.
|
||||
//
|
||||
// A Drupal block is often styled as a box. However, this design component is
|
||||
// A block is often styled as a box. However, this design component is
|
||||
// not applied to any blocks by default; it is used as an example of how to
|
||||
// build and document a CSS component.
|
||||
//
|
||||
|
|
@ -35,19 +35,9 @@
|
|||
}
|
||||
|
||||
// Sass compiles this nested ruleset's selector into:
|
||||
// .box:focus, .box:hover, .box.is-focus, .box--is-focus,
|
||||
// %box:focus, %box:hover, %box.is-focus, %box--is-focus {}
|
||||
//
|
||||
// The ".box--is-focus" class is a stray class we don't actually want, but we
|
||||
// deal with it because we often want a placeholder selector like
|
||||
// %box--is-focus in case we need to use @extends later.
|
||||
//
|
||||
// The ".is-" part of the class name is a Drupal 8 BEM naming convention that
|
||||
// indicates the "focus" is a _state_ of the "box" component.
|
||||
// .box:focus, .box:hover, %box:focus, %box:hover
|
||||
&:focus,
|
||||
&:hover,
|
||||
&.is-focus,
|
||||
&--is-focus {
|
||||
&:hover {
|
||||
border-color: color(text);
|
||||
}
|
||||
|
||||
|
|
@ -59,28 +49,3 @@
|
|||
border-color: color(link);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Drupal selectors.
|
||||
//
|
||||
// In this part of the file, we write some fugly selectors if we can't figure
|
||||
// out how to insert the class we want (.box) into the Drupal theme system. Then
|
||||
// we @extend from the fugly selector into the nicely-written component
|
||||
// selector.
|
||||
//
|
||||
|
||||
// You could create a theme hook suggestion and override the block.tpl.php just
|
||||
// for the sidebar regions or write a HOOK_preprocess_block() function to check
|
||||
// for the regions and insert the classes into the right variables, or, if you
|
||||
// have no idea what I'm talking about, you could just use this fugly CSS
|
||||
// selector:
|
||||
//
|
||||
// [class$="sidebar"] {
|
||||
// .block {
|
||||
// @extend %box;
|
||||
// }
|
||||
//
|
||||
// .block__title {
|
||||
// @extend %box__title;
|
||||
// }
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -24,15 +24,3 @@
|
|||
@extend %hidden;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Drupal selectors.
|
||||
//
|
||||
|
||||
.element-hidden {
|
||||
@extend %js-hidden;
|
||||
}
|
||||
|
||||
.js-hide {
|
||||
@extend %js-hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
<div class="hidden {{modifier_class}}">
|
||||
This content is hidden.
|
||||
</div>
|
||||
|
|
@ -14,12 +14,3 @@
|
|||
// Remove background highlighting from <mark> in normalize.
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
//
|
||||
// Drupal selectors. (In case a module doesn't use theme_mark().)
|
||||
//
|
||||
|
||||
.new,
|
||||
.update {
|
||||
@extend %highlight-mark;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,15 +22,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Drupal selectors.
|
||||
//
|
||||
|
||||
.inline.links {
|
||||
@extend %inline-links;
|
||||
|
||||
li {
|
||||
@extend %inline-links__item;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,25 +31,3 @@
|
|||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Drupal selectors.
|
||||
//
|
||||
|
||||
// Drupal core.
|
||||
.field-label-inline {
|
||||
.field-label {
|
||||
@extend %inline-sibling;
|
||||
}
|
||||
|
||||
// Revert core's ridiculous styling without polluting the component.
|
||||
.field-label,
|
||||
.field-items {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
// The inline field label used by the Fences 7.x-1.x module.
|
||||
span.field-label {
|
||||
@extend %inline-sibling;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,17 +16,3 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Drupal selectors.
|
||||
//
|
||||
|
||||
// Hide Drupal nav elements.
|
||||
.toolbar,
|
||||
.action-links,
|
||||
.links,
|
||||
.book-navigation,
|
||||
.forum-topic-navigation,
|
||||
.feed-icons {
|
||||
@extend %print-none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,12 +34,3 @@
|
|||
padding-bottom: (3/4)*100%; // 4:3 aspect ratio
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Drupal selectors.
|
||||
//
|
||||
|
||||
.media-youtube-video,
|
||||
.media-vimeo-preview-wrapper {
|
||||
@extend %responsive-video;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,16 +26,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Drupal selectors.
|
||||
//
|
||||
|
||||
.element-invisible {
|
||||
@extend %visually-hidden;
|
||||
}
|
||||
|
||||
.element-focusable {
|
||||
@extend %visually-hidden;
|
||||
@extend %visually-hidden--focusable;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,14 +20,20 @@ $with-wireframes: false !default;
|
|||
}
|
||||
|
||||
//
|
||||
// Drupal selectors.
|
||||
// Zen selectors.
|
||||
//
|
||||
|
||||
.header,
|
||||
.layout-3col > div,
|
||||
.footer,
|
||||
.region-bottom {
|
||||
@extend %wireframe;
|
||||
.layout {
|
||||
&__header,
|
||||
&__footer,
|
||||
&__content,
|
||||
&__navigation,
|
||||
&__first-sidebar,
|
||||
&__second-sidebar,
|
||||
&__page-top,
|
||||
&__page-bottom {
|
||||
@extend %wireframe;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,11 @@ $chroma: add-colors((
|
|||
grey-light: ('black' lighten 80%), // #ccc
|
||||
grey-extra-light: ('black' lighten 93.33%), // #eee
|
||||
white: #fff,
|
||||
|
||||
hg-red: #a30319,
|
||||
hg-red-alt: #8d0018,
|
||||
beige: #f2ecd5,
|
||||
off-white: #fffdf7,
|
||||
blue: #0072b9,
|
||||
red: #c00,
|
||||
green: #43a808,
|
||||
|
|
@ -32,16 +37,16 @@ $chroma: add-colors((
|
|||
$chroma: define-color-scheme('functional', 'Colors used by functional parts of the design.');
|
||||
$chroma: add-colors('functional', (
|
||||
// Colors used in the main content area.
|
||||
brand: 'nearblack',
|
||||
brand-alt: 'grey',
|
||||
brand-dark: 'grey-dark',
|
||||
brand: 'hg-red',
|
||||
brand-alt: 'beige',
|
||||
brand-dark: ('hg-red' darken 10%),
|
||||
text: 'black',
|
||||
text-bg: 'white',
|
||||
|
||||
link: 'black',
|
||||
link-visited: 'black',
|
||||
link-hover: 'brand',
|
||||
link-active: 'red',
|
||||
link-active: 'hg-red',
|
||||
|
||||
border: 'grey-light',
|
||||
border-dark: 'nearblack',
|
||||
|
|
@ -74,7 +79,7 @@ $chroma: add-colors('functional', (
|
|||
|
||||
resizable-grippie: 'grey-extra-light',
|
||||
|
||||
row-stripe: 'white',
|
||||
row-stripe: 'beige',
|
||||
row-disabled: 'grey-light',
|
||||
|
||||
skip-link: 'white',
|
||||
|
|
|
|||
|
|
@ -1,27 +1,6 @@
|
|||
// Variables
|
||||
//
|
||||
// Set variables for this site before a library sets its !default value.
|
||||
//
|
||||
// Style guide: sass.variables
|
||||
|
||||
|
||||
// Browser support
|
||||
//
|
||||
// For older versions of browsers, some Sass relies on the `support-for()` to
|
||||
// control whether extra CSS is needed to be output. The `support-for()`
|
||||
// function and the `$support-for` variable are documented on the [support-for
|
||||
// homepage](https://github.com/JohnAlbin/support-for).
|
||||
//
|
||||
// Style guide: sass.variables.support-for
|
||||
|
||||
// Support the same browsers as normalize.css v3.
|
||||
// Possible keys: chrome, edge, firefox, ie, opera, safari, '*'
|
||||
$support-for: (
|
||||
// IE 9-11
|
||||
ie: 11,
|
||||
// The last 4 versions of all other browsers.
|
||||
'*': -4,
|
||||
);
|
||||
|
||||
|
||||
// Font faces, stacks and sizes.
|
||||
|
|
@ -30,8 +9,6 @@ $support-for: (
|
|||
// used by mixins like `type-layout()`, `margin-top()`, and `margin-bottom()`.
|
||||
// These variable and mixins are documented on the [Typey
|
||||
// homepage](https://github.com/jptaranto/typey).
|
||||
//
|
||||
// Style guide: sass.variables.typey
|
||||
|
||||
// The font size set on the root html element.
|
||||
$base-font-size: 22px;
|
||||
|
|
@ -140,8 +117,6 @@ $rem-fallback: false;
|
|||
// Use the `respond-to()` mixin to use named breakpoints. Documentation is
|
||||
// available in the [Breakpoint wiki
|
||||
// pages](https://github.com/at-import/breakpoint/wiki/Respond-To).
|
||||
//
|
||||
// Style guide: sass.variables.breakpoints
|
||||
|
||||
@include add-breakpoint(xxxs, (333px, 'no-query' true));
|
||||
@include add-breakpoint(xxs, (444px, 'no-query' true));
|
||||
|
|
@ -157,45 +132,14 @@ $rem-fallback: false;
|
|||
// @include breakpoint-set('to ems', true);
|
||||
|
||||
|
||||
// Zen grids
|
||||
//
|
||||
// The default grid system is built using the Zen Grids sass module. Full
|
||||
// documentation is available on the [Zen Grids website](http://zengrids.com/).
|
||||
//
|
||||
// Note: if you are more comfortable using another grid system, you can easily
|
||||
// remove Zen Grids and its layouts.
|
||||
//
|
||||
// Style guide: sass.variables.zen-grids
|
||||
// Layout
|
||||
|
||||
// The max content width (the gutters with will be added).
|
||||
$max-content-width: 1140px;
|
||||
$max-no-sidebars-content-width: 740px;
|
||||
// The max content width (the main content area).
|
||||
$max-content-width: 740px;
|
||||
|
||||
// These are needed for all breakpoints on all layouts.
|
||||
$zen-auto-include-grid-item-base: false;
|
||||
$zen-box-sizing: universal-border-box;
|
||||
|
||||
// First we set the values we need for the mobile version of our layouts (the
|
||||
// version that does _not_ appear inside any @media queries.)
|
||||
$zen-columns: 1;
|
||||
// The default left/right gutter/padding.
|
||||
$zen-gutters: 20px;
|
||||
|
||||
// Then we set the values we need for each of the layouts at larger media query
|
||||
// sizes. Note how the names of the layouts match the names of our breakpoints
|
||||
// above. That allows a single zen-respond-to() to both use the proper item
|
||||
// from $zen-layouts and from $breakpoints.
|
||||
$zen-layouts: (
|
||||
m: (
|
||||
columns: 2,
|
||||
// The gutters in the layouts are larger on mobile.
|
||||
gutters: 40px,
|
||||
),
|
||||
xl: (
|
||||
columns: 3,
|
||||
gutters: 40px,
|
||||
),
|
||||
);
|
||||
|
||||
// See $include-rtl below.
|
||||
$zen-rtl-selector: '[dir="rtl"]';
|
||||
|
||||
|
|
@ -204,11 +148,9 @@ $zen-rtl-selector: '[dir="rtl"]';
|
|||
//
|
||||
// `$indent-amount` controls the amount lists, blockquotes and comments are indented.
|
||||
//
|
||||
// `$include-rtl` controls whether RTL styles are output. Rather than include a separate `*-rtl.css` file, Zen 6 uses Drupal 8's standard `[dir="rtl"]` selector for RTL language support.
|
||||
// `$include-rtl` controls whether RTL styles are output.
|
||||
//
|
||||
// weight: 10
|
||||
//
|
||||
// Style guide: sass.variables.misc
|
||||
|
||||
$indent-amount: 2 * $base-font-size;
|
||||
|
||||
|
|
|
|||
95
sass/layouts/_layouts.scss
Normal file
95
sass/layouts/_layouts.scss
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
.layout {
|
||||
&__content {
|
||||
max-width: $max-content-width;
|
||||
}
|
||||
|
||||
&__header,
|
||||
&__footer,
|
||||
&__content,
|
||||
&__navigation,
|
||||
&__first-sidebar,
|
||||
&__second-sidebar,
|
||||
&__page-top,
|
||||
&__page-bottom {
|
||||
padding: 0 $zen-gutters / 2;
|
||||
|
||||
@include respond-to(s) {
|
||||
padding: 0 $zen-gutters;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@supports (display: grid) {
|
||||
|
||||
.layout {
|
||||
&__wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: [first-start] 1fr [last-end];
|
||||
}
|
||||
|
||||
@include respond-to(s) {
|
||||
&__wrapper {
|
||||
grid-template-rows: [head-start] auto
|
||||
[nav-start] auto
|
||||
[page-top-start] auto
|
||||
[main-start] 1fr
|
||||
[page-bottom-start] auto
|
||||
[footer-start] auto;
|
||||
max-width: 960px;
|
||||
min-height: 100vh;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__sidebar-first {
|
||||
grid-template-columns: [first-start] 1fr
|
||||
[last-start] 2fr [last-end];
|
||||
}
|
||||
|
||||
&__sidebar-second {
|
||||
grid-template-columns: [first-start] 2fr
|
||||
[last-start] 1fr [last-end];
|
||||
}
|
||||
|
||||
&__sidebar-two {
|
||||
grid-template-columns: [first-start] 1fr
|
||||
[middle-start] 2fr
|
||||
[last-start] 1fr [last-end];
|
||||
}
|
||||
|
||||
&__full {
|
||||
grid-column: first-start / last-end;
|
||||
}
|
||||
|
||||
&__first-sidebar {
|
||||
grid-column: first-start;
|
||||
}
|
||||
|
||||
&__header {
|
||||
grid-row: head-start;
|
||||
}
|
||||
|
||||
&__navigation {
|
||||
grid-row: nav-start;
|
||||
}
|
||||
|
||||
&__page-top {
|
||||
grid-row: page-top-start;
|
||||
}
|
||||
|
||||
&__content,
|
||||
&__first-sidebar,
|
||||
&__second-sidebar {
|
||||
grid-row: main-start;
|
||||
}
|
||||
|
||||
&__page-bottom {
|
||||
grid-row: page-bottom-start;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
grid-row: footer-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -11,10 +11,6 @@
|
|||
|
||||
.breadcrumb,
|
||||
%breadcrumb {
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__title {
|
||||
@extend %visually-hidden;
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue