ybbond-reason

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
++-

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;