Finalize structure of exploration page
This commit is contained in:
parent
73e464f953
commit
d4b2a8441d
157
css/explore.css
Normal file
157
css/explore.css
Normal 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;
|
||||
}
|
||||
@ -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>
|
||||
|
||||
|
||||
23
js/custom.js
23
js/custom.js
@ -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
|
||||
// ¯\_(ツ)_/¯
|
||||
|
||||
Loading…
Reference in New Issue
Block a user