From 766f8f42d49ed7ae92b12cb085f0ce5bbdd083c2 Mon Sep 17 00:00:00 2001
From: kitajchuk <bk@kitajchuk.com>
Date: Tue, 10 May 2022 10:47:55 -0700
Subject: [PATCH] organize src directory, lighthouse fixes

---
 data/home.yml                                 |  6 ++-
 package.json                                  |  2 +-
 pages/404.js                                  |  6 +--
 pages/_app.js                                 |  2 +-
 pages/_document.js                            | 13 +++++
 pages/docs/[[...slug]].js                     |  6 +--
 pages/index.js                                | 20 +++----
 pages/jambonz-ui.js                           |  6 +--
 pages/open-source/[[...slug]].js              |  6 +--
 pages/pricing.js                              |  8 +--
 pages/privacy.js                              | 14 ++---
 pages/terms.js                                | 14 ++---
 pages/why.js                                  | 12 ++---
 public/manifest.json                          |  3 +-
 {components => src/components}/footer.js      |  0
 {components => src/components}/jambonz-ui.js  | 53 +++++++++++--------
 {components => src/components}/layout.js      |  0
 {components => src/components}/markdown.js    |  2 +-
 {components => src/components}/navi.js        |  4 +-
 {lib => src/lib}/data.js                      |  0
 {styles => src/styles}/_backgrounds.scss      |  0
 {styles => src/styles}/_buttons.scss          |  2 +-
 {styles => src/styles}/_fonts.scss            |  6 +++
 {styles => src/styles}/_footer.scss           |  0
 {styles => src/styles}/_icons.scss            |  2 +-
 {styles => src/styles}/_layout.scss           |  0
 {styles => src/styles}/_markdown.scss         |  0
 {styles => src/styles}/_mixins.scss           |  0
 {styles => src/styles}/_navi.scss             |  0
 {styles => src/styles}/_reset.scss            |  1 +
 {styles => src/styles}/_text-layout.scss      |  2 +-
 {styles => src/styles}/_typography.scss       |  0
 {styles => src/styles}/_vars.scss             | 26 ++++-----
 {styles => src/styles}/global.scss            |  0
 {styles => src/styles}/pages/_home.scss       |  0
 {styles => src/styles}/pages/_jambonz-ui.scss |  0
 {styles => src/styles}/pages/_pricing.scss    |  2 +-
 {styles => src/styles}/pages/_why.scss        |  0
 38 files changed, 129 insertions(+), 89 deletions(-)
 create mode 100644 pages/_document.js
 rename {components => src/components}/footer.js (100%)
 rename {components => src/components}/jambonz-ui.js (78%)
 rename {components => src/components}/layout.js (100%)
 rename {components => src/components}/markdown.js (98%)
 rename {components => src/components}/navi.js (95%)
 rename {lib => src/lib}/data.js (100%)
 rename {styles => src/styles}/_backgrounds.scss (100%)
 rename {styles => src/styles}/_buttons.scss (98%)
 rename {styles => src/styles}/_fonts.scss (91%)
 rename {styles => src/styles}/_footer.scss (100%)
 rename {styles => src/styles}/_icons.scss (97%)
 rename {styles => src/styles}/_layout.scss (100%)
 rename {styles => src/styles}/_markdown.scss (100%)
 rename {styles => src/styles}/_mixins.scss (100%)
 rename {styles => src/styles}/_navi.scss (100%)
 rename {styles => src/styles}/_reset.scss (99%)
 rename {styles => src/styles}/_text-layout.scss (98%)
 rename {styles => src/styles}/_typography.scss (100%)
 rename {styles => src/styles}/_vars.scss (87%)
 rename {styles => src/styles}/global.scss (100%)
 rename {styles => src/styles}/pages/_home.scss (100%)
 rename {styles => src/styles}/pages/_jambonz-ui.scss (100%)
 rename {styles => src/styles}/pages/_pricing.scss (99%)
 rename {styles => src/styles}/pages/_why.scss (100%)

diff --git a/data/home.yml b/data/home.yml
index 5e3b3af..b89e2a6 100644
--- a/data/home.yml
+++ b/data/home.yml
@@ -6,7 +6,11 @@ hero:
   cta: Sign up for free
   url: https://jambonz.us/register
 tech:
-  image: /images/Jambonz_app_screenshot.png
+  image:
+    src: /images/Jambonz_app_screenshot.png
+    alt: jambonz node-red screenshot
+    width: 1280
+    height: 842
   notes:
     -
       title: Adapts to your needs
diff --git a/package.json b/package.json
index 08981cd..aeb61c8 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "pretest": "node cypress/scripts/fixtures.js",
     "test": "cypress run --headless --browser chrome",
     "posttest": "rm -rf cypress/fixtures",
-    "lint": "eslint components pages lib --ext js"
+    "lint": "eslint src/components src/lib pages --ext js"
   },
   "author": "Jambonz Developers",
   "license": "MIT",
diff --git a/pages/404.js b/pages/404.js
index 0855be2..3b654f2 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,6 +1,6 @@
-import Layout from '../components/layout';
-import { Hero } from '../components/jambonz-ui';
-import { getData } from '../lib/data';
+import Layout from '../src/components/layout';
+import { Hero } from '../src/components/jambonz-ui';
+import { getData } from '../src/lib/data';
 
 export default function Page404({ data }) {
   return (
diff --git a/pages/_app.js b/pages/_app.js
index 2d2abc7..bc72ad5 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,4 +1,4 @@
-import '../styles/global.scss';
+import '../src/styles/global.scss';
 
 export default function App({Component, pageProps}) {
   return <Component {...pageProps} />;
diff --git a/pages/_document.js b/pages/_document.js
new file mode 100644
index 0000000..a1e0c76
--- /dev/null
+++ b/pages/_document.js
@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from 'next/document';
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}
\ No newline at end of file
diff --git a/pages/docs/[[...slug]].js b/pages/docs/[[...slug]].js
index bac4d05..886acd8 100644
--- a/pages/docs/[[...slug]].js
+++ b/pages/docs/[[...slug]].js
@@ -2,9 +2,9 @@ import { useEffect } from 'react';
 
 import Prism from 'prismjs';
 
-import Layout from '../../components/layout';
-import Markdown from '../../components/markdown';
-import { getData, getMarkdown, getMarkdownPaths } from '../../lib/data';
+import Layout from '../../src/components/layout';
+import Markdown from '../../src/components/markdown';
+import { getData, getMarkdown, getMarkdownPaths } from '../../src/lib/data';
 
 export default function Docs({ data, docs }) {
   useEffect(() => {
diff --git a/pages/index.js b/pages/index.js
index 022316c..4156ebd 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -2,15 +2,15 @@ import { nanoid } from 'nanoid';
 import classNames from 'classnames';
 import { useState, useEffect, useRef } from 'react';
 
-import Layout from '../components/layout';
-import { Latest, Hero, Icon, Button, H6, H5, H2, P, MS, normalizeSubtext, normalizeSlug, useMobileMedia } from '../components/jambonz-ui';
-import { getData } from '../lib/data';
+import Layout from '../src/components/layout';
+import { Latest, Hero, Icon, Button, H6, H4, H3, H2, P, MS, normalizeSubtext, normalizeSlug, useMobileMedia } from '../src/components/jambonz-ui';
+import { getData } from '../src/lib/data';
 
 function Tech({data}) {
   return (
     <section className="tech wrap">
       <div className="tech__image">
-        <img src={data.image} />
+        <img src={data.image.src} width={data.image.width} height={data.image.height} alt={data.image.alt} />
       </div>
       <ul className="tech__notes">
         {data.notes.map((note) => {
@@ -61,10 +61,10 @@ function Dilemma({data}) {
           <H2>{data.headline}</H2>
         </div>
         <div className="dilemma__subtext">
-          <H5>
+          <H3 className="h5">
             {/* Use dangerouslySetInnerHTML to render inline spans from YAML data */}
             {normalizeSubtext(data.subtext).map((subtext) => <div key={nanoid()} dangerouslySetInnerHTML={{ __html: subtext }} />)}
-          </H5>
+          </H3>
         </div>
         <div className="dilemma__tables">
           {data.tables.map((table) => {
@@ -83,7 +83,7 @@ function Dilemma({data}) {
             return (
               <div key={slug} className={classNames(tableClasses)}>
                 <div className="dilemma__table__title" onClick={() => handleToggle(slug)}>
-                  {table.logo ? <img src={table.logo} /> : <P><strong>{table.title}</strong></P>}
+                  {table.logo ? <img src={table.logo} width="128" height="42" alt="jambonz" /> : <P><strong>{table.title}</strong></P>}
                   <span className="dilemma__table__toggle" >
                     {isActiveToggle ? <Icon name="ChevronUp" /> : <Icon name="ChevronDown" />}
                   </span>
@@ -124,7 +124,7 @@ function BYO({data}) {
           <H2>{data.headline}</H2>
         </div>
         <div className="byo__subtext">
-          <H5>{data.subtext}</H5>
+          <H3 className="h5">{data.subtext}</H3>
         </div>
         <div className="byo__icons icons">
           {data.icons.map((icon) => {
@@ -132,10 +132,10 @@ function BYO({data}) {
           })}
         </div>
         <div className="byo__comment">
-          <H5>
+          <H4 className="h5">
             {/* Use dangerouslySetInnerHTML to render inline link from YAML data */}
             <div dangerouslySetInnerHTML={{ __html: data.comment }} />
-          </H5>
+          </H4>
         </div>
         <div className="byo__cta">
           <Button href={data.url} subStyle="dark" target="_blank">{data.cta}</Button>
diff --git a/pages/jambonz-ui.js b/pages/jambonz-ui.js
index b798b38..b009478 100644
--- a/pages/jambonz-ui.js
+++ b/pages/jambonz-ui.js
@@ -1,8 +1,8 @@
 import Link from 'next/link';
 
-import Layout from '../components/layout';
-import { P, M, MS, MXS, H1, H2, H3, H4, H5, H6, Button, Icon } from '../components/jambonz-ui';
-import { getData } from '../lib/data';
+import Layout from '../src/components/layout';
+import { P, M, MS, MXS, H1, H2, H3, H4, H5, H6, Button, Icon } from '../src/components/jambonz-ui';
+import { getData } from '../src/lib/data';
 
 export default function JambonzUI({ data }) {
   const pageData = data['jambonz-ui'];
diff --git a/pages/open-source/[[...slug]].js b/pages/open-source/[[...slug]].js
index 2e6bd53..b73cd56 100644
--- a/pages/open-source/[[...slug]].js
+++ b/pages/open-source/[[...slug]].js
@@ -2,9 +2,9 @@ import { useEffect } from 'react';
 
 import Prism from 'prismjs';
 
-import Layout from '../../components/layout';
-import Markdown from '../../components/markdown';
-import { getData, getMarkdown, getMarkdownPaths } from '../../lib/data';
+import Layout from '../../src/components/layout';
+import Markdown from '../../src/components/markdown';
+import { getData, getMarkdown, getMarkdownPaths } from '../../src/lib/data';
 
 export default function OpenSource({ data, docs }) {
   useEffect(() => {
diff --git a/pages/pricing.js b/pages/pricing.js
index 77d2db6..07095e7 100644
--- a/pages/pricing.js
+++ b/pages/pricing.js
@@ -1,8 +1,8 @@
 import { nanoid } from 'nanoid';
 
-import Layout from '../components/layout';
-import { Hero, Icon, Button, H2, H6, P, normalizeSubtext } from '../components/jambonz-ui';
-import { getData } from '../lib/data';
+import Layout from '../src/components/layout';
+import { Hero, Icon, Button, H2, P, normalizeSubtext } from '../src/components/jambonz-ui';
+import { getData } from '../src/lib/data';
 
 function Structure({data}) {
   return (
@@ -10,7 +10,7 @@ function Structure({data}) {
       <div className="wrap structure__text">
         <>
           {normalizeSubtext(data.text).map((text) => {
-            return <H6 key={nanoid()}>{text}</H6>;
+            return <P className="h6" key={nanoid()}>{text}</P>;
           })}
         </>
       </div>
diff --git a/pages/privacy.js b/pages/privacy.js
index ae20aa1..e99d484 100644
--- a/pages/privacy.js
+++ b/pages/privacy.js
@@ -1,15 +1,17 @@
-import Layout from '../components/layout';
-import { Hero, TextLayout } from '../components/jambonz-ui';
-import { getData, getParsedMarkdown } from '../lib/data';
+import Layout from '../src/components/layout';
+import { Hero, TextLayout, normalizeTextLayout } from '../src/components/jambonz-ui';
+import { getData, getParsedMarkdown } from '../src/lib/data';
 import path from 'path';
 
 export default function Privacy({ data, parsed }) {
+  parsed.contentHtml = normalizeTextLayout(parsed.contentHtml);
+
   return (
     <Layout siteData={data.site}>
       <Hero data={data.privacy.hero} subStyle="privacy" />
-      <div className="wrap pad-b">
-        <TextLayout data={parsed} />
-      </div>
+      <section className="wrap pad-b">
+        <TextLayout data={parsed} name="privacy" />
+      </section>
     </Layout>
   );
 }
diff --git a/pages/terms.js b/pages/terms.js
index 2adb363..e029be3 100644
--- a/pages/terms.js
+++ b/pages/terms.js
@@ -1,15 +1,17 @@
-import Layout from '../components/layout';
-import { Hero, TextLayout } from '../components/jambonz-ui';
-import { getData, getParsedMarkdown } from '../lib/data';
+import Layout from '../src/components/layout';
+import { Hero, TextLayout, normalizeTextLayout } from '../src/components/jambonz-ui';
+import { getData, getParsedMarkdown } from '../src/lib/data';
 import path from 'path';
 
 export default function Terms({ data, parsed }) {
+  parsed.contentHtml = normalizeTextLayout(parsed.contentHtml);
+
   return (
     <Layout siteData={data.site}>
       <Hero data={data.terms.hero} subStyle="terms" />
-      <div className="wrap pad-b">
-        <TextLayout data={parsed} />
-      </div>
+      <section className="wrap pad-b">
+        <TextLayout data={parsed} name="terms" />
+      </section>
     </Layout>
   );
 }
diff --git a/pages/why.js b/pages/why.js
index f3cc007..6dfd3e7 100644
--- a/pages/why.js
+++ b/pages/why.js
@@ -1,8 +1,8 @@
 import { nanoid } from 'nanoid';
 
-import Layout from '../components/layout';
-import { Hero, Icon, Button, H5, H2, P } from '../components/jambonz-ui';
-import { getData } from '../lib/data';
+import Layout from '../src/components/layout';
+import { Hero, Icon, Button, H3, H2, P } from '../src/components/jambonz-ui';
+import { getData } from '../src/lib/data';
 
 function Facts({data}) {
   return (
@@ -14,7 +14,7 @@ function Facts({data}) {
               <div key={nanoid()} className="facts__item">
                 <Icon name={fact.icon} mainStyle="fill" />
                 <div className="facts__text">
-                  <H5><strong>{fact.title}</strong></H5>
+                  <P className="h5"><strong>{fact.title}</strong></P>
                   <P>{fact.text}</P>
                 </div>
               </div>
@@ -36,7 +36,7 @@ function OS({data}) {
           </H2>
         </div>
         <div className="os__subtext">
-          <H5>{data.subtext}</H5>
+          <H3 className="h5">{data.subtext}</H3>
         </div>
         <div className="btns os__btns">
           {data.buttons.map((button) => {
@@ -49,7 +49,7 @@ function OS({data}) {
           })}
         </div>
         <div className="os__logo">
-          <img src={data.logo} />
+          <img src={data.logo} width="313" height="71" alt="drachtio" />
           <Button href="https://github.com/sponsors/drachtio/" target="_blank" mainStyle="pill" subStyle="jambonz">
             <Icon name="Heart" />
             <span>Sponsor</span>
diff --git a/public/manifest.json b/public/manifest.json
index 5ee65ea..ce71503 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -15,7 +15,8 @@
     {
       "src": "logo512.png",
       "type": "image/png",
-      "sizes": "512x512"
+      "sizes": "512x512",
+      "purpose": "any maskable"
     }
   ],
   "start_url": ".",
diff --git a/components/footer.js b/src/components/footer.js
similarity index 100%
rename from components/footer.js
rename to src/components/footer.js
diff --git a/components/jambonz-ui.js b/src/components/jambonz-ui.js
similarity index 78%
rename from components/jambonz-ui.js
rename to src/components/jambonz-ui.js
index 446f9d5..294168e 100644
--- a/components/jambonz-ui.js
+++ b/src/components/jambonz-ui.js
@@ -19,6 +19,17 @@ export function normalizeSlug(key) {
   return String(key.toLowerCase()).split(' ').join('-');
 }
 
+// For accessibility issues we can "fix" our limitations with markdown and remark-html
+export function normalizeTextLayout(html) {
+  return html
+    .replace(/<(h[1-6])>/g, (m, p1) => {
+      return `<div class="${p1}">`;
+    })
+    .replace(/<\/(h[1-6])>/g, (m, p1) => {
+      return '</div>';
+    });
+}
+
 // Normalize how we listen for media queries
 // Intentionally `null` default value -- will throw Error
 export function useMatchMedia(mediaQuery = null) {
@@ -52,32 +63,32 @@ export function useMobileMedia() {
   return useMatchMedia('(max-width: 896px)');
 }
 
-export function H1({ children }) {
-  return <h1>{children}</h1>;
+export function H1({ children, ...rest }) {
+  return <h1 {...rest}>{children}</h1>;
 }
 
-export function H2({ children }) {
-  return <h2>{children}</h2>;
+export function H2({ children, ...rest }) {
+  return <h2 {...rest}>{children}</h2>;
 }
 
-export function H3({ children }) {
-  return <h3>{children}</h3>;
+export function H3({ children, ...rest }) {
+  return <h3 {...rest}>{children}</h3>;
 }
 
-export function H4({ children }) {
-  return <h4>{children}</h4>;
+export function H4({ children, ...rest }) {
+  return <h4 {...rest}>{children}</h4>;
 }
 
-export function H5({ children }) {
-  return <h5>{children}</h5>;
+export function H5({ children, ...rest }) {
+  return <h5 {...rest}>{children}</h5>;
 }
 
-export function H6({ children }) {
-  return <h6>{children}</h6>;
+export function H6({ children, ...rest }) {
+  return <h6 {...rest}>{children}</h6>;
 }
 
-export function P({children}) {
-  return <p>{children}</p>;
+export function P({ children, ...rest }) {
+  return <p {...rest}>{children}</p>;
 }
 
 export function M({ children }) {
@@ -107,12 +118,12 @@ export function Latest({ data }) {
           <H2>{data.headline}</H2>
         </div>
         <div className="latest__subtext">
-          <H5>
+          <H3 className="h5">
             {/* Use dangerouslySetInnerHTML to render inline links from YAML data */}
             {normalizeSubtext(data.subtext).map((subtext) => {
               return <div key={nanoid()} dangerouslySetInnerHTML={{ __html: subtext }} />;
             })}
-          </H5>
+          </H3>
         </div>
       </div>
     </section>
@@ -136,11 +147,11 @@ export function Hero({ data, subStyle }) {
           <H1>{data.headline}</H1>
         </div>
         <div className="hero__subtext">
-          <H5>
+          <H2 className="h5">
             {normalizeSubtext(data.subtext).map((subtext) => {
               return <div key={nanoid()}>{subtext}</div>;
             })}
-          </H5>
+          </H2>
         </div>
         {data.cta && (
           <div className="hero__cta">
@@ -201,10 +212,10 @@ export function Icon({ name, mainStyle = 'inline', subStyle = null, ...props })
   return <Component {...props} />;
 }
 
-export function TextLayout({ data }) {
+export function TextLayout({ data, name }) {
   return (
-    <div className="text__layout">
-      <div className="text__layout__wrap" dangerouslySetInnerHTML={{ __html: data.contentHtml }} />
+    <div className={`text-layout text-layout--${name}`}>
+      <div className="text-layout__wrap" dangerouslySetInnerHTML={{ __html: data.contentHtml }} />
     </div>
   );
 }
diff --git a/components/layout.js b/src/components/layout.js
similarity index 100%
rename from components/layout.js
rename to src/components/layout.js
diff --git a/components/markdown.js b/src/components/markdown.js
similarity index 98%
rename from components/markdown.js
rename to src/components/markdown.js
index 05f97f6..60c6275 100644
--- a/components/markdown.js
+++ b/src/components/markdown.js
@@ -84,7 +84,7 @@ export default function Markdown({scope, data, docs}) {
     <div className="markdown">
       <div className="wrap markdown__wrap">
         <MarkdownSidebar scope={scope} data={data} />
-        <TextLayout data={docs} />
+        <TextLayout data={docs} name={scope} />
       </div>
     </div>
   );
diff --git a/components/navi.js b/src/components/navi.js
similarity index 95%
rename from components/navi.js
rename to src/components/navi.js
index 36759bc..fb47bae 100644
--- a/components/navi.js
+++ b/src/components/navi.js
@@ -90,8 +90,8 @@ export default function Navi({ siteData }) {
     <nav className={classNames(classes)}>
       <div className="wrap navi__wrap">
         <Link href="/">
-          <a className="navi__logo">
-            <img src="/svg/jambonz.svg" width="128" />
+          <a className="navi__logo" title="jambonz">
+            <img src="/svg/jambonz.svg" width="128" height="42" alt="jambonz" />
           </a>
         </Link>
         <ul className="navi__links">
diff --git a/lib/data.js b/src/lib/data.js
similarity index 100%
rename from lib/data.js
rename to src/lib/data.js
diff --git a/styles/_backgrounds.scss b/src/styles/_backgrounds.scss
similarity index 100%
rename from styles/_backgrounds.scss
rename to src/styles/_backgrounds.scss
diff --git a/styles/_buttons.scss b/src/styles/_buttons.scss
similarity index 98%
rename from styles/_buttons.scss
rename to src/styles/_buttons.scss
index bb3b314..34bb89b 100644
--- a/styles/_buttons.scss
+++ b/src/styles/_buttons.scss
@@ -24,7 +24,7 @@
     background-color: transparent;
     border: 2px solid $jambonz;
     color: $jambonz;
-    padding: 10px 26px 8px;
+    padding: 10px 26px;
 
     &--white {
       color: $white;
diff --git a/styles/_fonts.scss b/src/styles/_fonts.scss
similarity index 91%
rename from styles/_fonts.scss
rename to src/styles/_fonts.scss
index 4dc1d41..8007817 100644
--- a/styles/_fonts.scss
+++ b/src/styles/_fonts.scss
@@ -4,6 +4,7 @@
          url('/fonts/objectivity-regular-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 }
 @font-face {
     font-family: $font-regular-italic;
@@ -11,6 +12,7 @@
          url('/fonts/objectivity-regularslanted-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
@@ -19,6 +21,7 @@
          url('/fonts/objectivity-medium-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 }
 @font-face {
     font-family: $font-medium-italic;
@@ -26,6 +29,7 @@
          url('/fonts/objectivity-mediumslanted-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
@@ -34,6 +38,7 @@
          url('/fonts/objectivity-bold-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 }
 @font-face {
     font-family: $font-bold-italic;
@@ -41,4 +46,5 @@
          url('/fonts/objectivity-boldslanted-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 }
\ No newline at end of file
diff --git a/styles/_footer.scss b/src/styles/_footer.scss
similarity index 100%
rename from styles/_footer.scss
rename to src/styles/_footer.scss
diff --git a/styles/_icons.scss b/src/styles/_icons.scss
similarity index 97%
rename from styles/_icons.scss
rename to src/styles/_icons.scss
index 2f758c9..02abb6e 100644
--- a/styles/_icons.scss
+++ b/src/styles/_icons.scss
@@ -3,7 +3,7 @@
   background-color: $jambonz;
   width: $icon-size-1;
   height: $icon-size-1;
-  border-radius: 24px;
+  border-radius: 100%;
   position: relative;
 
   @media (max-width: $width-mobile) {
diff --git a/styles/_layout.scss b/src/styles/_layout.scss
similarity index 100%
rename from styles/_layout.scss
rename to src/styles/_layout.scss
diff --git a/styles/_markdown.scss b/src/styles/_markdown.scss
similarity index 100%
rename from styles/_markdown.scss
rename to src/styles/_markdown.scss
diff --git a/styles/_mixins.scss b/src/styles/_mixins.scss
similarity index 100%
rename from styles/_mixins.scss
rename to src/styles/_mixins.scss
diff --git a/styles/_navi.scss b/src/styles/_navi.scss
similarity index 100%
rename from styles/_navi.scss
rename to src/styles/_navi.scss
diff --git a/styles/_reset.scss b/src/styles/_reset.scss
similarity index 99%
rename from styles/_reset.scss
rename to src/styles/_reset.scss
index 9eaf6ae..c67b46c 100644
--- a/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -78,4 +78,5 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
 
 img {
     max-width: 100%;
+    height: auto;
     }
\ No newline at end of file
diff --git a/styles/_text-layout.scss b/src/styles/_text-layout.scss
similarity index 98%
rename from styles/_text-layout.scss
rename to src/styles/_text-layout.scss
index ef60b67..e4876ca 100644
--- a/styles/_text-layout.scss
+++ b/src/styles/_text-layout.scss
@@ -1,4 +1,4 @@
-.text__layout {
+.text-layout {
   max-width: $width-tablet-2;
   width: 100%;
   margin: 0 auto;
diff --git a/styles/_typography.scss b/src/styles/_typography.scss
similarity index 100%
rename from styles/_typography.scss
rename to src/styles/_typography.scss
diff --git a/styles/_vars.scss b/src/styles/_vars.scss
similarity index 87%
rename from styles/_vars.scss
rename to src/styles/_vars.scss
index 551c621..3c39c73 100644
--- a/styles/_vars.scss
+++ b/src/styles/_vars.scss
@@ -28,23 +28,23 @@ $font-mono: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 /******************************************************************************
  * Font sizes
 *******************************************************************************/
-$h1-size: 48px;
-$h2-size: 40px;
-$h3-size: 36px;
-$h4-size: 32px;
-$h5-size: 24px;
-$h6-size: 20px;
-$p-size: 18px;
-$m-size: 16px;
-$ms-size: 14px;
-$mxs-size: 12px;
+$h1-size: 3rem;
+$h2-size: 2.5rem;
+$h3-size: 2.25rem;
+$h4-size: 2rem;
+$h5-size: 1.5rem;
+$h6-size: 1.25rem;
+$p-size: 1.125rem;
+$m-size: 1rem;
+$ms-size: 0.875rem;
+$mxs-size: 0.75rem;
 
 /******************************************************************************
  * Icon sizes
 *******************************************************************************/
-$icon-size-1: 48px;
-$icon-size-2: 40px;
-$icon-size-3: 36px;
+$icon-size-1: $h1-size;
+$icon-size-2: $h2-size;
+$icon-size-3: $h3-size;
 
 /******************************************************************************
  * Sizes
diff --git a/styles/global.scss b/src/styles/global.scss
similarity index 100%
rename from styles/global.scss
rename to src/styles/global.scss
diff --git a/styles/pages/_home.scss b/src/styles/pages/_home.scss
similarity index 100%
rename from styles/pages/_home.scss
rename to src/styles/pages/_home.scss
diff --git a/styles/pages/_jambonz-ui.scss b/src/styles/pages/_jambonz-ui.scss
similarity index 100%
rename from styles/pages/_jambonz-ui.scss
rename to src/styles/pages/_jambonz-ui.scss
diff --git a/styles/pages/_pricing.scss b/src/styles/pages/_pricing.scss
similarity index 99%
rename from styles/pages/_pricing.scss
rename to src/styles/pages/_pricing.scss
index cdd9693..c091327 100644
--- a/styles/pages/_pricing.scss
+++ b/src/styles/pages/_pricing.scss
@@ -13,7 +13,7 @@
     max-width: 960px;
     @include flex-cols();
 
-    h6 + h6 {
+    p + p {
       margin-top: 32px;
 
       @media (max-width: $width-mobile) {
diff --git a/styles/pages/_why.scss b/src/styles/pages/_why.scss
similarity index 100%
rename from styles/pages/_why.scss
rename to src/styles/pages/_why.scss