commit a580acadad39b3553a2f4257f833d49b448817f6 parent 309cd507b98fcbe901255e4afd5a142c48014a7c Author: Yohanes Bandung <bandungpenting@gmail.com> Date: Tue, 3 Mar 2020 04:49:12 +0700 wip Diffstat:
M | src/BlogContent.re | | | 47 | +++++++++++++++++++++++++++++++++++++++-------- |
M | src/PoemsScene.re | | | 9 | +++++++-- |
M | src/Styled.re | | | 3 | ++- |
3 files changed, 48 insertions(+), 11 deletions(-)
diff --git a/src/BlogContent.re b/src/BlogContent.re @@ -1,6 +1,12 @@ module Styles = { open Css; - let h1 = style([fontWeight(`num(600)), fontSize(`em(1.2))]); + let h1 = + style([ + fontWeight(`num(600)), + fontSize(`em(1.2)), + media("(max-width: 544px)", [fontSize(`em(1.1))]), + ]); + let summary = style([ fontSize(`em(1.0)), @@ -13,6 +19,28 @@ module Styles = { cursor(`pointer), userSelect(`none), ]); + + let date = + style([ + fontFamily("Cousine for Powerline, monospace"), + fontSize(`em(0.8)), + color(`hex("777777")), + whiteSpace(`nowrap), + ]); + + let pre = + style([ + fontFamily("Cousine for Powerline, monospace"), + display(`block), + whiteSpace(`preWrap), + maxWidth(`px(544)), + fontSize(`em(0.9)), + lineHeight(`em(2.8)), + media( + "(max-width: 544px)", + [fontSize(`em(0.8)), lineHeight(`em(3.0))], + ), + ]); }; type state = {blog_content: string}; @@ -39,14 +67,17 @@ let make = <details> <summary className=Styles.summary> {ReasonReact.string(title)} </summary> - <h1 className=Styles.h1> - {ReasonReact.string("# " ++ title ++ " [")} + <h1 className=Styles.h1> {ReasonReact.string("# " ++ title)} </h1> + <span className=Styles.date> + <time> + {ReasonReact.string( + createdAt |> Js.Date.fromString |> Js.Date.toLocaleString, + )} + </time> + {ReasonReact.string(" [")} <Link href=source text="link" /> {ReasonReact.string("]")} - </h1> - <date> - {ReasonReact.string(createdAt |> Js.Date.fromString |> Js.Date.toString)} - </date> - <pre> {ReasonReact.string(state.blog_content)} </pre> + </span> + <pre className=Styles.pre> {ReasonReact.string(state.blog_content)} </pre> </details>; }; diff --git a/src/PoemsScene.re b/src/PoemsScene.re @@ -6,8 +6,13 @@ module Styles = { fontFamily("Cousine for Powerline, monospace"), display(`block), whiteSpace(`preWrap), - fontSize(`em(0.8)), - lineHeight(`em(3.3)), + maxWidth(`px(544)), + fontSize(`em(0.9)), + lineHeight(`em(2.8)), + media( + "(max-width: 414px)", + [fontSize(`em(0.8)), lineHeight(`em(3.0))], + ), ]); }; diff --git a/src/Styled.re b/src/Styled.re @@ -70,7 +70,8 @@ h5 { margin: 1em 0; } *:focus { - outline-color: #79d688; + outline-color: #79d688 !important; + outline: solid #79d688 !important; } ::selection { background-color: #79d688;