diff --git a/SUBMISSION.md b/SUBMISSION.md index 9f4df99..b2a6f9f 100644 --- a/SUBMISSION.md +++ b/SUBMISSION.md @@ -1,8 +1,12 @@ ## Submissions -Use this md to tell us the bugs you solved and also explain the approach you had while solving them. Make them bulleted like +Following are the changes made: -1. Accessibility - **Something here** -2. Aesthetics - **Something here** -3. Testing - **Something here** -4. Technicality Improvements - **Something here** +1. Aesthetics - + a. Hamburger Icon added for menu icon link + b. Slider menu Color changed + c. Slider menu, header sizes adjusted + d. Header style changed + e. Feed list center-aligned +2. Technicality Improvements - + a. The Slider Menu slides back in and out on clicking on the hamburger icon diff --git a/app.js b/app.js index 9e583f7..7a5d8d6 100644 --- a/app.js +++ b/app.js @@ -63,4 +63,17 @@ $(function () { /* When the menu icon is clicked on, we need to toggle a class * on the body to perform the hiding/showing of our menu. */ + + $(document).ready(function(){ + $("a.menu-icon-link").click(function(){ + $(".slide-menu").toggleClass('menu-hidden'); + }); + /*on scroll slide menu back in*/ + $(".feed").scroll(function(){ + $(".slide-menu").addClass("menu-hidden"); + }); + }); + + + }()); diff --git a/index.html b/index.html index 9e9fa63..01fff97 100644 --- a/index.html +++ b/index.html @@ -8,13 +8,16 @@ - + + + +
- +

Feeds

@@ -29,70 +32,70 @@

Feed

The Magic of React-Based Multi-Step Forms

-

Nathan Sebhastian

+

Nathan Sebhastian

- +

The #StateOfCSS 2019 Survey

-

Geoff Graham

+

Geoff Graham

- +

Getting to Grips with the Airtable API

-

Robin Rendle

+

Robin Rendle

- +

Use monday.com to manage and share projects all in one place

-

Geoff Graham

+

Geoff Graham

- +

The Smart Ways to Correct Mistakes in Git

-

Tobias Günther

+

Tobias Günther

- +

“the closest thing web standards have to a golden rule”

-

Chris Coyier

+

Chris Coyier

- +

​​Avoiding those dang cannot read property of undefined errors

-

Adam Giese

+

Adam Giese

- +

A Site for Front-End Development Conferences (Built with 11ty on Netlify)

-

Chris Coyier

+

Chris Coyier

- +

Quick! What’s the Difference Between Flexbox and Grid?

-

Chris Coyier

+

Chris Coyier

- +

A Funny Thing Happened on the Way to the JavaScript

-

Jason Rodriguez

+

Jason Rodriguez

diff --git a/style.css b/style.css index bbc3fc7..57f1a72 100644 --- a/style.css +++ b/style.css @@ -43,25 +43,39 @@ h2 { color: #fff; position: fixed; top: 0; + height: 4em; width: 100%; - padding: 0.5em 1em; + /* padding: 0.5em 0.5em; */ +} + +.header-title { + background-color: #2998c4; + border-radius: 50vw; + padding: 0.25vw 1vw 0.25vw 1vw; + font-family: 'Courgette'; + font-size: 1em; + width: 50vw; +} + +a.menu-icon-link { + margin-top: 10vw; } .icon-list { - font-size: 1.5em; + font-size: 1em; color: #FFF; } .slide-menu { position: absolute; - top: 3.5em; + top: 4em; padding: 1em; - background: #0984b4; + background-color: #262626; height: 100%; width: 10em; transform: translate3d(0, 0, 0); - transition: transform 0.2s; -} + transition: transform 1s; + } .slide-menu ul { list-style: none; @@ -82,17 +96,25 @@ h2 { padding: 0.5em 0; } -.menu-hidden .slide-menu { +.menu-hidden { transform: translate3d(-12em, 0, 0); - transition: transform 0.2s; + transition: transform 1s; } +/*.menu-appear { + transform: translate3d(12em, 0, 0); + transition: transform 3s; +}*/ + .feed { - margin: 4em 0 0; + margin: 4em 4em 4em 35vw; + text-align: left; + width: 100vw; } .entry { border-bottom: 1px solid #ddd; + padding: 1em; - margin: 0.5em 0; + /* margin: 0.5em 0; */ }