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 @@
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.
There are several reasons to prefer njump to share a nostr resource, versus other web clients, let's see them.
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.
-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! -