Nikita Karamov
parent
630db8d4b2
commit
a22563ce6d
|
|
@ -0,0 +1,19 @@
|
||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
charset = utf-8
|
||||||
|
end_of_line = lf
|
||||||
|
indent_style = tab
|
||||||
|
insert_final_newline = true
|
||||||
|
max_line_length = 80
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
|
||||||
|
[*.md]
|
||||||
|
indent_size = 2
|
||||||
|
indent_style = space
|
||||||
|
max_line_length = off
|
||||||
|
trim_trailing_whitespace = false
|
||||||
|
|
||||||
|
[*.yml]
|
||||||
|
indent_size = 2
|
||||||
|
indent_style = space
|
||||||
32
gulpfile.js
32
gulpfile.js
|
|
@ -7,34 +7,34 @@ const terser = require('gulp-terser');
|
||||||
sass.compiler = require('sass');
|
sass.compiler = require('sass');
|
||||||
|
|
||||||
function html() {
|
function html() {
|
||||||
return gulp.src('./src/index.pug')
|
return gulp.src('./src/index.pug')
|
||||||
.pipe(pug())
|
.pipe(pug())
|
||||||
.pipe(gulp.dest('./dist/'));
|
.pipe(gulp.dest('./dist/'));
|
||||||
}
|
}
|
||||||
|
|
||||||
function css() {
|
function css() {
|
||||||
return gulp.src('./src/style/*.scss')
|
return gulp.src('./src/style/*.scss')
|
||||||
.pipe(sass().on('error', sass.logError))
|
.pipe(sass().on('error', sass.logError))
|
||||||
.pipe(postcss([require('autoprefixer'), require('cssnano')]))
|
.pipe(postcss([require('autoprefixer'), require('cssnano')]))
|
||||||
.pipe(gulp.dest('./dist/'));
|
.pipe(gulp.dest('./dist/'));
|
||||||
}
|
}
|
||||||
|
|
||||||
function js() {
|
function js() {
|
||||||
return gulp.src('./src/script/index.js')
|
return gulp.src('./src/script/index.js')
|
||||||
.pipe(terser({ ecma: 5 }))
|
.pipe(terser({ ecma: 5 }))
|
||||||
.pipe(gulp.dest('./dist/'));
|
.pipe(gulp.dest('./dist/'));
|
||||||
}
|
}
|
||||||
|
|
||||||
function static() {
|
function static() {
|
||||||
return gulp.src('./src/static/**/*')
|
return gulp.src('./src/static/**/*')
|
||||||
.pipe(gulp.dest('./dist/'));
|
.pipe(gulp.dest('./dist/'));
|
||||||
}
|
}
|
||||||
|
|
||||||
exports.default = gulp.parallel(html, css, js, static);
|
exports.default = gulp.parallel(html, css, js, static);
|
||||||
|
|
||||||
exports.watch = () => {
|
exports.watch = () => {
|
||||||
gulp.watch('./src/index.pug', html);
|
gulp.watch('./src/index.pug', html);
|
||||||
gulp.watch('./src/style/*.scss', css);
|
gulp.watch('./src/style/*.scss', css);
|
||||||
gulp.watch('./src/script/index.js', js);
|
gulp.watch('./src/script/index.js', js);
|
||||||
gulp.watch('./src/static/*', static);
|
gulp.watch('./src/static/*', static);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
52
package.json
52
package.json
|
|
@ -1,28 +1,28 @@
|
||||||
{
|
{
|
||||||
"name": "toot",
|
"name": "toot",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"main": "src/index.pug",
|
"main": "src/index.pug",
|
||||||
"repository": "git@github.com:NickKaramoff/toot.git",
|
"repository": "git@github.com:NickKaramoff/toot.git",
|
||||||
"author": "Nikita Karamov <nick@karamoff.dev>",
|
"author": "Nikita Karamov <nick@karamoff.dev>",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"private": "true",
|
"private": "true",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "gulp",
|
"build": "gulp",
|
||||||
"dev": "gulp watch"
|
"dev": "gulp watch"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"autoprefixer": "^9.8.6",
|
"autoprefixer": "^9.8.6",
|
||||||
"browserslist": "^4.14.4",
|
"browserslist": "^4.14.4",
|
||||||
"cross-env": "^7.0.2",
|
"cross-env": "^7.0.2",
|
||||||
"cssnano": "^4.1.10",
|
"cssnano": "^4.1.10",
|
||||||
"gulp": "^4.0.2",
|
"gulp": "^4.0.2",
|
||||||
"gulp-postcss": "^8.0.0",
|
"gulp-postcss": "^8.0.0",
|
||||||
"gulp-pug": "^4.0.1",
|
"gulp-pug": "^4.0.1",
|
||||||
"gulp-sass": "^4.1.0",
|
"gulp-sass": "^4.1.0",
|
||||||
"gulp-terser": "^1.4.0",
|
"gulp-terser": "^1.4.0",
|
||||||
"npm-run-all": "^4.1.5",
|
"npm-run-all": "^4.1.5",
|
||||||
"postcss": "^7.0.34",
|
"postcss": "^7.0.34",
|
||||||
"pug": "^3.0.0",
|
"pug": "^3.0.0",
|
||||||
"sass": "^1.26.11"
|
"sass": "^1.26.11"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,47 +1,46 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
html(lang="en")
|
html(lang="en")
|
||||||
head
|
head
|
||||||
meta(charset="UTF-8")
|
meta(charset="UTF-8")
|
||||||
meta(name="viewport", content="width=device-width, initial-scale=1.0")
|
meta(name="viewport", content="width=device-width, initial-scale=1.0")
|
||||||
title toot
|
title toot
|
||||||
|
|
||||||
link(rel="stylesheet", href="main.css")
|
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")
|
link(rel="stylesheet", href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&family=Roboto:wght@400;500&display=swap")
|
||||||
|
|
||||||
link(rel='apple-touch-icon' sizes='180x180' href='./icons/apple-touch-icon.png')
|
link(rel='apple-touch-icon' sizes='180x180' href='./icons/apple-touch-icon.png')
|
||||||
link(rel='icon' type='image/png' sizes='32x32' href='./icons/favicon-32x32.png')
|
link(rel='icon' type='image/png' sizes='32x32' href='./icons/favicon-32x32.png')
|
||||||
link(rel='icon' type='image/png' sizes='16x16' href='./icons/favicon-16x16.png')
|
link(rel='icon' type='image/png' sizes='16x16' href='./icons/favicon-16x16.png')
|
||||||
link(rel='manifest' href='./icons/site.webmanifest')
|
link(rel='manifest' href='./icons/site.webmanifest')
|
||||||
link(rel='mask-icon' href='./icons/safari-pinned-tab.svg' color='#3088d4')
|
link(rel='mask-icon' href='./icons/safari-pinned-tab.svg' color='#3088d4')
|
||||||
link(rel='shortcut icon' href='./icons/favicon.ico')
|
link(rel='shortcut icon' href='./icons/favicon.ico')
|
||||||
meta(name='msapplication-TileColor' content='#1f232b')
|
meta(name='msapplication-TileColor' content='#1f232b')
|
||||||
meta(name='msapplication-config' content='./icons/browserconfig.xml')
|
meta(name='msapplication-config' content='./icons/browserconfig.xml')
|
||||||
meta(name='theme-color' content='#1f232b')
|
meta(name='theme-color' content='#1f232b')
|
||||||
body
|
body
|
||||||
header
|
header
|
||||||
h1 🐘 toot
|
h1 🐘 toot
|
||||||
p
|
p Quickly post on any Mastodon instance
|
||||||
| Quickly post on any Mastodon instance
|
main
|
||||||
main
|
form#form
|
||||||
form#form
|
section
|
||||||
section
|
label(for="text") Post text
|
||||||
label(for="text") Post text
|
textarea#text(rows=6, name="text", required)
|
||||||
textarea#text(rows=6, name="text", required)
|
section
|
||||||
section
|
datalist#instances_list
|
||||||
datalist#instances_list
|
label(for="choose_instance") Choose your Mastodon instance
|
||||||
label(for="choose_instance") Choose your Mastodon instance
|
input#instance(type="url", name="instance", placeholder="https://", list="instances_list", required)
|
||||||
input#instance(type="url", name="instance", placeholder="https://", list="instances_list", required)
|
|
||||||
|
|
||||||
section.remember
|
section.remember
|
||||||
input#remember(type="checkbox", name="remember")
|
input#remember(type="checkbox", name="remember")
|
||||||
label(for="remember") Remember my instance on this device
|
label(for="remember") Remember my instance on this device
|
||||||
|
|
||||||
section.submit
|
section.submit
|
||||||
input(type="submit", value="Toot!")
|
input(type="submit", value="Toot!")
|
||||||
footer
|
footer
|
||||||
section
|
section
|
||||||
a(href="https://joinmastodon.org/") What is Mastodon?
|
a(href="https://joinmastodon.org/") What is Mastodon?
|
||||||
section
|
section
|
||||||
a(href="https://github.com/NickKaramoff/toot") This project on GitHub
|
a(href="https://github.com/NickKaramoff/toot") This project on GitHub
|
||||||
|
|
||||||
script(src="index.js")
|
script(src="index.js")
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
<svg width="100%" height="100%" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
<svg width="100%" height="100%" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||||
<path d="M34.453,15.573C35.229,18.393 36,22.488 36,27.641C36,28.194 35.553,28.641 35,28.641C34.447,28.641 34,28.194 34,27.641C34,26.141 33.925,24.742 33.807,23.435C33.678,23.82 33.546,24.198 33.387,24.552C32.54,26.909 31.348,29.733 31.348,31.534C31.348,35.098 29.246,35.641 26.653,35.641C24.062,35.641 21.959,35.098 21.959,31.534C21.959,31.317 21.968,31.116 21.972,30.907C21.501,30.93 21.021,30.946 20.524,30.946C19.7,30.946 18.922,30.903 18.165,30.839C18.169,31.071 18.177,31.294 18.177,31.534C18.177,35.098 16.075,35.641 13.482,35.641C10.89,35.641 8.788,35.098 8.788,31.534C8.788,29.202 7.185,24.661 6.795,21.79C6.763,21.626 6.723,21.472 6.695,21.304C5.974,23.916 5.59,28.074 6.44,29.775C7.613,32.12 8.787,32.12 7.613,33.296C6.439,34.467 2.918,33.296 1.745,30.946C0.571,28.6 -1.51,11.183 1.745,6.3C4.091,2.779 14.655,1.605 19.349,5.126C19.362,5.136 19.371,5.147 19.384,5.157C19.76,5.143 20.132,5.126 20.523,5.126C28.724,5.126 33.589,8.273 34.453,15.573ZM6.5,12.641C7.328,12.641 8,13.313 8,14.141C8,14.969 7.328,15.641 6.5,15.641C5.672,15.641 5,14.969 5,14.141C5,13.313 5.672,12.641 6.5,12.641Z" style="fill:rgb(48,136,212);"/>
|
<path d="M34.453,15.573C35.229,18.393 36,22.488 36,27.641C36,28.194 35.553,28.641 35,28.641C34.447,28.641 34,28.194 34,27.641C34,26.141 33.925,24.742 33.807,23.435C33.678,23.82 33.546,24.198 33.387,24.552C32.54,26.909 31.348,29.733 31.348,31.534C31.348,35.098 29.246,35.641 26.653,35.641C24.062,35.641 21.959,35.098 21.959,31.534C21.959,31.317 21.968,31.116 21.972,30.907C21.501,30.93 21.021,30.946 20.524,30.946C19.7,30.946 18.922,30.903 18.165,30.839C18.169,31.071 18.177,31.294 18.177,31.534C18.177,35.098 16.075,35.641 13.482,35.641C10.89,35.641 8.788,35.098 8.788,31.534C8.788,29.202 7.185,24.661 6.795,21.79C6.763,21.626 6.723,21.472 6.695,21.304C5.974,23.916 5.59,28.074 6.44,29.775C7.613,32.12 8.787,32.12 7.613,33.296C6.439,34.467 2.918,33.296 1.745,30.946C0.571,28.6 -1.51,11.183 1.745,6.3C4.091,2.779 14.655,1.605 19.349,5.126C19.362,5.136 19.371,5.147 19.384,5.157C19.76,5.143 20.132,5.126 20.523,5.126C28.724,5.126 33.589,8.273 34.453,15.573ZM6.5,12.641C7.328,12.641 8,13.313 8,14.141C8,14.969 7.328,15.641 6.5,15.641C5.672,15.641 5,14.969 5,14.141C5,13.313 5.672,12.641 6.5,12.641Z" style="fill:rgb(48,136,212);"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
|
@ -1,11 +1,11 @@
|
||||||
function normalizeUrl(url) {
|
function normalizeUrl(url) {
|
||||||
if (url.indexOf("http://") == -1 && url.indexOf("https://") == -1) {
|
if (url.indexOf("http://") == -1 && url.indexOf("https://") == -1) {
|
||||||
url = "https://" + url;
|
url = "https://" + url;
|
||||||
}
|
}
|
||||||
if (url.charAt(url.length - 1) !== '/'){
|
if (url.charAt(url.length - 1) !== '/'){
|
||||||
url = url + "/";
|
url = url + "/";
|
||||||
}
|
}
|
||||||
return url;
|
return url;
|
||||||
}
|
}
|
||||||
|
|
||||||
const instance = document.getElementById('instance');
|
const instance = document.getElementById('instance');
|
||||||
|
|
@ -16,68 +16,68 @@ var prefillInstance = window.localStorage.getItem('mastodon_instance');
|
||||||
var paramPairs = window.location.search.substr(1).split('&');
|
var paramPairs = window.location.search.substr(1).split('&');
|
||||||
var paramPairsLength = paramPairs.length;
|
var paramPairsLength = paramPairs.length;
|
||||||
for (var i = 0; i < paramPairsLength; i++) {
|
for (var i = 0; i < paramPairsLength; i++) {
|
||||||
var paramPair = paramPairs[i].split('=');
|
var paramPair = paramPairs[i].split('=');
|
||||||
if (paramPair[0] === 'text') {
|
if (paramPair[0] === 'text') {
|
||||||
document.getElementById('text').value = decodeURIComponent(paramPair[1]);
|
document.getElementById('text').value = decodeURIComponent(paramPair[1]);
|
||||||
} else if (paramPair[0] === 'instance') {
|
} else if (paramPair[0] === 'instance') {
|
||||||
prefillInstance = decodeURIComponent(paramPair[1]);
|
prefillInstance = decodeURIComponent(paramPair[1]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
delete i
|
delete i
|
||||||
delete paramPair
|
delete paramPair
|
||||||
|
|
||||||
function instances_loading_error() {
|
function instances_loading_error() {
|
||||||
console.error('Failed to fetch servers list from joinmastodon.');
|
console.error('Failed to fetch servers list from joinmastodon.');
|
||||||
}
|
}
|
||||||
|
|
||||||
function instances_loaded() {
|
function instances_loaded() {
|
||||||
if (this.status !== 200) {
|
if (this.status !== 200) {
|
||||||
instances_loading_error();
|
instances_loading_error();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const servers = JSON.parse(this.responseText);
|
const servers = JSON.parse(this.responseText);
|
||||||
|
|
||||||
const chosen_instance = instance.value;
|
const chosen_instance = instance.value;
|
||||||
const domains = servers.map(obj => obj.domain);
|
const domains = servers.map(obj => obj.domain);
|
||||||
if (chosen_instance && domains.indexOf(chosen_instance) === -1) {
|
if (chosen_instance && domains.indexOf(chosen_instance) === -1) {
|
||||||
domains.push(chosen_instance);
|
domains.push(chosen_instance);
|
||||||
}
|
}
|
||||||
domains.sort();
|
domains.sort();
|
||||||
|
|
||||||
for (const domain of domains) {
|
for (const domain of domains) {
|
||||||
const opt = document.createElement('option');
|
const opt = document.createElement('option');
|
||||||
opt.value = normalizeUrl(domain);
|
opt.value = normalizeUrl(domain);
|
||||||
instances_list.appendChild(opt);
|
instances_list.appendChild(opt);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (prefillInstance != null) {
|
if (prefillInstance != null) {
|
||||||
instance.value = normalizeUrl(prefillInstance);
|
instance.value = normalizeUrl(prefillInstance);
|
||||||
}
|
}
|
||||||
|
|
||||||
instance.addEventListener('focus', function (e) {
|
instance.addEventListener('focus', function (e) {
|
||||||
if (instances_list.children.length === 0) {
|
if (instances_list.children.length === 0) {
|
||||||
const req = new XMLHttpRequest();
|
const req = new XMLHttpRequest();
|
||||||
req.addEventListener('load', instances_loaded);
|
req.addEventListener('load', instances_loaded);
|
||||||
req.addEventListener('error', instances_loading_error);
|
req.addEventListener('error', instances_loading_error);
|
||||||
req.open('GET', 'https://api.joinmastodon.org/servers');
|
req.open('GET', 'https://api.joinmastodon.org/servers');
|
||||||
req.send();
|
req.send();
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
document
|
document
|
||||||
.getElementById('form')
|
.getElementById('form')
|
||||||
.addEventListener('submit', function (e) {
|
.addEventListener('submit', function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
var text = e.target.elements['text'].value;
|
var text = e.target.elements['text'].value;
|
||||||
var instance = normalizeUrl(e.target.elements['instance'].value);
|
var instance = normalizeUrl(e.target.elements['instance'].value);
|
||||||
var remember = e.target.elements['remember'].checked;
|
var remember = e.target.elements['remember'].checked;
|
||||||
|
|
||||||
if (remember) {
|
if (remember) {
|
||||||
window.localStorage.setItem('mastodon_instance', instance);
|
window.localStorage.setItem('mastodon_instance', instance);
|
||||||
}
|
}
|
||||||
|
|
||||||
var shareUrl = instance + "share?text=" + encodeURIComponent(text);
|
var shareUrl = instance + "share?text=" + encodeURIComponent(text);
|
||||||
window.location.href = shareUrl;
|
window.location.href = shareUrl;
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -2,150 +2,150 @@
|
||||||
@import "variables";
|
@import "variables";
|
||||||
|
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
background-color: $bg;
|
background-color: $bg;
|
||||||
color: $text;
|
color: $text;
|
||||||
font-family: $text-font;
|
font-family: $text-font;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-top: 2rem;
|
padding-top: 2rem;
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
color: $title;
|
color: $title;
|
||||||
font-family: $title-font;
|
font-family: $title-font;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
margin: 0 0 8px;
|
margin: 0 0 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin: 0 0 26px;
|
margin: 0 0 26px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 0.75rem;
|
padding: 0 0.75rem;
|
||||||
|
|
||||||
form {
|
form {
|
||||||
section {
|
section {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
|
|
||||||
&.remember,
|
&.remember,
|
||||||
&.submit {
|
&.submit {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.submit {
|
&.submit {
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea,
|
textarea,
|
||||||
input {
|
input {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
||||||
&[type=checkbox] {
|
&[type=checkbox] {
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&[type=submit] {
|
&[type=submit] {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: $button-bg;
|
background-color: $button-bg;
|
||||||
color: $button-text;
|
color: $button-text;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
padding: 4px 16px;
|
padding: 4px 16px;
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
border: 0;
|
border: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $button-hover-bg;
|
background-color: $button-hover-bg;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
transition: background-color 300ms ease, border 300ms ease;
|
transition: background-color 300ms ease, border 300ms ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea,
|
textarea,
|
||||||
input[type=url] {
|
input[type=url] {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
background-color: $input-bg;
|
background-color: $input-bg;
|
||||||
border: 1px solid color.scale($input-bg, $lightness: -25%);
|
border: 1px solid color.scale($input-bg, $lightness: -25%);
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active {
|
&:active {
|
||||||
border: 1px solid $button-bg;
|
border: 1px solid $button-bg;
|
||||||
background-color: color.scale($input-bg, $lightness: +5%);
|
background-color: color.scale($input-bg, $lightness: +5%);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
background-color: $footer-bg;
|
background-color: $footer-bg;
|
||||||
padding: 0.5rem 0;
|
padding: 0.5rem 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
||||||
section {
|
section {
|
||||||
margin: .5rem 1rem;
|
margin: .5rem 1rem;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $title;
|
color: $title;
|
||||||
}
|
}
|
||||||
|
|
||||||
transition: color 300ms ease;
|
transition: color 300ms ease;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue