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" content="https://cdn.enp.one/img/backgrounds/cl-photo-boston.jpg">
|
||||||
<meta name="twitter:image:alt" content="All Around Here">
|
<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="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="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="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="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
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
|
href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
|
||||||
@ -44,100 +44,128 @@
|
|||||||
crossorigin="anonymous"
|
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>
|
<noscript><style>.nojs { display: none; }</style></noscript>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<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 id="preloader" class="nojs"><div class="spinner"><div></div></div></div>
|
||||||
|
|
||||||
<div class="header">
|
<div id="toggle-description" class="nojs"><i class="fas fa-paragraph"></i></div>
|
||||||
<h1>Exploring All Around here</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="content">
|
<div id="content">
|
||||||
|
<div id="header"><h1>Explore All Around Here</h1></div>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
|
|
||||||
<li class="article">
|
<li class="article">
|
||||||
<div class="article-banner"></div>
|
<div class="article-banner" style="background-image: url('https://cdn.enp.one/img/backgrounds/cl-photo-denver.jpg');">
|
||||||
<div class="article-content">
|
<a href="#" class="article-content">
|
||||||
<h2>A one-to-one recreation of the set for Star Trek the Original Series</h2>
|
<h2>A 1:1 recreation of the set for Star Trek the Original Series</h2>
|
||||||
<p class="article-location">Ticonderoga, NY</p>
|
|
||||||
<p>
|
<p>
|
||||||
"Space, the final frontier. These are the voyages of the Starship Enterprise. It's
|
<i class="fas fa-map-marker-alt"></i>Ticonderoga, NY
|
||||||
five year mission: to explore strange new worlds, to seek out new life and new
|
<i class="far fa-calendar-alt"></i>January 2nd, 2020
|
||||||
civilizations, to boldly go where no man has gone before."
|
|
||||||
</p>
|
</p>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="article">
|
<li class="article">
|
||||||
<div class="article-banner"></div>
|
<div class="article-banner" style="background-image: url('https://cdn.enp.one/img/backgrounds/cl-photo-letchworth.jpg');">
|
||||||
<div class="article-content">
|
<a href="#" class="article-content">
|
||||||
<h2>The past-and-present radar station on Cape Cod</h2>
|
<h2>The past-and-present radar station on Cape Cod</h2>
|
||||||
<p class="article-location">North Truro, MA</p>
|
|
||||||
<p>
|
<p>
|
||||||
In spite of quite literally everything about the surrounding environment suggesting
|
<i class="fas fa-map-marker-alt"></i>Ticonderoga, NY
|
||||||
otherwise, this is not in fact a secret government super weapon or the home of a
|
<i class="far fa-calendar-alt"></i>January 2nd, 2020
|
||||||
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>
|
</p>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="article">
|
<li class="article">
|
||||||
<div class="article-banner"></div>
|
<div class="article-banner" style="background-image: url('https://cdn.enp.one/img/backgrounds/cl-photo-hotel.jpg');">
|
||||||
<div class="article-content">
|
<a href="#" class="article-content">
|
||||||
<h2>Wreck of a B-52 bomber deep in the backwoods of Maine</h2>
|
<h2>Wreck of a B-52 bomber deep in the backwoods of Maine</h2>
|
||||||
<p class="article-location">Greenville, Maine</p>
|
|
||||||
<p>
|
<p>
|
||||||
A little after noon on a windy day in January of 1963 a B-52C Stratofortress strategic
|
<i class="fas fa-map-marker-alt"></i>Ticonderoga, NY
|
||||||
bomber took off from Westover Air Force Base in Massachusetts. The flight was a
|
<i class="far fa-calendar-alt"></i>January 2nd, 2020
|
||||||
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>
|
</p>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="article">
|
<li class="article">
|
||||||
<div class="article-banner"></div>
|
<div class="article-banner" style="background-image: url('https://cdn.enp.one/img/backgrounds/cl-photo-library.jpg');">
|
||||||
<div class="article-content">
|
<a href="#" class="article-content">
|
||||||
<h2>Even the longest roads have to start somewhere</h2>
|
<h2>Even the longest roads have to start somewhere</h2>
|
||||||
<p class="article-location">Fort Kent, Maine</p>
|
|
||||||
<p>
|
<p>
|
||||||
Two thousand three hundred and thirty nine miles away from Key West Florida is the
|
<i class="fas fa-map-marker-alt"></i>Ticonderoga, NY
|
||||||
very beginning of US Federal Highway 1. From Fort Kent Maine it is possible to drive
|
<i class="far fa-calendar-alt"></i>January 2nd, 2020
|
||||||
all twenty three hundred miles south to Key West entirely on Route-1 making this the
|
|
||||||
longest continuous north-south road in America.
|
|
||||||
</p>
|
</p>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="article">
|
<li class="article">
|
||||||
<div class="article-banner"></div>
|
<div class="article-banner" style="background-image: url('https://cdn.enp.one/img/backgrounds/cl-photo-denver.jpg');">
|
||||||
<div class="article-content">
|
<a href="#" class="article-content">
|
||||||
<h2>A bit of Central Park in northern Vermont</h2>
|
<h2>A bit of Central Park in northern Vermont</h2>
|
||||||
<p class="article-location">Shelburne, VT</p>
|
|
||||||
<p>
|
<p>
|
||||||
Shelburne Farms is a fourteen hundred acre educational working farm space on the
|
<i class="fas fa-map-marker-alt"></i>Ticonderoga, NY
|
||||||
eastern shores of Lake Champlain. Since it's establishment in 1972 the farm has
|
<i class="far fa-calendar-alt"></i>January 2nd, 2020
|
||||||
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>
|
</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>
|
</div>
|
||||||
</li>
|
</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 = [
|
const BACKGROUND_IMAGES = [
|
||||||
{
|
{
|
||||||
url: "https://cdn.enp.one/img/backgrounds/cl-photo-allis.jpg",
|
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 () {
|
window.addEventListener("DOMContentLoaded", function () {
|
||||||
let selected = selectBackground()
|
let selected = selectBackground()
|
||||||
|
|
||||||
@ -88,6 +106,7 @@ window.addEventListener("DOMContentLoaded", function () {
|
|||||||
|
|
||||||
|
|
||||||
window.addEventListener("load", async function () {
|
window.addEventListener("load", async function () {
|
||||||
|
document.getElementById("toggle-description").addEventListener("click", togglePrimaryText);
|
||||||
document.getElementById("preloader").classList.add("fadeout");
|
document.getElementById("preloader").classList.add("fadeout");
|
||||||
// I don't actually know how promises or async works
|
// I don't actually know how promises or async works
|
||||||
// ¯\_(ツ)_/¯
|
// ¯\_(ツ)_/¯
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user