setto/fediverse-share-button
4
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Bring more focus to the sharing button on the demo page.

Browse source
This commit is contained in:
Stefan Bohacek 2024-05-19 20:10:40 -04:00
parent 800fa67d9b
commit 411dad700e
No known key found for this signature in database
GPG key ID: FC75CD588A42BC10
1 changed files with 25 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
index.html
View file

@ -12,6 +12,7 @@
<link rel="stylesheet" <link rel="stylesheet"
href="./fediverse-share-button/styles.min.css"> href="./fediverse-share-button/styles.min.css">
<style> <style>
/* Demo page styles, not needed for the share button. */
body { body {
padding: 20px 24px; padding: 20px 24px;
font-family: sans-serif; font-family: sans-serif;
@ -20,7 +21,10 @@
header { header {
margin-bottom: 32px; margin-bottom: 32px;
}
header, article{
color: #4a4a4a;
} }
.note { .note {
@ -30,11 +34,27 @@
margin-bottom: 32px; margin-bottom: 32px;
font-weight: bold; font-weight: bold;
} }
.explainer {
font-family: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;
font-weight: normal;
font-size: 1.4rem;
-webkit-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
transform: rotate(-1deg);
margin-top: 2rem;
margin-bottom: 2rem;
}
.fsb-prompt {
margin-top: 0 !important;
}
</style> </style>
</head> </head>
<body> <body>
<div class="note">This is a demo of the <a href="https://github.com/stefanbohacek/fediverse-share-button/">Fediverse Share Button</a> project. Try it out at the bottom of <div class="note">This is a demo of the <a href="https://github.com/stefanbohacek/fediverse-share-button/">Fediverse
Share Button</a> project. Try it out at the bottom of
this page.</div> this page.</div>
<header> <header>
<h1>The Conquest of Bread</h1> <h1>The Conquest of Bread</h1>
@ -70,6 +90,7 @@
and export; but whole nations grow rich at the cost of those nations which lag behind in their industrial and export; but whole nations grow rich at the cost of those nations which lag behind in their industrial
development.</p> development.</p>
</article> </article>
<p class="explainer d-block mt-4 mb-3">Try it here ⤵</p>
<form class="fsb-prompt"> <form class="fsb-prompt">
<label>Share with the fediverse</label> <label>Share with the fediverse</label>
<div class="fsb-input-group mb-3"> <div class="fsb-input-group mb-3">
@ -81,7 +102,8 @@
class="fsb-input fsb-domain" class="fsb-input fsb-domain"
aria-label="Server domain"> aria-label="Server domain">
<button class="fsb-button" <button class="fsb-button"
type="submit"><img alt="Fediverse platform logo" src="./fediverse-share-button/icons/mastodon.svg" type="submit"><img alt="Fediverse platform logo"
src="./fediverse-share-button/icons/mastodon.svg"
class="fsb-icon"></span>Share</button> class="fsb-icon"></span>Share</button>
</div> </div>
<p class="fsb-support-note fsb-d-none">This server does not support sharing. Please visit <a <p class="fsb-support-note fsb-d-none">This server does not support sharing. Please visit <a
@ -95,4 +117,4 @@
</script> </script>
</body> </body>
</html> </html>