enpaul/allaroundhere.org
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: enpaul:cc2f53a1d10706323203d8c97b296afe2cf3f93f
Branches Tags
enpaul:devel
enpaul:exp
...
compare: enpaul:a867b605156f665c68df6153cc9ed7e47acf6bd4
Branches Tags
enpaul:devel
enpaul:exp

2 Commits
cc2f53a1d1 ... a867b60515

Author SHA1 Message Date
Ethan Paul
a867b60515
Add description for autocycling background images 2020-12-27 19:42:33 -05:00
Ethan Paul
2842ef40bf
Fix styling of social buttons again 2020-12-27 19:42:21 -05:00
3 changed files with 116 additions and 47 deletions
Show Stats Expand all files Collapse all files

24
css/style.css
View File

@ -46,7 +46,8 @@ a:hover {
padding: 1em; padding: 1em;
max-width: 50em; /* width: 40em; */
max-width: 90%;
background-color: rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.2);
border-style: solid; border-style: solid;
border-width: 2px; border-width: 2px;
@ -55,17 +56,17 @@ a:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: absolute; position: absolute;
top: 50%; top: 20%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, 0);
z-index: 10; z-index: 10;
} }
#logo { #logo {
margin: auto; margin: auto;
margin-top: -10em; margin-top: -5em;
max-width: 50%; max-width: 60%;
min-width: 30%; width: 50%;
display: block; display: block;
border-style: solid; border-style: solid;
border-color: rgba(255, 255, 255, 0); border-color: rgba(255, 255, 255, 0);
@ -127,6 +128,17 @@ ul.buttons li {
0px 0px 7px #f77737; 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 { .footer {
font-size: 0.9em; font-size: 0.9em;
} }

47
index.html
View File

@ -29,35 +29,24 @@
<h1>AllAroundHere</h1> <h1>AllAroundHere</h1>
<p> <p>
<span class="tape-over"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
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
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
culpa qui officia deserunt mollit anim id est laborum.
</span>
</p> </p>
<ul class="buttons"> <ul class="buttons">
<li> <li><a class="button-youtube" href="https://www.youtube.com/channel/UCnJum8qCKlz36SzSsSeZy1w">
<a class="button-youtube" href="https://www.youtube.com/channel/UCnJum8qCKlz36SzSsSeZy1w"> <i class="fab fa-youtube"></i>&nbsp;Youtube
<i class="fab fa-youtube"></i> </li></a>
Youtube <li><a class="button-instagram" href="https://www.instagram.com/allaroundhere/">
</a> <i class="fab fa-instagram"></i>&nbsp;Instagram
</li> </li></a>
<li> <li><a class="button-twitter" href="https://twitter.com/enpaul_">
<a class="button-instagram" href="https://www.instagram.com/allaroundhere/"> <i class="fab fa-twitter"></i>&nbsp;Twitter
<i class="fab fa-instagram"></i> </li></a>
Instagram
</a>
</li>
<li>
<a class="button-twitter" href="https://twitter.com/AllAroundHere1">
<i class="fab fa-twitter"></i>
Twitter
</a>
</li>
</ul> </ul>
<div class="footer"> <div class="footer">
@ -65,6 +54,12 @@
<a href="https://enpaul.net/" target="_blank">E.N.Paul</a> <a href="https://enpaul.net/" target="_blank">E.N.Paul</a>
</div> </div>
</div> </div>
<div id="background-info">
<a href="" target="_blank" id="background-info-link">
Allis Engine #4, Metropolitan Waterworks Museum
</a>
</div>
</body> </body>
</html> </html>

92
js/custom.js
View File

@ -1,19 +1,71 @@
// Some quick scripting to select a random background on page load // Some quick scripting to select a random background on page load
const BACKGROUND_IMAGES = [ const BACKGROUND_IMAGES = [
"https://cdn.enp.one/img/backgrounds/cl-photo-allis.jpg", {
"https://cdn.enp.one/img/backgrounds/cl-photo-boston.jpg", url: "https://cdn.enp.one/img/backgrounds/cl-photo-allis.jpg",
"https://cdn.enp.one/img/backgrounds/cl-photo-denver.jpg", description: "Allis Engine #4, Metropolitan Waterworks Museum",
"https://cdn.enp.one/img/backgrounds/cl-photo-geese.jpg", source: ""
"https://cdn.enp.one/img/backgrounds/cl-photo-hotel.jpg", },
"https://cdn.enp.one/img/backgrounds/cl-photo-lawrencedam.jpg", {
"https://cdn.enp.one/img/backgrounds/cl-photo-letchworth.jpg", url: "https://cdn.enp.one/img/backgrounds/cl-photo-boston.jpg",
"https://cdn.enp.one/img/backgrounds/cl-photo-library.jpg", description: "Charles River Basin and Skyline",
"https://cdn.enp.one/img/backgrounds/cl-photo-lighthouse.jpg", source: ""
"https://cdn.enp.one/img/backgrounds/cl-photo-mbta.jpg", },
"https://cdn.enp.one/img/backgrounds/cl-photo-rockyshore.jpg", {
"https://cdn.enp.one/img/backgrounds/cl-photo-rt112.jpg", url: "https://cdn.enp.one/img/backgrounds/cl-photo-denver.jpg",
"https://cdn.enp.one/img/backgrounds/cl-photo-startrek.jpg", description: "Mile-High City Skyline",
source: ""
},
{
url: "https://cdn.enp.one/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",
description: "Bay Point Hotel, Lake Winnipesaukee",
source: ""
},
{
url: "https://cdn.enp.one/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",
description: "The Middle Falls in Letchworth State Park",
source: ""
},
{
url: "https://cdn.enp.one/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",
description: "Nubble Lighthouse",
source: ""
},
{
url: "https://cdn.enp.one/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",
description: "Icy Stormy Shoreline at Brenton Point",
source: ""
},
{
url: "https://cdn.enp.one/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",
description: "Enterprise Engineering Systems at the Star Trek Set Museum",
source: ""
}
]; ];
@ -21,13 +73,23 @@ function selectBackground() {
let max = BACKGROUND_IMAGES.length - 1 let max = BACKGROUND_IMAGES.length - 1
let min = 0; let min = 0;
index = Math.round(Math.random() * (max - min) + min); index = Math.round(Math.random() * (max - min) + min);
console.log("Loading background #" + index + ": " + BACKGROUND_IMAGES[index]); console.log("Loading background #" + index + ": " + BACKGROUND_IMAGES[index].url);
return BACKGROUND_IMAGES[index]; return BACKGROUND_IMAGES[index];
} }
function setBackground() { function setBackground() {
let selected = selectBackground()
document.getElementById( document.getElementById(
"background-image" "background-image"
).style.backgroundImage = "url(" + selectBackground() + ")"; ).style.backgroundImage = "url(" + selected.url + ")";
document.getElementById(
"background-info-link"
).innerHTML = selected.description;
document.getElementById(
"background-info-link"
).href = selected.source;
} }