tidy up, add base responsive nav, update readme
This commit is contained in:
parent
f459a49dd3
commit
0d1c5d3e1e
13
README.md
13
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
|
* Scss compiling and watching, css minification support
|
||||||
* Rollup.js for js for smallest possible bundles
|
* Rollup.js for js for smallest possible bundles
|
||||||
* Image optimisation using imagemin.
|
* Image optimisation using imagemin.
|
||||||
|
* Base mobile nav out of the box
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
|
@ -65,6 +66,14 @@ Then run:
|
||||||
|
|
||||||
*to optimise images*
|
*to optimise images*
|
||||||
|
|
||||||
|
gulp styles
|
||||||
|
|
||||||
|
*to compile styles*
|
||||||
|
|
||||||
|
gulp scripts
|
||||||
|
|
||||||
|
*to compile scripts*
|
||||||
|
|
||||||
gulp build
|
gulp build
|
||||||
|
|
||||||
*to create a build (minification, removes map files and comments)*
|
*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
|
## Tips & Tricks
|
||||||
|
|
||||||
### SVG Fallbacks
|
### SVG Fallbacks
|
||||||
|
|
||||||
|
Most likely if you need to support IE8
|
||||||
|
|
||||||
*CSS*
|
*CSS*
|
||||||
```
|
```
|
||||||
|
|
|
@ -1,54 +1,51 @@
|
||||||
body {
|
body {
|
||||||
color: $base-colour;
|
color: $base-colour;
|
||||||
font-family: $base-font-family;
|
font-family: $base-font-family;
|
||||||
@include font-size($base-font-size);
|
line-height: $base-line-height;
|
||||||
line-height: $base-line-height;
|
text-size-adjust: none;
|
||||||
-webkit-text-size-adjust: none;
|
@include font-size($base-font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6,
|
h6,
|
||||||
p,
|
p,
|
||||||
hr,
|
hr,
|
||||||
ul,
|
ul,
|
||||||
ol,
|
ol,
|
||||||
dl,
|
dl,
|
||||||
address {
|
address {
|
||||||
margin-bottom: $base-spacing-unit;
|
margin-bottom: $base-spacing-unit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Basic styles for links
|
* Basic styles for links
|
||||||
*/
|
*/
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $brand-colour;
|
color: $brand-colour;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
&:hover {
|
|
||||||
color: $base-colour;
|
&:hover {
|
||||||
text-decoration: underline;
|
color: $base-colour;
|
||||||
}
|
text-decoration: underline;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a[href^="tel"]{
|
a[href^="tel"] {
|
||||||
color: inherit;
|
font-size: inherit;
|
||||||
text-decoration: none;
|
font-family: inherit;
|
||||||
font-family: inherit;
|
color: inherit;
|
||||||
font-size: inherit;
|
text-decoration: none;
|
||||||
font-style: inherit;
|
font-style: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Rulers
|
* Rules
|
||||||
*/
|
*/
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
background-color: $base-colour;
|
height: 1px;
|
||||||
height: 1px;
|
background-color: $base-colour;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,3 +1,3 @@
|
||||||
/**
|
/**
|
||||||
* This file contains all @font-face declarations, if any.
|
* This file contains all @font-face declarations, if any.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -1,122 +1,126 @@
|
||||||
/**
|
/**
|
||||||
* Blanket input styles for normalisation
|
* Blanket input styles for normalisation
|
||||||
*/
|
*/
|
||||||
|
|
||||||
*:focus {
|
*:focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
input,
|
input,
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
background-color: $base-background-colour;
|
background-color: $base-background-colour;
|
||||||
border: solid 1px $base-colour;
|
border: solid 1px $base-colour;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
color: $base-colour;
|
color: $base-colour;
|
||||||
line-height: ($base-spacing-unit * 1.5);
|
line-height: ($base-spacing-unit * 1.5);
|
||||||
height: ($base-spacing-unit * 1.5);
|
height: ($base-spacing-unit * 1.5);
|
||||||
padding: 0 ($base-spacing-unit / 2);
|
padding: 0 ($base-spacing-unit / 2);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="checkbox"],
|
input[type="checkbox"],
|
||||||
input[type="radio"] {
|
input[type="radio"] {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 0;
|
border: 0;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
height: auto;
|
height: auto;
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="file"] {
|
input[type="file"] {
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
height: auto;
|
height: auto;
|
||||||
padding: ($base-spacing-unit / 4) ($base-spacing-unit / 2);
|
padding: ($base-spacing-unit / 4) ($base-spacing-unit / 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="submit"] {
|
input[type="submit"] {
|
||||||
-webkit-border-radius: 0;
|
border-radius: 0;
|
||||||
border-radius: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input[disabled] {
|
input[disabled] {
|
||||||
background-color: whitesmoke;
|
background-color: whitesmoke;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
padding-left: ($base-spacing-unit / 2);
|
padding-left: ($base-spacing-unit / 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
min-height: ($base-spacing-unit * 4);
|
min-height: ($base-spacing-unit * 4);
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Form utility classes
|
* Form utility classes
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.form--inline {
|
.form--inline {
|
||||||
.form__group {
|
.form__group {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkbox,
|
.checkbox,
|
||||||
.radio {
|
.radio {
|
||||||
display: block;
|
display: block;
|
||||||
padding-left: $base-spacing-unit;
|
padding-left: $base-spacing-unit;
|
||||||
&.inline {
|
|
||||||
display: inline-block;
|
&.inline {
|
||||||
}
|
display: inline-block;
|
||||||
> input {
|
}
|
||||||
float: left;
|
|
||||||
margin-left: -($base-spacing-unit);
|
> input {
|
||||||
margin-top: 4px;
|
float: left;
|
||||||
}
|
margin-left: -($base-spacing-unit);
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.form__group {
|
.form__group {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: $base-spacing-unit;
|
margin-bottom: $base-spacing-unit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form__label {
|
.form__label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: ($base-spacing-unit / 2);
|
margin-bottom: ($base-spacing-unit / 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Input Group
|
* Input Group
|
||||||
*
|
*
|
||||||
* Allows for prepend/append of elements
|
* Allows for prepend/append of elements
|
||||||
* (such as icons) on an input.
|
* (such as icons) on an input.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.input-group {
|
.input-group {
|
||||||
position: relative;
|
position: relative;
|
||||||
> input {
|
|
||||||
padding: 0 ($base-spacing-unit * 2);
|
> 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);
|
&:last-child {
|
||||||
height: ($base-spacing-unit * 1.5);
|
right: 0;
|
||||||
position: absolute;
|
|
||||||
text-align: center;
|
|
||||||
top: 0;
|
|
||||||
width: ($base-spacing-unit * 1.5);
|
|
||||||
&:first-child {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
&:last-child {
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,16 +1,14 @@
|
||||||
img {
|
img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Responsive images
|
* Responsive images
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.is-fluid {
|
.is-fluid {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,16 +1,16 @@
|
||||||
ul,
|
ul,
|
||||||
ol {
|
ol {
|
||||||
margin-left: $base-spacing-unit;
|
margin-left: $base-spacing-unit;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
> ul,
|
> ul,
|
||||||
> ol {
|
> ol {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.list--unstyled {
|
.list--unstyled {
|
||||||
list-style: none;
|
margin-left: 0;
|
||||||
margin-left: 0;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
small {
|
small {
|
||||||
font-size: .75em;
|
font-size: .75em;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,28 +1,34 @@
|
||||||
.alert {
|
.alert {
|
||||||
padding: $base-spacing-unit;
|
padding: $base-spacing-unit;
|
||||||
margin-bottom: $base-spacing-unit;
|
margin-bottom: $base-spacing-unit;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
> p,
|
|
||||||
> ul {
|
> p,
|
||||||
margin-bottom: 0;
|
> ul {
|
||||||
}
|
margin-bottom: 0;
|
||||||
> p + p {
|
}
|
||||||
margin-top: $base-spacing-unit;
|
|
||||||
}
|
> p + p {
|
||||||
&.alert--success {
|
margin-top: $base-spacing-unit;
|
||||||
color: $success-colour;
|
}
|
||||||
border-color: $success-colour;
|
|
||||||
}
|
&.alert--success {
|
||||||
&.alert--info {
|
color: $success-colour;
|
||||||
color: $info-colour;
|
border-color: $success-colour;
|
||||||
border-color: $info-colour;
|
}
|
||||||
}
|
|
||||||
&.alert--warning {
|
&.alert--info {
|
||||||
color: $warning-colour;
|
color: $info-colour;
|
||||||
border-color: $warning-colour;
|
border-color: $info-colour;
|
||||||
}
|
}
|
||||||
&.alert--danger {
|
|
||||||
color: $danger-colour;
|
&.alert--warning {
|
||||||
border-color: $danger-colour;
|
color: $warning-colour;
|
||||||
}
|
border-color: $warning-colour;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.alert--danger {
|
||||||
|
color: $danger-colour;
|
||||||
|
border-color: $danger-colour;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,54 +1,59 @@
|
||||||
.btn {
|
.btn {
|
||||||
background-color: $brand-colour;
|
background-color: $brand-colour;
|
||||||
color: $base-background-colour;
|
color: $base-background-colour;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: ($base-spacing-unit / 4) $base-spacing-unit;
|
padding: ($base-spacing-unit / 4) $base-spacing-unit;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
touch-action: manipulation;
|
touch-action: manipulation;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
width: auto;
|
width: auto;
|
||||||
transition: all .5s;
|
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn--inverse {
|
&::-moz-focus-inner {
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: none;
|
||||||
background-color: $base-background-colour;
|
background-color: $base-background-colour;
|
||||||
color: $brand-colour;
|
color: $brand-colour;
|
||||||
border: 1px solid $brand-colour;
|
border: 1px solid $brand-colour;
|
||||||
&:hover {
|
}
|
||||||
background-color: $brand-colour;
|
|
||||||
color: $base-background-colour;
|
.is-disabled,
|
||||||
border: 1px solid transparent;
|
&: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 {
|
.btn--block {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
+ .btn--block {
|
|
||||||
margin-top: $base-spacing-unit / 4;
|
+ .btn--block {
|
||||||
}
|
margin-top: $base-spacing-unit / 4;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn--link {
|
.btn--link {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: $brand-colour;
|
color: $brand-colour;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,14 +1,102 @@
|
||||||
.nav {
|
// hamburger menu
|
||||||
list-style: none;
|
.nav-burger {
|
||||||
margin: 0;
|
position: fixed;
|
||||||
> li {
|
top: $base-spacing-unit;
|
||||||
display: inline-block;
|
right: $base-spacing-unit;
|
||||||
margin-right: $base-spacing-unit;
|
z-index: 550;
|
||||||
&:last-child {
|
transition: all $animation-speed $animation;
|
||||||
margin-right: 0;
|
}
|
||||||
}
|
|
||||||
> a {
|
.nav-burger__line {
|
||||||
display: block;
|
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;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
&: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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -1,60 +1,56 @@
|
||||||
/*
|
/*
|
||||||
* Media query to respond to a minimum size (mobile first)
|
* Media query to respond to a minimum size (mobile first)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@mixin resp-min($size) {
|
@mixin resp-min($size) {
|
||||||
@media screen and (min-width: $size) {
|
@media screen and (min-width: $size) {
|
||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Media query to respond to a maximum size
|
* Media query to respond to a maximum size
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@mixin resp-max($size) {
|
@mixin resp-max($size) {
|
||||||
@media screen and (max-width: $size) {
|
@media screen and (max-width: $size) {
|
||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Output font size in px/rem
|
* Output font size in px/rem
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@mixin font-size($px) {
|
@mixin font-size($px) {
|
||||||
font-size: $px + px;
|
font-size: $px + px;
|
||||||
font-size: #{$px / 16}rem;
|
font-size: #{$px / 16}rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Placeholder mixin for <input>
|
* Placeholder mixin for <input>
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@mixin placeholder {
|
@mixin placeholder {
|
||||||
$placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
|
$placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
|
||||||
@each $placeholder in $placeholders {
|
@each $placeholder in $placeholders {
|
||||||
&:#{$placeholder}-placeholder {
|
&:#{$placeholder}-placeholder {
|
||||||
@content;
|
@content;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Clearfix
|
* Clearfix
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@mixin clearfix {
|
@mixin clearfix {
|
||||||
&:before,
|
&:before,
|
||||||
&:after{
|
&:after {
|
||||||
content: " ";
|
content: " ";
|
||||||
display: table;
|
display: table;
|
||||||
}
|
}
|
||||||
&:after{
|
|
||||||
clear: both;
|
&:after {
|
||||||
}
|
clear: both;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -55,3 +55,9 @@ $grid-gutter: $base-spacing-unit;
|
||||||
*/
|
*/
|
||||||
|
|
||||||
$border-radius: 3px;
|
$border-radius: 3px;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Animations
|
||||||
|
*/
|
||||||
|
$animation-speed: 250ms;
|
||||||
|
$animation: ease-in-out;
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
.logo {
|
||||||
|
width: 200px;
|
||||||
|
height: auto;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
|
@ -1,81 +1,84 @@
|
||||||
/**
|
/**
|
||||||
* Clearing and floating
|
* Clearing and floating
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.alignleft,
|
.alignleft,
|
||||||
.float-left {
|
.float-left {
|
||||||
float: left;
|
float: left;
|
||||||
img & {
|
|
||||||
margin-right: $base-spacing-unit;
|
img & {
|
||||||
}
|
margin-right: $base-spacing-unit;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.alignright,
|
.alignright,
|
||||||
.float-right {
|
.float-right {
|
||||||
float: right;
|
float: right;
|
||||||
img & {
|
|
||||||
margin-left : $base-spacing-unit;
|
img & {
|
||||||
}
|
margin-left : $base-spacing-unit;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.aligncenter,
|
.aligncenter,
|
||||||
.float-center {
|
.float-center {
|
||||||
display: block;
|
display: block;
|
||||||
margin: {
|
margin: {
|
||||||
left: auto;
|
left: auto;
|
||||||
right: auto;
|
right: auto;
|
||||||
}
|
}
|
||||||
img & {
|
|
||||||
margin-bottom: $base-spacing-unit;
|
img & {
|
||||||
}
|
margin-bottom: $base-spacing-unit;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.clearfix {
|
.clearfix {
|
||||||
@include clearfix();
|
@include clearfix();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Text aligments
|
* Text aligments
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.align-text-left {
|
.align-text-left {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.align-text-right {
|
.align-text-right {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.align-text-center {
|
.align-text-center {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Elements visibility
|
* Elements visibility
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.visible-on-mobile {
|
.visible-on-mobile {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
@include resp-max($breakpoint-sm) {
|
|
||||||
display: block !important;
|
@include resp-max($breakpoint-sm) {
|
||||||
}
|
display: block !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.visible-on-tablet {
|
.visible-on-tablet {
|
||||||
|
display: none !important;
|
||||||
|
|
||||||
|
@include resp-max($breakpoint-md) {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include resp-max($breakpoint-sm) {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
@include resp-max($breakpoint-md) {
|
}
|
||||||
display: block !important;
|
|
||||||
}
|
|
||||||
@include resp-max($breakpoint-sm) {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.visible-on-desktop {
|
.visible-on-desktop {
|
||||||
@include resp-max($breakpoint-md) {
|
@include resp-max($breakpoint-md) {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,12 +17,13 @@ html {
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
}
|
}
|
||||||
|
|
||||||
input,
|
input,
|
||||||
select,
|
select,
|
||||||
textarea,
|
textarea,
|
||||||
button {
|
button {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
&[disabled] {
|
&[disabled] {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
@ -35,8 +36,9 @@ button {
|
||||||
table {
|
table {
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
|
|
||||||
th,
|
th,
|
||||||
td {
|
td {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,18 +1,16 @@
|
||||||
@each $breakpoint in $breakpoints {
|
@each $breakpoint in $breakpoints {
|
||||||
|
$key : nth($breakpoint, 1);
|
||||||
|
$value : nth($breakpoint, 2);
|
||||||
|
|
||||||
$key : nth($breakpoint, 1);
|
.visible-#{$key} {
|
||||||
$value : nth($breakpoint, 2);
|
@media only screen and #{$value} {
|
||||||
|
display: block !important;
|
||||||
.visible-#{$key} {
|
|
||||||
@media only screen and #{$value} {
|
|
||||||
display: block !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.hidden-#{$key} {
|
.hidden-#{$key} {
|
||||||
@media only screen and #{$value} {
|
@media only screen and #{$value} {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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}
|
||||||
|
|
19
header.php
19
header.php
|
@ -14,7 +14,7 @@
|
||||||
*/
|
*/
|
||||||
echo file_get_contents(sprintf('%s/css/core.min.css', get_stylesheet_directory())); ?>
|
echo file_get_contents(sprintf('%s/css/core.min.css', get_stylesheet_directory())); ?>
|
||||||
</style>
|
</style>
|
||||||
<link rel="stylesheet" href="<?php echo get_bloginfo( 'stylesheet_url' ) . '?' . filemtime(get_stylesheet_directory() . '/style.css'); ?>">
|
<link rel="stylesheet" href="<?php echo get_bloginfo('stylesheet_url') . '?' . filemtime(get_stylesheet_directory() . '/style.css'); ?>">
|
||||||
|
|
||||||
<?php wp_head(); ?>
|
<?php wp_head(); ?>
|
||||||
<!--[if lt IE 10]>
|
<!--[if lt IE 10]>
|
||||||
|
@ -29,14 +29,19 @@
|
||||||
<body <?php body_class(); ?>>
|
<body <?php body_class(); ?>>
|
||||||
<header class="header" role="banner">
|
<header class="header" role="banner">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
<a href="<?php bloginfo('url'); ?>" class="logo logo--header">
|
||||||
|
<?php echo is_front_page() ? '<h1>' : ''; ?>
|
||||||
|
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/logo.svg" onerror="this.src='<?php bloginfo('stylesheet_directory'); ?>/img/logo.png'" alt="<?php bloginfo('title'); ?>" />
|
||||||
|
<?php echo is_front_page() ? '</h1>' : ''; ?>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="#" class="nav-burger js-menu-toggle">
|
||||||
|
<span class="nav-burger__line"></span>
|
||||||
|
<span class="nav-burger__line"></span>
|
||||||
|
<span class="nav-burger__line"></span>
|
||||||
|
</a>
|
||||||
<nav role="navigation">
|
<nav role="navigation">
|
||||||
<?php wp_nav_menu(['theme_location' => 'header', 'menu_class' => 'nav nav--header']); ?>
|
<?php wp_nav_menu(['theme_location' => 'header', 'menu_class' => 'nav nav--header']); ?>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="<?php bloginfo('url'); ?>" class="logo logo--header">
|
|
||||||
<?php if(is_front_page()) { echo '<h1>'; } ?>
|
|
||||||
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/logo.svg" onerror="this.src='<?php bloginfo('stylesheet_directory'); ?>/img/logo.png'" alt="<?php bloginfo('title'); ?>" />
|
|
||||||
<?php if(is_front_page()) { echo '</h1>'; } ?>
|
|
||||||
</a>
|
|
||||||
</header>
|
</header>
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue