simplify menu

css/styles.css

@@ -5840,7 +5840,7 @@ textarea.form-control-lg {
 .offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm {
   --bs-offcanvas-zindex: 1045;
   --bs-offcanvas-width: 200px !important;
-  --bs-offcanvas-height: 30vh;
+  --bs-offcanvas-height: 100px !important;
   --bs-offcanvas-padding-x: 1rem;
   --bs-offcanvas-padding-y: 1rem;
   --bs-offcanvas-color: ;
@@ -11310,7 +11310,7 @@ textarea.form-control-lg {
 @font-face {
   font-display: block;
   font-family: "bootstrap-icons";
-  src: url("/fonts/bootstrap-icons.woff2?24e3eb84d0bcaf83d77f904c78ac1f47") format("woff2"), url("/fonts/bootstrap-icons.woff?24e3eb84d0bcaf83d77f904c78ac1f47") format("woff");
+  src: url("/wp-content/themes/daw/fonts/bootstrap-icons.woff2?24e3eb84d0bcaf83d77f904c78ac1f47") format("woff2"), url("/wp-content/themes/daw/fonts/bootstrap-icons.woff?24e3eb84d0bcaf83d77f904c78ac1f47") format("woff");
 }
 .bi::before,
 [class^=bi-]::before,

css/styles.scss

@@ -51,6 +51,8 @@ $utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");
 
 $enable-negative-margins: true;
 $offcanvas-horizontal-width: 200px !important;
+$offcanvas-vertical-height: 100px !important;
+
 
 /***********************************************************
 ################## Bootstrap Complete ######################
@@ -101,5 +103,5 @@ $offcanvas-horizontal-width: 200px !important;
 ################### Bootstrap Icons ########################
 ************************************************************/
 
-$bootstrap-icons-font-dir: "/fonts";
+$bootstrap-icons-font-dir: "/wp-content/themes/daw/fonts";
 @import '../node_modules/bootstrap-icons/font/bootstrap-icons.scss';

header.php

@@ -22,34 +22,16 @@
 		</div>
 	</div>
 </header>
-<div class="offcanvas offcanvas-end text-bg-blue" tabindex="-1" id="offcanvasNav" aria-labelledby="offcanvasNavLabel">
-  <nav class="navmenu navmenu-default" role="navigation">
-    <ul class="nav nav-stacked list-group">
-      <li class="list-group-item"><a href="<?php echo home_url( '/' ); ?>"><span class="fa fa-home fa-fw"></span> Home</a></li>
-      <li class="list-group-item"><a href="<?php echo home_url( '/' ); ?>about"><span class="fa fa-file-text-o fa-fw"></span> About</a></li>
-      <li class="list-group-item"><a href="<?php echo home_url( '/' ); ?>desk"><span class="fa fa-pencil-square-o fa-fw"></span> Desk</a></li>
-      <ul>
-        <li><a href="<?php echo home_url( '/' ); ?>desk/archive" title="Archive" class="list-group-item"><span class="fa fa-archive fa-fw"></span> Archive</a></li>
-        <li><a href="<?php echo home_url( '/' ); ?>til/" title="Today I Learned" class="list-group-item"><span class="fa fa-book fa-fw"></span> TIL</a></li>
-      </ul>
-      <li><a href="<?php echo home_url( '/' ); ?>studio" class="list-group-item"><span class="fa fa-flask fa-fw"></span> Studio</a>
-      <ul>
-        <li><a href="https://code.davidawindham.com" class="list-group-item"><span class="fa fa-code fa-fw"></span> Code</a></li>
-        <li><a href="<?php echo home_url( '/' ); ?>studio/music/" class="list-group-item"><span class="fa fa-microphone fa-fw"></span> Audio</a></li>
-        <li><a href="<?php echo home_url( '/' ); ?>studio/art/" title="Art" class="list-group-item"><span class="fa fa-paint-brush fa-fw"></span> Art</a></li>
-        <li><a href="https://photo.davidwindham.com" title="Photo" class="list-group-item"><span class="fa fa-camera-retro fa-fw"></span> Photo</a></li>
-      </ul>
-      </li>
-      <li><a href="<?php echo home_url( '/' ); ?>contact" class="list-group-item"><span class="fa fa-envelope-o fa-fw"></span> Contact</a></li>
-      <ul>
-        <li><a href="<?php echo home_url( '/' ); ?>mail/" title="Newsletter" class="list-group-item"><span class="fa fa-paper-plane-o fa-fw"></span> Email</a></li>
-        <li><a href="https://davidwindham.com/rtc/" class="list-group-item"><span class="fa fa-comment fa-fw"></span> Chat</a></li>
-        <li><a href="<?php echo home_url( '/' ); ?>pay" class="list-group-item"><span class="fa fa-credit-card fa-fw"></span> Pay</a></li>
-        <li><a href="<?php echo home_url( '/' ); ?>contact/guests" title="Guestbook" class="list-group-item"><span class="fa fa-pencil-square fa-fw"></span> Guests</a></li>
-      </ul>
-      <li><a href="http://chess.davidwindham.com" class="list-group-item"><span class="chess-html">&#9814;</span> Chess</a></li>
-      <li><a href="<?php echo home_url( '/' ); ?>about/analytics/" title="analytics" class="list-group-item"><span class="fa fa-tachometer fa-fw"></span> Stats</a></li>
-      <li><a href="<?php echo home_url( '/' ); ?>sitemap" class="list-group-item"><span class="fa fa-sitemap fa-fw"></span> Sitemap</a></li>
+<div class="offcanvas offcanvas-top text-bg-blue" tabindex="-1" id="offcanvasNav" aria-labelledby="offcanvasNavLabel">
+  <nav class="d-flex justify-content-center" role="navigation">
+    <ul class="nav list-group-horizontal list-group pt-4 fs-5">
+      <li class="list-group-item list-group-flush"><a href="<?php echo home_url( '/' ); ?>"><i class="bi bi-house"></i></a></li>
+      <li class="list-group-item"><a href="<?php echo home_url( '/' ); ?>about"><i class="bi bi-person"></i> About</a></li>
+      <li class="list-group-item"><a href="<?php echo home_url( '/' ); ?>desk"><i class="bi bi-pen"></i> Desk</a></li>
+      <li class="list-group-item"><a href="<?php echo home_url( '/' ); ?>now"><i class="bi bi-hourglass"></i> Now</a></li>
+      <li class="list-group-item"><a href="<?php echo home_url( '/' ); ?>studio"><i class="bi bi-lightbulb"></i> Studio</a></li>
+      <li class="list-group-item"><a href="<?php echo home_url( '/' ); ?>contact"><i class="bi bi-envelope"></i> Contact</a></li>
+      <li class="list-group-item"><a href="<?php echo home_url( '/' ); ?>sitemap"><i class="bi bi-diagram-3"></i></a></li>
     </ul>
   </nav>
 </div>

inc/utils.php

@@ -77,6 +77,17 @@ function _s_backbone_get_request_parameters() {
 >= PHP 7.3 include file as html_dom.php
 **********************/
 
+function til() {
+	require_once('lib/html_dom.php');
+
+	$url = 'https://davidawindham.com/til/index.html';
+	$html = file_get_html($url);
+	$i = 0;
+	foreach ($html->find('ul li ul li') as $li) {
+	    echo $li;
+		if (++$i == 9) break;
+	}
+}
 function pull_til() {
 	require_once('lib/html_dom.php');
 
@@ -98,6 +109,19 @@ function pull_til_all() {
 	    echo $li;
 	}
 }
+function bookmarks() {
+	require_once('lib/html_dom.php');
+
+	$url = 'https://davidawindham.com/bookmarks/';
+	$html = file_get_html($url);
+	$i = 0;
+	foreach ($html->find('.linklist-item-title h2 a') as $li) {
+	    if (!empty($html)) {
+			echo $li . '<br />';
+			if (++$i == 9) break;
+		}
+	}
+}
 function bookmarks_pull() {
 	require_once('lib/html_dom.php');
 
@@ -123,4 +147,173 @@ function bookmarks_all() {
 		}
 	}
 }
+function photo() {
+	require_once('lib/html_dom.php');
+
+	$url = 'https://photo.davidwindham.com/#16734437965516';
+	$html = file_get_html($url);
+	$i = 0;
+	foreach ($html->find('.photo .overlay h1') as $li) {
+    if (!empty($html)) {
+      echo str_replace('href="/', 'href="https://photo.davidawindham.com/', $li . '&nbsp;');
+      if (++$i == 18) break;
+    }
+  }
+}
+function todo() {
+	require_once('lib/html_dom.php');
+
+	$url = 'https://davidawindham.com/til/lists/todo';
+	$html = file_get_html($url);
+	$i = 0;
+	foreach ($html->find('.markdown ul li') as $li) {
+    if (!empty($html)) {
+      echo $li->childNodes(0);
+      if (++$i == 9) break;
+    }
+  }
+}
+function code() {
+	require_once('lib/html_dom.php');
+
+	$url = 'https://code.davidawindham.com/david';
+	$html = file_get_html($url);
+	$i = 0;
+	foreach ($html->find('.item a.name, p.has-emoji, span.time-since') as $li) {
+    if (!empty($html)) {
+      //$time = find('.time-since') as $time;
+      echo str_replace('href="/', 'href="https://code.davidawindham.com/', $li . '&nbsp;');
+      //echo $time . '&nbsp;';
+      if (++$i == 9) break;
+    }
+  }
+}
+function docs() {
+	require_once('lib/html_dom.php');
+
+	$url = 'https://davidawindham.com/til/docs';
+	$html = file_get_html($url);
+	$i = 0;
+	foreach ($html->find('.markdown ul li') as $li) {
+	    if (!empty($html)) {
+			echo $li;
+      if (++$i == 7) break;
+		}
+	}
+}
+function docs_code() {
+	require_once('lib/html_dom.php');
+
+	$url = 'https://code.davidawindham.com/david/til/src/main/docs';
+	$html = file_get_html($url);
+	$i = 0;
+	foreach ($html->find('table tr td') as $li) {
+	    if (!empty($html)) {
+      //if($i++ == 1) continue;
+      echo str_replace('href="/', 'href="https://code.davidawindham.com/', $li);
+      if(!($i++ % 3)) {
+        echo '<br>';
+      }
+      if (++$i == 1) break;
+		}
+	}
+}
+function lists() {
+	require_once('lib/html_dom.php');
+
+	$url = 'https://davidawindham.com/til/lists/';
+	$html = file_get_html($url);
+	$i = 0;
+	foreach ($html->find('.markdown ul li') as $li) {
+	    if (!empty($html)) {
+			echo $li;
+      if (++$i == 7) break;
+		}
+	}
+}
+function lists_code() {
+	require_once('lib/html_dom.php');
+
+	$url = 'https://code.davidawindham.com/david/til/src/main/lists';
+	$html = file_get_html($url);
+	$i = 0;
+	foreach ($html->find('table tr td') as $li) {
+	    if (!empty($html)) {
+      //if($i++ == 1) continue;
+      if (++$i == 2) break;
+      echo str_replace('href="/', 'href="https://code.davidawindham.com/', $li);
+      if(!($i++ % 3)) {
+        echo '<br>';
+      }
+
+		}
+
+	}
+}
+function notes() {
+	require_once('lib/html_dom.php');
+
+	$url = 'https://davidawindham.com/til/notes/';
+	$html = file_get_html($url);
+	$i = 0;
+	foreach ($html->find('.markdown ul li') as $li) {
+	    if (!empty($html)) {
+			echo $li;
+      if (++$i == 7) break;
+		}
+	}
+}
+function listening() {
+	require_once('lib/html_dom.php');
+
+	$url = 'https://davidawindham.com/studio/music/';
+	$html = file_get_html($url);
+	$i = 0;
+	foreach ($html->find('ul .wtracks li') as $li) {
+	    if (!empty($html)) {
+			echo $li;
+      if (++$i == 7) break;
+		}
+	}
+}
+function reading() {
+	require_once('lib/html_dom.php');
+
+	$url = 'https://davidawindham.com/til/lists/now/reading';
+	$html = file_get_html($url);
+	$i = 0;
+	foreach ($html->find('.markdown ul li') as $li) {
+	    if (!empty($html)) {
+			echo $li;
+      if (++$i == 7) break;
+		}
+	}
+}
+function playing() {
+	require_once('lib/html_dom.php');
+
+	$url = 'https://davidawindham.com/til/lists/now/playing';
+	$html = file_get_html($url);
+	$i = 0;
+	foreach ($html->find('.markdown ul li') as $li) {
+	    if (!empty($html)) {
+			echo $li;
+      if (++$i == 7) break;
+		}
+	}
+}
+function watching() {
+	require_once('lib/html_dom.php');
+
+	$url = 'https://davidawindham.com/til/lists/now/watching';
+	$html = file_get_html($url);
+	$i = 0;
+	foreach ($html->find('.markdown ul li') as $li) {
+	    if (!empty($html)) {
+			echo $li;
+      if (++$i == 7) break;
+		}
+	}
+}
+
 

page-contact.php

@@ -1,6 +1,6 @@
 <?php get_header(); ?>
 	<div class="container" role="main">
-		<div id="content" class="single" >
+		<div id="content" class="single">
 			<div class="row mt-5 pt-5" style="padding:50px 0;">
 				<div class="col-sm-4">
 					<h2 class="entry-title">Contact</h2>
@@ -13,6 +13,7 @@
 					<h5 class="contact"><span class="fa fa-phone fa-fw"></span> Phone</h5>
 					<p>803-712-3283</p>
 					<h5 class="contact"><span class="fa fa-envelope-o fa-fw"></span> Email</h5>
+
 					<p>
 						<script type="text/javascript">
 							//<![CDATA[
@@ -35,7 +36,10 @@
 							//]]>
 						</script>
 					</p>
-
+          <h5><a href="<?php echo home_url( '/' ); ?>mail/" title="Newsletter" class="list-group-item"><span class="fa fa-paper-plane-o fa-fw"></span> Subscribe</a></h5>
+          <h5><a href="https://davidwindham.com/rtc/" class="list-group-item"><span class="fa fa-comment fa-fw"></span> Chat</a></h5>
+          <h5><a href="<?php echo home_url( '/' ); ?>pay" class="list-group-item"><span class="fa fa-credit-card fa-fw"></span> Pay</a></h5>
+          <h5><a href="<?php echo home_url( '/' ); ?>contact/guests" title="Guestbook" class="list-group-item"><span class="fa fa-pencil-square fa-fw"></span> Guests</a></h5>
 				</div>
 				<div class="col-sm-8">
 					<?php gravity_form(1, false, false, false, '', false); ?>

page-desk.php

@@ -8,7 +8,7 @@ get_header(); ?>
 	<div class="container leader">
 		<div class="row">
 			<div class="col-md-12">
-				<h1 id="desk" class="cm-sans wow fadeInLeft">Desk</h1>
+				<h1 id="desk" class="cm-sans fs-2 animate__animated animate__fadeInLeft">Desk</h1>
 			</div>
 		</div>
 		<div class="row desk pt-5">
@@ -18,7 +18,7 @@ get_header(); ?>
             Feel free to <a href="/contact/">contact me</a> if you have any feedback, questions, or just want to say hello. <br /><br />Thanks for the visit,</h4>
 					<img src="<?php echo get_template_directory_uri() . '/img/dw_signature.png'; ?>" alt="David Windham Signature"/>
 					<!--<img src="<?php echo get_template_directory_uri() . '/img/desk.png'; ?>" alt="Who Needs a Computer Anyway?" width="90%" style="margin:50px 10px 20px;border:3px solid #cecece"/>-->
-				</div>
+        </div>
 				<div class="studio-tools d-lg-block">
           <h5><u>Today I Learned</u></h5>
 						<ul>
@@ -34,13 +34,13 @@ get_header(); ?>
 					<?php $stickyposts = get_posts($args); ?>
             <li>Recently Edited</li>
             <?php foreach ($stickyposts as $post) : setup_postdata($post); ?>
-              <li style="color:#777"><?php echo get_the_date('m/d/y'); ?> - <a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
+              <li style="color:#777"><?php echo get_the_date('y/m/d'); ?> - <a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
 					  <?php endforeach; ?>
           <br>
           <?php } ?>
 					<li><u>Recent Posts</u></li>
 					<?php $recentposts = get_posts('numberposts=67'); foreach ($recentposts as $post) : setup_postdata($post); ?>
-					       <li style="color:#777"><?php echo get_the_date('m/d/y'); ?> - <a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
+					       <li style="color:#777"><?php echo get_the_date('y/m/d'); ?> - <a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
 					<?php endforeach; ?>
 				</ul>
 			</div>
@@ -78,9 +78,13 @@ get_header(); ?>
 					</div>
 				</div>
 			</div>
+
       <div class="float-end mt-3">
-			  <a href="/archive/" type="button" class="btn btn-dark float-end"> 👉🏼 View the Archives</a>
-		  </div>
+      <div class="row mb-3">
+
+        </div>
+			  <a href="/archive/" type="button" class="btn btn-dark float-end">👉🏼 The Archive</a>
+      </div>
 		</div>
 	</div>
 	<div class="container">

page-now.php

@@ -0,0 +1,136 @@
+<?php
+/*
+Template Name: Now
+*/
+
+get_header(); ?>
+
+	<div class="container leader">
+    <div class="row">
+			<div class="col-md-12">
+				<h1 id="now" class="cm-sans fs-2 dw-light animate__animated animate__fadeInLeft">Now</h1>
+			</div>
+		</div>
+    <div class="desk" role="main">
+			<div class="entry-content">
+				<div class="row mt-3">
+          <div class="col-lg-7">
+            <p class="fs-5 lh-base"><span class="firstcharacter">A</span> <b><em>NOW</em></b> page... some idea I ran across at some point which made sense. It's basically what I've been doing. It's pulled in from various public things I keep notes on. Since I'm already working in a text editor, I've developed a habit of making markdown and text files which I just sync a set of files to a server and viola, it's here. It started with my notes and has expanded to menial things like my grocery lists because they fit right into my day to day workflow. My favorite list here is <b><i>ToDo(ne)</i></b>.</p>
+          </div>
+          <div class="col-lg-4 offset-1">
+						<h5 class="fw-bold mt-2">Posts</h5>
+						<ul style="margin:0">
+							<?php $recentposts = get_posts(array( 'numberposts' => 9, 'offset' => 0 ) ); foreach ($recentposts as $post) : setup_postdata($post); ?>
+							       <li style="color:#777"><?php echo get_the_date('y/m/d'); ?> - <a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
+							<?php endforeach; ?>
+						</ul>
+          </div>
+        </div>
+        <div class="row mt-3">
+					<div class="col-lg-4">
+						<h5 class="fw-bold mt-2">Today I Learned</h5>
+						<ul style="margin:0">
+							<?php til(); ?>
+						</ul>
+          </div>
+					<div class="col-lg-4">
+						<h5 class="fw-bold mt-2">Bookmarks</h5>
+						<ul style="margin:0">
+							<?php bookmarks(); ?>
+						</ul>
+					</div>
+          <div class="col-lg-4">
+						<h5 class="fw-bold mt-2">Projects</h5>
+						<ul style="margin:0">
+            <?php $recentposts = get_posts(array( 'category_name' => 'studio', 'numberposts' => 9, 'offset' => 0 ) ); foreach ($recentposts as $post) : setup_postdata($post); ?>
+							<li style="color:#777"><?php echo get_the_date('y/m/d'); ?> - <a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
+						<?php endforeach; ?>
+						</ul>
+					</div>
+        </div>
+        <div class="row mt-3">
+          <div class="col-lg-4">
+            <h5 class="fw-bold mt-2">Docs</h5>
+            <ul style="margin:0">
+            <?php docs(); ?>
+						</ul>
+					</div>
+          <div class="col-lg-4">
+            <h5 class="fw-bold mt-2">Lists</h5>
+            <ul style="margin:0">
+            <?php lists(); ?>
+						</ul>
+					</div>
+          <div class="col-lg-4">
+            <h5 class="fw-bold mt-2">Notes</h5>
+            <ul style="margin:0">
+            <?php notes(); ?>
+						</ul>
+					</div>
+				</div>
+        <div class="row mt-3">
+          <div class="col-lg-4">
+            <h5 class="fw-bold mt-2">Work</h5>
+            <ul style="margin:0">
+            <?php photo(); ?>
+						</ul>
+					</div>
+          <div class="col-lg-4">
+            <h5 class="fw-bold mt-2">ToDo</h5>
+            <ul style="margin:0">
+            <?php todo(); ?>
+						</ul>
+					</div>
+          <div class="col-lg-4">
+            <h5 class="fw-bold mt-2">ToDo(ne)</h5>
+            <ul style="margin:0">
+
+						</ul>
+					</div>
+        </div>
+        <div class="row mt-3">
+          <div class="col-lg-4">
+            <h5 class="fw-bold mt-2">Playing</h5>
+            <ul style="margin:0">
+              <?php playing(); ?>
+						</ul>
+					</div>
+          <div class="col-lg-4">
+            <h5 class="fw-bold mt-2">Watching</h5>
+            <ul style="margin:0">
+
+						</ul>
+					</div>
+          <div class="col-lg-4">
+            <h5 class="fw-bold mt-2">Listening</h5>
+            <ul style="margin:0 0 10px">
+            <?php listening(); ?>
+						</ul>
+            More @ <a href="/studio/music/">/studio/music/</a>
+					</div>
+				</div>
+        <div class="row mt-3 mb-5">
+          <div class="col-lg-4">
+            <h5 class="fw-bold mt-2">Reading</h5>
+            <ul style="margin:0">
+            <?php reading(); ?>
+						</ul>
+					</div>
+          <div class="col-lg-4">
+            <h5 class="fw-bold mt-2">Learning</h5>
+            <ul style="margin:0">
+
+						</ul>
+					</div>
+          <div class="col-lg-4">
+            <h5 class="fw-bold mt-2">Elsewhere</h5>
+            <ul style="margin:0">
+
+						</ul>
+					</div>
+				</div>
+			</div>
+    </div>
+	</div>
+
+<?php get_footer(); ?>

page-studio.php

@@ -7,7 +7,7 @@
 					<div class="container animac">
 						<div class="row">
 							<div class="col-sm-12">
-								<h1 class="light super-duper cm-sans wow fadeInLeft">Studio</h1>
+								<h1 class="light super-duper cm-sans animate__animated animate__fadeInLeft">Studio</h1>
 							</div>
 						</div>
 					</div>
@@ -127,12 +127,12 @@
 		<div class="row">
 			<div class="col-sm-2 bg-dark">
 				<ul class="nav studio-subnav">
-					<li class="list-group-item mt-3" data-bs-target="#caro" data-bs-slide-to="0"><a id="studio-tab" class="nav-item active" href="#studio" aria-controls="studio" role="tab" data-bs-toggle="tab" data-bs-target="#studio"><span class="fa fa-eye fa-fw"></span> <em>Studio</em></a></li>
-					<li class="list-group-item mt-3" data-bs-target="#caro" data-bs-slide-to="1"><a id="webdev-tab" class="nav-item" href="#webdev" aria-controls="webdev" role="tab" data-bs-toggle="tab" data-bs-target="#webdev"><span class="fa fa-desktop fa-fw"></span> <em>Web</em></a></li>
-					<li class="list-group-item mt-3" data-bs-target="#caro" data-bs-slide-to="2"><a id="ux-tab" class="nav-item" href="#ux" aria-controls="ux" role="tab" data-bs-toggle="tab" data-bs-target="#ux"><span class="fa fa-terminal fa-fw"></span> <em>UX/UI</em></a></li>
-					<li class="list-group-item mt-3" data-bs-target="#caro" data-bs-slide-to="3"><a id="graphic-tab" class="nav-item" href="#graphic" aria-controls="graphic" role="tab" data-bs-toggle="tab" data-bs-target="#graphic"><span class="fa fa-pencil fa-fw"></span> <em>Graphic</em></a></li>
-					<li class="list-group-item mt-3" data-bs-target="#caro" data-bs-slide-to="4"><a id="media-tab" class="nav-item" href="#media" aria-controls="media" role="tab" data-bs-toggle="tab" data-bs-target="#media"><span class="fa fa-film fa-fw"></span> <em>Media</em></a></li>
-					<li class="list-group-item mt-3" data-bs-target="#caro" data-bs-slide-to="5"><a id="art-tab" class="nav-item" href="#art" aria-controls="art" role="tab" data-bs-toggle="tab" data-bs-target="#art"><span class="fa fa-paint-brush fa-fw"></span> <em>Art</em></a></li>
+					<li class="list-group-item mt-0" data-bs-target="#caro" data-bs-slide-to="0"><a id="studio-tab" class="nav-item active" href="#studio" aria-controls="studio" role="tab" data-bs-toggle="tab" data-bs-target="#studio"><span class="fa fa-eye fa-fw"></span> <em>Studio</em></a></li>
+					<li class="list-group-item mt-1" data-bs-target="#caro" data-bs-slide-to="1"><a id="webdev-tab" class="nav-item" href="#webdev" aria-controls="webdev" role="tab" data-bs-toggle="tab" data-bs-target="#webdev"><span class="fa fa-desktop fa-fw"></span> <em>Web</em></a></li>
+					<li class="list-group-item mt-1" data-bs-target="#caro" data-bs-slide-to="2"><a id="ux-tab" class="nav-item" href="#ux" aria-controls="ux" role="tab" data-bs-toggle="tab" data-bs-target="#ux"><span class="fa fa-terminal fa-fw"></span> <em>UX/UI</em></a></li>
+					<li class="list-group-item mt-1" data-bs-target="#caro" data-bs-slide-to="3"><a id="graphic-tab" class="nav-item" href="#graphic" aria-controls="graphic" role="tab" data-bs-toggle="tab" data-bs-target="#graphic"><span class="fa fa-pencil fa-fw"></span> <em>Graphic</em></a></li>
+					<li class="list-group-item mt-1" data-bs-target="#caro" data-bs-slide-to="4"><a id="media-tab" class="nav-item" href="#media" aria-controls="media" role="tab" data-bs-toggle="tab" data-bs-target="#media"><span class="fa fa-film fa-fw"></span> <em>Media</em></a></li>
+					<li class="list-group-item mt-1" data-bs-target="#caro" data-bs-slide-to="5"><a id="art-tab" class="nav-item" href="#art" aria-controls="art" role="tab" data-bs-toggle="tab" data-bs-target="#art"><span class="fa fa-paint-brush fa-fw"></span> <em>Art</em></a></li>
 				</ul>
 			</div>
 			<div class="col-sm-10">
@@ -141,7 +141,7 @@
             <div class="row">
   						<div class="col-sm-9 mt-4">
 							  <div class="entry-content">
-  								<h4 class="georgia"><em><span class="firstcharacter">A</span>lthough it seems that in the shower or sleeping is where my best work occurs,</em> the studio is the place where the shoe leather hits the pavement. I mostly work with web and application development, but I also do a good deal of graphic, print, and multimedia design. On my off hours, I like to turn off the computers to paint with camel hair, canvas, and minerals.</h4>
+  								<h4 class="fs-5 georgia"><em><span class="firstcharacter">A</span>lthough it seems that in the shower or sleeping is where my best work occurs,</em> the studio is the place where the shoe leather hits the pavement. I mostly work with web and application development, but I also do a good deal of graphic, print, and multimedia design. On my off hours, I like to turn off the computers to paint with camel hair, canvas, and minerals.</h4>
   							</div>
   						</div>
   						<div class="col-sm-3 studio-tools">
@@ -160,7 +160,7 @@
             <div class="row">
   						<div class="col-sm-9 mt-4">
   							<div class="entry-content">
-  								<h4 class="georgia"><em><span class="firstcharacter">T</span>hey don't call it the information age for nothing</em>. The web browser has become the default medium for communication and the craft involves a broad spectrum of knowledge that give a developer complete control over how a web application performs, looks, and operates.</h4>
+  								<h4 class="fs-5 georgia"><em><span class="firstcharacter">T</span>hey don't call it the information age for nothing</em>. The web browser has become the default medium for communication and the craft involves a broad spectrum of knowledge that give a developer complete control over how a web application performs, looks, and operates.</h4>
   							</div>
   						</div>
   						<div class="col-sm-3 studio-tools">
@@ -168,6 +168,10 @@
   								<li><em>Tools</em></li>
   								<li>Z-shell, Vim, SSH, Git, Grunt, Gulp, JavaScript, PHP, Python, Ruby, Node.js, Linux, Apache, Ngnix, MongoDB, MySQL, &amp; Redis.</li>
   							</ul>
+                <ul class="mt-2">
+                <li><em>Links</em></li>
+                  <li><a href="https://code.davidawindham.com" class="list-group-item"><span class="fa fa-code fa-fw"></span> Code</a></li>
+                </ul>
   						</div>
             </div>
 					</div>
@@ -175,7 +179,7 @@
             <div class="row">
   						<div class="col-sm-9 mt-4">
   							<div class="entry-content">
-  								<h4 class="georgia"><em><span class="firstcharacter">U</span>ser experience design, interaction design, and behavior design</em> are just a couple of the terms floating around these days for those who work with user interaction, code, and design. I've often found myself refering to cognitive psychology, '<a href="http://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two">The magical number seven</a>', when trying to convice others to simplify user navigation options and settings.</h4>
+  								<h4 class="fs-5 georgia"><em><span class="firstcharacter">U</span>ser experience design, interaction design, and behavior design</em> are just a couple of the terms floating around these days for those who work with user interaction, code, and design. I've often found myself refering to cognitive psychology, '<a href="http://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two">The magical number seven</a>', when trying to convice others to simplify user navigation options and settings.</h4>
   							</div>
   						</div>
   						<div class="col-sm-3 studio-tools">
@@ -194,7 +198,7 @@
             <div class="row">
   						<div class="col-sm-9 mt-4">
   							<div class="entry-content">
-  								<h4 class="georgia"><em><span class="firstcharacter">D</span>on't mistake legibility with communication</em> - David Carson. Visual design in communication is powerful and it can make or break a product, company, presentation, or annual report.  Even though I'm using software, I still believe the most powerful tool, besides our imagination is still the pencil &amp; paper.</h4>
+  								<h4 class="fs-5 georgia"><em><span class="firstcharacter">D</span>on't mistake legibility with communication</em> - David Carson. Visual design in communication is powerful and it can make or break a product, company, presentation, or annual report.  Even though I'm using software, I still believe the most powerful tool, besides our imagination is still the pencil &amp; paper.</h4>
   							</div>
   						</div>
   						<div class="col-sm-3 studio-tools">
@@ -212,7 +216,7 @@
             <div class="row">
   						<div class="col-sm-9 mt-4">
   							<div class="entry-content">
-  								<h4 class="georgia"><em><span class="firstcharacter">T</span>he average human attention span is a bit shorter than that of a goldfish</em>. People often forget that the web is a multimedia medium. I'm a decent with enough production, lighting, equipment, and I have an eye for detail to make your multimedia look and sound like it was actually done by a   professional.</h4>
+  								<h4 class="fs-5 georgia"><em><span class="firstcharacter">T</span>he average human attention span is a bit shorter than that of a goldfish</em>. People often forget that the web is a multimedia medium. I'm a decent with enough production, lighting, equipment, and I have an eye for detail to make your multimedia look and sound like it was actually done by a   professional.</h4>
   							</div>
   						</div>
   						<div class="col-sm-3 studio-tools">
@@ -223,6 +227,11 @@
   								<li>Adobe Premier Pro</li>
   								<li>Blackmagic DaVinci Resolve</li>
   							</ul>
+                <ul class="mt-2">
+                  <li><em>Links</em></li>
+                  <li><a href="https://photo.davidwindham.com" title="Photo" class="list-group-item"><span class="fa fa-camera-retro fa-fw"></span> Photo</a></li>
+                  <li><a href="<?php echo home_url( '/' ); ?>studio/music/" class="list-group-item"><span class="fa fa-microphone fa-fw"></span> Audio</a></li>
+                </ul>
   						</div>
             </div>
 					</div>
@@ -230,7 +239,7 @@
             <div class="row">
   						<div class="col-sm-9 mt-4">
   							<div class="entry-content">
-  								<h4 class="georgia"><em><span class="firstcharacter">L</span>ife doesn't imitate art, it imitates bad television</em> - Woody Allen. I like to paint portraits, landscapes and abstractions in oil, watercolor and gauche. I wish I was able to paint more often and I keep joking with my better half that it's my retirement plan. Compared to my digital work, it's nice knowing that a painting will last several hundred years.</h4>
+  								<h4 class="fs-5 georgia"><em><span class="firstcharacter">L</span>ife doesn't imitate art, it imitates bad television</em> - Woody Allen. I like to paint portraits, landscapes and abstractions in oil, watercolor and gauche. I wish I was able to paint more often and I keep joking with my better half that it's my retirement plan. Compared to my digital work, it's nice knowing that a painting will last several hundred years.</h4>
   							</div>
   						</div>
   						<div class="col-sm-3 studio-tools">
@@ -248,7 +257,6 @@
 			</div>
 		</div>
 	</div>
-
 	<div class="container">
 		<div class="row mt-5">
 			<h4><em>Projects</em></h4>

style.css

@@ -372,6 +372,12 @@ h4.spread {
     max-width: 1280px;
 	}
 }
+@media (min-width: 1400px) {
+	.container {
+		width: 1380px;
+    max-width: 1380px;
+	}
+}
 
 @media print {
   * {
@@ -1496,11 +1502,17 @@ body.art .site-title a {
 /*============================================
 		Desk
 ==============================================*/
-.row.desk {
-	background:#fff;
-	padding:30px;
+.desk {
+	background:#ffffff;
+	padding:50px;
 	box-shadow:0 0 5px rgba(0,0,0,.1)
 }
+.desk li {
+  color: #777
+}
+h1#now {
+  color: #ffffff;
+}
 
 /*============================================
 		Music
@@ -2862,6 +2874,9 @@ p.powerdby {
 a {
   color:#67000a;
 }
+a:hover {
+  color:#1a8;
+}
 .about a {
   color:#ff4557;
 }