nav components

main
Jay Hankins 2023-05-02 22:33:35 -04:00
parent ae8670763e
commit 3988eba2b9
5 changed files with 208 additions and 4 deletions

View File

@ -0,0 +1,177 @@
<style webc:scoped>
ol,
ul {
padding: 0;
margin: 0;
}
/* Main menu */
.no-js .menu__btn {
display: none;
}
.menu__btn {
display: block;
width: 100%;
padding: 0;
font: inherit;
color: #fff;
background: #2a2a2a;
border: 0;
outline: 0;
}
.menu__btn-title {
position: relative;
display: block;
padding: 10px 15px;
padding: .625rem .9375rem;
font-weight: 700;
text-align: right;
text-transform: uppercase;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
:focus>.menu__btn-title {
box-shadow: inset 0 0 1px 3px #e22d30;
}
button:not(:-moz-focusring):focus>.menu__btn-title {
box-shadow: none;
}
.menu__btn:focus,
.menu__btn-title:focus {
outline: 0;
}
.js .menu__btn--active {
color: #e22d30;
}
.menu__list {
list-style: none;
background: #2a2a2a;
}
.menu__item:hover {
background: #e22d30;
}
.menu__item:first-child {
border: 0;
}
.menu__item--active {
background: #e22d30;
}
.menu__link {
display: block;
padding: 10px 15px;
padding: .625rem .9375rem;
font-weight: 700;
color: #fff;
text-transform: uppercase;
}
.menu__link:hover {
color: #fff;
}
.js .menu__list {
position: absolute;
z-index: 1;
width: 100%;
visibility: hidden;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top left;
transform-origin: top left;
}
.js .menu__list--active {
visibility: visible;
border-top: 1px solid rgba(255, 255, 255, .1);
border-bottom: 1px solid rgba(255, 255, 255, .1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
.menu__list--transition {
transition: visibility .15s ease, transform .15s ease, -webkit-transform .15s ease;
}
@media screen and (min-width: 767px) {
.menu {
border-bottom: 5px solid #e22d30;
}
.menu__btn {
display: none;
}
.menu__list,
.js .menu__list {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
visibility: visible;
border: 0;
-webkit-transform: none;
transform: none;
}
.menu__item {
border-left: 1px solid rgba(255, 255, 255, .1);
}
}
</style>
<nav class="menu">
<ul class="menu__list">
<li class="menu__item">
<a class="menu__link" href="/docs/getting-started/">
<span class="menu__text">Getting started</span>
</a>
</li>
<li class="menu__item">
<a class="menu__link" href="/docs/customization/">
<span class="menu__text">Customization</span>
</a>
</li>
<li class="menu__item">
<a class="menu__link" href="/docs/faq/">
<span class="menu__text">FAQ</span>
</a>
</li>
<li class="menu__item">
<a class="menu__link" href="/post/basic-elements/">
<span class="menu__text">Basic Elements</span>
</a>
</li>
<li class="menu__item">
<a class="menu__link" href="/about/">
<span class="menu__text">About</span>
</a>
</li>
</ul>
</nav>

View File

@ -0,0 +1 @@
<p>side-bar</p>

View File

@ -0,0 +1 @@
<p>site-footer</p>

View File

@ -0,0 +1,2 @@
<h1>site-header</h1>
<h2>subtitle!</h2>

View File

@ -1,6 +1,8 @@
<!doctype html> <!doctype html>
<html :lang="en-us"> <html :lang="en-us">
<!-- Hello world! -->
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -8,21 +10,42 @@
<!--- Uncomment this if you'd like folks to know that you used Eleventy to build your site! ---> <!--- Uncomment this if you'd like folks to know that you used Eleventy to build your site! --->
<meta name="generator" :content="eleventy.generator"> <meta name="generator" :content="eleventy.generator">
<!--- These will be picked up and bundled by eleventy --->
<link rel="stylesheet" href="../vars.css">
<style>
body {
margin: 0;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 14px;
font-size: .875rem;
line-height: 1.6;
word-wrap: break-word;
background: #f7f7f7;
-webkit-font-smoothing: antialiased;
}
.container {
width:95%;
margin: auto;
background: white;
}
</style>
<!--- Build and embed the bundles needed for each page ---> <!--- Build and embed the bundles needed for each page --->
<style @raw="getBundle('css')" webc:keep></style> <style @raw="getBundle('css')" webc:keep></style>
<script @raw="getBundle('js')" webc:keep></script> <script @raw="getBundle('js')" webc:keep></script>
</head> </head>
<body> <body>
<main id="skip"> <main id="skip">
<div class="container"> <div class="container">
<site-header></site-header>
<nav-bar></nav-bar>
<template @raw="content" webc:nokeep></template> <template @raw="content" webc:nokeep></template>
<site-footer></site-footer>
</div> </div>
</main> </main>
<footer></footer>
</body> </body>
</html> </html>