:pushpin:

css/style.css

@@ -318,6 +318,7 @@ h5.how {
 }
 #header .header-ui .brand--nav h1 {
   font-size: 27px;
+  margin-left: 30px;
 }
 
 @media (min-width: 576px) {
@@ -1378,34 +1379,66 @@ blockquote:before {
     url('_font/playfair-display-v20-latin-700italic.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
 }
 
-
-
 @font-face {
   font-family: 'fontello';
-  src: url('_font/fontello.eot?84652176');
-  src: url('_font/fontello.eot?84652176#iefix') format('embedded-opentype'),
-    url('_font/fontello.woff?84652176') format('woff'),
-    url('_font/fontello.ttf?84652176') format('truetype'),
-    url('_font/fontello.svg?84652176#fontello') format('svg');
+  src: url('_font/fontello.eot?25243633');
+  src: url('_font/fontello.eot?25243633#iefix') format('embedded-opentype'),
+       url('_font/fontello.woff2?25243633') format('woff2'),
+       url('_font/fontello.woff?25243633') format('woff'),
+       url('_font/fontello.ttf?25243633') format('truetype'),
+       url('_font/fontello.svg?25243633#fontello') format('svg');
   font-weight: normal;
   font-style: normal;
 }
-.demo-icon {
+/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: 'fontello';
+    src: url('../font/fontello.svg?25243633#fontello') format('svg');
+  }
+}
+*/
+
+ [class^="icon-"]:before, [class*=" icon-"]:before {
   font-family: "fontello";
   font-style: normal;
   font-weight: normal;
   speak: none;
+
   display: inline-block;
   text-decoration: inherit;
   width: 1em;
   margin-right: .2em;
   text-align: center;
+  /* opacity: .8; */
+
+  /* For safety - reset parent styles, that can break glyph codes*/
   font-variant: normal;
   text-transform: none;
+
+  /* fix buttons height, for twitter bootstrap */
   line-height: 1em;
+
+  /* Animation center compensation - margins should be symmetric */
+  /* remove if not needed */
   margin-left: .2em;
+
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+
+  /* Font smoothing. That was taken from TWBS */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  /* opacity: .8; */
+
+  /* Uncomment for 3D effect */
   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
 }
+
+.icon-pencil:before { content: '\e800'; } /* '' */
+.icon-twitter:before { content: '\f099'; } /* '' */
+.icon-facebook:before { content: '\f09a'; } /* '' */
+.icon-docs:before { content: '\f0c5'; } /* '' */
+.icon-github:before { content: '\f113'; } /* '' */
+.icon-wikipedia-w:before { content: '\f266'; } /* '' */

index.html

@@ -39,11 +39,11 @@
     </span>
   </button>
   <div class="header-small-menu">
-     <a href="#who">Who</a>
+    <a href="#who">Who</a>
     <a href="#what">What</a>
     <a href="#when">When</a>
-    <a href="#about">Why</a>
-    <a href="#when">How</a>
+    <a href="#why">Why</a>
+    <a href="#how">How</a>
     <h6><a class="email" href="mailto:&#100;&#097;&#118;&#105;&#100;&#064;&#100;&#097;&#118;&#105;&#100;&#119;&#105;&#110;&#100;&#104;&#097;&#109;&#046;&#099;&#111;&#109;" target="_blank">&#100;&#097;&#118;&#105;&#100;&#064;&#100;&#097;&#118;&#105;&#100;&#119;&#105;&#110;&#100;&#104;&#097;&#109;&#046;&#099;&#111;&#109;</a></h6>
   </div>
 </header>
@@ -62,10 +62,7 @@
           <h2 class="">I like to help folks make good use of the internet by crafting custom applications and websites.</h2>
         </div>
         <div class="col col-lg-6 align-self-end">
-          <blockquote>
-            <h1>If I can get you to laugh with me, you like me better, which makes you more open to my ideas. And if I can persuade you to laugh at the particular point I make, by laughing at it you acknowledge its truth.</h1>
-            <p class="right">~ John Cleese</p>
-          </blockquote>
+          <img width="200" src="./img/ddog.png" srcset="./img/ddog.png 2x" alt="David Windham"/>
           <!--<img width="400" src="./img/dw.svg" srcset="./img/dw.svg 2x" alt="David Windham"/>-->
         </div>
       </div>
@@ -409,7 +406,7 @@
       <div class="col-lg-6 col-md-4">
         <div class="br-widget">
           <h5>David Windham</h5>
-          <address class="mt-5">
+          <address class="mt-3">
             <a href="https://www.google.com/maps/place/102+Glenridge+Cir,+Greenwood,+SC+29646">102 Glenridge Circle</a><br/>
             <a href="https://www.google.com/maps/place/102+Glenridge+Cir,+Greenwood,+SC+29646">Greenwood, South Carolina USA</a>
             <br/>
@@ -422,7 +419,8 @@
       <div class="col-lg-3 col-md-4 mt-5 mt-md-0">
         <div class="br-widget">
           <ul class="footer-links">
-
+            <li><a href="https://davidawindham.com/desk/" class="github" rel="me"></span><i class="demo-icon icon-pencil"></i>&nbsp; Desk</a></li>
+            <li><a href="https://davidawindham.com/archive/" class="wikipedia" rel="me"><i class="demo-icon icon-docs"></i>&nbsp; Archive</a></li>
           </ul>
         </div>
       </div>
@@ -430,10 +428,10 @@
       <div class="col-lg-3 col-md-4 mt-5 mt-md-0">
         <div class="br-widget">
           <ul class="footer-links">
-            <li><a href="https://github.com/windhamdavid" class="github" rel="me"></span><i class="demo-icon icon-github-squared">&#xf300;</i>&nbsp; Github</a></li>
-            <li><a href="https://en.wikipedia.org/wiki/User:Windhamdavid" class="wikipedia" rel="me"><i class="demo-icon icon-wikipedia-w">&#xf266;</i>&nbsp; Wikipedia</a></li>
-            <li><a href="https://www.facebook.com/davidawindham" class="facebook"><i class="demo-icon icon-facebook-squared">&#xf308;</i>&nbsp; Facebook</a></li>
-            <li><a href="https://twitter.com/windhamdavid" class="twitter" rel="me"><i class="demo-icon icon-twitter-squared">&#xf304;</i>&nbsp; Twitter</a></li>
+            <li><a href="https://github.com/windhamdavid" class="github" rel="me"></span><i class="demo-icon icon-github"></i>&nbsp; Github</a></li>
+            <li><a href="https://en.wikipedia.org/wiki/User:Windhamdavid" class="wikipedia" rel="me"><i class="demo-icon icon-wikipedia-w"></i>&nbsp; Wikipedia</a></li>
+            <li><a href="https://www.facebook.com/davidawindham" class="facebook"><i class="demo-icon icon-facebook"></i>&nbsp; Facebook</a></li>
+            <li><a href="https://twitter.com/windhamdavid" class="twitter" rel="me"><i class="demo-icon icon-twitter"></i>&nbsp; Twitter</a></li>
           </ul>
         </div>
       </div>