chg colors

README.md

@@ -5,6 +5,9 @@ what to do with the new [domain](https://davidwindham.com) ... I'd like a cleane
 ----
 #### notes:
 
+22/11/23: 
+- Edited Design and [colors](#design)
+
 ##### 21/01/25: Updated pkgs  
 - had to abandon gulp-uglify b/c doesn't support ES6 'const'
 - left fullcalendar at v.4 b/c react import workflow 
@@ -56,6 +59,15 @@ login - calendar / billing
   * staging subdomains
 
 ##### design/
+- Colors
+  - #484C57 - Dark Blue
+  - #535763 - Med Blue -  rgba(83, 87, 99, 1)
+  - #33363d - Black Grey
+  - #39393a - Dark Grey
+  - #67000a - Red
+  - #25c2a0 - Green
+  - #e2e2e2 - Almost Light
+  - #e3e3e3 - Light
 
 * Fonts
    * Playfair Display - [https://fonts.google.com/specimen/Playfair+Display](https://fonts.google.com/specimen/Playfair+Display)

css/style.css

@@ -80,10 +80,10 @@ body {
   position: relative;
 }
 .background-color.white {
-  background-color: #fff;
+  background-color: #e3e3e3;
 }
 .background-color.black {
-  background-color: #121212;
+  background-color: #484C57;
   z-index: 0;
 }
 .page-view {
@@ -439,9 +439,9 @@ h5.how {
   transition: opacity 0.4s ease, background-color 0.4s ease;
 }
 .header-small .header-small-menu {
-  background-color: #2b3444;
+  background-color: #39393a;
   position: absolute;
-  box-shadow: 0 27px 53px 0 rgba(1, 93, 140, 0.24);
+  box-shadow: 0 27px 53px 0 rgba(57, 57, 58, 0.24);
   z-index: 1;
   opacity: 0;
   visibility: hidden;
@@ -909,19 +909,19 @@ blockquote {
 ################# PART ###################
 #########################################*/
 .fc-button-primary {
-    color: #777;
-    background-color: #fff;
-    border-color: #777;
+    color: rgba(83, 87, 99, 1);
+    background-color: #e3e3e3;
+    border-color: #535763;
 }
 .fc-button-primary:disabled {
-    color: #777;
-    background-color: #fff;
-    border-color: #777;
+    color: #535763;
+    background-color: #e3e3e3;
+    border-color: #535763;
 }
 .fc-button-primary:not(:disabled):active,
 .fc-button-primary:not(:disabled).fc-button-active {
-  color: #fff;
-  background-color: #737373;
+  color: #e3e3e3;
+  background-color: rgba(83, 87, 99, .5);
   border-color: #151e27;
 }
 .fc-toolbar h2 {
@@ -934,12 +934,12 @@ blockquote {
     display: block;
     font-size: 0.85em;
     line-height: 1.4;
-    color: #fff !important;
+    color: #e3e3e3 !important;
     border-radius: 3px;
-    border: 1px solid #999;
+    border: 1px solid rgba(83, 87, 99, .25);
 }
 .fc-event, .fc-event-dot {
-    background-color: #737373;
+    background-color: rgba(83, 87, 99, .5);
 }
 .fc-unthemed td.fc-today {
   background: #77777732;
@@ -999,10 +999,6 @@ blockquote {
   -webkit-transition: width 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
   transition: width 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
 }
-#dw-footer {
-  background-color: #b0b0b0;
-  color: #111 !important;
-}
 #dw-footer a {
   color: #111;
   fill: #111;
@@ -1035,9 +1031,13 @@ blockquote {
 }
 #dw-footer .br-widget ul.footer-links li {
   list-style-type: none;
+  text-align: right;
   margin: 0 0 .35rem;
   padding: 0 0 .35rem;
 }
+#dw-footer .br-widget ul.footer-social li {
+  font-size: 28px;
+}
 #dw-footer .br-widget ul.footer-links li:last-child {
   margin-bottom: 0;
 }
@@ -1069,10 +1069,10 @@ blockquote {
 }
 #dw-footer {
   background-color: #333;
-    color: #fff !important;
+  color: #fff !important;
 }
 #dw-footer {
-  background-color: #212121;
+  background-color: #484C57;
   color: #dadada;
 }
 #dw-footer a {
@@ -1133,6 +1133,9 @@ blockquote {
   letter-spacing: .05em;
   opacity: .75;
 }
+#dw-footer .footer-end .footer-social {
+  font-size: 19px;
+}
 @media (min-width: 768px) {
   #dw-footer {
     padding: 5rem 0 5rem;

index.html

@@ -70,7 +70,7 @@
 <!-- ============================= ** HEADER ** ============================= -->
 <header id="header" class="header" role="banner">
   <div class="header-ui">
-    <div class="brand--nav">
+    <div class="brand--nav float-end">
       <h1>David Windham</h1>
     </div>
   </div>
@@ -131,10 +131,7 @@
             I treat my development like mechanical works of art.
           </p>
           <img width="300" src="./img/dw-sig.png" alt="David Windham signature">
-          <p class="lead mt-5">Have a project in mind?</p>
-          <button type="button" class="btn btn-outline-dark">
-            <a href="mailto:&#100;&#097;&#118;&#105;&#100;&#064;&#100;&#097;&#118;&#105;&#100;&#119;&#105;&#110;&#100;&#104;&#097;&#109;&#046;&#099;&#111;&#109;">Email Me</a>
-          </button>
+
         </div>
       </div>
     </div>
@@ -427,9 +424,13 @@
                     I tailor my approach to the unique requirements of each project
                     in an effort create sustainable and practical applications that work for you.
                   </p>
-                  <button type="button" class="btn btn-dark mt-3" data-bs-toggle="modal" data-bs-target="#pricing-modal">
+                  <button type="button" class="btn btn-dark mt-1" data-bs-toggle="modal" data-bs-target="#pricing-modal">
                     Pricing &amp; Cost
                   </button>
+                  <p class="lead mt-5">Have a project in mind?</p>
+                  <button type="button" class="btn btn-dark mt-1">
+                    <a class="text-light" href="mailto:&#100;&#097;&#118;&#105;&#100;&#064;&#100;&#097;&#118;&#105;&#100;&#119;&#105;&#110;&#100;&#104;&#097;&#109;&#046;&#099;&#111;&#109;">Email Me</a>
+                  </button>
                 </div>
               </div>
             </div>
@@ -527,11 +528,11 @@
                             </div>
                           </div>
                         </div>
-                        <p class="mt-1">
-                          I use one of these five vendors for everything.
+                        <p class="mt-3 text-small">
+                          <small>I use one of these five vendors for everything.
                           Anything can be accomplished between them and
                           I will recommend each based solely on your project requirements and existing IT infrastructure.
-                          Each vendor offers a marketplace of products which can be integrated into your project.
+                          Each vendor offers a marketplace of products which can be integrated into your project.</small>
                         </p>
                       </div>
                     </div>
@@ -567,24 +568,21 @@
         </div>
       </div>
 
-      <div class="col-lg-3 col-md-4 mt-5 mt-md-0">
+      <div class="col-lg-2 col-md-4 offset-md-2 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="icon-pencil"></i>&nbsp; Desk</a></li>
-            <li><a href="https://davidawindham.com/archive/" class="wikipedia" rel="me"><i class="icon-docs"></i>&nbsp; Archive</a></li>
-            <li><a href="https://davidawindham.com/til/" class="github" rel="me"></span><i class="icon-book"></i>&nbsp; TIL</a></li>
-            <li><a href="https://code.davidawindham.com/" class="github" rel="me"></span><i class="icon-file-code"></i>&nbsp; Code</a></li>
+            <li><a href="https://davidawindham.com/desk/" rel="me"><i class="icon-pencil"></i>&nbsp; Desk</a></li>          
+            <li><a href="https://davidawindham.com/til/" rel="me"><i class="icon-book"></i>&nbsp; TIL</a></li>
           </ul>
         </div>
       </div>
 
-      <div class="col-lg-3 col-md-4 mt-5 mt-md-0">
+      <div class="col-lg-2 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="icon-github"></i>&nbsp; Github</a></li>
-            <li><a href="https://en.wikipedia.org/wiki/User:Windhamdavid" class="wikipedia" rel="me"><i class="icon-wikipedia-w"></i>&nbsp; Wikipedia</a></li>
-            <li><a href="https://www.facebook.com/davidawindham" class="facebook"><i class="icon-facebook"></i>&nbsp; Facebook</a></li>
-            <li><a href="https://twitter.com/windhamdavid" class="twitter" rel="me"><i class="icon-twitter"></i>&nbsp; Twitter</a></li>
+            <li><a href="https://davidawindham.com/cv/" rel="me"><i class="icon-docs"></i>&nbsp; CV</a></li>
+            <li><a href="https://code.davidawindham.com/" rel="me"><i class="icon-file-code"></i>&nbsp; Code</a></li>
+            <li><a href="https://davidwindham.com/davidwindham.asc" rel="me"><i class="icon-folder-open-empty"></i>&nbsp; Key</a></li>
           </ul>
         </div>
       </div>
@@ -593,7 +591,16 @@
     <div class="footer-end">
       <div class="row">
         <div class="col-md-6 text-center text-md-left">
-          &copy; 2004-2020
+          &copy; 2004-2023
+        </div>
+        <div class="col-md-6 text-center text-md-right">
+          <ul class="footer-links footer-social list-inline">
+            <li class="list-inline-item"><a href="https://twitter.com/windhamdavid" class="twitter" rel="me"><i class="icon-twitter"></i></a></li>
+            <li class="list-inline-item"><a href="https://github.com/windhamdavid" class="github" rel="me"><i class="icon-github"></i></a></li>
+            <li class="list-inline-item"><a href="https://en.wikipedia.org/wiki/User:Windhamdavid" class="wikipedia" rel="me"><i class="icon-wikipedia-w"></i></a></li>
+            <li class="list-inline-item"><a href="https://www.facebook.com/windhamdavid" class="facebook"><i class="icon-facebook"></i></a></li>
+            
+          </ul>
         </div>
       </div>
     </div>
@@ -612,7 +619,7 @@
 <script src="./js/waypoints-inview.js"></script>
 <script src="./js/_init.js"></script>
 <!-- endbuild -->
-
+<!--
 <script>
   var _paq = window._paq = window._paq || [];
   /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
@@ -628,6 +635,6 @@
   })();
 </script>
 <noscript><p><img src="https://davidawindham.com/wik/matomo.php?idsite=5&amp;rec=1" style="border:0;" alt="" /></p></noscript>
-
+--> 
 </body>
 </html>