adds light demo

AKST · Jun 24, 2015 · f01a92b · f01a92b
1 parent c9e3508
commit f01a92b
Show file tree

Hide file tree

Showing 24 changed files with 579 additions and 47 deletions.
diff --git a/.bowerrc b/.bowerrc
@@ -0,0 +1,3 @@
+{
+  "directory": "resources/public/vendor"
+}
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
+/resources/public/vendor
 /resources/public/css
 /resources/public/js/compiled/**
 .sass-cache

diff --git a/bower.json b/bower.json
@@ -0,0 +1,18 @@
+{
+  "name": "svg-thing",
+  "version": "0.0.0",
+  "authors": [
+    "Angus Thomsen <[email protected]>"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "glyph-iconset": "[email protected]:frexy/glyph-iconset.git"
+  }
+}
diff --git a/project.clj b/project.clj
@@ -8,6 +8,7 @@
                  [prismatic/dommy "1.1.0"]
                  [secretary "1.2.3"]
                  [reagent "0.5.0"]
+                 [reagent-utils "0.1.5"]
 
                  [org.clojure/clojurescript "0.0-3211"]
                  [org.clojure/core.async "0.1.346.0-17112a-alpha"]]
@@ -22,12 +23,12 @@
   :source-paths ["src"]
 
   :clean-targets ^{:protect false} ["resources/public/js/compiled" "target"]
-  
+
   :cljsbuild {
     :builds [{:id "dev"
               :source-paths ["src"]
 
-              :figwheel { :on-jsload "svg-thing.core/main" }
+              :figwheel { :on-jsload "svg-thing.core/mount-app" }
 
               :compiler {:main svg-thing.core
                          :asset-path "js/compiled/out"

diff --git a/resources/public/index.html b/resources/public/index.html
@@ -5,6 +5,7 @@
     <title>SVG Demo</title>
     <link href="css/main.css" rel="stylesheet" type="text/css">
     <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
+    <script src="vendor/glyph-iconset/polyfill.js"></script>
   </head>
   <body>
     <div id="app"></div>

diff --git a/resources/public/svg/colour-pallet.svg b/resources/public/svg/colour-pallet.svg
diff --git a/resources/public/svg/filters.svg b/resources/public/svg/filters.svg
diff --git a/resources/public/svg/masks/dots.svg b/resources/public/svg/masks/dots.svg
diff --git a/resources/public/svg/masks/lines.svg b/resources/public/svg/masks/lines.svg
diff --git a/resources/public/svg/tempature.svg b/resources/public/svg/tempature.svg
diff --git a/resources/sass/_animations.scss b/resources/sass/_animations.scss
@@ -0,0 +1,14 @@
+@include keyframes(fadeInBlur) {
+  0% {
+    @include filter(blur(5px));
+  }
+  75% {
+    @include filter(blur(1px));
+  }
+  87% {
+    @include filter(blur(1.5px));
+  }
+  100% {
+    @include filter(blur(0));
+  }
+}
diff --git a/resources/sass/_common.scss b/resources/sass/_common.scss
@@ -1,11 +1,16 @@
+.background-wrapper {
+  //-webkit-filter: url('/svg/filters.svg#blur3');
+}
 .background {
   transition: ease-in-out $animation-time background;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  top: 0;
-  height: 100vh;
-  width: 100vw;
+  right: -10vw;
+  left: -10vw;
+  bottom: -10vh;
+  top: -10vh;
+  height: 120vh;
+  width: 120vw;
   position: fixed;
   z-index: -1;
+  background-color: black;
+  -webkit-mask: url('/svg/masks/dots.svg');
 }
diff --git a/resources/sass/_functions.scss b/resources/sass/_functions.scss
@@ -0,0 +1,19 @@
+@function power ($x, $n) {
+  $ret: 1;
+
+  @if $n >= 0 {
+      @for $i from 1 through $n {
+          $ret: $ret * $x;
+      }
+  } @else {
+      @for $i from $n to 0 {
+          $ret: $ret / $x;
+      }
+  }
+
+  @return $ret;
+}
+
+@function strip-units($number) {
+  @return $number / ($number * 0 + 1);
+}
diff --git a/resources/sass/_light.scss b/resources/sass/_light.scss
@@ -0,0 +1,46 @@
+.light-page {
+  $width: 600px;
+  $height: 600px;
+  @include center($width, $height);
+
+  $title-size: $height / 12;
+
+  .light-title {
+    font-family: $font-family;
+    font-size: $title-size;
+    text-align: center;
+    line-height: 1;
+    margin: 0;
+  }
+
+  $svg-margin: $title-size / 3;
+  $svg-dim: $height - ($title-size + $svg-margin);
+
+  .light-svg-outer {
+    margin-top: $svg-margin;
+    margin-left: $svg-margin;
+    margin-right: $svg-margin;
+    height: $svg-dim;
+  }
+
+  .light-svg {
+    margin: 0 auto;
+    display: block;
+    height: $svg-dim;
+    width: $svg-dim;
+  }
+
+  .light-svg circle {
+    mix-blend-mode: multiply;
+    transition: ease-in-out $animation-time all;
+  }
+
+  #N-circle  { fill: $color-orange; }
+  #NE-circle { fill: $color-yellow; }
+  #E-circle  { fill: $color-green; }
+  #SE-circle { fill: $color-aqua; }
+  #S-circle  { fill: $color-blue; }
+  #SW-circle { fill: $color-violet; }
+  #W-circle  { fill: $color-pink; }
+  #NW-circle { fill: $color-red; }
+}