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

View File

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