index.html.j2

<!DOCTYPE html>

<html lang="en">
<head>
    <title>{{ data.identity.title }}</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>
        :root {
            --wine-red: #771646;
            --black: #46463D;
            --beige: #D5D2B8;
        }
        body {
            font-size: 17px;
            line-height: 1.3rem;
            color: var(--black);
            background-color: #fff;
            font-family: 'Noto Serif', serif;

            display: grid;
            grid-template-areas: "header" "main" "footer";
            grid-template-rows: min-content auto min-content;
            grid-template-columns: 100%;

            margin: 0;
            padding: 0;
            height: 100vh;
        }

        h1, h2, h3, h4 {
            font-family: Barlow, sans-serif;
            font-weight: 700;
        }

        a {
            color: var(--wine-red);
            text-decoration: none;
        }

        p {
            margin: 0 0 1rem 0;
        }

        header {
            grid-area: header;
            display: grid;
            grid-template-areas: ". content .";
            grid-template-columns: 10% 1fr 10%;
            grid-gap: 1rem;

            border-top: .25rem solid var(--wine-red);
        }
        .header-content {
            grid-area: content;
            padding: 1rem 0;
        }

        body > main {
            display: grid;
            grid-template-areas: ". meta items .";
            grid-template-columns: 10% 1fr 2fr 10%;
            grid-gap: 1rem;

            grid-area: main;
            padding: 1rem 0;
            overflow: hidden;
        }

        @media (max-width: 1024px) {
            main {
                grid-template-areas: ". meta ." ". items .";
                grid-template-columns: 10% 1fr 10%;
                grid-template-rows: min-content auto;
                grid-gap: 1rem 0;
                overflow: inherit;
            }
            header {
                grid-gap: 0;
            }
            #metadata {
                padding-right: 0;
            }
            #items {
                min-height: 600px;
            }
        }

        #metadata {
            grid-area: meta;
            padding-right: 1rem;
            overflow-y: auto;
        }

        #items {
            grid-area: items;
            margin: 0;
            padding: 0;
        }

        #metadata h2 {
            font-size: 1.2rem;
        }

        #footer {
            grid-area: footer;
            display: grid;
            grid-template-areas: ". content .";
            grid-template-columns: 10% 1fr 10%;
            grid-gap: 1rem;

            padding: 1rem 0;
            font-size: 0.8rem;
            color: var(--beige);
            background-color: var(--black);
            font-family: Barlow, sans-serif;
        }
        .footer-content {
            grid-area: content;
            display: flex;
        }
        .footer-content .site-key {
            margin-left: auto;
        }
        #viewer {
            position: relative;
            height: 100%;
            box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
        }

        dl {
            display: grid;
            grid-template: auto / 10rem 1fr;
        }

        dt {
            font-weight: bold;
            grid-column: 1;
        }

        dd {
            grid-column: 2;
            margin-bottom: .5rem;
        }
    </style>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Barlow:700">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Serif:400">
    <script src="https://unpkg.com/mirador@3.3.0/dist/mirador.min.js"></script>
</head>
<body>
    <header>
        <div class="header-content">
            <h1><a href="">{{ data.identity.title }}</a></h1>
        </div>
    </header>

    <main>
        <aside id="metadata">
            <h2>Information</h2>
            <dl>
                <dt>Address:</dt>
                <dd>
                    <address>
                        {{ data.contact.holder }}
                        <br/>
                        {{ data.contact.street }}
                        <br/>
                        {{ data.contact.postcode }}
                    </address>
                </dd>
                {% if data.description.lang %}
                <dt>Languages:</dt>
                <dd>{{ data.description.languages()|join(', ') }}</dd>
                {% endif %}
                <dt>Download:</dt>
                <dd>
                    <a href="{{ name }}.xml" target="_blank">EAD 2002</a>
                </dd>
            </dl>

            {% if data.description.biog %}
                <h2>Biographical History</h2>
                <div class="biographical-history">
                    {%- markdown -%}
                    {{ data.description.biog }}
                    {% endmarkdown %}
                </div>
            {% endif %}
            {% if data.description.scope %}
                <h2>The Collection</h2>
                <div class="scope-and-content">
                    {%- markdown -%}
                    {{ data.description.scope }}
                    {% endmarkdown %}
                </div>
            {% endif %}

        </aside>

        <section id="items">
            <div id="viewer"></div>
        </section>
    </main>

    <footer id="footer">
        <div class="footer-content">
            <div class="copyright">
                &copy; EHRI Project 2023
            </div>
            <div class="site-key">
                {{ key }}
            </div>
        </div>
    </footer>

    <script>
      let manifest = document.location.origin + "/{{ name }}.json";

      Mirador.viewer({
        id: "viewer",
        workspace: {
          type: 'mosaic',
        },
        workspaceControlPanel: {
          enabled: false
        },
        windows: [{
          manifestId: manifest,
          //view: 'gallery',
          loadedManifest: manifest,
          canvasIndex: 0,
          thumbnailNavigationPosition: 'far-bottom',
        }],
        window: {
          allowClose: false, // Prevent the user from closing this window
          allowMaximize: false,
          defaultSideBarPanel: 'info',
          sideBarOpenByDefault: true,
          views: [ // Only allow the user to select single and gallery view
            { key: 'single' },
            { key: 'gallery' },
          ]
        },
        themes: {
          dark: {
            palette: {
              type: 'dark',
              primary: {
                main: '#84004c',
              },
            },
          },
          light: {
            palette: {
              type: 'light',
              primary: {
                main: '#84004c',
              },
            },
          },
        },
        osdConfig: {
          maxZoomPixelRatio: 5
        }
      });
    </script>
</body>
</html>