Merge pull request #51 from Driminary/staging

UI Redesign

package.json

@@ -1,6 +1,6 @@
 {
   "name": "apheleia",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Source code for www.thomas-anderson.net",
   "author": "Thomas Anderson",
   "homepage": "https://github.com/Driminary/thomas-anderson.net#README",

source/_includes/base.liquid

@@ -8,9 +8,7 @@
 {% include nav.liquid %}
 
 <!-- Move content down from navbar -->
-<div class="mt-12">
 {{ content }}
-</div>
 
 {% include footer.liquid %}
 

source/_includes/footer.liquid

@@ -1,17 +1,17 @@
 <!-- Footer -->
-<footer class="bg-gray-800 border-t border-gray-500 h-full overflow-hidden">
-    <div class="grid grid-cols-2 md:grid-cols-3 items-center px-10 pt-10 pb-5 w-full mx-auto sm:max-w-screen-xl text-white">
+<footer class="bg-gray-200 border-t border-gray-500 h-full overflow-hidden">
+    <div class="grid grid-cols-2 md:grid-cols-3 items-center px-10 py-5 w-full mx-auto sm:max-w-screen-lg text-gray-900">
         <div>
-            <h4>Thomas Anderson</h1>
-                <h6 class="text-gray-500">IT Consultant</h6>
-                    <h6 class="text-gray-500">Wakefield</h6>
-                        <h6 class="text-gray-600"><a href="mailto:[email protected]">[email protected]</a></h6>
+            <p class="text-lg font-semibold text-black">Thomas Anderson</p>
+                <p>IT Consultant</p>
+                    <p>Wakefield</p>
+                        <p class="underline"><a href="mailto:[email protected]">[email protected]</a></p>
         </div>
         <div class="md:col-start-3">
-            <p class="text-gray-600">Please use <a href="https://www.linkedin.com/in/th0masanderson/">LinkedIn</a> for any professional queries and for anything else, please use my email.</p>
+            <p class="text-sm">Please use <a class="underline" href="https://www.linkedin.com/in/th0masanderson/">LinkedIn</a> for any professional queries and for anything else, please use my email.</p>
         </div>
     </div>
 
-    <!-- Copyright, Terms of Service and Privacy Policy -->
-    <div class="text-xs text-gray-500 float-left m-1 ml-2">&copy; 2020 Thomas Anderson<!-- Hide these for now | <a class="underline" href="/terms">Terms of Service</a> | <a class="underline" href="/privacy">Privacy Policy</a> --></div>
+    <!-- Copyright -->
+    <div class="text-xs text-gray-800 float-left m-1 ml-2">&copy; 2020 Thomas Anderson</div>
 </footer>

source/_includes/nav.liquid

@@ -1,11 +1,10 @@
 <!-- Navigation -->
-<nav class="fixed top-0 left-0 w-screen text-white font-medium bg-gray-800 border-b border-gray-600 p-3">
-    <div class="w-full mx-auto sm:max-w-screen-xl">
-    <a class="text-lg hover:text-gray-400 ml-10" href="/">Tom<span class="text-gray-500 hover:text-gray-600">Anderson</span></a>
-    <ul class="float-right mr-10">
+<nav class="absolute top-0 w-screen text-gray-200 font-medium bg-none">
+    <div class="w-full mx-auto sm:max-w-screen-xl text-right">
+    <ul class="p-1 md:p-2 m-3 mr-5 shadow-inner rounded-lg float-right bg-gray-900 bg-opacity-50 border border-gray-800">
         {%- for p in collections.all %}
         <li class="inline-block align-middle px-2">
-            <a class="hover:text-gray-400 hover:border-b hover:border-gray-600{% if page.url == p.url %} text-gray-500 border-b border-gray-600{% endif %}" href="{{ p.url }}">{{ p.data.title }}</a>
+            <a class="hover:underline{% if page.url == p.url %} font-semibold {% endif %}" href="{{ p.url }}">{{ p.data.title }}</a>
         </li>
         {%- endfor %}
     </ul>

source/about.html

@@ -6,10 +6,10 @@
 
 <!-- Start Content -->
 
-<header class="h-40 md:h-56 bg-anderson-blue text-white grid items-center p-10">
+<header class="md:h-40 min-h-full bg-deep-gray-100 text-white grid items-center p-10">
     <div class="w-full mx-auto sm:max-w-screen-xl pl-10">
         <h1>A bit of info...</h1>
-        <hr class="w-1/2 border-gray-900 border-opacity-25" />
+        <hr class="w-1/2 border-gray-700 border-opacity-75 shadow" />
     </div>
 </header>
 

source/index.html

@@ -7,41 +7,40 @@
 
 <!-- Start Content -->
 
-<header class="feature bg-anderson-blue grid items-center">
-		<div class="grid grid-cols-1 md:grid-cols-3 gap-5 items-center w-3/4 sm:max-w-screen-lg mx-auto">
+<header class="feature bg-deep-gray-100 grid items-center">
+		<div class="grid grid-cols-1 md:grid-cols-3 gap-5 items-center w-3/4 sm:max-w-screen-xl mx-auto text-white">
         <div>
-            <img alt="A photo of Tom Anderson" src="/img/mesmaller.jpg" class="rounded-full border border-blue-900 object-cover mx-auto h-64" />
+            <img alt="A photo of Tom Anderson" src="/img/mesmaller.jpg" class="rounded-full shadow-2xl border-2 border-gray-300 object-cover mx-auto h-64" />
 		</div>
         <div class="md:col-span-2">
-            <h1 class="text-white ml-3">Hi.</h1>
-            <hr class="border-white border-opacity-25 mb-3" />
-            <p class="text-white text-opacity-50 text-xl">I'm Tom Anderson, and this is my personal site. Have a look around!</p>
-            <p class="text-right text-white text-opacity-50 text-xl mr-5 text-fancy" >Tom</p>
+            <h1 class="ml-3">Hi.</h1>
+            <hr class="border-gray-700 border-opacity-75 shadow mb-3" />
+            <p class="text-xl">I'm Tom Anderson, and this is my personal site. Have a look around!</p>
+            <p class="text-right text-xl mr-5 text-fancy" >Tom</p>
             </div>
         </div>
 </header>
 
-<section class="bg-gray-600 border-t border-gray-500 py-10">
-<div class="text-center text-white px-4 sm:max-w-screen-xl mx-auto">
+<section class="border-t border-gray-500 py-10">
+<div class="text-center text-gray-900 px-4 sm:max-w-screen-xl mx-auto">
     <h1>Some of my work...</h1>
     <div class="inline-grid grid-cols-2 sm:grid-cols-4 my-5 gap-2">
-        <div><a class="bg-gray-800 hover:bg-gray-700 text-5xl rounded shadow pt-1"
+        <div><a class="bg-gray-800 hover:bg-gray-700 text-white text-5xl rounded shadow pt-1"
                 href="https://github.com/Driminary"><i title="GitHub" class="fab fa-fw fa-github"></i></a></div>
-        <div><a class="bg-white hover:bg-gray-200 text-gray-800 text-5xl rounded shadow pt-1"
+        <div><a class="bg-white hover:bg-gray-200 border border-gray-500 border-opacity-50 text-gray-800 text-5xl rounded shadow pt-1"
                 href="https://googlecloudcertified.credential.net/profile/0a0997a4f8b4ce5db4ded3ad1209b1762bac02a8"><i title="Google Cloud Certifications" class="fab fa-fw fa-google"></i></a>
         </div>
-        <div><a class="bg-white hover:bg-gray-200 text-blue-600 text-5xl rounded shadow pt-1"
+        <div><a class="bg-white hover:bg-gray-200 border border-gray-500 border-opacity-50 text-blue-600 text-5xl rounded shadow pt-1"
                 href="https://www.youracclaim.com/users/thomas-anderson.64196b60"><i title="Microsoft Certifications" class="fab fa-fw fa-microsoft"></i></a>
         </div>
-        <div><a class="bg-blue-700 hover:bg-blue-800 text-5xl rounded shadow pt-1"
+        <div><a class="bg-blue-700 hover:bg-blue-800 text-white text-5xl rounded shadow pt-1"
                 href="https://www.linkedin.com/in/th0masanderson/"><i title="LinkedIn" class="fab fa-fw fa-linkedin"></i></a></div>
     </div>
-    <hr class="w-1/2 mx-auto my-5 shadow" />
+    <hr class="w-1/2 mx-auto my-5 border-gray-500 shadow" />
     <p class="text-3xl">Comments? Suggestions? Queries?</p>
-    <p class="text-xl text-white text-opacity-75">Please use the address below.</p>
-    <a class="bg-gray-200 hover:bg-gray-300 font-semibold text-xl text-gray-600 rounded border border-gray-500 inline-block px-4 py-2 my-4 shadow" href="mailto:[email protected]"><i class="fas fa-envelope-open-text mr-2"></i>[email protected]</a>
+    <p class="text-xl">Please use the address below.</p>
+    <a class="bg-gray-200 hover:bg-gray-300 font-semibold text-xl text-gray-700 rounded border border-gray-500 inline-block px-4 py-2 my-4 shadow" href="mailto:[email protected]"><i class="fas fa-envelope-open-text mr-2"></i>[email protected]</a>
 </div>
 </section>
 
-
 <!-- End Content -->

tailwind.config.js

@@ -8,6 +8,8 @@ module.exports = {
     extend: {
         colors: {
         'anderson-blue': '#07689F',
+        'deep-gray-100': '#21374b',
+        'deep-gray-200': '#162533'
       }
     },
   },