git.s-ol.nu mmm / 05a92e8
scss reorganize, add footer s-ol 4 years ago
11 changed file(s) with 334 addition(s) and 260 deletion(s). Raw diff Collapse all Expand all
+44
-0
build/layout.moon less more
0 import header, footer, div, h1, span, b, a, img from require 'mmm.dom'
1
2 pick = (...) ->
3 num = select '#', ...
4 i = math.ceil math.random! * num
5 select i, ...
6
7
8 iconlink = (href, src, alt, style) -> a {
9 class: 'iconlink',
10 :href,
11 target: '_blank',
12 img :src, :alt, :style
13 }
14
15 {
16 header: header {
17 h1 {
18 span '\xe2\x98\x89', class: 'sun'
19 b!
20 span 'mmm', class: 'bold'
21 '.s-ol.nu'
22 }
23 span "fun stuff with code and wires"
24 -- pick 'fun', 'cool', 'weird', 'interesting', 'new'
25 -- pick 'stuff', 'things', 'projects', 'experiments', 'news'
26 -- "with"
27 -- pick 'mostly code', 'code and wires', 'silicon', 'electronics'
28 }
29 footer: footer {
30 span {
31 'made with \xe2\x98\xbd by '
32 a 's-ol', href: 'https://twitter.com/S0lll0s'
33 ", #{os.date '%Y'}"
34 }
35 div {
36 class: 'icons',
37 iconlink 'https://github.com/s-ol/mmm', 'https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/github.svg',
38 iconlink 'https://twitter.com/S0lll0s', 'https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/twitter.svg',
39 iconlink 'https://webring.xxiivv.com/#random', 'https://webring.xxiivv.com/icon.black.svg', 'webring',
40 { height: '1.3em', 'margin-left': '.3em', 'margin-top': '-0.12em' }
41 }
42 }
43 }
+24
-41
build/render_fileder.moon less more
11 import get_path from require 'build.util'
22 import tohtml from require 'mmm.component'
33 import Browser from require 'mmm.mmmfs.browser'
4 import header, footer from require 'build.layout'
45
56 export BROWSER
67
89 -- moon render.moon <path_to_root>
910 { path_to_root } = arg
1011
11 seed = (str) ->
12 len = #str
13 rnd = -> math.ceil math.random! * len
14
15 math.randomseed len
16
17 return if len == 0
18
19 upper, lower = 0, 0
20 for i=1,4
21 upper += str\byte rnd!
22 upper *= 0x100
23
24 lower += str\byte rnd!
25 lower *= 0x100
26
27 math.randomseed upper, lower
28
29 pick = (...) ->
30 num = select '#', ...
31 i = math.ceil math.random! * num
32 select i, ...
33
3412 assert path_to_root, "please specify the relative root path"
3513 path = get_path path_to_root
3614
37 seed path
15 do
16 seed = (str) ->
17 len = #str
18 rnd = -> math.ceil math.random! * len
19
20 math.randomseed len
21
22 return if len == 0
23
24 upper, lower = 0, 0
25 for i=1,4
26 upper += str\byte rnd!
27 upper *= 0x100
28
29 lower += str\byte rnd!
30 lower *= 0x100
31
32 math.randomseed upper, lower
33
34 seed path
3835
3936 root = dofile '$bundle.lua'
4037 assert root, "couldn't load $bundle.lua"
6057 <link href=\"https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400\" rel=\"stylesheet\">
6158 </head>
6259 <body>
63 <header>
64 <h1>
65 <i class=\"sun\">☉</i>
66 <b></b>
67 <span class=\"bold\">mmm</span>
68 .s-ol.nu
69 </h1>
70 <span>
71 fun stuff with code and wires
72 <!--
73 #{pick 'fun', 'cool', 'weird', 'interesting', 'new'}
74 #{pick 'stuff', 'things', 'projects', 'experiments', 'news'}
75 with
76 #{pick 'mostly code', 'code and wires', 'silicon', 'electronics'}
77 -->
78 </span>
79 </header>
60 #{header}
8061
8162 #{assert (tohtml BROWSER), "couldn't render BROWSER"}
63
64 #{footer}
8265
8366 <script src=\"/highlight.pack.js\"></script>
8467 <script src=\"//cdnjs.cloudflare.com/ajax/libs/marked/0.5.1/marked.min.js\"></script>
+4
-28
root/text$moonscript -> fn -> mmm$dom.moon less more
66
77 append = (stuff) -> table.insert content, stuff
88 append, -> article content
9
10 moon = '\xe2\x98\xbd'
11
12 iconlink = (href, src, alt, style) -> a {
13 class: 'iconlink',
14 :href,
15 target: '_blank',
16 img :src, :alt, :style
17 }
18
19 -- menu
20 append h1 {
21 style: { 'border-bottom': '1px solid #000' },
22 'mmm',
23 div {
24 class: 'icons',
25 iconlink 'https://github.com/s-ol/mmm', 'https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/github.svg',
26 iconlink 'https://twitter.com/S0lll0s', 'https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/twitter.svg',
27 iconlink 'https://webring.xxiivv.com/#random', 'https://webring.xxiivv.com/icon.black.svg', 'webring',
28 { height: '0.9em', 'margin-left': '.04em' }
29 }
30 }
319
3210 append p {
3311 tt 'mmm'
4321 }
4422
4523 for child in *@children
46 append (child\get 'preview: mmm/dom') or child\get 'mmm/dom'
47
48 append p {
49 "made with #{moon} by "
50 a { 's-ol', href: 'https://twitter.com/S0lll0s' }
51 }
24 append div {
25 class: 'well'
26 (child\get 'preview: mmm/dom') or child\get 'mmm/dom'
27 }
5228
5329 finish!
+75
-0
scss/_browser.scss less more
0 .browser {
1 display: flex;
2 flex: 1;
3
4 border-top: 0.2rem solid $gray-bright;
5
6 .view {
7 display: flex;
8 flex-direction: column;
9
10 flex: 1 1 0;
11 min-width: 0;
12
13 &.inspector {
14 top: 0;
15 position: sticky;
16 max-height: 100vh;
17 color: #c5c8c6;
18
19 @include left-border;
20 border-color: $gray-dark;
21 background: $gray-dark;
22
23 nav {
24 background: inherit;
25 }
26
27 .content {
28 margin: 0;
29 padding: 0;
30 display: flex;
31 background: $gray-darker;
32
33 > * {
34 display: block;
35 margin: 0;
36 padding: 1em;
37 border-radius: 0;
38 border: 0;
39 flex: 1;
40 }
41 }
42 }
43
44 nav {
45 position: sticky;
46 top: 0;
47
48 display: flex;
49 flex: 0 0 3.2em;
50 justify-content: space-between;
51 background: $gray-bright;
52
53 /*
54 > * {
55 flex: 0 0 auto;
56 }
57 */
58
59 > span:first-of-type {
60 flex: 1 0 auto;
61 }
62
63 > * {
64 margin: 1em;
65 }
66 }
67
68 .content {
69 flex: 1 1 auto;
70 overflow: auto;
71 padding: 1em 2em;
72 }
73 }
74 }
+36
-0
scss/_canvasapp.scss less more
0 .canvas_app {
1 position: relative;
2
3 display: inline-block;
4
5 .overlay {
6 position: absolute;
7 padding: 1rem;
8
9
10 top: 0;
11 left: 0;
12 right: 0;
13 bottom: 0;
14
15 opacity: 0;
16
17 background: rgba(0, 0, 0, 0.7);
18
19 transition: opacity 300ms;
20
21 &:hover {
22 opacity: 1;
23 }
24
25 > * {
26 margin: 0.5em;
27 }
28
29 a {
30 display: block;
31 color: $gray-bright;
32 font-family: inherit;
33 }
34 }
35 }
+19
-0
scss/_defs.scss less more
0 $white: #ffffff;
1 $gray-bright: #eeeeee;
2 $gray-dark: #303336;
3 $gray-darker: #1d1f21;
4 $gray-neutral: #b9bdc1;
5 $gray-success: #bdddc1;
6 $gray-fail: #ddbdc1;
7
8 @mixin left-border($w: 0.6rem) {
9 border-style: solid;
10 border-width: 0 0 0 $w;
11 border-radius: 0 6px 6px 0;
12 }
13
14 @mixin right-border($w: 0.6rem) {
15 border-style: solid;
16 border-width: 0 $w 0 0;
17 border-radius: 6px 0 0 6px;
18 }
+27
-0
scss/_footer.scss less more
0 footer {
1 display: flex;
2 padding: 1rem 2rem;
3
4 color: $gray-bright;
5 background: $gray-dark;
6
7 .icons {
8 flex: 1;
9 display: flex;
10 justify-content: flex-end;
11
12 .iconlink {
13 filter: invert(.7);
14
15 &:hover {
16 filter: invert(1);
17 }
18
19 > img {
20 height: 1em;
21 margin-left: 0.5em;
22 vertical-align: middle;
23 }
24 }
25 }
26 }
+33
-0
scss/_header.scss less more
0 header {
1 font-family: 'Source Sans Pro', sans-serif;
2 padding: 1rem 2rem;
3 text-align: right;
4
5 color: $gray-bright;
6 background: $gray-dark;
7
8 h1 {
9 display: flex;
10 justify-content: space-around;
11 align-items: baseline;
12 margin: 0;
13
14 font-size: 4rem;
15 font-weight: 200;
16
17 > b {
18 flex: 1;
19 }
20
21 .bold {
22 font-weight: 400;
23 }
24 }
25
26 .sun {
27 font-style: normal;
28 font-weight: 800;
29 font-size: 0.7em;
30 vertical-align: -0.04em;
31 }
32 }
+65
-0
scss/_reset.scss less more
0 * {
1 font-weight: inherit;
2 font-style: inherit;
3 font-family: inherit;
4 color: inherit;
5 -webkit-font-smoothing: antialiased;
6 -moz-osx-font-smoothing: grayscale;
7 }
8
9 input, select, button {
10 color: initial;
11 }
12
13 tt, code, kbd, samp {
14 font-family: 'monospace';
15 }
16
17 body, html, h1, h2, h3, h4, h5, h6 {
18 margin: 0;
19 padding: 0;
20 }
21
22 h1, h2, h3, h4, h5, h6 {
23 font-weight: bold;
24 }
25
26 ::selection {
27 background: $gray-dark;
28 color: $gray-bright;
29 padding: 1em;
30 }
31
32 b { font-weight: bold; }
33 i { font-style: italic; }
34 a { cursor: pointer; }
35 hr { clear: both; }
36
37 body {
38 display: flex;
39 flex-direction: column;
40 justify-content: space-between;
41
42 background: $white;
43 font-family: sans-serif;
44
45 min-height: 100vh;
46 }
47
48 a {
49 font-weight: bold;
50
51 text-decoration: underline;
52 text-decoration-color: transparent;
53
54 &:hover {
55 filter: invert(40%);
56 text-decoration-color: currentColor;
57 }
58
59 transition: filter 500ms, text-decoration-color 500ms;
60 }
61
62 code {
63 font-size: 0.8em;
64 }
+0
-72
scss/browser.scss less more
0 .browser {
1 display: flex;
2
3 .view {
4 display: flex;
5 flex-direction: column;
6
7 flex: 1 1 0;
8 min-width: 0;
9
10 &.inspector {
11 top: 0;
12 position: sticky;
13 height: 100vh;
14 color: #c5c8c6;
15
16 @include left-border;
17 border-color: $gray-dark;
18 background: $gray-dark;
19
20 nav {
21 background: inherit;
22 }
23
24 .content {
25 margin: 0;
26 padding: 0;
27 display: flex;
28 background: $gray-darker;
29
30 > * {
31 display: block;
32 margin: 0;
33 padding: 1em;
34 border-radius: 0;
35 border: 0;
36 flex: 1;
37 }
38 }
39 }
40
41 nav {
42 position: sticky;
43 top: 0;
44
45 display: flex;
46 flex: 0 0 3.2em;
47 justify-content: space-between;
48 background: $gray-bright;
49
50 /*
51 > * {
52 flex: 0 0 auto;
53 }
54 */
55
56 > span:first-of-type {
57 flex: 1 0 auto;
58 }
59
60 > * {
61 margin: 1em;
62 }
63 }
64
65 .content {
66 flex: 1 1 auto;
67 overflow: auto;
68 padding: 1em 2em;
69 }
70 }
71 }
+7
-119
scss/main.scss less more
0 @import 'defs';
1 @import 'reset';
02 @import 'hljs';
1
2 $gray-bright: #eeeeee;
3 $gray-dark: #303336;
4 $gray-darker: #1d1f21;
5 $gray-neutral: #b9bdc1;
6 $gray-success: #bdddc1;
7 $gray-fail: #ddbdc1;
8
9 @mixin left-border($w: 0.6rem) {
10 border-style: solid;
11 border-width: 0 0 0 $w;
12 border-radius: 0 6px 6px 0;
13 }
14
15 @mixin right-border($w: 0.6rem) {
16 border-style: solid;
17 border-width: 0 $w 0 0;
18 border-radius: 6px 0 0 6px;
19 }
20
3 @import 'header';
4 @import 'footer';
215 @import 'browser';
22
23 body {
24 font-family: sans-serif;
25 margin: 0;
26 padding: 0;
27 }
28
29 html {
30 margin: 0;
31 padding: 0;
32 }
33
34 a {
35 color: inherit;
36 }
37
38 header {
39 font-family: 'Source Sans Pro', sans-serif;
40 padding: 1rem 2rem;
41 text-align: right;
42
43 color: $gray-bright;
44 background: $gray-dark;
45
46 h1 {
47 display: flex;
48 justify-content: space-around;
49 align-items: baseline;
50 margin: 0;
51
52 font-size: 4rem;
53 font-weight: 200;
54
55 > b {
56 flex: 1;
57 }
58
59 .bold {
60 font-weight: 400;
61 }
62 }
63
64 i.sun {
65 font-style: normal;
66 font-weight: 800;
67 font-size: 0.7em;
68 vertical-align: -0.04em;
69 }
70 }
71
72 .canvas_app {
73 position: relative;
74
75 display: inline-block;
76
77 .overlay {
78 position: absolute;
79 padding: 1rem;
80
81
82 top: 0;
83 left: 0;
84 right: 0;
85 bottom: 0;
86
87 opacity: 0;
88
89 background: rgba(0, 0, 0, 0.7);
90
91 transition: opacity 300ms;
92
93 &:hover {
94 opacity: 1;
95 }
96
97 > * {
98 margin: 0.5em;
99 }
100
101 a {
102 display: block;
103 color: $gray-bright;
104 font-family: inherit;
105 }
106 }
107 }
108
109 h1 .icons {
110 display: inline-flex;
111 float: right;
112
113 .iconlink > img {
114 height: 0.7em;
115 margin-left: 0.2em;
116 vertical-align: middle;
117 }
118 }
6 @import 'canvasapp';
1197
1208 pre > code.hljs {
1219 @include left-border;
13927 }
14028 }
14129
142 .example {
30 .example, .well {
14331 @include left-border;
14432
145 margin: 0 2rem;
33 margin: 1rem 2rem;
14634 padding: 1rem;
14735 background: $gray-bright;
14836 border-color: $gray-neutral;