diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..5d12634
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/Gruntfile.js b/Gruntfile.js
index 4f0e1bb..a4f0f9a 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -1,67 +1,67 @@
module.exports = function(grunt) {
- require("matchdep").filterAll("grunt-*").forEach(grunt.loadNpmTasks);
- var webpack = require("webpack");
- var webpackConfig = require("./webpack.config.js");
+ require("matchdep").filterAll("grunt-*").forEach(grunt.loadNpmTasks);
+ var webpack = require("webpack");
+ var webpackConfig = require("./webpack.config.js");
- grunt.initConfig({
- "webpack-dev-server": {
- options: {
- webpack: webpackConfig,
- publicPath: "",
- contentBase: './dev'
- },
- start: {
- keepAlive: true,
- webpack: {
- devtool: "sourcemap",
- debug: true
- }
- }
- },
- watch: {
- sass: {
- files: ['src/css/**/*.scss'],
- tasks: ['sass:dev'],
- options: {
- spawn: false
- }
- }
- },
- sass: {
- dev: {
- options: {
- outputStyle: 'expanded',
- sourceComments: 'map'
- },
- files: { 'dev/main.css': 'src/css/main.scss' }
- }
- },
- exec: {
- docpad: {
- cmd: "docpad generate -e production"
- },
- clear_dist: {
- cmd: "rm -rf ./dist/"
- }
- },
- execute: {
- // TODO :: currently this dumps metadata.json into the module's dist
- // we need to pass options into generate-meta.js to define
- // our own outputDir
- modernizr: {
- src: ['./node_modules/modernizr/lib/generate-meta.js'],
- }
- },
- 'gh-pages': {
- options: {
- base: 'dist'
- },
- src: ['**']
- }
- });
+ grunt.initConfig({
+ "webpack-dev-server": {
+ options: {
+ webpack: webpackConfig,
+ publicPath: "",
+ contentBase: './dev'
+ },
+ start: {
+ keepAlive: true,
+ webpack: {
+ devtool: "sourcemap",
+ debug: true
+ }
+ }
+ },
+ watch: {
+ sass: {
+ files: ['src/css/**/*.scss'],
+ tasks: ['sass:dev'],
+ options: {
+ spawn: false
+ }
+ }
+ },
+ sass: {
+ dev: {
+ options: {
+ outputStyle: 'expanded',
+ sourceComments: 'map'
+ },
+ files: { 'dev/main.css': 'src/css/main.scss' }
+ }
+ },
+ exec: {
+ docpad: {
+ cmd: "docpad generate -e production"
+ },
+ clear_dist: {
+ cmd: "rm -rf ./dist/"
+ }
+ },
+ execute: {
+ // TODO :: currently this dumps metadata.json into the module's dist
+ // we need to pass options into generate-meta.js to define
+ // our own outputDir
+ modernizr: {
+ src: ['./node_modules/modernizr/lib/generate-meta.js'],
+ }
+ },
+ 'gh-pages': {
+ options: {
+ base: 'dist'
+ },
+ src: ['**']
+ }
+ });
- grunt.registerTask("default", ["webpack-dev-server:start"]);
- grunt.registerTask("dist", ["exec:clear_dist", "exec:docpad"])
+ grunt.registerTask("default", ["webpack-dev-server:start"]);
+ grunt.registerTask("dist", ["exec:clear_dist", "exec:docpad"])
};
diff --git a/docpad.coffee b/docpad.coffee
index 2a15d94..d37c797 100644
--- a/docpad.coffee
+++ b/docpad.coffee
@@ -4,24 +4,24 @@ webpack = require('webpack')
webpackConfig.plugins.push(new webpack.optimize.UglifyJsPlugin())
docpadConfig = {
- srcPath: 'src/html'
- environments:
- development:
- outPath: 'dev'
- ignoreCustomPatterns: /build.js|build.css.scss/
- production:
- outPath: 'dist'
- plugins:
- webpack: webpackConfig
- nodesass:
- outputStyle: 'compressed'
- collections:
- pages: ->
- @getCollection("html").findAllLive({isPage:true}).on "add", (model) ->
- model.setMetaDefaults({layout:"default"})
- posts: ->
- @getCollection("html").findAllLive({relativeOutDirPath: 'posts'}).on "add", (model) ->
- model.setMetaDefaults({layout:"default"})
+ srcPath: 'src/html'
+ environments:
+ development:
+ outPath: 'dev'
+ ignoreCustomPatterns: /build.js|build.css.scss/
+ production:
+ outPath: 'dist'
+ plugins:
+ webpack: webpackConfig
+ nodesass:
+ outputStyle: 'compressed'
+ collections:
+ pages: ->
+ @getCollection("html").findAllLive({isPage:true}).on "add", (model) ->
+ model.setMetaDefaults({layout:"default"})
+ posts: ->
+ @getCollection("html").findAllLive({relativeOutDirPath: 'posts'}).on "add", (model) ->
+ model.setMetaDefaults({layout:"default"})
}
-module.exports = docpadConfig
\ No newline at end of file
+module.exports = docpadConfig
diff --git a/src/api.json b/src/api.json
index e30ec0e..f558f87 100644
--- a/src/api.json
+++ b/src/api.json
@@ -1,26 +1,26 @@
[
- {
- "name": "Modernizr.addTest"
- },
- {
- "name": "Modernizr.prefixed()"
- },
- {
- "name": "Modernizr.testStyles()"
- },
- {
- "name": "Modernizr.testProp()"
- },
- {
- "name": "Modernizr.testAllProps()"
- },
- {
- "name": "Modernizr.hasEvent()"
- },
- {
- "name": "Modernizr._prefixes"
- },
- {
- "name": "Modernizr._domPrefixes"
- }
-]
\ No newline at end of file
+ {
+ "name": "Modernizr.addTest"
+ },
+ {
+ "name": "Modernizr.prefixed()"
+ },
+ {
+ "name": "Modernizr.testStyles()"
+ },
+ {
+ "name": "Modernizr.testProp()"
+ },
+ {
+ "name": "Modernizr.testAllProps()"
+ },
+ {
+ "name": "Modernizr.hasEvent()"
+ },
+ {
+ "name": "Modernizr._prefixes"
+ },
+ {
+ "name": "Modernizr._domPrefixes"
+ }
+]
diff --git a/src/css/_old/_color.scss b/src/css/_old/_color.scss
index 3dd11a4..9eab619 100644
--- a/src/css/_old/_color.scss
+++ b/src/css/_old/_color.scss
@@ -1,38 +1,38 @@
// TODO - browser support for non-RGBa, i.e. create stacks of pseudo-translucent colors
.c_light {
- background: #f7f7f7;
- color: #272727;
- a { color: inherit; }
+ background: #f7f7f7;
+ color: #272727;
+ a { color: inherit; }
}
.c_stark {
- background: #FFF;
+ background: #FFF;
}
.c_base {
- background: #272727;
- color: rgba(255,255,255,0.5);
- a {
- color: rgba(255,255,255,1);
- }
+ background: #272727;
+ color: rgba(255,255,255,0.5);
+ a {
+ color: rgba(255,255,255,1);
+ }
}
.c_linkbox {
- background: #fff;
+ background: #fff;
}
a.c_primary,
.c_primary {
- background: #db4886;
- color: #f7f7f7;
+ background: #db4886;
+ color: #f7f7f7;
}
.c_box {
- background: #eee;
+ background: #eee;
}
.c_action,
a.c_action {
- color: #db4886;
-}
\ No newline at end of file
+ color: #db4886;
+}
diff --git a/src/css/_old/_general.scss b/src/css/_old/_general.scss
index 162a5b9..4a7b57a 100644
--- a/src/css/_old/_general.scss
+++ b/src/css/_old/_general.scss
@@ -1,19 +1,19 @@
*, input {
- box-sizing: border-box;
+ box-sizing: border-box;
}
a {
- text-decoration: none;
+ text-decoration: none;
}
ul {
- margin: 0;
- padding-left: 0;
- list-style: none;
+ margin: 0;
+ padding-left: 0;
+ list-style: none;
}
dd {
- margin-left: 0;
+ margin-left: 0;
}
/**
@@ -41,4 +41,4 @@ dd {
*/
.cf {
*zoom: 1;
-}
\ No newline at end of file
+}
diff --git a/src/css/_old/_layout.scss b/src/css/_old/_layout.scss
index b1a890d..ff29caa 100644
--- a/src/css/_old/_layout.scss
+++ b/src/css/_old/_layout.scss
@@ -1,360 +1,360 @@
html,
body {
- overflow: hidden;
- height: 100%;
+ overflow: hidden;
+ height: 100%;
}
.app {
- width: 112rem;
- margin: 0 auto;
+ width: 112rem;
+ margin: 0 auto;
}
.header {
- @extend .cf;
- padding-top: 4rem;
- // margin-left: -80px;
-}
-
- .header__logo,
- .header__search,
- .header__util {
- // @extend .stacked;
- // padding-left: 80px;
- }
-
- .header__logo {
- width: 8rem;
- float: left;
-
- }
-
- .header__search {
- width: 8rem * 6;
- float: left;
- }
-
- .header__util {
- float: right;
- // width: 80px * 5;
- }
+ @extend .cf;
+ padding-top: 4rem;
+ // margin-left: -80px;
+}
+
+ .header__logo,
+ .header__search,
+ .header__util {
+ // @extend .stacked;
+ // padding-left: 80px;
+ }
+
+ .header__logo {
+ width: 8rem;
+ float: left;
+
+ }
+
+ .header__search {
+ width: 8rem * 6;
+ float: left;
+ }
+
+ .header__util {
+ float: right;
+ // width: 80px * 5;
+ }
.stacked {
- display: inline-block;
- vertical-align: top;
+ display: inline-block;
+ vertical-align: top;
}
// NOTE - ensure there is no whitespace in-between columns
// TODO - take care of this by removing whitespace on build
.row {
- margin-left: -8rem;
+ margin-left: -8rem;
}
.row__column {
- @extend .stacked;
- margin-left: 8rem;
+ @extend .stacked;
+ margin-left: 8rem;
}
.logo-nav {
- height: 12rem;
- line-height: 12rem;
- text-indent: -9999px;
- display: block;
- margin-top: -4rem;
- padding-top: 4rem;
- background: #db4886 !important;
+ height: 12rem;
+ line-height: 12rem;
+ text-indent: -9999px;
+ display: block;
+ margin-top: -4rem;
+ padding-top: 4rem;
+ background: #db4886 !important;
}
.search {
- position: relative;
- border: none;
- line-height: 8rem;
- padding: 0 1.5em;
- color: #272727;
- background: #fff;
- border: 1px solid #ddd;
-}
-
- .search__label {
- // padding-left: 1em;
- }
-
- .search__input {
- background: none;
- border: 0;
- outline: 0;
- width: 100%;
- line-height: 20px;
- }
+ position: relative;
+ border: none;
+ line-height: 8rem;
+ padding: 0 1.5em;
+ color: #272727;
+ background: #fff;
+ border: 1px solid #ddd;
+}
+
+ .search__label {
+ // padding-left: 1em;
+ }
+
+ .search__input {
+ background: none;
+ border: 0;
+ outline: 0;
+ width: 100%;
+ line-height: 20px;
+ }
@-webkit-keyframes blink {
- 0% {
- opacity: 0;
- }
- 75% {
- opacity: 1;
- }
- 100% {
- opacity: 1;
- }
+ 0% {
+ opacity: 0;
+ }
+ 75% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 1;
+ }
}
.util {
- margin-left: -1px;
- border-top: 1px solid #ddd;
- border-bottom: 1px solid #ddd;
-}
- .util__item {
- @extend .stacked;
- border-left: 1px solid #ddd;
- &+.util__item {
- border-left-color: #eee;
- }
- }
+ margin-left: -1px;
+ border-top: 1px solid #ddd;
+ border-bottom: 1px solid #ddd;
+}
+ .util__item {
+ @extend .stacked;
+ border-left: 1px solid #ddd;
+ &+.util__item {
+ border-left-color: #eee;
+ }
+ }
.build-state-btn {
- height: 8rem;
- width: 8rem;
- text-align: center;
-}
- .build-state-btn__char {
- padding-top: 1.6rem;
- display: block;
- }
- .build-state-btn__suffix {
- padding-top: 0.4rem;
- display: block;
- }
+ height: 8rem;
+ width: 8rem;
+ text-align: center;
+}
+ .build-state-btn__char {
+ padding-top: 1.6rem;
+ display: block;
+ }
+ .build-state-btn__suffix {
+ padding-top: 0.4rem;
+ display: block;
+ }
.build-state-label {
- line-height: 8rem;
+ line-height: 8rem;
}
.hit {
- color: inherit;
- display: block;
+ color: inherit;
+ display: block;
}
.main {
- padding-top: 4rem;
-}
- .main__sidebar {
- width: 8rem;
- }
- .main__results {
- width: 8rem * 6;
- // min-height: 1px;
- // position: relative;
- }
- .main__detail {
- width: 8rem * 5;
- // min-height: 1px;
- // position: relative;
- }
+ padding-top: 4rem;
+}
+ .main__sidebar {
+ width: 8rem;
+ }
+ .main__results {
+ width: 8rem * 6;
+ // min-height: 1px;
+ // position: relative;
+ }
+ .main__detail {
+ width: 8rem * 5;
+ // min-height: 1px;
+ // position: relative;
+ }
.main__detail .detail {
- // position: absolute;
- // top: -10rem;
- // bottom: -4rem;
-
+ // position: absolute;
+ // top: -10rem;
+ // bottom: -4rem;
+
}
.results-state-label {
- padding-top: 3.3rem;
- line-height: 1.5;
- font-size: 1.1rem;
+ padding-top: 3.3rem;
+ line-height: 1.5;
+ font-size: 1.1rem;
}
.results {
- position: absolute;
- top: 16rem;
- bottom: 0;
- width: 48rem;
- overflow-y: auto;
+ position: absolute;
+ top: 16rem;
+ bottom: 0;
+ width: 48rem;
+ overflow-y: auto;
}
.result {
- padding: 0 2rem;
- position: relative;
- cursor: pointer;
- line-height: 8rem;
- -webkit-user-select: none;
- &+.result {
- border-top: 1px solid #ddd;
- }
+ padding: 0 2rem;
+ position: relative;
+ cursor: pointer;
+ line-height: 8rem;
+ -webkit-user-select: none;
+ &+.result {
+ border-top: 1px solid #ddd;
+ }
}
.result.is-focused {
- position: relative; // For .add-action
- background: #eee;
- border-left: 1px solid #ddd;
- border-right: 1px solid #ddd;
- &:before {
- content: '';
- position: absolute;
- top: 0; right: 0; bottom: 0; left: 0;
- // border: 1px solid #db4886; // TODO - Move color
- }
+ position: relative; // For .add-action
+ background: #eee;
+ border-left: 1px solid #ddd;
+ border-right: 1px solid #ddd;
+ &:before {
+ content: '';
+ position: absolute;
+ top: 0; right: 0; bottom: 0; left: 0;
+ // border: 1px solid #db4886; // TODO - Move color
+ }
}
.result__name {
- display: inline-block;
- line-height: 8rem;
- width: 80%;
- // opacity: 0.5;
- &:hover {
- // text-decoration: underline;
- opacity: 0.8;
- }
+ display: inline-block;
+ line-height: 8rem;
+ width: 80%;
+ // opacity: 0.5;
+ &:hover {
+ // text-decoration: underline;
+ opacity: 0.8;
+ }
}
.result__add-action {
- width: 20%;
- position: absolute;
- top: 0;
- bottom: 0; right: 0;
- padding-right: 2rem;
- padding-left: 2rem;
- font-weight: 600;
- display: none;
- opacity: 0.2;
- // text-align: right;
- &:before,
- &:after {
- content: '';
- background: #db4886;
- position: absolute;
- top: 0; bottom: 0; left: 0;
- margin-top: auto;
- margin-bottom: auto;
- }
- &:before {
- width: 4px;
- height: 20px;
- }
- &:after {
- height: 4px;
- width: 20px;
- left: -8px;
- }
- &:hover {
- // text-decoration: underline;
- }
+ width: 20%;
+ position: absolute;
+ top: 0;
+ bottom: 0; right: 0;
+ padding-right: 2rem;
+ padding-left: 2rem;
+ font-weight: 600;
+ display: none;
+ opacity: 0.2;
+ // text-align: right;
+ &:before,
+ &:after {
+ content: '';
+ background: #db4886;
+ position: absolute;
+ top: 0; bottom: 0; left: 0;
+ margin-top: auto;
+ margin-bottom: auto;
+ }
+ &:before {
+ width: 4px;
+ height: 20px;
+ }
+ &:after {
+ height: 4px;
+ width: 20px;
+ left: -8px;
+ }
+ &:hover {
+ // text-decoration: underline;
+ }
}
.result.is-added .result__add-action:before {
- display: none;
+ display: none;
}
.result:hover .result__add-action,
.result.is-focused .result__add-action {
- display: block;
+ display: block;
}
.result.is-focused .result__name,
.result.is-focused .result__add-action,
.result .result__add-action:hover {
- opacity: 1;
+ opacity: 1;
}
.result.is-added {
- color: #89B100;
+ color: #89B100;
}
.results-actions {
- padding-top: 4rem;
- li+li {
- padding-top: 1rem;
- }
+ padding-top: 4rem;
+ li+li {
+ padding-top: 1rem;
+ }
}
.detail {
- padding: 4rem;
- position: relative;
- h1 {
- font-size: 2.4rem;
- line-height: 1.2;
- font-weight: 300;
- margin-bottom: 0.5rem;
- padding-top: 2rem;
- }
- h1+p {
- margin-top: 0;
- }
- .desc {
- padding-top: 1rem;
- font-size: 1.2rem;
- line-height: 2;
- }
- h2 {
- font-size: 1.8rem;
- line-height: 1.2;
- font-weight: 300;
- margin: 0;
- padding-top: 2.5rem;
- }
- p {
- line-height: 3rem;
- }
- dt {
- float: left;
- clear: both;
- padding-top: 1rem;
- }
- dd {
- float: right;
- padding-top: 1rem;
- }
-}
- .detail__close {
- position: absolute;
- right: 4rem;
- top: 4rem;
- font-size: 1.1rem;
- line-height: 3.4rem;
-
- &:hover {
- opacity: 0.8;
- }
- }
+ padding: 4rem;
+ position: relative;
+ h1 {
+ font-size: 2.4rem;
+ line-height: 1.2;
+ font-weight: 300;
+ margin-bottom: 0.5rem;
+ padding-top: 2rem;
+ }
+ h1+p {
+ margin-top: 0;
+ }
+ .desc {
+ padding-top: 1rem;
+ font-size: 1.2rem;
+ line-height: 2;
+ }
+ h2 {
+ font-size: 1.8rem;
+ line-height: 1.2;
+ font-weight: 300;
+ margin: 0;
+ padding-top: 2.5rem;
+ }
+ p {
+ line-height: 3rem;
+ }
+ dt {
+ float: left;
+ clear: both;
+ padding-top: 1rem;
+ }
+ dd {
+ float: right;
+ padding-top: 1rem;
+ }
+}
+ .detail__close {
+ position: absolute;
+ right: 4rem;
+ top: 4rem;
+ font-size: 1.1rem;
+ line-height: 3.4rem;
+
+ &:hover {
+ opacity: 0.8;
+ }
+ }
.tags {
- margin-left: -1px;
- li {
- @extend .stacked;
- line-height: 1.1rem;
- margin-left: 1px;
- a {
- display: inline-block;
- padding: 0.7em;
- }
- }
+ margin-left: -1px;
+ li {
+ @extend .stacked;
+ line-height: 1.1rem;
+ margin-left: 1px;
+ a {
+ display: inline-block;
+ padding: 0.7em;
+ }
+ }
}
.detail--intro {
- padding: 0;
+ padding: 0;
}
.detail--intro p {
- line-height: 1.6;
- padding-top: 2em;
+ line-height: 1.6;
+ padding-top: 2em;
}
.logo {
- display: block;
- height: 100%;
- position: relative;
- img {
- position: absolute;
- top: 0; right: 0; bottom: 0; left: 0;
- margin: auto;
- display: block;
- width: 3rem;
- height: 3rem * 0.44;
- }
+ display: block;
+ height: 100%;
+ position: relative;
+ img {
+ position: absolute;
+ top: 0; right: 0; bottom: 0; left: 0;
+ margin: auto;
+ display: block;
+ width: 3rem;
+ height: 3rem * 0.44;
+ }
}
.current-filter {
- text-transform: capitalize;
-}
\ No newline at end of file
+ text-transform: capitalize;
+}
diff --git a/src/css/_old/_site.scss b/src/css/_old/_site.scss
index 5f4cdb8..7ce066b 100644
--- a/src/css/_old/_site.scss
+++ b/src/css/_old/_site.scss
@@ -1,40 +1,40 @@
html, body {
- height: 100%;
- overflow: visible;
+ height: 100%;
+ overflow: visible;
}
.container {
- display: table;
- height: 100%;
- width: 100%;
+ display: table;
+ height: 100%;
+ width: 100%;
}
.block {
- display: table-row;
- height: 1px;
+ display: table-row;
+ height: 1px;
}
.push {
- height: auto;
+ height: auto;
}
.build-state-btn {
- position: relative;
+ position: relative;
}
.build-state-btn span {
- position: absolute;
- left: 0; right: 0;
- top: 50%;
- -webkit-transform: translateY(-50%);
+ position: absolute;
+ left: 0; right: 0;
+ top: 50%;
+ -webkit-transform: translateY(-50%);
}
.intro {
- padding: 6rem 0;
- h1 {
- font-size: 5rem;
- font-weight: 100;
- letter-spacing: -0.06em;
- }
- p { max-width: 600px; }
+ padding: 6rem 0;
+ h1 {
+ font-size: 5rem;
+ font-weight: 100;
+ letter-spacing: -0.06em;
+ }
+ p { max-width: 600px; }
}
h1 a {
- border-bottom: 1px solid;
+ border-bottom: 1px solid;
}
diff --git a/src/css/_old/_typography.scss b/src/css/_old/_typography.scss
index b4c28a2..919ce1c 100644
--- a/src/css/_old/_typography.scss
+++ b/src/css/_old/_typography.scss
@@ -6,49 +6,49 @@
*/
html {
- font-size: 62.5%;
- // -webkit-font-smoothing: antialiased;
+ font-size: 62.5%;
+ // -webkit-font-smoothing: antialiased;
}
body {
- font-family: 'Open Sans', serif;
- font-weight: 300;
- font-size: 1.4rem;
- letter-spacing: 0.05em;
+ font-family: 'Open Sans', serif;
+ font-weight: 300;
+ font-size: 1.4rem;
+ letter-spacing: 0.05em;
}
strong {
- font-weight: 600;
+ font-weight: 600;
}
p, ul, ol {
- /*font-size: 1.4rem;*/
+ /*font-size: 1.4rem;*/
}
.t_search-label {
- font-size: 1.8rem;
- line-height: 6rem;
- font-style: italic;
- font-weight: 300;
- letter-spacing: 0.075em;
+ font-size: 1.8rem;
+ line-height: 6rem;
+ font-style: italic;
+ font-weight: 300;
+ letter-spacing: 0.075em;
}
.t_subtitle {
- font-size: 1.8rem;
- font-weight: 600;
+ font-size: 1.8rem;
+ font-weight: 600;
}
.t_action {
- text-transform: uppercase;
+ text-transform: uppercase;
}
.t_action--primary {
- font-weight: 600;
-}
+ font-weight: 600;
+}
.t_label {
- font-size: 1.1rem;
+ font-size: 1.1rem;
}
dt {
-
-}
\ No newline at end of file
+
+}
diff --git a/src/css/color.scss b/src/css/color.scss
index f5e88ce..61ad232 100644
--- a/src/css/color.scss
+++ b/src/css/color.scss
@@ -1,67 +1,67 @@
a {
- color: inherit;
+ color: inherit;
}
.c-base {
- background: #ececec;
- color: #444;
- border-color: #ddd;
- * {
- border-color: #ddd;
- }
+ background: #ececec;
+ color: #444;
+ border-color: #ddd;
+ * {
+ border-color: #ddd;
+ }
}
.c-reverse {
- background: #32292c;
- color: #f0f0f0;
+ background: #32292c;
+ color: #f0f0f0;
}
.c-reverseBorder {
- border-color: #444 !important;
+ border-color: #444 !important;
}
.c-reverseContrast {
- background: #1e1619;
- color: #fff;
+ background: #1e1619;
+ color: #fff;
}
.c-contrast {
- background: #fff;
- color: #444;
- border-color: #ddd;
+ background: #fff;
+ color: #444;
+ border-color: #ddd;
}
.c-selectable {
- background: rgba(#fff, 0.6);
- color: rgba(#444, 0.35);
+ background: rgba(#fff, 0.6);
+ color: rgba(#444, 0.35);
}
.c-filter {
- background: #f8fafc;
- color: #4a7fab;
+ background: #f8fafc;
+ color: #4a7fab;
}
.c-aux {
- color: #aaa8a9;
+ color: #aaa8a9;
}
.c-action {
- color: #e279a2;
- .Icon {
- background: #e279a2;
- }
+ color: #e279a2;
+ .Icon {
+ background: #e279a2;
+ }
}
.c-btn {
- background: #db4886;
- color: #fff;
+ background: #db4886;
+ color: #fff;
}
.c-menuBar {
- background: #444;
+ background: #444;
}
.c-added {
- background: #85d900;
- color: #fff;
-}
\ No newline at end of file
+ background: #85d900;
+ color: #fff;
+}
diff --git a/src/css/components/_action.scss b/src/css/components/_action.scss
index 7d88863..85e0b62 100644
--- a/src/css/components/_action.scss
+++ b/src/css/components/_action.scss
@@ -1,15 +1,15 @@
.Action {
- .Action-label,
- .Action-icon {
- display: inline-block;
- vertical-align: middle;
- }
- .Action-icon {
- padding-left: 1em; // If icon is on right, ensure it has padding for the label
- &:first-child {
- // Switch the padding round if the icon is on left
- padding-right: 1em;
- padding-left: 0;
- }
- }
-}
\ No newline at end of file
+ .Action-label,
+ .Action-icon {
+ display: inline-block;
+ vertical-align: middle;
+ }
+ .Action-icon {
+ padding-left: 1em; // If icon is on right, ensure it has padding for the label
+ &:first-child {
+ // Switch the padding round if the icon is on left
+ padding-right: 1em;
+ padding-left: 0;
+ }
+ }
+}
diff --git a/src/css/components/_bar.scss b/src/css/components/_bar.scss
index 334f707..827f8ff 100644
--- a/src/css/components/_bar.scss
+++ b/src/css/components/_bar.scss
@@ -1,8 +1,8 @@
.Bar {
- display: table;
- width: 100%;
- .Bar-item {
- display: table-cell;
- vertical-align: middle;
- }
-}
\ No newline at end of file
+ display: table;
+ width: 100%;
+ .Bar-item {
+ display: table-cell;
+ vertical-align: middle;
+ }
+}
diff --git a/src/css/components/_box-set.scss b/src/css/components/_box-set.scss
index 3365f60..617bf0c 100644
--- a/src/css/components/_box-set.scss
+++ b/src/css/components/_box-set.scss
@@ -4,7 +4,7 @@
*/
.BoxSet {
- &>.BoxSet-item~.BoxSet-item {
- margin-top: 1px;
- }
-}
\ No newline at end of file
+ &>.BoxSet-item~.BoxSet-item {
+ margin-top: 1px;
+ }
+}
diff --git a/src/css/components/_box.scss b/src/css/components/_box.scss
index 95db88a..74c3860 100644
--- a/src/css/components/_box.scss
+++ b/src/css/components/_box.scss
@@ -3,16 +3,16 @@
*/
.Box {
- @include rem(padding, 3);
- &.is-selected {
- @extend .c-contrast;
- }
+ @include rem(padding, 3);
+ &.is-selected {
+ @extend .c-contrast;
+ }
}
/**
* Less padding. useful for labels, etc.
*/
.Box--minor {
- @include rem(padding-top, 2);
- @include rem(padding-bottom, 2);
-}
\ No newline at end of file
+ @include rem(padding-top, 2);
+ @include rem(padding-bottom, 2);
+}
diff --git a/src/css/components/_container.scss b/src/css/components/_container.scss
index 9bbfe61..f5382e9 100644
--- a/src/css/components/_container.scss
+++ b/src/css/components/_container.scss
@@ -1,3 +1,3 @@
.Container {
- @include rem(margin, 0, 4);
-}
\ No newline at end of file
+ @include rem(margin, 0, 4);
+}
diff --git a/src/css/components/_fruit-machine.scss b/src/css/components/_fruit-machine.scss
index 95caf18..63fee0a 100644
--- a/src/css/components/_fruit-machine.scss
+++ b/src/css/components/_fruit-machine.scss
@@ -1,29 +1,29 @@
.FruitMachine {
- overflow: hidden;
- .FruitMachine-item {
- overflow: hidden; // Why?
- }
- .FruitMachine-transport {
- @include transform(translate3d(0, 0, 0));
- -webkit-transition: -webkit-transform 0.6s cubic-bezier(1.000, 0.000, 0.000, 1.000);
- }
- .ChooseDetects-link {
- // TODO :: move to the right place
- // text-transform: uppercase;
- // font-size: 2rem;
- // font-weight: 600;
- padding: 0 3rem;
- -webkit-transition: background-color 0.3s 0.2s ease;
- display: block;
- }
- &.is-moved {
- .FruitMachine-transport {
- @include transform(translate3d(0, -100%, 0));
- }
- .ChooseDetects-link {
- // TODO ?????
- background-color: transparent;
- color: #eee;
- }
- }
-}
\ No newline at end of file
+ overflow: hidden;
+ .FruitMachine-item {
+ overflow: hidden; // Why?
+ }
+ .FruitMachine-transport {
+ @include transform(translate3d(0, 0, 0));
+ -webkit-transition: -webkit-transform 0.6s cubic-bezier(1.000, 0.000, 0.000, 1.000);
+ }
+ .ChooseDetects-link {
+ // TODO :: move to the right place
+ // text-transform: uppercase;
+ // font-size: 2rem;
+ // font-weight: 600;
+ padding: 0 3rem;
+ -webkit-transition: background-color 0.3s 0.2s ease;
+ display: block;
+ }
+ &.is-moved {
+ .FruitMachine-transport {
+ @include transform(translate3d(0, -100%, 0));
+ }
+ .ChooseDetects-link {
+ // TODO ?????
+ background-color: transparent;
+ color: #eee;
+ }
+ }
+}
diff --git a/src/css/components/_grid.scss b/src/css/components/_grid.scss
index 50fd18e..9c6a67f 100644
--- a/src/css/components/_grid.scss
+++ b/src/css/components/_grid.scss
@@ -4,21 +4,21 @@
*/
.Grid--withGutter {
- @include rem(margin, 0, -2);
- & > .Grid-cell {
- @include rem(padding, 0, 2);
- }
+ @include rem(margin, 0, -2);
+ & > .Grid-cell {
+ @include rem(padding, 0, 2);
+ }
}
.Grid--withDividers {
- margin: 0 0 0 -1px; // NOTE :: compensates boxel model on the parent element (unidirectional, unlike Grid--withGutter)
- &>.Grid-cell {
- border-left-width: 1px;
- &:first-child {
- border-left-width: 0;
- padding-left: 1px; // NOTE :: Keeps content-box same width, replacing border for padding
- }
- }
+ margin: 0 0 0 -1px; // NOTE :: compensates boxel model on the parent element (unidirectional, unlike Grid--withGutter)
+ &>.Grid-cell {
+ border-left-width: 1px;
+ &:first-child {
+ border-left-width: 0;
+ padding-left: 1px; // NOTE :: Keeps content-box same width, replacing border for padding
+ }
+ }
}
// TODO :: something to handle grid 'lips'
diff --git a/src/css/components/_icon.scss b/src/css/components/_icon.scss
index c7723a6..3d9ac7d 100644
--- a/src/css/components/_icon.scss
+++ b/src/css/components/_icon.scss
@@ -1,25 +1,25 @@
.Icon {
- display: inline-block;
- vertical-align: text-top;
- @include rem(width, 1.6);
- @include rem(height, 1.6);
- background-size: 100% auto;
+ display: inline-block;
+ vertical-align: text-top;
+ @include rem(width, 1.6);
+ @include rem(height, 1.6);
+ background-size: 100% auto;
}
.Icon--menu {
- @include rem(width, 4);
- @include rem(height, 4);
+ @include rem(width, 4);
+ @include rem(height, 4);
}
.Icon--build {
- @include rem(width, 2);
- @include rem(height, 2);
- @include rem(line-height, 1.5);
- @include rem(border-width, 0.3);
- border-radius: 999px;
- .IconRing--build-inner {
- border-radius: 999px;
- @include rem(width, 0.8);
- @include rem(height, 0.8);
- }
-}
\ No newline at end of file
+ @include rem(width, 2);
+ @include rem(height, 2);
+ @include rem(line-height, 1.5);
+ @include rem(border-width, 0.3);
+ border-radius: 999px;
+ .IconRing--build-inner {
+ border-radius: 999px;
+ @include rem(width, 0.8);
+ @include rem(height, 0.8);
+ }
+}
diff --git a/src/css/components/_main-header.scss b/src/css/components/_main-header.scss
index 8887340..3b201c1 100644
--- a/src/css/components/_main-header.scss
+++ b/src/css/components/_main-header.scss
@@ -1,38 +1,38 @@
.MainHeader {
- height: 120px;
- .MainHeader-mid {
- display: table;
- width: 100%;
- height: 100%;
- table-layout: fixed;
- overflow: hidden;
- }
- .MainHeader-logo {
- width: 320px;
- display: table-cell;
- vertical-align: middle;
- // padding-left: 4rem;
- }
- .MainHeader-body {
- width: auto;
- display: table-cell;
- vertical-align: top;
- }
- .MainHeader-row {
- -webkit-transition: height 0.2s ease;
- height: 100%;
- &+.MainHeader-row {
- height: 0;
- }
- }
- &.is-browser-open {
- .MainHeader-row {
- height: 50% !important;
- }
- }
+ height: 120px;
+ .MainHeader-mid {
+ display: table;
+ width: 100%;
+ height: 100%;
+ table-layout: fixed;
+ overflow: hidden;
+ }
+ .MainHeader-logo {
+ width: 320px;
+ display: table-cell;
+ vertical-align: middle;
+ // padding-left: 4rem;
+ }
+ .MainHeader-body {
+ width: auto;
+ display: table-cell;
+ vertical-align: top;
+ }
+ .MainHeader-row {
+ -webkit-transition: height 0.2s ease;
+ height: 100%;
+ &+.MainHeader-row {
+ height: 0;
+ }
+ }
+ &.is-browser-open {
+ .MainHeader-row {
+ height: 50% !important;
+ }
+ }
}
.MainHeader-countList {
- border-left-width: 1px;
- @include rem(padding, 0, 3);
+ border-left-width: 1px;
+ @include rem(padding, 0, 3);
}
diff --git a/src/css/components/_main-nav.scss b/src/css/components/_main-nav.scss
index e16db40..d78500e 100644
--- a/src/css/components/_main-nav.scss
+++ b/src/css/components/_main-nav.scss
@@ -1,142 +1,142 @@
.MainNav {
- display: table;
- table-layout: fixed;
- width: 100%;
- .MainNav-item {
- display: table-cell;
- vertical-align: middle;
- width: auto;
- font-size: 1.6em;
- text-transform: uppercase;
- border-left: 1px solid rgba(#ccc, 1);
- }
+ display: table;
+ table-layout: fixed;
+ width: 100%;
+ .MainNav-item {
+ display: table-cell;
+ vertical-align: middle;
+ width: auto;
+ font-size: 1.6em;
+ text-transform: uppercase;
+ border-left: 1px solid rgba(#ccc, 1);
+ }
}
.NavItem {
- display: table;
- width: 100%;
- height: 100%;
- -webkit-transition: background-color 0.1s ease;
- background: #fff;
- .NavItem-inner {
- display: table-cell;
- vertical-align: middle;
- text-align: center;
- width: 100%;
- }
- &:hover,
- &.is-current {
- background: #f0f0f0;
- }
+ display: table;
+ width: 100%;
+ height: 100%;
+ -webkit-transition: background-color 0.1s ease;
+ background: #fff;
+ .NavItem-inner {
+ display: table-cell;
+ vertical-align: middle;
+ text-align: center;
+ width: 100%;
+ }
+ &:hover,
+ &.is-current {
+ background: #f0f0f0;
+ }
}
.BrowserHeader {
- display: table;
- width: 100%;
- height: 100%;
- table-layout: fixed;
- .BrowserHeader-input {
- display: block;
- box-sizing: border-box;
- height: 100%;
- font-size: 1.8rem;
- padding: 0 1.5rem;
- background: #272727;
- color: #fff;
- width: 100%;
- border: 0;
- &:focus {
- outline: 0;
- }
- }
- .BrowserHeader-col {
- display: table-cell;
- vertical-align: middle;
- width: auto;
- height: 100%;
- }
+ display: table;
+ width: 100%;
+ height: 100%;
+ table-layout: fixed;
+ .BrowserHeader-input {
+ display: block;
+ box-sizing: border-box;
+ height: 100%;
+ font-size: 1.8rem;
+ padding: 0 1.5rem;
+ background: #272727;
+ color: #fff;
+ width: 100%;
+ border: 0;
+ &:focus {
+ outline: 0;
+ }
+ }
+ .BrowserHeader-col {
+ display: table-cell;
+ vertical-align: middle;
+ width: auto;
+ height: 100%;
+ }
}
// .MainNav {
-// white-space: nowrap;
-// position: relative;
-// z-index: 1;
-// margin-right: -40px;
-// .MainNav-mid {
-// position: absolute;
-// left: 0;
-// top: 0;
-// right: 0;
-// overflow: hidden;
-// }
-// .MainNav-inner {
-// display: inline-block;
-// vertical-align: top;
-// position: relative;
-// -webkit-transition: -webkit-transform 0.6s 0.6s cubic-bezier(1.000, 0.000, 0.000, 1.000);;
-// -webkit-transform: translate3d(0, 0, 0);
-// }
-// .MainNav-list {
-// left: 0;
-// background: #fff;
-// position: absolute;
-// top: 0;
-// }
-// .MainNav-icon {
-// position: relative;
-// z-index: 1;
-// }
+// white-space: nowrap;
+// position: relative;
+// z-index: 1;
+// margin-right: -40px;
+// .MainNav-mid {
+// position: absolute;
+// left: 0;
+// top: 0;
+// right: 0;
+// overflow: hidden;
+// }
+// .MainNav-inner {
+// display: inline-block;
+// vertical-align: top;
+// position: relative;
+// -webkit-transition: -webkit-transform 0.6s 0.6s cubic-bezier(1.000, 0.000, 0.000, 1.000);;
+// -webkit-transform: translate3d(0, 0, 0);
+// }
+// .MainNav-list {
+// left: 0;
+// background: #fff;
+// position: absolute;
+// top: 0;
+// }
+// .MainNav-icon {
+// position: relative;
+// z-index: 1;
+// }
// }
// .NavList {
-// .NavList-item {
-// width: 25%;
-// position: relative;
-// display: inline-block;
-// vertical-align: top;
-// }
+// .NavList-item {
+// width: 25%;
+// position: relative;
+// display: inline-block;
+// vertical-align: top;
+// }
-// .NavList-link {
-// @include rem(line-height, 13rem);
-// -webkit-transform: translate3d(0, -13rem, 0);
-// -webkit-transition: -webkit-transform 0.6s 0s cubic-bezier(1.000, 0.000, 0.000, 1.000), background-color 0.2s ease, border-color 1s ease;
-// .MainNav.is-active & {
-// -webkit-transform: translate3d(0, 0, 0);
-// }
-// .u-vc {
-// width: 100%;
-// }
-// &:hover {
-// background: #f7f7f7;
-// .NavList-underline {
-// border-bottom-width: 1px;
-// }
-// }
-// }
-// .NavList-item+.NavList-item .NavList-link {
-
-// // TODO :: move to to color.scss
-// .MainNav.is-active & {
-// border-left-width: 1px;
-// }
-// }
-// .NavList-item>.NavList-link { -webkit-transition-delay: 0.4s, 0; .MainNav.is-active & { -webkit-transition-delay: 0.8s, 0; } }
-// .NavList-item:nth-child(2)>.NavList-link { -webkit-transition-delay: 0.3s, 0; .MainNav.is-active & { -webkit-transition-delay: 0.9s, 0; } }
-// .NavList-item:nth-child(3)>.NavList-link { -webkit-transition-delay: 0.2s, 0; .MainNav.is-active & { -webkit-transition-delay: 1s, 0; } }
-// .NavList-item:nth-child(4)>.NavList-link { -webkit-transition-delay: 0.1s, 0; .MainNav.is-active & { -webkit-transition-delay: 1.1s, 0; } }
-
+// .NavList-link {
+// @include rem(line-height, 13rem);
+// -webkit-transform: translate3d(0, -13rem, 0);
+// -webkit-transition: -webkit-transform 0.6s 0s cubic-bezier(1.000, 0.000, 0.000, 1.000), background-color 0.2s ease, border-color 1s ease;
+// .MainNav.is-active & {
+// -webkit-transform: translate3d(0, 0, 0);
+// }
+// .u-vc {
+// width: 100%;
+// }
+// &:hover {
+// background: #f7f7f7;
+// .NavList-underline {
+// border-bottom-width: 1px;
+// }
+// }
+// }
+// .NavList-item+.NavList-item .NavList-link {
+
+// // TODO :: move to to color.scss
+// .MainNav.is-active & {
+// border-left-width: 1px;
+// }
+// }
+// .NavList-item>.NavList-link { -webkit-transition-delay: 0.4s, 0; .MainNav.is-active & { -webkit-transition-delay: 0.8s, 0; } }
+// .NavList-item:nth-child(2)>.NavList-link { -webkit-transition-delay: 0.3s, 0; .MainNav.is-active & { -webkit-transition-delay: 0.9s, 0; } }
+// .NavList-item:nth-child(3)>.NavList-link { -webkit-transition-delay: 0.2s, 0; .MainNav.is-active & { -webkit-transition-delay: 1s, 0; } }
+// .NavList-item:nth-child(4)>.NavList-link { -webkit-transition-delay: 0.1s, 0; .MainNav.is-active & { -webkit-transition-delay: 1.1s, 0; } }
+
-// // .NavList-link:hover .NavList-underline {
-// // // TODO :: move to color.scss
-// // border-bottom-color: #999;
-
-// // }
+// // .NavList-link:hover .NavList-underline {
+// // // TODO :: move to color.scss
+// // border-bottom-color: #999;
+
+// // }
// }
// .MainNav {
-// &.is-animation-disabled {
-// &, * {
-// -webkit-transition: none;
-// }
-// }
+// &.is-animation-disabled {
+// &, * {
+// -webkit-transition: none;
+// }
+// }
// }
diff --git a/src/css/components/_menu-icon.scss b/src/css/components/_menu-icon.scss
index 4ab085d..5238c9a 100644
--- a/src/css/components/_menu-icon.scss
+++ b/src/css/components/_menu-icon.scss
@@ -1,27 +1,27 @@
.MenuIcon {
- width: 40px;
- height: 18px;
+ width: 40px;
+ height: 18px;
}
.MenuIcon-bar {
- height: 2px;
- width: 100%;
- position: relative;
- -webkit-transform: translate3d(0, 0, 0);
- -webkit-transition: -webkit-transform 0.2s ease-out;
- &+.MenuIcon-bar {
- margin-top: 6px;
- }
+ height: 2px;
+ width: 100%;
+ position: relative;
+ -webkit-transform: translate3d(0, 0, 0);
+ -webkit-transition: -webkit-transform 0.2s ease-out;
+ &+.MenuIcon-bar {
+ margin-top: 6px;
+ }
}
.MainNav.is-active {
- .MenuIcon-bar {
- &:first-child {
- -webkit-transform: translate3d(0, 8px, 0);
- }
- &:last-child {
- -webkit-transform: translate3d(0, -8px, 0);
- }
- }
+ .MenuIcon-bar {
+ &:first-child {
+ -webkit-transform: translate3d(0, 8px, 0);
+ }
+ &:last-child {
+ -webkit-transform: translate3d(0, -8px, 0);
+ }
+ }
}
diff --git a/src/css/components/_overlay.scss b/src/css/components/_overlay.scss
index 07d01f8..94d09b2 100644
--- a/src/css/components/_overlay.scss
+++ b/src/css/components/_overlay.scss
@@ -1,27 +1,27 @@
.Overlay {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background: rgba(#32292c, 0.8);
- color: #f0f0f0;
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: rgba(#32292c, 0.8);
+ color: #f0f0f0;
}
- .Overlay-inner {
- overflow-y: auto;
- height: 100%;
- }
+ .Overlay-inner {
+ overflow-y: auto;
+ height: 100%;
+ }
- .Overlay-content {
- width: 600px;
- margin-left: auto;
- margin-right: auto;
- display: table;
- height: 100%;
- }
+ .Overlay-content {
+ width: 600px;
+ margin-left: auto;
+ margin-right: auto;
+ display: table;
+ height: 100%;
+ }
- .Overlay-contentInner {
- display: table-cell;
- vertical-align: middle;
- }
\ No newline at end of file
+ .Overlay-contentInner {
+ display: table-cell;
+ vertical-align: middle;
+ }
diff --git a/src/css/components/_ring.scss b/src/css/components/_ring.scss
index cf09d3b..ab5e846 100644
--- a/src/css/components/_ring.scss
+++ b/src/css/components/_ring.scss
@@ -5,63 +5,63 @@
$easeInOutExpo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
.Ring {
- border-width: 0.2em;
- border-radius: 999px;
- display: inline-block;
- width: 2em;
- height: 2em;
- font-size: 1em;
- overflow: hidden;
- line-height: 1.6em;
- text-align: center;
+ border-width: 0.2em;
+ border-radius: 999px;
+ display: inline-block;
+ width: 2em;
+ height: 2em;
+ font-size: 1em;
+ overflow: hidden;
+ line-height: 1.6em;
+ text-align: center;
}
.Ring-inner {
- height: 100%;
- line-height: 1.6em;
- -webkit-transform: translate3d(0,0,0);
- -webkit-transition: -webkit-transform 0.4s $easeInOutExpo;
+ height: 100%;
+ line-height: 1.6em;
+ -webkit-transform: translate3d(0,0,0);
+ -webkit-transition: -webkit-transform 0.4s $easeInOutExpo;
}
.Ring.is-moved {
- .Ring-inner {
- -webkit-transform: translate3d(0,-1.6em,0);
- }
+ .Ring-inner {
+ -webkit-transform: translate3d(0,-1.6em,0);
+ }
}
.Ring--small {
- font-size: 1.4em;
- cursor: pointer;
- border-color: rgba(#db4886, 0.3) !important;
- img {
- width: 1em;
- height: 1em;
- }
- &:hover {
- border-color: rgba(#db4886, 1) !important;
- }
- .Ring-inner {
+ font-size: 1.4em;
+ cursor: pointer;
+ border-color: rgba(#db4886, 0.3) !important;
+ img {
+ width: 1em;
+ height: 1em;
+ }
+ &:hover {
+ border-color: rgba(#db4886, 1) !important;
+ }
+ .Ring-inner {
- }
- &.is-moved .Ring-inner {
- -webkit-transform: translate3d(0,-1.7em,0);
- }
+ }
+ &.is-moved .Ring-inner {
+ -webkit-transform: translate3d(0,-1.7em,0);
+ }
}
.Ring--close {
- border-color: rgba(#444, 0.3) !important;
- &:hover {
- border-color: #444 !important;
- }
+ border-color: rgba(#444, 0.3) !important;
+ &:hover {
+ border-color: #444 !important;
+ }
}
.Ring--selection {
- -webkit-transition: border-color 0.4s ease;
- cursor: pointer;
- &:hover {
- border-color: rgba(#fff, 0.5) !important;
- }
- &.is-active {
- border-color: rgba(#fff, 1) !important;
- }
-}
\ No newline at end of file
+ -webkit-transition: border-color 0.4s ease;
+ cursor: pointer;
+ &:hover {
+ border-color: rgba(#fff, 0.5) !important;
+ }
+ &.is-active {
+ border-color: rgba(#fff, 1) !important;
+ }
+}
diff --git a/src/css/components/_search-bar.scss b/src/css/components/_search-bar.scss
index 6f97d3b..998c021 100644
--- a/src/css/components/_search-bar.scss
+++ b/src/css/components/_search-bar.scss
@@ -1,12 +1,12 @@
.SearchBar {
- background: transparent;
- @include rem(line-height, 7);
- @include rem(height, 7);
- @include rem(padding, 0, 3);
- width: 100%; // TODO :: is this needed
+ background: transparent;
+ @include rem(line-height, 7);
+ @include rem(height, 7);
+ @include rem(padding, 0, 3);
+ width: 100%; // TODO :: is this needed
}
input.SearchBar {
- border: 0; // Remove default input border
- outline: 0; // Prevent outline on focus
+ border: 0; // Remove default input border
+ outline: 0; // Prevent outline on focus
}
diff --git a/src/css/layout.scss b/src/css/layout.scss
index 655883b..de55f68 100644
--- a/src/css/layout.scss
+++ b/src/css/layout.scss
@@ -1,8 +1,8 @@
* {
- box-sizing: border-box;
- border: 0px solid; // NOTE :: Define borders using 'border-width' in components, and keep border-color in color.scss
+ box-sizing: border-box;
+ border: 0px solid; // NOTE :: Define borders using 'border-width' in components, and keep border-color in color.scss
}
html, body, #app-container, .App {
- height: 100%;
-}
\ No newline at end of file
+ height: 100%;
+}
diff --git a/src/css/main.scss b/src/css/main.scss
index 9f0b436..e3c8041 100644
--- a/src/css/main.scss
+++ b/src/css/main.scss
@@ -29,196 +29,196 @@
$easeInOutExpo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
.OpenSide {
- .OpenSide-item {
- -webkit-transition: width 0.6s 0s $easeInOutExpo;
- .FruitMachine--forOpenSide.is-moved & {
- -webkit-transition-delay: 0.6s;
- }
- }
+ .OpenSide-item {
+ -webkit-transition: width 0.6s 0s $easeInOutExpo;
+ .FruitMachine--forOpenSide.is-moved & {
+ -webkit-transition-delay: 0.6s;
+ }
+ }
}
.FruitMachine--forOpenSide {
- .FruitMachine-transport {
- -webkit-transition-delay: 0.6s;
- }
- &.is-moved {
- .FruitMachine-transport {
- -webkit-transition-delay: 0s;
- }
- }
+ .FruitMachine-transport {
+ -webkit-transition-delay: 0.6s;
+ }
+ &.is-moved {
+ .FruitMachine-transport {
+ -webkit-transition-delay: 0s;
+ }
+ }
}
.TypeList {
- .TypeList-item+.TypeList-item {
- padding-top: 0.6em;
- }
- .TypeList-item>a {
- display: block;
- &:hover {
- opacity: 0.5;
- }
- }
- .TypeList-count {
- float: right;
- }
+ .TypeList-item+.TypeList-item {
+ padding-top: 0.6em;
+ }
+ .TypeList-item>a {
+ display: block;
+ &:hover {
+ opacity: 0.5;
+ }
+ }
+ .TypeList-count {
+ float: right;
+ }
}
.Btn {
- @include rem(line-height, 13);
+ @include rem(line-height, 13);
}
.App-main {
- @include rem(padding-top, 4);
+ @include rem(padding-top, 4);
}
.NoItemsMessage {
- @include rem(padding, 0, 6);
+ @include rem(padding, 0, 6);
}
.Result {
- -webkit-transition: outline-width 0.2s ease;
- outline: 0 solid #fff;
- cursor: pointer;
- color: #999;
- &:hover {
- color: #444;
- }
- &.is-selected {
- position: relative;
- z-index: 1;
- outline-width: 10px;
- }
+ -webkit-transition: outline-width 0.2s ease;
+ outline: 0 solid #fff;
+ cursor: pointer;
+ color: #999;
+ &:hover {
+ color: #444;
+ }
+ &.is-selected {
+ position: relative;
+ z-index: 1;
+ outline-width: 10px;
+ }
}
.Result-icon {
- position: absolute;
- right: 2em;
- top: 0;
- bottom: 0;
- width: 3em;
- height: 3em;
- line-height: (3em - 0.4em);
- margin: auto;
- -webkit-transition: background 0.4s ease, border-color 0.4s ease;
- .Result.is-selected &,
- &:hover {
- border-color: #444;
- .Ring-inner>img {
- opacity: 1;
- }
- }
- .Result.is-added & {
- border-color: #85d900;
- -webkit-transition-delay: 0.2s, 0.2s;
- .Ring-inner>img {
- opacity: 1;
- }
- }
- .Ring-inner {
- line-height: (3em - 0.4em);
- img {
- width: 1.5em;
- height: 1.5em;
- opacity: 0.5;
- }
- }
- &.is-moved {
- .Ring-inner {
- -webkit-transform: translate3d(0, 0 - (3em - 0.4em),0);
- }
- }
+ position: absolute;
+ right: 2em;
+ top: 0;
+ bottom: 0;
+ width: 3em;
+ height: 3em;
+ line-height: (3em - 0.4em);
+ margin: auto;
+ -webkit-transition: background 0.4s ease, border-color 0.4s ease;
+ .Result.is-selected &,
+ &:hover {
+ border-color: #444;
+ .Ring-inner>img {
+ opacity: 1;
+ }
+ }
+ .Result.is-added & {
+ border-color: #85d900;
+ -webkit-transition-delay: 0.2s, 0.2s;
+ .Ring-inner>img {
+ opacity: 1;
+ }
+ }
+ .Ring-inner {
+ line-height: (3em - 0.4em);
+ img {
+ width: 1.5em;
+ height: 1.5em;
+ opacity: 0.5;
+ }
+ }
+ &.is-moved {
+ .Ring-inner {
+ -webkit-transform: translate3d(0, 0 - (3em - 0.4em),0);
+ }
+ }
}
.CombinationMark {
- text-align: center;
- display: block; // For
- .CombinationMark-logo {
- display: inline-block;
- width: 4em;
- }
- .CombinationMark-text {
- color: #db4886; // TODO :: color
- padding-left: 0.5em;
- font-size: 2.2em;
- }
+ text-align: center;
+ display: block; // For
+ .CombinationMark-logo {
+ display: inline-block;
+ width: 4em;
+ }
+ .CombinationMark-text {
+ color: #db4886; // TODO :: color
+ padding-left: 0.5em;
+ font-size: 2.2em;
+ }
}
.HomePage {
- li+li {
- padding-top: 1.6rem;
- }
+ li+li {
+ padding-top: 1.6rem;
+ }
}
.HomePage-hero {
- @include rem(padding, 5, 0);
+ @include rem(padding, 5, 0);
}
.HomePage-heading {
- font-size: 10rem; letter-spacing: -0.03em; line-height: 1.1
+ font-size: 10rem; letter-spacing: -0.03em; line-height: 1.1
}
.HomePage-content {
- max-width: 70rem; padding-top: 2em
+ max-width: 70rem; padding-top: 2em
}
.HomePage-subHeading {
- line-height: 1.5;
+ line-height: 1.5;
}
.HomePage-cta {
- background-color: #db4886; color: #fff; padding: 0.8em 1em;
- -webkit-transition: opacity 0.3s ease;
- &:hover {
- opacity: 0.5;
- }
+ background-color: #db4886; color: #fff; padding: 0.8em 1em;
+ -webkit-transition: opacity 0.3s ease;
+ &:hover {
+ opacity: 0.5;
+ }
}
.HomePage-secondaryCta {
- margin-left: 1em;
- padding: 0.8em 1em;
- &>span {
- border-bottom: 1px solid #ccc;
- }
+ margin-left: 1em;
+ padding: 0.8em 1em;
+ &>span {
+ border-bottom: 1px solid #ccc;
+ }
}
.pageswitch-enter,
.pageswitch-leave {
- position: absolute;
- top: 17rem; right: 4rem; bottom: 0; left: 4rem;
- .ResultList {
- top: 0 !important;
- }
+ position: absolute;
+ top: 17rem; right: 4rem; bottom: 0; left: 4rem;
+ .ResultList {
+ top: 0 !important;
+ }
}
.MainNav-icon, .Btn {
- cursor: pointer;
+ cursor: pointer;
}
.ResultsList {
- -webkit-transition: all 0.2s ease;
- position: absolute;
- top: 17rem;
- bottom: 0;
- width: 51.12%;
- overflow-y: auto;
- margin-left: -4rem;
- margin-right: -4rem;
- padding-left: 4rem;
- padding-right: 4rem;
- margin-top: -4rem;
- padding-top: 4rem;
+ -webkit-transition: all 0.2s ease;
+ position: absolute;
+ top: 17rem;
+ bottom: 0;
+ width: 51.12%;
+ overflow-y: auto;
+ margin-left: -4rem;
+ margin-right: -4rem;
+ padding-left: 4rem;
+ padding-right: 4rem;
+ margin-top: -4rem;
+ padding-top: 4rem;
}
.pageswitch-enter {
opacity: 0.01;
- -webkit-transform: translate3d(0,100px,0);
+ -webkit-transform: translate3d(0,100px,0);
transition: opacity 0.6s 0.2s $easeInOutExpo, -webkit-transform 0.6s 0.2s $easeInOutExpo;
}
.pageswitch-leave {
- opacity: 1;
- -webkit-transform: translate3d(0,0,0);
- transition: opacity 0.6s $easeInOutExpo, -webkit-transform 0.6s $easeInOutExpo;
+ opacity: 1;
+ -webkit-transform: translate3d(0,0,0);
+ transition: opacity 0.6s $easeInOutExpo, -webkit-transform 0.6s $easeInOutExpo;
}
.pageswitch-enter.pageswitch-enter-active {
@@ -227,6 +227,6 @@ $easeInOutExpo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
}
.pageswitch-leave.pageswitch-leave-active {
- opacity: 0.01;
- -webkit-transform: translate3d(0,100px,0);
+ opacity: 0.01;
+ -webkit-transform: translate3d(0,100px,0);
}
diff --git a/src/css/mixins/rem.scss b/src/css/mixins/rem.scss
index 20133ec..ea49d53 100644
--- a/src/css/mixins/rem.scss
+++ b/src/css/mixins/rem.scss
@@ -4,32 +4,32 @@
@function strip-unit($num) {
- @return $num / ($num * 0 + 1);
+ @return $num / ($num * 0 + 1);
}
@mixin rem($property, $values...) {
- $max: length($values);
- $pxValues: '';
- $remValues: '';
-
- @for $i from 1 through $max {
- $value: strip-unit(nth($values, $i));
- $pxValues: #{$pxValues + $value*10}px;
-
- @if $i < $max {
- $pxValues: #{$pxValues + " "};
- }
- }
-
- @for $i from 1 through $max {
- $value: strip-unit(nth($values, $i));
- $remValues: #{$remValues + $value}rem;
-
- @if $i < $max {
- $remValues: #{$remValues + " "};
- }
- }
-
- #{$property}: $pxValues;
- #{$property}: $remValues;
-}
\ No newline at end of file
+ $max: length($values);
+ $pxValues: '';
+ $remValues: '';
+
+ @for $i from 1 through $max {
+ $value: strip-unit(nth($values, $i));
+ $pxValues: #{$pxValues + $value*10}px;
+
+ @if $i < $max {
+ $pxValues: #{$pxValues + " "};
+ }
+ }
+
+ @for $i from 1 through $max {
+ $value: strip-unit(nth($values, $i));
+ $remValues: #{$remValues + $value}rem;
+
+ @if $i < $max {
+ $remValues: #{$remValues + " "};
+ }
+ }
+
+ #{$property}: $pxValues;
+ #{$property}: $remValues;
+}
diff --git a/src/css/type.scss b/src/css/type.scss
index 5151844..fe49ea8 100644
--- a/src/css/type.scss
+++ b/src/css/type.scss
@@ -1,66 +1,66 @@
html {
- font-size: 62.5%;
- -webkit-font-smoothing: antialiased;
+ font-size: 62.5%;
+ -webkit-font-smoothing: antialiased;
}
input {
- -webkit-font-smoothing: antialiased;
+ -webkit-font-smoothing: antialiased;
}
body {
- font-family: 'Source Sans Pro', sans-serif;
+ font-family: 'Source Sans Pro', sans-serif;
}
strong {
- font-weight: 600;
+ font-weight: 600;
}
a {
- text-decoration: none;
+ text-decoration: none;
}
.t-heading {
- @include rem(font-size, 2.8);
+ @include rem(font-size, 2.8);
}
.t-label {
- @include rem(font-size, 1.8);
+ @include rem(font-size, 1.8);
}
.t-body {
- @include rem(font-size, 1.6);
+ @include rem(font-size, 1.6);
}
.t-action,
.t-primaryAction {
- text-transform: uppercase;
- letter-spacing: 0.05em;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
}
// .t-action {
-// @include rem(font-size, 1.2);
-// -webkit-font-smoothing: subpixel-antialiased;
+// @include rem(font-size, 1.2);
+// -webkit-font-smoothing: subpixel-antialiased;
// }
.t-primaryAction {
- @include rem(font-size, 2);
+ @include rem(font-size, 2);
}
.t-digits {
- font-family: sans-serif;
+ font-family: sans-serif;
}
.t-instruction {
- font-style: italic;
- letter-spacing: 0.05em;
+ font-style: italic;
+ letter-spacing: 0.05em;
}
.t-content {
- overflow: hidden;
- p {
- @extend .t-body;
- color: #666;
- padding-top: 1em;
- line-height: 1.5;
- }
-}
\ No newline at end of file
+ overflow: hidden;
+ p {
+ @extend .t-body;
+ color: #666;
+ padding-top: 1em;
+ line-height: 1.5;
+ }
+}
diff --git a/src/css/utilities/_alignment.scss b/src/css/utilities/_alignment.scss
index 13851a4..b0cf88a 100644
--- a/src/css/utilities/_alignment.scss
+++ b/src/css/utilities/_alignment.scss
@@ -1,16 +1,16 @@
.u-fullHeight {
- height: 100%;
+ height: 100%;
}
.u-vcContainer {
- display: table;
- width: 100%;
- height: 100%;
+ display: table;
+ width: 100%;
+ height: 100%;
}
.u-vc {
- display: table-cell;
- vertical-align: middle;
+ display: table-cell;
+ vertical-align: middle;
}
/**
@@ -19,19 +19,19 @@
*/
.u-removeWhitespace {
- font-size: 0;
- // Reset for immediately for every child element
- &>* {
- font-size: 1rem;
- }
+ font-size: 0;
+ // Reset for immediately for every child element
+ &>* {
+ font-size: 1rem;
+ }
}
.u-contain {
- position: relative;
+ position: relative;
}
.u-stretch {
- position: absolute;
- top: 0; right: 0; bottom: 0; left: 0;
- margin: auto;
-}
\ No newline at end of file
+ position: absolute;
+ top: 0; right: 0; bottom: 0; left: 0;
+ margin: auto;
+}
diff --git a/src/css/utilities/_animate.scss b/src/css/utilities/_animate.scss
index fe3b677..2ebb1f1 100644
--- a/src/css/utilities/_animate.scss
+++ b/src/css/utilities/_animate.scss
@@ -2,9 +2,9 @@ $easeInOutExpo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
$rhythm: 0.6s;
.u-animateWidth {
- -webkit-transition: width $rhythm $easeInOutExpo;
+ -webkit-transition: width $rhythm $easeInOutExpo;
}
.u-delay1 {
- -webkit-transition-delay: $rhythm;
-}
\ No newline at end of file
+ -webkit-transition-delay: $rhythm;
+}
diff --git a/src/css/utilities/_misc.scss b/src/css/utilities/_misc.scss
index 738a8c0..2d429d3 100644
--- a/src/css/utilities/_misc.scss
+++ b/src/css/utilities/_misc.scss
@@ -1,31 +1,31 @@
.u-mask {
- overflow: hidden;
+ overflow: hidden;
}
.u-hit {
- color: inherit;
- display: block;
- text-decoration: none;
+ color: inherit;
+ display: block;
+ text-decoration: none;
}
.u-hideText {
- text-indent: 100%;
- white-space: nowrap;
- overflow: hidden;
+ text-indent: 100%;
+ white-space: nowrap;
+ overflow: hidden;
}
.u-gutterLipLeft {
- @include rem(margin-left, -4);
+ @include rem(margin-left, -4);
}
.u-gutterLipRight {
- @include rem(margin-right, -4);
+ @include rem(margin-right, -4);
}
.u-gutterPadLeft {
- @include rem(padding-left, 4);
+ @include rem(padding-left, 4);
}
.u-gutterPadRight {
- @include rem(padding-right, 4);
-}
\ No newline at end of file
+ @include rem(padding-right, 4);
+}
diff --git a/src/css/utilities/_size.scss b/src/css/utilities/_size.scss
index 1a30cff..cead4c4 100644
--- a/src/css/utilities/_size.scss
+++ b/src/css/utilities/_size.scss
@@ -4,13 +4,13 @@
*/
.u-size4of14 {
- width: 28.57% !important;
+ width: 28.57% !important;
}
.u-size10of14 {
- width: 71.42% !important;
+ width: 71.42% !important;
}
.u-size0 {
- width: 0 !important;
-}
\ No newline at end of file
+ width: 0 !important;
+}
diff --git a/src/extras.json b/src/extras.json
index 1d8c9e0..adb1b6e 100644
--- a/src/extras.json
+++ b/src/extras.json
@@ -1,20 +1,20 @@
[
- {
- "name": "html5shiv",
- "default": true
- },
- {
- "name": "html5shiv w/ printshiv"
- },
- {
- "name": "Modernizr.load (YepNope.js)",
- "default": true
- },
- {
- "name": "Media Queries"
- },
- {
- "name": "Add CSS Classes",
- "default": true
- }
-]
\ No newline at end of file
+ {
+ "name": "html5shiv",
+ "default": true
+ },
+ {
+ "name": "html5shiv w/ printshiv"
+ },
+ {
+ "name": "Modernizr.load (YepNope.js)",
+ "default": true
+ },
+ {
+ "name": "Media Queries"
+ },
+ {
+ "name": "Add CSS Classes",
+ "default": true
+ }
+]
diff --git a/src/html/documents/build.css.scss b/src/html/documents/build.css.scss
index f57bce0..62890ba 100644
--- a/src/html/documents/build.css.scss
+++ b/src/html/documents/build.css.scss
@@ -1 +1 @@
-@import "../../css/main.scss";
\ No newline at end of file
+@import "../../css/main.scss";
diff --git a/src/html/documents/build.js b/src/html/documents/build.js
index f2b3347..4fa5e96 100644
--- a/src/html/documents/build.js
+++ b/src/html/documents/build.js
@@ -1,4 +1,4 @@
---
webpack: true
---
-require('../src/js/main.js');
\ No newline at end of file
+require('../src/js/main.js');
diff --git a/src/html/documents/index.html.eco b/src/html/documents/index.html.eco
index c6cd082..acef917 100644
--- a/src/html/documents/index.html.eco
+++ b/src/html/documents/index.html.eco
@@ -4,5 +4,5 @@ isPage: true
---
- <%- @react("../js/components/App.jsx") if 'production' in @getEnvironments() %>
-
\ No newline at end of file
+ <%- @react("../js/components/App.jsx") if 'production' in @getEnvironments() %>
+
diff --git a/src/html/documents/news.html.eco b/src/html/documents/news.html.eco
index 9439a92..4cdb5cd 100644
--- a/src/html/documents/news.html.eco
+++ b/src/html/documents/news.html.eco
@@ -11,4 +11,4 @@ isPage: true
<% end %>
-
\ No newline at end of file
+
diff --git a/src/html/documents/posts/new-something.html.eco b/src/html/documents/posts/new-something.html.eco
index a581d94..cb0450a 100644
--- a/src/html/documents/posts/new-something.html.eco
+++ b/src/html/documents/posts/new-something.html.eco
@@ -3,4 +3,4 @@ title: 'Test Post'
layout: "default"
---
-Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.
\ No newline at end of file
+Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.
diff --git a/src/html/layouts/default.html.eco b/src/html/layouts/default.html.eco
index 23202db..6f01651 100644
--- a/src/html/layouts/default.html.eco
+++ b/src/html/layouts/default.html.eco
@@ -1,21 +1,21 @@
- <%= @document.title %>
- <% if 'production' in @getEnvironments(): %>
- <%- @getBlock('styles').add([@asset('/build.css')]).toHTML() %>
- <% else: %>
- <%- @getBlock('styles').add(['/main.css']).toHTML() %>
- <% end %>
- <%= @document.title %>
+ <% if 'production' in @getEnvironments(): %>
+ <%- @getBlock('styles').add([@asset('/build.css')]).toHTML() %>
+ <% else: %>
+ <%- @getBlock('styles').add(['/main.css']).toHTML() %>
+ <% end %>
+