Restyle the website

This makes the style much simpler and more lightweight
This commit is contained in:
Nikita Karamov 2023-03-16 14:36:07 +01:00
parent af516510fa
commit 5f95406002
No known key found for this signature in database
GPG key ID: 41D6F71EE78E77CD
3 changed files with 123 additions and 186 deletions

View file

@ -43,25 +43,24 @@
</head>
<body>
<header>
<h1>
<img src="/logo.svg" alt="Share2Fedi" width="260" height="80" />
</h1>
</header>
<main>
<form id="js-s2f-form" action="/api/share" method="POST">
<section>
<label for="text">Post text</label>
<label>
Post text
<textarea
name="text"
id="text"
rows="6"
rows="7"
placeholder="What's on your mind?"
required
></textarea>
</section>
<section>
</label>
<datalist id="instanceDatalist"></datalist>
<label for="instance">Choose your Mastodon instance</label>
<label>
Choose your Mastodon instance
<input
type="url"
name="instance"
@ -70,23 +69,19 @@
list="instanceDatalist"
required
/>
</section>
<section class="remember">
</label>
<label for="remember">
<input type="checkbox" id="remember" name="remember" />
<label for="remember">Remember my instance on this device</label>
</section>
<section class="submit">
<input type="submit" value="TOOT!" />
</section>
Remember my instance on this device
</label>
<input type="submit" value="Publish" />
</form>
</main>
<footer>
<section>
<a href="https://joinmastodon.org/">What is Mastodon?</a>
</section>
<section>
<a href="https://github.com/kytta/share2fedi">toot on GitHub</a>
</section>
</footer>
</body>
</html>

View file

@ -24,181 +24,123 @@
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--s2f-bg-color: #eff3f5;
--s2f-text-color: #282c37;
--s2f-border-color: #ccd7e0;
color-scheme: light dark;
--s2f-accent-color: #40665c;
--s2f-accent-color-light: #5d8379;
--s2f-accent-color-contrast: #005e4e;
--s2f-border-color: #ccc;
--s2f-input-bg-color: #ffffff;
--s2f-input-text-color: #000000;
--s2f-input-placeholder-color: #444b5d;
--s2f-input-border-color: #c0cdd9;
--s2f-button-bg-color: #6d6eff;
--s2f-button-hover-bg-color: #6364ff;
--s2f-button-text-color: #ffffff;
accent-color: var(--s2f-button-bg-color);
accent-color: var(--s2f-accent-color);
font-family: "Helvetica Neue", Helvetica, FreeSans, "Nimbus Sans L", "Inter",
Arial, system-ui, sans-serif;
font-size: 16px;
}
html {
line-height: 1.5;
}
body {
max-width: 40em;
margin: 0 auto;
padding: 0 1rem;
}
header {
padding: 1rem 0 1.5rem;
text-align: center;
}
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;
}
a {
color: var(--s2f-accent-color-contrast);
}
b,
strong {
font-weight: bolder;
}
label {
display: block;
margin-bottom: 1rem;
}
input,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
padding: 0.5rem;
border-radius: 4px;
}
textarea {
resize: vertical;
}
input[type="url"],
textarea {
width: 100%;
color: var(--s2f-input-text-color);
background-color: var(--s2f-input-bg-color);
border: 1px solid var(--s2f-border-color);
}
input[type="checkbox"],
input[type="radio"] {
vertical-align: middle;
}
input[type="submit"] {
background-color: var(--s2f-accent-color);
color: var(--s2f-button-text-color);
font-weight: bolder;
height: 2.5rem;
padding: 0.5rem 2rem;
border: 0;
cursor: pointer;
appearance: button;
-webkit-appearance: button;
&:hover {
background-color: var(--s2f-accent-color-light);
}
}
@media (prefers-color-scheme: dark) {
:root {
--s2f-bg-color: #191b22;
--s2f-text-color: #9caec8;
--s2f-border-color: #313543;
--s2f-accent-color: #43776a;
--s2f-accent-color-light: #619587;
--s2f-accent-color-contrast: #a8f7e2;
--s2f-input-text-color: #282c37;
--s2f-input-placeholder-color: #606984;
--s2f-input-border-color: transparent;
--s2f-button-bg-color: #595aff;
--s2f-button-hover-bg-color: #6364ff;
}
}
html,
body {
background-color: var(--s2f-bg-color);
color: var(--s2f-text-color);
font-family: "Helvetica Neue", Helvetica, FreeSans, "Nimbus Sans L", "Inter",
Arial, system-ui, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1;
height: 100%;
width: 100%;
}
body {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
header {
border-bottom: 1px solid var(--s2f-border-color);
padding: 1.5rem 0 0.5rem;
text-align: center;
width: 100%;
h1 {
display: inline-block;
margin: 0 1rem 0 0;
vertical-align: middle;
}
p {
display: inline-block;
line-height: 1.2rem;
margin: 0;
text-align: left;
vertical-align: middle;
img {
vertical-align: middle;
}
}
}
main {
width: 100%;
max-width: 600px;
margin: auto;
padding: 0 0.75rem;
form {
section {
margin-bottom: 1rem;
&.remember,
&.submit {
text-align: center;
}
&.submit {
margin-top: 2rem;
}
}
label {
font-size: 14px;
margin-bottom: 8px;
display: inline-block;
}
textarea,
input {
font-size: 1rem;
border-radius: 4px;
&[type="checkbox"] {
margin-right: 8px;
}
&[type="submit"] {
display: inline-block;
text-align: center;
background-color: var(--s2f-button-bg-color);
color: var(--s2f-button-text-color);
font-weight: 500;
font-family: inherit;
height: 2.5rem;
padding: 0 1rem;
line-height: 36px;
border: 0;
cursor: pointer;
&:hover {
background-color: var(--s2f-button-hover-bg-color);
}
}
transition: background-color 300ms ease, border 300ms ease;
}
textarea,
input[type="url"] {
color: var(--s2f-input-text-color);
width: 100%;
font-family: inherit;
resize: vertical;
background-color: var(--s2f-input-bg-color);
border: 1px solid var(--s2f-input-border-color);
padding: 10px;
&::placeholder {
color: var(--s2f-input-placeholder-color);
}
}
}
}
footer {
border-top: 1px solid var(--s2f-border-color);
padding: 1rem 0;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: wrap;
section {
margin: 0.5rem 1rem;
a {
color: inherit;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
--s2f-border-color: #333;
}
}

View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="520" height="160" viewBox="0 0 260 80"><defs><clipPath id="pentagon"><path d="m38.802 1.632 23.656 29.212-20.473 31.524-36.307-9.729L3.71 15.102z"/></clipPath><filter id="blur"><feGaussianBlur stdDeviation="15"/></filter></defs><g clip-path="url(#pentagon)" transform="matrix(.6 0 0 .6 129 36)"><g filter="url(#blur)"><circle cy="10" r="39" fill="#F44336"/><circle cx="45" cy="-5" r="39" fill="#FFEB3B"/><circle cx="70" cy="25" r="39" fill="#4CAF50"/><circle cx="50" cy="65" r="39" fill="#03A9F4"/><circle cx="5" cy="70" r="39" fill="#673AB7"/><circle cx="50" cy="31.5" r="12" fill="#4CAF50"/><circle cx="37.5" cy="50.5" r="12" fill="#03A9F4"/><circle cx="15.5" cy="44.5" r="12" fill="#673AB7"/><circle cx="14" cy="22" r="12" fill="#F44336"/><circle cx="36" cy="14" r="12" fill="#FFEB3B"/></g></g><style>@media (prefers-color-scheme:dark){#text{fill:#d9e1e8}}</style><path id="text" fill="#282c37" d="M29.39 27.758h8.387C37.732 21.412 32.85 17.24 25.04 17.24c-7.678 0-13.092 4.127-13.047 10.251 0 5.06 3.461 7.855 9.186 9.098l3.24.665c3.594.8 4.792 1.687 4.836 3.196-.044 1.553-1.464 2.707-4.304 2.707-3.328 0-5.325-1.598-5.458-4.571H11.15c.044 8.12 5.547 11.76 13.934 11.76 8.21 0 13.091-3.55 13.136-9.896-.045-4.926-2.974-8.388-10.074-9.897l-2.663-.576c-3.062-.666-4.437-1.554-4.349-3.107 0-1.42 1.199-2.44 3.906-2.44 2.84 0 4.171 1.242 4.349 3.328zm21.002 8.564c0-2.396 1.375-3.816 3.505-3.816 2.22 0 3.506 1.42 3.462 3.816v13.624h8.698V34.503c.044-5.28-3.329-9.097-8.432-9.097-3.594 0-6.213 1.864-7.322 4.926h-.222V17.684h-8.387v32.262h8.698zm26.723 14.024c3.15 0 5.503-1.11 6.967-3.817h.222v3.417h8.121V33.35c0-4.438-4.26-7.943-11.183-7.943-7.233 0-10.783 3.816-11.094 8.21h8.032c.178-1.51 1.287-2.22 2.973-2.22 1.51 0 2.574.71 2.574 1.953v.089c0 1.376-1.553 1.82-5.636 2.13-4.97.355-8.875 2.396-8.875 7.677 0 4.837 3.24 7.1 7.9 7.1zm2.84-5.503c-1.509 0-2.53-.71-2.53-2.086 0-1.242.888-2.219 2.885-2.53 1.376-.221 2.574-.488 3.462-.887v2.041c0 2.22-1.864 3.462-3.817 3.462zm16.641 5.103h8.698V37.343c0-2.796 1.908-4.615 4.482-4.615.888 0 2.308.133 3.195.444V25.76a7.486 7.486 0 0 0-2.219-.355c-2.574 0-4.57 1.553-5.458 4.926h-.266V25.76h-8.432v24.185zm29.417.444c6.7 0 11.05-3.195 11.849-8.254h-7.944c-.488 1.376-1.952 2.13-3.728 2.13-2.573 0-4.082-1.686-4.082-4.038v-.355h15.754V37.83c0-7.677-4.704-12.425-12.027-12.425-7.5 0-12.292 5.014-12.292 12.514 0 7.81 4.704 12.47 12.47 12.47zm-3.905-15.31c.044-2.086 1.775-3.55 3.905-3.55 2.174 0 3.816 1.464 3.86 3.55zm35.893 14.866h8.743V37.343h12.558v-7.056h-12.558V24.74h13.934v-7.056h-22.677v32.262zm35.859.444c6.7 0 11.05-3.195 11.848-8.254h-7.944c-.488 1.376-1.952 2.13-3.727 2.13-2.574 0-4.083-1.686-4.083-4.038v-.355h15.754V37.83c0-7.677-4.704-12.425-12.026-12.425-7.5 0-12.293 5.014-12.293 12.514 0 7.81 4.704 12.47 12.47 12.47zm-3.906-15.31c.044-2.086 1.775-3.55 3.905-3.55 2.175 0 3.817 1.464 3.861 3.55zm28.042 15.177c3.417 0 5.725-1.82 6.746-4.26h.177v3.95h8.654V17.683h-8.698v12.293h-.133c-.932-2.486-3.196-4.571-6.79-4.571-4.793 0-9.452 3.683-9.452 12.425 0 8.388 4.349 12.426 9.496 12.426zm3.24-6.657c-2.397 0-3.817-2.174-3.817-5.769s1.42-5.724 3.817-5.724 3.816 2.13 3.816 5.724c0 3.55-1.42 5.77-3.816 5.77zm16.638 6.346h8.698V25.761h-8.698zm4.349-26.715c2.352 0 4.26-1.775 4.26-3.994 0-2.174-1.908-3.95-4.26-3.95-2.397 0-4.305 1.776-4.305 3.95 0 2.22 1.908 3.994 4.305 3.994z"/><path fill="#fff" d="M140.44 64.724h14.463v-4.088h-7.374v-.104l1.785-1.475c4.27-3.57 5.382-5.433 5.382-7.606 0-3.493-2.872-5.795-7.4-5.795-4.372 0-7.218 2.432-7.218 6.39h4.864c-.026-1.578.957-2.458 2.354-2.458 1.423 0 2.406.88 2.406 2.303 0 1.345-.853 2.199-2.225 3.363l-7.037 5.796v3.674z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="520" height="160" viewBox="0 0 260 80"><defs><clipPath id="pentagon"><path d="m38.802 1.632 23.656 29.212-20.473 31.524-36.307-9.729L3.71 15.102z"/></clipPath><filter id="blur"><feGaussianBlur stdDeviation="15"/></filter></defs><g clip-path="url(#pentagon)" transform="matrix(.6 0 0 .6 129 36)"><g filter="url(#blur)"><circle cy="10" r="39" fill="#F44336"/><circle cx="45" cy="-5" r="39" fill="#FFEB3B"/><circle cx="70" cy="25" r="39" fill="#4CAF50"/><circle cx="50" cy="65" r="39" fill="#03A9F4"/><circle cx="5" cy="70" r="39" fill="#673AB7"/><circle cx="50" cy="31.5" r="12" fill="#4CAF50"/><circle cx="37.5" cy="50.5" r="12" fill="#03A9F4"/><circle cx="15.5" cy="44.5" r="12" fill="#673AB7"/><circle cx="14" cy="22" r="12" fill="#F44336"/><circle cx="36" cy="14" r="12" fill="#FFEB3B"/></g></g><style>@media (prefers-color-scheme:dark){#text{fill:#fff}}</style><path id="text" fill="#000" d="M29.39 27.758h8.387C37.732 21.412 32.85 17.24 25.04 17.24c-7.678 0-13.092 4.127-13.047 10.251 0 5.06 3.461 7.855 9.186 9.098l3.24.665c3.594.8 4.792 1.687 4.836 3.196-.044 1.553-1.464 2.707-4.304 2.707-3.328 0-5.325-1.598-5.458-4.571H11.15c.044 8.12 5.547 11.76 13.934 11.76 8.21 0 13.091-3.55 13.136-9.896-.045-4.926-2.974-8.388-10.074-9.897l-2.663-.576c-3.062-.666-4.437-1.554-4.349-3.107 0-1.42 1.199-2.44 3.906-2.44 2.84 0 4.171 1.242 4.349 3.328zm21.002 8.564c0-2.396 1.375-3.816 3.505-3.816 2.22 0 3.506 1.42 3.462 3.816v13.624h8.698V34.503c.044-5.28-3.329-9.097-8.432-9.097-3.594 0-6.213 1.864-7.322 4.926h-.222V17.684h-8.387v32.262h8.698zm26.723 14.024c3.15 0 5.503-1.11 6.967-3.817h.222v3.417h8.121V33.35c0-4.438-4.26-7.943-11.183-7.943-7.233 0-10.783 3.816-11.094 8.21h8.032c.178-1.51 1.287-2.22 2.973-2.22 1.51 0 2.574.71 2.574 1.953v.089c0 1.376-1.553 1.82-5.636 2.13-4.97.355-8.875 2.396-8.875 7.677 0 4.837 3.24 7.1 7.9 7.1zm2.84-5.503c-1.509 0-2.53-.71-2.53-2.086 0-1.242.888-2.219 2.885-2.53 1.376-.221 2.574-.488 3.462-.887v2.041c0 2.22-1.864 3.462-3.817 3.462zm16.641 5.103h8.698V37.343c0-2.796 1.908-4.615 4.482-4.615.888 0 2.308.133 3.195.444V25.76a7.486 7.486 0 0 0-2.219-.355c-2.574 0-4.57 1.553-5.458 4.926h-.266V25.76h-8.432v24.185zm29.417.444c6.7 0 11.05-3.195 11.849-8.254h-7.944c-.488 1.376-1.952 2.13-3.728 2.13-2.573 0-4.082-1.686-4.082-4.038v-.355h15.754V37.83c0-7.677-4.704-12.425-12.027-12.425-7.5 0-12.292 5.014-12.292 12.514 0 7.81 4.704 12.47 12.47 12.47zm-3.905-15.31c.044-2.086 1.775-3.55 3.905-3.55 2.174 0 3.816 1.464 3.86 3.55zm35.893 14.866h8.743V37.343h12.558v-7.056h-12.558V24.74h13.934v-7.056h-22.677v32.262zm35.859.444c6.7 0 11.05-3.195 11.848-8.254h-7.944c-.488 1.376-1.952 2.13-3.727 2.13-2.574 0-4.083-1.686-4.083-4.038v-.355h15.754V37.83c0-7.677-4.704-12.425-12.026-12.425-7.5 0-12.293 5.014-12.293 12.514 0 7.81 4.704 12.47 12.47 12.47zm-3.906-15.31c.044-2.086 1.775-3.55 3.905-3.55 2.175 0 3.817 1.464 3.861 3.55zm28.042 15.177c3.417 0 5.725-1.82 6.746-4.26h.177v3.95h8.654V17.683h-8.698v12.293h-.133c-.932-2.486-3.196-4.571-6.79-4.571-4.793 0-9.452 3.683-9.452 12.425 0 8.388 4.349 12.426 9.496 12.426zm3.24-6.657c-2.397 0-3.817-2.174-3.817-5.769s1.42-5.724 3.817-5.724 3.816 2.13 3.816 5.724c0 3.55-1.42 5.77-3.816 5.77zm16.638 6.346h8.698V25.761h-8.698zm4.349-26.715c2.352 0 4.26-1.775 4.26-3.994 0-2.174-1.908-3.95-4.26-3.95-2.397 0-4.305 1.776-4.305 3.95 0 2.22 1.908 3.994 4.305 3.994z"/><path fill="#fff" d="M140.44 64.724h14.463v-4.088h-7.374v-.104l1.785-1.475c4.27-3.57 5.382-5.433 5.382-7.606 0-3.493-2.872-5.795-7.4-5.795-4.372 0-7.218 2.432-7.218 6.39h4.864c-.026-1.578.957-2.458 2.354-2.458 1.423 0 2.406.88 2.406 2.303 0 1.345-.853 2.199-2.225 3.363l-7.037 5.796v3.674z"/></svg>

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB