From 0a285b0d7fa568f4d65ef43eb30382878be42c9d Mon Sep 17 00:00:00 2001
From: Ethan Paul <24588726+enpaul@users.noreply.github.com>
Date: Wed, 5 May 2021 13:43:43 -0400
Subject: [PATCH] Update exploration page layout

---
 css/explore.css         | 27 +++++++++++++++++++++------
 templates/index.html.j2 | 23 ++++++++++++++++++++++-
 2 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/css/explore.css b/css/explore.css
index a35d476..cbb27f5 100644
--- a/css/explore.css
+++ b/css/explore.css
@@ -61,9 +61,13 @@ ul {
  padding: 0.5em;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.6);
+ z-index: 10;
 }
 
-#toggle-description:hover { cursor: pointer; }
+#toggle-description:hover {
+  cursor: pointer;
+  box-shadow: 4px 4px 8px 0 rgba(255, 255, 255, 0.3), -4px -4px 8px 0 rgba(255, 255, 255, 0.3);
+}
 
 #toggle-description:hover, #toggle-description.active {
   background-color: rgba(255, 255, 255, 0.8);
@@ -80,6 +84,17 @@ ul {
   padding-bottom: 1em;
   width: 75%;
   text-shadow: 3px 3px 5px #000;
+  text-align: left;
+}
+
+#header span {
+  float: right;
+  text-align: right;
+  font-size: 0.75em;
+}
+
+#header span a {
+  margin-left: 1em;
 }
 
 #content {
@@ -92,10 +107,10 @@ ul {
 }
 
 .article {
-  height: 10em;
+  height: 14em;
 
   margin-bottom: 2em;
-  border-radius: 5em;
+  border-radius: 7em;
   border-style: none;
   border-color: rgba(0, 0, 0, 0);
   border-width: 5px;
@@ -123,12 +138,12 @@ ul {
   position: relative;
   overflow: hidden;
   width: 100%;
-  border-radius: 5em;
+  border-radius: 7em;
   outline-style: none;
 }
 
 .article-content {
-  height: 10em;
+  height: 14em;
   overflow: hidden;
   transition: all 0.25s ease-in-out;
   display: block;
@@ -143,7 +158,7 @@ ul {
 
 .article-content h2 {
   text-transform: capitalize;
-  margin-top: 1.5em;
+  margin-top: 3em;
   margin-bottom: 1.25em;
 }
 
diff --git a/templates/index.html.j2 b/templates/index.html.j2
index 263cd11..ca9cbc9 100644
--- a/templates/index.html.j2
+++ b/templates/index.html.j2
@@ -57,7 +57,28 @@
     <div id="toggle-description" class="nojs"><i class="fas fa-paragraph"></i></div>
 
     <div id="content">
-      <div id="header"><h1>Explore All Around Here</h1></div>
+      <div id="header">
+        <h1>
+          Explore All Around Here
+
+          <span class="float-right">
+            <a
+              class="button instagram"
+              title="Follow All Around Here on instagram @allaroundhere"
+              href="https://www.instagram.com/allaroundhere/"
+            >
+              <i class="fab fa-instagram"></i>
+            </a>
+            <a
+              class="button twitter"
+              title="Follow me on twitter @enpaul_"
+              href="https://www.twitter.com/enpaul_/"
+            >
+              <i class="fab fa-twitter"></i>
+            </a>
+          </span>
+        </h1>
+      </div>
 
       <ul>
         {% for post in config.posts %}