Update exploration page layout

This commit is contained in:
Ethan Paul 2021-05-05 13:43:43 -04:00
parent 0005836a95
commit 0a285b0d7f
No known key found for this signature in database
GPG Key ID: D0E2CBF1245E92BF
2 changed files with 43 additions and 7 deletions

View File

@ -61,9 +61,13 @@ ul {
padding: 0.5em; padding: 0.5em;
transition: all 0.25s ease-in-out; 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); 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 { #toggle-description:hover, #toggle-description.active {
background-color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.8);
@ -80,6 +84,17 @@ ul {
padding-bottom: 1em; padding-bottom: 1em;
width: 75%; width: 75%;
text-shadow: 3px 3px 5px #000; 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 { #content {
@ -92,10 +107,10 @@ ul {
} }
.article { .article {
height: 10em; height: 14em;
margin-bottom: 2em; margin-bottom: 2em;
border-radius: 5em; border-radius: 7em;
border-style: none; border-style: none;
border-color: rgba(0, 0, 0, 0); border-color: rgba(0, 0, 0, 0);
border-width: 5px; border-width: 5px;
@ -123,12 +138,12 @@ ul {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
border-radius: 5em; border-radius: 7em;
outline-style: none; outline-style: none;
} }
.article-content { .article-content {
height: 10em; height: 14em;
overflow: hidden; overflow: hidden;
transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;
display: block; display: block;
@ -143,7 +158,7 @@ ul {
.article-content h2 { .article-content h2 {
text-transform: capitalize; text-transform: capitalize;
margin-top: 1.5em; margin-top: 3em;
margin-bottom: 1.25em; margin-bottom: 1.25em;
} }

View File

@ -57,7 +57,28 @@
<div id="toggle-description" class="nojs"><i class="fas fa-paragraph"></i></div> <div id="toggle-description" class="nojs"><i class="fas fa-paragraph"></i></div>
<div id="content"> <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> <ul>
{% for post in config.posts %} {% for post in config.posts %}