-
Notifications
You must be signed in to change notification settings - Fork 14
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.
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
Burger menu #264
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
8b9a943
Adds burger symbol, #249
7e7160f
Removes vh-100 and fixed classes, #249
a62e08c
Fixes nav and removes min height, #249
f57704b
Adds menu class so display changes with checkbox, #249
cb79046
Adds min height so nav always show dwyl, #249
276a544
Positions dwyl absolutely on mob, #249
d9b0e87
Increases padding to account for mobile navbar, #260
48c7aa8
Adds 'home' to nav on mobile, #249
4a3c62a
Amends padding for mob menu, #249
1101f4f
Replaces vh with rem
a84d2af
Replaces custom class with tachyons substitute, #265
03f39b2
Substitutes grey for gray, #266
c80801a
Refactors to remove overflow-hidden from custom class, #266
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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"> | ||
|
@@ -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 | ||
|
@@ -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"> | ||
|
@@ -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"> | ||
|
@@ -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:[email protected]" class="link"><h2 class="tr white"><span class="dwyl-dark-grey fw9">Email:</span> [email protected]</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:[email protected]" class="link"><h2 class="tr white"><span class="dwyl-dark-gray fw9">Email:</span> [email protected]</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> | ||
|
||
|
@@ -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="[email protected]" /> | ||
<input id="email" name="email" class="br2 ba dwyl-b--dark-gray pa2 w-90 border-box" type="email" value="" required placeholder="[email protected]" /> | ||
</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"> | ||
|
@@ -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> | ||
|
@@ -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"> | ||
|
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
😉
There was a problem hiding this comment.
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 😉