You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
222 lines
8.2 KiB
HTML
222 lines
8.2 KiB
HTML
<!doctype html>
|
|
<html class="no-js" lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>{{ .Title }} - {{ .Site.Title }}</title>
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
|
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
|
<style>
|
|
.blurred-container {
|
|
position: relative;
|
|
width: 100%;
|
|
min-height: 35vh;
|
|
height: 350px;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.blurred-container .motto {
|
|
color: #fff;
|
|
font-size: 76px;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
text-shadow: 0 0 10px rgba(0, 0, 0, .33);
|
|
text-transform: uppercase;
|
|
top: 7.5vh;
|
|
z-index: 3;
|
|
display: block;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
width: 60%;
|
|
height: 0
|
|
}
|
|
|
|
.motto h1 {
|
|
background: #0000007d;
|
|
}
|
|
|
|
.blurred-container .img-src {
|
|
position: fixed;
|
|
width: 100%;
|
|
min-height: 35vh;
|
|
height: 350px;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center center;
|
|
}
|
|
|
|
.blur {
|
|
opacity: 0;
|
|
}
|
|
|
|
main {
|
|
position: relative;
|
|
background-color: #fff;
|
|
}
|
|
|
|
/* Gives me greater control over fonts */
|
|
.font-serif {
|
|
font-family: Georgia, "Times New Roman", Times, serif;
|
|
}
|
|
|
|
.font-sans {
|
|
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
.font-mono {
|
|
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
|
}
|
|
|
|
.font-small-caps {
|
|
font-variant-caps: small-caps;
|
|
}
|
|
|
|
.strikethrough {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.sfTable {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.text-align-left {
|
|
text-align: left
|
|
}
|
|
|
|
.text-align-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.float-left {
|
|
float: left;
|
|
}
|
|
|
|
.float-right {
|
|
float: right;
|
|
}
|
|
|
|
.media-object {
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.pull-left {
|
|
max-width: 25%;
|
|
}
|
|
}
|
|
|
|
h1 small {
|
|
font-size: 60%;
|
|
color: #9a9a9a;
|
|
font-weight: 300;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
h1 {
|
|
font-weight: 400;
|
|
margin: 30px 0 15px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container-fluid">
|
|
<div class="row wrapper min-vh-100 flex-column flex-sm-row">
|
|
<aside class="col-12 col-md-3 p-0 bg-dark flex-shrink-1">
|
|
<nav class="navbar navbar-expand-md navbar-dark bg-dark align-items-start flex-md-column flex-row">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand d-block d-md-none" href="#"><i class="fa fa-bullseye fa-fw"></i>
|
|
Brand</a>
|
|
<a href class="navbar-toggler" data-bs-toggle="collapse" data-bs-target=".sidebar">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</a>
|
|
<div class="collapse navbar-collapse sidebar">
|
|
<ul class="flex-column navbar-nav w-100 justify-content-between">
|
|
<li class="nav-item">
|
|
<a class="nav-link pl-0" href="#"><i class="fa fa-heart-o fa-fw"></i> <span
|
|
class="">Link</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link pl-0 dropdown-toggle text-nowrap" href="#m1"
|
|
data-bs-parent="#navbar1" data-bs-toggle="collapse" data-bs-target="#m1"
|
|
aria-expanded="false">
|
|
<i class="fa fa-address-card-o fa-fw"></i> <span class=""> Link</span>
|
|
</a>
|
|
<div class="collapse" id="m1">
|
|
<ul class="flex-column nav">
|
|
<a class="nav-link px-0 text-truncate" href="#">Sub</a>
|
|
<a class="nav-link px-0 text-truncate" href="#">Sub longer</a>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link pl-0" href="#"><i class="fa fa-book fa-fw"></i> <span
|
|
class="">Link</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link pl-0" href="#"><i class="fa fa-heart fa-fw"></i> <span
|
|
class="">Link</span></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</aside>
|
|
<div class="col bg-faded py-3 gx-0">
|
|
<div class="container">
|
|
<header class="d-none d-sm-none d-md-block text-center">
|
|
<h1 class="font-serif font-small-caps"><object
|
|
data="https://millironx.com/img/MillironX-title.svg">
|
|
<img src="https://millironx.com/img/MillironX-title.svg" alt="Milliron X" /></object>
|
|
 
|
|
Milliron X
|
|
</h1>
|
|
</header>
|
|
</div>
|
|
<div class="blurred-container">
|
|
<div class="motto">
|
|
<h1 id="motto">
|
|
{{ safeHTML (.Param "motto") }}
|
|
</h1>
|
|
</div>
|
|
{{ $imgsrc := print "images/" (.Param "cardImage") ".jpg" }}
|
|
{{ $mainimg := resources.Get $imgsrc }}
|
|
{{ $blurimg := $mainimg.Filter (images.GaussianBlur 100) }}
|
|
<div class="img-src" style="background-image: url('{{ $mainimg.RelPermalink }}');"></div>
|
|
<div class="img-src blur" style="background-image: url('{{ $blurimg.RelPermalink }}');"></div>
|
|
</div>
|
|
<br />
|
|
<main class="container-fluid">
|
|
<div class="container px-5">
|
|
{{ block "main" . }}{{ end }}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
|
|
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
|
|
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
|
|
crossorigin="anonymous"></script>
|
|
<script src="https://kit.fontawesome.com/0bbd6c0ef3.js" crossorigin="anonymous"></script>
|
|
<script src="https://wyoming4h.org/albany4h/record-book/script/parallax.min.js"></script>
|
|
<script src="https://millironx.com/js/jquery.fittext.js"></script>
|
|
<script>
|
|
$(window).scroll(function (e) {
|
|
oVal = ($(window).scrollTop() / 170);
|
|
$(".blur").css("opacity", oVal);
|
|
|
|
});
|
|
$("#motto").fitText();
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|