Finalize structure of exploration page

This commit is contained in:
Ethan Paul 2021-04-14 01:25:01 -04:00
parent 73e464f953
commit d4b2a8441d
No known key found for this signature in database
GPG Key ID: C5F5542B54A4D9C6
3 changed files with 273 additions and 69 deletions

157
css/explore.css Normal file
View File

@ -0,0 +1,157 @@
html {
background-color: black;
}
body {
color: white;
font-family: sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
ul {
list-style: none;
padding: 0;
}
#background-image {
background-image: url("https://cdn.enp.one/img/backgrounds/cl-photo-rt112.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
filter: blur(6px);
-webkit-filter: blur(6px);
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
#background-image .overlay {
background-color: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
#toggle-description {
position: fixed;
right: 0;
top: 0;
margin: 0.75em;
font-size: 1.5em;
width: 1em;
height: 1em;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.6);
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);
}
#toggle-description:hover { cursor: pointer; }
#toggle-description:hover, #toggle-description.active {
background-color: rgba(255, 255, 255, 0.8);
color: black;
}
#header h1 {
font-variant: small-caps;
border-bottom-style: solid;
margin-left: auto;
margin-right: auto;
margin-bottom: 2em;
margin-top: 1em;
padding-bottom: 1em;
width: 75%;
text-shadow: 3px 3px 5px #000;
}
#content {
text-align: center;
max-width: 90%;
left: 50%;
width: 65em;
transform: translate(-50%, 0);
position: absolute;
}
.article {
height: 10em;
margin-bottom: 2em;
border-radius: 5em;
border-style: none;
border-color: rgba(0, 0, 0, 0);
border-width: 5px;
transition: all 0.25s ease-in-out;
color: rgba(0, 0, 0, 0);
text-align: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.6);
}
.article:hover, .primary-text {
color: rgba(255, 255, 255, 1);
}
.article:hover {
box-shadow: 4px 4px 8px 0 rgba(255, 255, 255, 0.3), -4px -4px 8px 0 rgba(255, 255, 255, 0.3);
}
.article-banner {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
width: 100%;
border-radius: 5em;
outline-style: none;
}
.article-content {
height: 10em;
overflow: hidden;
transition: all 0.25s ease-in-out;
display: block;
padding-left: 4em;
padding-right: 4em;
}
.article-content:hover, .primary-text .article-content {
background-color: rgba(0, 0, 0, 0.7);
text-shadow: 5px 5px 8px #000;
}
.article-content h2 {
text-transform: capitalize;
margin-top: 1.5em;
margin-bottom: 1.25em;
}
.article-content p {
font-weight: bold;
}
.article-content i {
margin-left: 1em;
margin-right: 0.7em;
}

View File

@ -30,13 +30,13 @@
<meta name="twitter:image" content="https://cdn.enp.one/img/backgrounds/cl-photo-boston.jpg">
<meta name="twitter:image:alt" content="All Around Here">
<title>Exploring All Around Here</title>
<title>Explore All Around Here</title>
<link rel="shortcut icon" href="https://cdn.enp.one/img/logos/aah-b-sm.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://cdn.enp.one/img/logos/aah-b-sm.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://cdn.enp.one/img/logos/aah-b-sm.png" >
<link rel="icon" type="image/png" sizes="16x16" href="https://cdn.enp.one/img/logos/aah-b-sm.png">
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="../css/explore.css"/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
@ -44,100 +44,128 @@
crossorigin="anonymous"
/>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="../js/custom.js"></script>
<noscript><style>.nojs { display: none; }</style></noscript>
</head>
<body>
<div id="background-image"></div>
<div id="background-image"><div class="overlay"></div></div>
<div id="preloader" class="nojs"><div class="spinner"><div></div></div></div>
<div class="header">
<h1>Exploring All Around here</h1>
</div>
<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>
<ul>
<li class="article">
<div class="article-banner"></div>
<div class="article-content">
<h2>A one-to-one recreation of the set for Star Trek the Original Series</h2>
<p class="article-location">Ticonderoga, NY</p>
<p>
"Space, the final frontier. These are the voyages of the Starship Enterprise. It's
five year mission: to explore strange new worlds, to seek out new life and new
civilizations, to boldly go where no man has gone before."
</p>
<div class="article-banner" style="background-image: url('https://cdn.enp.one/img/backgrounds/cl-photo-denver.jpg');">
<a href="#" class="article-content">
<h2>A 1:1 recreation of the set for Star Trek the Original Series</h2>
<p>
<i class="fas fa-map-marker-alt"></i>Ticonderoga, NY
<i class="far fa-calendar-alt"></i>January 2nd, 2020
</p>
</a>
</div>
</li>
<li class="article">
<div class="article-banner"></div>
<div class="article-content">
<h2>The past-and-present radar station on Cape Cod</h2>
<p class="article-location">North Truro, MA</p>
<p>
In spite of quite literally everything about the surrounding environment suggesting
otherwise, this is not in fact a secret government super weapon or the home of a
villain about to be thwarted by a British secret agent. Yes, the building is backed
by a hundred foot cliff to a desolate ocean beach on one side and by an abandoned and
overgrown military complex on the other. Yes, the low shrubs and thin trees
surrounding the field are twisted and tangled and filled with thorns. And yes, the
near constant wind and fog means the landscape seems to be constantly changing around
you. But I can assure you that the enormously foreboding dome fifty feet above the
ground serves a perfectly mundane and actually quite beneficial purpose.
</p>
<div class="article-banner" style="background-image: url('https://cdn.enp.one/img/backgrounds/cl-photo-letchworth.jpg');">
<a href="#" class="article-content">
<h2>The past-and-present radar station on Cape Cod</h2>
<p>
<i class="fas fa-map-marker-alt"></i>Ticonderoga, NY
<i class="far fa-calendar-alt"></i>January 2nd, 2020
</p>
</a>
</div>
</li>
<li class="article">
<div class="article-banner"></div>
<div class="article-content">
<h2>Wreck of a B-52 bomber deep in the backwoods of Maine</h2>
<p class="article-location">Greenville, Maine</p>
<p>
A little after noon on a windy day in January of 1963 a B-52C Stratofortress strategic
bomber took off from Westover Air Force Base in Massachusetts. The flight was a
routine training mission intended to test a new low altitude approach radar system
in mountainous terrain, a technique that could provide an edge in what was then the
very real possibility of a mission in Soviet air space. Two hours into the flight the
team began the first of their simulated low altitude approaches over the south side
of Elephant Mountain in northern Maine, and about twenty minutes later disaster
struck.
</p>
<div class="article-banner" style="background-image: url('https://cdn.enp.one/img/backgrounds/cl-photo-hotel.jpg');">
<a href="#" class="article-content">
<h2>Wreck of a B-52 bomber deep in the backwoods of Maine</h2>
<p>
<i class="fas fa-map-marker-alt"></i>Ticonderoga, NY
<i class="far fa-calendar-alt"></i>January 2nd, 2020
</p>
</a>
</div>
</li>
<li class="article">
<div class="article-banner"></div>
<div class="article-content">
<h2>Even the longest roads have to start somewhere</h2>
<p class="article-location">Fort Kent, Maine</p>
<p>
Two thousand three hundred and thirty nine miles away from Key West Florida is the
very beginning of US Federal Highway 1. From Fort Kent Maine it is possible to drive
all twenty three hundred miles south to Key West entirely on Route-1 making this the
longest continuous north-south road in America.
</p>
<div class="article-banner" style="background-image: url('https://cdn.enp.one/img/backgrounds/cl-photo-library.jpg');">
<a href="#" class="article-content">
<h2>Even the longest roads have to start somewhere</h2>
<p>
<i class="fas fa-map-marker-alt"></i>Ticonderoga, NY
<i class="far fa-calendar-alt"></i>January 2nd, 2020
</p>
</a>
</div>
</li>
<li class="article">
<div class="article-banner"></div>
<div class="article-content">
<h2>A bit of Central Park in northern Vermont</h2>
<p class="article-location">Shelburne, VT</p>
<p>
Shelburne Farms is a fourteen hundred acre educational working farm space on the
eastern shores of Lake Champlain. Since it's establishment in 1972 the farm has
provided fresh produce and dairy to the local area and educational resources to
people from all over. The farmstead was built as a testbed of sustainable living and
offers educational programs on everything from bovine healthcare and grain storage,
all the way to solar panel installation and water recycling.
</p>
<div class="article-banner" style="background-image: url('https://cdn.enp.one/img/backgrounds/cl-photo-denver.jpg');">
<a href="#" class="article-content">
<h2>A bit of Central Park in northern Vermont</h2>
<p>
<i class="fas fa-map-marker-alt"></i>Ticonderoga, NY
<i class="far fa-calendar-alt"></i>January 2nd, 2020
</p>
</a>
</div>
</li>
<li class="article">
<div class="article-banner" style="background-image: url('https://cdn.enp.one/img/backgrounds/cl-photo-denver.jpg');">
<a href="#" class="article-content">
<h2>A bit of Central Park in northern Vermont</h2>
<p>
<i class="fas fa-map-marker-alt"></i>Ticonderoga, NY
<i class="far fa-calendar-alt"></i>January 2nd, 2020
</p>
</a>
</div>
</li>
<li class="article">
<div class="article-banner" style="background-image: url('https://cdn.enp.one/img/backgrounds/cl-photo-denver.jpg');">
<a href="#" class="article-content">
<h2>A bit of Central Park in northern Vermont</h2>
<p>
<i class="fas fa-map-marker-alt"></i>Ticonderoga, NY
<i class="far fa-calendar-alt"></i>January 2nd, 2020
</p>
</a>
</div>
</li>
<li class="article">
<div class="article-banner" style="background-image: url('https://cdn.enp.one/img/backgrounds/cl-photo-denver.jpg');">
<a href="#" class="article-content">
<h2>A bit of Central Park in northern Vermont</h2>
<p>
<i class="fas fa-map-marker-alt"></i>Ticonderoga, NY
<i class="far fa-calendar-alt"></i>January 2nd, 2020
</p>
</a>
</div>
</li>
<li class="article">
<div class="article-banner" style="background-image: url('https://cdn.enp.one/img/backgrounds/cl-photo-denver.jpg');">
<a href="#" class="article-content">
<h2>A bit of Central Park in northern Vermont</h2>
<p>
<i class="fas fa-map-marker-alt"></i>Ticonderoga, NY
<i class="far fa-calendar-alt"></i>January 2nd, 2020
</p>
</a>
</div>
</li>

View File

@ -1,5 +1,3 @@
// Some quick scripting to select a random background on page load
const BACKGROUND_IMAGES = [
{
url: "https://cdn.enp.one/img/backgrounds/cl-photo-allis.jpg",
@ -78,6 +76,26 @@ function selectBackground() {
}
function togglePrimaryText() {
let items = document.getElementsByClassName("article");
for (index = 0; index < items.length; index++) {
if (items[index].classList.contains("primary-text")) {
items[index].classList.remove("primary-text");
} else {
items[index].classList.add("primary-text");
}
}
let button = document.getElementById("toggle-description");
if (button.classList.contains("active")) {
button.classList.remove("active");
} else {
button.classList.add("active");
}
};
window.addEventListener("DOMContentLoaded", function () {
let selected = selectBackground()
@ -88,6 +106,7 @@ window.addEventListener("DOMContentLoaded", function () {
window.addEventListener("load", async function () {
document.getElementById("toggle-description").addEventListener("click", togglePrimaryText);
document.getElementById("preloader").classList.add("fadeout");
// I don't actually know how promises or async works
// ¯\_(ツ)_/¯