Commenced work on home page content

rflow · Aug 31, 2015 · 9c50156 · 9c50156
1 parent c8a0188
commit 9c50156
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 41 deletions.
diff --git a/images/photos/mugshot.jpg b/images/photos/mugshot.jpg
diff --git a/js/anims.js b/js/anims.js
@@ -13,47 +13,22 @@ jQuery(document).ready(function($) {
 
     var r = canvas.width / 4,
         center = compass.point(r*2, r*2),
-        sides = 14,
-        angles = d3.range(sides).map(function (i) {
-          return compass.τ * i/sides
-        })
+        sides = 14;
 
     anim.addStep("draw circle", { onto: circles, at: center, r: r*0.4, dir: "cw", style: "line-b" }, 300);  
 
-    angles.forEach(function (a) {
-      var p1 = compass.point.fromPolar(r*1.2, a, center);
+    d3.range(sides).forEach(function (i) {
+      var a = compass.τ * i/sides,
+          p = compass.point.fromPolar(r*1.2, a, center);
 
-      anim.addStep("draw circle", { onto: circles, at: p1, r: r*0.8, dir: "cw", style: "line-a" }, 30)
+      anim.addStep("draw circle", { onto: circles, at: p, r: r*0.8, dir: "cw", style: "line-a" }, 30)
     })
 
     anim.addStep("draw circle", { onto: circles, at: center, r: r*2.0, dir: "cw", style: "line-b" }, 600);
 
     anim.play();
   }
 
-  function spanimate (el, width, height) {
-    var container = d3.select(el),
-        discCount = 10,
-        maxSize = Math.min(width, height) / 2;
-
-    d3.range(discCount).forEach(function (i) {
-      var size = (discCount - i) / discCount * maxSize,
-          xPos = Math.round(Math.random() * width),
-          yPos = Math.round(Math.random() * height);
-
-      var disc = container.append("div");
-
-      disc
-        .attr("class", "rflow-logo")
-        .style("width", size + "px") 
-        .style("height", size + "px")
-        .style("left", xPos + "px")
-        .style("top", yPos + "px");
-
-      drawLogo(disc.node());
-    })
-  }
-
   function distance (a, b) {
     return Math.sqrt(Math.pow(Math.abs(a.x - b.x),2) + Math.pow(Math.abs(a.y - b.y),2));
   }
@@ -68,13 +43,10 @@ jQuery(document).ready(function($) {
     var fills = ["#d7d7d7", "#e2e2e2", "#eee"],
         currentFill = 0;
 
-    var tau = 2 * Math.PI,
-        n = Math.min(width, height) >> 1,
+    var n = Math.min(width, height) >> 1,
         particles = new Array(n),
         mouse = { x:0, y:0 };
 
-    console.log(n, "particles")
-
     document.addEventListener("mousemove", function(e){
       mouse.x = Math.min(width, Math.max(0, e.x));
       mouse.y = Math.min(height, Math.max(0, e.y));
@@ -91,7 +63,7 @@ jQuery(document).ready(function($) {
       };
     }
 
-    function render(elapsed) {
+    function render (elapsed) {
       context.save();
       context.clearRect(0, 0, width, height);
 
@@ -109,7 +81,7 @@ jQuery(document).ready(function($) {
 
         context.beginPath();
         context.fillStyle = p.fill;
-        context.arc(p.x, p.y, p.r * proximityFactor, 0, tau);
+        context.arc(p.x, p.y, p.r * proximityFactor, 0, compass.τ);
         context.fill();
       }
 
@@ -128,8 +100,7 @@ jQuery(document).ready(function($) {
     $anim.attr("width", containerWidth + "px");
     $anim.attr("height", containerHeight + "px");
 
-    // animate($anim[0], containerWidth, containerHeight);
-    animate(document.querySelector(".rflow-page-anim"));
+    animate($anim[0]);
   }, 1000);
 
 })
diff --git a/style.css b/style.css
@@ -2039,9 +2039,6 @@ img#wpstats { display: none; }
   height: 50px;
 }
 
-.home-page-content {
-}
-
 .rflow-logo .line-a {
 	fill: none;
 	stroke: #999;
@@ -2054,6 +2051,68 @@ img#wpstats { display: none; }
 	stroke-width: 2px;
 }
 
+.post-content .home-page-content {
+	width: 100%;
+	margin-top: -50px;
+	/*height: 200px;*/
+	/*padding: 20px;*/
+}
+
+
+.rflow-mugshot {
+	float: left;
+	width: 150px;
+	height: 150px;
+	background-image: url(images/photos/mugshot.jpg);
+}
+
+.rflow-vital-statistics {
+	float: right;
+	width: calc(100% - 175px);
+/*	background-color: #eaeaea;*/
+}
+
+.post-content h1.rflow-title {
+	font-size: 1.5em;
+	margin: 0;
+  margin-bottom: 7px;
+}
+
+.post-content .rflow-role {
+	line-height: 1;
+  margin-bottom: 5px;
+}
+
+.post-content .rflow-asl {
+	line-height: 1;
+  margin-bottom: 10px;
+}
+
+.rflow-asl span {
+	clear: none;
+  font-size: 0.75em;
+  color: #777;
+  margin: 0;
+  line-height: 1;
+}
+
+.post-content table.rflow-info-table tbody > tr > td {
+  height: 20px;
+  padding: 0;
+	background-color: white;
+  font-size: 0.75em;
+  border: none;
+}
+
+.post-content .rflow-info-field {
+	color: #aaa;
+	width: 80px;
+}
+
+.post-content .rflow-info-value {
+
+}
+
 .posts .post {
 	-webkit-box-shadow: 1px 0px 7px 0px rgba(0, 0, 0, 0.1);
 	-moz-box-shadow:    1px 0px 7px 0px rgba(0, 0, 0, 0.1);