From ab816e432a0c0356d111ce43d31148f68813e44c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rouven=20We=C3=9Fling?= Date: Sun, 31 May 2015 23:33:37 +0200 Subject: [PATCH] Use Autoprefixer for vendor prefixes --- Gemfile | 1 + Gemfile.lock | 7 ++++ config.rb | 6 +++ source/stylesheets/_variables.scss | 3 -- source/stylesheets/screen.css.scss | 62 ++++++++++++------------------ 5 files changed, 39 insertions(+), 40 deletions(-) diff --git a/Gemfile b/Gemfile index 755165b..5d8c021 100644 --- a/Gemfile +++ b/Gemfile @@ -4,6 +4,7 @@ source 'https://rubygems.org' gem 'middleman', '~>3.3.10' gem 'middleman-gh-pages', '~> 0.0.3' gem 'middleman-syntax', '~> 2.0.0' +gem 'middleman-autoprefixer', '~> 2.4.4' gem 'rouge', '~> 1.9.0' gem 'redcarpet', '~> 3.2.2' diff --git a/Gemfile.lock b/Gemfile.lock index ce25947..d29c7d0 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -7,6 +7,9 @@ GEM minitest (~> 5.1) thread_safe (~> 0.1) tzinfo (~> 1.1) + autoprefixer-rails (5.2.0) + execjs + json celluloid (0.16.0) timers (~> 4.0.0) chunky_png (1.3.4) @@ -54,6 +57,9 @@ GEM middleman-sprockets (>= 3.1.2) sass (>= 3.4.0, < 4.0) uglifier (~> 2.5) + middleman-autoprefixer (2.4.4) + autoprefixer-rails (~> 5.2.0) + middleman-core (>= 3.3.3) middleman-core (3.3.11) activesupport (~> 4.1.0) bundler (~> 1.1) @@ -125,6 +131,7 @@ PLATFORMS DEPENDENCIES middleman (~> 3.3.10) + middleman-autoprefixer (~> 2.4.4) middleman-gh-pages (~> 0.0.3) middleman-syntax (~> 2.0.0) rake (~> 10.4.2) diff --git a/config.rb b/config.rb index cd9a362..43bceaa 100644 --- a/config.rb +++ b/config.rb @@ -18,6 +18,12 @@ set :fonts_dir, 'fonts' # Activate the syntax highlighter activate :syntax +activate :autoprefixer do |config| + config.browsers = ['last 2 version', 'Firefox ESR'] + config.cascade = false + config.inline = true +end + # Github pages require relative links activate :relative_assets set :relative_links, true diff --git a/source/stylesheets/_variables.scss b/source/stylesheets/_variables.scss index 4c9bae0..0957678 100644 --- a/source/stylesheets/_variables.scss +++ b/source/stylesheets/_variables.scss @@ -100,13 +100,10 @@ $search-box-border-color: #666; // These settings are probably best left alone. %break-words { - -ms-word-break: break-all; word-break: break-all; /* Non standard for webkit */ word-break: break-word; --webkit-hyphens: auto; - -moz-hyphens: auto; hyphens: auto; } diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss index d64b323..1cbac16 100644 --- a/source/stylesheets/screen.css.scss +++ b/source/stylesheets/screen.css.scss @@ -49,25 +49,17 @@ html, body { } @mixin embossed-bg { - @include background( - linear-gradient(top, - rgba(#000, 0.2), - rgba(#000, 0) 8px), - linear-gradient(bottom, - rgba(#000, 0.2), - rgba(#000, 0) 8px), - linear-gradient(top, - rgba($nav-embossed-border-top, 1), - rgba($nav-embossed-border-top, 0) 1.5px), - linear-gradient(bottom, - rgba($nav-embossed-border-bottom, 1), - rgba($nav-embossed-border-bottom, 0) 1.5px), - $nav-subitem-bg - ); + background: + linear-gradient(to bottom,rgba(#000, 0.2), rgba(#000, 0) 8px), + linear-gradient(to top, rgba(#000, 0.2), rgba(#000, 0) 8px), + linear-gradient(to bottom, rgba($nav-embossed-border-top, 1), rgba($nav-embossed-border-top, 0) 1.5px), + linear-gradient(to top, rgba($nav-embossed-border-bottom, 1), rgba($nav-embossed-border-bottom, 0) 1.5px), + #262626; } .tocify-wrapper { - @include transition(left ease-in-out 0.3s); + transition: left 0.3s ease-in-out; + overflow-y: auto; overflow-x: hidden; position: fixed; @@ -102,7 +94,7 @@ html, body { border-width: 0 0 1px 0; border-color: $search-box-border-color; padding: 6px 0 6px 20px; - @include box-sizing(border-box); + box-sizing: border-box; margin: $nav-v-padding $nav-padding; width: $nav-width - 30; outline: none; @@ -125,13 +117,13 @@ html, body { .search-results { margin-top: 0; - @include box-sizing(border-box); + box-sizing: border-box; height: 0; overflow-y: auto; overflow-x: hidden; - @include transition-property(height margin); - @include transition-duration(180ms); - @include transition-timing-function(ease-in-out); + transition-property: height, margin; + transition-duration: 180ms; + transition-timing-function: ease-in-out; &.visible { height: 30%; margin-bottom: 1em; @@ -175,14 +167,14 @@ html, body { li { color: $nav-text; - @include transition-property('background'); - @include transition-timing-function('linear'); - @include transition-duration(230ms); + transition-property: background; + transition-timing-function: linear; + transition-duration: 230ms; } // This is the currently selected ToC entry .tocify-focus { - @include box-shadow(0px 1px 0px $nav-active-shadow); + box-shadow: 0px 1px 0px $nav-active-shadow; background-color: $nav-active-bg; color: $nav-active-text; } @@ -235,8 +227,8 @@ html, body { $side-pad: $main-padding / 2 - 8px; padding: $side-pad $side-pad $side-pad; background-color: rgba($main-bg, 0.7); - @include transform-origin(0, 0); - @include transform(rotate(-90deg) translate(-100%, 0)); + transform-origin: 0 0; + transform: rotate(-90deg) translate(-100%, 0); border-radius: 0 0 0 5px; } padding: 0 1.5em 5em 0; // increase touch size area @@ -255,7 +247,7 @@ html, body { vertical-align: bottom; } - @include transition(left ease-in-out 0.3s); + transition: left 0.3s ease-in-out; &:hover { opacity: 1; } &.open {left: $nav-width} @@ -346,7 +338,7 @@ html, body { &>h1, &>h2, &>h3, &>h4, &>h5, &>h6, &>p, &>table, &>ul, &>ol, &>aside, &>dl { margin-right: $examples-width; padding: 0 $main-padding; - @include box-sizing(border-box); + box-sizing: border-box; display: block; @include text-shadow($main-embossed-text-shadow); @@ -371,9 +363,7 @@ html, body { margin-bottom: $h1-margin-bottom; margin-top: 2em; border-top: 1px solid #ddd; - @include background-image( - linear-gradient(top, #fff, #f9f9f9) - ); + background-image: linear-gradient(to bottom, #fff, #f9f9f9); } h1:first-child, div:first-child + h1 { @@ -389,9 +379,7 @@ html, body { border-top: 1px solid #ccc; padding-top: 1.2em; padding-bottom: 1.2em; - @include background-image( - linear-gradient(top, rgba(#fff,0.4), rgba(#fff, 0)) - ); + background-image: linear-gradient(to bottom, rgba(#fff, 0.4), rgba(#fff, 0)); } // h2s right after h1s should bump right up @@ -525,7 +513,7 @@ html, body { border-radius: 4px; border: 1px solid #F7E633; @include text-shadow(1px 1px 0 #666); - @include background(linear-gradient(bottom right, #F7E633 0%, #F1D32F 100%)); + background: linear-gradient(to top left, #F7E633 0%, #F1D32F 100%); } } @@ -546,7 +534,7 @@ html, body { float:right; clear:right; - @include box-sizing(border-box); + box-sizing: border-box; @include text-shadow(0px 1px 2px rgba(0,0,0,0.4)); @extend %right-col;