new frontpage

_data/colors.yml

@@ -3,7 +3,7 @@ bg-alt_rgba: 'rgba(60, 42, 82, 0.75)'
 fg_rgba: 'rgb(235, 219, 248)'
 fg-alt_rgba: 'rgba(235, 219, 248, 0.25)'
 border_rgba: 'rgb(0, 0, 0)'
-border-alt_rgba: 'rgba(0, 0, 0, 0.75)'
+border-alt_rgba: 'rgba(0, 0, 0, 0.5)'
 accent1_rgba: 'rgb(56, 255, 89)'
 accent1-alt_rgba: 'rgba(56, 255, 89, 0.75)'
 accent2_rgba: 'rgba(255, 145, 0, 1)'

_sass/_layout.scss

@@ -134,7 +134,7 @@ body {
               width: 100px;
               height: 100px;
               line-height: 100px;
-              margin: 0 0 20px 0;
+              margin: 0 0 10px 0;
               padding:0;
               font-size: 65px;
             }
@@ -237,6 +237,8 @@ footer {
   }
   .icon:hover {
     border: 1px solid var(--accent2);
+    color: var(--accent2);
+
   }
   .footframe {
     display: flex;
@@ -255,7 +257,7 @@ footer {
         width: 100%;
       }
       li {
-        border-bottom: 1px solid var(--bg-alt);
+       
         line-height: 2;
         font-size: 1.5em;
         a {
@@ -263,6 +265,10 @@ footer {
           text-decoration: none;
           color: var(--bg);
         }
+        a:hover {
+          color: var(--accent2);
+        }
+
       }
     }
 
@@ -379,9 +385,31 @@ footer {
   .container {
     display: flex;
     flex-wrap: wrap;
-
+    box-shadow: 15px 15px 28px 24px var(--border-alt) inset;
+    border-radius: var(--border-radius);
+    justify-content: space-between;
     div {
       flex: 1 0 280px;
+      padding: 20px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      background-color: var(--bg-alt);
+      img {
+        max-width: 120px;
+        height: auto;
+      }
+      .date {
+        font-size: 0.6em;
+        margin-top: 40px;
+      }
+      h2 {
+        padding-top: 0;
+        margin-bottom: 0px;
+
+      }
+      hr {
+        border: 1px solid var(--fg-alt);
+      }
     }
   }
 }

index.html

@@ -143,7 +143,11 @@ apps:
     {% if item.summary %}
     <h2 style="text-align: left;">{{ item.summary }}</h2>
     {% endif %}
-    <p>
+    
+  <p>
+    {{ item.content }} 
+  </p>
+  <p class="date">
     {% assign d = item.published | date: "%-d"  %}
     {% case d %}
     {% when '1' or '21' or '31' %}{{ d }}:st
@@ -165,17 +169,14 @@ apps:
     {% endcase %}
     {{ item.published | date: "%Y" }} - {{ item.published | date: "%R" }}
   </p>
-  <p>
-    {{ item.content }} 
-  </p>
   {% for enclosure in item.link %}
   {% if enclosure.type == "image/jpeg" %}
-  <img src="{{ enclosure.href }}" height="300px" />
+  <img src="{{ enclosure.href }}" />
 
   {% endif %}
   {% endfor %}
-<hr />
 
+<hr />
 </div>
 {% endunless %}
   {% endfor %}