]> git.neb.cc Git - xyz.git/commitdiff
projects / xyz.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 32e5d05)
More menu improvements (#15)
authorBen Larson <[email protected]>
Tue, 22 Sep 2020 02:02:08 +0000 (21:02 -0500)
committerGitHub <[email protected]>
Tue, 22 Sep 2020 02:02:08 +0000 (21:02 -0500)
src/components/Hero.jsx patch | blob | blame | history
src/components/Menu.jsx patch | blob | blame | history
src/components/hero.css patch | blob | blame | history
src/components/menu.css patch | blob | blame | history
src/index.html patch | blob | blame | history
src/index.jsx patch | blob | blame | history

diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index 9cec8aaac11f998e97147132298ddb02f1363e53..1a2dee364843b2ff2b9275db7ed1f394565f64d9 100644 (file)
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -8,6 +8,7 @@ module.exports = (props) => {
 
   return (
     <header
+      id={props.id}
       style={{
         backgroundImage: `linear-gradient(135deg, ${backgroundGradient})`,
       }}
diff --git a/src/components/Menu.jsx b/src/components/Menu.jsx
index c84f1118c99e2f28ecab0b8c51e0d508ce4d3043..88c3df7813d43f8fc6010baec65ab29d9881ad45 100644 (file)
--- a/src/components/Menu.jsx
+++ b/src/components/Menu.jsx
@@ -22,7 +22,7 @@ module.exports = ({ sections, links }) => {
       />
       <div className="Menu-Body">
         <h3>Menu</h3>
-        <ul>
+        <ul className="Menu-PageLinks">
           {sections.map((section, i) => (
             <li key={i}>
               <a
@@ -34,11 +34,12 @@ module.exports = ({ sections, links }) => {
             </li>
           ))}
         </ul>
-        <hr />
-        <ul>
+        <ul className="Menu-ExternalLinks">
           {links.map((link, i) => (
             <li key={i}>
-              <a href={'https://' + link.url}>{link.text + ' \u2197'} </a>
+              <a href={'https://' + link.url}>
+                <i className={'fa fa-' + link.icon}></i>
+              </a>
             </li>
           ))}
         </ul>
diff --git a/src/components/hero.css b/src/components/hero.css
index d0a0869e80303af658d0754a88e6c154bf001895..e6610bbb6562b9df3a7ff358b3c7b96d471937e1 100644 (file)
--- a/src/components/hero.css
+++ b/src/components/hero.css
@@ -17,6 +17,7 @@ header h1 {
 }
 
 header p {
+  font-size: 1.1em;
   line-height: 2em;
 }
 
@@ -24,6 +25,10 @@ header p {
   :root {
     --Hero-headerSize: 3em;
   }
+
+  header p {
+    font-size: 1em;
+  }
 }
 
 @media (max-width: 25em) {
diff --git a/src/components/menu.css b/src/components/menu.css
index 7e5ecc947a57ee82cf21dc9b2c4eaca1d0bdc3d9..5f8f6bd2f75fa0c1b09450e55cb13aa97534f983 100644 (file)
--- a/src/components/menu.css
+++ b/src/components/menu.css
@@ -1,7 +1,9 @@
 .Menu {
+  box-sizing: border-box;
   color: #333;
   padding: 1em;
-  width: 20em;
+  width: 22em;
+  max-width: 100%;
   height: 100vh;
   right: -22em;
   position: fixed;
@@ -53,11 +55,10 @@
 
 .Menu-Body {
   z-index: 9;
-  position: fixed;
-  width: 20em;
+  position: relative;
   box-sizing: border-box;
   border-radius: 1em;
-  padding: 2em;
+  padding: 2em 2em 1em 2em;
   background-color: #fff;
   box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
   transition: box-shadow 0.2s;
@@ -78,16 +79,34 @@
   list-style-type: none;
 }
 
-.Menu ul li {
+.Menu-PageLinks li {
   margin: 1em 0 0 0;
 }
 
-.Menu hr {
-  margin-top: 1em;
+.Menu-PageLinks a:hover {
+  box-shadow: 0 3px;
 }
 
-.Menu a:hover {
-  box-shadow: 0 3px;
+.Menu-ExternalLinks {
+  display: flex;
+  margin-top: 2em;
+  border-top: 1px solid #ccc;
+}
+
+.Menu-ExternalLinks li {
+  flex: 1;
+  text-align: center;
+}
+
+.Menu-ExternalLinks a {
+  font-size: 1.1em;
+  display: block;
+  padding: 1em 0;
+  transition: color 0.2s;
+}
+
+.Menu-ExternalLinks a:hover {
+  color: inherit;
 }
 
 @media (max-width: 25em) {
@@ -102,10 +121,15 @@
     right: 0;
   }
 
+  .Menu-Button {
+    right: 1.5em;
+  }
+
   .Menu-Body {
     width: 100%;
     height: 100%;
     border: 0;
     border-radius: 0;
+    padding: 2em 1.5em;
   }
 }
diff --git a/src/index.html b/src/index.html
index bb8424eb5c69287408cfc0adc7c480b65b6a48f5..1ce2f384e1c26b1dfb21e83f4d38b16de8e400d7 100644 (file)
--- a/src/index.html
+++ b/src/index.html
@@ -9,6 +9,10 @@
     <style>
       @import url('./main.css');
     </style>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/index.jsx b/src/index.jsx
index 62da20094c8a202e21af7b2cd74dba87e0dc672a..03db012125f5bed8308fabd4d54d4474355b0da3 100644 (file)
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -11,19 +11,20 @@ const interests = require('./interests.json');
 ReactDom.render(
   <>
     <Menu
-      sections={['Music I like']}
+      sections={['Home', 'Music I like']}
       links={[
-        { url: 'github.com/ben-larson', text: 'GitHub' },
-        { url: 'stackoverflow.com/users/10377586/', text: 'Stack Overflow' },
-        { url: 'www.linkedin.com/in/ben-larson-dev', text: 'LinkedIn' },
-        { url: 'music.apple.com/profile/benthedev', text: 'Apple Music' },
+        { url: 'github.com/ben-larson', icon: 'github' },
+        { url: 'stackoverflow.com/users/10377586/', icon: 'stack-overflow' },
+        { url: 'linkedin.com/in/ben-larson-dev', icon: 'linkedin' },
+        { url: 'music.apple.com/profile/benthedev', icon: 'apple' },
       ]}
     />
     <Hero
       title="Ben Larson"
+      id="home"
       lines={[
-        '\u2318 Software dev by trade',
-        '\u2325 Other things by hobby',
+        '\u2318 Software developer',
+        '\u2325 Serial hobbyist',
         '\u2606 Living in Nashville',
       ]}
     />
Unnamed repository; edit this file 'description' to name the repository.