reorg of everything to look more professional

css/main.css

@@ -42,12 +42,13 @@ h5 {
     color: white;
     box-shadow: 0 6px 12px rgba(0,0,0,.175);
 }
-
-.card-img-overlay {
+.top-desc {
+    opacity: .7;
     background-color:rgba(0, 0, 0, 0.5);
     width: 375px;
     height: 150px;
     font-size: small;
+	font-family: 'Cutive Mono';
     color: white;
     padding: .5rem;
     position: absolute;
@@ -57,23 +58,35 @@ h5 {
     right: 0px;
     box-shadow: 2px 2px 4px 0px rgba(21, 21, 21, 0.75);
 }
-.top-desc {
-    color: #fff;
-    margin-left: -59px;
-    margin-top: 9px;
-    opacity: .7;
-}
 .card-header, .card-footer {
     border: 1px solid #383737;
     background-image: url(../images/sep-half.png);
     background-color: #4f4f4f;
     border-bottom-color: #3d3d3d;
 }
+.card-footer {
+    padding: .5rem 1.25rem;
+}
+.circle :hover,
+.circle :focus {
+	width: 60px;
+	height: 60px;
+	-moz-border-radius: 50px;
+	-webkit-border-radius: 50px;
+	border-radius: 50px;
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+    margin-bottom: 20px;
+    margin-right: 20px;
+    right: 0px;
+    bottom: 0px;
+    z-index: 3;
+}
 .card-block {
     box-shadow: 0 6px 12px rgba(0,0,0,.175);
 }
 .card-text {
 	font-weight: lighter;
+	font-size: .9rem;
 }
 .nav-tabs .nav-link.active {
     background-image: url(../images/sep-half.png);

views/index.tpl

@@ -4,35 +4,34 @@
 <div class="col-xl-8 col-lg-9 col-md-11 col-sm-12">
   <div class="card mx-auto" style="width: 475px;">
     <img class="img-fluid" src="/images/{{main_pic}}"  alt="What I look like.">
-      <div class="card-img-overlay">
-        <pre class="top-desc">
-          {{name.upper()}} = {'occupation': '{{occupation}}',
-          % final_item = len(skills) - 1
-          % for i, skill in enumerate(skills):
-          %     if i == 0:   
-                   'skills': ['{{skill}}',
-          %     end
-          %     if i == final_item:
-                              '{{skill}}'],
-          %     end
-          %     if i != final_item and i != 0:
-                              '{{skill}}',
-          %     end
-          % end
-          % final_item = len(likes) - 1
-          % for i, like in enumerate(likes):
-          %     if i == 0:   
-                   'likes': ['{{like}}',
-          %     end
-          %     if i == final_item:
-                             '{{like}}']}
-          %     end
-          %     if i != final_item and i != 0:
-                             '{{like}}',
-          %     end
-          % end
-        </pre>
-    </div>
+    <!-- overlay -->
+    <pre class="top-desc">
+{{name.upper()}} = {'occupation': '{{occupation}}',
+% final_item = len(skills) - 1
+% for i, skill in enumerate(skills):
+%   if i == 0:   
+       'skills': ['{{skill}}',
+%   end
+%   if i == final_item:
+                  '{{skill}}'],
+%   end
+%   if i != final_item and i != 0:
+                  '{{skill}}',
+%   end
+% end
+% final_item = len(likes) - 1
+% for i, like in enumerate(likes):
+%   if i == 0:   
+       'likes': ['{{like}}',
+%   end
+%   if i == final_item:
+                 '{{like}}']}
+%   end
+%   if i != final_item and i != 0:
+                 '{{like}}',
+%   end
+% end
+    </pre>
     <div class="card-header">
       <ul class="nav nav-tabs card-header-tabs">
         <li class="nav-item">
@@ -67,9 +66,11 @@
           </a>
         </div> <!-- col -->
         <div class="col-6">
-          <a target="_blank" href="{{linkedin_URL}}"  role="button" data-toggle="tooltip" data-placement="bottom" title="Connect with me on Linkedin">
+          <div class="circle">
+            <a target="_blank" href="{{linkedin_URL}}"  role="button" data-toggle="tooltip" data-placement="bottom" title="Connect with me on Linkedin">
             <img src="/images/linkedin.svg" class="img-fluid" style="height: 48px";>
-          </a>
+            </a>
+          </div><!-- circle -->
         </div> <!-- col -->
         </div> <!-- row -->
     </div> <!-- card footer -->

web_routes.py

@@ -68,28 +68,18 @@ def index():
 
 @route('/images/<filename>')
 def images(filename):
-    return static_file(filename, root='{0}/front_end/images'.format(WEB_ROOT))
+    return static_file(filename, root='{0}/images'.format(WEB_ROOT))
 
 
 @route('/js/<filename>')
 def js(filename):
-    return static_file(filename, root='{0}/front_end/js'.format(WEB_ROOT))
+    return static_file(filename, root='{0}/js'.format(WEB_ROOT))
 
 
 @route('/css/<filename>')
 def css(filename):
-    return static_file(filename, root='{0}/front_end/css'.format(WEB_ROOT))
+    return static_file(filename, root='{0}/css'.format(WEB_ROOT))
 
 @route('/fonts/<filename>')
 def fonts(filename):
-    return static_file(filename, root='{0}/front_end/fonts'.format(WEB_ROOT))
-
-@route('/love')
-def love():
-    favicon = get_global_variable('favicon')
-    return template('love', favicon=favicon)
-
-@route('/hate')
-def hate():
-    favicon = get_global_variable('favicon')
-    return template('hate', favicon=favicon)
+    return static_file(filename, root='{0}/fonts'.format(WEB_ROOT))