git.iko.soy/rowtype-yoga/psfp
on master help sign in
Font-fiddling
f86fac1Mark Eibes
blog/package-lock.json+22
compare with master
unifiedsplit
@@ -11,7 +11,9 @@
11 "dependencies": {
11 "dependencies": {
12 "@emotion/core": "^10.0.28",
12 "@emotion/core": "^10.0.28",
13 "@fontsource/cormorant-garamond": "^4.1.0",
13 "@fontsource/cormorant-garamond": "^4.1.0",
14+ "@fontsource/cormorant-sc": "^4.1.0",
14 "@fontsource/inter": "^4.1.0",
15 "@fontsource/inter": "^4.1.0",
16+ "@fontsource/pt-serif": "^4.1.0",
15 "@material-ui/styles": "^4.9.0",
17 "@material-ui/styles": "^4.9.0",
16 "@mdx-js/mdx": "^1.1.5",
18 "@mdx-js/mdx": "^1.1.5",
17 "@mdx-js/react": "^1.1.5",
19 "@mdx-js/react": "^1.1.5",
@@ -1729,11 +1731,21 @@
1729 "resolved": "https://registry.npmjs.org/@fontsource/cormorant-garamond/-/cormorant-garamond-4.1.0.tgz",
1731 "resolved": "https://registry.npmjs.org/@fontsource/cormorant-garamond/-/cormorant-garamond-4.1.0.tgz",
1730 "integrity": "sha512-Q9q+uj3ZmBrqn3knh5pVAB6kVXPDfut74U5lGxhf3gHQihrckOv/0Cw3ObKMc69r6OBk+IRcQN7A5d1aVVBGhw=="
1732 "integrity": "sha512-Q9q+uj3ZmBrqn3knh5pVAB6kVXPDfut74U5lGxhf3gHQihrckOv/0Cw3ObKMc69r6OBk+IRcQN7A5d1aVVBGhw=="
1731 },
1733 },
1734+ "node_modules/@fontsource/cormorant-sc": {
1735+ "version": "4.1.0",
1736+ "resolved": "https://registry.npmjs.org/@fontsource/cormorant-sc/-/cormorant-sc-4.1.0.tgz",
1737+ "integrity": "sha512-cyXp0MZCr/vU+WF6Og5H8/Xn0rKuiMZ0DlbSjChm6HJJHbok3vuZwOAtzEn9rCV2aAxqBk6ARIl1l0aWcfSAoQ=="
1738+ },
1732 "node_modules/@fontsource/inter": {
1739 "node_modules/@fontsource/inter": {
1733 "version": "4.1.0",
1740 "version": "4.1.0",
1734 "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.1.0.tgz",
1741 "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.1.0.tgz",
1735 "integrity": "sha512-v1JHGLAejSV0ec6fVR31vrojpM+JUiNVn0xJxL/ngmbyClDEf8qna5NFsu/xef67KT2kQ2YaU+wCuQEQHG55sw=="
1742 "integrity": "sha512-v1JHGLAejSV0ec6fVR31vrojpM+JUiNVn0xJxL/ngmbyClDEf8qna5NFsu/xef67KT2kQ2YaU+wCuQEQHG55sw=="
1736 },
1743 },
1744+ "node_modules/@fontsource/pt-serif": {
1745+ "version": "4.1.0",
1746+ "resolved": "https://registry.npmjs.org/@fontsource/pt-serif/-/pt-serif-4.1.0.tgz",
1747+ "integrity": "sha512-N2EpV4J0wgrwrNsEUG0wz3uX/wD44Yd3Tnm2vujbFHOCIBSSTAjiOImpl65ac7M7jRXxFnEpHjfofeDKSgvnFg=="
1748+ },
1737 "node_modules/@graphql-tools/batch-execute": {
1749 "node_modules/@graphql-tools/batch-execute": {
1738 "version": "7.0.0",
1750 "version": "7.0.0",
1739 "resolved": "https://registry.npmjs.org/@graphql-tools/batch-execute/-/batch-execute-7.0.0.tgz",
1751 "resolved": "https://registry.npmjs.org/@graphql-tools/batch-execute/-/batch-execute-7.0.0.tgz",
@@ -35244,11 +35256,21 @@
35244 "resolved": "https://registry.npmjs.org/@fontsource/cormorant-garamond/-/cormorant-garamond-4.1.0.tgz",
35256 "resolved": "https://registry.npmjs.org/@fontsource/cormorant-garamond/-/cormorant-garamond-4.1.0.tgz",
35245 "integrity": "sha512-Q9q+uj3ZmBrqn3knh5pVAB6kVXPDfut74U5lGxhf3gHQihrckOv/0Cw3ObKMc69r6OBk+IRcQN7A5d1aVVBGhw=="
35257 "integrity": "sha512-Q9q+uj3ZmBrqn3knh5pVAB6kVXPDfut74U5lGxhf3gHQihrckOv/0Cw3ObKMc69r6OBk+IRcQN7A5d1aVVBGhw=="
35246 },
35258 },
35259+ "@fontsource/cormorant-sc": {
35260+ "version": "4.1.0",
35261+ "resolved": "https://registry.npmjs.org/@fontsource/cormorant-sc/-/cormorant-sc-4.1.0.tgz",
35262+ "integrity": "sha512-cyXp0MZCr/vU+WF6Og5H8/Xn0rKuiMZ0DlbSjChm6HJJHbok3vuZwOAtzEn9rCV2aAxqBk6ARIl1l0aWcfSAoQ=="
35263+ },
35247 "@fontsource/inter": {
35264 "@fontsource/inter": {
35248 "version": "4.1.0",
35265 "version": "4.1.0",
35249 "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.1.0.tgz",
35266 "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.1.0.tgz",
35250 "integrity": "sha512-v1JHGLAejSV0ec6fVR31vrojpM+JUiNVn0xJxL/ngmbyClDEf8qna5NFsu/xef67KT2kQ2YaU+wCuQEQHG55sw=="
35267 "integrity": "sha512-v1JHGLAejSV0ec6fVR31vrojpM+JUiNVn0xJxL/ngmbyClDEf8qna5NFsu/xef67KT2kQ2YaU+wCuQEQHG55sw=="
35251 },
35268 },
35269+ "@fontsource/pt-serif": {
35270+ "version": "4.1.0",
35271+ "resolved": "https://registry.npmjs.org/@fontsource/pt-serif/-/pt-serif-4.1.0.tgz",
35272+ "integrity": "sha512-N2EpV4J0wgrwrNsEUG0wz3uX/wD44Yd3Tnm2vujbFHOCIBSSTAjiOImpl65ac7M7jRXxFnEpHjfofeDKSgvnFg=="
35273+ },
35252 "@graphql-tools/batch-execute": {
35274 "@graphql-tools/batch-execute": {
35253 "version": "7.0.0",
35275 "version": "7.0.0",
35254 "resolved": "https://registry.npmjs.org/@graphql-tools/batch-execute/-/batch-execute-7.0.0.tgz",
35276 "resolved": "https://registry.npmjs.org/@graphql-tools/batch-execute/-/batch-execute-7.0.0.tgz",
blog/package.json+2
@@ -6,7 +6,9 @@
6 "dependencies": {
6 "dependencies": {
7 "@emotion/core": "^10.0.28",
7 "@emotion/core": "^10.0.28",
8 "@fontsource/cormorant-garamond": "^4.1.0",
8 "@fontsource/cormorant-garamond": "^4.1.0",
9+ "@fontsource/cormorant-sc": "^4.1.0",
9 "@fontsource/inter": "^4.1.0",
10 "@fontsource/inter": "^4.1.0",
11+ "@fontsource/pt-serif": "^4.1.0",
10 "@material-ui/styles": "^4.9.0",
12 "@material-ui/styles": "^4.9.0",
11 "@mdx-js/mdx": "^1.1.5",
13 "@mdx-js/mdx": "^1.1.5",
12 "@mdx-js/react": "^1.1.5",
14 "@mdx-js/react": "^1.1.5",
blog/src/components/MDXProvider.purs+83−99
@@ -36,17 +36,17 @@ import Yoga.FillInTheGaps.Logic (Segment, findResult, parseSegments, toCode)
36import Yoga.Helpers ((?||))
36import Yoga.Helpers ((?||))
37import Yoga as Y
37import Yoga as Y
38
38
39−type PreProps
39+type PreProps =
40− = { children ∷
40+ { children ∷
41+ Nullable
42+ { props ∷
41 Nullable
43 Nullable
42− { props ∷
43− Nullable
44− { mdxType ∷ Nullable String
44+ { mdxType ∷ Nullable String
45− , children ∷ Nullable String
45+ , children ∷ Nullable String
46− , className ∷ Nullable String
46+ , className ∷ Nullable String
47− }
48 }
47 }
48+ }
49− }
49+ }
50
50
51isQuiz ∷ MDX -> Boolean
51isQuiz ∷ MDX -> Boolean
52isQuiz (MDX a) =
52isQuiz (MDX a) =
@@ -55,9 +55,9 @@ isQuiz (MDX a) =
55 && ((unsafeCoerce a).props.children.props.mdxType == "code")
55 && ((unsafeCoerce a).props.children.props.mdxType == "code")
56 && ((unsafeCoerce a).props.children.props.children # parseSegments # isJust)
56 && ((unsafeCoerce a).props.children.props.children # parseSegments # isJust)
57
57
58−type MdxProviderProps
58+type MdxProviderProps =
59− = { children ∷ ReactChildren MDX
59+ { children ∷ ReactChildren MDX
60− }
60+ }
61
61
62mkLiveMdxProviderComponent ∷ FetchImpl -> Effect (ReactComponent MdxProviderProps)
62mkLiveMdxProviderComponent ∷ FetchImpl -> Effect (ReactComponent MdxProviderProps)
63mkLiveMdxProviderComponent fetchImpl = mkMdxProviderComponent (apiCompiler fetchImpl)
63mkLiveMdxProviderComponent fetchImpl = mkMdxProviderComponent (apiCompiler fetchImpl)
@@ -75,38 +75,33 @@ mkMdxProviderComponent compiler = do
75 visibleUntil /\ updateVisible <- useState 1
75 visibleUntil /\ updateVisible <- useState 1
76 let
76 let
77 onFailure title kids = log "Oopsie daisy"
77 onFailure title kids = log "Oopsie daisy"
78−
79 onSuccess = updateVisible (_ + one)
78 onSuccess = updateVisible (_ + one)
80−
81 mapVisible ∷ Int -> MDX -> _
79 mapVisible ∷ Int -> MDX -> _
82 mapVisible i kid =
80 mapVisible i kid =
83 { accum: i + if isQuiz kid then one else zero
81 { accum: i + if isQuiz kid then one else zero
84 , value: if (i < visibleUntil) then Just kid else Nothing
82 , value: if (i < visibleUntil) then Just kid else Nothing
85 }
83 }
86−
87 visibleKids ∷ Array MDX
84 visibleKids ∷ Array MDX
88 visibleKids =
85 visibleKids =
89 reactChildrenToArray children
86 reactChildrenToArray children
90 # mapAccumL mapVisible zero
87 # mapAccumL mapVisible zero
91 # _.value
88 # _.value
92 # Array.catMaybes
89 # Array.catMaybes
93−
94 contentMDX ∷ ReactChildren MDX
90 contentMDX ∷ ReactChildren MDX
95 contentMDX = reactChildrenFromArray visibleKids
91 contentMDX = reactChildrenFromArray visibleKids
96−
97 paragraph parChildren =
92 paragraph parChildren =
98 E.element M.p
93 E.element M.p
99 ( { layout: M.layout true
94 ( { layout: M.layout true
100 , css:
95 , css:
101− E.css
96+ E.css
102− { fontFamily: E.str "Cormorant Garamond"
97+ { fontFamily: E.str "Cormorant Garamond"
103− , fontSize: E.str "min(calc(var(--s-1) + 2.4vw), var(--s1))"
98+ , fontSize: E.str "min(calc(var(--s-1) + 2.4vw), var(--s1))"
104− , lineHeight: E.var "--line-height-small"
99+ , lineHeight: E.var "--line-height-small"
105− , "-ms-hyphens": E.str "auto"
100+ , "-msHyphens": E.str "auto"
106− , "-webkit-hyphens": E.str "auto"
101+ , "-webkitHyphens": E.str "auto"
107− , hyphens: E.str "auto"
102+ , hyphens: E.str "auto"
108− , overflow: E.str "hidden"
103+ , overflow: E.str "hidden"
109− }
104+ }
110 , className: "blog-p"
105 , className: "blog-p"
111 , children: parChildren
106 , children: parChildren
112 }
107 }
@@ -114,65 +109,56 @@ mkMdxProviderComponent compiler = do
114 let
109 let
115 mdxComponents =
110 mdxComponents =
116 { "Sc":
111 { "Sc":
117− \(props :: { children :: String }) ->
112+ \(props ∷ { children ∷ String }) ->
118− smallCaps props.children
113+ smallCaps props.children
119 , h1:
114 , h1:
120− \(props ∷ { | M.MotionProps Props_h1 }) ->
115+ \(props ∷ { | M.MotionProps Props_h1 }) ->
121− React.element M.h1 (props { layout = M.layout true })
116+ React.element M.h1 (props { layout = M.layout true })
122 , h2:
117 , h2:
123− \(props ∷ { | M.MotionProps Props_h2 }) ->
118+ \(props ∷ { | M.MotionProps Props_h2 }) ->
124− React.element M.h2 (props { layout = M.layout true })
119+ React.element M.h2 (props { layout = M.layout true })
125 , h3:
120 , h3:
126− \(props ∷ { | M.MotionProps Props_h3 }) ->
121+ \(props ∷ { | M.MotionProps Props_h3 }) ->
127− React.element M.h3 (props { layout = M.layout true })
122+ React.element M.h3 (props { layout = M.layout true })
128 , h4:
123 , h4:
129− \(props ∷ { | M.MotionProps Props_h4 }) ->
124+ \(props ∷ { | M.MotionProps Props_h4 }) ->
130− React.element M.h4 (props { layout = M.layout true })
125+ React.element M.h4 (props { layout = M.layout true })
131 , hr: (const $ R.hr {})
126 , hr: (const $ R.hr {})
132 , p:
127 , p:
133− \(props ∷ { children :: Array JSX }) ->
128+ \(props ∷ { children ∷ Array JSX }) ->
134− paragraph props.children
129+ paragraph props.children
135 , inlineCode:
130 , inlineCode:
136− \props -> do
131+ \props -> do
137− R.span { children: props.children }
132+ R.span { children: props.children }
138 , pre:
133 , pre:
139− mkFn2 \(props ∷ PreProps) other -> do
134+ mkFn2 \(props ∷ PreProps) other -> do
140− let
135+ let
141− childrenQ = Nullable.toMaybe props.children
136+ childrenQ = Nullable.toMaybe props.children
142−
143− propsQ = (_.props >>> Nullable.toMaybe) =<< childrenQ
137+ propsQ = (_.props >>> Nullable.toMaybe) =<< childrenQ
144−
145− mdxTypeQ = (_.mdxType >>> Nullable.toMaybe) =<< propsQ
138+ mdxTypeQ = (_.mdxType >>> Nullable.toMaybe) =<< propsQ
146−
147− childrenQ2 = (_.children >>> Nullable.toMaybe) =<< propsQ
139+ childrenQ2 = (_.children >>> Nullable.toMaybe) =<< propsQ
148−
149− classNameQ = (_.className >>> Nullable.toMaybe) =<< propsQ
140+ classNameQ = (_.className >>> Nullable.toMaybe) =<< propsQ
150−
151− isCode = fromMaybe false (mdxTypeQ <#> eq "code")
141+ isCode = fromMaybe false (mdxTypeQ <#> eq "code")
152−
153− codeQ = childrenQ2
142+ codeQ = childrenQ2
154−
155− height =
143+ height =
156− (fromMaybe 200 >>> show >>> (_ <> "px")) do
144+ (fromMaybe 200 >>> show >>> (_ <> "px")) do
157− code <- codeQ
145+ code <- codeQ
158− pure
146+ pure
159− ( String.split (String.Pattern "\n") code
147+ ( String.split (String.Pattern "\n") code
160− # Array.length
148+ # Array.length
161− # \x -> (x * 12) + 100
149+ # \x -> (x * 12) + 100
162− )
150+ )
163−
164− language = fromMaybe "" (classNameQ >>= String.stripPrefix (String.Pattern "language-"))
151+ language = fromMaybe "" (classNameQ >>= String.stripPrefix (String.Pattern "language-"))
165−
166− segmentsQ = parseSegments (codeQ ?|| "")
152+ segmentsQ = parseSegments (codeQ ?|| "")
167− case isCode, language, segmentsQ of
153+ case isCode, language, segmentsQ of
168− true, "purescript", Just initialSegments -> element quiz { initialSegments, onFailure, onSuccess }
154+ true, "purescript", Just initialSegments -> element quiz { initialSegments, onFailure, onSuccess }
169− true, _, _ ->
155+ true, _, _ ->
170− element editor
156+ element editor
171− { initialCode: fromMaybe "" codeQ
157+ { initialCode: fromMaybe "" codeQ
172− , height
158+ , height
173− , language
159+ , language
174− }
160+ }
175− false, _, _ -> element (unsafePerformEffect $ unsafeCreateDOMComponent "pre") props
161+ false, _, _ -> element (unsafePerformEffect $ unsafeCreateDOMComponent "pre") props
176 }
162 }
177 pure
163 pure
178 $ element mdxProvider
164 $ element mdxProvider
@@ -180,11 +166,11 @@ mkMdxProviderComponent compiler = do
180 , components: mdxComponents
166 , components: mdxComponents
181 }
167 }
182
168
183−type QuizProps
169+type QuizProps =
184− = { initialSegments ∷ Array (Array Segment)
170+ { initialSegments ∷ Array (Array Segment)
185− , onFailure ∷ String -> Array JSX -> Effect Unit
171+ , onFailure ∷ String -> Array JSX -> Effect Unit
186− , onSuccess ∷ Effect Unit
172+ , onSuccess ∷ Effect Unit
187− }
173+ }
188
174
189mkQuiz ∷ ∀ r. { | Compiler r } -> Effect (ReactComponent QuizProps)
175mkQuiz ∷ ∀ r. { | Compiler r } -> Effect (ReactComponent QuizProps)
190mkQuiz compiler = do
176mkQuiz compiler = do
@@ -196,24 +182,22 @@ mkQuiz compiler = do
196 $ element fillInTheGaps
182 $ element fillInTheGaps
197 { segments
183 { segments
198 , run:
184 , run:
199− launchAff_ do
185+ launchAff_ do
200− let
201− code = toCode segments
186+ let code = toCode segments
202− result <- compiler.compileAndRun { code }
187+ result <- compiler.compileAndRun { code }
203− liftEffect case result of
188+ liftEffect case result of
204− Right r
189+ Right r
205− | String.stripSuffix (String.Pattern "\n") r.stdout == (findResult $ join segments) -> do
190+ | String.stripSuffix (String.Pattern "\n") r.stdout == (findResult $ join segments) -> do
206− updateSolvedWith (const $ String.stripSuffix (String.Pattern "\n") r.stdout)
191+ updateSolvedWith (const $ String.stripSuffix (String.Pattern "\n") r.stdout)
207− onSuccess
192+ onSuccess
208− Right r
193+ Right r
209− | r.stdout /= "\n" -> onFailure "Oh shit!" [ R.text r.stdout ]
194+ | r.stdout /= "\n" -> onFailure "Oh shit!" [ R.text r.stdout ]
210− Right r -> onFailure "Oh shit!" [ R.text r.stderr ]
195+ Right r -> onFailure "Oh shit!" [ R.text r.stderr ]
211− Left (cr ∷ CompileResult) -> onFailure "Oh shit!" [ R.text (intercalate ", " (cr.result <#> _.message)) ]
196+ Left (cr ∷ CompileResult) -> onFailure "Oh shit!" [ R.text (intercalate ", " (cr.result <#> _.message)) ]
212 , updateSegments:
197 , updateSegments:
213− \update -> do
198+ \update -> do
214− let
215− updated = update segments
199+ let updated = update segments
216− unless (segments == updated) do updateSegments (const updated)
200+ unless (segments == updated) do updateSegments (const updated)
217 , solvedWith
201 , solvedWith
218 }
202 }
219
203
blog/src/components/PSLayout.purs+90−91
@@ -23,12 +23,12 @@ import Yoga.Block.Icon.SVG as Icon
23import Yoga.Block.Internal (_0)
23import Yoga.Block.Internal (_0)
24import Yoga.Block.Modal as Modal
24import Yoga.Block.Modal as Modal
25
25
26−type SiteQueryResult
26+type SiteQueryResult =
27− = { siteMetadata ∷
27+ { siteMetadata ∷
28− { title ∷ String
28+ { title ∷ String
29− , menuLinks ∷ Array { name ∷ String, link ∷ String }
29+ , menuLinks ∷ Array { name ∷ String, link ∷ String }
30− }
31 }
30 }
31+ }
32
32
33data ShowModal
33data ShowModal
34 = ShowModal Modal.Props
34 = ShowModal Modal.Props
@@ -53,46 +53,44 @@ mkLayout fetchImpl = do
53 <#> case _ of
53 <#> case _ of
54 DarkMode -> ToggleIsRight
54 DarkMode -> ToggleIsRight
55 LightMode -> ToggleIsLeft
55 LightMode -> ToggleIsLeft
56−
57 darkThemeToggle =
56 darkThemeToggle =
58 Block.toggle
57 Block.toggle
59 Y.</> do
58 Y.</> do
60 { className: "dark-light-toggle"
59 { className: "dark-light-toggle"
61 , css:
60 , css:
62− Emotion.css
61+ Emotion.css
63− { marginRight: Emotion.str "0"
62+ { marginRight: Emotion.str "0"
64− , marginLeft: Emotion.str "auto"
63+ , marginLeft: Emotion.str "auto"
65− }
64+ }
66 , setTogglePosition:
65 , setTogglePosition:
67− case _ of
66+ case _ of
68− ToggleIsLeft -> setDarkOrLightMode (Just LightMode)
67+ ToggleIsLeft -> setDarkOrLightMode (Just LightMode)
69− ToggleIsRight -> setDarkOrLightMode (Just DarkMode)
68+ ToggleIsRight -> setDarkOrLightMode (Just DarkMode)
70 , togglePosition: fromMaybe ToggleIsLeft maybeTogglePosition
69 , togglePosition: fromMaybe ToggleIsLeft maybeTogglePosition
71 , left:
70 , left:
72− Block.icon
71+ Block.icon
73− Y.</> do
72+ Y.</> do
74− { icon: Icon.moon
73+ { icon: Icon.moon
75− , stroke: Emotion.str "#eef"
74+ , stroke: Emotion.str "#eef"
76− }
75+ }
77 , right:
76 , right:
78− Block.icon
77+ Block.icon
79− Y.</> do
78+ Y.</> do
80− { icon: Icon.sun
79+ { icon: Icon.sun
81− , stroke: Emotion.str "yellow"
80+ , stroke: Emotion.str "yellow"
82− }
81+ }
83 , backgroundLeft:
82 , backgroundLeft:
84− Color.hsl 205.0 1.0 0.80
83+ Color.hsl 205.0 1.0 0.80
85 , backgroundRight:
84 , backgroundRight:
86− Color.hsl 250.0 1.0 0.1
85+ Color.hsl 250.0 1.0 0.1
87 }
86 }
88−
89 header =
87 header =
90 Block.box
88 Block.box
91 </ { className: "top-box"
89 </ { className: "top-box"
92 , css:
90 , css:
93− Emotion.css
91+ Emotion.css
94− { background: Emotion.str colour.backgroundLayer5
92+ { background: Emotion.str colour.backgroundLayer5
95− }
93+ }
96 }
94 }
97 /> [ Block.cluster
95 /> [ Block.cluster
98 </* { justify: "space-between"
96 </* { justify: "space-between"
@@ -105,13 +103,13 @@ mkLayout fetchImpl = do
105 R.span'
103 R.span'
106 { className: "blog-header"
104 { className: "blog-header"
107 , css:
105 , css:
108− Emotion.css
106+ Emotion.css
109− { fontSize: Emotion.str "min(var(--s3), calc(var(--s1) + 1vw))"
107+ { fontSize: Emotion.str "min(var(--s3), calc(var(--s1) + 1vw))"
110− , textTransform: Emotion.str "uppercase"
108+ , textTransform: Emotion.str "uppercase"
111− , letterSpacing: Emotion.str "calc(min(var(--s0) + 3vw), var(--s2) * -1.7)"
109+ , letterSpacing: Emotion.str "calc(min(var(--s0) + 3vw), var(--s2) * -1.7)"
112− , fontWeight: Emotion.str "300"
110+ , fontWeight: Emotion.str "300"
113− , color: Emotion.str colour.text
111+ , color: Emotion.str colour.text
114− }
112+ }
115 }
113 }
116 [ R.text siteInfo.siteMetadata.title ]
114 [ R.text siteInfo.siteMetadata.title ]
117 , darkThemeToggle
115 , darkThemeToggle
@@ -121,61 +119,62 @@ mkLayout fetchImpl = do
121 $ element Container.component
119 $ element Container.component
122 { themeVariant: darkOrLightMode
120 { themeVariant: darkOrLightMode
123 , content:
121 , content:
124− Y.styled Block.stack
122+ Y.styled Block.stack
125− { className: "blog-content"
123+ { className: "blog-content"
126− , space: _0
124+ , space: _0
127− , splitAfter: 2
125+ , splitAfter: 2
126+ , css:
127+ Emotion.css
128+ { minHeight: Emotion.vh 100.0
129+ , background: Emotion.str colour.background
130+ , borderRadius: Emotion.str "0 var(--s1) var(--s1) 0"
131+ }
132+ }
133+ [ header
134+ , Block.centre
135+ </* { className: "centre"
136+ , padding: _0
137+ , gutters: _0
138+ , css: Emotion.css { maxWidth: Emotion.ch 90.0 }
139+ }
140+ /> [ Block.box
141+ </ do
142+ { padding: Emotion.px 16
143+ , css:
144+ Emotion.css
145+ { "& > p:first-of-type:first-letter":
146+ Emotion.nested
147+ $ Emotion.css
148+ { overflow: Emotion.str "visible"
149+ , float: Emotion.str "left"
150+ , fontSize: Emotion.str "min(calc(var(--s0) * 1 + 8.03vw), var(--s5))"
151+ , fontFamily: Emotion.str "Cormorant Garamond"
152+ , lineHeight: Emotion.str "min(calc(var(--s-1) + 2px + 3vw), var(--s3))"
153+ , marginTop: Emotion.str "min(calc(var(--s-1) + 1.5vw), var(--s2))"
154+ , marginRight: Emotion.var "--s-2"
155+ , "&::selection":
156+ Emotion.nested
157+ $ Emotion.css
158+ { color: Emotion.str colour.highlightText
159+ , background: Emotion.str colour.highlight
160+ }
161+ }
162+ }
163+ }
164+ /> [ element mdxProviderComponent
165+ { children
166+ }
167+ ]
168+ ]
169+ , Y.styled Block.box
170+ { className: "blog-footer"
128− , css:
171+ , css:
129 Emotion.css
172 Emotion.css
130− { minHeight: Emotion.vh 100.0
131− , background: Emotion.str colour.backgroundLayer5
173+ { background: Emotion.str colour.backgroundLayer1
132− , borderRadius: Emotion.str "0 var(--s1) var(--s1) 0"
174+ , borderTop: Emotion.str $ "1px solid " <> colour.backgroundLayer3
133− }
175+ , color: Emotion.str colour.text
134− }
135− [ header
136− , Block.centre
137− </* { className: "centre"
138− , padding: _0
139− , gutters: _0
140− , css: Emotion.css { maxWidth: Emotion.ch 90.0 }
141 }
176 }
142− /> [ Block.box
143− </ do
144− { padding: Emotion.px 16
145− , css:
146− Emotion.css
147− { "& > p:first-of-type:first-letter":
148− Emotion.nested
149− $ Emotion.css
150− { overflow: Emotion.str "hidden"
151− , float: Emotion.str "left"
152− , fontSize: Emotion.str "min(calc(var(--s0) * 1 + 8.03vw), var(--s5))"
153− , lineHeight: Emotion.str "min(calc(var(--s-1) + 2px + 3vw), var(--s3))"
154− , marginTop: Emotion.str "min(calc(var(--s-1) + 1.5vw), var(--s2))"
155− , marginRight: Emotion.var "--s-2"
156− , "&::selection":
157− Emotion.nested
158− $ Emotion.css
159− { color: Emotion.str colour.highlightText
160− , background: Emotion.str colour.highlight
161− }
162− }
163− }
164− }
165− /> [ element mdxProviderComponent
166− { children
167− }
168− ]
169− ]
170− , Y.styled Block.box
171− { className: "blog-footer"
172− , css:
173− Emotion.css
174− { background: Emotion.str colour.backgroundLayer1
175− , borderTop: Emotion.str $ "1px solid " <> colour.backgroundLayer3
176− , color: Emotion.str colour.text
177− }
177+ }
178− }
179− [ R.text "Mark Eibes" ]
178+ [ R.text "Mark Eibes" ]
180− ]
179+ ]
181 }
180 }
blog/src/components/fonts.js+7−4
@@ -1,5 +1,8 @@
1// Fonts
1// Fonts
2−import "@fontsource/cormorant-garamond/500.css"
2+import "@fontsource/cormorant-garamond/latin-ext-500.css"
3−import "@fontsource/cormorant-garamond/500-italic.css"
3+import "@fontsource/cormorant-garamond/latin-ext-500-italic.css"
4−import "@fontsource/cormorant-garamond/700.css"
4+import "@fontsource/cormorant-garamond/latin-ext-600.css"
5+import "@fontsource/cormorant-garamond/latin-ext-600-italic.css"
6+import "@fontsource/cormorant-garamond/latin-ext-700.css"
5−import "@fontsource/cormorant-garamond/700-italic.css"
7+import "@fontsource/cormorant-garamond/latin-ext-700-italic.css"
8+import "@fontsource/cormorant-sc/latin-ext-500.css"
blog/src/purescript/Typography/SmallCaps.purs+4−4
@@ -8,15 +8,15 @@ import React.Basic.Hooks (JSX)
8import React.Basic.Hooks as React
8import React.Basic.Hooks as React
9import Yoga as Y
9import Yoga as Y
10
10
11−mkSmallCaps :: Effect (String -> JSX)
11+mkSmallCaps ∷ Effect (String -> JSX)
12mkSmallCaps = do
12mkSmallCaps = do
13 React.component "SmallCaps" \text -> React.do
13 React.component "SmallCaps" \text -> React.do
14 pure
14 pure
15 $ Y.styled R.span'
15 $ Y.styled R.span'
16 { className: "small-caps"
16 { className: "small-caps"
17 , css:
17 , css:
18− E.css
18+ E.css
19− { fontVariant: E.str "small-caps"
19+ { fontFamily: E.str "'Cormorant SC'"
20− }
20+ }
21 }
21 }
22 [ R.text $ text ]
22 [ R.text $ text ]