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:
| M | src/App.re | | | 14 | +++++++------- |
| M | src/Styled.re | | | 52 | +++++++++++++++++++++++++++++++--------------------- |
| M | src/Template.re | | | 1 | - |
| M | src/UsesScene.re | | | 34 | ++++++++++++++++++++++++++++++++++ |
| M | src/components/ContentList.re | | | 12 | ++++++------ |
| M | src/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),