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
}
2024-03-10 00:42:42 +01:00
html, body {
2024-03-17 21:34:52 +01:00
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif;
2024-03-10 00:42:42 +01:00
}
2023-03-14 23:30:15 +01:00
2024-05-02 13:38:33 +02:00
#preload {
width: 100px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
2024-03-01 00:30:17 +01:00
/* Buttons and inputs have a font set by UA, so we'll have to reset that */
button, input, textarea {
font: inherit;
line-height: inherit;
}
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 {
2024-03-17 21:34:52 +01:00
font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif;
2023-03-14 23:30:15 +01:00
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;
}
2024-02-27 05:33:48 +01:00
/* NativeDropdown component */
2024-03-06 04:15:42 +01:00
.radix-dropdown-item:focus,
2024-02-27 05:33:48 +01:00
.nativeDropdown-item:focus {
outline: none;
}
2024-04-05 00:18:06 +02:00
/* Spinner component */
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.rotate-500ms {
position: absolute;
inset:0;
animation: rotate 500ms linear infinite;
}
2024-04-13 19:28:53 +02:00
@keyframes avatarHoverFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes avatarHoverFadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
< / style >
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" >
2024-02-20 19:09:02 +01:00
< meta name = "theme-color" >
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" / >
2024-02-17 01:09:15 +01:00
< link type = "application/activity+json" href = "" / >
2024-02-07 03:52:04 +01:00
{% block html_head_extra -%}{%- endblock %}
2023-03-14 21:00:44 +01:00
< / head >
< body >
{%- block body_all %}
2024-05-02 13:38:33 +02:00
< div id = "preload" >
<!-- Bluesky SVG -->
< svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 360 320" > < path fill = "#295ef6" d = "M180 142c-16.3-31.7-60.7-90.8-102-120C38.5-5.9 23.4-1 13.5 3.4 2.1 8.6 0 26.2 0 36.5c0 10.4 5.7 84.8 9.4 97.2 12.2 41 55.7 55 95.7 50.5-58.7 8.6-110.8 30-42.4 106.1 75.1 77.9 103-16.7 117.3-64.6 14.3 48 30.8 139 116 64.6 64-64.6 17.6-97.5-41.1-106.1 40 4.4 83.5-9.5 95.7-50.5 3.7-12.4 9.4-86.8 9.4-97.2 0-10.3-2-27.9-13.5-33C336.5-1 321.5-6 282 22c-41.3 29.2-85.7 88.3-102 120Z" / > < / svg >
< / div >
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 >
