Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #57 from corewar/add-tailwind
Add tailwind
- Loading branch information
Showing
20 changed files
with
269 additions
and
234 deletions.
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,27 +1,7 @@ | ||
import styled from 'styled-components' | ||
import React from 'react' | ||
|
||
import { colour, space } from '../common/theme' | ||
|
||
const FeatureButton = styled.a` | ||
border: 2px solid ${colour.white}; | ||
border-radius: 5px; | ||
margin: ${space.m}; | ||
padding: ${space.m}; | ||
background: none; | ||
display: inline-block; | ||
min-width: 200px; | ||
color: ${colour.lightgrey}; | ||
font-weight: 300; | ||
text-align: center; | ||
text-decoration: none; | ||
transition: 0.2s; | ||
:hover { | ||
background-color: ${colour.lightbg}; | ||
color: ${colour.white}; | ||
cursor: pointer; | ||
transition: 0.2s; | ||
} | ||
` | ||
|
||
export default FeatureButton | ||
export default ({ children }) => ( | ||
<button className="min-w-200 rounded-md m-4 p-4 text-lightgrey font-light text-center border-2 border-white hover:bg-lightbg hover:text-white cursor-pointer"> | ||
{children} | ||
</button> | ||
) |
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 |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import React from 'react' | ||
|
||
export default ({ route, children }) => ( | ||
<a | ||
className="text-white font-display mr-2 ml-2 lg:ml-6 lg:mr-6 leading-loose border-b-2 border-transparent hover:border-blue hover:no-underline cursor-pointer" | ||
href={route} | ||
> | ||
{children} | ||
</a> | ||
) |
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 |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import React from 'react' | ||
|
||
export default ({ route, children }) => ( | ||
<a | ||
className="block md:inline-block mt-4 md:mt-0 md:ml-6 no-underline text-white font-display hover:no-underline cursor-pointer" | ||
href={route} | ||
> | ||
{children} | ||
</a> | ||
) |
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 |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import React from 'react' | ||
|
||
export default ({ children }) => ( | ||
<button className="min-w-200 rounded-md m-4 p-4 text-darkbg font-bold text-center border-2 border-white bg-white hover:bg-lightbg hover:text-white"> | ||
{children} | ||
</button> | ||
) |
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 |
---|---|---|
@@ -1,56 +1,51 @@ | ||
import React from 'react' | ||
import styled from 'styled-components' | ||
import React, { useState } from 'react' | ||
|
||
import { colour, space } from '../common/theme' | ||
import { media } from '../common/mediaQuery' | ||
import Logo from '../topbar/logo' | ||
import Link from './link' | ||
import MobileLink from './mobileLink' | ||
|
||
const Header = styled.header` | ||
display: flex; | ||
flex-direction: row-reverse; | ||
margin: 0 ${space.xl}; | ||
${media.phone`margin: 0;`} | ||
const links = [ | ||
{ route: `/app/editor/src`, text: `play` }, | ||
{ route: `/learn`, text: `learn` }, | ||
{ route: `/#features`, text: `features` }, | ||
{ route: `/sign-up`, text: `sign up` }, | ||
{ route: `/contact-us`, text: `contact us` }, | ||
{ route: `https://github.com/corewar/corewar.io`, text: `code` } | ||
] | ||
|
||
a { | ||
color: ${colour.grey}; | ||
padding-bottom: ${space.s}; | ||
margin: 0 ${space.s}; | ||
${media.phone`margin: 0;`} | ||
display: inline-block; | ||
min-width: 80px; | ||
text-decoration: none; | ||
font-weight: 400; | ||
text-align: center; | ||
border-bottom: 2px solid transparent; | ||
transition: 0.5s; | ||
} | ||
a:hover { | ||
border-bottom: 2px solid ${colour.blue}; | ||
colour: ${colour.white}; | ||
transition: 0.5s; | ||
} | ||
` | ||
|
||
const Nav = styled.nav` | ||
display: flex; | ||
flex-direction: row; | ||
justify-content: flex-end; | ||
${media.phone`justify-content: center;`} | ||
align-items: center; | ||
width: 100%; | ||
` | ||
|
||
const SiteNav = () => ( | ||
<Header> | ||
<Nav> | ||
<a href={`/app/editor/src`}>play</a> | ||
<a href={`/learn`}>learn</a> | ||
<a href={`/#features`}>features</a> | ||
<a href={`/sign-up`}>sign up</a> | ||
<a href={`/contact-us`}>contact us</a> | ||
<a href={`https://github.com/corewar/corewar`}>code</a> | ||
</Nav> | ||
</Header> | ||
) | ||
const SiteNav = () => { | ||
const [isExpanded, toggleExpansion] = useState(false) | ||
return ( | ||
<header className="bg-secondary font-display flex"> | ||
<div className="w-4/5 mx-auto py-4 flex flex-wrap items-center justify-between"> | ||
<Logo /> | ||
<nav className="hidden md:block"> | ||
{links.map(link => ( | ||
<Link key={link.route} route={link.route}> | ||
{link.text} | ||
</Link> | ||
))} | ||
</nav> | ||
<button | ||
className="md:hidden text-white border-white border-2 rounded p-2" | ||
onClick={() => toggleExpansion(!isExpanded)} | ||
> | ||
Menu | ||
</button> | ||
<nav | ||
className={`${ | ||
isExpanded ? `block` : `hidden` | ||
} md:hidden md:flex md:items-center mt-4 w-full md:w-auto border-t-2 border-white`} | ||
> | ||
{links.map(link => ( | ||
<MobileLink key={link.text} route={link.route}> | ||
{link.text} | ||
</MobileLink> | ||
))} | ||
</nav> | ||
</div> | ||
</header> | ||
) | ||
} | ||
|
||
export default SiteNav |
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
File renamed without changes.
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 |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import React from 'react' | ||
|
||
export default ({ children, className }) => ( | ||
<section | ||
className={`flex flex-row flex-wrap items-center justify-center p-8 my-4 md:my-16 mx-0 ${className}`} | ||
> | ||
{children} | ||
</section> | ||
) |
7 changes: 7 additions & 0 deletions
7
packages/corewar-ui/src/features/onboarding/featureDescription.js
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 |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import React from 'react' | ||
|
||
export default ({ children }) => ( | ||
<p className="text-xl md:text-2xl leading-10 m-4 md:m-16 font-light md:flex-feature"> | ||
{children} | ||
</p> | ||
) |
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 |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import React from 'react' | ||
|
||
export default ({ children }) => ( | ||
<div className="flex flex-col items-center flex-1 min-h-200 mt-8 cursor-pointer guidance"> | ||
{children} | ||
</div> | ||
) |
11 changes: 11 additions & 0 deletions
11
packages/corewar-ui/src/features/onboarding/guidanceText.js
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 |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import React from 'react' | ||
import Octicon from 'react-octicon' | ||
|
||
import SpeechBubble from './speechBubble' | ||
|
||
export default ({ children }) => ( | ||
<section className="md:opacity-0 flex flex-row items-center justify-start m-4 md:m-8"> | ||
<Octicon className="text-4xl p-8" name="hubot" /> | ||
<SpeechBubble>{children}</SpeechBubble> | ||
</section> | ||
) |
Oops, something went wrong.