2024-02-06 20:43:51 +01:00
<!DOCTYPE html>
2024-02-08 21:04:36 +01:00
< html >
2024-02-06 20:43:51 +01:00
< head >
2023-06-06 16:32:30 +02:00
< meta charset = "UTF-8" >
2023-05-16 00:44:10 +02:00
< meta name = "viewport" content = "width=device-width, initial-scale=1, minimum-scale=1, viewport-fit=cover" >
2023-03-14 21:00:44 +01:00
< meta name = "referrer" content = "origin-when-cross-origin" >
2024-02-14 00:13:23 +01:00
<!--
Preconnect to essential domains
-->
< link rel = "preconnect" href = "https://bsky.social" >
< link rel = "preconnect" href = "https://bsky.network" >
2023-03-14 21:00:44 +01:00
< title > {%- block head_title -%}Bluesky{%- endblock -%}< / title >
2023-03-14 23:30:15 +01:00
2023-03-14 21:00:44 +01:00
<!-- Hello Humans! API docs at https://atproto.com -->
2024-02-06 20:43:51 +01:00
2023-03-14 21:00:44 +01:00
< style >
2023-03-14 23:30:15 +01:00
/**
* 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 {
/* 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));
2024-01-22 23:46:32 +01:00
scrollbar-gutter: stable both-edges;
2023-03-14 23:30:15 +01:00
}
2023-08-22 20:04:17 +02:00
/* Color theming */
2024-02-06 20:43:51 +01:00
/* Default will always be white */
2023-08-22 20:04:17 +02:00
:root {
2024-02-06 20:43:51 +01:00
--text: black;
--background: white;
--backgroundLight: hsl(211, 20%, 95%);
2023-08-22 20:04:17 +02:00
}
2024-02-06 20:43:51 +01:00
/* This gives us a black background when system is dark and we have not loaded the theme/color scheme values in JS */
@media (prefers-color-scheme: dark) {
:root {
--text: white;
--background: black;
--backgroundLight: hsl(211, 20%, 20%);
color-scheme: dark;
}
2023-08-22 20:04:17 +02:00
}
2024-02-06 20:43:51 +01:00
/* Overwrite those preferences with the selected theme */
html.theme--light {
2023-08-22 20:04:17 +02:00
--text: black;
--background: white;
2024-01-19 05:54:20 +01:00
--backgroundLight: hsl(211, 20%, 95%);
2023-08-22 20:04:17 +02:00
}
2024-02-06 20:43:51 +01:00
html.theme--dark {
2023-08-22 20:04:17 +02:00
--text: white;
2024-02-06 20:43:51 +01:00
--background: black;
2024-01-19 05:54:20 +01:00
--backgroundLight: hsl(211, 20%, 20%);
2024-01-11 05:56:21 +01:00
color-scheme: dark;
2024-02-06 20:43:51 +01:00
}
html.theme--dim {
--text: white;
--background: hsl(211, 20%, 4%);
--backgroundLight: hsl(211, 20%, 10%);
color-scheme: dark;
2023-08-22 20:04:17 +02:00
}
2024-01-26 05:22:40 +01:00
/* Remove autofill styles on Webkit */
input:autofill,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
-webkit-background-clip: text;
-webkit-text-fill-color: var(--text);
transition: background-color 5000s ease-in-out 0s;
box-shadow: inset 0 0 20px 20px var(--background);
background: var(--background);
color: var(--text);
}
/* Force left-align date/time inputs on iOS mobile */
input::-webkit-date-and-time-value {
text-align: left;
}
2023-03-14 23:30:15 +01:00
body {
display: flex;
/* Allows you to scroll below the viewport; default value is visible */
overflow-y: auto;
overscroll-behavior-y: none;
text-rendering: optimizeLegibility;
2023-12-07 20:00:44 +01:00
background-color: var(--background);
2023-03-14 23:30:15 +01:00
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-ms-overflow-style: scrollbar;
2024-01-31 00:09:43 +01:00
font-synthesis-weight: none;
2023-03-14 23:30:15 +01:00
}
/* Remove default link styling */
a {
color: inherit;
}
a[role="link"]:hover {
text-decoration: underline;
}
2023-05-04 07:54:22 +02:00
a[role="link"][data-no-underline="1"]:hover {
text-decoration: none;
}
2023-03-14 23:30:15 +01:00
2023-04-14 01:36:08 +02:00
/* Styling hacks */
*[data-word-wrap] {
word-break: break-word;
}
2023-09-07 18:32:14 +02:00
*[data-stable-gutters] {
scrollbar-gutter: stable both-edges;
}
2023-04-14 01:36:08 +02:00
2023-03-14 23:30:15 +01:00
/* ProseMirror */
.ProseMirror {
font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
min-height: 140px;
}
2023-04-14 01:36:08 +02:00
.ProseMirror-dark {
color: white;
}
2023-03-14 23:30:15 +01:00
.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;
}
2023-08-29 03:40:45 +02:00
.ProseMirror a,
.ProseMirror .autolink {
2023-03-14 23:30:15 +01:00
color: #0085ff;
}
2023-05-08 23:09:15 +02:00
/* OLLIE: TODO -- this is not accessible */
/* Remove focus state on inputs */
.ProseMirror-focused {
outline: 0;
}
2023-06-07 18:11:04 +02:00
textarea:focus,
2023-05-08 23:09:15 +02:00
input:focus {
outline: 0;
}
2023-03-14 23:30:15 +01:00
.tippy-content .items {
2023-05-08 23:09:15 +02:00
width: fit-content;
2023-03-14 23:30:15 +01:00
}
2023-08-22 20:04:17 +02:00
/* Tooltips */
[data-tooltip] {
position: relative;
z-index: 10;
}
[data-tooltip]::after {
content: attr(data-tooltip);
display: none;
position: absolute;
bottom: 0;
left: 50%;
transform: translateY(100%) translateY(8px) translateX(-50%);
padding: 4px 10px;
border-radius: 10px;
background: var(--backgroundLight);
color: var(--text);
text-align: center;
white-space: nowrap;
font-size: 12px;
z-index: 10;
}
[data-tooltip]::before {
content: '';
display: none;
position: absolute;
border-bottom: 6px solid var(--backgroundLight);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
bottom: 0;
left: 50%;
transform: translateY(100%) translateY(2px) translateX(-50%);
z-index: 10;
}
[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
display:block;
}
2023-03-14 21:00:44 +01:00
< / style >
2023-03-14 23:30:15 +01:00
{% include "scripts.html" %}
2023-06-06 16:32:30 +02:00
< 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" >
2024-02-07 03:52:04 +01:00
< link rel = "mask-icon" href = "/static/safari-pinned-tab.svg" color = "#1185fe" >
< meta name = "theme-color" content = "#ffffff" >
2023-11-07 18:56:44 +01:00
< meta name = "application-name" content = "Bluesky" >
< meta name = "generator" content = "bskyweb" >
2024-02-07 03:52:04 +01:00
< meta property = "og:site_name" content = "Bluesky Social" / >
{% block html_head_extra -%}{%- endblock %}
2023-03-14 21:00:44 +01:00
< / head >
< body >
{%- block body_all %}
2023-03-14 23:30:15 +01:00
< div id = "root" > < / div >
2023-03-14 21:00:44 +01:00
< noscript >
2024-02-08 21:04:36 +01:00
< h1 lang = "en" > JavaScript Required< / h1 >
< p lang = "en" > This is a heavily interactive web application, and JavaScript is required. Simple HTML interfaces are possible, but that is not what this is.
2024-02-12 16:38:45 +01:00
< p lang = "en" > Learn more about Bluesky at < a href = "https://bsky.social" > bsky.social< / a > and < a href = "https://atproto.com" > atproto.com< / a > .
2023-05-08 22:03:03 +02:00
{% block noscript_extra %}{% endblock %}
2023-03-14 21:00:44 +01:00
< / noscript >
{% endblock -%}
< / body >
< / html >
