Update exploration page layout

build.py

@@ -124,7 +124,7 @@ class ConfigSerializer(msh.Schema):
 
     @msh.post_load
     def _remove_future(self, data: Dict[str, Any], *args, **kwargs) -> PostContainer:
-        posts = [item for item in data["posts"] if item.date >= datetime.date.today()]
+        posts = [item for item in data["posts"] if item.date <= datetime.date.today()]
         data["posts"] = posts
         return data
 

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;
 }
 

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 %}