From: Ben Larson Date: Tue, 22 Sep 2020 02:02:08 +0000 (-0500) Subject: More menu improvements (#15) X-Git-Url: http://git.neb.cc/?a=commitdiff_plain;h=e5be473f02d4840e2e837db642e52248ff92e97b;p=xyz.git More menu improvements (#15) --- diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx index 9cec8aa..1a2dee3 100644 --- a/src/components/Hero.jsx +++ b/src/components/Hero.jsx @@ -8,6 +8,7 @@ module.exports = (props) => { return (
{ />

Menu

-
    + -
    -
      + diff --git a/src/components/hero.css b/src/components/hero.css index d0a0869..e6610bb 100644 --- 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 7e5ecc9..5f8f6bd 100644 --- 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 bb8424e..1ce2f38 100644 --- a/src/index.html +++ b/src/index.html @@ -9,6 +9,10 @@ +
      diff --git a/src/index.jsx b/src/index.jsx index 62da200..03db012 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -11,19 +11,20 @@ const interests = require('./interests.json'); ReactDom.render( <>