Fonts and DoF display alignment

Author: patik

index.html

@@ -117,7 +117,7 @@ <h3 data-lens-id="{{index}}" class="name" contenteditable>{{name}}</h3>
                     <div class="small-12 table-2 columns">
                         <dl class="dl-horizontal outputs collapsed">
                             <dt class="dof-display hide-for-table"><span>Depth of Field</span></dt>
-                            <dd class="dof-display"><span class="dof"></span> <button class="tiny radius secondary output-toggle"><span>&#9650;</span><span>&#9660;</span></button></dd>
+                            <dd class="dof-display"><pre class="dof"></pre> <button class="tiny radius secondary output-toggle"><span>&#9650;</span><span>&#9660;</span></button></dd>
                         </dl>
                     </div>
                     <div class="small-12 table-2 columns action-buttons">

js/dfc/app.js

@@ -455,7 +455,7 @@ var DFC = (function _DFC() {
      * @param   {jQuery}  $container  Container jQuery element
      */
     function _updateOuput(id, $container) {
-        var lens, result;
+        var lens, result, dof;
 
         // Triggered by an event
         if (typeof id === 'object' && id.target) {
@@ -471,8 +471,14 @@ var DFC = (function _DFC() {
 
         result = new DFC.Dof(lens.sensor, lens.focalLength, lens.aperture, distance);
 
+        // Add a space before single digit numbers to make them align vertically
+        dof = result.dof
+                .toString()
+                .replace(/^(\d)\'/, ' $1\'')
+                .replace(/\s(\d)\./, '  $1.');
+
         // Display values
-        $container.find('.dof').text(result.dof);
+        $container.find('.dof').text(dof);
         $container.find('.eighthDof').text(result.eighthDof);
         $container.find('.coc').text(result.coc + ' mm');
         $container.find('.hf').text(result.hf);

js/script.js

@@ -1,5 +1,11 @@
 html, body, input, select, button {
-    font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
+    font-family: "Open Sans", FreeSans, Helmet, "Helvetica Neue", Roboto, sans-serif;
+}
+
+h1,
+h2,
+[role="footer"] {
+    font-family: "Avenir", FreeSans, Helmet, "Helvetica Neue", Roboto, sans-serif;
 }
 
 html, body {

js/script.map

@@ -107,11 +107,14 @@
 .add-lens {
     border: 1rem dashed #ccc;
     background: #ddd;
-    border-radius: 0.375rem;
     cursor: pointer;
     cursor: copy;
     @include transition(border-color 100ms ease-in, background 100ms ease-in);
 
+    @media #{$bp-table-max} {
+        border-radius: 0.375rem;
+    }
+
     &:focus,
     &:hover {
         background: rgba(green, 0.1);

scss/dfc/_global.scss

@@ -78,6 +78,7 @@
 }
 
 .dof {
+    display: inline;
     font-family: Menlo, Consolas, monospace;
     color: green;
 }

scss/dfc/_input.scss

@@ -1,4 +1,4 @@
-// 
+//
 // FOUNDATION SETTINGS
 //
 
@@ -37,7 +37,8 @@
 // We use these to control various global styles
 // $body-bg: #fff;
 // $body-font-color: #222;
-// $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
+// $body-font-family: "Open Sans", FreeSans, Helmet, "Avenir New", "Helvetica Neue", Roboto, sans-serif;
+$body-font-family: "Avenir Next", FreeSans, Helmet, "Helvetica Neue", Roboto, sans-serif;
 // $body-font-weight: normal;
 // $body-font-style: normal;
 
@@ -1083,7 +1084,7 @@
 // $include-open-sans: true;
 
 // We use these to control header font styles
-// $header-font-family: join("Open Sans", $body-font-family);
+$header-font-family: $body-font-family; // join("Open Sans", $body-font-family);
 // $header-font-weight: 300;
 // $header-font-style: normal;
 // $header-font-color: #222;
@@ -1124,7 +1125,7 @@
 
 // We use these to style <code> tags
 // $code-color: darken($alert-color, 15%);
-// $code-font-family: Consolas, 'Liberation Mono', Courier, monospace;
+$code-font-family: Menlo, Consolas, 'Liberation Mono', Courier, monospace;
 // $code-font-weight: bold;
 
 // We use these to style anchors

scss/dfc/_output.scss

@@ -3,7 +3,7 @@
 $include-html-type-classes: $include-html-classes !default;
 
 // We use these to control header font styles
-$header-font-family: join("Open Sans", $body-font-family) !default;
+$header-font-family: $body-font-family; // join("Open Sans", $body-font-family) !default;
 $header-font-weight: 300 !default;
 $header-font-style: normal !default;
 $header-font-color: #222 !default;
@@ -44,7 +44,7 @@ $paragraph-text-rendering: optimizeLegibility !default;
 
 // We use these to style <code> tags
 $code-color: darken($alert-color, 15%) !default;
-$code-font-family: Consolas, 'Liberation Mono', Courier, monospace !default;
+$code-font-family: Menlo, Consolas, 'Liberation Mono', Courier, monospace !default;
 $code-font-weight: bold !default;
 
 // We use these to style anchors
@@ -250,8 +250,8 @@ $microformat-abbr-font-decoration: none !default;
 
     ul {
       margin-#{$default-float}: $list-side-margin;
-      &.no-bullet { 
-        margin-#{$default-float}: $list-side-margin-no-bullet; 
+      &.no-bullet {
+        margin-#{$default-float}: $list-side-margin-no-bullet;
         li {
           ul,
           ol {
@@ -444,4 +444,4 @@ $microformat-abbr-font-decoration: none !default;
     }
 
   }
-}
+}