From 198194ea194b6f091868e71f7b129e36caa4d6f4 Mon Sep 17 00:00:00 2001 From: s-ol Date: Tue, 8 Oct 2019 13:21:30 +0200 Subject: layout fixes: - link from logo to root - links to path/: unless `STATIC` is set --- mmm/mmmfs/converts.moon | 4 +- mmm/mmmfs/layout.moon | 124 ++++++++++++++++++++------------------ mmm/mmmfs/util.moon | 10 +++- scss/_browser.scss | 156 ++++++++++++++++++++++++------------------------ 4 files changed, 156 insertions(+), 138 deletions(-) diff --git a/mmm/mmmfs/converts.moon b/mmm/mmmfs/converts.moon index f8aad9f..f508d23 100644 --- a/mmm/mmmfs/converts.moon +++ b/mmm/mmmfs/converts.moon @@ -42,7 +42,9 @@ converts = { { inp: 'text/html%+frag', out: 'text/html', - transform: (html, fileder) -> render html, fileder + transform: (html, fileder) -> + html = '

' .. html .. '

' + render html, fileder }, { inp: 'text/html%+frag', diff --git a/mmm/mmmfs/layout.moon b/mmm/mmmfs/layout.moon index 47e511b..6eead6d 100644 --- a/mmm/mmmfs/layout.moon +++ b/mmm/mmmfs/layout.moon @@ -5,7 +5,7 @@ import navigate_to from (require 'mmm.mmmfs.util') require 'mmm.dom' pick = (...) -> num = select '#', ... i = math.ceil math.random! * num - select i, ... + (select i, ...) iconlink = (href, src, alt, style) -> a { class: 'iconlink', @@ -30,37 +30,41 @@ logo = svg { } } -header = header { - div { - h1 { - logo - span { - span 'mmm', class: 'bold' - '' - '.s‑ol.nu' +gen_header = -> + header { + div { + h1 { + navigate_to '', logo + span { + span 'mmm', class: 'bold' + '' + '.s‑ol.nu' + } } + -- span "fun stuff with code and wires" + table.concat { + pick 'fun', 'cool', 'weird', 'interesting', 'new', 'pleasant' + pick 'stuff', 'things', 'projects', 'experiments', 'visuals', 'ideas' + pick "with", 'and' + pick 'mostly code', 'code and wires', 'silicon', 'electronics', 'shaders', + 'oscilloscopes', 'interfaces', 'hardware', 'FPGAs' + }, ' ' } - 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' - } - aside { - navigate_to '/about', 'about me' - navigate_to '/games', 'games' - navigate_to '/projects', 'other' - a { - href: 'mailto:s%20[removethis]%20[at]%20s-ol.nu' - 'contact' - script " - var l = document.currentScript.parentElement; - l.href = l.href.replace('%20[at]%20', '@'); - l.href = l.href.replace('%20[removethis]', '') + '?subject=Hey there :)'; - " + aside { + navigate_to '/about', 'about me' + navigate_to '/games', 'games' + navigate_to '/projects', 'other' + a { + href: 'mailto:s%20[removethis]%20[at]%20s-ol.nu' + 'contact' + script " + var l = document.currentScript.parentElement; + l.href = l.href.replace('%20[at]%20', '@'); + l.href = l.href.replace('%20[removethis]', '') + '?subject=Hey there :)'; + " + } } } -} footer = footer { span { @@ -108,53 +112,59 @@ get_meta = => meta -render = (content, fileder) -> +render = (content, fileder, opts={}) -> + opts.meta or= get_meta fileder + opts.scripts or= '' + + unless opts.noview + content = [[ +

+ ]] .. content .. [[ +

+ ]] + buf = [[ - - - - + + ]] buf ..= " #{get_meta fileder} - #{header} + #{gen_header!} #{content} #{footer} " buf ..= [[ - - - - - - + + + + + + ]] + + buf ..= opts.scripts + -- buf ..= " - " diff --git a/mmm/mmmfs/util.moon b/mmm/mmmfs/util.moon index 5c25ed3..db0c432 100644 --- a/mmm/mmmfs/util.moon +++ b/mmm/mmmfs/util.moon @@ -3,6 +3,12 @@ merge = (orig={}, extra) -> for k,v in pairs extra attr[k] = v +tourl = (path) -> + if STATIC + path + else + "#{path}/:" + (elements) -> import a, div, pre from elements @@ -14,7 +20,7 @@ merge = (orig={}, extra) -> assert fileder, "no fileder passed." navigate_to = (path, name, opts={}) -> - opts.href = path + opts.href = tourl path opts.onclick = if MODE == 'CLIENT' then (e) => e\preventDefault! BROWSER\navigate path @@ -30,7 +36,7 @@ merge = (orig={}, extra) -> a name, merge attr, :href, target: '_blank' else a name, merge attr, { - href: fileder.path + href: tourl fileder.path onclick: if MODE == 'CLIENT' then (e) => e\preventDefault! BROWSER\navigate fileder.path diff --git a/scss/_browser.scss b/scss/_browser.scss index 4d4a260..2bfc73e 100644 --- a/scss/_browser.scss +++ b/scss/_browser.scss @@ -3,109 +3,109 @@ flex: 1; border-top: 0.2rem solid $gray-bright; +} - .view { - display: flex; - flex-direction: column; - - flex: 1 1 0; - min-width: 0; +.view { + display: flex; + flex-direction: column; - &.inspector { - top: 0; - position: sticky; - max-height: 100vh; - color: #c5c8c6; + flex: 1 1 0; + min-width: 0; - @include left-border; - border-color: $gray-dark; - background: $gray-dark; + &.inspector { + top: 0; + position: sticky; + max-height: 100vh; + color: #c5c8c6; - nav { - background: inherit; - } - - .content { - margin: 0; - padding: 0; - display: flex; - background: $gray-darker; - - > * { - display: block; - margin: 0; - padding: 1em; - border-radius: 0; - border: 0; - flex: 1; - } - } - } + @include left-border; + border-color: $gray-dark; + background: $gray-dark; nav { - position: sticky; - top: 0; + background: inherit; + } + .content { + margin: 0; + padding: 0; display: flex; - flex: 0 0 auto; - flex-wrap: wrap; - justify-content: space-between; - background: $gray-bright; - z-index: 1000; - - > span:first-of-type { - flex: 1 0 auto; - } + background: $gray-darker; > * { - margin: 1em; - white-space: nowrap; - } - - > .inspect-btn { - @include media-small() { display: none; } + display: block; + margin: 0; + padding: 1em; + border-radius: 0; + border: 0; + flex: 1; } } + } + + nav { + position: sticky; + top: 0; - .error-wrap { - flex: 0 0 auto; - padding: 1em 2em; - overflow: hidden; + display: flex; + flex: 0 0 auto; + flex-wrap: wrap; + justify-content: space-between; + background: $gray-bright; + z-index: 1000; + + > span:first-of-type { + flex: 1 0 auto; + } - background: $gray-fail; + > * { + margin: 1em; + white-space: nowrap; + } - &.empty { - display: none; - } + > .inspect-btn { + @include media-small() { display: none; } + } + } - > span { - display: inline-block; - margin-bottom: 0.5em; + .error-wrap { + flex: 0 0 auto; + padding: 1em 2em; + overflow: hidden; - font-weight: bold; - color: #f00; - } + background: $gray-fail; - > pre { - margin: 0; - } + &.empty { + display: none; } - .content { - flex: 1 1 auto; - overflow: auto; - padding: 1em 2em; + > span { + display: inline-block; + margin-bottom: 0.5em; + + font-weight: bold; + color: #f00; + } - position: relative; + > pre { + margin: 0; } } .content { - opacity: 1; - transition: opacity 150ms; + flex: 1 1 auto; + overflow: auto; + padding: 1em 2em; - body.loading & { - opacity: 0; - } + position: relative; + } +} + +.content { + opacity: 1; + transition: opacity 150ms; + + body.loading & { + opacity: 0; } } -- cgit v1.2.3