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
38 changed files with 201 additions and 398 deletions
11
gulpfile.js
11
gulpfile.js
|
|
@ -33,20 +33,11 @@ options.sass = {
|
|||
options.theme.sass,
|
||||
options.rootPath.project + 'node_modules/breakpoint-sass/stylesheets',
|
||||
options.rootPath.project + 'node_modules/chroma-sass/sass',
|
||||
options.rootPath.project + 'node_modules/support-for/sass',
|
||||
options.rootPath.project + 'node_modules/typey/stylesheets'
|
||||
],
|
||||
outputStyle: 'expanded'
|
||||
};
|
||||
|
||||
// Define which browsers to add vendor prefixes for.
|
||||
options.autoprefixer = {
|
||||
browsers: [
|
||||
'> 1%',
|
||||
'ie 11'
|
||||
]
|
||||
};
|
||||
|
||||
// Define the paths to the JS files to lint.
|
||||
options.eslint = {
|
||||
files : [
|
||||
|
|
@ -93,7 +84,6 @@ gulp.task('styles', ['clean:css'], function() {
|
|||
return gulp.src(sassFiles)
|
||||
.pipe($.sourcemaps.init())
|
||||
.pipe(sass(options.sass).on('error', sass.logError))
|
||||
.pipe($.autoprefixer(options.autoprefixer))
|
||||
.pipe($.size({showFiles: true}))
|
||||
.pipe($.sourcemaps.write('./'))
|
||||
.pipe(gulp.dest(options.theme.css))
|
||||
|
|
@ -102,7 +92,6 @@ gulp.task('styles', ['clean:css'], function() {
|
|||
gulp.task('styles:production', ['clean:css'], function() {
|
||||
return gulp.src(sassFiles)
|
||||
.pipe(sass(options.sass).on('error', sass.logError))
|
||||
.pipe($.autoprefixer(options.autoprefixer))
|
||||
.pipe($.size({showFiles: true}))
|
||||
.pipe(cleanCSS({compatibility: 'ie10'}))
|
||||
.pipe(gulp.dest(options.theme.css));
|
||||
|
|
|
|||
|
|
@ -9,21 +9,19 @@
|
|||
{{ if and .Site.Params.piwikTrackerUrl .Site.Params.piwikSiteID }}{{ partialCached "piwik.html" . }}{{ end -}}
|
||||
</head>
|
||||
|
||||
<body class="{{ if $.Param "sidebar" | default true }}one-sidebar sidebar-second{{ else }}no-sidebars{{ end }}">
|
||||
<div class="layout-center">
|
||||
<header class="header" role="banner">
|
||||
<body>
|
||||
<div class="page layout__wrapper{{ if $.Param "sidebar" | default true }} layout__sidebar layout__sidebar-second{{ end }}">
|
||||
<header class="header layout__header layout__full" role="banner">
|
||||
{{ if $.Param "logo" | default true }}<a href="{{ .Site.BaseURL }}" title="Home" rel="home" class="header__logo"><img src="/images/logo.png" alt="Home" class="header__logo-image" /></a>{{ end -}}
|
||||
<h1 class="header__site-name">
|
||||
<a href="{{ .Site.BaseURL }}" title="Home" class="header__site-link" rel="home"><span>{{ .Site.Title }}</span></a>
|
||||
</h1>
|
||||
<div class="header__region region region-header">{{ if $.Param "search" }}{{ partialCached "search.html" . }}{{ end }}</div>
|
||||
<div class="header__region region">{{ if $.Param "search" }}{{ partialCached "search.html" . }}{{ end }}</div>
|
||||
</header>
|
||||
|
||||
<div class="layout-3col layout-swap">
|
||||
{{ block "main" . }}{{ end -}}
|
||||
</div>
|
||||
|
||||
<footer class="footer" role="contentinfo">
|
||||
<footer class="footer layout__footer layout__full" role="contentinfo">
|
||||
{{ if $.Param "feedlinks" }}{{ partial "feedlinks.html" . }}{{ end -}}
|
||||
<p>{{ with $.Param "copyright" }}{{ . | markdownify }}{{ else }}<span>© {{ .Site.Title }}</span>{{ end }}</p>
|
||||
{{ with $.Param "footer" }}<p>{{ . | markdownify }}</p>{{ end }}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
{{ end }}
|
||||
|
||||
{{ define "main" -}}
|
||||
<main class="{{ if $.Param "sidebar" | default true }}layout-3col__left-content{{ else }}layout-3col__full{{ end }}" role="main">
|
||||
<main class="layout__content" role="main">
|
||||
<h1 class="title">{{ .Title }}</h1>
|
||||
{{ $paginator := .Paginate (.Data.Pages) -}}
|
||||
{{ range $paginator.Pages -}}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
{{ end }}
|
||||
|
||||
{{ define "main" -}}
|
||||
<main class="{{ if $.Param "sidebar" | default true }}layout-3col__left-content{{ else }}layout-3col__full{{ end }}" role="main">
|
||||
<main class="layout__content" role="main">
|
||||
<h1 class="title {{ if $.Param "submitted" | default false }}title-submitted{{ end }}">{{ .Title }}</h1>
|
||||
<article class="{{ with .Section }}section-{{ . | urlize }} {{ end }}single-view">
|
||||
<header>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
{{ end }}
|
||||
|
||||
{{ define "main" -}}
|
||||
<main class="{{ if $.Param "sidebar" | default true }}layout-3col__left-content{{ else }}layout-3col__full{{ end }}" role="main">
|
||||
<main class="layout__content" role="main">
|
||||
<article class="{{ with .Section }}section-{{ . | urlize }} {{ end }}single-view">
|
||||
<div class="content">
|
||||
{{ .Content }}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
{{ $currentSection := .Section }}
|
||||
{{ $currentID := .UniqueID }}
|
||||
<div class="layout-swap__top layout-3col__full">
|
||||
<nav class="main-menu" role="navigation">
|
||||
<nav class="main-menu layout__navigation layout__full" role="navigation">
|
||||
<h2 class="visually-hidden">Main menu</h2>
|
||||
<ul class="navbar clearfix">
|
||||
<li><a class="{{ if .IsHome }}active{{ end }}" href="/">{{ i18n "menu_home" }}</a></li>
|
||||
|
|
@ -13,4 +12,3 @@
|
|||
{{ end -}}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1 +1,2 @@
|
|||
<link rel="stylesheet" href="/css/styles.css{{ if $.Param "cacheBustCSS" }}?{{ readFile "/public/css/styles.css" | sha1 }}{{ end }}">
|
||||
<link rel="stylesheet" href="/css/print.css" media="print">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{ $currentID := .UniqueID }}
|
||||
<aside class="layout-3col__right-sidebar" role="complementary">
|
||||
<aside class="sidebar layout__second-sidebar" role="complementary">
|
||||
{{ range $.Site.Home.Sections -}}
|
||||
<section>
|
||||
<h4 class="menu"><a class="{{ if eq $currentID .UniqueID }}active{{ end }}" href="{{ .RelPermalink }}">{{ .Title }}</a></h4>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
"del": "^2.2.2",
|
||||
"eslint": "^3.17.1",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-autoprefixer": "^3.1.1",
|
||||
"gulp-clean-css": "^3.0.3",
|
||||
"gulp-eslint": "^3.0.1",
|
||||
"gulp-if": "^2.0.2",
|
||||
|
|
@ -28,7 +27,6 @@
|
|||
"kss": "^3.0.0-beta.18",
|
||||
"node-sass-import-once": "^1.2.0",
|
||||
"sass-lint": "^1.10.2",
|
||||
"support-for": "^1.0.7",
|
||||
"typey": "^1.1.1"
|
||||
},
|
||||
"engines": {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue