github-pages-optimised-build/index.html at main · chrisnajman/github-pages-optimised-build · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
    <script>document.documentElement.classList.remove("no-js")</script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description"
        content="GitHub Pages site template built from the '/docs' folder using an automated front-end build process with minified HTML, CSS and (transpiled) JavaScript.">
    <title>Description | GitHub Pages Optimised Build</title>
    <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
    <link rel="manifest" href="./site.webmanifest">
    <link rel="stylesheet" href="./style.css">
    <script src="./index.js" type="module"></script>
</head>

<body class="flow">
    <div id="loader" class="loader"><span class="visually-hidden">The page is loading...</span></div>
    <span class="visually-hidden" aria-live="polite" aria-hidden="true" id="page-loaded"></span>
    <a href="#main-content" class="element-invisible element-focusable skip-link">Skip to main content</a>

    <div class="theme-toggler">
        <p class="light">Light<span class="visually-hidden"> theme inactive</span></p><button type="button"
            aria-pressed="true" aria-label="Toggle theme"><span></span></button>
        <p class="dark">Dark<span class="visually-hidden"> theme active</span></p>
    </div>

    <header class="header">
        <p class="h1">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512" aria-hidden="true">
                <path d="M493.607,428.279L213.482,153.388c4.047-7.141,7.359-14.609,9.703-22.313c0.25-2.469,0.75-5.031,1.656-7.641
		c0.484-1.469,0.891-2.969,1.297-4.453c6.406-34.656-3.766-71.766-30.563-98.563c-8.469-8.469-17.984-15.266-28.109-20.422
		c-0.5,0-1,0.063-1.484,0.172l-9,2.203c-1.688,0.438-3.141,1.5-4.016,3c-0.875,1.484-1.109,3.281-0.641,4.953l19.344,69.469
		c0.719,2.594-0.25,5.344-2.422,6.922l-43.953,31.922c-1.344,0.953-3,1.375-4.641,1.156l-46.703-6.438
		c-2.547-0.344-4.625-2.156-5.313-4.625L48.217,35.357c-0.938-3.328-4.344-5.344-7.703-4.516l-11.813,2.891
		c-0.609,0.156-1.156,0.469-1.703,0.797C13.436,53.544,6.592,75.873,6.498,98.232c0.203,28.063,10.953,56.063,32.359,77.469
		c25.828,25.813,61.188,35.938,94.766,31.203c4.844-0.703,9.266-1.188,13.328-1.469c3.875-1.063,7.688-2.453,11.469-3.969
		c46.969,47.563,277.766,284.235,277.766,284.235c15.859,15.859,41.563,15.859,57.422,0S509.467,444.139,493.607,428.279z
		 M479.248,471.342c-7.922,7.938-20.766,7.938-28.703,0c-7.938-7.922-7.938-20.781,0-28.719c7.938-7.922,20.781-7.922,28.703,0
		C487.186,450.561,487.186,463.42,479.248,471.342z" />
                <polygon points="406.264,136.31 451.795,124.763 495.623,48.216 474.389,28.076 453.17,7.935 379.029,55.716
		369.889,101.763 291.186,184.716 326.998,219.841 	" />
                <path
                    d="M178.092,280.373c-9.063,7.844-21.906-1.875-38.719,15.859L28.248,413.326
		c-22.219,23.406-21.25,60.406,2.156,82.625s60.391,21.25,82.609-2.156L224.154,376.67c16.813-17.719,6.453-30.016,13.797-39.484
		c1.5-1.953,2.875-3.297,4.25-4.313c-21.031-21.531-41.156-42.125-58.578-59.922C182.889,275.42,181.217,277.686,178.092,280.373z" />
            </svg>
            <span>GitHub Pages Optimised Build</span>
        </p>

        <!-- Primary Navigation -->
        <div id="primary-navigation" class="primary-navigation">
            <div class="hamburger-button-wrapper">
                <p>Menu</p>
                <button class="hamburger-button" id="hamburger-button" aria-controls="site-navigation"
                    aria-expanded="false">
                    <span id="btn-txt" class="visually-hidden">Expand menu</span>
                    <svg class="lines" viewBox="0 0 100 100">
                        <rect class="line top" y="28" x="10" rx="5"></rect>
                        <rect class="line middle" y="47" x="10" rx="5"></rect>
                        <rect class="line bottom" y="68" x="10" rx="5"></rect>
                    </svg>
                </button>
            </div>
            <nav id="site-navigation" class="menu-hidden">
                <ul>
                    <li><a href="./" aria-current="page">Description</a></li>
                    <li><a href="demo-page-1.html">JavaScript</a></li>
                    <li><a href="demo-page-2.html">Build</a></li>
                    <li><a href="demo-page-3.html">Source files</a></li>
                    <li><a href="demo-page-4.html">GitHub Pages</a></li>
                </ul>
            </nav>
        </div>
        <!-- END Primary Navigation -->

        <!-- No JS -->
        <noscript>
            <p>Certain features require JavaScript. Enable it to access all functionality.</p>
        </noscript>
    </header>

    <main class="main container">

        <div class="element container flow" id="main-content" tabindex="0">
            <h1>Description</h1>
            <picture>
                <source srcset="./img/production-line.avif" type="image/avif" />
                <img src="./img/production-line.jpg" alt="" width="584" class="production-line">
            </picture>
            <p>A GitHub Pages site built from the <code>/docs</code> folder using an
                automated front-end
                build process with
                minified HTML, CSS, and JavaScript.</p>
            <hr>
            <div class="sticky-header-text">
                <p><strong>Filler text to trigger sticky header:</strong> <i>As you scroll, the header remains in place
                        and
                        the
                        content slides beneath it.</i> Lorem, ipsum dolor sit amet consectetur adipisicing
                    elit. Ducimus molestias, fuga, velit ipsa aspernatur
                    odio temporibus ratione exercitationem praesentium tempora, corrupti assumenda placeat unde maxime
                    dignissimos quis culpa iure! Voluptate!</p>
                <p>Sed id possimus, vitae perferendis in unde corrupti non. Qui consectetur alias accusantium doloribus
                    blanditiis iusto corrupti aliquid consequuntur unde deserunt a, nostrum ut odio temporibus pariatur
                    perspiciatis officia quaerat.</p>
                <p>Voluptates molestiae quod cum laboriosam facilis iste commodi ab labore cupiditate, aut
                    exercitationem
                    iusto minus, non expedita nam, dolorem omnis dolore nostrum quas hic blanditiis sunt reiciendis
                    fugiat.
                    Ipsa, blanditiis!</p>
                <p>Natus id ipsam, saepe dolorum corporis asperiores dolores deserunt recusandae. Explicabo doloremque
                    corrupti labore tempora possimus. Facilis, iste veritatis. Sit id dignissimos iste aliquam aperiam
                    dicta
                    delectus fuga, repellat aut.</p>
                <p>Soluta animi earum quod neque qui perspiciatis, maiores blanditiis sint. Dolorum beatae nam pariatur
                    ex
                    error tenetur itaque quam, architecto, optio at, asperiores dignissimos quae accusantium praesentium
                    soluta aspernatur deleniti.</p>
            </div>
        </div>

    </main>

    <footer class="footer">
        <p>For detailed information see the <a href="https://github.com/chrisnajman/github-pages-optimised-build"
                target="_blank" rel="noopener noreferrer">
                GitHub Repository
            </a></p>
    </footer>

</body>

</html>