smaller icons

resources/sass/_common.scss

@@ -1,5 +1,5 @@
 .background-wrapper {
-  //-webkit-filter: url('/svg/filters.svg#blur3');
+  -webkit-filter: url('/svg/filters.svg#blur3');
 }
 .background {
   transition: ease-in-out $animation-time background;

resources/sass/_main-page.scss

@@ -29,8 +29,17 @@
     margin-bottom: 40px;
   }
 
+  $icon-number: 3;
+  $icon-width: $width / 4;
+
+  $h-margin: $icon-width * 0.25;
+  $inner-icon-width: $icon-width - $h-margin;
+
   .main-links {
     padding-left: 0;
+    width: $icon-width * $icon-number;
+    margin-left: auto;
+    margin-right: auto;
   }
   .main-link-it {
     display: inline-block;
@@ -41,10 +50,6 @@
   }
 
   .main-icon {
-    $icon-width: $width / 3;
-
-    $h-margin: $icon-width * 0.07;
-    $inner-icon-width: $icon-width - $h-margin;
     height: $inner-icon-width;
     width: $inner-icon-width;
     margin: 0 ($h-margin / 2);

resources/sass/_temperature.scss

@@ -2,6 +2,7 @@
 .temp-page {
   $-temp-height: 400px;
   $-temp-width: 600px;
+  $shadow-color: #aaa;
 
   @include center($-temp-height, $-temp-width);
 
@@ -34,7 +35,12 @@
     $heading-occupied-height: floor($line-height * $heading-font-size) + $vertical-spacing;
     $value-occupied-height: floor($line-height * $value-font-size) + $vertical-spacing;
 
-    text-shadow: #aaa 2px 2px, #aaa 4px 4px;
+
+    text-shadow:
+      $shadow-color 1px 1px,
+      $shadow-color 2px 2px,
+      $shadow-color 3px 3px,
+      $shadow-color 4px 4px;
 
     .temp-heading {
       line-height: $line-height;

src/svg_thing/components/light/svg.cljs

@@ -59,7 +59,8 @@
 
 
 (defn- rotation [props]
-  (str "rotate(" (get-current (props :light)) "deg)"))
+  (let [deg (* (get-current (props :light)) 3.6)]
+    (str "rotate(" deg "deg)")))
 
 
 (defn- render-multiply [this]