Update exploration page layout
This commit is contained in:
parent
0005836a95
commit
0a285b0d7f
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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 %}
|
||||||
|
Loading…
Reference in New Issue
Block a user