<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="referrer" content="origin-when-cross-origin">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.blue.min.css">
<link rel="stylesheet" href="https://syui.ai/bower_components/font-awesome/css/all.min.css" />
<link rel="icon" href="https://live.syui.ai/favicon.ico">
<title>o.syui.ai</title>
</head>
<body>
<header>
<hgroup>
{% if g.user %}
{% endif %}
</hgroup>
<nav>
<ul>
<li><a href="/"><button class="secondary">o</button></a></li>
<li>.syui.ai</li>
</ul>
<ul>
{% if g.user %}
<li><a href="{{ url_for('bsky_post') }}">post</a>
<li><a href="{{ url_for('oauth_refresh') }}">refresh</a>
<li><a href="{{ url_for('oauth_logout') }}"><button class="secondary">logout</button></a>
{% else %}
<li><a href="/about"><i class="fa-solid fa-circle-question"></i></a></li>
{% endif %}
<!--
<li><a href="https://github.com/bluesky-social/cookbook">Code</a>
-->
</ul>
</nav>
</header>
<main class="container">
<section class="content">
{% for message in get_flashed_messages() %}
<article>{{ message }}</article>
{% endfor %}
{% block content %}{% endblock %}
</section>
</main>
<style>
body {
background-color: #f1f1f1;
}
button a {
color: #fff;
}
iframe#livechat {
width: 100%;
min-height: 500px;
}
iframe#livestream {
width: 100%;
min-height: 500px;
}
button.oauth-login {
width: 100%;
}
footer {
text-align:center;
}
.container-1 {
display: flex;
.right-container {
background-color: #fff;
position: sticky;
top: 0;
align-self: flex-start;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding:10px;
margin-left:30px;
.content:first-of-type {
position: sticky;
bottom: 0;
}
}
}
.left-container {
padding:10px;
background-color: #fff;
width: 80%;
}
@media screen and (max-width: 959px) {
.left-container {
width: 100%;
}
iframe#livestream {
width: 100%;
min-height:300px;
height:100%;
}
.container-1 {
display: block;
.right-container {
margin-left:0px;
}
}
}
</style>
<footer>©syui</footer>
</body>
</html>