From fb63d49640ab2fff2679ae62d82fd5e88595e385 Mon Sep 17 00:00:00 2001 From: Jake Howard Date: Sat, 14 May 2016 12:27:05 +0100 Subject: [PATCH] Create scss build pipeline --- package.json | 4 +- scripts/build-less.sh | 22 -- scripts/build-scss.sh | 13 + theme/static/src/scss/creative.scss | 476 ++++++++++++++++++++++++++++ theme/static/src/scss/index.scss | 6 +- 5 files changed, 494 insertions(+), 27 deletions(-) delete mode 100755 scripts/build-less.sh create mode 100644 scripts/build-scss.sh create mode 100644 theme/static/src/scss/creative.scss diff --git a/package.json b/package.json index ac25bfe..381f761 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "lint": "eslint 'static/src/js/'", "build-js": "./scripts/build-js.sh", "create-build-dirs": "mkdir -p static/build/js/lib static/build/fonts static/build/css static/build/img", - "build-scss": "node-sass theme/static/src/scss/index.scss theme/static/build/css/index.css", + "build-scss": "bash scripts/build-scss.sh", "test": "npm run lint", "spellcheck": "mdspell --en-gb -ranx \"templates/**/*.*\"" }, @@ -16,7 +16,7 @@ }, "dependencies": { "animate.css": "=3.5.1", - "bootstrap": "=3.3.6", + "bootstrap-sass": "=3.3.6", "ionicons": "=3.0.0", "jquery": "=2.2.3", "underscore": "=1.8.3" diff --git a/scripts/build-less.sh b/scripts/build-less.sh deleted file mode 100755 index d9f27fa..0000000 --- a/scripts/build-less.sh +++ /dev/null @@ -1,22 +0,0 @@ -#!/usr/bin/env bash - -set -e - -if [[ $BUILD_PRODUCTION ]] -then - echo ">>> WARNING: Building in Production Mode!" -fi - -echo ">> Building LESS..." -lessc --silent static/src/less/style.less static/build/css/style.css - -echo ">> Post-Processing..." -postcss -u autoprefixer -o static/build/css/style.css static/build/css/style.css - -if [[ $BUILD_PRODUCTION ]] -then - echo ">> Compressing LESS..." - cleancss -d --s0 -o static/build/css/style.css static/build/css/style.css -fi - -echo "> LESS Built!" diff --git a/scripts/build-scss.sh b/scripts/build-scss.sh new file mode 100644 index 0000000..250ec40 --- /dev/null +++ b/scripts/build-scss.sh @@ -0,0 +1,13 @@ +#!/usr/bin/env bash + +set -e + +mkdir -p theme/static/src/scss/css + +# scss can't import css, so copy them into src dir and change the extension! +cp node_modules/animate.css/animate.css theme/static/src/scss/css/animate.scss + +node-sass theme/static/src/scss/index.scss theme/static/build/css/index.css + +# Cleanup +rm -rf theme/static/src/scss/css diff --git a/theme/static/src/scss/creative.scss b/theme/static/src/scss/creative.scss new file mode 100644 index 0000000..bf89822 --- /dev/null +++ b/theme/static/src/scss/creative.scss @@ -0,0 +1,476 @@ +/*! + * Start Bootstrap - Creative Bootstrap Theme (http://startbootstrap.com) + * Code licensed under the Apache License v2.0. + * For details, see http://www.apache.org/licenses/LICENSE-2.0. + */ + +html, +body { + width: 100%; + height: 100%; +} + +body { + font-family: Merriweather,'Helvetica Neue',Arial,sans-serif; +} + +hr { + max-width: 50px; + border-color: #f05f40; + border-width: 3px; +} + +hr.light { + border-color: #fff; +} + +a { + color: #f05f40; + -webkit-transition: all .35s; + -moz-transition: all .35s; + transition: all .35s; +} + +a:hover, +a:focus { + color: #eb3812; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif; +} + +p { + margin-bottom: 20px; + font-size: 16px; + line-height: 1.5; +} + +.bg-primary { + background-color: #f05f40; +} + +.bg-dark { + color: #fff; + background-color: #222; +} + +.text-faded { + color: rgba(255,255,255,.7); +} + +section { + padding: 100px 0; +} + +aside { + padding: 50px 0; +} + +.no-padding { + padding: 0; +} + +.navbar-default { + border-color: rgba(34,34,34,.05); + font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif; + background-color: #fff; + -webkit-transition: all .35s; + -moz-transition: all .35s; + transition: all .35s; +} + +.navbar-default .navbar-header .navbar-brand { + text-transform: uppercase; + font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif; + font-weight: 700; + color: #f05f40; +} + +.navbar-default .navbar-header .navbar-brand:hover, +.navbar-default .navbar-header .navbar-brand:focus { + color: #eb3812; +} + +.navbar-default .nav > li>a, +.navbar-default .nav>li>a:focus { + text-transform: uppercase; + font-size: 13px; + font-weight: 700; + color: #222; +} + +.navbar-default .nav > li>a:hover, +.navbar-default .nav>li>a:focus:hover { + color: #f05f40; +} + +.navbar-default .nav > li.active>a, +.navbar-default .nav>li.active>a:focus { + color: #f05f40!important; + background-color: transparent; +} + +.navbar-default .nav > li.active>a:hover, +.navbar-default .nav>li.active>a:focus:hover { + background-color: transparent; +} + +@media(min-width:768px) { + .navbar-default { + border-color: rgba(255,255,255,.3); + background-color: transparent; + } + + .navbar-default .navbar-header .navbar-brand { + color: rgba(255,255,255,.7); + } + + .navbar-default .navbar-header .navbar-brand:hover, + .navbar-default .navbar-header .navbar-brand:focus { + color: #fff; + } + + .navbar-default .nav > li>a, + .navbar-default .nav>li>a:focus { + color: rgba(255,255,255,.7); + } + + .navbar-default .nav > li>a:hover, + .navbar-default .nav>li>a:focus:hover { + color: #fff; + } + + .navbar-default.affix { + border-color: rgba(34,34,34,.05); + background-color: #fff; + } + + .navbar-default.affix .navbar-header .navbar-brand { + font-size: 14px; + color: #f05f40; + } + + .navbar-default.affix .navbar-header .navbar-brand:hover, + .navbar-default.affix .navbar-header .navbar-brand:focus { + color: #eb3812; + } + + .navbar-default.affix .nav > li>a, + .navbar-default.affix .nav>li>a:focus { + color: #222; + } + + .navbar-default.affix .nav > li>a:hover, + .navbar-default.affix .nav>li>a:focus:hover { + color: #f05f40; + } +} + +header { + position: relative; + width: 100%; + min-height: auto; + text-align: center; + color: #fff; + background-image: url(../img/header.jpg); + background-position: center; + -webkit-background-size: cover; + -moz-background-size: cover; + background-size: cover; + -o-background-size: cover; +} + +header .header-content { + position: relative; + width: 100%; + padding: 100px 15px; + text-align: center; +} + +header .header-content .header-content-inner h1 { + margin-top: 0; + margin-bottom: 0; + text-transform: uppercase; + font-weight: 700; +} + +header .header-content .header-content-inner hr { + margin: 30px auto; +} + +header .header-content .header-content-inner p { + margin-bottom: 50px; + font-size: 16px; + font-weight: 300; + color: rgba(255,255,255,.7); +} + +@media(min-width:768px) { + header { + min-height: 100%; + } + + header .header-content { + position: absolute; + top: 50%; + padding: 0 50px; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + } + + header .header-content .header-content-inner { + margin-right: auto; + margin-left: auto; + max-width: 1000px; + } + + header .header-content .header-content-inner p { + margin-right: auto; + margin-left: auto; + max-width: 80%; + font-size: 18px; + } +} + +.section-heading { + margin-top: 0; +} + +.service-box { + margin: 50px auto 0; + max-width: 400px; +} + +@media(min-width:992px) { + .service-box { + margin: 20px auto 0; + } +} + +.service-box p { + margin-bottom: 0; +} + +.portfolio-box { + display: block; + position: relative; + margin: 0 auto; + max-width: 650px; +} + +.portfolio-box .portfolio-box-caption { + display: block; + position: absolute; + bottom: 0; + width: 100%; + height: 100%; + text-align: center; + color: #fff; + opacity: 0; + background: rgba(240,95,64,.9); + -webkit-transition: all .35s; + -moz-transition: all .35s; + transition: all .35s; +} + +.portfolio-box .portfolio-box-caption .portfolio-box-caption-content { + position: absolute; + top: 50%; + width: 100%; + text-align: center; + transform: translateY(-50%); +} + +.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category, +.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name { + padding: 0 15px; + font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif; +} + +.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category { + text-transform: uppercase; + font-size: 14px; + font-weight: 600; +} + +.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name { + font-size: 18px; +} + +.portfolio-box:hover .portfolio-box-caption { + opacity: 1; +} + +@media(min-width:768px) { + .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category { + font-size: 16px; + } + + .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name { + font-size: 22px; + } +} + +.call-to-action h2 { + margin: 0 auto 20px; +} + +.text-primary { + color: #f05f40; +} + +.no-gutter > [class*=col-] { + padding-right: 0; + padding-left: 0; +} + +.btn-default { + border-color: #fff; + color: #222; + background-color: #fff; + -webkit-transition: all .35s; + -moz-transition: all .35s; + transition: all .35s; +} + +.btn-default:hover, +.btn-default:focus, +.btn-default.focus, +.btn-default:active, +.btn-default.active, +.open > .dropdown-toggle.btn-default { + border-color: #ededed; + color: #222; + background-color: #f2f2f2; +} + +.btn-default:active, +.btn-default.active, +.open > .dropdown-toggle.btn-default { + background-image: none; +} + +.btn-default.disabled, +.btn-default[disabled], +fieldset[disabled] .btn-default, +.btn-default.disabled:hover, +.btn-default[disabled]:hover, +fieldset[disabled] .btn-default:hover, +.btn-default.disabled:focus, +.btn-default[disabled]:focus, +fieldset[disabled] .btn-default:focus, +.btn-default.disabled.focus, +.btn-default[disabled].focus, +fieldset[disabled] .btn-default.focus, +.btn-default.disabled:active, +.btn-default[disabled]:active, +fieldset[disabled] .btn-default:active, +.btn-default.disabled.active, +.btn-default[disabled].active, +fieldset[disabled] .btn-default.active { + border-color: #fff; + background-color: #fff; +} + +.btn-default .badge { + color: #fff; + background-color: #222; +} + +.btn-primary { + border-color: #f05f40; + color: #fff; + background-color: #f05f40; + -webkit-transition: all .35s; + -moz-transition: all .35s; + transition: all .35s; +} + +.btn-primary:hover, +.btn-primary:focus, +.btn-primary.focus, +.btn-primary:active, +.btn-primary.active, +.open > .dropdown-toggle.btn-primary { + border-color: #ed431f; + color: #fff; + background-color: #ee4b28; +} + +.btn-primary:active, +.btn-primary.active, +.open > .dropdown-toggle.btn-primary { + background-image: none; +} + +.btn-primary.disabled, +.btn-primary[disabled], +fieldset[disabled] .btn-primary, +.btn-primary.disabled:hover, +.btn-primary[disabled]:hover, +fieldset[disabled] .btn-primary:hover, +.btn-primary.disabled:focus, +.btn-primary[disabled]:focus, +fieldset[disabled] .btn-primary:focus, +.btn-primary.disabled.focus, +.btn-primary[disabled].focus, +fieldset[disabled] .btn-primary.focus, +.btn-primary.disabled:active, +.btn-primary[disabled]:active, +fieldset[disabled] .btn-primary:active, +.btn-primary.disabled.active, +.btn-primary[disabled].active, +fieldset[disabled] .btn-primary.active { + border-color: #f05f40; + background-color: #f05f40; +} + +.btn-primary .badge { + color: #f05f40; + background-color: #fff; +} + +.btn { + border: 0; + border-radius: 300px; + text-transform: uppercase; + font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif; + font-weight: 700; +} + +.btn-xl { + padding: 15px 30px; +} + +::-moz-selection { + text-shadow: none; + color: #fff; + background: #222; +} + +::selection { + text-shadow: none; + color: #fff; + background: #222; +} + +img::selection { + color: #fff; + background: 0 0; +} + +img::-moz-selection { + color: #fff; + background: 0 0; +} + +body { + webkit-tap-highlight-color: #222; +} diff --git a/theme/static/src/scss/index.scss b/theme/static/src/scss/index.scss index f74bff6..a8a260d 100644 --- a/theme/static/src/scss/index.scss +++ b/theme/static/src/scss/index.scss @@ -1,3 +1,3 @@ -body { - background-color: orange; -} +@import "node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss"; +@import "css/animate"; +@import "creative";