diff --git a/static/styles.css b/static/styles.css index ed9f0f5..bad8278 100644 --- a/static/styles.css +++ b/static/styles.css @@ -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 { diff --git a/static/styles.scss b/static/styles.scss index c7a1674..1179dce 100644 --- a/static/styles.scss +++ b/static/styles.scss @@ -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; } diff --git a/templates/head_common.html b/templates/head_common.html index 70fb37a..b9511d4 100644 --- a/templates/head_common.html +++ b/templates/head_common.html @@ -1,2 +1,2 @@ - + diff --git a/templates/homepage.html b/templates/homepage.html index d97b795..5d508ef 100644 --- a/templates/homepage.html +++ b/templates/homepage.html @@ -16,23 +16,25 @@

What is Njump?

-

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.

+

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. The typical use of njump is to share a resource outside the nostr world (clients), where the nostr: schema is not (yet) active.

Njump currently lives under njump.me, you can reach it appending a nostr (NIP-19) entity (npub, nevent, naddr, etc) after the domain: njump.me/p/<nip-19-entity>
For example a user profile, a note or a long blog post

- -

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.

Try it now, jump to a nostr content

- +
njump.me/
+ +
+ +

There are several reasons to prefer njump to share a nostr resource, versus other web clients, let's see them.

Clean, fast and solid

@@ -46,7 +48,7 @@

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.

-

Search engine friendly (jump-in)

+

Search friendly (jump-in)

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.

@@ -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! -

Bonus 2: relays

+

Bonus 2: Relays view

You can have a view of the last content posted to a relay using njump.me/r/<relay-host>, example: https://njump.me/r/nostr.wine - Some basic infos (NIP-11) 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 (NIP-11) 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.

Bonus 3: Inspector tool