git ssb

2+

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