<!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>

{{ $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>

    <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/019cc70ab4.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>
