<!doctype html>
<html class="no-js" lang="" dir="">
<head><script>document.documentElement.className = document.documentElement.className.replace('no-js', 'js');</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="theme-color" content="#0000000">
<title></title>
<meta name="description" content="" />
<link rel="canonical" href="" />
<link rel="alternate" type="application/rss+xml" title="" href="https://jam11ty.netlify.app/feed.xml"/>
<link rel="icon" href="/static/favicon.ico" type="image/png"/>
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="apple-touch-icon" href="images/placeholder.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/placeholder.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/placeholder.png">
<link rel="apple-touch-icon" sizes="167x167" href="images/placeholder.png">
<meta property="og:site_name" content="" />
<meta property="og:title" content="" />
<meta property="og:type" content="website" />
<meta property="og:url" content="" />
<meta name="twitter:creator" content="@" />
<meta name="description" content="Jam11ty Blog" />
<meta name="twitter:description" content="Jam11ty Blog" />
<meta property="og:description" content="Jam11ty Blog" />
<meta property="og:image" content="" />
<meta name="twitter:image" content="" />
<meta property="og:image:alt" content="Page image for JAM 11TY" />
<meta name="twitter:image:alt" content="Page image for JAM 11TY" />
<link rel="preload" href="/static/font.ttf" type="font/ttf" as="font" >
<link rel="preload" href="/static/theme.css" type="text/css" as="style" >
<link rel="preload" href="/static/stylesheet.css" type="text/css" as="style">
<link rel="stylesheet" href="/static/theme.css" media="print" onload="this.media='all'">
<link rel="stylesheet" href="/static/stylesheet.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="/static/theme.css" media="all"></noscript>
<noscript><link rel="stylesheet" href="/static/stylesheet.css" media="all"></noscript>
<style>:root{--color-theme-primary:hsl(174, 100% , 50%);--color-theme-secondary:hsl(174, 100% , 36%);--color-theme-tertiary:hsl(180, 58% , 6%);--color-theme-quaternary:hsl(39, 100% , 50%);--color-theme-orange:hsl(39, 100% , 50%);--color-theme-blue:hsl(240, 100% , 50%);--color-theme-red:hsl(0, 100% , 50%);--color-theme-green:hsl(120, 100% , 25%);--color-theme-white:hsl(0, 0% , 100%);--color-theme-black:hsl(180, 27% , 2%);--color-theme-light:hsl(0, 0% , 98%);--color-theme-dark:hsl(180, 27% , 2%);--color-theme-gray:hsl(0, 0% , 50%);--color-theme-lightgray:hsl(192, 22% , 78%);--color-theme-darkgray:hsl(191, 27% , 62%);--color-theme-link:hsl(216, 100% , 37%);--color-theme-link-state:hsl(216, 100% , 45%);--color-theme-shadow:0 1px 3px rgba(0, 0, 0, 0.12),0 1px 2px rgba(235, 235, 235, 0.24);--theme-max-width:1366px;--theme-gap:1rem}[id*=section-]{padding:var(--section-padding,4rem) 0;background:var(--section-background);color:var(--section-color)}[id*=section-] *{color:var(--section-color)}</style>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "Jam11ty",
"email": "andrewric86@gmail.com",
"image": "images/logo.png",
"url": "https://jam11ty.netlify.app/"
}
</script>
<script type="module" src="/static/webComponents/esm-side-drawer.min.js"></script>
<script nomodule src="/static/webComponents/iife-side-drawer.min.js"></script>
<script type="module" src="/static/webComponents/esm-wc-menu-button.js"></script>
<style>
:root {
--color-primary: var(--color-theme-primary);
--color-secondary: var(--color-theme-secondary);
--color-tertiary: var(--color-theme-tertiary);
--color-quaternary: var(--color-theme-quaternary);
--color-orange: var(--color-theme-orange);
--color-blue: var(--color-theme-blue);
--color-red: var(--color-theme-red);
--color-green: var(--color-theme-green);
--color-white: var(--color-theme-white);
--color-black: var(--color-theme-black);
--color-light: var(--color-theme-light);
--color-dark: var(--color-theme-dark);
--color-gray: var(--color-theme-gray);
--color-lightgray: var(--color-theme-lightgray);
--color-darkgray: var(--color-theme-darkgray);
--color-link: var(--color-theme-link);
--color-link-state: var(--color-theme-link-state);
--color-shadow: var(--color-theme-shadow);
--max-width: var(--theme-max-width);
--gap: var(--theme-gap);
}
</style></head>
<body id="template-jam11ty-blog">
<a class="visually-hidden" href="#main" title="Skip to content">Skip To Content </a>
<style>
#navbar {
--navbar-padding: 16px;
--navbar-background: black;
--navbar-text-color: white;
--navbar-link-color: #FFF;
--nav-background: black;
--nav-max-width: ;
--nav-justify-content: space-between;
--nav-padding: 16px;
--nav-link-color: white;
--nav-menu-link-color: ;
--nav-menu-link-fontSize: ;
--nav-menu-link-fontWeight: ;
--nav-menu-gap: ;
--nav-menu-primary-align: ;
--nav-menu-secondary-align: ;
--nav-menu-tertiary-align: ;
width:100%;
background: var(--nav-background);
padding: var(--navbar-padding) 0;
background: var(--navbar-background) ;
}
#navbar * {
color: var(--navbar-text-color);
}
#navbar a {
color: var(--nav bar-link-color);
}
#navbar .navbar_wrapper {
margin:0 auto;
width:100%;
max-width: var(--theme-max-width, var(--nav-max-width));
justify-content:var(--nav-justify-content, flex-end);
display:flex;
align-items:center;
flex: 1;
padding: var(--nav-padding) 0;
}
#navbar .logo {
flex: 1 64px auto;
}
#navbar .logo > h1 {
margin: 0;
padding: 0;
font-size: 16px;
color: white;
white-space: nowrap;
}
#navbar .menuList {
display: flex;
align-items: center;
gap: 1rem;
flex: 2;
}
#navbar .menuList ul {
width:100%;
display:flex;
align-items:center;
margin:0;
padding:0;
gap:var(--nav-menu-gap, 8px);
}
#navbar .menuList ul:nth-child(1) {
justify-content:var(--nav-menu-primary-align, flex-end);
}
#navbar .menuList ul:nth-child(2) {
justify-content:var(--nav-menu-secondary-align, flex-end);
}
#navbar .menuList ul:nth-child(3) {
justify-content:var(--nav-menu-tertiary-align, flex-end);
}
#navbar .menuList a {
color: var(--nav-menu-link-color, #fff);
font-size: var(--nav-menu-link-fontSize, 19px);
font-weight: var(--nav-menu-link-fontWeight, 600);
}
#navbar .menuList {
display: none;
}
@media(min-width: 768px) {
#navbar .hamburger {
display: none;
}
#navbar .menuList {
display: block;
}
}
</style>
<nav id="navbar" role="navigation" aria-label="header"
style="--nav-background: black;--nav-text-color: white; --nav-link-color: #FFF; --nav-padding: 16px;
"
>
<ul class="navbar_wrapper">
<li class="logo">
<h1>
<a href="/">
<span> JAM 11TY </span>
<a>
</h1>
</li>
<li class="menuList">
<ul class="menu-1">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/blog">Blog</a>
</li>
<li>
<a href="/">Buy Now</a>
</li>
</ul>
</li>
<li class="hamburger">
<button id="toggle" class="toggler" onclick="drawer.toggle()" aria-haspopup="true" aria-expanded="false">☰</button>
</li>
</ul>
</nav>
<eleventy-drawer id="drawer" ontoggle="state.textContent=event.open?'open':'closed'">
<div class="drawer__header">
<span>JAM 11TY</span>
</div>
<nav class="drawer__menu">
<ul class="menu-1">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/blog">Blog</a>
</li>
<li>
<a href="/">Buy Now</a>
</li>
</ul>
</nav>
</eleventy-drawer>
<script>
let template;
function html(statics) {
if (!template) template = document.createElement("template");
template.innerHTML = statics.join("");
const frag = document.createDocumentFragment();
let child = (template.content || template).firstElementChild;
while (child) {
const next = child.nextElementSibling;
frag.appendChild(child);
child = next;
}
return () => frag.cloneNode(true);
}
const TEMPLATE = html`
<aside><slot name="header"></slot><slot></slot></aside>
<div><slot name="backdrop"></slot></div>
<style>
:host {
touch-action: none;
overflow: visible;
--width: 200px;
--max-width: 100;
--background: #eee;
--backdrop: rgba(0, 0, 0, 0.5);
}
:host > div {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
opacity: var(--percent, 0);
background: var(--backdrop);
transition: opacity 300ms ease;
pointer-events: none;
z-index: 999;
}
:host > aside {
position: fixed;
left: calc(-1 * var(--width, 200px));
top: 0;
width: var(--width, 200px);
max-width: calc(1vw * var(--max-width, 100));
height: 100vh;
background: var(--background, #fff);
transition: transform 200ms cubic-bezier(0, 0, 0.5, 1);
z-index: 1000;
transform: translateX(var(--tf-x, 0));
}
:host([align="right"]) > aside {
left: auto;
right: 0;
}
:host([align="bottom"]) > aside {
bottom: 0;
top: auto;
}
:host([align*="to"]) > aside {
height: var(--width, 200px);
max-height: calc(1vh * var(--max-width, 100));
max-width: none;
width: 100vw;
}
:host([open]) > aside {
transform: translateX(var(--tf-x, var(--width, 200px)));
}
:host([open]) > div {
pointer-events: auto;
opacity: 1;
}
</style>
`;
class eleventyDrawer extends HTMLElement {
constructor() {
super();
this.animating = false;
const shadow = this.attachShadow({ mode: "open" });
shadow.appendChild(TEMPLATE());
const drawer = shadow.firstChild;
const done = () => {
this.animating = false;
const evt = new Event("toggle");
// @todo: worth just going with .detail here?
evt.open = evt.detail = this.open;
console.log(evt.open);
this.dispatchEvent(evt);
};
drawer.addEventListener("transitionend", (e) => {
if (e.target === drawer) done();
});
this.addEventListener("click", (e) => {
// ignore clicks generated from swipe dismissal
if (lastDragEnd && Date.now() - lastDragEnd < 50) return;
let child = e.target;
let autoclose = this.autoclose;
while (child && child !== this) {
if (child.hasAttribute("autoclose")) {
autoclose = child.getAttribute("autoclose") !== "false";
}
child = child.parentNode;
}
if (autoclose) {
this._closeTimer = setTimeout(this.close.bind(this));
}
});
const coords = (e) => ({ id: e.pointerId, x: e.pageX, y: e.pageY });
let events = [];
let down;
let start;
let prev;
let startX;
let startUserSelect;
let startTouchAction;
let preventClick;
let lastDragEnd;
const preventDefault = (e) => {
e.preventDefault();
e.stopPropagation();
};
this.addEventListener("dragstart", preventDefault);
addEventListener("pointerdown", (e) => {
if (e.button) return;
down = coords(e);
start = null;
});
addEventListener("pointermove", (e) => {
if (!down) return;
const cur = coords(e);
if (cur.id !== down.id) return;
if (!start) {
const delta = cur.x - down.x;
if (Math.abs(delta) < 5) return;
if (Math.abs(cur.y - down.y) >= 6) return cancel();
if (this.open) preventClick = true;
if (this.open && delta > 0) return;
if (!this.open && delta < 0) return;
start = cur;
// @todo: Y
const transform = getComputedStyle(drawer).transform;
const tf = transform.match(/([^,]+),([^,]+)\)/);
startX = (tf && parseFloat(tf[1])) || 0;
drawer.style.transition = "none";
backdrop.style.transition = "none";
if (drawer.setPointerCapture) {
drawer.setPointerCapture(e.pointerId);
}
startUserSelect = document.body.style.userSelect;
startTouchAction = document.body.style.touchAction;
document.body.style.userSelect = document.body.style.touchAction =
"none";
}
if (events.push(cur) > 5) events.shift(events);
let x = startX + cur.x - start.x;
x = Math.max(0, Math.min(x, this.width || 200));
drawer.style.setProperty("--tf-x", x + "px");
this.style.setProperty("--percent", x / (this.width || 200));
prev = cur;
preventDefault(e);
});
addEventListener("pointerup", (e) => {
if (!down) return;
if (start) {
drawer.style.setProperty("--tf-x", "");
this.style.setProperty("--percent", "");
drawer.style.transition = backdrop.style.transition = "";
document.body.style.userSelect = startUserSelect;
document.body.style.touchAction = startTouchAction;
}
if (start || preventClick) {
lastDragEnd = Date.now();
}
if (prev && events.length > 4) {
const delta = prev.x - events[0].x;
this.open = delta > 0;
// if there isn't going to be an animation to done state, trigger it now:
let x = startX + prev.x - start.x;
if (x <= 0 || x >= (this.width || 200)) done();
preventDefault(e);
}
cancel();
});
const cancel = () => {
events.length = 0;
down =
prev =
start =
startX =
startUserSelect =
startTouchAction =
preventClick =
null;
};
const backdrop = drawer.nextSibling;
backdrop.addEventListener("click", this.close.bind(this));
}
connectedCallback() {}
get open() {
return this.hasAttribute("open");
}
set open(value) {
this.animating = true;
clearTimeout(this._closeTimer);
if (value) this.setAttribute("open", "");
else this.removeAttribute("open");
}
close() {
this.open = false;
}
toggle(forceState) {
if (typeof forceState !== "boolean") {
forceState = !this.isOpen;
}
this.open = forceState;
}
get autoclose() {
return this.hasAttribute("autoclose");
}
set autoclose(value) {
if (value) this.setAttribute("autoclose", "");
else this.removeAttribute("autoclose");
}
}
customElements.define("eleventy-drawer", eleventyDrawer);
</script>
<style>
#header {
--header-padding: 2rem;
--header-background: #000000;
--header-text-color: #FFF;
--header-link-color: #FFF;
padding: var(--header-padding) 0;
background: var(--header-background) ;
}
#header * {
color: var(--header-text-color);
}
#header a {
color: var(--header-link-color);
}
</style>
<header id="header" role="banner" aria-label="header"
style="--header-background: #000000;--header-text-color: #FFF; --header-link-color: #FFF; --header-padding: 2rem;
"
>
<ul class="hero grid__wrapper" style="--column-count: repeat(1, 1fr)">
<li class="grid__column">
<h1> Jam11ty Blog </h1>
</li>
</ul>
</header>
<main id="main" role="main" tabindex="-1"><section class="section">
<ul class="grid">
<li>LANDING PAGE</li>
</ul>
</section>
</main>
<style>
#footer {
--footer-padding: 2rem;
--footer-background: #000000;
--footer-text-color: #FFF;
--footer-link-color: #FFF;
padding: var(--footer-padding) 0;
background: var(--footer-background) ;
}
#footer * {
color: var(--footer-text-color);
}
#footer a {
color: var(--footer-link-color);
}
.footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #ddd;
}
.footer__bottom ul {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1rem;
width: 100%;
}
</style>
<footer id="footer" role="contentinfo" aria-label="footer"
style="--footer-background: #000000;--footer-text-color: #FFF; --footer-link-color: #FFF; --footer-padding: 2rem;
">
<ul class="grid__wrapper footer__top" style="--column-count: repeat(4, 1fr); padding: 3rem 0;">
<li>
<ul><li>
<a href="/" aria-label="Home"> Home</a>
</li><li>
<a href="/blog" aria-label="Blog"> Blog</a>
</li><li>
<a href="/" aria-label="Buy Now"> Buy Now</a>
</li></ul>
</li>
<li>
<ul><li>
<a href="/blog" aria-label="Blog"> Blog</a>
</li><li>
<a href="/tutorials" aria-label="Tutorials"> Tutorials</a>
</li></ul>
</li>
<li>
<ul><li>
<a href="/faq" aria-label="FAQ"> FAQ</a>
</li><li>
<a href="/Return-policy" aria-label="Return Policy"> Return Policy</a>
</li></ul>
</li>
<li>
<ul><li>
<a href="facebook.com" aria-label="Facebook"> Facebook</a>
</li><li>
<a href="twitter.com" aria-label="Twitter"> Twitter</a>
</li></ul>
</li>
</ul>
<ul class="grid__wrapper footer__bottom" style="--column-count: 1fr 2fr">
<li>
<div class="copyright">
<small>
<span>©<span id="currentYear"></span></span>
<span>Copyright JAM 11TY. MIT License.</span>
</small>
</div>
<script>document.getElementById("currentYear").innerHTML = new Date().getFullYear();</script>
</li>
<li>
<ul><li>
<a href="/term-of-use" aria-label="Term Of Use"> Term Of Use</a>
</li><li>
<a href="/privacy-policy" aria-label="Privacy Policy"> Privacy Policy</a>
</li></ul>
</li>
</ul>
</footer>
<script src="/static/scripts.js" defer></script>
<script></script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
});
}
</script>
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
<script>
if (window.netlifyIdentity) {
window.netlifyIdentity.on("init", user => {
if (!user) {
window.netlifyIdentity.on("login", () => {
document.location.href = "/admin/";
});
}
});
}
</script>
<ul class="accesibilityList">
<li>
<a class="refresh" title="Refresh" href="/jam11ty-blog">Refresh</a>
</li>
<li>
<a class="scrollup" title="Scroll Up" href="#" >Scroll Up </a>
</li>
</ul>
</body>
</html>