ybbond-reason

My old site written in ReasonReact
Log | Files | Refs | README | LICENSE | CC-LICENSE

Styled.re (2346B)

      1 open Utils;
      2 
      3 module Styles = {
      4   open Css;
      5   let toggler =
      6     style([cursor(`pointer), userSelect(`none), marginTop(`em(2.0))]);
      7 };
      8 
      9 type state = {dark: bool};
     10 type action =
     11   | ToggleDark;
     12 
     13 let initialState = {dark: false};
     14 
     15 [@react.component]
     16 let make = () => {
     17   let (state, dispatch) =
     18     React.useReducer(
     19       (state, action) =>
     20         switch (action) {
     21         | ToggleDark => {dark: !state.dark}
     22         },
     23       initialState,
     24     );
     25   let backgroundColor = state.dark ? "#1b1b1b" : "#fdfdfd";
     26   let textColor = state.dark ? "#fdfdfd" : "#1b1b1b";
     27   let markColor = state.dark ? "#3e3e3e" : "#d8dcd5";
     28   let markHover = state.dark ? "#d8dcd6" : "#2d2d2d";
     29   let anchorColor = state.dark ? "#d8dcd5" : "#2d2d2d";
     30   let anchorHover = state.dark ? "#2d2d2d" : "#d8dcd5";
     31 
     32   let htmlStyle = {j|
     33 html {
     34   height: 100vh;
     35   background-color: $backgroundColor;
     36   color: $textColor;
     37 }
     38 |j};
     39 
     40   let fontFace = {j|
     41 @font-face {
     42   font-family: 'Cousine for Powerline';
     43   font-style: normal;
     44   font-weight: 400;
     45   src: url('../assets/fonts/Cousine for Powerline.ttf'); /* IE9 Compat Modes */
     46 }
     47   |j};
     48 
     49   let bodyStyle = {j|
     50 body {
     51   display: flex;
     52   min-height: 100vh;
     53   flex-direction: column;
     54   margin: 0;
     55   padding: 0;
     56   line-height: 1.8em;
     57   letter-spacing: -0.01em;
     58   word-wrap: break-word;
     59   font-family: 'Cousine for Powerline', monospace;
     60   -webkit-font-smoothing: antialiased;
     61   -moz-osx-font-smoothing: grayscale;
     62 }
     63   |j};
     64 
     65   let miscStyle = {j|
     66 h5 {
     67   font-weight: 400;
     68   font-style: normal;
     69   font-size: 1em;
     70   margin: 1em 0;
     71 }
     72 *:focus {
     73   outline-color: #79d688 !important;
     74   outline: solid #79d688 !important;
     75 }
     76 ::selection {
     77   background-color: #79d688;
     78 }
     79   |j};
     80 
     81   let markStyle = {j|
     82 mark {
     83   background-color: $markColor;
     84 }
     85 mark:hover {
     86   background-color: $markHover;
     87 }
     88 |j};
     89 
     90   let anchorStyle = {j|
     91 a {
     92   text-decoration: none;
     93   cursor: pointer;
     94   color: $anchorColor;
     95 }
     96 a:hover {
     97   color: $anchorHover;
     98 }
     99 |j};
    100 
    101   let setStyle =
    102     htmlStyle ++ fontFace ++ bodyStyle ++ miscStyle ++ markStyle ++ anchorStyle;
    103 
    104   <React.Fragment>
    105     <style dangerouslySetInnerHTML={dangerousHtml(setStyle)} />
    106     <div onClick={_ => dispatch(ToggleDark)} className=Styles.toggler>
    107       <p>
    108         {ReasonReact.string(
    109            (state.dark ? {j|☑|j} : {j|☐|j}) ++ " Dark Mode",
    110          )}
    111       </p>
    112     </div>
    113   </React.Fragment>;
    114 };