<!doctype html>
<html lang="en_EN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title><%= htmlWebpackPlugin.options.title %> | Crispy CSS</title>
    <meta name="description" content="<%= htmlWebpackPlugin.options.description %>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
</head>

<body class="page">
    <header class="header header--fixed background-color-info">
		<div class="container">
			<div class="grid align-center">
				<div class="col-10 col-sm-3">
                    <a href="/" class="text-color-white text-bold">
                        <svg class="icon text-size-mega" alt="Crispy CSS">
                            <use xlink:href="symbol-defs.svg#icon-logo" />
                        </svg>
                        Crispy CSS
                    </a>
                </div>
                <div class="col-2 hide-sm text-right">
                    <button id="nav-button" class="button button--transparent text-size-medium">
                        <svg class="icon" alt="Hamburger">
                            <use xlink:href="symbol-defs.svg#icon-hamburger" />
                        </svg>
                    </button>
                </div>
                <div id="nav" class="col-sm-9 hide show-sm">
                    <nav class="group text-right show">
                        <ul class="group">
                            <li class="group__item">
                                <a href="getting-started.html">
                                    Getting started!
                                </a>
                            </li>
                            <li class="group__item">
                                <a href="core.html">
                                    Core
                                </a>
                            </li>
                            <li class="group__item">
                                <a href="components.html">
                                    Components
                                </a>
                            </li>
                            <li class="group__item">
                                <a href="helpers.html">
                                    Helpers
                                </a>
                            </li>
                            <li class="group__item">
                                <a href="mixins.html">
                                    Mixins
                                </a>
                            </li>
                            <li class="group__item">
                                <a href="functions.html">
                                    Functions
                                </a>
                            </li>
                        </ul>
                    </nav>
				</div>
			</div>
		</div>
	</header>

    <main class="container main">
        <div class="grid">
            <div class="col-12">
                <header class="main__header">
                    <h1 class="main__title padding-bottom-2 text-center">
                        <%= htmlWebpackPlugin.options.title %>
                    </h1>
                </header>

                <%= htmlWebpackPlugin.options.body %>
            </div>
        </div>
    </main>

    <%= htmlWebpackPlugin.options.footer %>

    <script src="script.js"></script>
</body>
</html>