diff --git a/theme/static/src/scss/creative.scss b/theme/static/src/scss/creative.scss deleted file mode 100644 index bf89822..0000000 --- a/theme/static/src/scss/creative.scss +++ /dev/null @@ -1,476 +0,0 @@ -/*! - * 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/creative/creative.scss b/theme/static/src/scss/creative/creative.scss new file mode 100644 index 0000000..41986af --- /dev/null +++ b/theme/static/src/scss/creative/creative.scss @@ -0,0 +1,318 @@ +@import "mixins"; + +// Global Components +html, +body { + height: 100%; + width: 100%; + font-family: $font-family-base; + -webkit-tap-highlight-color: $brand-grey-dark; +} + +hr { + border-color: $brand-orange; + border-width: 3px; + max-width: 50px; +} + +hr.light { + border-color: white; +} + +a { + @extend .transition-all; + color: $brand-orange; + &:hover, + &:focus { + color: $brand-orange-dark; + } +} + +h1, h2, h3, h4, h5, h6 { + font-family: $font-family-heading; +} + +p { + font-size: 16px; + line-height: 1.5; + margin-bottom: 20px; +} + +.bg-primary { + background-color: $brand-orange; +} + +.bg-dark { + background-color: $brand-grey-dark; + color: white; +} + +.text-faded { + color: opacify(white, 0.7); +} + +section { + padding: 100px 0; +} + +aside { + padding: 50px 0; +} + +.no-padding { + padding: 0; +} + +// Navigation + +.navbar-default { + background-color: white; + border-color: opacify($brand-grey-dark, 0.05); + font-family: $font-family-heading; + @extend .transition-all; + .navbar-header .navbar-brand { + color: $brand-orange; + font-family: $font-family-heading; + font-weight: 700; + text-transform: uppercase; + &:hover, &:focus { + color: darken($brand-orange, 10%); + } + } + .nav { + & > li { + & > a, + & > a:focus { + text-transform: uppercase; + font-weight: 700; + font-size: 13px; + color: $brand-grey-dark; + &:hover { + color: $brand-orange; + } + } + &.active { + & > a, + & > a:focus { + color: $brand-orange !important; + background-color: transparent; + &:hover { + background-color: transparent; + } + } + } + } + } + @media (min-width: 768px) { + background-color: transparent; + border-color: opacify(white, 0.3); + .navbar-header .navbar-brand { + color: opacify(white, 0.7); + &:hover, &:focus { + color: white; + } + } + .nav > li > a, + .nav > li > a:focus { + color: opacify(white, 0.7); + &:hover { + color: white; + } + } + &.affix { + background-color: white; + border-color: opacify($brand-grey-dark, 0.05); + .navbar-header .navbar-brand { + color: $brand-orange; + font-size: 14px; + &:hover, &:focus { + color: darken($brand-orange, 10%); + } + } + .nav > li > a, + .nav > li > a:focus { + color: $brand-grey-dark; + &:hover { + color: $brand-orange; + } + } + } + } +} + +// Homepage Header + +header { + position: relative; + width: 100%; + min-height: auto; + @extend .background-cover; + background-position: center; + background-image: url('../img/header.jpg'); + text-align: center; + color: white; + .header-content { + position: relative; + text-align: center; + padding: 100px 15px 100px; + width: 100%; + .header-content-inner { + h1 { + font-weight: 700; + text-transform: uppercase; + margin-top: 0; + margin-bottom: 0; + } + hr { + margin: 30px auto; + } + p { + font-weight: 300; + color: opacify(white, 0.7); + font-size: 16px; + margin-bottom: 50px; + } + } + } + @media (min-width: 768px) { + min-height: 100%; + .header-content { + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + padding: 0 50px; + .header-content-inner { + max-width: 1000px; + margin-left: auto; + margin-right: auto; + p { + font-size: 18px; + max-width: 80%; + margin-left: auto; + margin-right: auto; + } + } + } + } +} + +// Sections + +.section-heading { + margin-top: 0; +} + +.service-box { + max-width: 400px; + margin: 50px auto 0; + @media (min-width: 992px) { + margin: 20px auto 0; + } + p { + margin-bottom: 0; + } +} + +.portfolio-box { + position: relative; + display: block; + max-width: 650px; + margin: 0 auto; + .portfolio-box-caption { + color: white; + opacity: 0; + display: block; + background: opacify($brand-orange, 0.9); + position: absolute; + bottom: 0; + text-align: center; + width: 100%; + height: 100%; + @extend .transition-all; + .portfolio-box-caption-content { + width: 100%; + text-align: center; + position: absolute; + top: 50%; + transform: translateY(-50%); + .project-category, + .project-name { + font-family: $font-family-heading; + padding: 0 15px; + } + .project-category { + text-transform: uppercase; + font-weight: 600; + font-size: 14px; + } + .project-name { + font-size: 18px; + } + } + } + &:hover { + .portfolio-box-caption { + opacity: 1; + } + } + @media (min-width: 768px) { + .portfolio-box-caption { + .portfolio-box-caption-content { + .project-category { + font-size: 16px; + } + .project-name { + font-size: 22px; + } + } + } + } +} + +.call-to-action h2 { + margin: 0 auto 20px; +} + +.text-primary { + color: $brand-orange; +} + +.no-gutter > [class*='col-'] { + padding-right:0; + padding-left:0; +} + +.btn-default { + @include button-variant($brand-grey-dark, white, white); +} + +.btn-primary { + @include button-variant(white, $brand-orange, $brand-orange); +} + +.btn { + font-family: $font-family-heading; + border: none; + border-radius: 300px; + font-weight: 700; + text-transform: uppercase; +} + +.btn-xl { + padding: 15px 30px; +} + +// Extras +// -- Highlight Color Customization +::-moz-selection, ::selection { + color: white; + text-shadow: none; + background: $brand-grey-dark; +} + +img::selection, img::-moz-selection { + color: white; + background: transparent; +} diff --git a/theme/static/src/scss/creative/mixins.scss b/theme/static/src/scss/creative/mixins.scss new file mode 100644 index 0000000..aafe3e2 --- /dev/null +++ b/theme/static/src/scss/creative/mixins.scss @@ -0,0 +1,55 @@ +// Mixins + +.transition-all { + -webkit-transition: all 0.35s; + -moz-transition: all 0.35s; + transition: all 0.35s; +} + +.background-cover { + -webkit-background-size: cover; + -moz-background-size: cover; + background-size: cover; + -o-background-size: cover; +} + +@mixin button-variant($color, $background, $border) { + color: $color; + background-color: $background; + border-color: $border; + @extend .transition-all; + + &:hover, + &:focus, + &.focus, + &:active, + &.active, + .open > .dropdown-toggle & { + color: $color; + background-color: darken($background, 5%); + border-color: darken($border, 7%); + } + &:active, + &.active, + .open > .dropdown-toggle & { + background-image: none; + } + &.disabled, + &[disabled], + fieldset[disabled] & { + &, + &:hover, + &:focus, + &.focus, + &:active, + &.active { + background-color: $background; + border-color: $border; + } + } + + .badge { + color: $background; + background-color: $color; + } +} diff --git a/theme/static/src/scss/homepage.scss b/theme/static/src/scss/homepage.scss new file mode 100644 index 0000000..65ae56c --- /dev/null +++ b/theme/static/src/scss/homepage.scss @@ -0,0 +1,8 @@ +/* + Homepage specific styles +*/ + +.portfolio-box { + min-height: 300px; + background-color: $brand-grey-dark; +} diff --git a/theme/static/src/scss/index.scss b/theme/static/src/scss/index.scss index a8a260d..48fc106 100644 --- a/theme/static/src/scss/index.scss +++ b/theme/static/src/scss/index.scss @@ -1,3 +1,23 @@ -@import "node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss"; +/* @group Fonts */ + +@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300,300italic,400italic,700italic); +@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,300,300italic,400italic,700italic); + +/* @end Fonts */ + +/* @group Libraries */ + +@import "node_modules/bootstrap-sass/assets/stylesheets/_bootstrap"; @import "css/animate"; -@import "creative"; + +/* @end Libraries */ + + +@import "variables"; +@import "creative/creative"; + +/* @group Other Imports */ + +/* @end Other Imports */ + +@import "homepage"; diff --git a/theme/static/src/scss/variables.scss b/theme/static/src/scss/variables.scss new file mode 100644 index 0000000..b8c4f3d --- /dev/null +++ b/theme/static/src/scss/variables.scss @@ -0,0 +1,13 @@ +$brand-orange: #f05f40; +$brand-orange-dark: darken($brand-orange, 10%); +$brand-grey-dark: #333; + + +$font-family-heading: 'Open Sans','Helvetica Neue',Arial,sans-serif; + +/* @group Bootstrap Overrides */ + +$font-family-base: 'Roboto', 'Helvetica Neue', Arial, sans-serif; +$brand-primary: $brand-orange; + +/* @end Bootstrap Overrides */ diff --git a/theme/templates/base.html b/theme/templates/base.html index 2eb7438..1a5ce05 100644 --- a/theme/templates/base.html +++ b/theme/templates/base.html @@ -1,8 +1,6 @@ - - - + @@ -10,59 +8,42 @@ Creative - Start Bootstrap Theme + - - - - - - + + - {% block content %}{% endblock %} + {% block content %}{% endblock %} - - - - +