html

css/style.css

@@ -1,209 +1,230 @@
-@import 'css/milligram.css';
+@import 'normalize.css';
 
+
+/*********** Body ***********/
 body {
-  color: #1d2530;
+  color: #000;
   background:#363e48;
-  font-family: 'Montserrat', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
-  font-size: 1.7em;
-  letter-spacing: .005em;
-  line-height: 1.3;
+  font-family: 'Montserrat', sans-serif;
+}
+
+/*********** Layout ***********/
+.container {
+  padding:30px;
 }
 .main {
-    margin-top: 60px;
-	padding:60px !important;
+  background:#fbfbfb;
+  padding: 40px;
 }
-.copy {
-    background:#fbfbfb;
-    padding: 20px;
+
+/*********** Type ***********/
+h1 {
+  font-family: 'Playfair Display', serif;
+  font-weight: 900;
+  font-size: 37px;
+  letter-spacing: .01em;
+}
+.header h1 {
+  color: #fff;
 }
 h2 {
-    font-family: 'Playfair Display', serif;
-    font-weight: 900;
-    font-size: 47px;
-    letter-spacing: .01em;
-    color: #fff
-}
-@media (max-width: 40.0rem) {
-	.main {
-		margin-top: 20px;
-		background:#fbfbfb;
-		padding:20px !important;
-	}
-	h2 {
-		font-size: 3rem !important;
-	}
+  font-family: 'Playfair Display', serif;
+  font-weight: 700;
+  font-size: 27px;
+}
+h3 {
+  font-family: 'Playfair Display', serif;
+  font-weight: 500;
+  font-size: 23px;
+}
+p {
+  font-family: 'Montserrat', sans-serif;
+  font-size: 17px;
+  line-height: 1.2;
+}
+a {
+  color: #376399;
+}
+.right {
+  text-align:right;
+}
+
+/*********** Reponsive ***********/
+@media (max-width: 639px) {
+  h1 {
+    font-size: 27px;
+  }
+  .container {
+    padding:10px 5px;
+  }
+  .main {
+    padding: 5px 15px;
+  }
 }
+
+@media (max-width: 767px) {}
+
+@media (max-width: 1023px) {}
+
+@media (max-width: 1279px) {}
+
+/*********** Font ***********/
 /* montserrat-italic - latin */
 @font-face {
   font-family: 'Montserrat';
   font-style: italic;
   font-weight: 400;
-  src: url('./font/montserrat-v14-latin-italic.eot'); /* IE9 Compat Modes */
+  src: url('../font/montserrat-v14-latin-italic.eot'); /* IE9 Compat Modes */
   src: local('Montserrat Italic'), local('Montserrat-Italic'),
-       url('./font/montserrat-v14-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('./font/montserrat-v14-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
-       url('./font/montserrat-v14-latin-italic.woff') format('woff'), /* Modern Browsers */
-       url('./font/montserrat-v14-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('./font/montserrat-v14-latin-italic.svg#Montserrat') format('svg'); /* Legacy iOS */
+    url('../font/montserrat-v14-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('../font/montserrat-v14-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
+    url('../font/montserrat-v14-latin-italic.woff') format('woff'), /* Modern Browsers */
+    url('../font/montserrat-v14-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
+    url('../font/montserrat-v14-latin-italic.svg#Montserrat') format('svg'); /* Legacy iOS */
 }
 /* montserrat-regular - latin */
 @font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 400;
-  src: url('./font/montserrat-v14-latin-regular.eot'); /* IE9 Compat Modes */
+  src: url('../font/montserrat-v14-latin-regular.eot'); /* IE9 Compat Modes */
   src: local('Montserrat Regular'), local('Montserrat-Regular'),
-       url('./font/montserrat-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('./font/montserrat-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-       url('./font/montserrat-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
-       url('./font/montserrat-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('./font/montserrat-v14-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
+    url('../font/montserrat-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('../font/montserrat-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+    url('../font/montserrat-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
+    url('../font/montserrat-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+    url('../font/montserrat-v14-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
 }
 /* montserrat-500 - latin */
 @font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 500;
-  src: url('./font/montserrat-v14-latin-500.eot'); /* IE9 Compat Modes */
+  src: url('../font/montserrat-v14-latin-500.eot'); /* IE9 Compat Modes */
   src: local('Montserrat Medium'), local('Montserrat-Medium'),
-       url('./font/montserrat-v14-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('./font/montserrat-v14-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
-       url('./font/montserrat-v14-latin-500.woff') format('woff'), /* Modern Browsers */
-       url('./font/montserrat-v14-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('./font/montserrat-v14-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */
+    url('../font/montserrat-v14-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('../font/montserrat-v14-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
+    url('../font/montserrat-v14-latin-500.woff') format('woff'), /* Modern Browsers */
+    url('../font/montserrat-v14-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
+    url('../font/montserrat-v14-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */
 }
 /* montserrat-500italic - latin */
 @font-face {
   font-family: 'Montserrat';
   font-style: italic;
   font-weight: 500;
-  src: url('./font/montserrat-v14-latin-500italic.eot'); /* IE9 Compat Modes */
+  src: url('../font/montserrat-v14-latin-500italic.eot'); /* IE9 Compat Modes */
   src: local('Montserrat Medium Italic'), local('Montserrat-MediumItalic'),
-       url('./font/montserrat-v14-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('./font/montserrat-v14-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
-       url('./font/montserrat-v14-latin-500italic.woff') format('woff'), /* Modern Browsers */
-       url('./font/montserrat-v14-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('./font/montserrat-v14-latin-500italic.svg#Montserrat') format('svg'); /* Legacy iOS */
+    url('../font/montserrat-v14-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('../font/montserrat-v14-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
+    url('../font/montserrat-v14-latin-500italic.woff') format('woff'), /* Modern Browsers */
+    url('../font/montserrat-v14-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
+    url('../font/montserrat-v14-latin-500italic.svg#Montserrat') format('svg'); /* Legacy iOS */
 }
 /* montserrat-900 - latin */
 @font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 900;
-  src: url('./font/montserrat-v14-latin-900.eot'); /* IE9 Compat Modes */
+  src: url('../font/montserrat-v14-latin-900.eot'); /* IE9 Compat Modes */
   src: local('Montserrat Black'), local('Montserrat-Black'),
-       url('./font/montserrat-v14-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('./font/montserrat-v14-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
-       url('./font/montserrat-v14-latin-900.woff') format('woff'), /* Modern Browsers */
-       url('./font/montserrat-v14-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('./font/montserrat-v14-latin-900.svg#Montserrat') format('svg'); /* Legacy iOS */
+    url('../font/montserrat-v14-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('../font/montserrat-v14-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
+    url('../font/montserrat-v14-latin-900.woff') format('woff'), /* Modern Browsers */
+    url('../font/montserrat-v14-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
+    url('../font/montserrat-v14-latin-900.svg#Montserrat') format('svg'); /* Legacy iOS */
 }
 /* playfair-display-regular - latin */
 @font-face {
   font-family: 'Playfair Display';
   font-style: normal;
   font-weight: 400;
-  src: url('./font/playfair-display-v20-latin-regular.eot'); /* IE9 Compat Modes */
+  src: url('../font/playfair-display-v20-latin-regular.eot'); /* IE9 Compat Modes */
   src: local(''),
-       url('./font/playfair-display-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('./font/playfair-display-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-       url('./font/playfair-display-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
-       url('./font/playfair-display-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('./font/playfair-display-v20-latin-regular.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
+    url('../font/playfair-display-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('../font/playfair-display-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+    url('../font/playfair-display-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
+    url('../font/playfair-display-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+    url('../font/playfair-display-v20-latin-regular.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
 }
 /* playfair-display-700 - latin */
 @font-face {
   font-family: 'Playfair Display';
   font-style: normal;
   font-weight: 700;
-  src: url('./font/playfair-display-v20-latin-700.eot'); /* IE9 Compat Modes */
+  src: url('../font/playfair-display-v20-latin-700.eot'); /* IE9 Compat Modes */
   src: local(''),
-       url('./font/playfair-display-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('./font/playfair-display-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
-       url('./font/playfair-display-v20-latin-700.woff') format('woff'), /* Modern Browsers */
-       url('./font/playfair-display-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('./font/playfair-display-v20-latin-700.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
+    url('../font/playfair-display-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('../font/playfair-display-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
+    url('../font/playfair-display-v20-latin-700.woff') format('woff'), /* Modern Browsers */
+    url('../font/playfair-display-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
+    url('../font/playfair-display-v20-latin-700.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
 }
 /* playfair-display-900 - latin */
 @font-face {
   font-family: 'Playfair Display';
   font-style: normal;
   font-weight: 900;
-  src: url('./font/playfair-display-v20-latin-900.eot'); /* IE9 Compat Modes */
+  src: url('../font/playfair-display-v20-latin-900.eot'); /* IE9 Compat Modes */
   src: local(''),
-       url('./font/playfair-display-v20-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('./font/playfair-display-v20-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
-       url('./font/playfair-display-v20-latin-900.woff') format('woff'), /* Modern Browsers */
-       url('./font/playfair-display-v20-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('./font/playfair-display-v20-latin-900.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
+    url('../font/playfair-display-v20-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('../font/playfair-display-v20-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
+    url('../font/playfair-display-v20-latin-900.woff') format('woff'), /* Modern Browsers */
+    url('../font/playfair-display-v20-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
+    url('../font/playfair-display-v20-latin-900.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
 }
 /* playfair-display-italic - latin */
 @font-face {
   font-family: 'Playfair Display';
   font-style: italic;
   font-weight: 400;
-  src: url('./font/playfair-display-v20-latin-italic.eot'); /* IE9 Compat Modes */
+  src: url('../font/playfair-display-v20-latin-italic.eot'); /* IE9 Compat Modes */
   src: local(''),
-       url('./font/playfair-display-v20-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('./font/playfair-display-v20-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
-       url('./font/playfair-display-v20-latin-italic.woff') format('woff'), /* Modern Browsers */
-       url('./font/playfair-display-v20-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('./font/playfair-display-v20-latin-italic.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
+    url('../font/playfair-display-v20-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('../font/playfair-display-v20-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
+    url('../font/playfair-display-v20-latin-italic.woff') format('woff'), /* Modern Browsers */
+    url('../font/playfair-display-v20-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
+    url('../font/playfair-display-v20-latin-italic.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
 }
 /* playfair-display-700italic - latin */
 @font-face {
   font-family: 'Playfair Display';
   font-style: italic;
   font-weight: 700;
-  src: url('./font/playfair-display-v20-latin-700italic.eot'); /* IE9 Compat Modes */
+  src: url('../font/playfair-display-v20-latin-700italic.eot'); /* IE9 Compat Modes */
   src: local(''),
-       url('./font/playfair-display-v20-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('./font/playfair-display-v20-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
-       url('./font/playfair-display-v20-latin-700italic.woff') format('woff'), /* Modern Browsers */
-       url('./font/playfair-display-v20-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('./font/playfair-display-v20-latin-700italic.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
+    url('../font/playfair-display-v20-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('../font/playfair-display-v20-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
+    url('../font/playfair-display-v20-latin-700italic.woff') format('woff'), /* Modern Browsers */
+    url('../font/playfair-display-v20-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
+    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');
-	font-weight: normal;
-	font-style: normal;
+  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');
+  font-weight: normal;
+  font-style: normal;
 }
 .demo-icon {
-	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;
-
-	/* Uncomment for 3D effect */
-	/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+  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;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1em;
+  margin-left: .2em;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  /* opacity: .8; */
+  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
 }

index.html

@@ -9,17 +9,70 @@
 <link rel="stylesheet" href="css/style.css">
 <title>David Windham</title>
 </head>
-<!-- let's put a comment in-->
 <body>
-	<div class="container main">
-		<div class="row">
-			<h2>David A. Windham</h2>
-			<div class="column copy">
-				<p>I just got this domain in 2020. Some other fella had it back in 2004 when I originally decided I'd put something on the internet which is why my stuff is over at <a href="https://davidawindham.com">davidawindham.com</a>. I really didn't want it, but I've had so many missent emails and whatnot in the past because folks miss the 'a' in david<b>a</b>windham.com. After the other David Windham gave it up in 2010 or so, the domain flopped around a bunch of places for the last ten years, I just happened to think of it the other day because I found my email address had been misprinted in a newsletter. I whois'd it, noticed it was pending delete, and put in a backorder. So... that's solved. I'll deal with unsubscribing the old email until it's clean.  If you run into this page and you need to get in touch, head over to my <a href="https://davidawindham.com/contact/">contact page</a>. If you're just cyberstalking me or farting around the internet, then here's a <a href="https://davidawindham.com/sitemap/">sitemap</a> to get you started.<p>
-				</div>
-			</div>
-		</div>
-	</div>
+<div id="top" class="container">
+  <header class="header" role="banner">
+    <h1>David Windham</h1>
+  </header>
+  <nav role="navigation">
+  </nav>
+  <div class="main">
+    <p class="right"><time datetime="2020-03-15">3/15/20</time></p>
+    <h2>About</h2>
+      <p>I got this domain in 2020. I really didn't want it, but I've had many missed emails because folks miss the 'a' in <a href="https://davidawindham.com">http://david<b>a</b>windham.com</a> where I've been online since 2003. I happened to think of it the other day because I found my email address had been misprinted in a newsletter. I whois'd it, noticed it was pending delete, and put in a backorder. If you'd like to get in touch, head over to my <a href="https://davidawindham.com/contact/">contact page</a> or <a href="https://davidawindham.com/sitemap/">sitemap</a>.<p>
+
+    <p>I don't have any content for this site, so for now, I'll just leave you with a quote I like:</p>
+    <hr>
+    <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>
+    <hr>
+    <h3 id="daw">daw:</h3>
+      <p>What to do with this new domain?... I&#39;d like a clean one page app that is focused on function so I can keep all my random stuff on the old domain. Just going to make some notes here to work it out.</p>
+
+    <h3 id="notes-">notes:</h3>
+    <h4 id="content-">content/</h4>
+    <p>ideas - bot, AMA, TIL, knowitall,<br>about - bio / cv / clients<br>service - ability / experitise / range<br>login - calendar / billing</p>
+    <h4 id="features-">features/</h4>
+    <ul>
+      <li>bot
+        <ul>
+          <li>chat / contact</li>
+          <li>twilio / fb messenger / slack / twitter</li>
+        </ul>
+      </li>
+      <li>now page
+        <ul>
+          <li>simplified archive page</li>
+          <li>desk/bookmarks/code/til/social</li>
+        </ul>
+      </li>
+      <li>calendar
+        <ul>
+          <li>scheduler / rate</li>
+        </ul>
+      </li>
+      <li>client login
+        <ul>
+          <li>invoicing / payments / tickets</li>
+        </ul>
+      </li>
+    </ul>
+    <h4 id="design">design/</h4>
+    <h4 id="stack-">stack/</h4>
+    <ul>
+    <li>GO - lang</li>
+    <li>MySQL - data</li>
+    <li>React - UI</li>
+    <li><a href="https://code.davidawindham.com/david/daw">git repo</a></li>
+    </ul>
+  </div>
+  <footer><p><a href="#top">[Top]</a></p></footer>
+</div>
+
+
+<!----------------  Analytics -------------------------------------
 <script type="text/javascript">
   var _paq = window._paq || [];
   _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
@@ -35,5 +88,6 @@
   })();
 </script>
 <noscript><p><img src="https://davidawindham.com/wik/matomo.php?idsite=5&amp;rec=1" style="border:0;" alt="" /></p></noscript>
+--------------------- Analytics ----------------------------------->
 </body>
 </html>