ybbond-reason

My old site written in ReasonReact
Log | Files | Refs | README

commit 15d62c278580b57c4ba0640f21626bd4e34cb63b
parent d1841b494bfb96b565f48445354657768c6cfbbe
Author: Yohanes Bandung <bandungpenting@gmail.com>
Date:   Mon, 19 Aug 2019 22:48:33 +0700

refactor(bs-css) => use enum for all

Diffstat:
Msrc/App.re | 14+++++++-------
Msrc/Styled.re | 52+++++++++++++++++++++++++++++++---------------------
Msrc/Template.re | 1-
Msrc/UsesScene.re | 34++++++++++++++++++++++++++++++++++
Msrc/components/ContentList.re | 12++++++------
Msrc/components/Spoiler.re | 10+++++-----

6 files changed, 83 insertions(+), 40 deletions(-)

diff --git a/src/App.re b/src/App.re
@@ -10,21 +10,21 @@ module Styles = {
       display(`flex),
       flexDirection(`column),
       textAlign(`left),
-      padding(em(1.0)),
-      paddingTop(px(0)),
-      paddingBottom(px(0)),
-      fontSize(em(0.9)),
+      padding(`em(1.0)),
+      paddingTop(`px(0)),
+      paddingBottom(`px(0)),
+      fontSize(`em(0.9)),
     ]);
 
   let main =
     style([
       flexGrow(1.0),
       width(`percent(100.0)),
-      marginTop(px(0)),
-      marginBottom(px(0)),
+      marginTop(`px(0)),
+      marginBottom(`px(0)),
       marginLeft(`auto),
       marginRight(`auto),
-      maxWidth(em(50.0)),
+      maxWidth(`em(50.0)),
     ]);
 };
 
diff --git a/src/Styled.re b/src/Styled.re
@@ -29,13 +29,14 @@ let make = () => {
   let anchorColor = state.dark ? "#d8dcd5" : "#2d2d2d";
   let anchorHover = state.dark ? "#2d2d2d" : "#d8dcd5";
 
-  let htmlStyle =
-    "html { height: 100vh; font-family: 'Cousine for Powerline', monospace; background-color:"
-    ++ backgroundColor
-    ++ "; color:"
-    ++ textColor
-    ++ "; }";
-  /* let fontFace = "@import url('https://fonts.googleapis.com/css?family=Cousine:400,700&display=swap');"; */
+  let htmlStyle = {j|
+html {
+  height: 100vh;
+  background-color: $backgroundColor;
+  color: $textColor;
+}
+|j};
+
   let fontFace = {j|
 @font-face {
   font-family: 'Cousine for Powerline';
@@ -44,6 +45,7 @@ let make = () => {
   src: url('../assets/fonts/Cousine for Powerline.ttf'); /* IE9 Compat Modes */
 }
   |j};
+
   let bodyStyle = {j|
 body {
   display: flex;
@@ -54,29 +56,37 @@ body {
   line-height: 1.8em;
   letter-spacing: -0.01em;
   word-wrap: break-word;
+  font-family: 'Cousine for Powerline', monospace;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
   |j};
+
   let miscStyle = {j|
 ::selection {
   background-color: #79d688;
 }
   |j};
-  let markStyle =
-    "mark{background-color:"
-    ++ markColor
-    ++ ";}"
-    ++ "mark:hover{background-color:"
-    ++ markHover
-    ++ ";}";
-  let anchorStyle =
-    "a{text-decoration: none;cursor: pointer;color:"
-    ++ anchorColor
-    ++ ";}"
-    ++ "a:hover{color:"
-    ++ anchorHover
-    ++ ";}";
+
+  let markStyle = {j|
+mark {
+  background-color: $markColor;
+}
+mark:hover {
+  background-color: $markHover;
+}
+|j};
+
+  let anchorStyle = {j|
+a {
+  text-decoration: none;
+  cursor: pointer;
+  color: $anchorColor;
+}
+a:hover {
+  color: $anchorHover;
+}
+|j};
 
   let setStyle =
     htmlStyle ++ fontFace ++ bodyStyle ++ miscStyle ++ markStyle ++ anchorStyle;
diff --git a/src/Template.re b/src/Template.re
@@ -1,4 +1,3 @@
-[@react.component]
 let make = (~content, ~title, ()) => {j|
   <!DOCTYPE html>
     <html>
diff --git a/src/UsesScene.re b/src/UsesScene.re
@@ -20,5 +20,39 @@ let make = () => {
         },
       |]
     />
+    <h3> {ReasonReact.string("Code Editor")} </h3>
+    <ContentList
+      content=[|
+        {
+          variant: Default,
+          text: <span> {ReasonReact.string("Neovim on Kitty")} </span>,
+        },
+        {
+          variant: Default,
+          text: <span> {ReasonReact.string("Visual Studio Code")} </span>,
+        },
+      |]
+    />
+    <h3> {ReasonReact.string("Terminal")} </h3>
+    <ContentList
+      content=[|
+        {
+          variant: Default,
+          text: <span> {ReasonReact.string("Kitty")} </span>,
+        },
+        {
+          variant: Default,
+          text: <span> {ReasonReact.string("Fish Shell")} </span>,
+        },
+        {
+          variant: Default,
+          text: <span> {ReasonReact.string("Ranger File Manager")} </span>,
+        },
+        {
+          variant: Default,
+          text: <span> {ReasonReact.string("lazygit")} </span>,
+        },
+      |]
+    />
   </React.Fragment>;
 };
diff --git a/src/components/ContentList.re b/src/components/ContentList.re
@@ -3,9 +3,9 @@ module Styles = {
 
   let ul =
     style([
-      marginLeft(em(2.5)),
-      marginTop(em(0.8)),
-      paddingLeft(px(0)),
+      marginLeft(`em(2.5)),
+      marginTop(`em(0.8)),
+      paddingLeft(`px(0)),
       listStyle(`none, `inside, `none),
     ]);
 
@@ -13,7 +13,7 @@ module Styles = {
     style([
       before([
         position(`absolute),
-        marginLeft(em(-1.5)),
+        marginLeft(`em(-1.5)),
         contentRule({j|•|j}),
       ]),
     ]);
@@ -22,7 +22,7 @@ module Styles = {
     style([
       before([
         position(`absolute),
-        marginLeft(em(-1.5)),
+        marginLeft(`em(-1.5)),
         contentRule({j|⊗|j}),
       ]),
     ]);
@@ -31,7 +31,7 @@ module Styles = {
     style([
       before([
         position(`absolute),
-        marginLeft(em(-1.5)),
+        marginLeft(`em(-1.5)),
         contentRule({j|⊙|j}),
       ]),
     ]);
diff --git a/src/components/Spoiler.re b/src/components/Spoiler.re
@@ -3,11 +3,11 @@ module Styles = {
 
   let summary =
     style([
-      fontSize(em(1.0)),
-      marginTop(em(1.0)),
-      marginBottom(em(1.0)),
-      marginLeft(px(0)),
-      marginRight(px(0)),
+      fontSize(`em(1.0)),
+      marginTop(`em(1.0)),
+      marginBottom(`em(1.0)),
+      marginLeft(`px(0)),
+      marginRight(`px(0)),
       flex(`num(1.0)),
       textAlign(`left),
       outlineStyle(`none),