Small updates (#6)

diff --git a/src/Menu.jsx b/src/Menu.jsx
deleted file mode 100644 (file)
index 35bf3a2..0000000
--- a/src/Menu.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-const React = require('react');
-
-module.exports = ({ links }) => {
-  return (
-    <nav>
-      <div className="menuButton" />
-      <h3>Menu</h3>
-      <ul>
-        {links.map((link, i) => (
-          <li key={i}>
-            <a href={link.url}>{link.text}</a>
-          </li>
-        ))}
-      </ul>
-    </nav>
-  );
-};

diff --git a/src/Hero.jsx b/src/components/Hero.jsx
similarity index 100%
rename from src/Hero.jsx
rename to src/components/Hero.jsx

diff --git a/src/components/Menu.jsx b/src/components/Menu.jsx
new file mode 100644 (file)
index 0000000..e7a6d9b
--- /dev/null
+++ b/src/components/Menu.jsx
@@ -0,0 +1,34 @@
+const React = require('react');
+
+module.exports = ({ links }) => {
+  const navActions = {
+    open: () => document.body.classList.add('isNavOpen'),
+    close: () => document.body.classList.remove('isNavOpen'),
+    toggle: () => document.body.classList.toggle('isNavOpen'),
+  };
+
+  return (
+    <nav className="Menu">
+      <div
+        className="Menu-Closer"
+        onMouseOver={navActions.close}
+        onClick={navActions.close}
+      />
+      <div
+        className="Menu-Button"
+        onMouseOver={navActions.open}
+        onClick={navActions.toggle}
+      />
+      <div className="Menu-Body">
+        <h3>Menu</h3>
+        <ul>
+          {links.map((link, i) => (
+            <li key={i}>
+              <a href={link.url}>{link.text}</a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </nav>
+  );
+};

diff --git a/src/components/hero.css b/src/components/hero.css
new file mode 100644 (file)
index 0000000..d8b3cd2
--- /dev/null
+++ b/src/components/hero.css
@@ -0,0 +1,45 @@
+:root {
+  --Hero-headerSize: 4em;
+}
+
+header {
+  min-height: 100vh;
+  box-sizing: border-box;
+  background-attachment: fixed;
+  color: rgba(0, 0, 0, 0.6);
+  padding: var(--Hero-headerSize);
+}
+
+header h1 {
+  font-size: var(--Hero-headerSize);
+  padding-bottom: 1em;
+}
+
+header p {
+  line-height: 2em;
+}
+
+@media (max-width: 55em) {
+  :root {
+    --Hero-headerSize: 3em;
+  }
+}
+
+@media (max-width: 25em) {
+  header {
+    padding: 2em;
+  }
+
+  h1 {
+    width: 0;
+  }
+}
+
+@media (max-width: 20em) {
+  header p::first-letter {
+    margin-left: -1.3em;
+    text-align: right;
+    width: 0;
+    float: left;
+  }
+}

diff --git a/src/components/menu.css b/src/components/menu.css
new file mode 100644 (file)
index 0000000..be1ec6a
--- /dev/null
+++ b/src/components/menu.css
@@ -0,0 +1,72 @@
+.Menu {
+  width: 20em;
+  height: 100vh;
+  max-width: 100%;
+  right: -20em;
+  position: fixed;
+  transition: right 0.2s cubic-bezier(0.16, 0.7, 0.53, 1.18);
+}
+
+.isNavOpen .Menu {
+  right: 0;
+}
+
+.Menu-Closer {
+  z-index: 8;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 100vh;
+}
+
+.isNavOpen .Menu-Closer {
+  width: 100vw;
+}
+
+.Menu-Button {
+  z-index: 10;
+  position: fixed;
+  top: 2em;
+  right: 2em;
+  padding: 0.75em;
+  box-shadow: 0 0 0 0.5em rgba(0, 0, 0, 0.5) inset;
+  border-radius: 100%;
+}
+
+.Menu-Body {
+  z-index: 9;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border-radius: 1em 0 0 1em;
+  padding: 2em;
+  background-color: #fff;
+}
+
+.Menu h3 {
+  font-size: 1.5em;
+  margin: 0;
+  padding-bottom: 1em;
+  line-height: 2.25rem;
+}
+
+.Menu ul {
+  list-style-type: none;
+}
+
+.Menu ul li {
+  margin: 1em 0;
+}
+
+@media (max-width: 25em) {
+  .Menu {
+    width: 100%;
+    right: -100%;
+    transition: right 0.2s;
+  }
+  .Menu-Body {
+    border-radius: 0;
+  }
+}

diff --git a/src/index.jsx b/src/index.jsx
index bd392e13e873b3ffe8b798d6d6cc9458d98864fc..6bd5230e84a24b8835a97e3bfeac4957ac886765 100644 (file)
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,17 +1,21 @@
 const React = require('react');
 const ReactDom = require('react-dom');
 
-const Hero = require('./Hero');
-const Menu = require('./Menu');
+const Hero = require('./components/Hero');
+const Menu = require('./components/Menu');
 
 ReactDom.render(
   <>
     <Menu
       links={[
         {
-          url: 'https://github.com/ben-larson',
+          url: 'https://github.com/ben-larson/',
           text: 'Check out my GitHub \u2197',
         },
+        {
+          url: 'https://www.linkedin.com/in/ben-larson-dev/',
+          text: 'Connect on LinkedIn \u2197',
+        },
       ]}
     />
     <Hero

diff --git a/src/main.css b/src/main.css
index 932ae528744b1df420097e9771f9dea342d66581..a96fa07f4a9ba2fd46dfc150383bee2b71433522 100644 (file)
--- a/src/main.css
+++ b/src/main.css
@@ -1,72 +1,21 @@
 @import url('https://fonts.larson.zone/inter/index.css');
+@import url('./components/hero.css');
+@import url('./components/menu.css');
 
 * {
-  font-family: inter;
+  font-family: inherit;
   margin: 0;
   padding: 0;
 }
 
 body {
-  font-family: lingua-franca-bold;
+  font-family: inter, -apple-system, Roboto, 'Helvetica Neue', sans-serif;
   font-weight: bold;
   font-size: 1.5em;
   background: #ddd;
   color: #333;
 }
 
-nav {
-  box-sizing: border-box;
-  border-radius: 1em 0 0 1em;
-  padding: 2em;
-  width: 30em;
-  height: 100vh;
-  background-color: rgba(255, 255, 255, 0.9);
-  position: fixed;
-  right: -30em;
-  transition: right 0.2s cubic-bezier(0.16, 0.7, 0.53, 1.18);
-}
-
-nav:hover {
-  right: -10em;
-}
-
-nav .menuButton {
-  position: fixed;
-  top: 2em;
-  right: 2em;
-  padding: 0.75em;
-  box-shadow: 0 0 0 0.5em rgba(0, 0, 0, 0.5) inset;
-  border-radius: 100%;
-}
-
-nav h3 {
-  font-size: 1.5em;
-  margin: 0;
-  padding-bottom: 1em;
-  line-height: 2.25rem;
-}
-
-nav ul {
-  list-style-type: none;
-}
-
-header {
-  height: 100vh;
-  box-sizing: border-box;
-  color: rgba(0, 0, 0, 0.6);
-}
-
-h1 {
-  font-size: 4em;
-  padding: 1em 1em;
-}
-
-header p {
-  padding: 0 4em;
-  width: 20em;
-  line-height: 2em;
-}
-
 a {
   text-decoration: none;
   color: #46f;
@@ -75,3 +24,9 @@ a {
 a:hover {
   box-shadow: 0 3px;
 }
+
+@media (max-width: 45em) {
+  body {
+    font-size: 1em;
+  }
+}

diff --git a/src/main.js b/src/main.js
deleted file mode 100644 (file)
index 2eb8023..0000000
--- a/src/main.js
+++ /dev/null
@@ -1,26 +0,0 @@
-const repos = ['Event Creator', 'JS Playground'];
-
-const element = (tagName, attrs = {}, ...children) => {
-  const result = document.createElement(tagName);
-  Object.keys(attrs).forEach(key => result.setAttribute(key, attrs[key]));
-  children.forEach(child => {
-    if (typeof child === 'object') result.appendChild(child);
-    else result.innerHTML += child;
-  });
-  return result;
-};
-
-repos.forEach(title => {
-  const name = title.toLowerCase().replace(' ', '-');
-  const url = `https://benlarson.xyz/${name}/`;
-
-  const iframe = element('iframe', { src: url });
-  const githubLink = element(
-    'a',
-    { href: `https://github.com/ben-larson/${name}/`, class: 'github' },
-    'View on GitHub ↗'
-  );
-  const content = element('div', { class: 'sizer' }, githubLink, iframe);
-  const section = element('section', {}, content);
-  document.body.appendChild(section);
-});