From 0d1c5d3e1e78b92ea91c1f94bff02f3fa4550c9e Mon Sep 17 00:00:00 2001 From: Lukas Juhas Date: Fri, 25 Aug 2017 17:11:48 +0100 Subject: [PATCH] tidy up, add base responsive nav, update readme --- README.md | 13 ++- assets/styles/base/_base.scss | 67 ++++++------ assets/styles/base/_fonts.scss | 2 +- assets/styles/base/_forms.scss | 140 +++++++++++++------------ assets/styles/base/_images.scss | 14 ++- assets/styles/base/_lists.scss | 18 ++-- assets/styles/base/_typography.scss | 14 +-- assets/styles/components/_alerts.scss | 58 +++++----- assets/styles/components/_buttons.scss | 91 ++++++++-------- assets/styles/components/_nav.scss | 114 +++++++++++++++++--- assets/styles/config/_mixins.scss | 48 ++++----- assets/styles/config/_variables.scss | 6 ++ assets/styles/layout/_header.scss | 5 + assets/styles/utils/_helpers.scss | 87 +++++++-------- assets/styles/utils/_reset.scss | 8 +- assets/styles/utils/_responsive.scss | 24 ++--- css/core.min.css | 2 +- css/styles.min.css | 2 +- header.php | 19 ++-- js/script.min.js | 1 + js/scripts.min.js | 1 - 21 files changed, 429 insertions(+), 305 deletions(-) create mode 100644 js/script.min.js delete mode 100644 js/scripts.min.js diff --git a/README.md b/README.md index 6c36b5c..42bdfc1 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,7 @@ A lightweight and skeletal WordPress boilerplate theme for HTML5 and beyond. The * Scss compiling and watching, css minification support * Rollup.js for js for smallest possible bundles * Image optimisation using imagemin. +* Base mobile nav out of the box ## Installation @@ -65,6 +66,14 @@ Then run: *to optimise images* + gulp styles + +*to compile styles* + + gulp scripts + +*to compile scripts* + gulp build *to create a build (minification, removes map files and comments)* @@ -90,7 +99,9 @@ Compatible with WordPress 3.2 and above, but always use the latest version. ## Tips & Tricks -### SVG Fallbacks +### SVG Fallbacks + +Most likely if you need to support IE8 *CSS* ``` diff --git a/assets/styles/base/_base.scss b/assets/styles/base/_base.scss index 86487fb..41aceab 100644 --- a/assets/styles/base/_base.scss +++ b/assets/styles/base/_base.scss @@ -1,54 +1,51 @@ body { - color: $base-colour; - font-family: $base-font-family; - @include font-size($base-font-size); - line-height: $base-line-height; - -webkit-text-size-adjust: none; + color: $base-colour; + font-family: $base-font-family; + line-height: $base-line-height; + text-size-adjust: none; + @include font-size($base-font-size); } -h1, -h2, -h3, -h4, -h5, -h6, -p, -hr, -ul, +h1, +h2, +h3, +h4, +h5, +h6, +p, +hr, +ul, ol, dl, address { - margin-bottom: $base-spacing-unit; + margin-bottom: $base-spacing-unit; } - /** * Basic styles for links */ - a { - color: $brand-colour; - text-decoration: none; - &:hover { - color: $base-colour; - text-decoration: underline; - } + color: $brand-colour; + text-decoration: none; + + &:hover { + color: $base-colour; + text-decoration: underline; + } } -a[href^="tel"]{ - color: inherit; - text-decoration: none; - font-family: inherit; - font-size: inherit; - font-style: inherit; +a[href^="tel"] { + font-size: inherit; + font-family: inherit; + color: inherit; + text-decoration: none; + font-style: inherit; } - /** - * Rulers + * Rules */ - hr { - background-color: $base-colour; - height: 1px; -} \ No newline at end of file + height: 1px; + background-color: $base-colour; +} diff --git a/assets/styles/base/_fonts.scss b/assets/styles/base/_fonts.scss index f5e3b71..52f90a3 100644 --- a/assets/styles/base/_fonts.scss +++ b/assets/styles/base/_fonts.scss @@ -1,3 +1,3 @@ /** * This file contains all @font-face declarations, if any. - */ \ No newline at end of file + */ diff --git a/assets/styles/base/_forms.scss b/assets/styles/base/_forms.scss index 5f9e5e5..c29184b 100644 --- a/assets/styles/base/_forms.scss +++ b/assets/styles/base/_forms.scss @@ -1,122 +1,126 @@ /** * Blanket input styles for normalisation */ - *:focus { - outline: 0; + outline: 0; } -input, -select, +input, +select, textarea { - background-color: $base-background-colour; - border: solid 1px $base-colour; - border-radius: 0; - color: $base-colour; - line-height: ($base-spacing-unit * 1.5); - height: ($base-spacing-unit * 1.5); - padding: 0 ($base-spacing-unit / 2); - width: 100%; + background-color: $base-background-colour; + border: solid 1px $base-colour; + border-radius: 0; + color: $base-colour; + line-height: ($base-spacing-unit * 1.5); + height: ($base-spacing-unit * 1.5); + padding: 0 ($base-spacing-unit / 2); + width: 100%; } -input[type="checkbox"], +input[type="checkbox"], input[type="radio"] { - background: transparent; - border: 0; - line-height: normal; - height: auto; - width: auto; + background: transparent; + border: 0; + line-height: normal; + height: auto; + width: auto; } input[type="file"] { - line-height: normal; - height: auto; - padding: ($base-spacing-unit / 4) ($base-spacing-unit / 2); + line-height: normal; + height: auto; + padding: ($base-spacing-unit / 4) ($base-spacing-unit / 2); } input[type="submit"] { - -webkit-border-radius: 0; - border-radius: 0; + border-radius: 0; } input[disabled] { - background-color: whitesmoke; - cursor: not-allowed; + background-color: whitesmoke; + cursor: not-allowed; } select { - line-height: normal; - padding: 0; - padding-left: ($base-spacing-unit / 2); + line-height: normal; + padding: 0; + padding-left: ($base-spacing-unit / 2); } textarea { - min-height: ($base-spacing-unit * 4); - overflow: auto; - vertical-align: top; - resize: vertical; + min-height: ($base-spacing-unit * 4); + overflow: auto; + vertical-align: top; + resize: vertical; } + /** * Form utility classes */ - .form--inline { - .form__group { - display: inline-block; - } + .form__group { + display: inline-block; + } } .checkbox, .radio { - display: block; - padding-left: $base-spacing-unit; - &.inline { - display: inline-block; - } - > input { - float: left; - margin-left: -($base-spacing-unit); - margin-top: 4px; - } + display: block; + padding-left: $base-spacing-unit; + + &.inline { + display: inline-block; + } + + > input { + float: left; + margin-left: -($base-spacing-unit); + margin-top: 4px; + } } .form__group { - display: block; - margin-bottom: $base-spacing-unit; + display: block; + margin-bottom: $base-spacing-unit; } .form__label { - display: block; - margin-bottom: ($base-spacing-unit / 2); + display: block; + margin-bottom: ($base-spacing-unit / 2); } + /** * Input Group * - * Allows for prepend/append of elements + * Allows for prepend/append of elements * (such as icons) on an input. */ - .input-group { - position: relative; - > input { - padding: 0 ($base-spacing-unit * 2); + position: relative; + + > input { + padding: 0 ($base-spacing-unit * 2); + } + + .input-group__addon { + line-height: ($base-spacing-unit * 1.5); + height: ($base-spacing-unit * 1.5); + position: absolute; + text-align: center; + top: 0; + width: ($base-spacing-unit * 1.5); + + &:first-child { + left: 0; } - .input-group__addon { - line-height: ($base-spacing-unit * 1.5); - height: ($base-spacing-unit * 1.5); - position: absolute; - text-align: center; - top: 0; - width: ($base-spacing-unit * 1.5); - &:first-child { - left: 0; - } - &:last-child { - right: 0; - } + + &:last-child { + right: 0; } + } } diff --git a/assets/styles/base/_images.scss b/assets/styles/base/_images.scss index 5b487be..e83ceec 100644 --- a/assets/styles/base/_images.scss +++ b/assets/styles/base/_images.scss @@ -1,16 +1,14 @@ img { - max-width: 100%; - height: auto; - vertical-align: top; + max-width: 100%; + height: auto; + vertical-align: top; } - /** * Responsive images */ - .is-fluid { - display: block; - width: 100%; - height: auto; + display: block; + width: 100%; + height: auto; } diff --git a/assets/styles/base/_lists.scss b/assets/styles/base/_lists.scss index 79d9d8f..a6378fe 100644 --- a/assets/styles/base/_lists.scss +++ b/assets/styles/base/_lists.scss @@ -1,16 +1,16 @@ -ul, +ul, ol { - margin-left: $base-spacing-unit; + margin-left: $base-spacing-unit; } li { - > ul, - > ol { - margin-bottom: 0; - } + > ul, + > ol { + margin-bottom: 0; + } } .list--unstyled { - list-style: none; - margin-left: 0; -} \ No newline at end of file + margin-left: 0; + list-style: none; +} diff --git a/assets/styles/base/_typography.scss b/assets/styles/base/_typography.scss index a3845e1..1bf5b35 100644 --- a/assets/styles/base/_typography.scss +++ b/assets/styles/base/_typography.scss @@ -1,12 +1,12 @@ -h1, -h2, -h3, -h4, -h5, +h1, +h2, +h3, +h4, +h5, h6 { font-weight: bold; } small { - font-size: .75em; -} \ No newline at end of file + font-size: .75em; +} diff --git a/assets/styles/components/_alerts.scss b/assets/styles/components/_alerts.scss index 5974ab1..8648996 100644 --- a/assets/styles/components/_alerts.scss +++ b/assets/styles/components/_alerts.scss @@ -1,28 +1,34 @@ .alert { - padding: $base-spacing-unit; - margin-bottom: $base-spacing-unit; - border: 1px solid transparent; - > p, - > ul { - margin-bottom: 0; - } - > p + p { - margin-top: $base-spacing-unit; - } - &.alert--success { - color: $success-colour; - border-color: $success-colour; - } - &.alert--info { - color: $info-colour; - border-color: $info-colour; - } - &.alert--warning { - color: $warning-colour; - border-color: $warning-colour; - } - &.alert--danger { - color: $danger-colour; - border-color: $danger-colour; - } + padding: $base-spacing-unit; + margin-bottom: $base-spacing-unit; + border: 1px solid transparent; + + > p, + > ul { + margin-bottom: 0; + } + + > p + p { + margin-top: $base-spacing-unit; + } + + &.alert--success { + color: $success-colour; + border-color: $success-colour; + } + + &.alert--info { + color: $info-colour; + border-color: $info-colour; + } + + &.alert--warning { + color: $warning-colour; + border-color: $warning-colour; + } + + &.alert--danger { + color: $danger-colour; + border-color: $danger-colour; + } } diff --git a/assets/styles/components/_buttons.scss b/assets/styles/components/_buttons.scss index 00ffc00..31df660 100644 --- a/assets/styles/components/_buttons.scss +++ b/assets/styles/components/_buttons.scss @@ -1,54 +1,59 @@ .btn { - background-color: $brand-colour; - color: $base-background-colour; - border: 1px solid transparent; - display: inline-block; - padding: ($base-spacing-unit / 4) $base-spacing-unit; - text-align: center; - white-space: nowrap; - vertical-align: middle; - touch-action: manipulation; - cursor: pointer; - user-select: none; - width: auto; - transition: all .5s; - &::-moz-focus-inner { - border: 0; - padding: 0; - } - &:hover { - text-decoration: none; - background-color: $base-background-colour; - color: $brand-colour; - border: 1px solid $brand-colour; - } - .is-disabled, - &:disabled { - pointer-events: none; - opacity: .65; - } -} + background-color: $brand-colour; + color: $base-background-colour; + border: 1px solid transparent; + display: inline-block; + padding: ($base-spacing-unit / 4) $base-spacing-unit; + text-align: center; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + user-select: none; + width: auto; + transition: all .5s; -.btn--inverse { + &::-moz-focus-inner { + border: 0; + padding: 0; + } + + &:hover { + text-decoration: none; background-color: $base-background-colour; color: $brand-colour; border: 1px solid $brand-colour; - &:hover { - background-color: $brand-colour; - color: $base-background-colour; - border: 1px solid transparent; - } + } + + .is-disabled, + &:disabled { + pointer-events: none; + opacity: .65; + } +} + +.btn--inverse { + background-color: $base-background-colour; + color: $brand-colour; + border: 1px solid $brand-colour; + + &:hover { + background-color: $brand-colour; + color: $base-background-colour; + border: 1px solid transparent; + } } .btn--block { - display: block; - width: 100%; - + .btn--block { - margin-top: $base-spacing-unit / 4; - } + display: block; + width: 100%; + + + .btn--block { + margin-top: $base-spacing-unit / 4; + } } .btn--link { - background-color: transparent; - color: $brand-colour; -} \ No newline at end of file + background-color: transparent; + color: $brand-colour; +} diff --git a/assets/styles/components/_nav.scss b/assets/styles/components/_nav.scss index 52e267f..b669571 100755 --- a/assets/styles/components/_nav.scss +++ b/assets/styles/components/_nav.scss @@ -1,14 +1,102 @@ -.nav { - list-style: none; - margin: 0; - > li { - display: inline-block; - margin-right: $base-spacing-unit; - &:last-child { - margin-right: 0; - } - > a { - display: block; - } +// hamburger menu +.nav-burger { + position: fixed; + top: $base-spacing-unit; + right: $base-spacing-unit; + z-index: 550; + transition: all $animation-speed $animation; +} + +.nav-burger__line { + width: 35px; + height: 3px; + background-color: $brand-colour; + display: none; + margin: 8px auto; + transition: all $animation-speed $animation; + + @include resp-max($breakpoint-md) { + display: block; + } + + .nav-burger.open & { + &:nth-child(2) { + opacity: 0; } -} \ No newline at end of file + + &:nth-child(1) { + transform: translateY(11px) rotate(45deg); + } + + &:nth-child(3) { + transform: translateY(-11px) rotate(-45deg); + } + } +} + + +// applies to all navs +.nav { + list-style: none; + margin: 0; + + > li { + display: inline-block; + margin-right: $base-spacing-unit; + + &:last-child { + margin-right: 0; + } + > a { + display: block; + } + } +} + +.nav--header { + // header nav styling goes here + + // mobile nav + @include resp-max($breakpoint-md) { + position: fixed; + top: 0; + left: 0; + visibility: hidden; + width: 0; + height: 100%; + margin: 0; + transition: opacity 500ms ease; + transition: opacity .35s ease, visibility .35s ease, width .35s ease; + text-align: center; + opacity: 0; + background: $base-background-colour; + -webkit-overflow-scrolling: touch; + + &.open { + z-index: 500; + visibility: visible; + width: 100%; + opacity: 1; + + ul { + position: absolute; + top: 50%; + left: 0; + overflow: auto; + width: 100%; + max-height: 100%; + margin: 0; + padding: 0; + user-select: none; + transform: translateY(-50%); + -webkit-touch-callout: none; + -webkit-overflow-scrolling: touch; + + > li { + width: 100%; + margin: 0; + } + } + } + } +} diff --git a/assets/styles/config/_mixins.scss b/assets/styles/config/_mixins.scss index c410d12..41c8b52 100755 --- a/assets/styles/config/_mixins.scss +++ b/assets/styles/config/_mixins.scss @@ -1,60 +1,56 @@ /* * Media query to respond to a minimum size (mobile first) */ - @mixin resp-min($size) { - @media screen and (min-width: $size) { - @content; - } + @media screen and (min-width: $size) { + @content; + } } /* * Media query to respond to a maximum size */ - @mixin resp-max($size) { - @media screen and (max-width: $size) { - @content; - } + @media screen and (max-width: $size) { + @content; + } } /* * Output font size in px/rem */ - @mixin font-size($px) { - font-size: $px + px; - font-size: #{$px / 16}rem; + font-size: $px + px; + font-size: #{$px / 16}rem; } /* * Placeholder mixin for */ - @mixin placeholder { - $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input"; - @each $placeholder in $placeholders { - &:#{$placeholder}-placeholder { - @content; - } + $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input"; + @each $placeholder in $placeholders { + &:#{$placeholder}-placeholder { + @content; } + } } /** * Clearfix */ - @mixin clearfix { - &:before, - &:after{ - content: " "; - display: table; - } - &:after{ - clear: both; - } + &:before, + &:after { + content: " "; + display: table; + } + + &:after { + clear: both; + } } diff --git a/assets/styles/config/_variables.scss b/assets/styles/config/_variables.scss index de08df6..0800afd 100755 --- a/assets/styles/config/_variables.scss +++ b/assets/styles/config/_variables.scss @@ -55,3 +55,9 @@ $grid-gutter: $base-spacing-unit; */ $border-radius: 3px; + +/** + * Animations + */ +$animation-speed: 250ms; +$animation: ease-in-out; diff --git a/assets/styles/layout/_header.scss b/assets/styles/layout/_header.scss index e69de29..2bcd20f 100644 --- a/assets/styles/layout/_header.scss +++ b/assets/styles/layout/_header.scss @@ -0,0 +1,5 @@ +.logo { + width: 200px; + height: auto; + display: inline-block; +} diff --git a/assets/styles/utils/_helpers.scss b/assets/styles/utils/_helpers.scss index 0961469..3606266 100644 --- a/assets/styles/utils/_helpers.scss +++ b/assets/styles/utils/_helpers.scss @@ -1,81 +1,84 @@ /** - * Clearing and floating - */ - +* Clearing and floating +*/ .alignleft, .float-left { - float: left; - img & { - margin-right: $base-spacing-unit; - } + float: left; + + img & { + margin-right: $base-spacing-unit; + } } .alignright, .float-right { - float: right; - img & { - margin-left : $base-spacing-unit; - } + float: right; + + img & { + margin-left : $base-spacing-unit; + } } .aligncenter, .float-center { - display: block; - margin: { - left: auto; - right: auto; - } - img & { - margin-bottom: $base-spacing-unit; - } + display: block; + margin: { + left: auto; + right: auto; + } + + img & { + margin-bottom: $base-spacing-unit; + } } .clearfix { - @include clearfix(); + @include clearfix(); } /** - * Text aligments - */ - +* Text aligments +*/ .align-text-left { - text-align: left; + text-align: left; } .align-text-right { - text-align: right; + text-align: right; } .align-text-center { - text-align: center; + text-align: center; } /** - * Elements visibility - */ - +* Elements visibility +*/ .visible-on-mobile { - display: none !important; - @include resp-max($breakpoint-sm) { - display: block !important; - } + display: none !important; + + @include resp-max($breakpoint-sm) { + display: block !important; + } } .visible-on-tablet { + display: none !important; + + @include resp-max($breakpoint-md) { + display: block !important; + } + + @include resp-max($breakpoint-sm) { display: none !important; - @include resp-max($breakpoint-md) { - display: block !important; - } - @include resp-max($breakpoint-sm) { - display: none !important; - } + } } .visible-on-desktop { - @include resp-max($breakpoint-md) { - display: none !important; - } + @include resp-max($breakpoint-md) { + display: none !important; + } } diff --git a/assets/styles/utils/_reset.scss b/assets/styles/utils/_reset.scss index 5714796..4590667 100644 --- a/assets/styles/utils/_reset.scss +++ b/assets/styles/utils/_reset.scss @@ -17,12 +17,13 @@ html { text-rendering: optimizeLegibility; } -input, -select, +input, +select, textarea, button { color: inherit; display: inline-block; + &[disabled] { cursor: not-allowed; } @@ -35,8 +36,9 @@ button { table { border-collapse: collapse; border-spacing: 0; + th, td { text-align: left; } -} \ No newline at end of file +} diff --git a/assets/styles/utils/_responsive.scss b/assets/styles/utils/_responsive.scss index 2e3b870..4e4831a 100644 --- a/assets/styles/utils/_responsive.scss +++ b/assets/styles/utils/_responsive.scss @@ -1,18 +1,16 @@ @each $breakpoint in $breakpoints { + $key : nth($breakpoint, 1); + $value : nth($breakpoint, 2); - $key : nth($breakpoint, 1); - $value : nth($breakpoint, 2); - - .visible-#{$key} { - @media only screen and #{$value} { - display: block !important; - } + .visible-#{$key} { + @media only screen and #{$value} { + display: block !important; } + } - .hidden-#{$key} { - @media only screen and #{$value} { - display: none !important; - } + .hidden-#{$key} { + @media only screen and #{$value} { + display: none !important; } - -} \ No newline at end of file + } +} diff --git a/css/core.min.css b/css/core.min.css index d35523f..4e4ae9d 100755 --- a/css/core.min.css +++ b/css/core.min.css @@ -1 +1 @@ -.container{max-width:1200px;margin:0 auto;padding:0 24px}.container:before,.container:after{content:" ";display:table}.container:after{clear:both}.row{list-style:none;margin-left:-24px}.row:before,.row:after{content:" ";display:table}.row:after{clear:both}.row.row--gutterless{margin-left:0}.col{float:left;padding-left:24px;-webkit-box-sizing:border-box;box-sizing:border-box}.row--gutterless .col{padding-left:0}@media only screen and (min-width: 1200px){.col--lg-offset-0{margin-left:0%}.col--lg-1{width:8.33333%}.col--lg-offset-1{margin-left:8.33333%}.col--lg-2{width:16.66667%}.col--lg-offset-2{margin-left:16.66667%}.col--lg-3{width:25%}.col--lg-offset-3{margin-left:25%}.col--lg-4{width:33.33333%}.col--lg-offset-4{margin-left:33.33333%}.col--lg-5{width:41.66667%}.col--lg-offset-5{margin-left:41.66667%}.col--lg-6{width:50%}.col--lg-offset-6{margin-left:50%}.col--lg-7{width:58.33333%}.col--lg-offset-7{margin-left:58.33333%}.col--lg-8{width:66.66667%}.col--lg-offset-8{margin-left:66.66667%}.col--lg-9{width:75%}.col--lg-offset-9{margin-left:75%}.col--lg-10{width:83.33333%}.col--lg-offset-10{margin-left:83.33333%}.col--lg-11{width:91.66667%}.col--lg-offset-11{margin-left:91.66667%}.col--lg-12{width:100%}.col--lg-offset-12{margin-left:100%}}@media only screen and (min-width: 768px) and (max-width: 1199px){.col--md-offset-0{margin-left:0%}.col--md-1{width:8.33333%}.col--md-offset-1{margin-left:8.33333%}.col--md-2{width:16.66667%}.col--md-offset-2{margin-left:16.66667%}.col--md-3{width:25%}.col--md-offset-3{margin-left:25%}.col--md-4{width:33.33333%}.col--md-offset-4{margin-left:33.33333%}.col--md-5{width:41.66667%}.col--md-offset-5{margin-left:41.66667%}.col--md-6{width:50%}.col--md-offset-6{margin-left:50%}.col--md-7{width:58.33333%}.col--md-offset-7{margin-left:58.33333%}.col--md-8{width:66.66667%}.col--md-offset-8{margin-left:66.66667%}.col--md-9{width:75%}.col--md-offset-9{margin-left:75%}.col--md-10{width:83.33333%}.col--md-offset-10{margin-left:83.33333%}.col--md-11{width:91.66667%}.col--md-offset-11{margin-left:91.66667%}.col--md-12{width:100%}.col--md-offset-12{margin-left:100%}}@media only screen and (max-width: 767px){.col--sm-offset-0{margin-left:0%}.col--sm-1{width:8.33333%}.col--sm-offset-1{margin-left:8.33333%}.col--sm-2{width:16.66667%}.col--sm-offset-2{margin-left:16.66667%}.col--sm-3{width:25%}.col--sm-offset-3{margin-left:25%}.col--sm-4{width:33.33333%}.col--sm-offset-4{margin-left:33.33333%}.col--sm-5{width:41.66667%}.col--sm-offset-5{margin-left:41.66667%}.col--sm-6{width:50%}.col--sm-offset-6{margin-left:50%}.col--sm-7{width:58.33333%}.col--sm-offset-7{margin-left:58.33333%}.col--sm-8{width:66.66667%}.col--sm-offset-8{margin-left:66.66667%}.col--sm-9{width:75%}.col--sm-offset-9{margin-left:75%}.col--sm-10{width:83.33333%}.col--sm-offset-10{margin-left:83.33333%}.col--sm-11{width:91.66667%}.col--sm-offset-11{margin-left:91.66667%}.col--sm-12{width:100%}.col--sm-offset-12{margin-left:100%}}@media only screen and (max-width: 480px){.col--xs-offset-0{margin-left:0%}.col--xs-1{width:8.33333%}.col--xs-offset-1{margin-left:8.33333%}.col--xs-2{width:16.66667%}.col--xs-offset-2{margin-left:16.66667%}.col--xs-3{width:25%}.col--xs-offset-3{margin-left:25%}.col--xs-4{width:33.33333%}.col--xs-offset-4{margin-left:33.33333%}.col--xs-5{width:41.66667%}.col--xs-offset-5{margin-left:41.66667%}.col--xs-6{width:50%}.col--xs-offset-6{margin-left:50%}.col--xs-7{width:58.33333%}.col--xs-offset-7{margin-left:58.33333%}.col--xs-8{width:66.66667%}.col--xs-offset-8{margin-left:66.66667%}.col--xs-9{width:75%}.col--xs-offset-9{margin-left:75%}.col--xs-10{width:83.33333%}.col--xs-offset-10{margin-left:83.33333%}.col--xs-11{width:91.66667%}.col--xs-offset-11{margin-left:91.66667%}.col--xs-12{width:100%}.col--xs-offset-12{margin-left:100%}}*{background-color:transparent;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;font:inherit;margin:0;padding:0}html{background-color:white;font-size:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}input,select,textarea,button{color:inherit;display:inline-block}input[disabled],select[disabled],textarea[disabled],button[disabled]{cursor:not-allowed}button{cursor:pointer}table{border-collapse:collapse;border-spacing:0}table th,table td{text-align:left}@media only screen and (min-width: 1200px){.visible-lg{display:block !important}}@media only screen and (min-width: 1200px){.hidden-lg{display:none !important}}@media only screen and (min-width: 768px) and (max-width: 1199px){.visible-md{display:block !important}}@media only screen and (min-width: 768px) and (max-width: 1199px){.hidden-md{display:none !important}}@media only screen and (max-width: 767px){.visible-sm{display:block !important}}@media only screen and (max-width: 767px){.hidden-sm{display:none !important}}@media only screen and (max-width: 480px){.visible-xs{display:block !important}}@media only screen and (max-width: 480px){.hidden-xs{display:none !important}}.alignleft,.float-left{float:left}img .alignleft,img .float-left{margin-right:24px}.alignright,.float-right{float:right}img .alignright,img .float-right{margin-left:24px}.aligncenter,.float-center{display:block;margin-left:auto;margin-right:auto}img .aligncenter,img .float-center{margin-bottom:24px}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.align-text-left{text-align:left}.align-text-right{text-align:right}.align-text-center{text-align:center}.visible-on-mobile{display:none !important}@media screen and (max-width: 480px){.visible-on-mobile{display:block !important}}.visible-on-tablet{display:none !important}@media screen and (max-width: 768px){.visible-on-tablet{display:block !important}}@media screen and (max-width: 480px){.visible-on-tablet{display:none !important}}@media screen and (max-width: 768px){.visible-on-desktop{display:none !important}}body{color:#444;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:16px;font-size:1rem;line-height:1.5;-webkit-text-size-adjust:none}h1,h2,h3,h4,h5,h6,p,hr,ul,ol,dl,address{margin-bottom:24px}a{color:#444;text-decoration:none}a:hover{color:#444;text-decoration:underline}a[href^="tel"]{color:inherit;text-decoration:none;font-family:inherit;font-size:inherit;font-style:inherit}hr{background-color:#444;height:1px}img{max-width:100%;height:auto;vertical-align:top}.is-fluid{display:block;width:100%;height:auto}*:focus{outline:0}input,select,textarea{background-color:#fff;border:solid 1px #444;-webkit-border-radius:0;border-radius:0;color:#444;line-height:36px;height:36px;padding:0 12px;width:100%}input[type="checkbox"],input[type="radio"]{background:transparent;border:0;line-height:normal;height:auto;width:auto}input[type="file"]{line-height:normal;height:auto;padding:6px 12px}input[type="submit"]{-webkit-border-radius:0;border-radius:0}input[disabled]{background-color:whitesmoke;cursor:not-allowed}select{line-height:normal;padding:0;padding-left:12px}textarea{min-height:96px;overflow:auto;vertical-align:top;resize:vertical}.form--inline .form__group{display:inline-block}.checkbox,.radio{display:block;padding-left:24px}.checkbox.inline,.radio.inline{display:inline-block}.checkbox>input,.radio>input{float:left;margin-left:-24px;margin-top:4px}.form__group{display:block;margin-bottom:24px}.form__label{display:block;margin-bottom:12px}.input-group{position:relative}.input-group>input{padding:0 48px}.input-group .input-group__addon{line-height:36px;height:36px;position:absolute;text-align:center;top:0;width:36px}.input-group .input-group__addon:first-child{left:0}.input-group .input-group__addon:last-child{right:0}ul,ol{margin-left:24px}li>ul,li>ol{margin-bottom:0}.list--unstyled{list-style:none;margin-left:0}h1,h2,h3,h4,h5,h6{font-weight:bold}small{font-size:.75em}.logo{width:250px;height:41px} +.container{max-width:1200px;margin:0 auto;padding:0 24px}.container:before,.container:after{content:" ";display:table}.container:after{clear:both}.row{list-style:none;margin-left:-24px}.row:before,.row:after{content:" ";display:table}.row:after{clear:both}.row.row--gutterless{margin-left:0}.col{float:left;padding-left:24px;-webkit-box-sizing:border-box;box-sizing:border-box}.row--gutterless .col{padding-left:0}@media only screen and (min-width: 1200px){.col--lg-offset-0{margin-left:0%}.col--lg-1{width:8.33333%}.col--lg-offset-1{margin-left:8.33333%}.col--lg-2{width:16.66667%}.col--lg-offset-2{margin-left:16.66667%}.col--lg-3{width:25%}.col--lg-offset-3{margin-left:25%}.col--lg-4{width:33.33333%}.col--lg-offset-4{margin-left:33.33333%}.col--lg-5{width:41.66667%}.col--lg-offset-5{margin-left:41.66667%}.col--lg-6{width:50%}.col--lg-offset-6{margin-left:50%}.col--lg-7{width:58.33333%}.col--lg-offset-7{margin-left:58.33333%}.col--lg-8{width:66.66667%}.col--lg-offset-8{margin-left:66.66667%}.col--lg-9{width:75%}.col--lg-offset-9{margin-left:75%}.col--lg-10{width:83.33333%}.col--lg-offset-10{margin-left:83.33333%}.col--lg-11{width:91.66667%}.col--lg-offset-11{margin-left:91.66667%}.col--lg-12{width:100%}.col--lg-offset-12{margin-left:100%}}@media only screen and (min-width: 768px) and (max-width: 1199px){.col--md-offset-0{margin-left:0%}.col--md-1{width:8.33333%}.col--md-offset-1{margin-left:8.33333%}.col--md-2{width:16.66667%}.col--md-offset-2{margin-left:16.66667%}.col--md-3{width:25%}.col--md-offset-3{margin-left:25%}.col--md-4{width:33.33333%}.col--md-offset-4{margin-left:33.33333%}.col--md-5{width:41.66667%}.col--md-offset-5{margin-left:41.66667%}.col--md-6{width:50%}.col--md-offset-6{margin-left:50%}.col--md-7{width:58.33333%}.col--md-offset-7{margin-left:58.33333%}.col--md-8{width:66.66667%}.col--md-offset-8{margin-left:66.66667%}.col--md-9{width:75%}.col--md-offset-9{margin-left:75%}.col--md-10{width:83.33333%}.col--md-offset-10{margin-left:83.33333%}.col--md-11{width:91.66667%}.col--md-offset-11{margin-left:91.66667%}.col--md-12{width:100%}.col--md-offset-12{margin-left:100%}}@media only screen and (max-width: 767px){.col--sm-offset-0{margin-left:0%}.col--sm-1{width:8.33333%}.col--sm-offset-1{margin-left:8.33333%}.col--sm-2{width:16.66667%}.col--sm-offset-2{margin-left:16.66667%}.col--sm-3{width:25%}.col--sm-offset-3{margin-left:25%}.col--sm-4{width:33.33333%}.col--sm-offset-4{margin-left:33.33333%}.col--sm-5{width:41.66667%}.col--sm-offset-5{margin-left:41.66667%}.col--sm-6{width:50%}.col--sm-offset-6{margin-left:50%}.col--sm-7{width:58.33333%}.col--sm-offset-7{margin-left:58.33333%}.col--sm-8{width:66.66667%}.col--sm-offset-8{margin-left:66.66667%}.col--sm-9{width:75%}.col--sm-offset-9{margin-left:75%}.col--sm-10{width:83.33333%}.col--sm-offset-10{margin-left:83.33333%}.col--sm-11{width:91.66667%}.col--sm-offset-11{margin-left:91.66667%}.col--sm-12{width:100%}.col--sm-offset-12{margin-left:100%}}@media only screen and (max-width: 480px){.col--xs-offset-0{margin-left:0%}.col--xs-1{width:8.33333%}.col--xs-offset-1{margin-left:8.33333%}.col--xs-2{width:16.66667%}.col--xs-offset-2{margin-left:16.66667%}.col--xs-3{width:25%}.col--xs-offset-3{margin-left:25%}.col--xs-4{width:33.33333%}.col--xs-offset-4{margin-left:33.33333%}.col--xs-5{width:41.66667%}.col--xs-offset-5{margin-left:41.66667%}.col--xs-6{width:50%}.col--xs-offset-6{margin-left:50%}.col--xs-7{width:58.33333%}.col--xs-offset-7{margin-left:58.33333%}.col--xs-8{width:66.66667%}.col--xs-offset-8{margin-left:66.66667%}.col--xs-9{width:75%}.col--xs-offset-9{margin-left:75%}.col--xs-10{width:83.33333%}.col--xs-offset-10{margin-left:83.33333%}.col--xs-11{width:91.66667%}.col--xs-offset-11{margin-left:91.66667%}.col--xs-12{width:100%}.col--xs-offset-12{margin-left:100%}}*{background-color:transparent;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;font:inherit;margin:0;padding:0}html{background-color:white;font-size:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}input,select,textarea,button{color:inherit;display:inline-block}input[disabled],select[disabled],textarea[disabled],button[disabled]{cursor:not-allowed}button{cursor:pointer}table{border-collapse:collapse;border-spacing:0}table th,table td{text-align:left}@media only screen and (min-width: 1200px){.visible-lg{display:block !important}}@media only screen and (min-width: 1200px){.hidden-lg{display:none !important}}@media only screen and (min-width: 768px) and (max-width: 1199px){.visible-md{display:block !important}}@media only screen and (min-width: 768px) and (max-width: 1199px){.hidden-md{display:none !important}}@media only screen and (max-width: 767px){.visible-sm{display:block !important}}@media only screen and (max-width: 767px){.hidden-sm{display:none !important}}@media only screen and (max-width: 480px){.visible-xs{display:block !important}}@media only screen and (max-width: 480px){.hidden-xs{display:none !important}}.alignleft,.float-left{float:left}img .alignleft,img .float-left{margin-right:24px}.alignright,.float-right{float:right}img .alignright,img .float-right{margin-left:24px}.aligncenter,.float-center{display:block;margin-left:auto;margin-right:auto}img .aligncenter,img .float-center{margin-bottom:24px}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.align-text-left{text-align:left}.align-text-right{text-align:right}.align-text-center{text-align:center}.visible-on-mobile{display:none !important}@media screen and (max-width: 480px){.visible-on-mobile{display:block !important}}.visible-on-tablet{display:none !important}@media screen and (max-width: 768px){.visible-on-tablet{display:block !important}}@media screen and (max-width: 480px){.visible-on-tablet{display:none !important}}@media screen and (max-width: 768px){.visible-on-desktop{display:none !important}}body{color:#444;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.5;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none;font-size:16px;font-size:1rem}h1,h2,h3,h4,h5,h6,p,hr,ul,ol,dl,address{margin-bottom:24px}a{color:#444;text-decoration:none}a:hover{color:#444;text-decoration:underline}a[href^="tel"]{font-size:inherit;font-family:inherit;color:inherit;text-decoration:none;font-style:inherit}hr{height:1px;background-color:#444}img{max-width:100%;height:auto;vertical-align:top}.is-fluid{display:block;width:100%;height:auto}*:focus{outline:0}input,select,textarea{background-color:#fff;border:solid 1px #444;-webkit-border-radius:0;border-radius:0;color:#444;line-height:36px;height:36px;padding:0 12px;width:100%}input[type="checkbox"],input[type="radio"]{background:transparent;border:0;line-height:normal;height:auto;width:auto}input[type="file"]{line-height:normal;height:auto;padding:6px 12px}input[type="submit"]{-webkit-border-radius:0;border-radius:0}input[disabled]{background-color:whitesmoke;cursor:not-allowed}select{line-height:normal;padding:0;padding-left:12px}textarea{min-height:96px;overflow:auto;vertical-align:top;resize:vertical}.form--inline .form__group{display:inline-block}.checkbox,.radio{display:block;padding-left:24px}.checkbox.inline,.radio.inline{display:inline-block}.checkbox>input,.radio>input{float:left;margin-left:-24px;margin-top:4px}.form__group{display:block;margin-bottom:24px}.form__label{display:block;margin-bottom:12px}.input-group{position:relative}.input-group>input{padding:0 48px}.input-group .input-group__addon{line-height:36px;height:36px;position:absolute;text-align:center;top:0;width:36px}.input-group .input-group__addon:first-child{left:0}.input-group .input-group__addon:last-child{right:0}ul,ol{margin-left:24px}li>ul,li>ol{margin-bottom:0}.list--unstyled{margin-left:0;list-style:none}h1,h2,h3,h4,h5,h6{font-weight:bold}small{font-size:.75em}.logo{width:250px;height:41px} diff --git a/css/styles.min.css b/css/styles.min.css index e1792b5..7389cab 100755 --- a/css/styles.min.css +++ b/css/styles.min.css @@ -1 +1 @@ -.btn{background-color:#444;color:#fff;border:1px solid transparent;display:inline-block;padding:6px 24px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:auto;-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s}.btn::-moz-focus-inner{border:0;padding:0}.btn:hover{text-decoration:none;background-color:#fff;color:#444;border:1px solid #444}.btn .is-disabled,.btn:disabled{pointer-events:none;opacity:.65}.btn--inverse{background-color:#fff;color:#444;border:1px solid #444}.btn--inverse:hover{background-color:#444;color:#fff;border:1px solid transparent}.btn--block{display:block;width:100%}.btn--block+.btn--block{margin-top:6px}.btn--link{background-color:transparent;color:#444}.nav{list-style:none;margin:0}.nav>li{display:inline-block;margin-right:24px}.nav>li:last-child{margin-right:0}.nav>li>a{display:block}.alert{padding:24px;margin-bottom:24px;border:1px solid transparent}.alert>p,.alert>ul{margin-bottom:0}.alert>p+p{margin-top:24px}.alert.alert--success{color:#5CB85C;border-color:#5CB85C}.alert.alert--info{color:#444;border-color:#444}.alert.alert--warning{color:#F0AD4E;border-color:#F0AD4E}.alert.alert--danger{color:#D9534F;border-color:#D9534F} +.logo{width:200px;height:auto;display:inline-block}.btn{background-color:#444;color:#fff;border:1px solid transparent;display:inline-block;padding:6px 24px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:auto;-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s}.btn::-moz-focus-inner{border:0;padding:0}.btn:hover{text-decoration:none;background-color:#fff;color:#444;border:1px solid #444}.btn .is-disabled,.btn:disabled{pointer-events:none;opacity:.65}.btn--inverse{background-color:#fff;color:#444;border:1px solid #444}.btn--inverse:hover{background-color:#444;color:#fff;border:1px solid transparent}.btn--block{display:block;width:100%}.btn--block+.btn--block{margin-top:6px}.btn--link{background-color:transparent;color:#444}.nav-burger{position:fixed;top:24px;right:24px;z-index:550;-webkit-transition:all 250ms ease-in-out;-o-transition:all 250ms ease-in-out;transition:all 250ms ease-in-out}.nav-burger__line{width:35px;height:3px;background-color:#444;display:none;margin:8px auto;-webkit-transition:all 250ms ease-in-out;-o-transition:all 250ms ease-in-out;transition:all 250ms ease-in-out}@media screen and (max-width: 768px){.nav-burger__line{display:block}}.nav-burger.open .nav-burger__line:nth-child(2){opacity:0}.nav-burger.open .nav-burger__line:nth-child(1){-webkit-transform:translateY(11px) rotate(45deg);-ms-transform:translateY(11px) rotate(45deg);transform:translateY(11px) rotate(45deg)}.nav-burger.open .nav-burger__line:nth-child(3){-webkit-transform:translateY(-11px) rotate(-45deg);-ms-transform:translateY(-11px) rotate(-45deg);transform:translateY(-11px) rotate(-45deg)}.nav{list-style:none;margin:0}.nav>li{display:inline-block;margin-right:24px}.nav>li:last-child{margin-right:0}.nav>li>a{display:block}@media screen and (max-width: 768px){.nav--header{position:fixed;top:0;left:0;visibility:hidden;width:0;height:100%;margin:0;-webkit-transition:opacity 500ms ease;-o-transition:opacity 500ms ease;transition:opacity 500ms ease;-webkit-transition:opacity .35s ease, visibility .35s ease, width .35s ease;-o-transition:opacity .35s ease, visibility .35s ease, width .35s ease;transition:opacity .35s ease, visibility .35s ease, width .35s ease;text-align:center;opacity:0;background:#fff;-webkit-overflow-scrolling:touch}.nav--header.open{z-index:500;visibility:visible;width:100%;opacity:1}.nav--header.open ul{position:absolute;top:50%;left:0;overflow:auto;width:100%;max-height:100%;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);-webkit-touch-callout:none;-webkit-overflow-scrolling:touch}.nav--header.open ul>li{width:100%;margin:0}}.alert{padding:24px;margin-bottom:24px;border:1px solid transparent}.alert>p,.alert>ul{margin-bottom:0}.alert>p+p{margin-top:24px}.alert.alert--success{color:#5CB85C;border-color:#5CB85C}.alert.alert--info{color:#444;border-color:#444}.alert.alert--warning{color:#F0AD4E;border-color:#F0AD4E}.alert.alert--danger{color:#D9534F;border-color:#D9534F} diff --git a/header.php b/header.php index 5510866..3b2e744 100755 --- a/header.php +++ b/header.php @@ -14,7 +14,7 @@ */ echo file_get_contents(sprintf('%s/css/core.min.css', get_stylesheet_directory())); ?> - +