From 5b697c70c41e341c62c2ebe64f53f2df199130b5 Mon Sep 17 00:00:00 2001 From: Nikita Karamov Date: Wed, 23 Sep 2020 16:08:38 +0200 Subject: [PATCH] Design basic page --- src/index.pug | 32 ++++++++ src/script/index.js | 0 src/style/_variables.scss | 14 ++++ src/style/main.scss | 149 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 195 insertions(+) create mode 100644 src/index.pug create mode 100644 src/script/index.js create mode 100644 src/style/_variables.scss create mode 100644 src/style/main.scss diff --git a/src/index.pug b/src/index.pug new file mode 100644 index 0000000..f1096fb --- /dev/null +++ b/src/index.pug @@ -0,0 +1,32 @@ + +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") \ No newline at end of file diff --git a/src/script/index.js b/src/script/index.js new file mode 100644 index 0000000..e69de29 diff --git a/src/style/_variables.scss b/src/style/_variables.scss new file mode 100644 index 0000000..e327640 --- /dev/null +++ b/src/style/_variables.scss @@ -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; diff --git a/src/style/main.scss b/src/style/main.scss new file mode 100644 index 0000000..f0d7448 --- /dev/null +++ b/src/style/main.scss @@ -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; + } + } +}