scss reorganize, add footer

author: s-ol <s-ol@users.noreply.github.com> 2018-11-23 06:25:09 +0000
committer: s-ol <s-ol@users.noreply.github.com> 2018-11-23 06:25:09 +0000
commit: 05a92e841e36ff31010f52f29d42dfab8b24770f (patch)
tree: 0421a7837c8ef7b80f82f6af27290de4dd2af0f4
parent: clean-ish header (diff)
download: mmm-05a92e841e36ff31010f52f29d42dfab8b24770f.tar.gz
mmm-05a92e841e36ff31010f52f29d42dfab8b24770f.zip
10 files changed, 259 insertions, 185 deletions
diff --git a/build/layout.moon b/build/layout.moon
new file mode 100644
index 0000000..6ff6feb
--- /dev/null
+++ b/build/layout.moon
@@ -0,0 +1,44 @@
+import header, footer, div, h1, span, b, a, img from require 'mmm.dom'
+
+pick = (...) ->
+  num = select '#', ...
+  i = math.ceil math.random! * num
+  select i, ...
+
+
+iconlink = (href, src, alt, style) -> a {
+  class: 'iconlink',
+  :href,
+  target: '_blank',
+  img :src, :alt, :style
+}
+
+{
+  header: header {
+    h1 {
+      span '\xe2\x98\x89', class: 'sun'
+      b!
+      span 'mmm', class: 'bold'
+      '.s-ol.nu'
+    }
+    span "fun stuff with code and wires"
+  --        pick 'fun', 'cool', 'weird', 'interesting', 'new'
+  --        pick 'stuff', 'things', 'projects', 'experiments', 'news'
+  --        "with"
+  --        pick 'mostly code', 'code and wires', 'silicon', 'electronics'
+  }
+  footer: footer {
+    span {
+      'made with \xe2\x98\xbd by '
+      a 's-ol', href: 'https://twitter.com/S0lll0s'
+      ", #{os.date '%Y'}"
+    }
+    div {
+      class: 'icons',
+      iconlink 'https://github.com/s-ol/mmm', 'https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/github.svg',
+      iconlink 'https://twitter.com/S0lll0s', 'https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/twitter.svg',
+      iconlink 'https://webring.xxiivv.com/#random', 'https://webring.xxiivv.com/icon.black.svg', 'webring',
+        { height: '1.3em', 'margin-left': '.3em', 'margin-top': '-0.12em' }
+    }
+  }
+}
diff --git a/build/render_fileder.moon b/build/render_fileder.moon
index f8958aa..f3bae31 100644
--- a/build/render_fileder.moon
+++ b/build/render_fileder.moon
@@ -2,6 +2,7 @@ require 'mmm'
 import get_path from require 'build.util'
 import tohtml from require 'mmm.component'
 import Browser from require 'mmm.mmmfs.browser'
+import header, footer from require 'build.layout'
 
 export BROWSER
 
@@ -9,33 +10,29 @@ export BROWSER
 -- moon render.moon <path_to_root>
 { path_to_root } = arg
 
-seed = (str) ->
-  len = #str
-  rnd = -> math.ceil math.random! * len
-
-  math.randomseed len
+assert path_to_root, "please specify the relative root path"
+path = get_path path_to_root
 
-  return if len == 0
+do
+  seed = (str) ->
+    len = #str
+    rnd = -> math.ceil math.random! * len
 
-  upper, lower = 0, 0
-  for i=1,4
-    upper += str\byte rnd!
-    upper *= 0x100
+    math.randomseed len
 
-    lower += str\byte rnd!
-    lower *= 0x100
+    return if len == 0
 
-  math.randomseed upper, lower
+    upper, lower = 0, 0
+    for i=1,4
+      upper += str\byte rnd!
+      upper *= 0x100
 
-pick = (...) ->
-  num = select '#', ...
-  i = math.ceil math.random! * num
-  select i, ...
+      lower += str\byte rnd!
+      lower *= 0x100
 
-assert path_to_root, "please specify the relative root path"
-path = get_path path_to_root
+    math.randomseed upper, lower
 
-seed path
+  seed path
 
 root = dofile '$bundle.lua'
 assert root, "couldn't load $bundle.lua"
@@ -61,26 +58,12 @@ with io.open 'index.html', 'w'
     <link href=\"https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400\" rel=\"stylesheet\">
   </head>
   <body>
-    <header>
-      <h1>
-        <i class=\"sun\">☉</i>
-        <b></b>
-        <span class=\"bold\">mmm</span>
-        .s-ol.nu
-      </h1>
-      <span>
-        fun stuff with code and wires
-<!--
-        #{pick 'fun', 'cool', 'weird', 'interesting', 'new'}
-        #{pick 'stuff', 'things', 'projects', 'experiments', 'news'}
-        with
-        #{pick 'mostly code', 'code and wires', 'silicon', 'electronics'}
--->
-      </span>
-    </header>
+    #{header}
 
     #{assert (tohtml BROWSER), "couldn't render BROWSER"}
 
+    #{footer}
+
     <script src=\"/highlight.pack.js\"></script>
     <script src=\"//cdnjs.cloudflare.com/ajax/libs/marked/0.5.1/marked.min.js\"></script>
     <script src=\"//cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.6/svg.min.js\"></script>
diff --git a/root/text$moonscript -> fn -> mmm$dom.moon b/root/text$moonscript -> fn -> mmm$dom.moon
index 7e346d8..5b4f3e0 100644
--- a/root/text$moonscript -> fn -> mmm$dom.moon
+++ b/root/text$moonscript -> fn -> mmm$dom.moon
@@ -8,28 +8,6 @@ import opairs from require 'mmm.ordered'
     append = (stuff) -> table.insert content, stuff
     append, -> article content
 
-  moon = '\xe2\x98\xbd'
-
-  iconlink = (href, src, alt, style) -> a {
-    class: 'iconlink',
-    :href,
-    target: '_blank',
-    img :src, :alt, :style
-  }
-
-  -- menu
-  append h1 {
-    style: { 'border-bottom': '1px solid #000' },
-    'mmm',
-    div {
-      class: 'icons',
-      iconlink 'https://github.com/s-ol/mmm', 'https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/github.svg',
-      iconlink 'https://twitter.com/S0lll0s', 'https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/twitter.svg',
-      iconlink 'https://webring.xxiivv.com/#random', 'https://webring.xxiivv.com/icon.black.svg', 'webring',
-        { height: '0.9em', 'margin-left': '.04em' }
-    }
-  }
-
   append p {
     tt 'mmm'
     ' is not the '
@@ -44,11 +22,9 @@ import opairs from require 'mmm.ordered'
   }
 
   for child in *@children
-    append (child\get 'preview: mmm/dom') or child\get 'mmm/dom'
-
-  append p {
-    "made with #{moon} by "
-    a { 's-ol', href: 'https://twitter.com/S0lll0s' }
-  }
+    append div {
+      class: 'well'
+      (child\get 'preview: mmm/dom') or child\get 'mmm/dom'
+    }
 
   finish!
diff --git a/scss/browser.scss b/scss/_browser.scss
index 1117da7..ab6be14 100644
--- a/scss/browser.scss
+++ b/scss/_browser.scss
@@ -1,5 +1,8 @@
 .browser {
   display: flex;
+  flex: 1;
+
+  border-top: 0.2rem solid $gray-bright;
 
   .view {
     display: flex;
@@ -11,7 +14,7 @@
     &.inspector {
       top: 0;
       position: sticky;
-      height: 100vh;
+      max-height: 100vh;
       color: #c5c8c6;
 
       @include left-border;
diff --git a/scss/_canvasapp.scss b/scss/_canvasapp.scss
new file mode 100644
index 0000000..2eb1a42
--- /dev/null
+++ b/scss/_canvasapp.scss
@@ -0,0 +1,36 @@
+.canvas_app {
+  position: relative;
+
+  display: inline-block;
+
+  .overlay {
+    position: absolute;
+    padding: 1rem;
+
+
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    opacity: 0;
+
+    background: rgba(0, 0, 0, 0.7);
+
+    transition: opacity 300ms;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    > * {
+      margin: 0.5em;
+    }
+
+    a {
+      display: block;
+      color: $gray-bright;
+      font-family: inherit;
+    }
+  }
+}
diff --git a/scss/_defs.scss b/scss/_defs.scss
new file mode 100644
index 0000000..d76655e
--- /dev/null
+++ b/scss/_defs.scss
@@ -0,0 +1,19 @@
+$white:         #ffffff;
+$gray-bright:   #eeeeee;
+$gray-dark:     #303336;
+$gray-darker:   #1d1f21;
+$gray-neutral:  #b9bdc1;
+$gray-success:  #bdddc1;
+$gray-fail:     #ddbdc1;
+
+@mixin left-border($w: 0.6rem) {
+  border-style: solid;
+  border-width: 0 0 0 $w;
+  border-radius: 0 6px 6px 0;
+}
+
+@mixin right-border($w: 0.6rem) {
+  border-style: solid;
+  border-width: 0 $w 0 0;
+  border-radius: 6px 0 0 6px;
+}
diff --git a/scss/_footer.scss b/scss/_footer.scss
new file mode 100644
index 0000000..466139c
--- /dev/null
+++ b/scss/_footer.scss
@@ -0,0 +1,27 @@
+footer {
+  display: flex;
+  padding: 1rem 2rem;
+
+  color: $gray-bright;
+  background: $gray-dark;
+
+  .icons {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+
+    .iconlink  {
+      filter: invert(.7);
+
+      &:hover {
+        filter: invert(1);
+      }
+
+      > img {
+        height: 1em;
+        margin-left: 0.5em;
+        vertical-align: middle;
+      }
+    }
+  }
+}
diff --git a/scss/_header.scss b/scss/_header.scss
new file mode 100644
index 0000000..b3a6898
--- /dev/null
+++ b/scss/_header.scss
@@ -0,0 +1,33 @@
+header {
+  font-family: 'Source Sans Pro', sans-serif;
+  padding: 1rem 2rem;
+  text-align: right;
+
+  color: $gray-bright;
+  background: $gray-dark;
+
+  h1 {
+    display: flex;
+    justify-content: space-around;
+    align-items: baseline;
+    margin: 0;
+
+    font-size: 4rem;
+    font-weight: 200;
+
+    > b {
+      flex: 1;
+    }
+
+    .bold {
+      font-weight: 400;
+    }
+  }
+
+  .sun {
+    font-style: normal;
+    font-weight: 800;
+    font-size: 0.7em;
+    vertical-align: -0.04em;
+  }
+}
diff --git a/scss/_reset.scss b/scss/_reset.scss
new file mode 100644
index 0000000..9dae26c
--- /dev/null
+++ b/scss/_reset.scss
@@ -0,0 +1,65 @@
+* {
+  font-weight: inherit;
+  font-style: inherit;
+  font-family: inherit;
+  color: inherit;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+input, select, button {
+  color: initial;
+}
+
+tt, code, kbd, samp {
+  font-family: 'monospace';
+}
+
+body, html, h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  padding: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: bold;
+}
+
+::selection {
+  background: $gray-dark;
+  color: $gray-bright;
+  padding: 1em;
+}
+
+b { font-weight: bold; }
+i { font-style: italic; }
+a { cursor: pointer; }
+hr { clear: both; }
+
+body {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  background: $white;
+  font-family: sans-serif;
+
+  min-height: 100vh;
+}
+
+a {
+  font-weight: bold;
+
+  text-decoration: underline;
+  text-decoration-color: transparent;
+
+  &:hover {
+    filter: invert(40%);
+    text-decoration-color: currentColor;
+  }
+
+  transition: filter 500ms, text-decoration-color 500ms;
+}
+
+code {
+  font-size: 0.8em;
+}
diff --git a/scss/main.scss b/scss/main.scss
index adbb65d..fe67631 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -1,122 +1,10 @@
+@import 'defs';
+@import 'reset';
 @import 'hljs';
-
-$gray-bright:   #eeeeee;
-$gray-dark:     #303336;
-$gray-darker:   #1d1f21;
-$gray-neutral:  #b9bdc1;
-$gray-success:  #bdddc1;
-$gray-fail:     #ddbdc1;
-
-@mixin left-border($w: 0.6rem) {
-  border-style: solid;
-  border-width: 0 0 0 $w;
-  border-radius: 0 6px 6px 0;
-}
-
-@mixin right-border($w: 0.6rem) {
-  border-style: solid;
-  border-width: 0 $w 0 0;
-  border-radius: 6px 0 0 6px;
-}
-
+@import 'header';
+@import 'footer';
 @import 'browser';
-
-body {
-  font-family: sans-serif;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  margin: 0;
-  padding: 0;
-}
-
-a {
-  color: inherit;
-}
-
-header {
-  font-family: 'Source Sans Pro', sans-serif;
-  padding: 1rem 2rem;
-  text-align: right;
-
-  color: $gray-bright;
-  background: $gray-dark;
-
-  h1 {
-    display: flex;
-    justify-content: space-around;
-    align-items: baseline;
-    margin: 0;
-
-    font-size: 4rem;
-    font-weight: 200;
-
-    > b {
-      flex: 1;
-    }
-
-    .bold {
-      font-weight: 400;
-    }
-  }
-
-  i.sun {
-    font-style: normal;
-    font-weight: 800;
-    font-size: 0.7em;
-    vertical-align: -0.04em;
-  }
-}
-
-.canvas_app {
-  position: relative;
-
-  display: inline-block;
-
-  .overlay {
-    position: absolute;
-    padding: 1rem;
-
-
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-
-    opacity: 0;
-
-    background: rgba(0, 0, 0, 0.7);
-
-    transition: opacity 300ms;
-
-    &:hover {
-      opacity: 1;
-    }
-
-    > * {
-      margin: 0.5em;
-    }
-
-    a {
-      display: block;
-      color: $gray-bright;
-      font-family: inherit;
-    }
-  }
-}
-
-h1 .icons {
-  display: inline-flex;
-  float: right;
-
-  .iconlink > img {
-    height: 0.7em;
-    margin-left: 0.2em;
-    vertical-align: middle;
-  }
-}
+@import 'canvasapp';
 
 pre > code.hljs {
   @include left-border;
@@ -140,10 +28,10 @@ pre.dual-code {
   }
 }
 
-.example {
+.example, .well {
   @include left-border;
 
-  margin: 0 2rem;
+  margin: 1rem 2rem;
   padding: 1rem;
   background: $gray-bright;
   border-color: $gray-neutral;
author	s-ol <s-ol@users.noreply.github.com>	2018-11-23 06:25:09 +0000
committer	s-ol <s-ol@users.noreply.github.com>	2018-11-23 06:25:09 +0000
commit	05a92e841e36ff31010f52f29d42dfab8b24770f (patch)
tree	0421a7837c8ef7b80f82f6af27290de4dd2af0f4
parent	clean-ish header (diff)
download	mmm-05a92e841e36ff31010f52f29d42dfab8b24770f.tar.gz mmm-05a92e841e36ff31010f52f29d42dfab8b24770f.zip