millironx/pages
1
0
Fork 0
Code Issues Pull requests Releases Packages Activity

Make footer much prettier

Browse source
This commit is contained in:
Thomas A. Christensen II 2021-03-17 14:32:36 -06:00
parent c3fb5e3819
commit dc4363e47b
Signed by: millironx
GPG key ID: 139C07724802BC5D
14 changed files with 277 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
404.html
View file

@ -3,6 +3,8 @@ title: 404 Error - Page Not Found
imageUrl: /img/404.jpg
blurImageUrl: /img/404_blur.jpg
motto: HTTP 404 Error
imageTitle: The End of Paradise
imageDescription: The Paradise Creek Trail seems to lead straight into ... a construction zone?
---
<p><em>That's geek speak for</em> "this page doesn't exist anymore, and maybe it never did!"</p>

3
AI.html
View file

@ -1,6 +1,9 @@
---
title: Artificial Insemination Services
description: An advertisement for my services as an AI tech.
imageUrl: /img/Ai-calf.jpg
imageTitle: Bull calf
imageDescription: I can't remember if this calf was, in fact, an AI baby, but he's sure cute enough to sell something, anyway.
blurImageUrl: /img/Ai-calf_blur.jpg
motto: Artificial Insemination
---

3
Academia.html
View file

@ -1,8 +1,11 @@
---
title: Academic Achievements
description: A list of various publications, presentations and posters that I've given in the name of academia, including abstracts, links to proof that I did them, as well as full-text links when available.
imageUrl: /img/library.jpg
blurImageUrl: /img/library_blur.jpg
motto: Academic Publications and Presentations
imageTitle: University of Idaho Library
imageDescription: Personally, I preferred the Owen Library in Pullman seven miles west
---
<!-- Thesis -->
<dl>

5
Contact.html
View file

@ -1,10 +1,13 @@
---
title: Contact Me
description: Contact form to get ahold of me.
imageUrl: /img/venice-mailbox.jpg
imageTitle: Snitch box in Venice
imageDescription: This mailbox was used for reporting public health offenses in Venice. It survived the wrath of Napoleon because it didn't look enough like a lion.
blurImageUrl: /img/venice-mailbox_blur.jpg
motto: Contact Me
---
<p>IFrames can be evil; you can <a href="https://docs.google.com/forms/d/e/1FAIpQLSfUhraXLpH7coIrP5xGOj2-JKtJTLec-OuZfw5JszRC5E4-Iw/viewform?usp=sf_link">open this form directly</a> if it's giving you trouble.</p>
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfUhraXLpH7coIrP5xGOj2-JKtJTLec-OuZfw5JszRC5E4-Iw/viewform?embedded=true" width="100%" height="1032" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfUhraXLpH7coIrP5xGOj2-JKtJTLec-OuZfw5JszRC5E4-Iw/viewform?embedded=true" width="100%" height="1032" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

3
Videos.html
View file

@ -1,6 +1,9 @@
---
title: Videos
description: My videography portfolio including highlights of all my adventures in filmmaking.
imageUrl: /img/camera.jpg
imageTitle: Historical Kodak Camera
imageDescription: Isn't it a shame that the company that brought photography to the masses is basically out of business now?
blurImageUrl: /img/camera_blur.jpg
motto: Videography Portfolio
---

3
Websites.html
View file

@ -1,6 +1,9 @@
---
title: My Websites
description: A listing of every website that I have ever contributed code to.
imageUrl: /img/eclipse.jpg
imageTitle: The 2017 Solar Eclipse
imageDescription: Did you know that the population of Wyoming quadrupled for one day in 2017?
blurImageUrl: /img/eclipse_blur.jpg
motto: Websites
---

4
_config.yml
View file

@ -52,4 +52,6 @@ defaults:
title: Milliron X
imageUrl: /img/saddles.jpg
blurImageUrl: /img/saddles_blur.jpg
motto: Milliron X
motto: Milliron X
imageTitle: "Saddles After Roundup"
imageDescription: "After gathering all the cows and unsaddling the horses, the saddles wait for the cowboys to put the horses away"

262
_layouts/default.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en-us">
<head>
<!-- A LOT of this code comes from
@ -7,7 +8,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="description" content="{{ page.description }}">
<meta name="author" content="">
<!-- Search engine ownership verification -->
@ -20,7 +21,9 @@
<!-- Styles -->
<!-- Development styles: full toolkits for use in writing web pages -->
<!-- dev: bootstrap -->
<!-- <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eumbg33EfHRpbzLIm0lGs0JresLNj7c+5beuRW4d11/vF3Wv3YYmuudfOwMsCmp5" crossorigin="anonymous" type="text/css"> -->
<!-- <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eumbg33EfHRpbzLIm0lGs0JresLNj7c+5beuRW4d11/vF3Wv3YYmuudfOwMsCmp5" crossorigin="anonymous"
type="text/css">-->
<!-- dev: GSDK -->
<!-- <link href="/css/gsdk-main.css" rel="stylesheet" type="text/css"> -->
<!-- <link href="/css/gsdk-demo.css" rel="stylesheet" type="text/css"> -->
@ -30,16 +33,175 @@
<link href="/css/bundle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="alert alert-dismissible alert-danger text-center">
<a href="coronavirus" style="color: whitesmoke">
Yep, it's another one of those annoying red &lsquo;Rona banners that don't actually say anything.
Click here to learn more.
</a>
<div class="modal fade" id="legal-modal" tabindex="-1" role="dialog" aria-labelledby="legal-label">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="legal-label">Additional Info</h4>
</div>
<div class="modal-body">
<ul class="nav nav-tabs">
<li class="active"><a href="#desc" data-toggle="tab" aria-expanded="true">Description</a></li>
<li><a href="#copyright" data-toggle="tab" aria-expanded="false">Copyright</a></li>
<li><a href="#oss" data-toggle="tab" aria-expanded="false">Open Source</a></li>
<li><a href="#privacy" data-toggle="tab" aria-expanded="false">Privacy</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="desc">
<h4>{{ page.title }}</h4>
<p>{{ page.description }}</p>
<h6>Header image: <em>{{ page.imageTitle }}</em></h6>
<p>{{ page.imageDescription }}</p>
</div>
<div class="tab-pane fad in" id="copyright">
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/">
<img class="img img-responsive" alt="Creative Commons License" style="border-width:0; display: block; margin: 0 auto"
src="https://i.creativecommons.org/l/by/4.0/88x31.png" />
</a>
<br />
<span class="text-center" style="display: block;">&#169; 2021 Thomas A. Christensen II</span>
<br />
<p>
All my pages are licensed under
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons
Attribution 4.0</a>
</p>
<p>
Most of my multimedia (photos, music, videos) are licensed under
<a href="http://creativecommons.org/licenses/by-nd/4.0/">Creative Commons
Attribution-No Derivatives 4.0</a>, instead.
</p>
<p>
The source for this site is licensed under the
<a href="https://opensource.org/licenses/MIT">MIT License</a>.
</p>
<div class="sr-only">
<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text"
property="dct:title" rel="dct:type">{{ page.title }}</span> by <a
xmlns:cc="http://creativecommons.org/ns#" href="https://millironx.com"
property="cc:attributionName" rel="cc:attributionURL">Thomas A. Christensen
II</a> is licensed under a <a rel="license"
href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution
4.0</a>
</div>
</div>
<div class="tab-pane fade in" id="oss">
<p>
This site is open source!
<br />
<a class="btn btn-fill" href="https://github.com/millironx/millironx.github.io">
<i class="fab fa-github"></i>&emsp;Get the code! &raquo;
</a>
</p>
<p>
In addition, I used a number of excellent open-source libraries and toolkits in building
it.
I dedicate this space to acknowledging them all.
</p>
<table class="table table-condensed table-responsive table-striped">
<tr>
<td>Jekyll 4</td>
<td><a href="https://jekyllrb.com/">jekyllrb.com</a></td>
<td><a href="https://github.com/jekyll/jekyll/blob/master/LICENSE">MIT License</a>
</td>
</tr>
<tr>
<td>Bootstrap 3</td>
<td><a href="https://getbootstrap.com/">getbootstrap.com</a></td>
<td><a href="https://github.com/twbs/bootstrap/blob/main/LICENSE">MIT License</a>
</td>
</tr>
<tr>
<td>JQuery 3</td>
<td><a href="https://jquery.com/">jquery.com</a></td>
<td><a href="https://jquery.org/license">MIT License</a></td>
</tr>
<tr>
<td>Font Awesome 5</td>
<td><a href="https://fontawesome.com/">fontawesome.com</a></td>
<td><a href="https://fontawesome.com/license/free">MIT/CC-BY License</a></td>
</tr>
<tr>
<td>Get S*** Done Toolkit</td>
<td><a
href="https://www.creative-tim.com/product/get-shit-done-kit">creative-tim.com</a>
</td>
<td><a href="https://github.com/timcreative/freebies/blob/master/LICENSE.md">MIT
License</a></td>
</tr>
<tr>
<td>Vertical Menu for Bootstrap 3</td>
<td><a
href="https://jonathanbriehl.com/posts/vertical-menu-for-bootstrap-3">jonathanbriehl.com</a>
</td>
<td><a href="#">No license</a></td>
</tr>
<tr>
<td>FitText</td>
<td><a href="http://fittextjs.com/">fittextjs.com</a></td>
<td><a href="http://www.wtfpl.net/">WTFPL License</a></td>
</tr>
<tr>
<td>PurifyCSS</td>
<td><a href="https://github.com/purifycss/purifycss">github.com/purifycss</a></td>
<td><a href="https://github.com/purifycss/purifycss/blob/master/LICENSE">MIT
License</a></td>
</tr>
</table>
</div>
<div class="tab-pane fade in" id="privacy">
<p>
I take privacy very seriously. That said, I do need <i>some</i> info on how many people
visit.
As a compromise, this site uses <a href="https://simpleanalytics.com">Simple
Analytics</a>, a
privacy-friendly (as much as possible) web analytics library.
</p>
<p>
You may view all analytics gathered at <a
href="https://simpleanalytics.com/millironx.com">simpleanalytics.com/millironx.com</a>.
</p>
<p>
If you do not wish to participate in my site's analytics, there are two ways to opt-out.
</p>
<h6>Do Not Track Request</h6>
<p>
This site is programmed to disable all analytics if a Do Not Track request is sent from
the browser.
For more information on how to setup Do Not Track requests, please visit
<a href="https://allaboutdnt.com/">allaboutdnt.com</a>.
</p>
<h6>Use an Ad-Blocking Extension</h6>
<p>
You may also install a content-blocking extension into your browser and block the domain
<code>simpleanalyticscdn.com</code>. I recommend either
<a href="https://github.com/gorhill/uBlock">uBlock Origin</a> (instructions <a
href="https://github.com/gorhill/uBlock/wiki/Dashboard:-My-filters">here</a>)
or <a href="https://noscript.net">NoScript</a> for this purpose.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="container" id="top-container">
</div>
<div class="alert alert-dismissible alert-danger text-center">
<a href="coronavirus" style="color: whitesmoke">
Yep, it's another one of those annoying red &lsquo;Rona banners that don't actually say anything.
Click here to learn more.
</a>
</div>
<div class="container" id="top-container">
<header class="hidden-xs text-center">
<h1 class="font-serif font-small-caps"><object data="/img/MillironX-title.svg"><img src="/img/MillironX-title.svg" alt="Milliron X" /></object>&emsp;Milliron X</h1>
<h1 class="font-serif font-small-caps"><object data="/img/MillironX-title.svg"><img
src="/img/MillironX-title.svg" alt="Milliron X" /></object>&emsp;Milliron X</h1>
</header>
<div class="row">
<div class="col-sm-3">
@ -47,14 +209,16 @@
<nav class="navbar navbar-inverse" role="navigation" id="nav-link-container">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="visible-xs navbar-brand">
<object style="filter: invert(100%)" data="/img/MillironX-title.svg"><img src="/img/MillironX-title.svg" alt="Milliron X" /></object>
<object style="filter: invert(100%)" data="/img/MillironX-title.svg"><img
src="/img/MillironX-title.svg" alt="Milliron X" /></object>
</div>
</div>
@ -87,21 +251,40 @@
<br />
<div class="main" id="main-content">
{{ content }}
<hr />
<footer class="row">
<div class="col-md-8 col-md-offset-2">
<div class="text-center">
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">{{ page.title }}</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="https://millironx.github.io" property="cc:attributionName" rel="cc:attributionURL">Thomas A. Christensen II</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
</div>
</div>
</footer>
</div>
</div>
</div>
</div>
</div>
<footer style="background-color: whitesmoke;">
<div class="container" style="position: relative;">
<img src="/img/brandedbull.png" alt="Branded bull" style="max-height: 72pt;" />
<button type="button" class="btn btn-success vertical-center" data-toggle="modal" data-target="#legal-modal"
style="position: absolute; right: 0">
<i class="fas fa-hat-cowboy-side"></i>&emsp;Page info &amp;<br />other legal stuff&hellip;
</button>
</div>
</div>
<!-- <div class="col-md-8 col-md-offset-2">
<div class="text-center">
<button type="button" class="btn btn-primary
btn-large" data-toggle="modal" data-target="#legal-modal">More info</button>
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img
alt="Creative Commons License" style="border-width:0"
src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br /><span
xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text"
property="dct:title" rel="dct:type">{{ page.title }}</span> by <a
xmlns:cc="http://creativecommons.org/ns#" href="https://millironx.github.io"
property="cc:attributionName" rel="cc:attributionURL">Thomas A. Christensen
II</a> is licensed under a <a rel="license"
href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution
4.0 International License</a>.
</div>
</div>-->
</footer>
<!-- Script Bundle: JQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
@ -109,7 +292,9 @@
<script src="/js/jquery.fittext.js" type="text/javascript"></script>
<!-- Script Bundle: Bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js" integrity="sha384-DKoN2gpE9Yt/u0fuNvcJBn4n7wjnKFKjg4+Iz4ORs52lUc0Qp++smhHtWwHeapVW" crossorigin="anonymous" type="text/javascript"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"
integrity="sha384-DKoN2gpE9Yt/u0fuNvcJBn4n7wjnKFKjg4+Iz4ORs52lUc0Qp++smhHtWwHeapVW" crossorigin="anonymous"
type="text/javascript"></script>
<!-- Script Bundle: Font Awesome -->
<script src="https://kit.fontawesome.com/0bbd6c0ef3.js" crossorigin="anonymous"></script>
@ -122,33 +307,34 @@
// Enables app insights IF AND ONLY IF user does not send a DNT request
// Shamelessly stolen from https://dev.to/spekulatius1984/how-to-check-do-not-track-dnt-in-javascript-57g1
let dntActive = () => {
// get the value from the various browser implementations.
let dnt_active = parseInt(
// Internet Explorer 9 and 10 vendor prefix
navigator.msDoNotTrack ||
// get the value from the various browser implementations.
let dnt_active = parseInt(
// Internet Explorer 9 and 10 vendor prefix
navigator.msDoNotTrack ||
// IE 11 uses window.doNotTrack
window.doNotTrack ||
// IE 11 uses window.doNotTrack
window.doNotTrack ||
// W3C
navigator.doNotTrack,
10
);
// W3C
navigator.doNotTrack,
10
);
// If this comes to exactly 1 DNT is set.
return (dnt_active === 1);
// If this comes to exactly 1 DNT is set.
return (dnt_active === 1);
}
// Check if DNT is active.
if (dntActive()) {
// active
console.log("Simple Analytics has been disabled due to user's Do Not Track request")
// active
console.log("Simple Analytics has been disabled due to user's Do Not Track request")
} else {
// inactive
console.log("Simple Analytics is active")
document.write("<script async defer src=\"https://scripts.simpleanalyticscdn.com/latest.js\"><\/script>")
// inactive
console.log("Simple Analytics is active")
document.write("<script async defer src=\"https://scripts.simpleanalyticscdn.com/latest.js\"><\/script>")
}
</script>
</body>
</html>

6
css/bundle.css
View file

File diff suppressed because one or more lines are too long

17
css/millironx_customstyles.css
View file

@ -183,4 +183,21 @@ dl {
.tooltip-inner {
min-width: 300px;
}
/* Give tab contents a bit more room to breathe */
.tab-pane {
margin-top: 20px;
}
.vertical-center {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
footer {
position: relative;
}

BIN
img/brandedbull.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

3
img/hereford-bull.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 44 KiB

3
index.html
View file

@ -1,8 +1,11 @@
---
title: Home
imageUrl: /img/charolette.jpg
imageTitle: Swiss Cow in the hayyard
imageDescription: She almost looks like she's in her native country again.
blurImageUrl: /img/charolette_blur.jpg
motto: <small>My name is Thomas Christensen</small><br />I am Milliron X
description: The homepage of Thomas A. Christensen II
---
<h2>Milliron X - The homepage of Thomas A. Christensen II</h2>

6
js/MillironX_CustomScripts.js
View file

@ -30,5 +30,11 @@ var fixedTop = false;
$(window).scroll(function(e) {
oVal = ($(window).scrollTop() / 170);
$(".blur").css("opacity", oVal);
if (oVal >= 3) {
$(".img-src").css("visibility", "hidden")
}
else {
$(".img-src").css("visibility", "")
}
});