pages/layouts/_default/baseof.html

244 lines
9.6 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>
{{ $twbscss := resources.Get "node/node_modules/bootstrap/scss/bootstrap.scss" | resources.ToCSS }}
{{ $allcss := slice $twbscss | resources.Concat "css/bundle.css" }}
{{ $allcsspure := $allcss | resources.PostCSS | minify | fingerprint | resources.PostProcess }}
<link href="{{ $allcsspure.Permalink }}" rel="stylesheet">
<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>
{{ $millironx := resources.Get "graphics/millironx.svg" }}
<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="#">
<object class="d-inline-block align-text-top" width="80" height="24" style="filter: invert(100%)" data="{{ $millironx.Permalink }}">
<img src="{{ $millironx.Permalink }}" alt="Milliron X" />
</object>
&ensp;
<span class="font-small-caps font-serif">Milliron X</span>
</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="fad fa-home fa-fw"></i> <span
class="">Home</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="/contact"><i class="fad fa-file-signature fa-fw"></i> <span
class="">Contact</span></a>
</li>
<li class="nav-item">
<a class="nav-link pl-0" href="/academia"><i class="fad fa-university fa-fw"></i> <span
class="">Academia</span></a>
</li>
<li class="nav-item">
<a class="nav-link pl-0" href="/ai"><i class="fad fa-cow fa-fw"></i> <span
class="">Artificial Insemination</span></a>
</li>
<li class="nav-item">
<a class="nav-link pl-0" href="/academia"><i class="fad fa-video fa-fw"></i> <span
class="">Videos</span></a>
</li>
<li class="nav-item">
<a class="nav-link pl-0" href="/academia"><i class="fad fa-browser fa-fw"></i> <span
class="">Websites</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="{{ $millironx.Permalink }}">
<img src="{{ $millironx.Permalink }}" alt="Milliron X" /></object>
&emsp;
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>
{{ $jqueryjs := resources.Get "node/node_modules/jquery/dist/jquery.js" }}
{{ $popperjs := resources.Get "node/node_modules/@popperjs/core/dist/umd/popper.js" }}
{{ $twbsjs := resources.Get "node/node_modules/bootstrap/dist/js/bootstrap.js" }}
{{ $fajs := resources.Get "node/node_modules/@fortawesome/fontawesome-pro/js/all.js" }}
{{ $alljs := slice $jqueryjs $popperjs $twbsjs $fajs | resources.Concat "js/bundle.js" | minify | fingerprint }}
<script src="{{ $alljs.Permalink }}"></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>