-
Notifications
You must be signed in to change notification settings - Fork 0
/
elm.html
79 lines (77 loc) · 76.2 KB
/
elm.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Droid+Sans+Mono" />
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/octicons/3.0.1/octicons.min.css"/>
<link rel="stylesheet" type="text/css" href="main.css" />
<body><header>
<a href="index.html">maybe-hugs</a>
</header>
<nav>
<a href="bash.html">bash</a>
<a href="c.html">c</a>
<a href="cplusplus.html">c++</a>
<a href="clojure.html">clojure</a>
<a href="commonlisp.html">commonlisp</a>
<a href="csharp.html">csharp</a>
<a href="elixir.html">elixir</a>
<a href="elm.html">elm</a>
<a href="erlang.html">erlang</a>
<a href="go.html">go</a>
<a href="haskell.html">haskell</a>
<a href="hy.html">hy</a>
<a href="idris.html">idris</a>
<a href="java.html">java</a>
<a href="javascript.html">javascript</a>
<a href="ocaml.html">ocaml</a>
<a href="ocaml-cps.html">ocaml-cps</a>
<a href="perl.html">perl</a>
<a href="perl6.html">perl6</a>
<a href="php.html">php</a>
<a href="purescript.html">purescript</a>
<a href="python.html">python</a>
<a href="racket.html">racket</a>
<a href="ruby.html">ruby</a>
<a href="rust.html">rust</a>
<a href="sass.html">sass</a>
<a href="scala.html">scala</a>
</nav>
<div id="container">
<main>
<h1 id="user-content-maybe-hugs-in-elm" class="deep-link"><a href="#maybe-hugs-in-elm">Maybe Hugs in Elm</a></h1>
<p>How to run this thing:</p>
<ol>
<li>Run <code>npm install</code>. This will install the correct elm version locally and also run <code>elm-make</code> as an npm postinstall hook. When <code>npm install</code> has finished there should be a file called <code>elm.js</code>.</li>
<li>Serve the current directory with the HTTP server of your choice.</li>
</ol>
<h2 id="user-content-development" class="deep-link"><a href="#development">Development</a></h2>
<p>You can either</p>
<ul>
<li><code>npm run make</code>: to run elm-make after every change to (re-)create <code>elm.js</code>, while serving this directory with your favourite HTTP server, or</li>
<li><code>npm start</code>: start elm-reactor, which starts a server with live reload on <a href="http://localhost:8000/MaybeHugs.elm">http://localhost:8000/MaybeHugs.elm</a>. (Unfortunately, this does not use the custom static html, so the styling will be missing. You can also access <a href="http://localhost:8000/index.html">http://localhost:8000/index.html</a> but I couldn't get the live reload to work there).</li>
</ul>
<h6 id="user-content-gitignore" class="deep-link"><a href="#gitignore">.gitignore</a></h6>
<pre class="editor editor-colors"><div class="line"><span class="text"><span>node_modules/</span></span></div><div class="line"><span class="text"><span>elm-stuff/</span></span></div><div class="line"><span class="text"><span>elm.js</span></span></div><div class="line"><span class="text"><span> </span></span></div></pre>
<h6 id="user-content-cutieelm" class="deep-link"><a href="#cutieelm">Cutie.elm</a></h6>
<pre class="editor editor-colors"><div class="line"><span class="text"><span>module Cutie (Cutie, cutie, maybeHug, wantsHug) where</span></span></div><div class="line"><span class="text"><span> </span></span></div><div class="line"><span class="text"><span>type alias Cutie =</span></span></div><div class="line"><span class="text"><span>    { name : String</span></span></div><div class="line"><span class="text"><span>    , acceptsHugs : Bool</span></span></div><div class="line"><span class="text"><span>    }</span></span></div><div class="line"><span class="text"><span> </span></span></div><div class="line"><span class="text"><span>cutie : String -> Bool -> Cutie</span></span></div><div class="line"><span class="text"><span>cutie name acceptsHugs = { name = name, acceptsHugs = acceptsHugs }</span></span></div><div class="line"><span class="text"><span> </span></span></div><div class="line"><span class="text"><span>wantsHug : Cutie -> Bool</span></span></div><div class="line"><span class="text"><span>wantsHug cutie = cutie.acceptsHugs</span></span></div><div class="line"><span class="text"><span> </span></span></div><div class="line"><span class="text"><span>maybeHug : Cutie -> String</span></span></div><div class="line"><span class="text"><span>maybeHug cutie = cutie.name ++</span></span></div><div class="line"><span class="text"><span>    if wantsHug cutie then " would like a hug!" else " prefers empathy."</span></span></div><div class="line"><span class="text"><span> </span></span></div></pre>
<h6 id="user-content-maybehugselm" class="deep-link"><a href="#maybehugselm">MaybeHugs.elm</a></h6>
<pre class="editor editor-colors"><div class="line"><span class="text"><span>module MaybeHugs where</span></span></div><div class="line"><span class="text"><span> </span></span></div><div class="line"><span class="text"><span>import Array exposing (Array, fromList, get, length)</span></span></div><div class="line"><span class="text"><span>import Html exposing (..)</span></span></div><div class="line"><span class="text"><span>import Html.Attributes exposing (..)</span></span></div><div class="line"><span class="text"><span>import List exposing (drop, map)</span></span></div><div class="line"><span class="text"><span>import Maybe exposing (withDefault)</span></span></div><div class="line"><span class="text"><span>import Random</span></span></div><div class="line"><span class="text"><span>import Random exposing (Seed, Generator)</span></span></div><div class="line"><span class="text"><span>import Signal exposing (Signal, (<~), (~), foldp)</span></span></div><div class="line"><span class="text"><span>import Time exposing (every, second)</span></span></div><div class="line"><span class="text"><span> </span></span></div><div class="line"><span class="text"><span>import Cutie exposing (..)</span></span></div><div class="line"><span class="text"><span> </span></span></div><div class="line"><span class="text"><span>names : Array String</span></span></div><div class="line"><span class="text"><span>names = fromList [</span></span></div><div class="line"><span class="text"><span>    "Treena"</span></span></div><div class="line"><span class="text"><span>  , "Roger"</span></span></div><div class="line"><span class="text"><span>  , "Patsy"</span></span></div><div class="line"><span class="text"><span>  , "Tesha"</span></span></div><div class="line"><span class="text"><span>  , "Madie"</span></span></div><div class="line"><span class="text"><span>  , "Wendie"</span></span></div><div class="line"><span class="text"><span>  , "Kendra"</span></span></div><div class="line"><span class="text"><span>  , "Hedy"</span></span></div><div class="line"><span class="text"><span>  , "Milan"</span></span></div><div class="line"><span class="text"><span>  , "Debbra"</span></span></div><div class="line"><span class="text"><span>  , "Al"</span></span></div><div class="line"><span class="text"><span>  , "Rosita"</span></span></div><div class="line"><span class="text"><span>  , "Sharleen"</span></span></div><div class="line"><span class="text"><span>  , "Lekisha"</span></span></div><div class="line"><span class="text"><span>  , "Reina"</span></span></div><div class="line"><span class="text"><span>  , "Voncile"</span></span></div><div class="line"><span class="text"><span>  , "Amie"</span></span></div><div class="line"><span class="text"><span>  , "Ashlea"</span></span></div><div class="line"><span class="text"><span>  , "Rosetta"</span></span></div><div class="line"><span class="text"><span>  , "Brynn"</span></span></div><div class="line"><span class="text"><span>  ]</span></span></div><div class="line"><span class="text"><span> </span></span></div><div class="line"><span class="text"><span>random generator max seed = seed |> (Random.generate <| generator 0 max) |> fst</span></span></div><div class="line"><span class="text"><span> </span></span></div><div class="line"><span class="text"><span>randomFloat : Seed -> Float</span></span></div><div class="line"><span class="text"><span>randomFloat seed = random Random.float 1 seed</span></span></div><div class="line"><span class="text"><span> </span></span></div><div class="line"><span class="text"><span>randomNameIdx : Seed -> Int</span></span></div><div class="line"><span class="text"><span>randomNameIdx seed =</span></span></div><div class="line"><span class="text"><span>  let n = (length names) - 1</span></span></div><div class="line"><span class="text"><span>  in random Random.int n seed</span></span></div><div class="line"><span class="text"><span> </span></span></div><div class="line"><span class="text"><span>randomName : Seed -> String</span></span></div><div class="line"><span class="text"><span>randomName seed = randomNameIdx seed |> (\idx -> get idx names |> withDefault "?")</span></span></div><div class="line"><span class="text"><span> </span></span></div><div class="line"><span class="text"><span>randomBool : Seed -> Bool</span></span></div><div class="line"><span class="text"><span>randomBool seed = randomFloat seed |> (\f -> if f > 0.5 then True else False)</span></span></div><div class="line"><span class="text"><span> </span></span></div><div class="line"><span class="text"><span>randomCutie : Seed -> Cutie</span></span></div><div class="line"><span class="text"><span>randomCutie seed = cutie (randomName seed) (randomBool seed)</span></span></div><div class="line"><span class="text"><span> </span></span></div><div class="line"><span class="text"><span>timedSeedSignal : Signal Seed</span></span></div><div class="line"><span class="text"><span>timedSeedSignal = Random.initialSeed << round <~ every second</span></span></div><div class="line"><span class="text"><span> </span></span></div><div class="line"><span class="text"><span>cutieSignal : Signal Cutie</span></span></div><div class="line"><span class="text"><span>cutieSignal = randomCutie <~ timedSeedSignal</span></span></div><div class="line"><span class="text"><span> </span></span></div><div class="line"><span class="text"><span>update : Cutie -> List Cutie -> List Cutie</span></span></div><div class="line"><span class="text"><span>update newCutie cuties =</span></span></div><div class="line"><span class="text"><span>  let cuties' = cuties ++ [newCutie]</span></span></div><div class="line"><span class="text"><span>  in if (List.length cuties') > 5 then drop 1 cuties' else cuties'</span></span></div><div class="line"><span class="text"><span> </span></span></div><div class="line"><span class="text"><span>cutiesSignal : Signal (List Cutie)</span></span></div><div class="line"><span class="text"><span>cutiesSignal = foldp update [] cutieSignal</span></span></div><div class="line"><span class="text"><span> </span></span></div><div class="line"><span class="text"><span>cutieView : Cutie -> Html</span></span></div><div class="line"><span class="text"><span>cutieView cutie = p [class "cutie"] [text <| maybeHug cutie]</span></span></div><div class="line"><span class="text"><span> </span></span></div><div class="line"><span class="text"><span>main : Signal Html</span></span></div><div class="line"><span class="text"><span>main =</span></span></div><div class="line"><span class="text"><span>  (\ cuties -></span></span></div><div class="line"><span class="text"><span>    section</span></span></div><div class="line"><span class="text"><span>    [ id "maybehugapp" ]</span></span></div><div class="line"><span class="text"><span>    [ h1 [] [ text "Maybe Hugs" ]</span></span></div><div class="line"><span class="text"><span>    , h2 [] [ text "in Elm" ]</span></span></div><div class="line"><span class="text"><span>    , div [] (map cutieView cuties)</span></span></div><div class="line"><span class="text"><span>    ]</span></span></div><div class="line"><span class="text"><span>  ) <~ cutiesSignal</span></span></div><div class="line"><span class="text"><span> </span></span></div></pre>
<h6 id="user-content-elm-packagejson" class="deep-link"><a href="#elm-packagejson">elm-package.json</a></h6>
<pre class="editor editor-colors"><div class="line"><span class="source json"><span class="meta structure dictionary json"><span class="punctuation dictionary begin json"><span>{</span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span>    </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>version</span><span class="punctuation string end json"><span>"</span></span></span><span class="meta structure dictionary json"><span class="punctuation separator dictionary key-value json"><span>:</span></span><span> </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>1.0.0</span><span class="punctuation string end json"><span>"</span></span></span><span class="punctuation separator dictionary json"><span>,</span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span>    </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>summary</span><span class="punctuation string end json"><span>"</span></span></span><span class="meta structure dictionary json"><span class="punctuation separator dictionary key-value json"><span>:</span></span><span> </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>Conditional hugging implementation in elm</span><span class="punctuation string end json"><span>"</span></span></span><span class="punctuation separator dictionary json"><span>,</span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span>    </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>repository</span><span class="punctuation string end json"><span>"</span></span></span><span class="meta structure dictionary json"><span class="punctuation separator dictionary key-value json"><span>:</span></span><span> </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span class="markup underline link hyperlink"><span>https://github.com/zkat/maybe-hugs.git</span></span><span class="punctuation string end json"><span>"</span></span></span><span class="punctuation separator dictionary json"><span>,</span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span>    </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>license</span><span class="punctuation string end json"><span>"</span></span></span><span class="meta structure dictionary json"><span class="punctuation separator dictionary key-value json"><span>:</span></span><span> </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>CC0-1.0</span><span class="punctuation string end json"><span>"</span></span></span><span class="punctuation separator dictionary json"><span>,</span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span>    </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>source-directories</span><span class="punctuation string end json"><span>"</span></span></span><span class="meta structure dictionary json"><span class="punctuation separator dictionary key-value json"><span>:</span></span><span> </span><span class="meta structure array json"><span class="punctuation array begin json"><span>[</span></span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span class="meta structure array json"><span>        </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>.</span><span class="punctuation string end json"><span>"</span></span></span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span class="meta structure array json"><span>    </span><span class="punctuation array end json"><span>]</span></span></span><span class="punctuation separator dictionary json"><span>,</span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span>    </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>exposed-modules</span><span class="punctuation string end json"><span>"</span></span></span><span class="meta structure dictionary json"><span class="punctuation separator dictionary key-value json"><span>:</span></span><span> </span><span class="meta structure array json"><span class="punctuation array begin json"><span>[</span></span><span class="punctuation array end json"><span>]</span></span></span><span class="punctuation separator dictionary json"><span>,</span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span>    </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>dependencies</span><span class="punctuation string end json"><span>"</span></span></span><span class="meta structure dictionary json"><span class="punctuation separator dictionary key-value json"><span>:</span></span><span> </span><span class="meta structure dictionary json"><span class="punctuation dictionary begin json"><span>{</span></span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span>        </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>elm-lang/core</span><span class="punctuation string end json"><span>"</span></span></span><span class="meta structure dictionary json"><span class="punctuation separator dictionary key-value json"><span>:</span></span><span> </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>2.1.0 <= v < 3.0.0</span><span class="punctuation string end json"><span>"</span></span></span><span class="punctuation separator dictionary json"><span>,</span></span></span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span>        </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>evancz/elm-html</span><span class="punctuation string end json"><span>"</span></span></span><span class="meta structure dictionary json"><span class="punctuation separator dictionary key-value json"><span>:</span></span><span> </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>4.0.1 <= v < 5.0.0</span><span class="punctuation string end json"><span>"</span></span></span></span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span>    </span></span><span class="punctuation dictionary end json"><span>}</span></span></span><span class="punctuation separator dictionary json"><span>,</span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span>    </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>elm-version</span><span class="punctuation string end json"><span>"</span></span></span><span class="meta structure dictionary json"><span class="punctuation separator dictionary key-value json"><span>:</span></span><span> </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>0.15.1 <= v < 0.16.0</span><span class="punctuation string end json"><span>"</span></span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span class="punctuation dictionary end json"><span>}</span></span></span></span></div></pre>
<h6 id="user-content-indexhtml" class="deep-link"><a href="#indexhtml">index.html</a></h6>
<pre class="editor editor-colors"><div class="line"><span class="text html"><span class="meta tag sgml html"><span class="punctuation tag html"><span><!</span></span><span class="meta tag sgml doctype html"><span>DOCTYPE</span><span> HTML</span></span><span class="punctuation tag html"><span>></span></span></span></span></div><div class="line"><span class="text html"><span class="meta tag structure any html"><span class="punctuation tag html"><span><</span></span><span class="entity name tag structure any html"><span>html</span></span><span class="punctuation tag html"><span>></span></span></span></span></div><div class="line"><span class="text html"><span> </span></span></div><div class="line"><span class="text html"><span class="meta tag structure any html"><span class="punctuation tag html"><span><</span></span><span class="entity name tag structure any html"><span>head</span></span><span class="punctuation tag html"><span>></span></span></span></span></div><div class="line"><span class="text html"><span>  </span><span class="meta tag inline any html"><span class="punctuation tag begin html"><span><</span></span><span class="entity name tag inline any html"><span>meta</span></span><span> </span><span class="entity other attribute-name html"><span>charset</span></span><span>=</span><span class="string quoted double html"><span class="punctuation string begin html"><span>"</span></span><span>UTF-8</span><span class="punctuation string end html"><span>"</span></span></span><span class="punctuation tag end html"><span>></span></span></span></span></div><div class="line"><span class="text html"><span>  </span><span class="meta tag inline any html"><span class="punctuation tag begin html"><span><</span></span><span class="entity name tag inline any html"><span>title</span></span><span class="punctuation tag end html"><span>></span></span></span><span>Elm • Maybe Hugs</span><span class="meta tag inline any html"><span class="punctuation tag begin html"><span></</span></span><span class="entity name tag inline any html"><span>title</span></span><span class="punctuation tag end html"><span>></span></span></span></span></div><div class="line"><span class="text html"><span>  </span><span class="comment block html"><span class="punctuation comment html"><span><!--</span></span><span>script type="text/javascript" src="/_reactor/debug.js"></script</span><span class="punctuation comment html"><span>--></span></span></span></span></div><div class="line"><span class="text html"><span class="source js embedded html"><span>  </span><span class="punctuation tag html"><span><</span></span><span class="entity name tag script html"><span>script</span></span><span> </span><span class="entity other attribute-name html"><span>type</span></span><span>=</span><span class="string quoted double html"><span class="punctuation string begin html"><span>"</span></span><span>text/javascript</span><span class="punctuation string end html"><span>"</span></span></span><span> </span><span class="entity other attribute-name html"><span>src</span></span><span>=</span><span class="string quoted double html"><span class="punctuation string begin html"><span>"</span></span><span>elm.js</span><span class="punctuation string end html"><span>"</span></span></span><span class="punctuation tag html"><span>></span><span></</span></span><span class="entity name tag script html"><span>script</span></span><span class="punctuation tag html"><span>></span></span><span> </span></span></span></div><div class="line"><span class="text html"><span>  </span><span class="meta tag inline any html"><span class="punctuation tag begin html"><span><</span></span><span class="entity name tag inline any html"><span>link</span></span><span> </span><span class="entity other attribute-name html"><span>rel</span></span><span>=</span><span class="string quoted double html"><span class="punctuation string begin html"><span>"</span></span><span>stylesheet</span><span class="punctuation string end html"><span>"</span></span></span><span> </span><span class="entity other attribute-name html"><span>href</span></span><span>=</span><span class="string quoted double html"><span class="punctuation string begin html"><span>"</span></span><span>style.css</span><span class="punctuation string end html"><span>"</span></span></span><span class="punctuation tag end html"><span>></span></span></span></span></div><div class="line"><span class="text html"><span class="meta tag structure any html"><span class="punctuation tag html"><span></</span></span><span class="entity name tag structure any html"><span>head</span></span><span class="punctuation tag html"><span>></span></span></span></span></div><div class="line"><span class="text html"><span> </span></span></div><div class="line"><span class="text html"><span class="meta tag structure any html"><span class="punctuation tag html"><span><</span></span><span class="entity name tag structure any html"><span>body</span></span><span class="punctuation tag html"><span>></span></span></span></span></div><div class="line"><span class="text html"><span class="meta tag structure any html"><span class="punctuation tag html"><span></</span></span><span class="entity name tag structure any html"><span>body</span></span><span class="punctuation tag html"><span>></span></span></span></span></div><div class="line"><span class="text html"><span> </span></span></div><div class="line"><span class="text html"><span class="source js embedded html"><span class="punctuation tag html"><span><</span></span><span class="entity name tag script html"><span>script</span></span><span> </span><span class="entity other attribute-name html"><span>type</span></span><span>=</span><span class="string quoted double html"><span class="punctuation string begin html"><span>"</span></span><span>text/javascript</span><span class="punctuation string end html"><span>"</span></span></span><span class="punctuation tag html"><span>></span></span></span></span></div><div class="line"><span class="text html"><span class="source js embedded html"><span class="storage modifier js"><span>var</span></span><span> todomvc </span><span class="keyword operator js"><span>=</span></span><span> Elm</span><span class="meta delimiter method period js"><span>.</span></span><span>fullscreen</span><span class="meta brace round js"><span>(</span></span><span>Elm</span><span class="meta delimiter method period js"><span>.</span></span><span>MaybeHugs</span><span class="meta delimiter object comma js"><span>,</span></span><span> </span><span class="punctuation section scope begin js"><span>{</span></span><span class="punctuation section scope end js"><span>}</span></span><span class="meta brace round js"><span>)</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text html"><span class="source js embedded html"><span class="punctuation tag html"><span></</span></span><span class="entity name tag script html"><span>script</span></span><span class="punctuation tag html"><span>></span></span><span> </span></span></span></div><div class="line"><span class="text html"><span> </span></span></div><div class="line"><span class="text html"><span class="meta tag structure any html"><span class="punctuation tag html"><span></</span></span><span class="entity name tag structure any html"><span>html</span></span><span class="punctuation tag html"><span>></span></span></span></span></div><div class="line"><span class="text html"><span> </span></span></div></pre>
<h6 id="user-content-packagejson" class="deep-link"><a href="#packagejson">package.json</a></h6>
<pre class="editor editor-colors"><div class="line"><span class="source json"><span class="meta structure dictionary json"><span class="punctuation dictionary begin json"><span>{</span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span>  </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>name</span><span class="punctuation string end json"><span>"</span></span></span><span class="meta structure dictionary json"><span class="punctuation separator dictionary key-value json"><span>:</span></span><span> </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>maybe-hugs-elm</span><span class="punctuation string end json"><span>"</span></span></span><span class="punctuation separator dictionary json"><span>,</span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span>  </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>version</span><span class="punctuation string end json"><span>"</span></span></span><span class="meta structure dictionary json"><span class="punctuation separator dictionary key-value json"><span>:</span></span><span> </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>1.0.0</span><span class="punctuation string end json"><span>"</span></span></span><span class="punctuation separator dictionary json"><span>,</span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span>  </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>description</span><span class="punctuation string end json"><span>"</span></span></span><span class="meta structure dictionary json"><span class="punctuation separator dictionary key-value json"><span>:</span></span><span> </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>Conditional hugging implementation in elm</span><span class="punctuation string end json"><span>"</span></span></span><span class="punctuation separator dictionary json"><span>,</span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span>  </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>scripts</span><span class="punctuation string end json"><span>"</span></span></span><span class="meta structure dictionary json"><span class="punctuation separator dictionary key-value json"><span>:</span></span><span> </span><span class="meta structure dictionary json"><span class="punctuation dictionary begin json"><span>{</span></span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span>    </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>start</span><span class="punctuation string end json"><span>"</span></span></span><span class="meta structure dictionary json"><span class="punctuation separator dictionary key-value json"><span>:</span></span><span> </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>ELM_HOME=node_modules/elm/share elm-reactor</span><span class="punctuation string end json"><span>"</span></span></span><span class="punctuation separator dictionary json"><span>,</span></span></span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span>    </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>make</span><span class="punctuation string end json"><span>"</span></span></span><span class="meta structure dictionary json"><span class="punctuation separator dictionary key-value json"><span>:</span></span><span> </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>elm-make MaybeHugs.elm</span><span class="punctuation string end json"><span>"</span></span></span><span class="punctuation separator dictionary json"><span>,</span></span></span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span>    </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>postinstall</span><span class="punctuation string end json"><span>"</span></span></span><span class="meta structure dictionary json"><span class="punctuation separator dictionary key-value json"><span>:</span></span><span> </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>npm run make</span><span class="punctuation string end json"><span>"</span></span></span></span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span>  </span></span><span class="punctuation dictionary end json"><span>}</span></span></span><span class="punctuation separator dictionary json"><span>,</span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span>  </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>repository</span><span class="punctuation string end json"><span>"</span></span></span><span class="meta structure dictionary json"><span class="punctuation separator dictionary key-value json"><span>:</span></span><span> </span><span class="meta structure dictionary json"><span class="punctuation dictionary begin json"><span>{</span></span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span>    </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>type</span><span class="punctuation string end json"><span>"</span></span></span><span class="meta structure dictionary json"><span class="punctuation separator dictionary key-value json"><span>:</span></span><span> </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>git</span><span class="punctuation string end json"><span>"</span></span></span><span class="punctuation separator dictionary json"><span>,</span></span></span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span>    </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>url</span><span class="punctuation string end json"><span>"</span></span></span><span class="meta structure dictionary json"><span class="punctuation separator dictionary key-value json"><span>:</span></span><span> </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span class="markup underline link hyperlink"><span>https://github.com/zkat/maybe-hugs.git</span></span><span class="punctuation string end json"><span>"</span></span></span></span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span>  </span></span><span class="punctuation dictionary end json"><span>}</span></span></span><span class="punctuation separator dictionary json"><span>,</span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span>  </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>author</span><span class="punctuation string end json"><span>"</span></span></span><span class="meta structure dictionary json"><span class="punctuation separator dictionary key-value json"><span>:</span></span><span> </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>Bastian Krol <bastian.krol@web.de></span><span class="punctuation string end json"><span>"</span></span></span><span class="punctuation separator dictionary json"><span>,</span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span>  </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>license</span><span class="punctuation string end json"><span>"</span></span></span><span class="meta structure dictionary json"><span class="punctuation separator dictionary key-value json"><span>:</span></span><span> </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>CC0-1.0</span><span class="punctuation string end json"><span>"</span></span></span><span class="punctuation separator dictionary json"><span>,</span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span>  </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>keywords</span><span class="punctuation string end json"><span>"</span></span></span><span class="meta structure dictionary json"><span class="punctuation separator dictionary key-value json"><span>:</span></span><span> </span><span class="meta structure array json"><span class="punctuation array begin json"><span>[</span></span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span class="meta structure array json"><span>    </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>hugs</span><span class="punctuation string end json"><span>"</span></span></span><span class="punctuation separator array json"><span>,</span></span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span class="meta structure array json"><span>    </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>cute</span><span class="punctuation string end json"><span>"</span></span></span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span class="meta structure array json"><span>  </span><span class="punctuation array end json"><span>]</span></span></span><span class="punctuation separator dictionary json"><span>,</span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span>  </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>homepage</span><span class="punctuation string end json"><span>"</span></span></span><span class="meta structure dictionary json"><span class="punctuation separator dictionary key-value json"><span>:</span></span><span> </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span class="markup underline link hyperlink"><span>https://github.com/zkat/maybe-hugs#readme</span></span><span class="punctuation string end json"><span>"</span></span></span><span class="punctuation separator dictionary json"><span>,</span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span>  </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>dependencies</span><span class="punctuation string end json"><span>"</span></span></span><span class="meta structure dictionary json"><span class="punctuation separator dictionary key-value json"><span>:</span></span><span> </span><span class="meta structure dictionary json"><span class="punctuation dictionary begin json"><span>{</span></span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span>    </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>elm</span><span class="punctuation string end json"><span>"</span></span></span><span class="meta structure dictionary json"><span class="punctuation separator dictionary key-value json"><span>:</span></span><span> </span><span class="string quoted double json"><span class="punctuation string begin json"><span>"</span></span><span>^2.0.0</span><span class="punctuation string end json"><span>"</span></span></span></span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span class="meta structure dictionary json"><span>  </span></span><span class="punctuation dictionary end json"><span>}</span></span></span></span></span></span></div><div class="line"><span class="source json"><span class="meta structure dictionary json"><span class="punctuation dictionary end json"><span>}</span></span></span></span></div><div class="line"><span class="source json"><span> </span></span></div></pre>
<h6 id="user-content-stylecss" class="deep-link"><a href="#stylecss">style.css</a></h6>
<pre class="editor editor-colors"><div class="line"><span class="source css"><span class="meta selector css"><span class="entity name tag css"><span>html</span></span><span>,</span></span></span></div><div class="line"><span class="source css"><span class="meta selector css"><span class="entity name tag css"><span>body</span></span><span> </span></span><span class="meta css"><span class="punctuation section begin css"><span>{</span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>margin</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="constant numeric css"><span>0</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>padding</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="constant numeric css"><span>0</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span class="punctuation section end css"><span>}</span></span></span></span></div><div class="line"><span class="source css"><span> </span></span></div><div class="line"><span class="source css"><span class="meta selector css"><span class="entity name tag css"><span>body</span></span><span> </span></span><span class="meta css"><span class="punctuation section begin css"><span>{</span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>font</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="constant numeric css"><span>16</span><span class="keyword other unit css"><span>px</span></span></span><span> </span><span class="string quoted single css"><span class="punctuation string begin css"><span>'</span></span><span>Helvetica Neue</span><span class="punctuation string end css"><span>'</span></span></span><span>, </span><span class="support constant font-name css"><span>Helvetica</span></span><span>, </span><span class="support constant font-name css"><span>Arial</span></span><span>, </span><span class="support constant font-name css"><span>sans-serif</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>line-height</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="constant numeric css"><span>1.5</span><span class="keyword other unit css"><span>em</span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>background-color</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="constant other color rgb-value css"><span class="punctuation constant css"><span>#</span></span><span>eaeaea</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>color</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="constant other color rgb-value css"><span class="punctuation constant css"><span>#</span></span><span>444</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>width</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="constant numeric css"><span>550</span><span class="keyword other unit css"><span>px</span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>margin</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="constant numeric css"><span>0</span></span><span> </span><span class="support constant property-value css"><span>auto</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>-webkit-font-smoothing</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span>antialiased</span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>-moz-font-smoothing</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span>antialiased</span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>-ms-font-smoothing</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span>antialiased</span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>-o-font-smoothing</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span>antialiased</span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span>font-smoothing</span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span>antialiased</span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span class="punctuation section end css"><span>}</span></span></span></span></div><div class="line"><span class="source css"><span> </span></span></div><div class="line"><span class="source css"><span class="meta selector css"><span class="entity other attribute-name id css"><span class="punctuation entity css"><span>#</span></span><span>maybehugapp</span></span><span> </span></span><span class="meta css"><span class="punctuation section begin css"><span>{</span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>background</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="constant other color rgb-value css"><span class="punctuation constant css"><span>#</span></span><span>fff</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>background</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="support function css"><span>rgba</span></span><span class="punctuation section function css"><span>(</span></span><span class="constant other color rgb-value css"><span>255, 255, 255, 0.9</span></span><span class="punctuation section function css"><span>)</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>margin-top</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="constant numeric css"><span>50</span><span class="keyword other unit css"><span>px</span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>height</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="constant numeric css"><span>430</span><span class="keyword other unit css"><span>px</span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>border</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="constant numeric css"><span>1</span><span class="keyword other unit css"><span>px</span></span></span><span> </span><span class="support constant property-value css"><span>solid</span></span><span> </span><span class="constant other color rgb-value css"><span class="punctuation constant css"><span>#</span></span><span>ccc</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>position</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="support constant property-value css"><span>relative</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>border-top-left-radius</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="constant numeric css"><span>2</span><span class="keyword other unit css"><span>px</span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>border-top-right-radius</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="constant numeric css"><span>2</span><span class="keyword other unit css"><span>px</span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>box-shadow</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="constant numeric css"><span>0</span></span><span> </span><span class="constant numeric css"><span>2</span><span class="keyword other unit css"><span>px</span></span></span><span> </span><span class="constant numeric css"><span>6</span><span class="keyword other unit css"><span>px</span></span></span><span> </span><span class="constant numeric css"><span>0</span></span><span> </span><span class="support function css"><span>rgba</span></span><span class="punctuation section function css"><span>(</span></span><span class="constant other color rgb-value css"><span>0, 0, 0, 0.2</span></span><span class="punctuation section function css"><span>)</span></span><span>,</span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span class="meta property-value css"><span>  </span><span class="constant numeric css"><span>0</span></span><span> </span><span class="constant numeric css"><span>25</span><span class="keyword other unit css"><span>px</span></span></span><span> </span><span class="constant numeric css"><span>50</span><span class="keyword other unit css"><span>px</span></span></span><span> </span><span class="constant numeric css"><span>0</span></span><span> </span><span class="support function css"><span>rgba</span></span><span class="punctuation section function css"><span>(</span></span><span class="constant other color rgb-value css"><span>0, 0, 0, 0.15</span></span><span class="punctuation section function css"><span>)</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span class="punctuation section end css"><span>}</span></span></span></span></div><div class="line"><span class="source css"><span> </span></span></div><div class="line"><span class="source css"><span class="meta selector css"><span class="entity other attribute-name id css"><span class="punctuation entity css"><span>#</span></span><span>maybehugapp</span></span><span> </span><span class="entity name tag css"><span>h1</span></span><span>, </span><span class="entity other attribute-name id css"><span class="punctuation entity css"><span>#</span></span><span>maybehugapp</span></span><span> </span><span class="entity name tag css"><span>h2</span></span><span> </span></span><span class="meta css"><span class="punctuation section begin css"><span>{</span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>width</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="constant numeric css"><span>100</span><span class="keyword other unit css"><span>%</span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>font-weight</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="support constant property-value css"><span>bold</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>text-align</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="support constant property-value css"><span>center</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>color</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="constant other color rgb-value css"><span class="punctuation constant css"><span>#</span></span><span>aaa</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>color</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="support function css"><span>rgba</span></span><span class="punctuation section function css"><span>(</span></span><span class="constant other color rgb-value css"><span>128, 128, 128, 0.3</span></span><span class="punctuation section function css"><span>)</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>text-shadow</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="constant numeric css"><span>-1</span><span class="keyword other unit css"><span>px</span></span></span><span> </span><span class="constant numeric css"><span>-1</span><span class="keyword other unit css"><span>px</span></span></span><span> </span><span class="support function css"><span>rgba</span></span><span class="punctuation section function css"><span>(</span></span><span class="constant other color rgb-value css"><span>0, 0, 0, 0.2</span></span><span class="punctuation section function css"><span>)</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>-webkit-text-rendering</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="support constant property-value css"><span>optimizeLegibility</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>-moz-text-rendering</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="support constant property-value css"><span>optimizeLegibility</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>-ms-text-rendering</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="support constant property-value css"><span>optimizeLegibility</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>-o-text-rendering</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="support constant property-value css"><span>optimizeLegibility</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span>text-rendering</span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="support constant property-value css"><span>optimizeLegibility</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span class="punctuation section end css"><span>}</span></span></span></span></div><div class="line"><span class="source css"><span> </span></span></div><div class="line"><span class="source css"><span class="meta selector css"><span class="entity other attribute-name id css"><span class="punctuation entity css"><span>#</span></span><span>maybehugapp</span></span><span> </span><span class="entity name tag css"><span>h1</span></span><span> </span></span><span class="meta css"><span class="punctuation section begin css"><span>{</span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>font-size</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="constant numeric css"><span>70</span><span class="keyword other unit css"><span>px</span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span class="punctuation section end css"><span>}</span></span></span></span></div><div class="line"><span class="source css"><span> </span></span></div><div class="line"><span class="source css"><span class="meta selector css"><span class="entity other attribute-name id css"><span class="punctuation entity css"><span>#</span></span><span>maybehugapp</span></span><span> </span><span class="entity name tag css"><span>h2</span></span><span> </span></span><span class="meta css"><span class="punctuation section begin css"><span>{</span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>font-size</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="constant numeric css"><span>30</span><span class="keyword other unit css"><span>px</span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span class="punctuation section end css"><span>}</span></span></span></span></div><div class="line"><span class="source css"><span> </span></span></div><div class="line"><span class="source css"><span class="meta selector css"><span class="entity other attribute-name class css"><span class="punctuation entity css"><span>.</span></span><span>cutie</span></span><span> </span></span><span class="meta css"><span class="punctuation section begin css"><span>{</span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>width</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="constant numeric css"><span>300</span><span class="keyword other unit css"><span>px</span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>display</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="support constant property-value css"><span>block</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>margin-left</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="support constant property-value css"><span>auto</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>margin-right</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="support constant property-value css"><span>auto</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>text-align</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="support constant property-value css"><span>center</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>box-shadow</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span class="constant numeric css"><span>0</span></span><span> </span><span class="constant numeric css"><span>2</span><span class="keyword other unit css"><span>px</span></span></span><span> </span><span class="constant numeric css"><span>6</span><span class="keyword other unit css"><span>px</span></span></span><span> </span><span class="constant numeric css"><span>0</span></span><span> </span><span class="support function css"><span>rgba</span></span><span class="punctuation section function css"><span>(</span></span><span class="constant other color rgb-value css"><span>0, 0, 0, 0.2</span></span><span class="punctuation section function css"><span>)</span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta css"><span class="punctuation section end css"><span>}</span></span></span></span></div><div class="line"><span class="source css"><span> </span></span></div></pre>
</main>
</div>
<footer>
<a href="https://github.com/zkat/maybe-hugs">
<span class="mega-octicon octicon-mark-github"></span>
</a>
<a href="http://creativecommons.org/publicdomain/zero/1.0/">
<img src="https://camo.githubusercontent.com/c5160f944848828fa33126d9a697e9abe43ea98f/687474703a2f2f692e6372656174697665636f6d6d6f6e732e6f72672f702f7a65726f2f312e302f38387833312e706e67"/>
</a>
</footer>
<script src="bundle.js"></script>
</body>