hyperbook 0.5.6 → 0.6.0

package/dist/templates/default/.hyperbook/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "hyperbook-simple-template",
+  "version": "0.7.0",
+  "private": true,
+  "dependencies": {
+    "@hyperbook/element-alert": "0.1.7",
+    "@hyperbook/element-bitflow": "0.1.8",
+    "@hyperbook/element-bookmarks": "0.2.2",
+    "@hyperbook/element-collapsible": "0.2.3",
+    "@hyperbook/element-dl": "0.1.7",
+    "@hyperbook/element-excalidraw": "0.2.2",
+    "@hyperbook/element-mermaid": "0.1.7",
+    "@hyperbook/element-protect": "0.2.2",
+    "@hyperbook/element-qr": "0.1.8",
+    "@hyperbook/element-struktog": "0.1.7",
+    "@hyperbook/element-tabs": "0.1.8",
+    "@hyperbook/element-term": "0.1.7",
+    "@hyperbook/element-youtube": "0.1.7",
+    "@hyperbook/markdown": "0.3.2",
+    "@hyperbook/provider": "0.1.7",
+    "@hyperbook/store": "0.1.2",
+    "@hyperbook/styles": "0.1.7",
+    "@szhsin/react-menu": "3.2.0",
+    "classnames": "2.3.2",
+    "gray-matter": "4.0.3",
+    "next": "12.3.1",
+    "react": "18.2.0",
+    "react-collapsed": "3.4.0",
+    "react-dom": "18.2.0",
+    "react-icons": "4.6.0",
+    "react-redux": "8.0.4",
+    "redux": "4.2.0",
+    "redux-persist": "6.0.0"
+  },
+  "devDependencies": {
+    "@hyperbook/next-watch": "0.1.0"
+  },
+  "scripts": {
+    "next:dev": "next-hyperbook-watch",
+    "next:build": "next build && next export"
+  }
+}

package/dist/templates/default/.hyperbook/src/colors.css

@@ -0,0 +1,187 @@
+:root {
+  --internal-color-error: #d26466;
+}
+
+html,
+body {
+  background: var(--color-background);
+  color: var(--color-text);
+}
+
+a {
+  color: var(--color-brand);
+}
+
+.sidebar,
+#mobile-sidebar {
+  background: var(--color-nav);
+  border-right-color: var(--color-nav-border);
+}
+
+#toc-sidebar {
+  background: var(--color-nav);
+  border-left-color: var(--color-nav-border);
+}
+
+.sidebar > .author,
+#mobile-sidebar > .author {
+  color: var(--color-author-color);
+  background: var(--color-author-background);
+}
+
+.sidebar > .author:hover,
+#mobile-sidebar > .author:hover {
+  color: var(--color-brand);
+}
+
+/* Three bars for burger menu */
+.toggle > .bar1,
+.toggle > .bar2,
+.toggle > .bar3 {
+  background-color: var(--color-brand-text);
+}
+
+.inverted .toggle > .bar1,
+.inverted .toggle > .bar2,
+.inverted .toggle > .bar3 {
+  background-color: var(--color-brand);
+}
+
+.toc-toggle > .bar1,
+.toc-toggle > .bar2,
+.toc-toggle > .bar3,
+.toc-toggle > .bar4 {
+  background-color: var(--color-text);
+}
+
+.toc-toggle {
+  background: var(--color-background);
+  border-color: var(--color-nav-border);
+}
+
+header {
+  background: var(--color-brand);
+}
+
+header.inverted {
+  background: var(--color-brand-text);
+}
+
+.branding {
+  color: var(--color-brand-text);
+}
+
+header.inverted > .branding {
+  color: var(--color-brand);
+}
+
+.meta {
+  border-top-color: var(--color-spacer);
+}
+
+.section > .name {
+  color: var(--color-text);
+  border-color: var(--color-spacer);
+}
+
+.section .name.empty {
+  color: var(--color-text-deactivated);
+}
+
+.section > .name:hover {
+  background: var(--color-spacer);
+}
+
+.section > .name.empty:hover {
+  background: none;
+}
+
+.section > .name.active {
+  background: var(--color-background);
+  color: var(--color-brand);
+}
+
+.page {
+  color: var(--color-text);
+}
+
+.page:hover {
+  background: var(--color-spacer);
+}
+
+.page.active {
+  background: var(--color-background);
+  color: var(--color-brand);
+}
+
+.section > .links {
+  border-left-color: var(--color-spacer);
+}
+
+a.jump {
+  border-color: var(--color-brand);
+}
+
+a.jump:hover {
+  background: var(--color-nav);
+}
+
+a.jump {
+  text-decoration: none;
+  flex: 1;
+  text-align: center;
+  border-style: solid;
+  border-width: 1px;
+  padding: 8px 16px;
+  width: 100%;
+  border-radius: 8px;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 1px 2px;
+}
+
+a.jump.next {
+  margin-left: 8px;
+}
+
+a.jump.next::after {
+  content: " →";
+}
+
+a.jump.previous {
+  margin-right: 8px;
+}
+
+a.jump.previous::before {
+  content: "← ";
+}
+
+@media screen and (max-width: 800px) {
+  .jump-container {
+    flex-direction: column;
+  }
+
+  a.jump.next {
+    margin-left: 0px;
+    margin-top: 16px;
+  }
+
+  a.jump.previous {
+    margin-right: 0px;
+    margin-top: 16px;
+  }
+}
+
+.drawer {
+  background: #fff;
+}
+
+.border {
+  border-color: var(--color-spacer);
+}
+
+.loading {
+  background: var(--color-nav);
+}
+
+.glossary .terms {
+  border-left-color: var(--color-spacer);
+}

package/dist/templates/default/.hyperbook/src/components/Drawer.js

@@ -0,0 +1 @@
+import{useRef as u,useEffect as a}from"react";import{createPortal as m}from"react-dom";import l from"classnames";import{useMountTransition as v}from"../utils/useMountTransition";function w(){const e=document.createElement("div");return e.setAttribute("id","drawer-root"),e}const y=({isOpen:e,children:i,onClose:n,position:s="left",removeWhenClosed:f=!0})=>{const r=u(),o=u(),d=v(e,300);return a(()=>{o.current=document.getElementById("drawer-root")||w(),r.current=document.querySelector("body"),r.current.appendChild(o.current);const t=o.current,c=r.current;return()=>{t.remove(),c.style.overflow=""}},[]),a(()=>{(()=>{e?r.current.style.overflow="hidden":r.current.style.overflow=""})()},[e]),a(()=>{const t=c=>{c.key==="Escape"&&n()};return e&&window.addEventListener("keyup",t),()=>{window.removeEventListener("keyup",t)}},[e,n]),!d&&f&&!e?null:m(<div aria-hidden={e?"false":"true"}className={l("drawer-container",{open:e,in:d})}><div className={l("drawer",s)}role="dialog">{i}</div><div className="backdrop"onClick={n}/></div>,o.current)};var g=y;export{g as default};

package/dist/templates/default/.hyperbook/src/components/Layout.js

@@ -0,0 +1 @@
+import{useLink as C}from"@hyperbook/provider";import Y from"next/head";import{Fragment as L,useState as P}from"react";import{getHyperbook as B}from"../utils/hyperbook";import T from"./Drawer";import{Links as H}from"./Links";import{Navigation as D}from"./Navigation";import{Toc as $}from"./Toc";const e=B(),F=o=>{const N=C();let a,t;switch(o.toLowerCase()){case"cc0":{a="https://creativecommons.org/publicdomain/zero/1.0/",t="CC0";break}case"cc-by":{a="https://creativecommons.org/licenses/by/4.0",t="CC BY";break}case"cc-by-sa":{a="https://creativecommons.org/licenses/by-sa/4.0",t="CC BY-SA";break}case"cc-by-nd":{a="https://creativecommons.org/licenses/by-nd/4.0",t="CC BY-ND";break}case"cc-by-nc":{a="https://creativecommons.org/licenses/by-nc/4.0",t="CC BY-NC";break}case"cc-by-nc-sa":{a="https://creativecommons.org/licenses/by-nc-sa/4.0",t="CC BY-NC-SA";break}case"cc-by-nc-nd":{a="https://creativecommons.org/licenses/by-nc-nd/4.0",t="CC BY-NC-ND";break}}return a?<N href={a}rel="license">Licensed under {t}</N>:o},S=o=>{const{basePath:N}=e;return process.env.NODE_ENV!=="production"&&N&&o.startsWith("/")?N.endsWith("/")?N.slice(0,-1)+o:N+o:o};function K({toc:o,navigation:N,page:a,children:t}){const O=C(),[y,k]=P(!1),[u,f]=P(!1);return<L><Y><title>{`${a.name} - ${e.name}`}</title><meta property="og:title"content={`${a.name} - ${e.name}`}key="title"/>{e.description&&<><meta name="description"content={e.description}/><meta name="og:description"content={e.description}/></>}{a.description&&<><meta name="description"content={a.description}/><meta name="og:description"content={a.description}/></>}{a.keywords&&<meta name="keywords"content={a.keywords.join(",")}/>}</Y><div className="main-grid"><header className={e?.colors?.inverted?"inverted":void 0}><div className="mobile-nav"><button aria-label="Nav Toggle"className={y?"toggle change":"toggle"}onClick={()=>k(!y)}><div className="bar1"/><div className="bar2"/><div className="bar3"/></button><T isOpen={y}onClose={()=>k(!1)}position="left"><div id="mobile-sidebar"><D{...N}/>{e.author?<a className="author"href={e.author.url}>{e.author.name}</a>:<a className="author"href="https://hyperbook.openpatch.org">Powered by <b>Hyperbook</b></a>}</div></T></div><O className="branding"href="/">{e.logo&&<div className="logo"><img alt="Logo"src={S(e.logo)}/></div>}<div className="name">{e.name}</div></O>{e.links&&<H links={e.links}/>}</header><div className="sidebar"><D{...N}/><a className="author"href="https://hyperbook.openpatch.org">Powered by <b>Hyperbook</b></a></div>{o&&<L><button className={u?"toc-toggle open":"toc-toggle"}onClick={()=>f(!u)}title="Table of Contents"><div className="bar1"/><div className="bar2"/><div className="bar3"/><div className="bar4"/></button><T isOpen={u}onClose={()=>f(!1)}position="right"><div id="toc-sidebar"><${...o}/></div></T></L>}<main>{t}<div className="meta">{a.repo&&<a className="edit-github"href={a.repo}>{"\u270E GitHub"}</a>}{e.vercel&&<a className="vercel"href={"https://vercel.com/?utm_source=openpatch&utm_campaign=oss"}><img src="https://www.openpatch.org/static/powered-by-vercel-black.svg"width={212}height={44}/></a>}<span className="copyright">{e.license?F(e.license):`\xA9 Copyright ${new Date().getFullYear()}`}{e.author&&<> by <a href={e.author.url}>{e.author.name}</a></>}.</span></div></main></div></L>}export{K as Layout};

package/dist/templates/default/.hyperbook/src/components/Links.js

@@ -0,0 +1 @@
+import{useLink as B}from"@hyperbook/provider";import{Menu as F,MenuItem as N,SubMenu as I,MenuButton as H}from"@szhsin/react-menu";import{Fragment as R,useRef as W}from"react";import{useOnScreen as S}from"../utils/useOnScreen";const M=({label:n,icon:e})=><R>{e&&<div className="icon">{e}</div>}<div className="label">{n}</div></R>,D=({label:n,links:e,icon:i})=><I label={<M label={n}icon={i}/>}>{e.map((L,s)=><P key={s}{...L}/>)}</I>,E=({label:n,icon:e,href:i})=><N href={i}><M label={n}icon={e}/></N>,P=n=>"links"in n?<D{...n}/>:<E{...n}/>,J=({label:n,href:e,icon:i})=>{const L=B();return<L className="szh-menu-link"href={e}><M label={n}icon={i}/></L>},U=({links:n})=>{const e=W(),i=W(),L=S(e,i);return<div className="custom-links"ref={i}>{L?<div className="container"ref={e}>{n.map((s,p)=>"links"in s?<F key={p}menuButton={<H><M{...s}/></H>}transition>{s.links?.map((y,C)=><P{...y}key={C}/>)}</F>:<J key={p}{...s}/>)}</div>:<F menuButton={<H className="icon"><svg focusable="false"aria-hidden="true"viewBox="0 0 24 24"data-testid="MoreVertIcon"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg></H>}transition>{n?.map((s,p)=><P{...s}key={p}/>)}</F>}</div>};export{U as Links};

package/dist/templates/default/.hyperbook/src/components/Navigation.js

@@ -0,0 +1 @@
+import P from"next/link";import A from"react-collapsed";const N=({name:t,href:a,current:s})=><li><P href={a}><a className={s?.href===a?"page active":"page"}>{t}</a></P></li>,S=({isEmpty:t,virtual:a,name:s,href:e,pages:n,sections:b,expanded:x,current:o})=>{const C=o?.href.startsWith(e),{getCollapseProps:L,getToggleProps:j,isExpanded:r}=A({defaultExpanded:C||x});return<div className={a?"virtual-section":"section"}><div className={["name",a||t?"empty":"",o?.href===e?"active":""].join(" ")}>{a?null:t?<span className="label">{s}</span>:<P href={e}><a className="label">{s}</a></P>}{a?null:<button className="toggle"{...j()}aria-label={r?"Close":"Open"}>{r?"\u2796":"\u2795"}</button>}</div><div className="links"{...a?[]:L()}>{n.length>0&&<ul className="pages">{n.filter(i=>!i.hide).map(i=><N key={i.href}{...i}current={o}/>)}</ul>}{b.filter(i=>!i.hide).map(i=><S key={i.href}{...i}current={o}/>)}</div></div>},z=({pages:t,sections:a,current:s})=><nav><ul>{t.filter(e=>!e.hide).map(e=><N key={e.href}{...e}current={s}/>)}</ul>{a.filter(e=>!e.hide).map(e=><S key={e.href}{...e}current={s}/>)}</nav>;export{z as Navigation};

package/dist/templates/default/.hyperbook/src/components/Toc.js

@@ -0,0 +1 @@
+const r=({headings:l})=><nav className="toc"><ul>{l.map((a,o)=><li key={o}className={`level-${a.level}`}><a href={`#${a.anchor}`}>{a.label}</a></li>)}</ul></nav>;export{r as Toc};

package/dist/templates/default/.hyperbook/src/pages/[[...page]].js

@@ -0,0 +1 @@
+import h from"fs";import x from"gray-matter";import r from"path";import{Layout as N}from"../components/Layout";import{getAllFiles as S}from"../utils/files";import{getNavigation as w}from"../utils/navigation";import{getToc as b}from"../utils/toc";import{Markdown as L}from"@hyperbook/markdown";import{useActivePageId as F,useLink as G}from"@hyperbook/provider";import{getHyperbook as I}from"../utils/hyperbook";import{Fragment as T}from"react";const A=I();function B({markdown:a,navigation:e,toc:o}){const t=e.current,P=G();return F(),<T><N navigation={e}page={t}toc={t.toc==!1?null:o}><article><L children={a}/></article><div className="jump-container">{e.previous?<P className="jump previous"href={e.previous.href}>{e.previous.name}</P>:<div className="flex"/>}{e.next?<P className="jump next"href={e.next.href}>{e.next.name}</P>:<div className="flex"/>}</div></N></T>}const Y=async({params:a})=>{let e,o=r.join(process.env.root??process.cwd(),"book"),t="/";a.page&&(o=r.join(o,...a.page),t="/"+r.join(...a.page));try{e=h.readFileSync(o+".md")}catch{e=h.readFileSync(r.join(o,"index")+".md")}const{content:P,data:k}=x(e),v=await w(t);return{props:{locale:k?.lang||A.language,markdown:P,toc:b(P),navigation:v}}},Z=async()=>({paths:S(r.join(process.env.root??process.cwd(),"book")).map(o=>{const t=r.relative(r.join(process.env.root??process.cwd(),"book"),o).replace(/\.mdx?$/,"").split("/");return t[t.length-1]==="index"&&t.pop(),{params:{page:t}}}),fallback:!1});export{B as default,Z as getStaticPaths,Y as getStaticProps};

package/dist/templates/default/.hyperbook/src/pages/_app.js

@@ -0,0 +1 @@
+import"../reset.css";import"../styles.css";import"../colors.css";import"../szh-menu.css";import"@hyperbook/markdown/katex.css";import"@hyperbook/markdown/index.css";import{Provider as O}from"@hyperbook/provider";import T from"@hyperbook/element-tabs";import"@hyperbook/element-tabs/index.css";import b from"@hyperbook/element-alert";import"@hyperbook/element-alert/index.css";import w from"@hyperbook/element-term";import"@hyperbook/element-term/index.css";import x from"@hyperbook/element-youtube";import"@hyperbook/element-youtube/index.css";import A from"@hyperbook/element-protect";import"@hyperbook/element-protect/index.css";import D from"@hyperbook/element-collapsible";import"@hyperbook/element-collapsible/index.css";import M from"@hyperbook/element-dl";import"@hyperbook/element-dl/index.css";import U from"@hyperbook/element-bookmarks";import"@hyperbook/element-bookmarks/index.css";import h from"@hyperbook/element-struktog";import"@hyperbook/element-struktog/index.css";import B from"@hyperbook/element-qr";import"@hyperbook/element-qr/index.css";import C from"@hyperbook/element-mermaid";import"@hyperbook/element-mermaid/index.css";import F from"@hyperbook/element-excalidraw";import"@hyperbook/element-excalidraw/index.css";import V from"@hyperbook/element-bitflow";import"@hyperbook/element-bitflow/index.css";import W from"next/link";import{Styles as _}from"@hyperbook/styles";import{localStorage as j}from"@hyperbook/store";import{useRouter as H}from"next/router";import{getHyperbook as I}from"../utils/hyperbook";import{useEffect as J}from"react";const Q=I(),R=({href:E,children:r,...P})=><W href={E}><a{...P}>{r}</a></W>,Y=({basePath:E})=>r=>(process.env.NODE_ENV==="production"&&E&&r.startsWith("/")&&(E.endsWith("/")?r=E.slice(0,-1)+r:r=E+r),r);function q({Component:E,pageProps:r}){const P=H();return J(()=>{document.documentElement.lang=r.locale},[r.locale]),<O Link={R}config={Q}makeUrl={Y}env={process.env.NODE_ENV==="production"?"production":"development"}elements={[T,b,w,x,D,A,M,U,h,B,C,F,V]}router={P}storage={j}loadFile={()=>async L=>fetch(L).then(N=>N.text())}saveFile={()=>async(L,N,S)=>{await fetch("/api/save",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({path:L,content:N,rootFolder:S})})}}getActivePageId={async()=>P.asPath.split("#")?.[0]||"/"}><_/><E{...r}/></O>}export{q as default};

package/dist/templates/default/.hyperbook/src/pages/_document.js

@@ -0,0 +1 @@
+import e,{Html as _,Head as D,Main as H,NextScript as A}from"next/document";class M extends e{render(){return<_ lang={this.props.__NEXT_DATA__.props.pageProps.locale}><D/><body><H/><A/></body></_>}}var h=M;export{h as default};

package/dist/templates/default/.hyperbook/src/pages/api/save.js

@@ -0,0 +1 @@
+import s from"fs/promises";import i from"path";async function o(a){var t=i.dirname(a);try{return await s.access(t),!0}catch{s.mkdir(t).then(async()=>o(t))}}const l={api:{bodyParser:{sizeLimit:"32mb"}}};async function c(a,t){process.env.NODE_ENV!=="development"&&t.status(404).json({status:"failed"});let{path:e,content:r,rootFolder:n}=a.body;n&&(e=i.join(n,e)),e=i.join(__dirname,"..","..","..","..",e);try{await o(e),await s.writeFile(e,r),t.status(202).json({status:"saved"})}catch(p){t.status(400).json(p)}}export{l as config,c as default};

package/dist/templates/default/.hyperbook/src/pages/glossary/[...term].js

@@ -0,0 +1 @@
+import e from"path";import L from"fs";import{Layout as G}from"../../components/Layout";import{getAllFiles as S}from"../../utils/files";import N from"gray-matter";import{getNavigation as $,readFile as I}from"../../utils/navigation";import{Fragment as A}from"react";import{getHyperbook as E}from"../../utils/hyperbook";import{getToc as H}from"../../utils/toc";import{useActivePageId as M,useLink as R}from"@hyperbook/provider";import{Markdown as B}from"@hyperbook/markdown";const u=E();function C({markdown:o,navigation:r,term:t,toc:s}){const P=R();return M(),<G navigation={r}page={t}toc={t?.toc===!0?s:null}><article><B children={o}/><div className="pages">{t.pages.map((a,y)=><A key={a.href}>{y>0&&", "}<P href={a.href}>{a.name}</P></A>)}</div></article></G>}const it=async({params:o})=>{let r=e.join(process.env.root??process.cwd(),"glossary");r=e.join(r,...o.term);const t="/glossary/"+e.join(...o.term),s=L.readFileSync(r+".md"),{content:P,data:a}=N(s),y=await $(t),b=S(e.join(process.env.root??process.cwd(),"book")),x=[];for(const w of b){const{content:j,data:k}=I(w),F=new RegExp(`:t\\[.*\\]\\{#${o.term}(..*)?\\}|:t\\[${o.term}\\]`);if(j.match(F)&&!k.hide&&k.name){const v=e.relative(e.join(process.env.root??process.cwd(),"book"),w).replace(/\.mdx?$/,"").split("/");v[v.length-1]==="index"&&v.pop(),x.push({...k,href:"/"+v.join("/")})}}const T={...a,pages:x};return u?.repo&&(T.repo=u.repo+t+".md"),{props:{locale:a?.lang||u.language,term:T,markdown:P,toc:H(P),navigation:y,hyperbook:u}}},ct=async()=>({paths:S("glossary").map(t=>({params:{term:e.relative("glossary",t).replace(/\.mdx?$/,"").split("/")}})),fallback:!1});export{C as default,ct as getStaticPaths,it as getStaticProps};

package/dist/templates/default/.hyperbook/src/pages/glossary/index.js

@@ -0,0 +1,2 @@
+import x from"fs";import{getAllFiles as L}from"../../utils/files";import w from"gray-matter";import S from"chalk";import{Layout as $}from"../../components/Layout";import{getNavigation as b}from"../../utils/navigation";import P from"path";import{useActivePageId as j,useLink as A}from"@hyperbook/provider";import F from"../../../hyperbook.json";function T({terms:a,navigation:o}){const G=A();return j(),<$ navigation={o}page={{name:"Glossary"}}><article className="glossary">{Object.keys(a).map(e=><div key={e}className="container"><div className="letter">{e}</div><ul className="terms">{a[e].map(r=><li key={r.href}><G className="term"href={r.href}>{r.name}</G></li>)}</ul></div>)}</article></$>}const K=async()=>{const a=L(P.join(process.env.root??process.cwd(),"glossary")),o={};for(const e of a){const r=x.readFileSync(e),{data:N}=w(r);let s=P.basename(e,".md");N.name?s=N.name:console.log(`
+${S.yellow("warn  ")}- Glossary page ${e} does not specify a name. Defaulting to the filename ${s}.`);const k=s[0].toUpperCase();o[k]||(o[k]=[]),o[k].push({name:s,href:e.replace(/\.mdx?$/,"")})}const G=await b();return{props:{locale:F.language,terms:o,navigation:G}}};export{T as default,K as getStaticProps};

package/dist/templates/default/.hyperbook/src/reset.css

@@ -0,0 +1,267 @@
+/*
+	HTML5 Reset :: style.css
+	----------------------------------------------------------
+	We have learned much from/been inspired by/taken code where offered from:
+
+	Eric Meyer					:: http://meyerweb.com
+	HTML5 Doctor				:: http://html5doctor.com
+	and the HTML5 Boilerplate	:: http://html5boilerplate.com
+
+-------------------------------------------------------------------------------*/
+
+/* Let's default this puppy out
+-------------------------------------------------------------------------------*/
+
+html,
+body,
+body div,
+span,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+abbr,
+address,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+samp,
+small,
+strong,
+sub,
+sup,
+var,
+b,
+i,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+caption,
+article,
+aside,
+figure,
+footer,
+header,
+menu,
+nav,
+section,
+time,
+mark,
+audio,
+video,
+details,
+summary {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font-weight: normal;
+  vertical-align: baseline;
+  background: transparent;
+}
+
+main,
+article,
+aside,
+figure,
+footer,
+header,
+nav,
+section,
+details,
+summary {
+  display: block;
+}
+
+/* Handle box-sizing while better addressing child elements:
+   http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */
+
+/* Responsive images and other embedded objects */
+/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */
+img,
+object,
+embed {
+  max-width: 100%;
+}
+
+/*
+   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
+	In fact, it *will* cause problems with Google Maps' controls at small size.
+	If this is the case for you, try uncommenting the following:
+
+#map img {
+		max-width: none;
+}
+*/
+
+/* force a vertical scrollbar to prevent a jumpy page */
+html {
+  overflow-y: scroll;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+
+a {
+  margin: 0;
+  padding: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+  background: transparent;
+}
+
+del {
+  text-decoration: line-through;
+}
+
+abbr[title],
+dfn[title] {
+  border-bottom: 1px dotted #000;
+  cursor: help;
+}
+
+hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid #ccc;
+  margin: 1em 0;
+  padding: 0;
+}
+
+input,
+select {
+  vertical-align: middle;
+}
+
+input[type="radio"] {
+  vertical-align: text-bottom;
+}
+input[type="checkbox"] {
+  vertical-align: bottom;
+}
+.ie7 input[type="checkbox"] {
+  vertical-align: baseline;
+}
+.ie6 input {
+  vertical-align: text-bottom;
+}
+
+select,
+input,
+textarea {
+  font: 99% sans-serif;
+}
+
+small {
+  font-size: 85%;
+}
+
+strong {
+  font-weight: bold;
+}
+
+/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+}
+sup {
+  top: -0.5em;
+}
+sub {
+  bottom: -0.25em;
+}
+
+/* standardize any monospaced elements */
+pre,
+code,
+kbd,
+samp {
+  font-family: monospace, sans-serif;
+}
+
+/* hand cursor on clickable elements */
+.clickable,
+label,
+input[type="button"],
+input[type="submit"],
+input[type="file"],
+button {
+  cursor: pointer;
+}
+
+/* Webkit browsers add a 2px margin outside the chrome of form elements */
+button,
+input,
+select,
+textarea {
+  margin: 0;
+}
+
+/* make buttons play nice in IE */
+button,
+input[type="button"] {
+  width: auto;
+  overflow: visible;
+}
+
+/* scale images in IE7 more attractively */
+.ie7 img {
+  -ms-interpolation-mode: bicubic;
+}
+
+/* prevent BG image flicker upon hover
+   (commented out as usage is rare, and the filter syntax messes with some pre-processors)
+.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
+*/
+
+/* let's clear some floats */
+.clearfix:after {
+  content: " ";
+  display: block;
+  clear: both;
+}