Split out css into multiple files

rename css_paths and js_paths

bower.json

@@ -14,6 +14,7 @@
   ],
   "dependencies": {
     "imagesloaded": "~3.1.8",
-    "flickity": "~0.1.0"
+    "flickity": "~0.1.0",
+    "normalize.css": "~3.0.2"
   }
 }

css/base.css

@@ -0,0 +1,105 @@
+/* base
+------------------------- */
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Texta Regular', sans-serif;
+  color: #333;
+  line-height: 1.5;
+  font-size: 19px;
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  color: #6A6;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #E90;
+}
+
+b, strong {
+  font-family: 'Texta Heavy', sans-serif;
+  font-weight: normal;
+}
+
+em, i {
+  font-family: 'Texta Italic', sans-serif;
+  font-style: normal;
+}
+
+h1, h2, h3 {
+  line-height: 1.2;
+  font-weight: normal;
+}
+
+h1 {
+  font-family: 'Texta Heavy', sans-serif;
+}
+
+h2 {
+  font-size: 2.4em;
+  border-top: 4px double #DDD;
+  padding-top: 60px;
+  margin-top: 80px;
+}
+
+h3 {
+  font-family: 'Texta Heavy', sans-serif;
+  font-size: 1.6em;
+}
+
+/* ---- code ---- */
+
+pre, code {
+  font-family: Consolas, Menlo, monospace;
+  font-size: 15px;
+  background: #FAFAFA;
+  border: 1px solid #DDD;
+  white-space: pre-wrap;
+}
+
+pre {
+  padding: 10px;
+  border-radius: 6px;
+  overflow-x: auto;
+}
+
+code {
+  padding: 2px 3px;
+  line-height: 1.2;
+  border-radius: 3px;
+}
+
+pre code {
+  padding: 0;
+  line-height: 1.5;
+  background: none;
+  border: none;
+}
+
+/* ---- content ---- */
+
+.content-wrap {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 0 10px;
+}
+
+/* ---- main ---- */
+
+.main h2 {
+  border-top: 4px double #DDD;
+  padding-top: 60px;
+  margin-top: 80px;
+}
+
+.main h3 {
+  border-top: 1px solid #DDD;
+  padding-top: 30px;
+}

css/gallery.css

@@ -0,0 +1,115 @@
+/* demo galleries
+------------------------- */
+
+.gallery {
+  background: #FAFAFA;
+  margin-bottom: 30px;
+  counter-reset: gallery-cell;
+}
+
+.gallery-cell {
+  width: 100%;
+  height: 160px;
+  background: #8C8;
+  counter-increment: gallery-cell;
+}
+
+/*.gallery-cell:nth-child(5n+2) { background: #6A6; }
+.gallery-cell:nth-child(5n+3) { background: #E8A; }
+.gallery-cell:nth-child(5n+4) { background: #FD0; }
+.gallery-cell:nth-child(5n) { background: #66A; }*/
+
+/*.gallery-cell:nth-child(3n+2) { background: #ED2; }
+.gallery-cell:nth-child(3n+0) { background: #E90; }*/
+
+.gallery-cell:before {
+  content: counter(gallery-cell);
+  display: block;
+  text-align: center;
+  line-height: 160px;
+  font-size: 80px;
+  font-weight: bold;
+  color: white;
+}
+
+/*.gallery-cell:nth-child(5n+1):before { color: #868; }
+.gallery-cell:nth-child(5n+2):before { color: #875; }
+.gallery-cell:nth-child(5n+3):before { color: #686; }
+.gallery-cell:nth-child(5n+4):before { color: #588; }
+.gallery-cell:nth-child(5n):before { color: #668; }*/
+
+.gallery--margin .gallery-cell {
+  margin-right: 10px;
+}
+
+.half-width-margin .gallery-cell {
+  width: 50%;
+  margin-right: 10px;
+}
+
+.various-size .gallery-cell {
+  width: 33%;
+  margin-right: 10px;
+}
+.various-size .gallery-cell.size-180 { width: 180px; }
+.various-size .gallery-cell.size-large { width: 75%; }
+
+.media-queried .gallery-cell {
+  width: 100%;
+  margin-right: 2%;
+}
+
+.show-neighbors .gallery-cell {
+  width: 66%;
+  margin: 0 5px;
+}
+
+.gallery--contain-demo .gallery-cell {
+  width: 30%;
+  margin-right: 2%;
+}
+
+.gallery--auto-play-demo .gallery-cell { margin-right: 2%; }
+
+.gallery--images-loaded-demo img {
+  display: block;
+  height: 160px;
+}
+
+.gallery--images-demo {
+  margin-bottom: 40px;
+}
+
+.gallery--images-demo img {
+  display: block;
+  height: 160px;
+}
+
+
+.gallery--watch-demo:after {
+  content: 'flickity';
+  display: none;
+}
+
+.gallery--watch-demo .gallery-cell {
+  margin-right: 10px;
+}
+
+/* ---- large device media query ---- */
+
+@media screen and ( min-width: 768px ) {
+
+  .media-queried .gallery-cell { width: 49%; }
+
+  .gallery--watch-demo:after {
+    content: '';
+  }
+
+  .gallery--watch-demo .gallery-cell {
+    margin-bottom: 10px;
+  }
+
+  .gallery--images-demo img {
+    height: 400px;
+  }
+}

css/modules/big-links.css

@@ -0,0 +1,69 @@
+/* big links
+   big buttons at the top of the homepage
+------------------------- */
+
+.big-links {
+  list-style: none;
+  margin: 0 0 60px;
+  padding: 0;
+}
+
+.big-links:after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
+
+.big-links__item {
+  margin-bottom: 10px;
+  font-size: 1.2em;
+}
+
+.big-links__item a {
+  display: block;
+  padding: 10px;
+  border-radius: 5px;
+}
+
+.big-links__item--fill a {
+  background: #8C8;
+  color: white;
+}
+
+.big-links__item--fill a:hover {
+  background: #EC5;
+}
+
+.big-links__item--stroke a {
+  border: 2px solid #8C8;
+}
+
+.big-links__item--stroke a:hover { border-color: #EC5; }
+
+
+.big-links__link {
+}
+
+.big-links__link:hover {
+  background: #EC5;
+  color: white;
+}
+
+/* ---- large device ---- */
+
+@media screen and ( min-width: 768px ) {
+
+  .big-links__item {
+    float: left;
+    width: 49%;
+    font-size: 1.4em;
+  }
+
+  .big-links__item a {
+    padding: 20px;
+  }
+
+  .big-links__item:nth-child(2n+1) { margin-right: 2%; }
+
+}

css/modules/call-out.css

@@ -0,0 +1,45 @@
+/* call out
+------------------------- */
+
+.call-out {
+  border: 2px solid #ED2;
+  padding: 10px 20px 10px 80px;
+  border-radius: 6px;
+  position: relative;
+  margin: 20px 0;
+}
+
+/* (i) */
+.call-out:before {
+  content: 'i';
+  display: block;
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  left: 20px;
+  top: 30px;
+  background: #ED2;
+  border-radius: 50%;
+  text-align: center;
+  color: white;
+  font-size: 1.9em;
+  font-family: Consolas, Georgia, serif;
+  font-style: italic;
+  line-height: 46px;
+}
+
+.call-out h2 {
+  margin-top: 0;
+  padding-top: 10px;
+  border-top: none;
+}
+
+.call-out--beta-testing p,
+.call-out--beta-testing li {
+  font-size: 1.2em;
+}
+
+.call-out--beta-testing p { line-height: 1.3; }
+
+.call-out--chill { border-color: #8C8; }
+.call-out--chill:before { background: #8C8; }

css/modules/example.css

@@ -0,0 +1,24 @@
+.example {
+  margin-bottom: 40px;
+}
+
+.example:after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
+.example__code pre { margin: 0 0 20px; }
+
+@media screen and ( min-width: 768px ) {
+
+  /* ---- example ---- */
+
+  .example__code,
+  .example__demo {
+    float: left;
+    width: 48%;
+  }
+  .example__code { margin-right: 4%; }
+
+}