git ssb

3+

ev / decent



Commit 44c55621a7eaeae2d584e97f32151bd6cc2b8225

Browse Files

actually fix responsive images

Ev Bogue committed on 3/6/2017, 11:11:57 PM
Parent: 877c186a4ba68c698293369cb681f880ba4d104f

Files changed

build/index.htmlchanged
client/style.csschanged
client/style.css.jsonchanged
build/index.htmlView
The diff is too large to show. Use a local git client to view these changes.
Old file size: 737353 bytes
New file size: 737351 bytes
client/style.cssView
@@ -127,9 +127,9 @@
127127 …
128128 … /* compose */
129129 …
130130 … .compose {
131- width: 100%;
131 …+ width: 98%;
132132 … margin-top: 1em;
133133 … }
134134 …
135135 … /* messages */
@@ -141,9 +141,9 @@
141141 … border: 1px solid #ddd;
142142 … margin-top: -1px;
143143 … border-radius: 2px;
144144 … background: #fff;
145- width: 100%;
145 …+ width: 95%;
146146 … }
147147 …
148148 … .message:focus, .message:hover {
149149 … background: #f5f5f5;
client/style.css.jsonView
@@ -1,1 +1,1 @@
1-"/*@font-face {\n font-family: \"Source Sans Pro\";\n font-weight: 400;\n font-style: normal;\n src: url(\"http://evbogue.com/ssp/fonts/source-sans-pro-regular.ttf\") format(\"truetype\"); \n}*/\n\nbody {\n font-family: 'Source Sans Pro', sans-serif;\n}\n\n* {\n word-wrap: break-word;\n \n}\n\nh1, h2, h3, h4, h5, h6 {\n font-size: 1.2em;\n margin-top: .35ex;\n}\n\nhr {\n border: solid #eee;\n clear: both;\n border-width: 1px 0 0;\n height: 0;\n margin-bottom: .9em;\n}\n\np {\n margin-top: .35ex;\n}\n\na:link, a:visited, a:active {\n color: #08c;\n text-decoration: none;\n}\n\na:hover,\na:focus {\n color: #005580;\n text-decoration: underline;\n}\n\n.screen {\n width: 100%;\n position: absolute;\n top: 0; bottom: 0;\n left: 0;right: 0;\n overflow-y: hidden;\n background: #f9f9f9;\n}\n\n.column {\n display: flex;\n flex-direction: column;\n min-height:0px;\n}\n\n.row {\n display: flex;\n flex-direction: row;\n min-height:0px;\n}\n\n.end {\n justify-content: flex-end;\n}\n\n.wrap {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n.no-shrink {\n flex-shrink: 0;\n}\n\n.expand {\n justify-content: space-between;\n}\n\n.scroll-y {\n overflow-y: auto;\n min-height: 0px;\n}\n\n.scroll-x {\n overflow-x: auto;\n min-width: 0px;\n}\n\npre {\n white-space: pre-line;\n word-wrap: break-all;\n background: #eee;\n border: 1px solid #ddd;\n border-radius: 2px;\n}\n\ncode {\n background: #eee;\n}\n\n.wide {\n width: 100%;\n}\n\n.menu {\n display: none;\n z-index: 5;\n}\n\n/* scrolling feeds, threads */\n\n.scroller {\n width: 100%;\n}\n\n.scroller__wrapper {\n flex: 1;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n}\n\n/* compose */\n\n.compose {\n width: 100%;\n margin-top: 1em;\n}\n\n/* messages */\n\n.message {\n position: relative;\n flex-basis: 0;\n padding: .5em;\n border: 1px solid #ddd;\n margin-top: -1px;\n border-radius: 2px;\n background: #fff;\n width: 100%;\n}\n\n.message:focus, .message:hover {\n background: #f5f5f5;\n}\n\n.message_content--mini div > span {\n display: inline-block;\n}\n\n.message_meta {\n margin-left: auto;\n}\n\n.message_meta > * {\n margin-left: .5ex;\n}\n\n.message_actions {\n float: right;\n}\n\n.message img {\n max-width: 100%;\n}\n\n.message > .title > .avatar {\n margin-left: 0;\n}\n\n.message:first-child {\n margin-top: 1em;\n}\n\n.message_content {\n padding: .5ex;\n}\n\n.actions > :not(:last-child) {\n border-right: 2px solid #eee;\n padding-right: 5px;\n}\n\n.emoji {\n height: 1em;\n width: 1em;\n vertical-align: top;\n}\n\n\n/* -- suggest box */\n\n.suggest-box > * {\n display: block;\n font-weight: normal;\n}\n\n\n.suggest-box ul {\n padding: 0;\n list-style-type: none;\n padding-left: 0;\n margin: 0;\n}\n\n.suggest-box .selected {\n background: #ddd;\n}\n\n.suggest-box {\n width: max-content;\n background: white;\n border: 1px solid #eee;\n border-radius: 2px;\n}\n\n/* emoji */\n.suggest-box img {\n height: 20px;\n width: 20px;\n}\n\n/* avatar */\n\n.avatar--profile {\n width: 7em;\n height: 7em;\n float: left;\n border-radius: 5px;\n margin-right: .5em;\n}\n\n.avatar--full {\n margin: .5em;\n width: 100%;\n border-radius: 5px;\n}\n\n.avatar--large {\n width: 10em;\n height: 10em;\n border-radius: 5px;\n}\n\n.avatar--thumbnail {\n width: 2.5em;\n height: 2.5em;\n float: left;\n margin-right: .5ex;\n border-radius: 5px;\n}\n\n.avatar--fullsize {\n width: 50%;\n border-radius: 5px;\n}\n\n.profile {\n padding: .5ex;\n overflow: auto;\n}\n\n.profile input {\n width: 100%;\n}\n\n.profile__info {\n margin-left: .5em;\n}\n\ninput, textarea {\n border: 1px solid #ddd;\n border-radius: 2px;\n font-family: sans-serif;\n font-size: .9em;\n padding: .5em;\n}\n\ntextarea {\n padding: .5em;\n}\n\n.import {\n width: 97%\n}\n\n\n/* lightbox - used in message-confirm */\n\n.lightbox {\n overflow: auto;\n margin-top: 3em;\n margin-bottom: 3em;\n width: 512px;\n // background: white;\n z-index: 5;\n}\n\n/* searchprompt */\n\n.searchprompt {\n margin-top: 1px;\n margin-bottom: 1px;\n float: left;\n padding: .5em;\n width: 100%;\n}\n\n.header__search {\n position: absolute;\n bottom: .5em;\n left: .5em;\n}\n\n.logo {\n font-size: .8em;\n padding: .2em;\n}\n\n/* TextNodeSearcher highlights */\n\n.highlight {\n background: yellow;\n}\n\n/* avatar editor */\n\n.hypercrop__canvas {\n width: 100%;\n}\n\n/* gitssb */\n\n.git-table-wrapper {\n max-height: 12em;\n overflow: auto;\n word-break: break-all;\n margin: 1em 0;\n}\n\n.git-table-wrapper table {\n width: 100%;\n}\n\n/* --- network status --- */\n\n.status {\n width: 1em;\n height: 1em;\n margin: .5em;\n background: #08c;\n}\n\n.error {\n background: red;\n}\n\n/* tabs */\n\n.header {\n border-bottom: 1px inset #ddd;\n width: 100%;\n // flex-shrink: 0;\n z-index: 1;\n}\n\n.left {\n position: fixed;\n left: 0;\n width: 17%;\n max-width: 200px;\n height: 100%;\n}\n\n.hypertabs__content {\n margin-left: auto;\n width: 79%;\n}\n\n/*.header__tabs {\n width: 100%; \n min-width: 0px;\n}*/\n\n/* --- hypertabs ------- */\n\n.hypertabs__tabs {\n min-width: 0px;\n width: 95%;\n border-radius 2px;\n}\n\n.hypertabs__tab {\n overflow-x: hidden;\n min-width: 0px;\n border: 1px solid #ddd;\n border-radius: 2px;\n margin-top: -1px;\n background: linear-gradient(#fff, #eee);\n}\n\n.hypertabs__tab:hover {\n background: linear-gradient(#eee, #ddd);\n color: #fff;\n}\n\n.hypertabs__button {\n overflow-x: hidden;\n min-width: 0px;\n width: 100%;\n}\n\n.hypertabs__tab {\n color: black;\n // margin-left: -3px;\n padding-top: .5em;\n padding-left: 1em;\n // border-left: 1px solid #ccc;\n width: 100%; \n height: 1.5em;\n}\n\n.hypertabs__tab > a {\n color: #666;\n text-decoration: none;\n white-space: nowrap;\n font-size: .9em;\n}\n\n.hypertabs--selected {\n background: linear-gradient(#eee, #ddd);\n font-weight: bold;\n z-index: 3;\n}\n\n.hypertabs__x {\n display: none; \n transform: translate(-4px, -2px);\n}\n\n.hypertabs--selected .hypertabs__x {\n display: block;\n}\n\n/* progress bar */\n\n.hyperprogress__bar {\n background: darkgrey;\n}\n.hyperprogress__liquid {\n background: lightblue;\n}\n\nbutton {\n font-size: .9em;\n background: #eee;\n background: #eee linear-gradient(#eee, #ccc);\n border: 1px solid #aaa;\n border-top: 1px solid #ccc;\n border-left: 1px solid #ccc;\n border-radius: 5px;\n color: #444;\n display: inline-block;\n text-decoration: none;\n font-weight: bold;\n cursor: pointer;\n margin: .1em;\n padding-top: .4em;\n padding-left: .6em;\n padding-right: .6em;\n padding-bottom: .4em; \n}\n\nbutton:hover, button:focus {\n background: #ddd;\n background: #ddd linear-gradient(#ddd, #aaa);\n border: 1px solid #888;\n border-top: 1px solid #aaa;\n border-left: 1px solid #aaa;\n color: #222;\n}\n\n.edit {\n margin-left: .6em;\n font-size: .8em;\n}\n"
1 …+"/*@font-face {\n font-family: \"Source Sans Pro\";\n font-weight: 400;\n font-style: normal;\n src: url(\"http://evbogue.com/ssp/fonts/source-sans-pro-regular.ttf\") format(\"truetype\"); \n}*/\n\nbody {\n font-family: 'Source Sans Pro', sans-serif;\n}\n\n* {\n word-wrap: break-word;\n \n}\n\nh1, h2, h3, h4, h5, h6 {\n font-size: 1.2em;\n margin-top: .35ex;\n}\n\nhr {\n border: solid #eee;\n clear: both;\n border-width: 1px 0 0;\n height: 0;\n margin-bottom: .9em;\n}\n\np {\n margin-top: .35ex;\n}\n\na:link, a:visited, a:active {\n color: #08c;\n text-decoration: none;\n}\n\na:hover,\na:focus {\n color: #005580;\n text-decoration: underline;\n}\n\n.screen {\n width: 100%;\n position: absolute;\n top: 0; bottom: 0;\n left: 0;right: 0;\n overflow-y: hidden;\n background: #f9f9f9;\n}\n\n.column {\n display: flex;\n flex-direction: column;\n min-height:0px;\n}\n\n.row {\n display: flex;\n flex-direction: row;\n min-height:0px;\n}\n\n.end {\n justify-content: flex-end;\n}\n\n.wrap {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n.no-shrink {\n flex-shrink: 0;\n}\n\n.expand {\n justify-content: space-between;\n}\n\n.scroll-y {\n overflow-y: auto;\n min-height: 0px;\n}\n\n.scroll-x {\n overflow-x: auto;\n min-width: 0px;\n}\n\npre {\n white-space: pre-line;\n word-wrap: break-all;\n background: #eee;\n border: 1px solid #ddd;\n border-radius: 2px;\n}\n\ncode {\n background: #eee;\n}\n\n.wide {\n width: 100%;\n}\n\n.menu {\n display: none;\n z-index: 5;\n}\n\n/* scrolling feeds, threads */\n\n.scroller {\n width: 100%;\n}\n\n.scroller__wrapper {\n flex: 1;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n}\n\n/* compose */\n\n.compose {\n width: 98%;\n margin-top: 1em;\n}\n\n/* messages */\n\n.message {\n position: relative;\n flex-basis: 0;\n padding: .5em;\n border: 1px solid #ddd;\n margin-top: -1px;\n border-radius: 2px;\n background: #fff;\n width: 95%;\n}\n\n.message:focus, .message:hover {\n background: #f5f5f5;\n}\n\n.message_content--mini div > span {\n display: inline-block;\n}\n\n.message_meta {\n margin-left: auto;\n}\n\n.message_meta > * {\n margin-left: .5ex;\n}\n\n.message_actions {\n float: right;\n}\n\n.message img {\n max-width: 100%;\n}\n\n.message > .title > .avatar {\n margin-left: 0;\n}\n\n.message:first-child {\n margin-top: 1em;\n}\n\n.message_content {\n padding: .5ex;\n}\n\n.actions > :not(:last-child) {\n border-right: 2px solid #eee;\n padding-right: 5px;\n}\n\n.emoji {\n height: 1em;\n width: 1em;\n vertical-align: top;\n}\n\n\n/* -- suggest box */\n\n.suggest-box > * {\n display: block;\n font-weight: normal;\n}\n\n\n.suggest-box ul {\n padding: 0;\n list-style-type: none;\n padding-left: 0;\n margin: 0;\n}\n\n.suggest-box .selected {\n background: #ddd;\n}\n\n.suggest-box {\n width: max-content;\n background: white;\n border: 1px solid #eee;\n border-radius: 2px;\n}\n\n/* emoji */\n.suggest-box img {\n height: 20px;\n width: 20px;\n}\n\n/* avatar */\n\n.avatar--profile {\n width: 7em;\n height: 7em;\n float: left;\n border-radius: 5px;\n margin-right: .5em;\n}\n\n.avatar--full {\n margin: .5em;\n width: 100%;\n border-radius: 5px;\n}\n\n.avatar--large {\n width: 10em;\n height: 10em;\n border-radius: 5px;\n}\n\n.avatar--thumbnail {\n width: 2.5em;\n height: 2.5em;\n float: left;\n margin-right: .5ex;\n border-radius: 5px;\n}\n\n.avatar--fullsize {\n width: 50%;\n border-radius: 5px;\n}\n\n.profile {\n padding: .5ex;\n overflow: auto;\n}\n\n.profile input {\n width: 100%;\n}\n\n.profile__info {\n margin-left: .5em;\n}\n\ninput, textarea {\n border: 1px solid #ddd;\n border-radius: 2px;\n font-family: sans-serif;\n font-size: .9em;\n padding: .5em;\n}\n\ntextarea {\n padding: .5em;\n}\n\n.import {\n width: 97%\n}\n\n\n/* lightbox - used in message-confirm */\n\n.lightbox {\n overflow: auto;\n margin-top: 3em;\n margin-bottom: 3em;\n width: 512px;\n // background: white;\n z-index: 5;\n}\n\n/* searchprompt */\n\n.searchprompt {\n margin-top: 1px;\n margin-bottom: 1px;\n float: left;\n padding: .5em;\n width: 100%;\n}\n\n.header__search {\n position: absolute;\n bottom: .5em;\n left: .5em;\n}\n\n.logo {\n font-size: .8em;\n padding: .2em;\n}\n\n/* TextNodeSearcher highlights */\n\n.highlight {\n background: yellow;\n}\n\n/* avatar editor */\n\n.hypercrop__canvas {\n width: 100%;\n}\n\n/* gitssb */\n\n.git-table-wrapper {\n max-height: 12em;\n overflow: auto;\n word-break: break-all;\n margin: 1em 0;\n}\n\n.git-table-wrapper table {\n width: 100%;\n}\n\n/* --- network status --- */\n\n.status {\n width: 1em;\n height: 1em;\n margin: .5em;\n background: #08c;\n}\n\n.error {\n background: red;\n}\n\n/* tabs */\n\n.header {\n border-bottom: 1px inset #ddd;\n width: 100%;\n // flex-shrink: 0;\n z-index: 1;\n}\n\n.left {\n position: fixed;\n left: 0;\n width: 17%;\n max-width: 200px;\n height: 100%;\n}\n\n.hypertabs__content {\n margin-left: auto;\n width: 79%;\n}\n\n/*.header__tabs {\n width: 100%; \n min-width: 0px;\n}*/\n\n/* --- hypertabs ------- */\n\n.hypertabs__tabs {\n min-width: 0px;\n width: 95%;\n border-radius 2px;\n}\n\n.hypertabs__tab {\n overflow-x: hidden;\n min-width: 0px;\n border: 1px solid #ddd;\n border-radius: 2px;\n margin-top: -1px;\n background: linear-gradient(#fff, #eee);\n}\n\n.hypertabs__tab:hover {\n background: linear-gradient(#eee, #ddd);\n color: #fff;\n}\n\n.hypertabs__button {\n overflow-x: hidden;\n min-width: 0px;\n width: 100%;\n}\n\n.hypertabs__tab {\n color: black;\n // margin-left: -3px;\n padding-top: .5em;\n padding-left: 1em;\n // border-left: 1px solid #ccc;\n width: 100%; \n height: 1.5em;\n}\n\n.hypertabs__tab > a {\n color: #666;\n text-decoration: none;\n white-space: nowrap;\n font-size: .9em;\n}\n\n.hypertabs--selected {\n background: linear-gradient(#eee, #ddd);\n font-weight: bold;\n z-index: 3;\n}\n\n.hypertabs__x {\n display: none; \n transform: translate(-4px, -2px);\n}\n\n.hypertabs--selected .hypertabs__x {\n display: block;\n}\n\n/* progress bar */\n\n.hyperprogress__bar {\n background: darkgrey;\n}\n.hyperprogress__liquid {\n background: lightblue;\n}\n\nbutton {\n font-size: .9em;\n background: #eee;\n background: #eee linear-gradient(#eee, #ccc);\n border: 1px solid #aaa;\n border-top: 1px solid #ccc;\n border-left: 1px solid #ccc;\n border-radius: 5px;\n color: #444;\n display: inline-block;\n text-decoration: none;\n font-weight: bold;\n cursor: pointer;\n margin: .1em;\n padding-top: .4em;\n padding-left: .6em;\n padding-right: .6em;\n padding-bottom: .4em; \n}\n\nbutton:hover, button:focus {\n background: #ddd;\n background: #ddd linear-gradient(#ddd, #aaa);\n border: 1px solid #888;\n border-top: 1px solid #aaa;\n border-left: 1px solid #aaa;\n color: #222;\n}\n\n.edit {\n margin-left: .6em;\n font-size: .8em;\n}\n"

Built with git-ssb-web