Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Burger menu #264

Merged
merged 14 commits into from
Jun 17, 2017
Merged

Burger menu #264

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
033fe64
Adds classes to display menu with transition on click, #249
Jun 14, 2017
8b9a943
Adds burger symbol, #249
Jun 14, 2017
7e7160f
Removes vh-100 and fixed classes, #249
Jun 14, 2017
a62e08c
Fixes nav and removes min height, #249
Jun 14, 2017
f57704b
Adds menu class so display changes with checkbox, #249
Jun 14, 2017
cb79046
Adds min height so nav always show dwyl, #249
Jun 14, 2017
276a544
Positions dwyl absolutely on mob, #249
Jun 14, 2017
d9b0e87
Increases padding to account for mobile navbar, #260
Jun 14, 2017
48c7aa8
Adds 'home' to nav on mobile, #249
Jun 14, 2017
4a3c62a
Amends padding for mob menu, #249
Jun 14, 2017
1101f4f
Replaces vh with rem
Jun 14, 2017
a84d2af
Replaces custom class with tachyons substitute, #265
Jun 14, 2017
03f39b2
Substitutes grey for gray, #266
Jun 14, 2017
c80801a
Refactors to remove overflow-hidden from custom class, #266
Jun 14, 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
30 changes: 19 additions & 11 deletions redesign/css/dwyl.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,27 @@ body {

/* COLORS */

.dwyl-dark-grey {
.dwyl-dark-gray {
color: #45535B;
}

.dwyl-bg-dark-grey {
.dwyl-bg-dark-gray {
background-color: #45535B;
}

.dwyl-b--dark-grey {
.dwyl-b--dark-gray {
border-color: #45535B;
}

.dwyl-grey {
.dwyl-gray {
color: #42575B;
}

.dwyl-bg-grey {
.dwyl-bg-gray {
background-color: #42575B;
}

.dwyl-b--grey {
.dwyl-b--gray {
border-color: #42575B;
}

Expand All @@ -44,7 +44,7 @@ body {
background-color: #C6AC5C;
}

.dwyl-light-grey {
.dwyl-light-gray {
color: #717E84;
}

Expand All @@ -60,14 +60,22 @@ body {
font-size: 4rem;
}

.bw-s {
border-width: thin;
}

.mw-21 {
max-width: 21rem;
}

/*Navbar*/

.menu {
min-height: 4rem;
max-height: 0;
transition: max-height 1s;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The transition feels a bit slow, could we make it a bit faster?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
transition: max-height 1s;
transition: max-height 0.5s;

😉

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Made it faster for you @SimonLab https://github.com/dwyl/learn-tachyons/pull/52/files#diff-910fef80905cec0740d8c9b257c89defR47 😉

}

#burger:checked ~ .menu {
max-height: 25rem;
}

/*Accessibility*/

.sr-only {
Expand Down
59 changes: 32 additions & 27 deletions redesign/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,24 +15,29 @@
<title>dwyl</title>
</head>
<body>
<nav class="w-100 vh-100 h3-ns dwyl-bg-dark-grey tc white fixed">
<ul class="w-100 list tc pl0 pt3 mv0 f3 f5-ns">
<li class="ph4 mh2 fw3 di-ns pv3 pv0-ns">
<nav class="w-100 dwyl-bg-dark-gray tc white relative fixed">
<input type="checkbox" id="burger" class="absolute top-2 right-1 dn">
<label for="burger" class="dn-ns pointer absolute top-1 right-1">
<i class="fa fa-bars white dib f2"></i>
</label>
<ul class="overflow-hidden menu db-ns w-100 list tc pl0 pt3 mv0 f3 fw3 f5-ns">
<li class="absolute top-1 static-ns ph4 mh2 fw3 di-ns pt1 pb3 pv3-ns">
<a href="/" class="white link">
<img src="./img/common/dwyl-heart-only-logo.png" alt="dwyl logo" class="w1"/>
dwyl
</a>
</li>
<li class="ph4 mh2 fw3 di-ns pv3 pv0-ns"><a href="/portfolio" class="white link">Portfolio</a></li>
<li class="ph4 mh2 fw3 di-ns pv3 pv0-ns"><a href="/values" class="white link">Values</a></li>
<li class="ph4 mh2 fw3 di-ns pv3 pv0-ns"><a href="/team" class="white link">Team</a></li>
<li class="ph4 mh2 fw3 di-ns pv3 pv0-ns"><a href="/app" class="white link">App
<li class="ph5 pt5 pb2 tl dn-ns"><a href="/" class="white link">Home</a></li>
<li class="ph5 di-ns pv2 tl pv0-ns"><a href="/portfolio" class="white link">Portfolio</a></li>
<li class="ph5 di-ns pv2 tl pv0-ns"><a href="/values" class="white link">Values</a></li>
<li class="ph5 di-ns pv2 tl pv0-ns"><a href="/team" class="white link">Team</a></li>
<li class="ph5 di-ns pv2 tl pv0-ns"><a href="/app" class="white link">App
<span class="dwyl-bg-gold pa1 br2 f7">BETA</span></a></li>
<li class="ph4 mh2 fw3 di-ns pv3 pv0-ns"><a href="/blog" class="dwyl-mint link">Blog</a></li>
<li class="ph4 mh2 fw3 di-ns pv3 pv0-ns"><a href="/#contact" class="white link">Contact</a></li>
<li class="ph5 di-ns pv2 tl pv0-ns"><a href="/blog" class="dwyl-mint link">Blog</a></li>
<li class="ph5 di-ns pt2 pb3 tl pv0-ns"><a href="/#contact" class="white link">Contact</a></li>
</ul>
</nav>
<section class="dwyl-bg-grey dwyl-dark-grey pv3 pv5-ns ph6-ns center">
<section class="dwyl-bg-gray dwyl-dark-gray pt5 pb3 pb3-ns ph6-ns center">
<h1 class="white f1 tc">We Make Excellent Products</h1>

<div class="w-third-ns w-80 pt2 ph2 pb3 dib-ns dtc-ns v-top tc center">
Expand Down Expand Up @@ -65,31 +70,31 @@ <h1 class="white f1 tc">We Make Excellent Products</h1>
<img src="./img/common/mvp.png" alt="We can be/make your MVP" class="center tc pt4"/>
<div class="w-60-ns center">
<ul class="tl left-auto w-40-ns">
<li class="list pl0 dwyl-dark-grey">* Most Valuable Player</li>
<li class="list pl0 dwyl-dark-gray">* Most Valuable Player</li>
<li class="list pl0 white">* Minimum Viable Product</li>
</ul>
</div>
</section>
<section class="ph6-ns center tc tl-ns">
<h1 class="dwyl-dark-grey pt4-ns b">The Right Solution <span class="dwyl-mint db dib-ns">(in
<h1 class="dwyl-dark-gray pt4-ns b">The Right Solution <span class="dwyl-mint db dib-ns">(in
3 easy steps)</span></h1>

<div class="tc">
<div class="w5 w-30-ns mt2 mb3 mt3-ns mh1 pa2 dwyl-dark-grey dib-ns tl dtc-ns v-top center">
<div class="w5 w-30-ns mt2 mb3 mt3-ns mh1 pa2 dwyl-dark-gray dib-ns tl dtc-ns v-top center">
<h3 class="br-100 w2 h2 tc dtc v-mid bg-yellow">1</h3>
<h3 class="fw5 f4">Understand the problem properly</h3>
<p>We work together to understand the problem
that has been identified and confirm the intended users feel the pain
and need for a solution.</p>
</div>
<div class="w5 w-30-ns mv3 mh1 pa2 dwyl-dark-grey dib-ns tl dtc-ns v-top center">
<div class="w5 w-30-ns mv3 mh1 pa2 dwyl-dark-gray dib-ns tl dtc-ns v-top center">
<h3 class="br-100 w2 h2 tc dtc v-mid bg-yellow">2</h3>
<h3 class="fw5 f4">Make the next market-ready version of the solution</h3>
<p>We build the solution following agile/lean
software development best practices and get feedback from users as fast
as possible.</p>
</div>
<div class="w5 w-30-ns mv3 mh1 pa2 dwyl-dark-grey dib-ns tl dtc-ns v-top center">
<div class="w5 w-30-ns mv3 mh1 pa2 dwyl-dark-gray dib-ns tl dtc-ns v-top center">
<h3 class="br-100 w2 h2 tc dtc v-mid bg-yellow">3</h3>
<h3 class="fw5 f4">Review the feedback and return to step 1</h3>
<p>We review all feedback and confirm we are
Expand All @@ -98,7 +103,7 @@ <h3 class="fw5 f4">Review the feedback and return to step 1</h3>
</div>

<h2 class="dwyl-mint w-80 w-40-ns pl3-ns dib v-top b">Meet your needs quickly and without waste.</h2>
<h3 class="dwyl-dark-grey w-70 w-50-ns pl3-ns dib b">By iterating over these 3 simple steps we
<h3 class="dwyl-dark-gray w-70 w-50-ns pl3-ns dib b">By iterating over these 3 simple steps we
maintain a tight feedback loop between the people building and the people
using.</h3>
<div class="tc mt4-ns pl6-ns pb5">
Expand All @@ -110,7 +115,7 @@ <h3 class="dwyl-dark-grey w-70 w-50-ns pl3-ns dib b">By iterating over these 3 s
<div class="dwyl-bg-mint white">
<h1 class="pv3 text-shadow f1 mv0 tc">Training <span class="sr-only">and</span>+ Workshops</h1>
</div>
<div class="pt2 pl3 pl6-ns dwyl-dark-grey">
<div class="pt2 pl3 pl6-ns dwyl-dark-gray">
<h3 class="fw9 f3 w-80 w-100-ns center tl">Hands-on learning to Empower and Inspire.</h3>
<p class="w-80 w-100-ns center tl">Join one of our masterclasses or tailor a class to suit your needs</p>
<ul class="b pl4 tl">
Expand Down Expand Up @@ -142,10 +147,10 @@ <h1 class="mt0-ns mb3 pl4-ns f-xl fw9">Let's</h1>
<h1 class="pl4-ns mt3 f-xl fw9">Talk</h1>
</div>
<div class="w-80-ns w-90 ml3">
<a href="tel:07708796446" class="link"><h2 class="tr white"><span class="dwyl-dark-grey fw9">Tel:</span> 07708796446</h2></a>
<a href="mailto:hello@dwyl.io" class="link"><h2 class="tr white"><span class="dwyl-dark-grey fw9">Email:</span> hello@dwyl.io</h2><a/>
<h2 class="tr white"><span class="dwyl-dark-grey lh-copy fw9">Address:</span> 16 Palmers Road,<br>London, E2 0SY, UK</h2>
<p class="tr dwyl-dark-grey">(We'll get back to you within 24 hours)</p>
<a href="tel:07708796446" class="link"><h2 class="tr white"><span class="dwyl-dark-gray fw9">Tel:</span> 07708796446</h2></a>
<a href="mailto:hello@dwyl.io" class="link"><h2 class="tr white"><span class="dwyl-dark-gray fw9">Email:</span> hello@dwyl.io</h2><a/>
<h2 class="tr white"><span class="dwyl-dark-gray lh-copy fw9">Address:</span> 16 Palmers Road,<br>London, E2 0SY, UK</h2>
<p class="tr dwyl-dark-gray">(We'll get back to you within 24 hours)</p>
</div>
</div>

Expand All @@ -156,17 +161,17 @@ <h2 class="tr white"><span class="dwyl-dark-grey lh-copy fw9">Address:</span> 16

<fieldset class="bn tl">
<label for="name" class="db mb2">Your Name</label>
<input id="name" name="name" class="br2 bw-s dwyl-b--dark-grey pa2 w-90 border-box" placeholder="Tim Berners-Lee" />
<input id="name" name="name" class="br2 ba dwyl-b--dark-gray pa2 w-90 border-box" placeholder="Tim Berners-Lee" />
</fieldset>

<fieldset class="bn tl">
<label for="email" class="db mb2">Email Address</label>
<input id="email" name="email" class="br2 bw-s dwyl-b--dark-grey pa2 w-90 border-box" type="email" value="" required placeholder="tim@cern.com" />
<input id="email" name="email" class="br2 ba dwyl-b--dark-gray pa2 w-90 border-box" type="email" value="" required placeholder="tim@cern.com" />
</fieldset>

<fieldset class="bn tl">
<label for="message" class="db mb2">Message</label>
<textarea id="message" name="message" class="br2 bw-s w-90 dwyl-b--dark-grey pa2" rows="10" placeholder="What problem can we solve for you?"></textarea>
<textarea id="message" name="message" class="br2 ba w-90 dwyl-b--dark-gray pa2" rows="10" placeholder="What problem can we solve for you?"></textarea>
</fieldset>

<button class="bn dib link mt2 mb3 ml3 ph3 pv3 dwyl-bg-mint white br2 f4 shadow-4 pointer">
Expand All @@ -183,7 +188,7 @@ <h2>
<!-- END -->
</div>
</section>
<footer class="dwyl-bg-dark-grey white pt1 pt3-ns pb4 tc center">
<footer class="dwyl-bg-dark-gray white pt1 pt3-ns pb4 tc center">
<div class="bb b--white w-90-ns w-80 center">
<ul class="list tc pl0 pt3 pb3-ns mv0 f3 f5-ns ">
<li class="ph4 mh2 fw3 f6 di-ns pv2 pv0-ns"><a href="/" class="white link">Home</a></li>
Expand All @@ -193,10 +198,10 @@ <h2>
<li class="ph4 mh2 fw3 f6 di-ns pv2 pv0-ns"><a href="/blog" class="dwyl-mint link">Blog</a></li>
</ul>
<a href="https://twitter.com/dwyl" class="link">
<i class="fa fa-twitter ph2 ph4-ns pb4 dwyl-light-grey f2" aria-hidden="true"></i>
<i class="fa fa-twitter ph2 ph4-ns pb4 dwyl-light-gray f2" aria-hidden="true"></i>
</a>
<a href="https://github.com/dwyl" class="link">
<i class="fa fa-github ph2 ph4-ns pb4 dwyl-light-grey f2" aria-hidden="true"></i>
<i class="fa fa-github ph2 ph4-ns pb4 dwyl-light-gray f2" aria-hidden="true"></i>
</a>
</div>
<p class="w-80 w-90-ns center f7 pt2-ns">
Expand Down