Compare commits

...

24 Commits

Author SHA1 Message Date
5f790ca729 Migreate to use cdn.enpaul.net CDN URL 2025-05-15 14:44:18 -04:00
8ef3e29a73 Move static content into dedicated subpath to support automated deployments 2024-02-27 14:33:55 -05:00
fc6d532f6b 2024 updates
Update copyright
Remove twitter integration
Remove twitter social link
2024-02-27 14:32:28 -05:00
bdc4c3710c Add fade in to explore button animation 2023-01-15 22:49:31 -05:00
32d7f4d848 Fix undeclared character encoding on homepage
Update vertical position of homepage content block
2021-04-03 11:53:55 -04:00
68c05bd4d5 Add social integrations, improve link access, improve source formatting 2021-03-20 12:13:43 -04:00
ae97ac3b58 Fix backing shadow on explore button to improve readability 2021-03-20 12:13:25 -04:00
b8baf8a326 Overhaul main page button system, add dope explore button animation 2021-03-19 23:47:59 -04:00
dae4cc2fae Update copyright notice 2021-03-19 21:25:06 -04:00
1bb712165b Update main content styling to use darker backing colors to improve readability 2021-03-16 21:02:49 -04:00
0a89c27621 Fix serif font family when specified fonts are unavailable 2021-02-16 20:36:14 -05:00
00c1662d67 Fix missing language tag 2021-02-16 20:32:40 -05:00
1d9eb61fe8 Add missing alt text and doctype to improve accessibility 2021-02-16 20:25:11 -05:00
071527b35a Fix social button stacking on mobile 2021-02-16 20:18:43 -05:00
e5e665ea6d Fix main content layout on mobile 2021-02-16 20:11:10 -05:00
18c7656588 Remove self deprecation from main copy 2021-02-03 20:17:02 -05:00
adee7e3bb4 Fix content scaling on large screens 2021-02-03 20:16:03 -05:00
337bb94983 Update social links for gallery, remove youtube
Update copywrite link
2021-02-01 19:44:38 -05:00
e6f3679e41 Add proper homepage copy
Remove background description
2021-01-31 20:48:39 -05:00
0f3564eaa2 Remove hyperlink from background description 2021-01-31 19:51:17 -05:00
5514197ce4 Fix preloader overlay not being removed 2021-01-31 19:50:11 -05:00
b7e6a9c585 Add sitemap 2021-01-31 19:31:19 -05:00
8c55ee5871 Fix incorrect description on default background image 2021-01-31 19:27:35 -05:00
8c13782ffb Add preloader functionality 2021-01-31 18:58:33 -05:00
7 changed files with 453 additions and 231 deletions

314
content/css/style.css Normal file
View File

@@ -0,0 +1,314 @@
html {
height: 100%;
background-color: black;
color: white;
font-family: Verdana, Helvetica, sans-serif;
}
a {
color: inherit;
text-decoration: none;
transition: all 0.1s ease-in-out;
}
a:hover {
text-decoration: none;
text-shadow: 5px 5px 10px #fff, -5px -5px 10px #fff;
}
#background-image {
background-image: url("https://cdn.enpaul.net/img/backgrounds/cl-photo-allis.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;
}
#content {
text-align: center;
text-shadow: 3px 3px 5px #000, -3px -3px 5px #000;
font-weight: bold;
color: white;
padding: 1em;
width: 40em;
max-width: 90%;
background-color: rgba(0, 0, 0, 0.4);
border-style: solid;
border-width: 2px;
border-color: rgba(0, 0, 0, 0);
border-radius: 128px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.6);
position: absolute;
top: 15%;
left: 50%;
transform: translate(-50%, 0);
z-index: 10;
}
#logo {
margin: auto;
margin-top: -5em;
max-width: 60%;
width: 50%;
display: block;
border-style: solid;
border-color: rgba(0, 0, 0, 0.2);
border-radius: 50%;
border-width: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.4);
}
h1 {
font-variant: small-caps;
font-size: 2.5em;
}
#content p {
margin: 2em;
line-height: 1.5;
}
ul.buttons {
list-style: none;
padding-left: 0;
margin-top: 1em;
margin-bottom: 1em;
font-size: 1.75em;
}
ul.buttons li {
line-height: 1;
padding: 0.5em;
margin-left: 0.5em;
margin-right: 0.5em;
text-transform: uppercase;
}
.button.nav {
padding-top: 0.75em;
padding-bottom: 0.55em;
padding-left: 1.5em;
padding-right: 1.5em;
border-radius: 30px;
transition: all 0.25s ease-in-out;
}
.button:hover {
text-shadow:
-3px -3px 5px #fff,
-3px 3px 5px #fff,
3px -3px 5px #fff,
3px 3px 5px #fff,
0px 0px 7px #ff0000;
}
.button.nav:hover {
text-shadow:
0px 0px 7px #000,
-5px -5px 10px #fff,
-5px 5px 10px #fff,
5px -5px 10px #fff,
5px 5px 10px #fff;
-webkit-animation-name: pulse;
-webkit-animation-duration: 6s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-fill-mode: none;
animation-name: pulse;
animation-duration: 6s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-fill-mode: none;
}
.explore:hover { color: #5588e0; }
.youtube:hover { color: #ff0000; }
.instagram:hover { color: #c13584; }
.twitter:hover { color: #1da1f2; }
#background-info {
text-align: right;
font-size: 0.85em;
padding: 0.75em;
position: fixed;
bottom: 0;
right: 0;
z-index: 5;
}
footer { font-size: 0.9em; }
footer div { margin-bottom: 0.5em; }
footer a.button i {
padding: 0.5em;
font-size: 1.25em;
}
.fadeout {
-webkit-animation: fadeout 0.25s linear 1;
-webkit-animation-fill-mode: forwards;
animation: fadeout 0.25s linear 1;
animation-fill-mode: forwards;
}
#preloader {
width: 100%;
height: 100%;
display: inline-block;
overflow: hidden;
background-color: black;
z-index: 100;
margin: 0;
position: fixed;
top: 0;
left: 0;
}
.spinner {
width: 140px;
height: 140px;
position: relative;
backface-visibility: hidden;
transform-origin: 0 0;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
background-size: contain;
border-radius: 50%;
}
.spinner div {
position: absolute;
width: 100px;
height: 100px;
border: 20px solid rgba(213, 213, 213, 1);
border-top-color: transparent;
border-radius: 50%;
animation: spinner 1.5s linear infinite;
top: 50%;
left: 50%;
box-sizing: content-box;
}
@-webkit-keyframes fadeout {
0% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes fadeout {
0% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes pulse {
0% {
box-shadow:
0px 0px 15px 3px rgba(0,0,0,0),
0px 0px 15px 3px rgba(0,0,0,0);
}
3% {
box-shadow:
0px 0px 15px 3px #fff,
0px 0px 15px 3px #88a9fc;
}
10% {
box-shadow:
-10px -10px 15px 3px #fff,
10px 10px 15px 3px #88a9fc;
}
30% {
box-shadow:
-10px 10px 15px 3px #b5f7fc,
10px -10px 15px 3px #fcaa99;
}
45% {
box-shadow:
10px 10px 15px 3px #ecf9a7,
-10px -10px 15px 3px #fcaa99;
}
60% {
box-shadow:
10px -10px 15px 3px #ecf9a7,
-10px 10px 15px 3px #abfcad;
}
75% {
box-shadow:
-10px -10px 15px 3px #b5f7fc,
10px 10px 15px 3px #abfcad;
}
90% {
box-shadow:
-10px 10px 15px 3px #fff,
10px -10px 15px 3px #88a9fc;
}
97% {
box-shadow:
0px 0px 15px 3px #b5f7fc,
0px 0px 15px 3px #88a9fc;
}
100% {
box-shadow:
0px 0px 15px 3px rgba(0,0,0,0),
0px 0px 15px 3px rgba(0,0,0,0);
}
}
@-webkit-keyframes spinner {
0% { transform: translate(-50%,-50%) rotate(0deg); }
100% { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes spinner {
0% { transform: translate(-50%,-50%) rotate(0deg); }
100% { transform: translate(-50%,-50%) rotate(360deg); }
}
@media only screen and (max-width: 600px) {
#content {
padding: 0;
padding-bottom: 1em;
border-radius: 32px;
top: 6em;
}
#content p {
margin: 1em;
}
ul.buttons {
margin-top: 1.5em;
margin-bottom: 1.5em;
}
ul.buttons li {
display: block;
margin-top: 1em;
}
}

100
content/index.html Normal file
View File

@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<!-- Web crawler and search indexing meta -->
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="author" content="admin@allaroundhere.org"/>
<meta name="description" content="Some of the best places are all around here"/>
<meta name="robots" content="index follow"/>
<meta
name="keywords"
content="travel photography explore exploration urbex urban nature all around here local museum history historical society"
/>
<!-- Opengraph integration meta -->
<meta property="og:title" content="All Around Here"/>
<meta property="og:url" content="https://allaroundhere.org/explore/"/>
<meta property='og:site_name' content="All Around Here"/>
<meta property="og:type" content="website"/>
<meta property='og:locale' content="en_US"/>
<meta property="og:image" content="https://cdn.enpaul.net/img/backgrounds/cl-photo-boston.jpg"/>
<meta property='og:description' content="Some of the best places are all around here"/>
<title>All Around Here</title>
<link rel="shortcut icon" href="https://cdn.enpaul.net/img/logos/aah-b-sm.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://cdn.enpaul.net/img/logos/aah-b-sm.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://cdn.enpaul.net/img/logos/aah-b-sm.png" >
<link rel="icon" type="image/png" sizes="16x16" href="https://cdn.enpaul.net/img/logos/aah-b-sm.png">
<link rel="stylesheet" href="css/style.css"/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous"
/>
<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="preloader" class="nojs"><div class="spinner"><div></div></div></div>
<div id="content">
<img
id="logo"
alt="Road to the great wide nowhere"
src="https://cdn.enpaul.net/img/logos/aah-md.jpg"
/>
<h1>All Around Here</h1>
<p>
This is a project of mine where I turn my random travels, undirected wanderings, and
unexpected discoveries into something other people can enjoy along with me. There are a
lot of cool things in the world and I like to find them, wherever I happen to be. If you're
interested in seeing some of these arbitrary oddities then check out the links below.
</p>
<ul class="buttons">
<li>
<a class="button nav" title="Explore All Around Here" href="explore/">
<i class="fas fa-binoculars"></i>&nbsp;Explore
</a>
</li>
</ul>
<footer>
<div>
<!-- <a
class="button youtube"
title="Subscribe to All Around Here on YouTube"
href="https://www.instagram.com/allaroundhere/"
>
<i class="fab fa-youtube"></i>
</a> -->
<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>
</div>
<div>
<a title="Personal website" href="https://enpaul.net/">&copy;2024 enpaul</a>
</div>
</footer>
</div>
</body>
</html>

View File

@@ -2,67 +2,67 @@
const BACKGROUND_IMAGES = [
{
url: "https://cdn.enp.one/img/backgrounds/cl-photo-allis.jpg",
url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-allis.jpg",
description: "Allis Engine #4, Metropolitan Waterworks Museum",
source: ""
},
{
url: "https://cdn.enp.one/img/backgrounds/cl-photo-boston.jpg",
url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-boston.jpg",
description: "Charles River Basin and Skyline",
source: ""
},
{
url: "https://cdn.enp.one/img/backgrounds/cl-photo-denver.jpg",
url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-denver.jpg",
description: "Mile-High City Skyline",
source: ""
},
{
url: "https://cdn.enp.one/img/backgrounds/cl-photo-geese.jpg",
url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-geese.jpg",
description: "Geese and Goslings on the banks of the Charles River",
source: ""
},
{
url: "https://cdn.enp.one/img/backgrounds/cl-photo-hotel.jpg",
url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-hotel.jpg",
description: "Bay Point Hotel, Lake Winnipesaukee",
source: ""
},
{
url: "https://cdn.enp.one/img/backgrounds/cl-photo-lawrencedam.jpg",
url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-lawrencedam.jpg",
description: "Hydroelectric Dam on the St. Lawrence River",
source: ""
},
{
url: "https://cdn.enp.one/img/backgrounds/cl-photo-letchworth.jpg",
url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-letchworth.jpg",
description: "The Middle Falls in Letchworth State Park",
source: ""
},
{
url: "https://cdn.enp.one/img/backgrounds/cl-photo-library.jpg",
url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-library.jpg",
description: "Robert W. Woodruff Library at Emory University",
source: ""
},
{
url: "https://cdn.enp.one/img/backgrounds/cl-photo-lighthouse.jpg",
url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-lighthouse.jpg",
description: "Nubble Lighthouse",
source: ""
},
{
url: "https://cdn.enp.one/img/backgrounds/cl-photo-mbta.jpg",
url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-mbta.jpg",
description: "Old vs New MBTA Green Line",
source: ""
},
{
url: "https://cdn.enp.one/img/backgrounds/cl-photo-rockyshore.jpg",
url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-rockyshore.jpg",
description: "Icy Stormy Shoreline at Brenton Point",
source: ""
},
{
url: "https://cdn.enp.one/img/backgrounds/cl-photo-rt112.jpg",
url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-rt112.jpg",
description: "Northern end of the Route 112 Scenic Byway",
source: ""
},
{
url: "https://cdn.enp.one/img/backgrounds/cl-photo-startrek.jpg",
url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-startrek.jpg",
description: "Enterprise Engineering Systems at the Star Trek Set Museum",
source: ""
}
@@ -78,18 +78,20 @@ function selectBackground() {
}
function setBackground() {
window.addEventListener("DOMContentLoaded", function () {
let selected = selectBackground()
document.getElementById(
"background-image"
).style.backgroundImage = "url(" + selected.url + ")";
});
document.getElementById(
"background-info-link"
).innerHTML = selected.description;
document.getElementById(
"background-info-link"
).href = selected.source;
}
window.addEventListener("load", async function () {
document.getElementById("preloader").classList.add("fadeout");
// I don't actually know how promises or async works
// ¯\_(ツ)_/¯
// https://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep
await new Promise(r => setTimeout(r, 250))
document.getElementById("preloader").style.display = "none";
});

View File

@@ -2,7 +2,6 @@
User-agent: *
# Disallow access to non-content directories
Disallow: /_error
Disallow: /css
Disallow: /js

16
content/sitemap.xml Normal file
View File

@@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<!-- created with Free Online Sitemap Generator www.xml-sitemaps.com -->
<url>
<loc>https://allaroundhere.org/</loc>
<lastmod>2021-02-01T00:30:55+00:00</lastmod>
<priority>1.00</priority>
</url>
</urlset>

View File

@@ -1,144 +0,0 @@
html {
height: 100%;
background-color: black;
color: white;
font-family: Verdana, Helvetica, serif;
}
a {
color: inherit;
text-decoration: none;
transition: all 0.1s ease-in-out;
}
a:hover {
text-decoration: none;
text-shadow: 3px 3px 10px #fff, -3px -3px 10px #fff;
}
#background-image {
background-image: url("https://cdn.enp.one/img/backgrounds/cl-photo-boston.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;
}
#content {
text-align: center;
text-shadow: 3px 3px 5px #000, -3px -3px 5px #000;
font-weight: bold;
color: white;
padding: 1em;
/* width: 40em; */
max-width: 90%;
background-color: rgba(255, 255, 255, 0.2);
border-style: solid;
border-width: 2px;
border-color: rgba(255, 255, 255, 0);
border-radius: 128px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, 0);
z-index: 10;
}
#logo {
margin: auto;
margin-top: -5em;
max-width: 60%;
width: 50%;
display: block;
border-style: solid;
border-color: rgba(255, 255, 255, 0);
border-radius: 50%;
border-width: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#content p {
margin: 2em;
line-height: 1.5;
}
ul.buttons {
list-style: none;
padding-left: 0;
margin-top: 3em;
margin-bottom: 4em;
font-size: 1.1em;
}
ul.buttons li {
display: inline;
line-height: 1;
padding: 0.5em;
margin-left: 0.5em;
margin-right: 0.5em;
text-transform: uppercase;
}
.button-youtube:hover {
color: #ff0000;
text-shadow:
-3px -3px 5px #fff,
-3px 3px 5px #fff,
3px -3px 5px #fff,
3px 3px 5px #fff,
0px 0px 7px #ff0000;
}
.button-instagram:hover {
color: #c13584;
text-shadow:
-3px -3px 5px #fff,
-3px 3px 5px #fff,
3px -3px 5px #fff,
3px 3px 5px #fff,
0px 0px 7px #5851db;
}
.button-twitter:hover {
color: #1da1f2;
text-shadow:
-3px -3px 5px #fff,
-3px 3px 5px #fff,
3px -3px 5px #fff,
3px 3px 5px #fff,
0px 0px 7px #f77737;
}
#background-info {
text-align: right;
font-size: 0.85em;
padding: 0.75em;
position: fixed;
bottom: 0;
right: 0;
z-index: 5;
}
.footer {
font-size: 0.9em;
}

View File

@@ -1,65 +0,0 @@
<html>
<head>
<!-- Web crawler and search indexing meta -->
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="author" content="admin@allaroundhere.org"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<title>AllAroundHere</title>
<link rel="shortcut icon" href="https://cdn.enp.one/img/logos/e-b-sm.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://cdn.enp.one/img/logos/e-b-sm.png">
<link rel="icon" type="image/png" href="https://cdn.enp.one/img/logos/e-b-sm.png" sizes="32x32">
<link rel="icon" type="image/png" href="https://cdn.enp.one/img/logos/e-b-sm.png" sizes="16x16">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body onload="setBackground()">
<div id="background-image"></div>
<div id="content">
<img id="logo" src="https://cdn.enp.one/img/logos/aah-md.jpg"/>
<h1>AllAroundHere</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
<ul class="buttons">
<li><a class="button-youtube" href="https://www.youtube.com/channel/UCnJum8qCKlz36SzSsSeZy1w">
<i class="fab fa-youtube"></i>&nbsp;Youtube
</li></a>
<li><a class="button-instagram" href="https://www.instagram.com/allaroundhere/">
<i class="fab fa-instagram"></i>&nbsp;Instagram
</li></a>
<li><a class="button-twitter" href="https://twitter.com/enpaul_">
<i class="fab fa-twitter"></i>&nbsp;Twitter
</li></a>
</ul>
<div class="footer">
&copy;2021
<a href="https://enpaul.net/" target="_blank">E.N.Paul</a>
</div>
</div>
<div id="background-info">
<i><a href="" target="_blank" id="background-info-link">
Allis Engine #4, Metropolitan Waterworks Museum
</a></i>
</div>
</body>
</html>