css

css/style.css

@@ -1,20 +1,39 @@
-/*********** Body ***********/
-body {
-/*  color: #000;
-  background:#363e48;
-  font-family: sans-serif; */
-}
+/* ########################################
+########### davidwindham.com ##############
+###########################################
+	     .     . .              .       .  .
+	. . ...-..-| |-. .-. .-.-..-| .-.. ...-|
+	 ` ` '' '`-'-' '-`-`-' ' '`-'-`-`-` '`-'-
+1 - Body
+2 - Typography
+3 - Header
+4 - Navigation
+5 - Layout
+6 - Parts
+7 - Footer
+9 - Queries
+10 - Fonts
+*/
 
-/*********** Layout ***********/
-.container {
-  padding:30px;
-}
-.main {
-  background:#fbfbfb;
-  padding: 40px;
-}
+/*########################################
+################# BODY ###################
+#########################################*/
 
-/*********** Type ***********/
+body {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  min-height: 100%;
+  -webkit-font-smoothing: antialiased;
+  font-kerning: auto;
+  color: #000;
+  background: :#363e48;
+  transition: background-color 0.4s ease;
+  font-family: sans-serif;
+}
+/*########################################
+################# TYPE ###################
+#########################################*/
 h1 {
   font-family: 'Playfair Display', serif;
   font-weight: 900;
@@ -46,7 +65,37 @@ a {
   text-align:right;
 }
 
-/*********** Reponsive ***********/
+/*########################################
+################# HEAD ###################
+#########################################*/
+
+/*########################################
+################# NAVI ###################
+#########################################*/
+
+/*########################################
+################# LAYO ###################
+#########################################*/
+.container {
+  padding:30px;
+}
+.main {
+  background:#fbfbfb;
+  padding: 40px;
+}
+
+/*########################################
+################# PART ###################
+#########################################*/
+
+/*########################################
+################# FOOT ###################
+#########################################*/
+
+/*########################################
+################# QUER ###################
+#########################################*/
+
 @media (max-width: 639px) {
   h1 {
     font-size: 27px;
@@ -65,8 +114,95 @@ a {
 
 @media (max-width: 1279px) {}
 
-/*********** Font ***********/
-/* montserrat-italic - latin */
+/*########################################
+################# FONT ###################
+#########################################*/
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  src: url("./_font/Inter/Inter-Regular.woff2") format("woff2"),
+  url("./_font/Inter/Inter-Regular.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 400;
+  src: url("./_font/Inter/Inter-Italic.woff2") format("woff2"),
+  url("./_font/Inter/Inter-Italic.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  src: url("./_font/Inter/Inter-Medium.woff2") format("woff2"),
+  url("./_font/Inter/Inter-Medium.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 500;
+  src: url("./_font/Inter/Inter-MediumItalic.woff2") format("woff2"),
+  url("./_font/Inter/Inter-MediumItalic.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  src: url("./_font/Inter/Inter-SemiBold.woff2") format("woff2"),
+  url("./_font/Inter/Inter-SemiBold.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 600;
+  src: url("./_font/Inter/Inter-SemiBoldItalic.woff2") format("woff2"),
+  url("./_font/Inter/Inter-SemiBoldItalic.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  src: url("./_font/Inter/Inter-Bold.woff2") format("woff2"),
+  url("./_font/Inter/Inter-Bold.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 700;
+  src: url("./_font/Inter/Inter-BoldItalic.woff2") format("woff2"),
+  url("./_font/Inter/Inter-BoldItalic.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 800;
+  src: url("./_font/Inter/Inter-ExtraBold.woff2") format("woff2"),
+  url("./_font/Inter/Inter-ExtraBold.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 800;
+  src: url("./_font/Inter/Inter-ExtraBoldItalic.woff2") format("woff2"),
+  url("./_font/Inter/Inter-ExtraBoldItalic.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 900;
+  src: url("./_font/Inter/Inter-Black.woff2") format("woff2"),
+  url("./_font/Inter/Inter-Black.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 900;
+  src: url("./_font/Inter/Inter-BlackItalic.woff2") format("woff2"),
+  url("./_font/Inter/Inter-BlackItalic.woff") format("woff");
+}
+
 @font-face {
   font-family: 'Montserrat';
   font-style: italic;
@@ -79,7 +215,7 @@ a {
     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;
@@ -92,7 +228,7 @@ a {
     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;
@@ -105,7 +241,7 @@ a {
     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;
@@ -118,7 +254,7 @@ a {
     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;
@@ -131,7 +267,7 @@ a {
     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;
@@ -144,7 +280,7 @@ a {
     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;
@@ -157,7 +293,7 @@ a {
     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;
@@ -170,7 +306,7 @@ a {
     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;
@@ -183,7 +319,7 @@ a {
     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;
@@ -196,6 +332,9 @@ a {
     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');

index.html

@@ -17,8 +17,30 @@
 </head>
 <body>
 <div id="top" class="container">
-  <header class="header" role="banner">
-    <h1>David Windham</h1>
+  <header id="header" class="header" role="banner">
+    <div class="header-ui">
+      <div class="brand--nav">
+        <h1>David Windham</h1>
+      </div>
+    </div>
+  </header>
+  <header class="header-small showing">
+    <a href="./index.php" class="brand">
+      <img class="light" src="./img/dw-sm-white.svg" srcset="./img/dw-sm-white.svg 2x" alt="David Windham logo"/>
+      <img class="dark" src="./img/dw-sm.svg" srcset="./img/dw-sm.svg 2x" alt="David Windham logo"/>
+    </a>
+    <button class="hamburger" type="button">
+      <span class="hamburger-box">
+        <span class="hamburger-inner"></span>
+      </span>
+    </button>
+    <div class="header-small-menu">
+      <a href="#when">Home</a>
+      <a href="#work">Work</a>
+      <a href="#about">About</a>
+      <h6>Email</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>
+    </div>
   </header>
   <div class="main">
     <blockquote>