Restyle the website
This makes the style much simpler and more lightweight
This commit is contained in:
Nikita Karamov
parent
af516510fa
commit
5f95406002
3 changed files with 123 additions and 186 deletions
33
index.html
33
index.html
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 |
Reference in a new issue