button hovers and some padding at the bottom of the page

jackmford · Feb 16, 2023 · d338590 · d338590
1 parent cb8a675
commit d338590
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 15 deletions.
diff --git a/ui/html/pages/index.tmpl b/ui/html/pages/index.tmpl
@@ -12,23 +12,23 @@
   <body class="font-mono">
     <nav class="bg-white shadow px-6 py-6">
       <div class="mx-auto flex items-center justify-between inline-block">
-        <a href="/" class="px-5 py-2 rounded-none-lg bg-orange-100 border-2 border-black">JMF</a>
-        <a href="/static/img/resume.pdf" target="_blank" class="px-5 py-2 rounded-none-lg bg-orange-100 border-2 border-black">Resume</a>
+        <a href="/" class="px-5 py-2 rounded-none-lg bg-orange-50 hover:bg-orange-100 border-2 border-black">JMF</a>
+        <a href="/static/img/resume.pdf" target="_blank" class="px-5 py-2 rounded-none-lg bg-orange-50 hover:bg-orange-100 border-2 border-black">Resume</a>
       </div>
     </nav>
     <div class="flex justify-center mt-24">
       <img class="w-40 h-40" src="/static/img/cartoonprof.png" alt="A cartoon representation of my face">
     </div>
     <div class="flex justify-center">
       <div class="text-center">
-        <h1>Jack Fordyce</h1>
+        <p class="text-2xl">Jack Fordyce</p>
         <h3>Software Engineer</h3>
       </div>
     </div>
     <div class="flex justify-center gap-x-2 mt-3">
-      <a href="mailto:[email protected]" target="_blank" id="mail-link"><img class="w-10 h-8" src="../static/img/emailpic.png" alt="Send me an email"></a>
-      <a href="https://github.com/jackmford" target="_blank" id="git-link"><img class="w-10 h-8" src="../static/img/octos.png" alt="Visit my Github page"></a>
-      <a href="https://www.linkedin.com/in/jackmitchellfordyce/" target="_blank" id="linked-link"><img class="w-10 h-8" src="../static/img/linkedin.png" alt="Visit my Linkedin page"></a>
+      <a href="mailto:[email protected]" target="_blank" id="mail-link"><img class="w-12 h-10" src="../static/img/emailpic.png" alt="Send me an email"></a>
+      <a href="https://github.com/jackmford" target="_blank" id="git-link"><img class="w-12 h-10" src="../static/img/octos.png" alt="Visit my Github page"></a>
+      <a href="https://www.linkedin.com/in/jackmitchellfordyce/" target="_blank" id="linked-link"><img class="w-12 h-10" src="../static/img/linkedin.png" alt="Visit my Linkedin page"></a>
     </div>
     <div class="flex flex-col space-y-8 mt-10">
     <div class="flex justify-center">
@@ -58,7 +58,7 @@
         </div>
       </div>
 
-    <div class="flex justify-center">
+    <div class="flex justify-center pb-10">
       <div class="w-2/3 space-y-2">
           <span class="proj-p-title"><a href=https://github.com/jackmford/finger-game target="_blank">Finger Game</a> <i class="fas fa-hand-point-up"></i></span>
           <p class="proj-p-des">Web application that utilizes self-trained object detection to identify the number of fingers a user is holding up to the webcam. Included usage of Flask, Javascript, Bulma CSS, and several Python libraries to train the finger-tip detector. Hack ISU 2018 project written with Zachary Macke, John Jago, and Sandeep Yeturu.</p>

diff --git a/ui/static/css/output.min.css b/ui/static/css/output.min.css
@@ -542,16 +542,16 @@ video {
   display: flex;
 }
 
-.h-40 {
-  height: 10rem;
+.h-10 {
+  height: 2.5rem;
 }
 
-.h-8 {
-  height: 2rem;
+.h-40 {
+  height: 10rem;
 }
 
-.w-10 {
-  width: 2.5rem;
+.w-12 {
+  width: 3rem;
 }
 
 .w-2\/3 {
@@ -604,9 +604,9 @@ video {
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
 
-.bg-orange-100 {
+.bg-orange-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 237 213 / var(--tw-bg-opacity));
+  background-color: rgb(255 247 237 / var(--tw-bg-opacity));
 }
 
 .bg-white {
@@ -634,6 +634,10 @@ video {
   padding-bottom: 1.5rem;
 }
 
+.pb-10 {
+  padding-bottom: 2.5rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -642,8 +646,18 @@ video {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.hover\:bg-orange-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 237 213 / var(--tw-bg-opacity));
 }