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

Feat/cards typography #72

Merged
merged 4 commits into from
Jul 1, 2019
Merged

Feat/cards typography #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9e5f603
refactor(app): add typographist
mg901 Jun 27, 2019
56e5bb2
style(app): add rhythm for card
mg901 Jun 27, 2019
32a245e
style(app): add styles for headings
mg901 Jun 27, 2019
70fdfb6
chore: edits to pr
mg901 Jul 1, 2019
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
22,769 changes: 0 additions & 22,769 deletions package-lock.json
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@
"@emotion/serialize": "^0.11.4",
"@hot-loader/react-dom": "^16.8.3",
"@svgr/webpack": "^4.2.0",
"@typographist/styled": "^1.3.2",
"acorn": "^6.1.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "9.0.0",
Expand Down
29 changes: 22 additions & 7 deletions src/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,32 @@ import { ToggleThemeProvider } from "@lib/theme-context"
import { lightTheme } from "@howtocards/ui/themes/light"
import { darkTheme } from "@howtocards/ui/themes/dark"

import { TypographistProvider } from "@typographist/styled"
import { Routes } from "./routes"
import { GlobalStyles } from "./global-styles"

export const config = {
base: "14px",
Copy link

Choose a reason for hiding this comment

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

Why is not rems?

Copy link
Member

Choose a reason for hiding this comment

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

Typographist requires base in pixels. Because pixels is absolute independent unit

lineHeight: 1.4,
ratio: "28px at 6",
tablet: {
breakpoint: "768px",
},
desktop: {
breakpoint: "992px",
},
}

export const App = hot(module)(() => (
<ToggleThemeProvider light={lightTheme} dark={darkTheme}>
<>
<Normalize />
<GlobalStyles />
<AccountLoader>
<Routes />
</AccountLoader>
</>
<TypographistProvider config={config} withToggle>
<>
<Normalize />
<GlobalStyles />
<AccountLoader>
<Routes />
</AccountLoader>
</>
</TypographistProvider>
</ToggleThemeProvider>
))
6 changes: 0 additions & 6 deletions src/global-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,8 @@
import { createGlobalStyle } from "styled-components"

export const GlobalStyles = createGlobalStyle`
html {
font-size: 10px;
}

body {
font-size: 1.4rem;
font-family: "Alegreya Sans", "Open Sans", sans-serif;
margin: 0;
height: 100vh;
overflow: hidden;
-webkit-font-smoothing: antialiased;
Expand Down
51 changes: 48 additions & 3 deletions src/ui/atoms/heading.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,72 @@
/* eslint-disable no-magic-numbers */
import styled from "styled-components"
import PropTypes from "prop-types"
import { steps } from "@typographist/styled"

export const H1 = styled.h1`
margin: ${(p) => (p.narrow ? 0 : 3)}rem 0;
${steps(6)};
line-height: 4rem;
margin-top: 6rem;
margin-bottom: 2rem;
user-select: none;
`
H1.propTypes = {
narrow: PropTypes.bool,
}

export const H2 = styled.h2`
margin: ${(p) => (p.narrow ? 0 : 2)}rem 0;
${steps(5)};
line-height: 3rem;
margin-top: 5rem;
margin-bottom: 1rem;
user-select: none;
`
H2.propTypes = {
narrow: PropTypes.bool,
}

export const H3 = styled.h3`
margin: ${(p) => (p.narrow ? 0 : 2)}rem 0;
${steps(4)};
line-height: 2rem;
margin-top: 4rem;
margin-bottom: 1rem;
user-select: none;
`
H3.propTypes = {
narrow: PropTypes.bool,
}

export const H4 = styled.h4`
${steps(3)};
line-height: 2rem;
margin-top: 3rem;
margin-bottom: 1rem;
user-select: none;
`

H4.propTypes = {
Copy link

@stuneak stuneak Jun 28, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

Wouldn't it be better to use flow instead of proptypes?

narrow: PropTypes.bool,
}

export const H5 = styled.h4`
${steps(2)};
line-height: 2rem;
margin-top: 5rem;
margin-bottom: 1rem;
user-select: none;
`

H5.propTypes = {
narrow: PropTypes.bool,
}

export const H6 = styled.h4`
${steps(1)};
line-height: 2rem;
margin-top: 5rem;
margin-bottom: 1rem;
user-select: none;
`
H6.propTypes = {
narrow: PropTypes.bool,
}
4 changes: 2 additions & 2 deletions src/ui/templates/sidebar-template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from "react"
import PropTypes from "prop-types"
import styled from "styled-components"
import { above } from "styled-breakpoints"
import { up } from "@typographist/styled"
Copy link
Member

Choose a reason for hiding this comment

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

Maybe remove styled-breakpoints from dependencies?


export const SidebarTemplate = ({ sidebar, children, footer }) => (
<SidebarContainer>
Expand Down Expand Up @@ -36,7 +36,7 @@ const SidebarContainer = styled.div`
"main"
"footer";

${above("tablet")} {
${up("tablet")} {
grid-template-rows: 1fr auto;
grid-template-columns: auto 30%;
grid-template-areas:
Expand Down
30 changes: 30 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2034,6 +2034,26 @@
resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-12.0.12.tgz#45dd1d0638e8c8f153e87d296907659296873916"
integrity sha512-SOhuU4wNBxhhTHxYaiG5NY4HBhDIDnJF60GU+2LqHAdKKer86//e4yg69aENCtQ04n0ovz+tq2YPME5t5yp4pw==

"@typographist/core@^19.1.1":
version "19.1.1"
resolved "https://registry.yarnpkg.com/@typographist/core/-/core-19.1.1.tgz#066f819ac3b1b2d2fa03e62db65c6a8df0852d8a"
integrity sha512-TXkx6in0SErxNO39tDMEmMV2I/9hG05YZHx1k2yRfD2P7XSOuPYAstnlvGA3y7w9wAn9xQPKfyDD6dCdGPc80A==

"@typographist/styled-devtools@^2.0.7":
version "2.0.7"
resolved "https://registry.yarnpkg.com/@typographist/styled-devtools/-/styled-devtools-2.0.7.tgz#85f45f92e9d6242ae0ee1ca9098926041d866578"
integrity sha512-gpPS18AJEX/hRw5rkxTYfx5rC2irGU00ATQ5wjfkAoWJ1uqsxR+DRwAUkKiVJK2XA0ihP5hxLpteQMjbf3tIMA==

"@typographist/styled@^1.3.2":
version "1.3.2"
resolved "https://registry.yarnpkg.com/@typographist/styled/-/styled-1.3.2.tgz#dfa9aa5d0b4cab8b375cabef495f15bbf8b9a13a"
integrity sha512-VdQjslO7RRsY38OxxeAqKl5B8BeQue4VuS3OJEVBnaZhqLU6bhzXSG0Vgl7bRhp9R7mPDoInfvsF8mbhQgNwlQ==
dependencies:
"@typographist/core" "^19.1.1"
"@typographist/styled-devtools" "^2.0.7"
ramda "0.26.1"
styled-breakpoints "6.6.2"

"@webassemblyjs/ast@1.7.11":
version "1.7.11"
resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.7.11.tgz#b988582cafbb2b095e8b556526f30c90d057cace"
Expand Down Expand Up @@ -11380,6 +11400,11 @@ raf@3.4.1, raf@^3.4.0:
dependencies:
performance-now "^2.1.0"

ramda@0.26.1:
version "0.26.1"
resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
integrity sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ==

randomatic@^3.0.0:
version "3.1.1"
resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-3.1.1.tgz#b776efc59375984e36c537b2f51a1f0aff0da1ed"
Expand Down Expand Up @@ -13303,6 +13328,11 @@ style-loader@0.23.1:
loader-utils "^1.1.0"
schema-utils "^1.0.0"

styled-breakpoints@6.6.2:
version "6.6.2"
resolved "https://registry.yarnpkg.com/styled-breakpoints/-/styled-breakpoints-6.6.2.tgz#85094a8d1bf28d29db43d1031b3e6c364d226e17"
integrity sha512-JrrUcAudLhJexy5V7OEbS7Ji2qKbV0+l/A4buQoxrYx+UXR6UNuI8GLYO1vNk7IMBc+dTMe3+KeiZyxqK5B+5w==

styled-breakpoints@^4.0.3:
version "4.0.3"
resolved "https://registry.yarnpkg.com/styled-breakpoints/-/styled-breakpoints-4.0.3.tgz#ce1269bf7c5ada4962eecb25e630287355f21f2c"
Expand Down