Update design

This commit is contained in:
Nikita Karamov 2023-03-16 19:54:33 +01:00
parent c670cdaf74
commit 65bef1053f
No known key found for this signature in database
GPG key ID: 41D6F71EE78E77CD
2 changed files with 72 additions and 20 deletions

View file

@ -44,7 +44,7 @@
</head> </head>
<body> <body>
<header> <header>
<img src="/logo.svg" alt="Share2Fedi" width="260" height="80" /> <img src="/logo.svg" alt="Share2Fedi" width="195" height="60" />
</header> </header>
<main> <main>
<form id="js-s2f-form" action="/api/share" method="POST"> <form id="js-s2f-form" action="/api/share" method="POST">
@ -80,7 +80,41 @@
<input type="submit" value="Publish" /> <input type="submit" value="Publish" />
</form> </form>
</main> </main>
<footer> <aside>
<p>
Share₂Fedi is an instance-agnostic share page for
<a href="https://en.wikipedia.org/wiki/Fediverse">the Fediverse</a>.
With it, you can post to various federated platforms from a single page.
</p>
<p><b>Supported projects:</b></p>
<ul>
<li>Mastodon</li>
<li>
GNU Social <small><b>(new!)</b></small>
</li>
</ul>
<p>
Share₂Fedi is developed and maintained by
<a href="https://www.kytta.dev/">Nikita Karamov</a>. Source code is
<a href="https://github.com/kytta/share2fedi">on GitHub</a>. Hosted with
<a href="https://vercel.com">Vercel</a>.
<a href="https://stats.uptimerobot.com/QOXj3uXPDX">Status page</a>.
</p>
<details>
<summary>Licence</summary>
<p>
Share₂Fedi is free software: you can redistribute it and/or modify it
under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
</p>
<p>
Share₂Fedi is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Affero General Public License for more details.
</p>
</details>
<details> <details>
<summary>Privacy Notice</summary> <summary>Privacy Notice</summary>
<p> <p>
@ -119,9 +153,6 @@
data. Please refer to the privacy policy of the respective instance. data. Please refer to the privacy policy of the respective instance.
</p> </p>
</details> </details>
<a href="https://joinmastodon.org/">What is Mastodon?</a> </aside>
<a href="https://github.com/kytta/share2fedi">Share₂Fedi on GitHub</a>
<a href="https://stats.uptimerobot.com/QOXj3uXPDX">Status</a>
</footer>
</body> </body>
</html> </html>

View file

@ -47,26 +47,32 @@ html {
} }
body { body {
max-width: 40em; max-width: 60em;
margin: 0 auto; margin: 0 auto;
padding: 0 1rem; display: flex;
flex-flow: row wrap;
> * {
flex-shrink: 0;
width: 100%;
max-width: 100%;
}
} }
header { header {
padding: 1rem 0 1.5rem; padding: 1rem;
text-align: center;
} }
footer { main,
margin-top: 2rem; aside {
border-top: 1px solid var(--s2f-border-color); padding: 0 1rem;
padding: 1rem 0; }
display: flex;
flex-flow: row wrap; hr {
flex-direction: row; height: 0;
align-items: baseline; color: inherit;
justify-content: center; border-color: var(--s2f-border-color);
gap: 2rem; border-width: 0.5px;
} }
a { a {
@ -133,3 +139,18 @@ input[type="submit"] {
--s2f-border-color: #333; --s2f-border-color: #333;
} }
} }
@media screen and (min-width: 768px) {
main,
aside {
flex: 0 0 auto;
}
main {
width: (200% / 3);
}
aside {
width: (100% / 3);
}
}