aljaz/njump
1
0
Fork 0
mirror of https://github.com/aljazceru/njump.git synced 2026-02-20 21:44:32 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve homepage usability and styles

Browse Source
This commit is contained in:
Daniele Tonon
2023-09-11 15:49:04 +02:00
parent 67599a696f
commit 987932eb46
4 changed files with 106 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
static/styles.css
View File

@@ -251,7 +251,8 @@ iframe {
}
}
.container .try {
padding: 2rem 2rem 1.4rem 2rem;
padding: 1.6rem 1.6rem 1rem 1.6rem;
margin-bottom: 2rem;
border-radius: 8px;
font-size: 0.8rem;
}
@@ -268,22 +269,52 @@ iframe {
}
.container .try .tryForm {
display: flex;
align-items: center;
}
@media (max-width: 580px) {
.container .try .tryForm {
flex-wrap: wrap;
justify-content: center;
}
}
.container .try .tryForm input, .container .try .tryForm button {
font-size: 1.2rem;
padding: 0.5rem;
flex-basis: 90%;
width: 100%;
padding: 0.5rem;
font-size: 1.2rem;
border-radius: 8px;
}
@media (max-width: 580px) {
.container .try .tryForm input, .container .try .tryForm button {
flex-basis: 100%;
}
}
.container .try .tryForm div {
font-size: 1.4rem;
}
@media (max-width: 580px) {
.container .try .tryForm div {
margin-bottom: 0.4rem;
}
}
.container .try .tryForm input {
margin-left: 0.3rem;
}
.theme--default .container .try .tryForm input {
color: #373737;
background-color: #ffffff;
border: 1px solid #c9c9c9;
border: none;
}
.theme--dark .container .try .tryForm input {
color: #fafafa;
background-color: #1e1e1e;
border: 1px solid #969696;
border: none;
}
@media (max-width: 580px) {
.container .try .tryForm input {
margin-left: 0;
border-radius: 8px 8px 0px 0px;
}
}
.container .try .tryForm input:focus {
outline: none; /* Remove the default outline */
@@ -296,24 +327,33 @@ iframe {
}
.container .try .tryForm button {
flex-basis: 10%;
color: #ffffff;
border: none;
margin-left: -16px;
}
.theme--default .container .try .tryForm button {
background-color: #e32a6d;
color: #ffffff;
border: none;
margin-left: -16px;
}
.theme--dark .container .try .tryForm button {
background-color: #e32a6d;
color: #ffffff;
border: none;
margin-left: -16px;
}
@media (max-width: 580px) {
.container .try .tryForm button {
flex-basis: 100%;
margin-left: 0px;
border-radius: 0px 0px 8px 8px;
}
}
.container .try #pickRandomEntityLink {
display: block;
padding-left: 0.4rem;
margin-top: 0.2rem;
}
@media (max-width: 580px) {
.container .try #pickRandomEntityLink {
margin-top: 0.8rem;
text-align: center;
}
}
.container .columnA {
position: -webkit-sticky;
position: sticky;
@@ -962,15 +1002,14 @@ body.homepage .container_wrapper .container {
}
}
body.homepage .container_wrapper .container span.exampleUrl {
color: #ffffff;
padding: 0 0.4rem;
padding: 0 0.2rem;
border-radius: 4px;
}
.theme--default body.homepage .container_wrapper .container span.exampleUrl {
background-color: #e32a6d;
background-color: #fdf0f5;
}
.theme--dark body.homepage .container_wrapper .container span.exampleUrl {
background-color: #e32a6d;
background-color: #42091e;
}
body.profile .column_content {

52
static/styles.scss
View File

@@ -294,7 +294,8 @@ iframe {
@include themed() {
background-color: t($over-bg);
}
padding: 2rem 2rem 1.4rem 2rem;
padding: 1.6rem 1.6rem 1rem 1.6rem;
margin-bottom: 2rem;
border-radius: 8px;
font-size: 0.8rem;
@media (max-width: 580px) {
@@ -302,17 +303,39 @@ iframe {
}
.tryForm {
display: flex;
align-items: center;
@media (max-width: 580px) {
flex-wrap: wrap;
justify-content: center;
}
input, button {
font-size: 1.2rem;
padding: 0.5rem;
flex-basis: 90%;
width: 100%;
padding: 0.5rem;
font-size: 1.2rem;
border-radius: 8px;
@media (max-width: 580px) {
flex-basis: 100%;
}
}
div {
font-size: 1.4rem;
@media (max-width: 580px) {
margin-bottom: 0.4rem;
}
}
input {
@include themed() {
color: t($base7);
background-color: t($bg-up);
border: 1px solid t($base4);
// border: 1px solid t($base4);
border: none;
}
margin-left: 0.3rem;
@media (max-width: 580px) {
margin-left: 0;
border-radius: 8px 8px 0px 0px;
}
&:focus {
outline: none; /* Remove the default outline */
@@ -327,16 +350,24 @@ iframe {
flex-basis: 10%;
@include themed() {
background-color: t($accent1);
color: $color-base1;
border: none;
margin-left: -16px;
}
color: $color-base1;
border: none;
margin-left: -16px;
@media (max-width: 580px) {
flex-basis: 100%;
margin-left: 0px;
border-radius: 0px 0px 8px 8px;
}
}
}
#pickRandomEntityLink {
display: block;
padding-left: 0.4rem;
margin-top: 0.2rem;
@media (max-width: 580px) {
margin-top: 0.8rem;
text-align: center;
}
}
}
@@ -872,10 +903,9 @@ body.homepage {
span.exampleUrl {
@include themed() {
background-color: t($accent1);
background-color: t($hrefbg);
}
color: $color-base1;
padding: 0 0.4rem;
padding: 0 0.2rem;
border-radius: 4px;
}

2
templates/head_common.html
View File

@@ -1,2 +1,2 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/njump/static/styles.css?v=20230911" />
<link rel="stylesheet" href="/njump/static/styles.css?v=20230911b" />

16
templates/homepage.html
View File

@@ -16,23 +16,25 @@
<div>
<h2>What is Njump?</h2>
<p>Njump is a static Nostr gateway that allows you to browse profiles, notes and relays; it is an easy way to preview a resource and then open it with the preferred client.</p>
<p>Njump is a static <a href="https://github.com/nostr-protocol/nostr">Nostr</a> gateway that allows you to browse profiles, notes and relays; it is an easy way to preview a resource and then open it with the preferred client. The typical use of njump is to share a resource outside the nostr world (clients), where the nostr: schema is not (yet) active.</p>
<p>Njump currently lives under njump.me, you can reach it appending a nostr (<a href="https://github.com/nostr-protocol/nips/blob/master/19.md">NIP-19</a>) entity (npub, nevent, naddr, etc) after the domain: <span class="exampleUrl">njump.me/p/&lt;nip-19-entity&gt;</span><br/>
For example <a href='https://njump.me/npub180cvv07tjdrrgpa0j7j7tmnyl2yr6yr7l8j4s3evf6u64th6gkwsyjh6w6'>a user</a> <a href="https://njump.me/npub10000003zmk89narqpczy4ff6rnuht2wu05na7kpnh3mak7z2tqzsv8vwqk">profile</a>, <a href='https://njump.me/nevent1qqs860kwt3m500hfnve6vxdpagkfqkm6hq03dnn2n7u8dev580kd2uszyztuwzjyxe4x2dwpgken87tna2rdlhpd02va5cvvgrrywpddnr3jydc2w4t'>a note</a> or a <a href='https://njump.me/naddr1qqxnzd3cxqmrzv3exgmr2wfeqy08wumn8ghj7mn0wd68yttsw43zuam9d3kx7unyv4ezumn9wshszyrhwden5te0dehhxarj9ekk7mf0qy88wumn8ghj7mn0wvhxcmmv9uq3zamnwvaz7tmwdaehgu3wwa5kuef0qy2hwumn8ghj7un9d3shjtnwdaehgu3wvfnj7q3qdergggklka99wwrs92yz8wdjs952h2ux2ha2ed598ngwu9w7a6fsxpqqqp65wy2vhhv'>long blog post</a></p>
<p>The typical use of njump is to share a resource outside the nostr world (clients), where the nostr: schema is not (yet) active. There are several reasons to prefer njump to share a nostr resource, versus other web clients, let's see them.</p>
<h2>Try it now, jump to a nostr content</h2>
<div class="try">
<form action="/try" method="POST">
<div class="tryForm">
<input id="nip19entity" name="nip19entity" type="text" placeholder="Paste a npub / nprofile / nevent / ..." autofocus /><button>GO</button>
<div>njump.me/</div>
<input id="nip19entity" name="nip19entity" type="text" placeholder="paste a npub / nprofile / nevent / ..." autofocus />
<button>VIEW</button>
</div>
</form>
<div id="pickRandomEntityLink">or pick a <a href="#">random content</a></div>
</div>
<p>There are several reasons to prefer njump to share a nostr resource, versus other web clients, let's see them.</p>
<h2>Clean, fast and solid</h2>
@@ -46,7 +48,7 @@
<p>Njump is not interested into "capture" users at all, on the contrary it invites them to "jump" to the nostr resource with one of the proposed clients. It even remembers the most used one and put it on the top for fast click/tap.</p>
<h2>Search engine friendly (jump-in)</h2>
<h2>Search friendly (jump-in)</h2>
<p>This is crucial: njump pages are static so search engines can index them, these means that njump can help others to discover great content on nostr, jump in and join us! Njump is the only nostr resource that has this explicit goal, if you care that a good note could be found online use njump to share it, this way you also help nostr flourish.</p>
@@ -56,10 +58,10 @@
A profile shows the basic metadata infos, the used "outbox" relays (Gossip model) and the last notes.
Of course profiles are also static, fast and indexable, so start to promote your nostr presence this way!
<h2>Bonus 2: relays</h2>
<h2>Bonus 2: Relays view</h2>
You can have a view of the last content posted to a relay using <span class="exampleUrl">njump.me/r/&lt;relay-host&gt;</span>, example: <a href="https://njump.me/r/nostr.wine">https://njump.me/r/nostr.wine</a>
Some basic infos (<a href="https://github.com/nostr-protocol/nips/blob/master/11.md">NIP-11</a>) are available; I hope operators will start to make them more personal and informative so users can have a way to evaluate if/when to join a relay.
Some basic infos (<a href="https://github.com/nostr-protocol/nips/blob/master/11.md">NIP-11</a>) are available; We hope operators will start to make them more personal and informative so users can have a way to evaluate if/when to join a relay.
<h2>Bonus 3: Inspector tool</h2>