From dcbdd6a8ffa91a70e77e73bac8d047b650e01ea5 Mon Sep 17 00:00:00 2001 From: Mitchell Hashimoto Date: Mon, 16 Sep 2013 15:10:17 -0700 Subject: [PATCH] website/www: update CSS to work with latest middleman --- website/www/Gemfile | 6 +- website/www/Gemfile.lock | 108 +++--- website/www/source/stylesheets/_base.less | 326 +++++++++++++++++ .../{components.less => _components.less} | 0 .../stylesheets/{footer.less => _footer.less} | 0 ...media-queries.less => _media-queries.less} | 0 .../stylesheets/{mixins.less => _mixins.less} | 0 .../{modules.less => _modules.less} | 0 .../stylesheets/{nav.less => _nav.less} | 0 .../stylesheets/{pages.less => _pages.less} | 0 .../{sidebar.less => _sidebar.less} | 0 .../stylesheets/{type.less => _type.less} | 0 .../{variables.less => _variables.less} | 0 website/www/source/stylesheets/base.less | 330 ------------------ website/www/source/stylesheets/vagrantup.less | 22 +- 15 files changed, 380 insertions(+), 412 deletions(-) create mode 100644 website/www/source/stylesheets/_base.less rename website/www/source/stylesheets/{components.less => _components.less} (100%) rename website/www/source/stylesheets/{footer.less => _footer.less} (100%) rename website/www/source/stylesheets/{media-queries.less => _media-queries.less} (100%) rename website/www/source/stylesheets/{mixins.less => _mixins.less} (100%) rename website/www/source/stylesheets/{modules.less => _modules.less} (100%) rename website/www/source/stylesheets/{nav.less => _nav.less} (100%) rename website/www/source/stylesheets/{pages.less => _pages.less} (100%) rename website/www/source/stylesheets/{sidebar.less => _sidebar.less} (100%) rename website/www/source/stylesheets/{type.less => _type.less} (100%) rename website/www/source/stylesheets/{variables.less => _variables.less} (100%) delete mode 100644 website/www/source/stylesheets/base.less diff --git a/website/www/Gemfile b/website/www/Gemfile index 7b0604c85..0290d5853 100644 --- a/website/www/Gemfile +++ b/website/www/Gemfile @@ -1,10 +1,10 @@ source 'https://rubygems.org' gem "less", "~> 2.2.2" -gem "middleman", "~> 3.0.6" -gem "middleman-minify-html", "~> 3.0.0" +gem "middleman", "~> 3.1.5" +gem "middleman-minify-html", "~> 3.1.1" gem "rack-contrib", "~> 1.1.0" -gem "redcarpet", "~> 2.2.2" +gem "redcarpet", "~> 3.0.0" gem "therubyracer", "~> 0.12.0" gem "thin", "~> 1.5.0" diff --git a/website/www/Gemfile.lock b/website/www/Gemfile.lock index a831bb2e2..ccda21f54 100644 --- a/website/www/Gemfile.lock +++ b/website/www/Gemfile.lock @@ -1,18 +1,14 @@ GEM remote: https://rubygems.org/ specs: - POpen4 (0.1.4) - Platform (>= 0.4.0) - open4 - Platform (0.4.0) - activesupport (3.2.13) - i18n (= 0.6.1) + activesupport (3.2.14) + i18n (~> 0.6, >= 0.6.4) multi_json (~> 1.0) chunky_png (1.2.8) coffee-script (2.2.0) coffee-script-source execjs - coffee-script-source (1.3.3) + coffee-script-source (1.6.3) commonjs (0.2.7) compass (0.12.2) chunky_png (~> 1.2) @@ -22,51 +18,44 @@ GEM eventmachine (1.0.3) execjs (1.4.0) multi_json (~> 1.0) + ffi (1.9.0) fssm (0.2.10) haml (4.0.3) tilt highline (1.6.19) hike (1.2.3) - htmlcompressor (0.0.7) - yui-compressor (~> 0.9.6) - http_router (0.10.2) - rack (>= 1.0.0) - url_mount (~> 0.2.1) - i18n (0.6.1) + i18n (0.6.5) + kramdown (1.1.0) less (2.2.2) commonjs (~> 0.2.6) libv8 (3.16.14.3) - listen (0.7.3) - maruku (0.6.1) - syntax (>= 1.0.0) - middleman (3.0.14) - middleman-core (= 3.0.14) - middleman-more (= 3.0.14) - middleman-sprockets (~> 3.1.0) - middleman-core (3.0.14) - activesupport (~> 3.2.6) - bundler (~> 1.1) - listen (~> 0.7.3) - rack (~> 1.4.1) - rack-test (~> 0.6.1) - rb-fsevent (~> 0.9.3) - thor (~> 0.15.4) - tilt (~> 1.3.6) - middleman-minify-html (3.0.0) - htmlcompressor - middleman-core (~> 3.0.0) - middleman-more (3.0.14) + listen (1.2.3) + rb-fsevent (>= 0.9.3) + rb-inotify (>= 0.9) + rb-kqueue (>= 0.2) + middleman (3.1.5) coffee-script (~> 2.2.0) - coffee-script-source (~> 1.3.3) compass (>= 0.12.2) execjs (~> 1.4.0) haml (>= 3.1.6) - i18n (~> 0.6.0, < 0.6.2) - maruku (~> 0.6.0) - middleman-core (= 3.0.14) - padrino-helpers (= 0.10.7) + kramdown (~> 1.1.0) + middleman-core (= 3.1.5) + middleman-more (= 3.1.5) + middleman-sprockets (>= 3.1.2) sass (>= 3.1.20) - uglifier (~> 1.2.6) + uglifier (~> 2.1.0) + middleman-core (3.1.5) + activesupport (~> 3.2.6) + bundler (~> 1.1) + i18n (~> 0.6.1) + listen (~> 1.2.2) + rack (>= 1.4.5) + rack-test (~> 0.6.1) + thor (>= 0.15.2, < 2.0) + tilt (~> 1.3.6) + middleman-minify-html (3.1.1) + middleman-core (~> 3.0) + middleman-more (3.1.5) middleman-sprockets (3.1.4) middleman-core (>= 3.0.14) middleman-more (>= 3.0.14) @@ -74,31 +63,19 @@ GEM sprockets-helpers (~> 1.0.0) sprockets-sass (~> 1.0.0) multi_json (1.8.0) - open4 (1.3.0) - padrino-core (0.10.7) - activesupport (~> 3.2.0) - http_router (~> 0.10.2) - sinatra (~> 1.3.1) - thor (~> 0.15.2) - tilt (~> 1.3.0) - padrino-helpers (0.10.7) - i18n (~> 0.6) - padrino-core (= 0.10.7) - rack (1.4.5) + rack (1.5.2) rack-contrib (1.1.0) rack (>= 0.9.1) - rack-protection (1.5.0) - rack rack-test (0.6.2) rack (>= 1.0) rb-fsevent (0.9.3) - redcarpet (2.2.2) + rb-inotify (0.9.2) + ffi (>= 0.5.0) + rb-kqueue (0.2.0) + ffi (>= 0.5.0) + redcarpet (3.0.0) ref (1.0.5) sass (3.2.10) - sinatra (1.3.6) - rack (~> 1.4) - rack-protection (~> 1.3) - tilt (~> 1.3, >= 1.3.3) sprockets (2.10.0) hike (~> 1.2) multi_json (~> 1.0) @@ -109,7 +86,6 @@ GEM sprockets-sass (1.0.1) sprockets (~> 2.0) tilt (~> 1.1) - syntax (1.0.0) therubyracer (0.12.0) libv8 (~> 3.16.14.0) ref @@ -117,15 +93,11 @@ GEM daemons (>= 1.0.9) eventmachine (>= 0.12.6) rack (>= 1.0.0) - thor (0.15.4) + thor (0.18.1) tilt (1.3.7) - uglifier (1.2.7) + uglifier (2.1.2) execjs (>= 0.3.0) - multi_json (~> 1.3) - url_mount (0.2.1) - rack - yui-compressor (0.9.6) - POpen4 (>= 0.1.4) + multi_json (~> 1.0, >= 1.0.2) PLATFORMS ruby @@ -133,9 +105,9 @@ PLATFORMS DEPENDENCIES highline (~> 1.6.15) less (~> 2.2.2) - middleman (~> 3.0.6) - middleman-minify-html (~> 3.0.0) + middleman (~> 3.1.5) + middleman-minify-html (~> 3.1.1) rack-contrib (~> 1.1.0) - redcarpet (~> 2.2.2) + redcarpet (~> 3.0.0) therubyracer (~> 0.12.0) thin (~> 1.5.0) diff --git a/website/www/source/stylesheets/_base.less b/website/www/source/stylesheets/_base.less new file mode 100644 index 000000000..f37d8c002 --- /dev/null +++ b/website/www/source/stylesheets/_base.less @@ -0,0 +1,326 @@ +html { + font-size: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + text-rendering: optimizeLegibility; + -webkit-tap-highlight-color: transparent; +} + +body { + font-family: @sans-serif-stack; + font-size: @base-font-size; + line-height: @base-line-height; + color: @black; + background-color: @white; + letter-spacing: 2px; + .museo-sans-regular; +} + +.wrapper { + margin-top: 80px; +} + +.container { + z-index: 999; //keep content on top + position: relative; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; + padding: 0; + color: inherit; + text-rendering: optimizelegibility; + .museo-sans-bold; +} + +h1 { + @font-size: 70px; + font-size: @font-size; + line-height: 80px; + letter-spacing: 3px; + + span { + font-size: @headline-span-size; + display: block; + } + + &.all-caps { + text-transform: uppercase; + text-align: center; + font-size: 40px; + } +} + +h2 { + @font-size: 30px; + font-size: @font-size; + line-height: 35px; +} + +h3 { + @font-size: 30px; + font-size: @font-size; + line-height: @font-size; +} + +h4 { + @font-size: 24px; + font-size: @font-size; + line-height: @font-size; +} + +h5 { + @font-size: 20px; + font-size: @font-size; + line-height: @font-size; +} + +h6 { + @font-size: 12px; + font-size: @font-size; + line-height: @font-size; +} + +p { + letter-spacing: 1px; + line-height: 32px; + + a { + color: @docs-blue; + text-decoration: none; + border-bottom: 1px solid @docs-blue; + + &:hover { + text-decoration: none; + color: darken(@blue, 10%); + border-bottom: 1px solid darken(@blue, 10%); + } + } +} + +a { + color: inherit; + text-decoration: none; + + + &:hover { + text-decoration: none; + color: @purple; + .animate-text-color; + } + + &:active { + color: @blue; + } + + &:visited { + + } +} + +ul { + +} + +li { + line-height: @base-line-height; +} + +blockquote { + border: none; + margin: 60px; + + p { // blockquote p + font-size: @base-font-size * 2; + line-height: @base-line-height * 2; + font-style: italic; + } +} + +strong { + .museo-sans-bold; +} + +em { + .museo-sans-regular-italic; +} + +br { + display:block; + line-height: (@baseline * 2); +} + +pre, +code { + font-family: @mono-stack; +} + +code { + font-size: inherit; +} + +pre { + border: none; + font-size: @base-font-size; + background: @black; + color: @white; + padding: 20px; + line-height: @base-line-height; + + span { + color: @code-highlight-text; + } +} + +hr { + +} + +.vr { + width: 2px; + height: 100%; +} + +form { + +} + +input { + letter-spacing: 3px; + + &:focus { + outline: none; + } +} + +::-webkit-input-placeholder { + overflow: visible; + padding-top: 3px; + color: @light-gray-text; +} + +input:-moz-placeholder { + overflow: visible; + padding-top: 3px; + color: @light-gray-text; +} + + +/* type and styles */ +.meta, +.legal, +.date { + color: @medium-gray-text; + line-height: @base-line-height; + .museo-sans-regular; +} + +.date { + text-transform: uppercase; +} + +.button { + color: @white; + text-align: center; + background-color: @primary-button-color; + display: block; + padding: 15px 0; + margin-top: 20px !important; + text-transform: uppercase; + font-size: 25px; + letter-spacing: 5px; + .museo-sans-light; + .rounded; + .hover; + + &.inline-button { + background-color: @vagrant-blue; + padding: 5px 20px; + color: @white !important; + font-size: 15px; + letter-spacing: 1px; + .rounded; + + a, + a:hover { + color: @white; + } + } + + &.white-button { + background: fade(@white, 20%); + + &:hover { + background: fade(@white, 30%); + } + } + + &.secondary-button { + background: @light-gray; + + &:hover { + background: @purple; + } + } + + &.with-carat span { + margin-right: -10px; //recenter text if there's a carat after text + + } + + span { + // button text styles can go here + } + + &:hover { + background-color: @purple; + .animate-background-color; + } + + &:active { + + } + + &.disabled { + background-color: @light-gray-background; + } + +} + +a.read-more { + color: @blue; + + &:hover { + color: darken(@blue, 10%); + } +} + +// misc. styles +.loading { + text-align: center; + font-size: @base-font-size; + text-transform: uppercase; + letter-spacing: 5px; + color: @medium-gray-text; + padding: 30px 0 20px; +} + +.pinned { + position:fixed; +} + +.footnote { + font-size: 14px; +} + +.anchor { + display: block; + position: relative; + top: -80px; + visibility: hidden; +} diff --git a/website/www/source/stylesheets/components.less b/website/www/source/stylesheets/_components.less similarity index 100% rename from website/www/source/stylesheets/components.less rename to website/www/source/stylesheets/_components.less diff --git a/website/www/source/stylesheets/footer.less b/website/www/source/stylesheets/_footer.less similarity index 100% rename from website/www/source/stylesheets/footer.less rename to website/www/source/stylesheets/_footer.less diff --git a/website/www/source/stylesheets/media-queries.less b/website/www/source/stylesheets/_media-queries.less similarity index 100% rename from website/www/source/stylesheets/media-queries.less rename to website/www/source/stylesheets/_media-queries.less diff --git a/website/www/source/stylesheets/mixins.less b/website/www/source/stylesheets/_mixins.less similarity index 100% rename from website/www/source/stylesheets/mixins.less rename to website/www/source/stylesheets/_mixins.less diff --git a/website/www/source/stylesheets/modules.less b/website/www/source/stylesheets/_modules.less similarity index 100% rename from website/www/source/stylesheets/modules.less rename to website/www/source/stylesheets/_modules.less diff --git a/website/www/source/stylesheets/nav.less b/website/www/source/stylesheets/_nav.less similarity index 100% rename from website/www/source/stylesheets/nav.less rename to website/www/source/stylesheets/_nav.less diff --git a/website/www/source/stylesheets/pages.less b/website/www/source/stylesheets/_pages.less similarity index 100% rename from website/www/source/stylesheets/pages.less rename to website/www/source/stylesheets/_pages.less diff --git a/website/www/source/stylesheets/sidebar.less b/website/www/source/stylesheets/_sidebar.less similarity index 100% rename from website/www/source/stylesheets/sidebar.less rename to website/www/source/stylesheets/_sidebar.less diff --git a/website/www/source/stylesheets/type.less b/website/www/source/stylesheets/_type.less similarity index 100% rename from website/www/source/stylesheets/type.less rename to website/www/source/stylesheets/_type.less diff --git a/website/www/source/stylesheets/variables.less b/website/www/source/stylesheets/_variables.less similarity index 100% rename from website/www/source/stylesheets/variables.less rename to website/www/source/stylesheets/_variables.less diff --git a/website/www/source/stylesheets/base.less b/website/www/source/stylesheets/base.less deleted file mode 100644 index 983b80f0a..000000000 --- a/website/www/source/stylesheets/base.less +++ /dev/null @@ -1,330 +0,0 @@ -html { - font-size: 100%; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - text-rendering: optimizeLegibility; - -webkit-tap-highlight-color: transparent; -} - -body { - font-family: @sans-serif-stack; - font-size: @base-font-size; - line-height: @base-line-height; - color: @black; - background-color: @white; - letter-spacing: 2px; - .museo-sans-regular; -} - -.wrapper { -margin-top: 80px; -} - -.container { -z-index: 999; //keep content on top -position: relative; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - margin: 0; - padding: 0; - color: inherit; - text-rendering: optimizelegibility; - .museo-sans-bold; -} - - h1 { - @font-size: 70px; - font-size: @font-size; - line-height: 80px; - letter-spacing: 3px; - - span { - font-size: @headline-span-size; - display: block; - } - - &.all-caps { - text-transform: uppercase; - text-align: center; - font-size: 40px; - } - } - - h2 { - @font-size: 30px; - font-size: @font-size; - line-height: 35px; - } - - h3 { - @font-size: 30px; - font-size: @font-size; - line-height: @font-size; - } - - h4 { - @font-size: 24px; - font-size: @font-size; - line-height: @font-size; - } - - h5 { - @font-size: 20px; - font-size: @font-size; - line-height: @font-size; - } - - h6 { - @font-size: 12px; - font-size: @font-size; - line-height: @font-size; - } - -p { - letter-spacing: 1px; - line-height: 32px; - - a { - color: @docs-blue; - text-decoration: none; - border-bottom: 1px solid @docs-blue; - - &:hover { - text-decoration: none; - color: darken(@blue, 10%); - border-bottom: 1px solid darken(@blue, 10%); - } - } -} - -a { - color: inherit; - text-decoration: none; - - - &:hover { - text-decoration: none; - color: @purple; - .animate-text-color; - } - - &:active { - color: @blue; - } - - &:visited { - - } -} - -ul { - -} - -li { -line-height: @base-line-height; -} - -blockquote { - border: none; - margin: 60px; - - p { // blockquote p - font-size: @base-font-size * 2; - line-height: @base-line-height * 2; - font-style: italic; - } -} - -strong { -.museo-sans-bold; -} - -em { -.museo-sans-regular-italic; -} - -br { -display:block; -line-height: (@baseline * 2); -} - -pre, -code { -font-family: @mono-stack; -} - -code { -font-size: inherit; -} - -pre { -border: none; -font-size: @base-font-size; -background: @black; -color: @white; -padding: 20px; -line-height: @base-line-height; - - span { - color: @code-highlight-text; - } -} - -hr { - -} - -.vr { -width: 2px; -height: 100%; -} - -form { - -} - -input { -letter-spacing: 3px; - - &:focus { - outline: none; - } -} - - ::-webkit-input-placeholder { - overflow: visible; - padding-top: 3px; - color: @light-gray-text; - } - - input:-moz-placeholder { - overflow: visible; - padding-top: 3px; - color: @light-gray-text; - } - - -/* type and styles */ -::selection, ::-moz-selection { - background: ; /* highlight color */ -} - -.meta, -.legal, -.date { -color: @medium-gray-text; -line-height: @base-line-height; -.museo-sans-regular; -} - - .date { - text-transform: uppercase; - } - -.button { -color: @white; -text-align: center; -background-color: @primary-button-color; -display: block; -padding: 15px 0; -margin-top: 20px !important; -text-transform: uppercase; -font-size: 25px; -letter-spacing: 5px; -.museo-sans-light; -.rounded; -.hover; - - &.inline-button { - background-color: @vagrant-blue; - padding: 5px 20px; - color: @white !important; - font-size: 15px; - letter-spacing: 1px; - .rounded; - - a, - a:hover { - color: @white; - } -} - -&.white-button { - background: fade(@white, 20%); - - &:hover { - background: fade(@white, 30%); - } -} - -&.secondary-button { - background: @light-gray; - - &:hover { - background: @purple; - } -} - -&.with-carat span { - margin-right: -10px; //recenter text if there's a carat after text - -} - -span { - // button text styles can go here -} - -&:hover { - background-color: @purple; - .animate-background-color; -} - -&:active { - -} - -&.disabled { - background-color: @light-gray-background; -} - -} - -a.read-more { - color: @blue; - - &:hover { - color: darken(@blue, 10%); - } -} - -// misc. styles -.loading { - text-align: center; - font-size: @base-font-size; - text-transform: uppercase; - letter-spacing: 5px; - color: @medium-gray-text; - padding: 30px 0 20px; -} - -.pinned { - position:fixed; -} - -.footnote { - font-size: 14px; -} - -.anchor { - display: block; - position: relative; - top: -80px; - visibility: hidden; -} diff --git a/website/www/source/stylesheets/vagrantup.less b/website/www/source/stylesheets/vagrantup.less index 29b1a6597..09d06a9cd 100644 --- a/website/www/source/stylesheets/vagrantup.less +++ b/website/www/source/stylesheets/vagrantup.less @@ -4,14 +4,14 @@ v a g r a n t u p \|/\|/\|/\|/\|/\|/ */ -@import 'variables'; -@import 'type'; -@import 'mixins'; -@import 'base'; -@import 'nav'; -@import 'components'; -@import 'modules'; -@import 'sidebar'; -@import 'pages'; -@import 'footer'; -@import 'media-queries'; +@import '_variables'; +@import '_type'; +@import '_mixins'; +@import '_base'; +@import '_nav'; +@import '_components'; +@import '_modules'; +@import '_sidebar'; +@import '_pages'; +@import '_footer'; +@import '_media-queries';