Skip to content
This repository was archived by the owner on Mar 9, 2021. It is now read-only.

Mobile menu #68

Merged
merged 6 commits into from
Nov 4, 2017
Merged

Mobile menu #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3dd794b
implement mobile menu, fix few padding issue and change some colors
vinaypuppal Nov 3, 2017
b8fe7a8
fix mobile hover color issue
vinaypuppal Nov 3, 2017
ea329f5
some more color changes
vinaypuppal Nov 3, 2017
248cd94
move menu icon more to left
vinaypuppal Nov 3, 2017
7d7b05f
added production cdn links to serving md files
Nov 4, 2017
49d2430
menu highlight color slighlt changed from yellow
Nov 4, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion components/common-banner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default props => (
<style jsx>{`
.root {
background-color: #f4f7fb;
min-height: 200px;
min-height: 150px;
text-align: center;
}
.headline {
Expand All @@ -18,6 +18,20 @@ export default props => (
color: #df1cb5;
font-weight: 900;
}
h2 {
max-width: 1024px;
margin-left: auto;
margin-right: auto;
letter-spacing: 2px;
line-height: 2;
margin-bottom: 30px;
}
@media (max-width: 720px) {
h2 {
font-size: 14px;
padding: 0 10px;
}
}
`}</style>
</div>
);
2 changes: 1 addition & 1 deletion components/footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export default () => (
<style jsx>{`
footer {
padding: 50px 0;
background: #314159;
background: #c454df linear-gradient(to bottom, #ec53ab, #d354cf);
color: #fff;
}
.footer__container {
Expand Down
4 changes: 2 additions & 2 deletions components/global-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default () => (
pointer-events: none;
}
#nprogress .bar {
background: #d812c8;
background: #f9d1ed;
position: fixed;
z-index: 1031;
top: 0;
Expand All @@ -42,7 +42,7 @@ export default () => (
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #d812c8, 0 0 5px #d812c8;
box-shadow: 0 0 10px #f9d1ed, 0 0 5px #f9d1ed;
opacity: 1;
transform: rotate(3deg) translate(0px, -4px);
}
Expand Down
135 changes: 125 additions & 10 deletions components/header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@ import Headroom from 'react-headroom';
import NProgress from 'nprogress';
import Router from 'next/router';
import Link from 'next/link';
import GoHome from 'react-icons/lib/go/home';
import GoBook from 'react-icons/lib/md/school';
import GoStar from 'react-icons/lib/md/library-books';
import GoCalender from 'react-icons/lib/go/calendar';
import GoOrg from 'react-icons/lib/go/organization';

import GlobalStyles from './global-styles';
import Head from './head';
Expand All @@ -29,26 +34,31 @@ export default props => {
title: 'Home',
path: '/',
external: false,
icon: GoHome,
},
{
title: 'Learn',
path: '/learn',
external: false,
icon: GoBook,
},
{
title: 'Space',
path: '/space',
external: false,
icon: GoOrg,
},
{
title: 'Events',
path: '/events',
external: false,
icon: GoCalender,
},
{
title: 'Blog',
path: 'https://coderplex.org/blog',
external: true,
icon: GoStar,
},
];
return (
Expand All @@ -61,6 +71,10 @@ export default props => {
<div className="nav__logo">
<img src="/static/favicons/android-chrome-192x192.png" alt="" />
</div>
<input id="menu" type="checkbox" />
<label htmlFor="menu" className="mobile__menu">
<span>Menu</span>
</label>
<ul className="nav__links">
{navItems.map(item => {
return (
Expand All @@ -72,7 +86,8 @@ export default props => {
? 'nav__link--active'
: ''}`}
>
{item.title}
{React.createElement(item.icon)}
<span>{item.title}</span>
</a>
) : (
<Link href={item.path}>
Expand All @@ -82,7 +97,8 @@ export default props => {
? 'nav__link--active'
: ''}`}
>
{item.title}
{React.createElement(item.icon)}
<span>{item.title}</span>
</a>
</Link>
)}
Expand All @@ -95,9 +111,9 @@ export default props => {
</header>
<style jsx>{`
header {
padding: 5px 20px;
padding: 5px 10px;
width: 100%;
background: #fff;
background: #c454df linear-gradient(to top, #ec53ab, #d354cf);
z-index: 1000;
}
.header__container {
Expand All @@ -106,8 +122,9 @@ export default props => {
}
nav {
display: flex;
height: 70px;
height: 56px;
align-items: center;
position: relative;
}
.nav__logo {
flex: 1;
Expand Down Expand Up @@ -146,27 +163,125 @@ export default props => {
}
.nav__link {
text-decoration: none;
color: #666;
font-size: 14px;
color: #fff;
font-size: 16px;
font-weight: bold;
padding-bottom: 4px;
display: flex;
align-items: center;
}
.nav__link span {
margin-left: 5px;
}
.nav__link:hover {
color: #444;
color: #e1e1e1;
}
.nav__link--active {
color: #444;
border-bottom: 2px solid #d900e4;
border-bottom: 2px solid #fff;
pointer-events: none;
}
input[type='checkbox'] {
position: absolute;
opacity: 0;
top: 25px;
left: 25px;
}
.mobile__menu {
width: 30px;
height: 24px;
display: none;
cursor: pointer;
top: 15px;
left: 5px;
position: absolute;
z-index: 1;
}
.mobile__menu:after,
.mobile__menu:before {
content: '';
width: 100%;
height: 2px;
border-radius: 4px;
position: absolute;
background: #fff;
top: 50%;
-webkit-transition: -webkit-transform 0.5s;
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.mobile__menu:after {
-webkit-transform: translate3d(0, -10px, 0) scale3d(0.8, 1, 1);
transform: translate3d(0, -10px, 0) scale3d(0.8, 1, 1);
}
.mobile__menu:before {
-webkit-transform: translate3d(0, 10px, 0) scale3d(0.8, 1, 1);
transform: translate3d(0, 10px, 0) scale3d(0.8, 1, 1);
}
.mobile__menu span {
position: absolute;
width: 100%;
overflow: hidden;
height: 2px;
border-radius: 4px;
background: #fff;
top: 50%;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
input[type='checkbox']:checked ~ .mobile__menu span {
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}
input[type='checkbox']:checked ~ .mobile__menu:after {
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
}
input[type='checkbox']:checked ~ .mobile__menu:before {
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
}
input[type='checkbox']:checked ~ .nav__links {
display: flex;
}
@media (max-width: 700px) {
nav {
justify-content: center;
}
.nav__logo {
flex: initial;
}
.mobile__menu {
display: block;
}
.nav__links {
flex-direction: column;
width: 100%;
position: fixed;
top: 66px;
background: #fafafa;
display: none;
border-bottom: 1px solid #eee;
font-size: 10px;
}
.nav__linkItem {
width: 100%;
border-top: 1px solid #eee;
}
.nav__link {
width: 100%;
font-size: 14px;
font-weight: bold;
padding: 12px 15px;
color: #888;
}
.nav__link:hover {
color: #222;
}
.nav__link--active {
border: none;
}
}
`}</style>
Expand Down
12 changes: 8 additions & 4 deletions pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,7 @@ class Home extends React.Component {
}
.about__container {
padding-bottom: 30px;
min-height: calc(100vh - 260px);
min-height: 200px;
margin: 0 auto;
display: flex;
justify-content: center;
Expand All @@ -220,12 +220,12 @@ class Home extends React.Component {
width: 100%;
}
.about__tag {
font-size: 2.5em;
font-size: 2.5rem;
}
.container {
background-color: #ffffff;
text-align: center;
padding: 60px;
padding: 20px;
}
.taglines {
padding-bottom: 20px;
Expand All @@ -252,7 +252,11 @@ class Home extends React.Component {
.discord-subscribe .container {
background: #FAFAFA;
}

@media (max-width: 720px) {
.about__tag {
font-size: 1.5rem;
}
}
`}</style>
</div>
);
Expand Down
4 changes: 2 additions & 2 deletions pages/learn/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ class Learn extends React.Component {

render() {
return (
<div className="root">
<div>
<CommonBanner
pageTitle="Learn"
pageSubTitle="Open Source Learning Guides to master your favorite technology"
Expand Down Expand Up @@ -135,7 +135,7 @@ class Learn extends React.Component {
align-content: flex-start;
align-items: flex-start;
background-color: #ffffff;
padding: 30px;
padding: 20px;
min-height: calc(100vh - 70px);
margin: 0 auto;
}
Expand Down
16 changes: 3 additions & 13 deletions pages/space.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,11 @@ export default publicPage(() => (
<div>
<CommonBanner
pageTitle="Space"
pageSubTitle="Physical spaces for collaboration, peer-learning and self-learning"
pageSubTitle="Physical spaces for collaboration, peer-learning and self-learning. These are dynamic learning environments, where everyone learns at their own pace and
compliments each other. You can also participate in weekly group activities like Open
source evenings and other casual competitions"
/>
<main>
<section>
<div>
<Card centered fluid>
<Card.Content>
These are dynamic learning environments, where everyone learns at
their own pace and compliments each other. You can also
participate in weekly group activities like Open source evenings
and other casual competitions
</Card.Content>
</Card>
</div>
</section>
<section>
<h2>Who is this for?</h2>
<div>
Expand Down
Loading