diff --git a/opentech/static_src/package.json b/opentech/static_src/package.json
index db77b290e966c978ffcfa757115a71c56573f4bf..44baaff128e2a57e3ed984c55b13427561676a22 100755
--- a/opentech/static_src/package.json
+++ b/opentech/static_src/package.json
@@ -16,9 +16,11 @@
"src_js": "src/javascript",
"src_css": "src/sass",
"src_img": "src/images",
+ "src_font": "src/fonts",
"dest_js": "../static_compiled/js",
"dest_css": "../static_compiled/css",
"dest_img": "../static_compiled/images",
+ "dest_font": "../static_compiled/fonts",
"dist": "../static_compiled"
},
"scripts": {
@@ -30,6 +32,7 @@
"create_dirs:dest_js": "mkdir -p $npm_package_config_dest_js",
"create_dirs:dest_css": "mkdir -p $npm_package_config_dest_css",
"create_dirs:dest_img": "mkdir -p $npm_package_config_dest_img",
+ "create_dirs:dest_font": "mkdir -p $npm_package_config_dest_font",
"create_dirs": "npm-run-all -p create_dirs:*",
"clean:dist": "rm -rf $npm_package_config_dist/{js/**,css/**,images/**}",
"clean": "npm-run-all -p clean:*",
@@ -56,6 +59,8 @@
"lint": "npm-run-all -p lint:js lint:css",
"//[ Watches ]//": "",
+ "watch:font": "onchange $npm_package_config_src_font'/**/**' -- npm-run-all sync:font reload",
+ "watch:font:debug": "onchange $npm_package_config_src_font'/**/**' -- npm-run-all sync:font",
"watch:img": "onchange $npm_package_config_src_img'/**/**' -- npm-run-all sync:img reload",
"watch:img:debug": "onchange $npm_package_config_src_img'/**/**' -- npm-run-all sync:img",
"watch:js": "onchange $npm_package_config_dest_js'/**/**' -- npm-run-all -p reload lint:js",
@@ -64,6 +69,7 @@
"watch": "npm-run-all -p watch:*",
"//[ Syncs ]//": "",
+ "sync:fonts": "rsync -rtvu --delete $npm_package_config_src_font/ $npm_package_config_dest_font/",
"sync:img": "rsync -rtvu --delete $npm_package_config_src_img/ $npm_package_config_dest_img/",
"sync": "npm-run-all -p sync:*",
diff --git a/opentech/static_src/src/fonts/proxima-nova/proxima-nova-black.woff b/opentech/static_src/src/fonts/proxima-nova/proxima-nova-black.woff
new file mode 100755
index 0000000000000000000000000000000000000000..7b147d6a86ee1580be6ab7ff771b4cb4e767a1c4
Binary files /dev/null and b/opentech/static_src/src/fonts/proxima-nova/proxima-nova-black.woff differ
diff --git a/opentech/static_src/src/fonts/proxima-nova/proxima-nova-bold.woff b/opentech/static_src/src/fonts/proxima-nova/proxima-nova-bold.woff
new file mode 100755
index 0000000000000000000000000000000000000000..9de6cca826816417c78df4ab3bb01b07d6bb6a92
Binary files /dev/null and b/opentech/static_src/src/fonts/proxima-nova/proxima-nova-bold.woff differ
diff --git a/opentech/static_src/src/fonts/proxima-nova/proxima-nova-regular.woff b/opentech/static_src/src/fonts/proxima-nova/proxima-nova-regular.woff
new file mode 100755
index 0000000000000000000000000000000000000000..3563df1c41e92bea70e2b2ce050c8bd4c365ba77
Binary files /dev/null and b/opentech/static_src/src/fonts/proxima-nova/proxima-nova-regular.woff differ
diff --git a/opentech/static_src/src/fonts/proxima-nova/proxima-nova-semibold.woff b/opentech/static_src/src/fonts/proxima-nova/proxima-nova-semibold.woff
new file mode 100644
index 0000000000000000000000000000000000000000..6b1a817bcb289baefcc5b617725eeaabe2afedd2
Binary files /dev/null and b/opentech/static_src/src/fonts/proxima-nova/proxima-nova-semibold.woff differ
diff --git a/opentech/static_src/src/fonts/proxima-nova/proxima-nova-thin.woff b/opentech/static_src/src/fonts/proxima-nova/proxima-nova-thin.woff
new file mode 100755
index 0000000000000000000000000000000000000000..27183b3628dadf08f801558e306241089d59224b
Binary files /dev/null and b/opentech/static_src/src/fonts/proxima-nova/proxima-nova-thin.woff differ
diff --git a/opentech/static_src/src/sass/abstracts/_mixins.scss b/opentech/static_src/src/sass/abstracts/_mixins.scss
index 199de35c9a587d95b3737727042ccfd53e04ed90..ec2c41c0b41b1d6729e8a571e504a80365127f3c 100755
--- a/opentech/static_src/src/sass/abstracts/_mixins.scss
+++ b/opentech/static_src/src/sass/abstracts/_mixins.scss
@@ -1,11 +1,4 @@
-/*------------------------------------*\
- $MIXINS
-\*------------------------------------*/
-
-
-/* ============================================
- Media queries
-*/
+// Media queries
@mixin media-query($queries...) {
@each $query in $queries {
@each $breakpoint in $breakpoints {
@@ -21,10 +14,7 @@
}
}
-
-/* ============================================
- Placeholder text
-*/
+// Placeholder text
@mixin placeholder-text {
// sass-lint:disable no-vendor-prefixes
&.placeholder { @content; }
@@ -35,10 +25,7 @@
// sass-lint:enddisable
}
-
-/* ============================================
- Hide text
-*/
+// Hide text
@mixin hidden {
position: absolute;
width: 1px;
@@ -47,20 +34,14 @@
clip: rect(1px, 1px, 1px, 1px);
}
-
-/* ============================================
- iOS Native vertical scroll
-*/
+// iOS Native vertical scroll
@mixin native-vertical-scroll {
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch; // sass-lint:disable-line no-misspelled-properties
}
-
-/* ============================================
- Output a rem and px fallback value for the given property
-*/
+// Output a rem and px fallback value for the given property
@mixin rem($property, $values) {
$px: ();
@@ -81,18 +62,12 @@
// sass-lint:enddisable
}
-
-/* ============================================
- Output a `font-size: [x]rem;` declaration for the given px value
-*/
+// Output a `font-size: [x]rem;` declaration for the given px value
@mixin rem-font-size($font-size) {
@include rem(font-size, $font-size);
}
-
-/* ============================================
- Font sizes
-*/
+// Font sizes
@mixin font-size($keyword) {
$size: map-get($font-sizes, $keyword);
@@ -102,3 +77,20 @@
@include rem-font-size($size);
}
}
+
+// button mixin
+@mixin button($bg) {
+ padding: 10px 60px;
+ background: $bg;
+ border: 1px solid $color--white;
+ transition: background $transition;
+
+ &:hover {
+ background: darken($bg, 8%);
+ transition: background $transition;
+ }
+
+ &:active {
+ background: darken($bg, 25%);
+ }
+}
diff --git a/opentech/static_src/src/sass/abstracts/_variables.scss b/opentech/static_src/src/sass/abstracts/_variables.scss
index a8f2537c50220ea532735a09b5a247df32681281..1bb4eb1642f1be7157545f6e922a1781f2d04065 100755
--- a/opentech/static_src/src/sass/abstracts/_variables.scss
+++ b/opentech/static_src/src/sass/abstracts/_variables.scss
@@ -1,11 +1,12 @@
-$color--primary: #6a737c;
-$color--secondary: #eaeaea;
-$color--tertiary: #f9f9f9;
-
$color--white: #fff;
$color--black: #141414;
+$color--light-blue: #43bbf1;
+$color--dark-blue: #25aae1;
$color--default: $color--black;
+$color--primary: $color--light-blue;
+$color--secondary: #eaeaea;
+$color--tertiary: #f9f9f9;
// Button colours
$button-colours: (
@@ -15,13 +16,13 @@ $button-colours: (
);
// Fonts
-$font--primary: Sans-Serif;
+$font--primary: 'proxima-nova';
$font--secondary: Sans-Serif;
// Font weights
+$weight--black: 800;
$weight--bold: 700;
$weight--semibold: 600;
-$weight--medium: 500;
$weight--normal: 400;
$weight--light: 200;
@@ -36,15 +37,15 @@ $font-sizes: (
kilo: 48px,
// standard sizes
- alpha: 38px,
- beta: 30px,
- gamma: 28px,
- delta: 22px,
- epsilon: 20px,
- zeta: 16px,
+ alpha: 72px,
+ beta: 42px,
+ gamma: 36px,
+ delta: 24px,
+ epsilon: 17px,
+ zeta: 15px,
// non-standard small sizes
- milli: 14px
+ milli: 13px
);
// Wrappers
diff --git a/opentech/static_src/src/sass/base/_base.scss b/opentech/static_src/src/sass/base/_base.scss
index f70346dce13c3f091f299009c20b9d5be70dd70b..010b745f8461fbde64b3f299541cb2774068b832 100755
--- a/opentech/static_src/src/sass/base/_base.scss
+++ b/opentech/static_src/src/sass/base/_base.scss
@@ -20,7 +20,6 @@ html {
body {
overflow-x: hidden;
- background-color: $color--tertiary;
&.no-scroll {
overflow-y: hidden;
@@ -62,3 +61,27 @@ ol {
margin: 0;
list-style: none;
}
+
+.is-invisible,
+%is-invisible {
+ z-index: -1;
+ opacity: 0;
+ transition: opacity, z-index, $transition;
+}
+
+.is-visible,
+%is-visible {
+ z-index: 5;
+ opacity: 1;
+ transition: opacity, z-index, $transition;
+}
+
+.is-hidden,
+%is-hidden {
+ display: none;
+}
+
+.is-unhidden,
+%is-unhidden {
+ display: block;
+}
diff --git a/opentech/static_src/src/sass/base/_typography.scss b/opentech/static_src/src/sass/base/_typography.scss
index 5c24ba65448cb5278bc053379b4410574c13008c..f69ab26e1ec9aab4c4350c19be8248a0a284d7d7 100755
--- a/opentech/static_src/src/sass/base/_typography.scss
+++ b/opentech/static_src/src/sass/base/_typography.scss
@@ -59,14 +59,82 @@ blockquote {
}
// Default sizes
-h1, .alpha { @include font-size(alpha); }
-h2, .beta { @include font-size(beta); }
-h3, .gamma { @include font-size(gamma); }
-h4, .delta { @include font-size(delta); }
-h5, .epsilon { @include font-size(epsilon); }
-h6, .zeta { @include font-size(zeta); }
+h1, .alpha {
+ @include font-size(alpha);
+ font-weight: $weight--black;
+}
+
+h2, .beta {
+ @include font-size(beta);
+ font-weight: $weight--bold;
+}
+
+h3, .gamma {
+ @include font-size(gamma);
+ font-weight: $weight--light;
+}
+
+h4, .delta {
+ @include font-size(delta);
+ font-weight: $weight--bold;
+}
+
+h5, .epsilon {
+ @include font-size(epsilon);
+ font-weight: $weight--bold;
+}
+
+h6, .zeta {
+ @include font-size(zeta);
+ font-weight: $weight--bold;
+}
.giga { @include font-size(giga); }
.mega { @include font-size(mega); }
.kilo { @include font-size(kilo); }
small, .milli { @include font-size(milli); }
+
+// thin
+@font-face {
+ font-family: 'proxima-nova';
+ font-style: normal;
+ font-weight: 200;
+ src: url('./../fonts/proxima-nova/proxima-nova-thin.woff') format('woff');
+ text-rendering: optimizeLegibility;
+}
+
+// regular
+@font-face {
+ font-family: 'proxima-nova';
+ font-style: normal;
+ font-weight: 400;
+ src: url('./../fonts/proxima-nova/proxima-nova-regular.woff') format('woff');
+ text-rendering: optimizeLegibility;
+}
+
+// semibold
+@font-face {
+ font-family: 'proxima-nova';
+ font-style: normal;
+ font-weight: 600;
+ src: url('./../fonts/proxima-nova/proxima-nova-semibold.woff') format('woff');
+ text-rendering: optimizeLegibility;
+}
+
+// bold
+@font-face {
+ font-family: 'proxima-nova';
+ font-style: normal;
+ font-weight: 700;
+ src: url('./../fonts/proxima-nova/proxima-nova-bold.woff') format('woff');
+ text-rendering: optimizeLegibility;
+}
+
+// black
+@font-face {
+ font-family: 'proxima-nova';
+ font-style: normal;
+ font-weight: 800;
+ src: url('./../fonts/proxima-nova/proxima-nova-black.woff') format('woff');
+ text-rendering: optimizeLegibility;
+}