diff --git a/assets/sass/base/_base.scss b/assets/sass/base/_base.scss
index 4801872..5e94ee9 100644
--- a/assets/sass/base/_base.scss
+++ b/assets/sass/base/_base.scss
@@ -32,4 +32,14 @@ a {
color: $base-colour;
text-decoration: underline;
}
+}
+
+
+/**
+ * Rulers
+ */
+
+hr {
+ background-color: $base-colour;
+ height: 1px;
}
\ No newline at end of file
diff --git a/assets/sass/base/_typography.scss b/assets/sass/base/_typography.scss
index 4d69c04..a3845e1 100644
--- a/assets/sass/base/_typography.scss
+++ b/assets/sass/base/_typography.scss
@@ -5,4 +5,8 @@ h4,
h5,
h6 {
font-weight: bold;
+}
+
+small {
+ font-size: .75em;
}
\ No newline at end of file
diff --git a/assets/sass/components/_buttons.scss b/assets/sass/components/_buttons.scss
index 7088c63..afde14d 100644
--- a/assets/sass/components/_buttons.scss
+++ b/assets/sass/components/_buttons.scss
@@ -1,24 +1,41 @@
.btn {
- background-color: $base-colour;
- color: $base-background-colour;
- display: inline-block;
- height: ($base-spacing-unit * 1.5);
- line-height: ($base-spacing-unit * 1.5);
- padding: 0 $base-spacing-unit;
- text-align: center;
- width: auto;
- &::-moz-focus-inner {
- border: 0;
- padding: 0;
- }
+ 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;
+ 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;
+ }
+}
+
+.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%;
+ display: block;
+ width: 100%;
}
.btn--link {
- background-color: transparent;
- color: $base-colour;
+ background-color: transparent;
+ color: $brand-colour;
}
\ No newline at end of file
diff --git a/assets/sass/utils/_helpers.scss b/assets/sass/utils/_helpers.scss
index a518130..41d1c29 100644
--- a/assets/sass/utils/_helpers.scss
+++ b/assets/sass/utils/_helpers.scss
@@ -56,21 +56,21 @@
* Elements visibility
*/
-.visible-mobile {
+.visible-on-mobile {
display: none !important;
@include resp-max($breakpoint-sm) {
display: block !important;
}
}
-.visible-tablet {
+.visible-on-tablet {
display: none !important;
@include resp-max($breakpoint-md) {
display: block !important;
}
}
-.visible-desktop {
+.visible-on-desktop {
@include resp-max($breakpoint-md) {
display: none !important;
}
diff --git a/header.php b/header.php
index 799fd1e..659730e 100755
--- a/header.php
+++ b/header.php
@@ -1,10 +1,10 @@
->
+
-
+
- <?php wp_title( '' ); ?>
+ Title
diff --git a/styles.css b/styles.css
index b40d178..a23153c 100755
--- a/styles.css
+++ b/styles.css
@@ -409,20 +409,20 @@ table {
/**
* Elements visibility
*/
-.visible-mobile {
+.visible-on-mobile {
display: none !important; }
@media screen and (max-width: 767px) {
- .visible-mobile {
+ .visible-on-mobile {
display: block !important; } }
-.visible-tablet {
+.visible-on-tablet {
display: none !important; }
@media screen and (max-width: 992px) {
- .visible-tablet {
+ .visible-on-tablet {
display: block !important; } }
@media screen and (max-width: 992px) {
- .visible-desktop {
+ .visible-on-desktop {
display: none !important; } }
body {
@@ -456,6 +456,13 @@ a {
color: #444;
text-decoration: underline; }
+/**
+ * Rulers
+ */
+hr {
+ background-color: #444;
+ height: 1px; }
+
img {
max-width: 100%;
vertical-align: top; }
@@ -562,18 +569,35 @@ h5,
h6 {
font-weight: bold; }
+small {
+ font-size: .75em; }
+
.btn {
background-color: #444;
color: #fff;
+ border: 1px solid transparent;
display: inline-block;
- height: 36px;
- line-height: 36px;
- padding: 0 24px;
+ padding: 6px 24px;
text-align: center;
- width: auto; }
+ width: auto;
+ transition: all 0.5s; }
.btn::-moz-focus-inner {
border: 0;
padding: 0; }
+ .btn:hover {
+ text-decoration: none;
+ background-color: #fff;
+ color: #444;
+ border: 1px solid #444; }
+
+.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;