diff options
Diffstat (limited to 'bskyweb/templates/base.html')
| -rw-r--r-- | bskyweb/templates/base.html | 120 |
1 files changed, 109 insertions, 11 deletions
diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html index 024e48d6d..05c9becce 100644 --- a/bskyweb/templates/base.html +++ b/bskyweb/templates/base.html @@ -2,21 +2,120 @@ <html lang="en"> <head> <meta charset="UTF-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta httpEquiv="X-UA-Compatible" content="IE=edge" /> + <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover"> <meta name="referrer" content="origin-when-cross-origin"> <title>{%- block head_title -%}Bluesky{%- endblock -%}</title> + <!-- Hello Humans! API docs at https://atproto.com --> + <style> - /* These styles make the body full-height */ - html, body { height: 100%; } - /* These styles disable body scrolling if you are using <ScrollView> */ - body { overflow: hidden; } - /* These styles make the root element full-height */ - #app-root { display:flex; height:100%; } + /** + * Extend the react-native-web reset: + * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js + */ + html, + body, + #root { + width: 100%; + /* To smooth any scrolling behavior */ + -webkit-overflow-scrolling: touch; + margin: 0px; + padding: 0px; + /* Allows content to fill the viewport and go beyond the bottom */ + min-height: 100%; + } + #root { + flex-shrink: 0; + flex-basis: auto; + flex-grow: 1; + display: flex; + flex: 1; + } + + html { + scroll-behavior: smooth; + /* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */ + -webkit-text-size-adjust: 100%; + height: calc(100% + env(safe-area-inset-top)); + } + + body { + display: flex; + /* Allows you to scroll below the viewport; default value is visible */ + overflow-y: auto; + overscroll-behavior-y: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -ms-overflow-style: scrollbar; + } + /* Enable for apps that support dark-theme */ + /*@media (prefers-color-scheme: dark) { + body { + background-color: black; + } + }*/ + /* Remove focus state on inputs */ - *:focus { outline: 0; } + *:focus { + outline: 0; + } + /* Remove default link styling */ + a { + color: inherit; + } + a[role="link"]:hover { + text-decoration: underline; + } + + /* ProseMirror */ + .ProseMirror { + font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + min-height: 140px; + } + .ProseMirror p { + margin: 0; + } + .ProseMirror p.is-editor-empty:first-child::before { + color: #8d8e96; + content: attr(data-placeholder); + float: left; + height: 0; + pointer-events: none; + } + .ProseMirror .mention { + color: #0085ff; + } + .ProseMirror a { + color: #0085ff; + cursor: pointer; + } + .tippy-content .items { + border-radius: 6px; + background: #F3F3F8; + border: 1px solid #e0d9d9; + padding: 3px 3px; + } + .tippy-content .items .item { + display: block; + background: transparent; + color: #8a8c9a; + border: 0; + font: 17px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + padding: 7px 10px 8px; + width: 100%; + text-align: left; + box-sizing: border-box; + letter-spacing: 0.2px; + } + .tippy-content .items .item.is-selected { + background: #fff; + border-radius: 4px; + color: #333; + } </style> - {% block head_bundle -%}<script defer src="/static/bundle.web.js"></script>{%- endblock %} + {% include "scripts.html" %} <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png"/> <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png"/> <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png"/> @@ -38,14 +137,13 @@ </head> <body> {%- block body_all %} - <div id="app-root"> + <div id="root"></div> <noscript> {%- block noscript_extra %}{% endblock -%} <h1>Javascript Required</h1> <p>This is a heavily interactive web application, and Javascript is required. Simple HTML interfaces are possible, but that is not what this is. <p>Learn more about Bluesky at <a href="https://blueskyweb.xyz">blueskyweb.xyz</a> and <a href="https://atproto.com">atproto.com</a>. </noscript> - </div> {% endblock -%} </body> </html> |