kopia lustrzana https://github.com/snarfed/bridgy-fed
front page redesign: table with all four protocols
Ryan Barrett
rodzic
34173b2e22
commit
61e4daed36
|
|
@ -27,6 +27,6 @@ function update() {
|
|||
(showed) ? 'none' : 'block'
|
||||
}
|
||||
|
||||
addEventListener('DOMContentLoaded', () => {
|
||||
$('input').on('change', update)
|
||||
})
|
||||
// addEventListener('DOMContentLoaded', () => {
|
||||
// $('input').on('change', update)
|
||||
// })
|
||||
|
|
|
|||
|
|
@ -149,79 +149,25 @@ pre .value, code .value, code.value {
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
.front-buttons {
|
||||
/* vertical center button groups against left side text */
|
||||
/* display: flex; */
|
||||
/* align-items: center; */
|
||||
}
|
||||
|
||||
.front-buttons .btn-group {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#front-tagline {
|
||||
margin-bottom: 0;
|
||||
text-shadow: 0px 0px .2em var(--glow);
|
||||
}
|
||||
|
||||
@media (min-width: 992px) { /* @screen-md-min */
|
||||
.front-buttons > div:first-child {
|
||||
text-align: right;
|
||||
}
|
||||
#front-table {
|
||||
background-color: var(--bg);
|
||||
}
|
||||
|
||||
.front-buttons label {
|
||||
font-size: 1em;
|
||||
white-space: nowrap;
|
||||
#front-table th, #front-table td {
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
.front-buttons label img {
|
||||
height: 1em;
|
||||
margin-top: -.2em;
|
||||
.th-top th {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.front-buttons .btn {
|
||||
float: none; /* separate buttons */
|
||||
border-radius: .2em !important;
|
||||
margin: .1em !important;
|
||||
}
|
||||
|
||||
.btn.web, .btn.web:hover, .btn.web:focus, .btn.web.active {
|
||||
background-color: #20593c;
|
||||
border: 2px solid #47c986;
|
||||
}
|
||||
|
||||
.btn.fediverse, .btn.fediverse:hover, .btn.fediverse:focus, .btn.fediverse.active {
|
||||
background-color: #88305b;
|
||||
border: 2px solid #c94786;
|
||||
}
|
||||
|
||||
.btn.active {
|
||||
box-shadow: 1px 1px .1em var(--glow), -1px -1px .1em var(--glow);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
box-shadow: 1px 1px .1em var(--glow), -1px -1px .1em var(--glow);
|
||||
text-shadow: 0px 0px .1em var(--glow);
|
||||
}
|
||||
|
||||
#front-instructions {
|
||||
min-height: 4em;
|
||||
}
|
||||
|
||||
.instruction {
|
||||
display: none;
|
||||
margin: 1em;
|
||||
margin-left: 2em;
|
||||
margin-right: 2em;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#front-instruction-placeholder {
|
||||
display: block;
|
||||
font-style: italic;
|
||||
opacity: 70%;
|
||||
.th-left {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#front-logo-bottom {
|
||||
|
|
|
|||
|
|
@ -16,90 +16,69 @@
|
|||
</em>
|
||||
</div>
|
||||
|
||||
<div id="front-me" class="row front-buttons"
|
||||
role="group" data-toggle="buttons" aria-label="I'm on">
|
||||
<div class="col-md-4 col-md-offset-2 bigger text-outline">
|
||||
I'm on
|
||||
</div>
|
||||
|
||||
<!--
|
||||
-- Separated buttons
|
||||
-->
|
||||
<div class="btn-group col-md-6 big">
|
||||
<label for="me-web" class="btn btn-primary web">
|
||||
<!-- autocomplete="off" prevents Firefox from preserving these buttons' state
|
||||
https://github.com/twbs/bootstrap/issues/793
|
||||
-->
|
||||
<input name="me" id="me-web" type="radio" autocomplete="off">
|
||||
🌐 Web
|
||||
</label>
|
||||
<label for="me-fediverse" class="btn btn-primary fediverse">
|
||||
<input name="me" id="me-fediverse" type="radio" autocomplete="off">
|
||||
<img src="/static/fediverse_logo.svg">
|
||||
Fediverse
|
||||
</label>
|
||||
</div>
|
||||
<div class="row">
|
||||
<table id="front-table">
|
||||
<tr class="th-top">
|
||||
<th colspan="2"></th>
|
||||
<th colspan="4">I want to follow...</th>
|
||||
</tr>
|
||||
<tr class="th-top">
|
||||
<th colspan="2"></th>
|
||||
<th>Web: example.com</th>
|
||||
<th>Fediverse: @user@instance.com</th>
|
||||
<th>Bluesky: @example.com</th>
|
||||
<th>Nostr: npubxyz</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th rowspan="4" class="th-left">I'm on...</th>
|
||||
<th class="th-left">Web</th>
|
||||
<td>-</td>
|
||||
<td colspan="3">
|
||||
Enter your web site:
|
||||
<form method="post" action="/web-site">
|
||||
<input required type="url" name="url" id="url" placeholder="snarfed.org" />
|
||||
<input type="submit" class="btn btn-default" value="Go" />
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="th-left">Fediverse</th>
|
||||
<td>@example.com@web.brid.gy</td>
|
||||
<td>-</td>
|
||||
<td>@example.com@atp.brid.gy</td>
|
||||
<td>@npubxyz@nostr.brid.gy</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="th-left">Bluesky</th>
|
||||
<td>example.com.web.brid.gy</td>
|
||||
<td>example.com.atp.brid.gy</td>
|
||||
<td>-</td>
|
||||
<td>npubxyz.nostr.brid.gy</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="th-left">Nostr</th>
|
||||
<td>@example.com@web.brid.gy</td>
|
||||
<td>@example.com@ap.brid.gy</td>
|
||||
<td>@example.com@atp.brid.gy</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="front-them" class="row front-buttons"
|
||||
role="group" data-toggle="buttons" aria-label="I want to follow someone on">
|
||||
<div class="col-lg-4 col-lg-offset-2 col-md-5 col-md-offset-1 bigger text-outline">
|
||||
I want to follow <br class="visible-xs-inline"> someone on
|
||||
</div>
|
||||
|
||||
<div class="btn-group col-md-6 big">
|
||||
<label for="them-web" class="btn btn-primary web">
|
||||
<input name="them" id="them-web" type="radio" autocomplete="off">
|
||||
🌐 Web
|
||||
</label>
|
||||
<label for="them-fediverse" class="btn btn-primary fediverse">
|
||||
<input name="them" id="them-fediverse" type="radio" autocomplete="off">
|
||||
<img src="/static/fediverse_logo.svg">
|
||||
Fediverse
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- front-form -->
|
||||
|
||||
<div id="front-instructions" class="row big front-light">
|
||||
|
||||
<p id="front-instruction-placeholder">
|
||||
Choose your networks above.
|
||||
</p>
|
||||
|
||||
<p id="front-web-web" class="instruction">
|
||||
<a href="https://indieweb.org/reader">Use a feed reader!</a> No need for Bridgy Fed.
|
||||
</p>
|
||||
|
||||
<div id="front-web-fediverse" class="instruction">
|
||||
Enter your web site:
|
||||
<form method="post" action="/web-site">
|
||||
<input required type="url" name="url" id="url" placeholder="snarfed.org" />
|
||||
<input type="submit" class="btn btn-default" value="Go" />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<p id="front-fediverse-web" class="instruction">
|
||||
To follow the web site <a class="handle" href="https://example.com/">example.com</a>, search for <span class="handle">@example.com@web.brid.gy</span> on your fediverse instance.
|
||||
</p>
|
||||
|
||||
<p id="front-fediverse-fediverse" class="instruction">
|
||||
<a href="https://docs.joinmastodon.org/user/network/#follow">Search for them on your instance!</a> No need for Bridgy Fed.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="row big front-dark">
|
||||
<div class="row big front-light">
|
||||
<p>Bridgy Fed connects many popular decentralized social networks. You can use it from one network to follow people on another, see their posts, and reply and like and repost like normal. All interactions work in both directions. <a href="/docs">See the docs for more info.</a></p>
|
||||
</div>
|
||||
|
||||
<!-- <p>Blocks, mutes, and other native moderation features work automatically. You can opt out of Bridgy Fed by adding <em>#nobridge</em> or <em>#nobots</em> to your bio or <a href="mailto:opt-out@brid.gy">by private email request</a>.</p> -->
|
||||
|
||||
<div class="row big front-light">
|
||||
<div class="row big front-dark">
|
||||
<p>Bridgy Fed currently supports web sites and blogs and the <a href="https://enwp.org/fediverse">fediverse</a> via <a href="https://activitypub.rocks/">ActivityPub</a>. More networks like <a href="https://blueskyweb.xyz/">Bluesky</a>/<a href="https://atproto.com/">AT Protocol</a> and <a href="https://en.wikipedia.org/wiki/Nostr">Nostr</a> are coming soon!</p>
|
||||
</div>
|
||||
|
||||
<div class="row big front-dark">
|
||||
<div class="row big front-light">
|
||||
<p>Bridgy Fed is a free, non-commercial, <a href="https://github.com/snarfed/bridgy-fed">open source</a> service. <a href="https://snarfed.org/2023-11-27_re-introducing-bridgy-fed">More background here.</a> <a href="mailto:feedback@brid.gy">Feedback</a> and <a href="https://github.com/snarfed/bridgy-fed/issues">bug reports</a> are welcome!</a></p>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue