git ssb

1+

punkmonk.termux / mvd



forked from ev / mvd

Commit 3684a134e04665d9b2a1f3088d936ac5af922e38

Browse Files

add navbar and navbar styles

Ev Bogue committed on 5/23/2018, 1:43:53 AM
Parent: e05454ed7ada31342abbdd6f4b904720bf675270

Files changed

index.jschanged
package-lock.jsonchanged
package.jsonchanged
style.csschanged
style.css.jsonchanged
index.jsView
@@ -1,22 +1,29 @@
11 var h = require('hyperscript')
22 var route = require('./views')
3+var avatar = require('./avatar')
34
5+var id = require('./keys').id
6+
47 document.head.appendChild(h('style', require('./style.css.json')))
58
6-var content = h('div.content')
9+var screen = h('div#screen', {style: {position: 'absolute', top: '35px', bottom: '0px', left: '0px', right: '0px'}})
710
8-var screen = h('div#screen', {style: {position: 'absolute', top: '0px', bottom: '0px', left: '0px', right: '0px'}})
11+var nav = h('div.navbar',
12+ h('div.internal',
13+ h('li', h('a', {href: '#' + id}, h('span.avatar--small', avatar.image(id)))),
14+ h('li', h('a', {href: '#' + id}, avatar.name(id))),
15+ h('li', h('a', {href: '#'}, 'Public'))
16+ )
17+)
918
19+document.body.appendChild(nav)
1020 document.body.appendChild(screen)
1121 route()
1222
1323 window.onhashchange = function () {
14- var screen = document.getElementById('screen')
15-
16- var newscreen = h('div#screen', {style: {position: 'absolute', top: '0px', bottom: '0px', left: '0px', right: '0px'}})
17-
18- console.log(screen)
19- screen.parentNode.replaceChild(newscreen, screen)
24+ var oldscreen = document.getElementById('screen')
25+ var newscreen = h('div#screen', {style: {position: 'absolute', top: '35px', bottom: '0px', left: '0px', right: '0px'}})
26+ oldscreen.parentNode.replaceChild(newscreen, oldscreen)
2027 route()
2128 }
2229
package-lock.jsonView
The diff is too large to show. Use a local git client to view these changes.
Old file size: 213729 bytes
New file size: 204637 bytes
package.jsonView
@@ -16,9 +16,9 @@
1616 },
1717 "author": "Ev Bogue <ev@evbogue.com>",
1818 "license": "MIT",
1919 "dependencies": {
20- "decent-ssb": "^4.4.1",
20+ "decent-ws": "^1.0.0",
2121 "deep-extend": "^0.5.1",
2222 "human-time": "0.0.1",
2323 "hyperloadmore": "^1.1.0",
2424 "hyperscript": "^2.0.2",
style.cssView
@@ -1,7 +1,7 @@
11 body {
22 margin: 0;
3- background: black;
3+ background: #111;
44 font-family: sans-serif;
55 color: #d5d5d5;
66 font-size: 14px;
77 line-height: 20px;
@@ -19,26 +19,83 @@
1919 a:hover {
2020 color: #ddd;
2121 }
2222
23+.navbar a {
24+ color: #999;
25+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
26+ text-decoration: none;
27+}
28+
29+.navbar a:hover, .navbar a:focus {
30+ color: #fff;
31+ text-decoration: none;
32+}
33+
34+.navbar {
35+ background: #1b1b1b;
36+ background: linear-gradient(#222, #111);
37+ border-bottom: 1px solid #252525;
38+}
39+
40+.navbar {
41+ width: 100%;
42+ position: fixed;
43+ z-index: 1000;
44+ margin: 0;
45+ padding-top: .3em;
46+ padding-bottom: .3em;
47+ left: 0; right: 0;
48+ top: 0;
49+}
50+
51+.navbar .internal {
52+ max-width: 645px;
53+ margin-left: auto;
54+ margin-right: auto;
55+}
56+
57+.navbar li {
58+ margin-top: .3em;
59+ float: left;
60+ padding-right: .6em;
61+ padding-left: .3em;
62+ list-style-type: none;
63+}
64+
65+
2366 .hyperscroll > .content {
2467 max-width: 680px;
2568 margin-left: auto;
2669 margin-right: auto;
2770 }
2871
72+.message, .message > *, .navbar, .navbar > * {
73+ animation: fadein .5s;
74+}
75+
76+@keyframes fadein {
77+ from { opacity: 0; }
78+ to { opacity: 1; }
79+}
80+
2981 .message, .embedded {
3082 display: block;
3183 margin: .6em;
3284 background: #111;
33- padding: .5em;
85+ padding: .7em;
86+ border-radius: 3px;
87+ border: 1px solid #252525;
3488 }
3589
3690 .embedded {
37- border-left: 1px solid #666;
3891 padding-left: 1em;
3992 }
4093
94+.message:hover, .embedded:hover {
95+ background: #222;
96+}
97+
4198 .message img {
4299 max-width: 100%;
43100 }
44101
style.css.jsonView
@@ -1,1 +1,1 @@
1-"body {\n margin: 0;\n background: black;\n font-family: sans-serif;\n color: #d5d5d5;\n font-size: 14px; \n line-height: 20px;\n}\n\n.hyperscroll {\n width: 100%;\n}\n\na {\n color: white;\n *text-decoration: none;\n}\n\na:hover {\n color: #ddd;\n}\n\n.hyperscroll > .content {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.message, .embedded {\n display: block;\n margin: .6em;\n background: #111;\n padding: .5em;\n}\n\n.embedded {\n border-left: 1px solid #666;\n padding-left: 1em;\n}\n\n.message img {\n max-width: 100%;\n}\n\n.timestamp, .votes {\n float: right;\n}\n \n.edited {\n float: right;\n top: 0; \n}\n\n.avatar--small img {\n vertical-align: top;\n width: 1.4em;\n height: 1.4em;\n margin-right: .2em;\n}\n\n.compose {\n background: #222;\n color: #ccc;\n width: 100%;\n height: 100px;\n border: none;\n}\n\n.emoji {\n float: left;\n width: 1em;\n vertical-align: top;\n}\n\npre {\n width: 100%;\n display: block;\n}\n\ncode {\n display: inline-block;\n vertical-align: bottom;\n}\n\ncode, pre {\noverflow: auto;\nword-break: break-all;\nword-wrap: break-word;\nwhite-space: pre;\nwhite-space: -moz-pre-wrap;\nwhite-space: pre-wrap;\nwhite-space: pre\\9;\n}\n\n\n.btn {\n display: inline-block;\n *display: inline;\n padding: 2px 6px;\n margin-bottom: 0;\n margin-right: .2em;\n font-size: 14px;\n line-height: 20px;\n color: #333333;\n text-align: center;\n text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);\n vertical-align: middle;\n cursor: pointer;\n background-color: #f5f5f5;\n *background-color: #e6e6e6;\n background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);\n background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));\n background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);\n background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);\n background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);\n background-repeat: repeat-x;\n border: 1px solid #cccccc;\n *border: 0;\n border-color: #e6e6e6 #e6e6e6 #bfbfbf;\n border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);\n border-bottom-color: #b3b3b3;\n -webkit-border-radius: 4px;\n -moz-border-radius: 4px;\n border-radius: 4px;\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);\n filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);\n *zoom: 1;\n -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);\n -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);\n}\n\n\n.btn:hover,\n.btn:focus,\n.btn:active,\n.btn.active,\n.btn.disabled,\n.btn[disabled] {\n color: #333333;\n *background-color: #e6e6e6;\n background-color: #d9d9d9;\n}\n\n.btn:active,\n.btn.active {\n background-color: #cccccc \\9;\n}\n\n.btn:first-child {\n *margin-left: 0;\n}\n\n.btn:hover,\n.btn:focus {\n color: #333333;\n text-decoration: none;\n background-position: 0 -15px;\n -webkit-transition: background-position 0.1s linear;\n -moz-transition: background-position 0.1s linear;\n -o-transition: background-position 0.1s linear;\n transition: background-position 0.1s linear;\n}\n\n.btn:focus {\n outline: thin dotted #333;\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: -2px;\n}\n\n.btn.active,\n.btn:active {\n background-image: none;\n outline: 0;\n -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);\n -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);\n box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);\n}\n\n"
1+"body {\n margin: 0;\n background: #111;\n font-family: sans-serif;\n color: #d5d5d5;\n font-size: 14px; \n line-height: 20px;\n}\n\n.hyperscroll {\n width: 100%;\n}\n\na {\n color: white;\n *text-decoration: none;\n}\n\na:hover {\n color: #ddd;\n}\n\n.navbar a {\n color: #999;\n text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);\n text-decoration: none;\n}\n\n.navbar a:hover, .navbar a:focus {\n color: #fff;\n text-decoration: none;\n}\n\n.navbar {\n background: #1b1b1b;\n background: linear-gradient(#222, #111);\n border-bottom: 1px solid #252525;\n}\n\n.navbar {\n width: 100%;\n position: fixed;\n z-index: 1000;\n margin: 0;\n padding-top: .3em;\n padding-bottom: .3em;\n left: 0; right: 0;\n top: 0;\n}\n\n.navbar .internal {\n max-width: 645px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.navbar li {\n margin-top: .3em;\n float: left;\n padding-right: .6em;\n padding-left: .3em;\n list-style-type: none;\n}\n\n\n.hyperscroll > .content {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.message, .message > *, .navbar, .navbar > * {\n animation: fadein .5s;\n}\n\n@keyframes fadein {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.message, .embedded {\n display: block;\n margin: .6em;\n background: #111;\n padding: .7em;\n border-radius: 3px;\n border: 1px solid #252525;\n}\n\n.embedded {\n padding-left: 1em;\n}\n\n.message:hover, .embedded:hover {\n background: #222;\n}\n\n.message img {\n max-width: 100%;\n}\n\n.timestamp, .votes {\n float: right;\n}\n \n.avatar--small img {\n vertical-align: top;\n width: 1.4em;\n height: 1.4em;\n margin-right: .2em;\n}\n\n.compose {\n background: #222;\n color: #ccc;\n width: 100%;\n height: 100px;\n border: none;\n}\n\n.emoji {\n float: left;\n width: 1em;\n vertical-align: top;\n}\n\npre {\n width: 100%;\n display: block;\n}\n\ncode {\n display: inline-block;\n vertical-align: bottom;\n}\n\ncode, pre {\noverflow: auto;\nword-break: break-all;\nword-wrap: break-word;\nwhite-space: pre;\nwhite-space: -moz-pre-wrap;\nwhite-space: pre-wrap;\nwhite-space: pre\\9;\n}\n\n\n.btn {\n display: inline-block;\n *display: inline;\n padding: 2px 6px;\n margin-bottom: 0;\n margin-right: .2em;\n font-size: 14px;\n line-height: 20px;\n color: #333333;\n text-align: center;\n text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);\n vertical-align: middle;\n cursor: pointer;\n background-color: #f5f5f5;\n *background-color: #e6e6e6;\n background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);\n background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));\n background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);\n background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);\n background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);\n background-repeat: repeat-x;\n border: 1px solid #cccccc;\n *border: 0;\n border-color: #e6e6e6 #e6e6e6 #bfbfbf;\n border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);\n border-bottom-color: #b3b3b3;\n -webkit-border-radius: 4px;\n -moz-border-radius: 4px;\n border-radius: 4px;\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);\n filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);\n *zoom: 1;\n -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);\n -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);\n}\n\n\n.btn:hover,\n.btn:focus,\n.btn:active,\n.btn.active,\n.btn.disabled,\n.btn[disabled] {\n color: #333333;\n *background-color: #e6e6e6;\n background-color: #d9d9d9;\n}\n\n.btn:active,\n.btn.active {\n background-color: #cccccc \\9;\n}\n\n.btn:first-child {\n *margin-left: 0;\n}\n\n.btn:hover,\n.btn:focus {\n color: #333333;\n text-decoration: none;\n background-position: 0 -15px;\n -webkit-transition: background-position 0.1s linear;\n -moz-transition: background-position 0.1s linear;\n -o-transition: background-position 0.1s linear;\n transition: background-position 0.1s linear;\n}\n\n.btn:focus {\n outline: thin dotted #333;\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: -2px;\n}\n\n.btn.active,\n.btn:active {\n background-image: none;\n outline: 0;\n -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);\n -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);\n box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);\n}\n\n"

Built with git-ssb-web