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>
<body>
<header>
<img src="/logo.svg" alt="Share2Fedi" width="260" height="80" />
<img src="/logo.svg" alt="Share2Fedi" width="195" height="60" />
</header>
<main>
<form id="js-s2f-form" action="/api/share" method="POST">
@ -80,7 +80,41 @@
<input type="submit" value="Publish" />
</form>
</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>
<summary>Privacy Notice</summary>
<p>
@ -119,9 +153,6 @@
data. Please refer to the privacy policy of the respective instance.
</p>
</details>
<a href="https://joinmastodon.org/">What is Mastodon?</a>
<a href="https://github.com/kytta/share2fedi">Share₂Fedi on GitHub</a>
<a href="https://stats.uptimerobot.com/QOXj3uXPDX">Status</a>
</footer>
</aside>
</body>
</html>

View file

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