Mastodon
/
toot-script-condivisione-su-mastodon
mirror of https://github.com/NickKaramoff/toot
1
0
Fork 0
Code Issues Releases Wiki Activity

Design basic page

This commit is contained in:
Nikita Karamov 2020-09-23 16:08:38 +02:00
parent b617ff258b
commit 5b697c70c4
No known key found for this signature in database
GPG Key ID: E40DFE6E993540FF
4 changed files with 195 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/index.pug Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title toot
link(rel="stylesheet", href="main.css")
link(rel="stylesheet", href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&family=Roboto:wght@400;500&display=swap")
body
header
h1 toot
p Share links on any Mastodon instance
main
form
section
label(for="instance") Mastodon instance URL
input#instance(type="url", name="instance", placeholder="https://")
section.remember
input#remember(type="checkbox", name="remember")
label(for="remember") Remember as my default instance
section.submit
input(type="submit", value="Share post")
footer
section
a(href="https://joinmastodon.org/") What is Mastodon?
section
a(href="https://github.com/NickKaramoff/toot") This project on GitHub
script(src="index.js")

0
src/script/index.js Normal file
View File

14
src/style/_variables.scss Normal file
View File

@ -0,0 +1,14 @@
$text-font: 'Roboto', sans-serif;
$title-font: 'Montserrat', $text-font;
$bg: #1F232B;
$text: #9baec8;
$title:#d9e1e8;
$footer-bg: #16191F;
$button-bg: #3c99dc;
$button-hover-bg: #4ea2df;
$button-text: white;
$input-bg: #131419;

149
src/style/main.scss Normal file
View File

@ -0,0 +1,149 @@
@use "sass:color";
@import "variables";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
background-color: $bg;
color: $text;
font-family: $text-font;
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 {
text-align: center;
padding-top: 2rem;
h1 {
color: $title;
font-family: $title-font;
font-weight: 600;
font-size: 26px;
line-height: 1.5;
margin: 0 0 8px;
}
p {
margin: 0 0 26px;
}
}
main {
width: 100%;
max-width: 600px;
margin: 0 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;
}
input {
font-size: 1rem;
border-radius: 4px;
&[type=url] {
color: inherit;
width: 100%;
outline: 0;
font-family: inherit;
resize: vertical;
background-color: $input-bg;
border: 1px solid color.scale($input-bg, $lightness: -25%);
padding: 10px;
&:focus,
&:active {
border: 1px solid $button-bg;
background-color: color.scale($input-bg, $lightness: +5%);
}
&::placeholder {
color: inherit;
opacity: 0.3;
}
}
&[type=checkbox] {
margin-right: 8px;
}
&[type=submit] {
display: inline-block;
text-align: center;
background-color: $button-bg;
color: $button-text;
font-weight: 500;
font-family: inherit;
padding: 4px 16px;
line-height: 36px;
border: 0;
cursor: pointer;
&:hover {
background-color: $button-hover-bg;
}
}
transition: background-color 300ms ease, border 300ms ease;
}
}
}
footer {
background-color: $footer-bg;
padding: 0.5rem 0;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: wrap;
section {
margin: .5rem 1rem;
a {
color: inherit;
&:hover {
color: $title;
}
transition: color 300ms ease;
}
}
}