mirror of
https://github.com/aljazceru/njump.git
synced 2026-01-31 11:44:34 +01:00
tailwind stuff in the headers of each page template.
This commit is contained in:
fiatjaf
@@ -270,7 +270,7 @@ func renderEvent(w http.ResponseWriter, r *http.Request) {
|
||||
err = OtherTemplate.Render(w, &OtherPage{
|
||||
HeadCommonPartial: HeadCommonPartial{IsProfile: false},
|
||||
DetailsPartial: DetailsPartial{
|
||||
HideDetails: true,
|
||||
HideDetails: false,
|
||||
CreatedAt: data.createdAt,
|
||||
KindDescription: data.kindDescription,
|
||||
KindNIP: data.kindNIP,
|
||||
|
||||
@@ -37,57 +37,6 @@ body {
|
||||
color: #000000 !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
body.lock {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-weight: 300;
|
||||
line-height: 1.1em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.theme--default h2 {
|
||||
color: #e32a6d;
|
||||
}
|
||||
.theme--dark h2 {
|
||||
color: #e32a6d;
|
||||
}
|
||||
|
||||
.theme--default a {
|
||||
color: #373737;
|
||||
}
|
||||
.theme--dark a {
|
||||
color: #fafafa;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0.5em;
|
||||
text-align: justify;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
p {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
iframe {
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.h {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.background {
|
||||
position: fixed;
|
||||
@@ -216,33 +165,6 @@ iframe {
|
||||
margin-top: 0rem;
|
||||
}
|
||||
}
|
||||
.columnA .info-wrapper {
|
||||
display: none;
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 0.6em;
|
||||
text-align: center;
|
||||
}
|
||||
.columnA .info-wrapper .display {
|
||||
display: block;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.theme--default .columnA .info-wrapper .display {
|
||||
color: #c9c9c9;
|
||||
}
|
||||
.theme--dark .columnA .info-wrapper .display {
|
||||
color: #969696;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.columnA .info-wrapper {
|
||||
display: block;
|
||||
text-align: left;
|
||||
margin-bottom: 0;
|
||||
flex-basis: 64%;
|
||||
max-width: 64%;
|
||||
overflow: hidden;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
.columnA .last_update {
|
||||
font-size: 0.8em;
|
||||
margin-top: 0.5rem;
|
||||
@@ -265,32 +187,6 @@ iframe {
|
||||
flex-shrink: 0;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.column_content .info-wrapper {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.column_content .info-wrapper h1 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.theme--default .column_content .info-wrapper .display {
|
||||
color: #c9c9c9;
|
||||
}
|
||||
.theme--dark .column_content .info-wrapper .display {
|
||||
color: #969696;
|
||||
}
|
||||
.column_content .info-wrapper .npub {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.theme--default .column_content .info-wrapper .npub {
|
||||
color: #c9c9c9;
|
||||
}
|
||||
.theme--dark .column_content .info-wrapper .npub {
|
||||
color: #969696;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.column_content .info-wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.column_content .separator {
|
||||
height: 6px;
|
||||
width: 30%;
|
||||
@@ -549,16 +445,6 @@ iframe {
|
||||
.theme--dark .column_content .field.last_notes a.note .header .is_reply {
|
||||
color: #969696;
|
||||
}
|
||||
.column_content .field.last_notes a.note .content {
|
||||
flex-basis: 100%;
|
||||
margin-top: 0.2rem;
|
||||
max-height: 160px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.column_content .field.last_notes a.note .content.gradient {
|
||||
-webkit-mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
|
||||
mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
|
||||
}
|
||||
.column_content .field.last_notes a:hover {
|
||||
padding-left: 1rem;
|
||||
margin-left: -1.5rem;
|
||||
@@ -659,13 +545,6 @@ iframe {
|
||||
border-bottom: 1px solid rgba(250, 250, 250, 0.24);
|
||||
padding-bottom: 0.1rem;
|
||||
}
|
||||
.column_content .field.content, .column_content .field.about {
|
||||
line-height: 1.4rem;
|
||||
}
|
||||
.column_content .field.content img, .column_content .field.about img {
|
||||
max-width: 100%;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.column_content .field .json {
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
font-size: 0.9rem;
|
||||
@@ -930,31 +809,6 @@ body.other .column_content .profile_intro a {
|
||||
margin-bottom: -0.5rem;
|
||||
}
|
||||
}
|
||||
body.note .column_content .profile_intro .info-wrapper,
|
||||
body.other .column_content .profile_intro .info-wrapper {
|
||||
flex-grow: 1;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
body.note .column_content .profile_intro .info-wrapper,
|
||||
body.other .column_content .profile_intro .info-wrapper {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@media print {
|
||||
body.note .column_content .profile_intro .info-wrapper,
|
||||
body.other .column_content .profile_intro .info-wrapper {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
body.note .column_content .profile_intro .info-wrapper .name,
|
||||
body.note .column_content .profile_intro .info-wrapper .npub,
|
||||
body.other .column_content .profile_intro .info-wrapper .name,
|
||||
body.other .column_content .profile_intro .info-wrapper .npub {
|
||||
display: block-inline;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
body.note .column_content .published_at,
|
||||
body.note .column_content .reply_of,
|
||||
body.other .column_content .published_at,
|
||||
@@ -993,16 +847,6 @@ body.other .column_content .reply_of {
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 2rem;
|
||||
color: #9a9a9a;
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
}
|
||||
.footer a {
|
||||
color: #9a9a9a;
|
||||
}
|
||||
|
||||
@media print {
|
||||
@page {
|
||||
margin: 2cm 3cm;
|
||||
|
||||
@@ -116,45 +116,6 @@ body {
|
||||
margin: 0;
|
||||
color: #000000 !important;
|
||||
}
|
||||
&.lock {
|
||||
@media (max-width: 580px) {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-weight: 300;
|
||||
line-height: 1.1em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
h2 {
|
||||
@include themed() {
|
||||
color: t($accent1);
|
||||
}
|
||||
}
|
||||
a {
|
||||
@include themed() {
|
||||
color: t($base7);
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin-top: 0.5em;
|
||||
text-align: justify;
|
||||
@media (max-width: 580px) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
@media (max-width: 580px) {
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
.h {
|
||||
display: none;
|
||||
}
|
||||
.background {
|
||||
position: fixed;
|
||||
@@ -262,28 +223,6 @@ iframe {
|
||||
align-items: center;
|
||||
margin-top: 0rem;
|
||||
}
|
||||
.info-wrapper {
|
||||
display: none;
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 0.6em;
|
||||
text-align: center;
|
||||
.display {
|
||||
display: block;
|
||||
font-size: 1.2rem;
|
||||
@include themed() {
|
||||
color: t($base4);
|
||||
}
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
display: block;
|
||||
text-align: left;
|
||||
margin-bottom: 0;
|
||||
flex-basis: 64%;
|
||||
max-width: 64%;
|
||||
overflow: hidden;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
.last_update {
|
||||
font-size: 0.8em;
|
||||
margin-top: 0.5rem;
|
||||
@@ -302,26 +241,6 @@ iframe {
|
||||
flex-shrink: 0;
|
||||
word-wrap: break-word;
|
||||
|
||||
.info-wrapper {
|
||||
font-size: 1.6rem;
|
||||
h1 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.display {
|
||||
@include themed() {
|
||||
color: t($base4);
|
||||
}
|
||||
}
|
||||
.npub {
|
||||
font-size: 1rem;
|
||||
@include themed() {
|
||||
color: t($base4);
|
||||
}
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.separator {
|
||||
height: 6px;
|
||||
width: 30%;
|
||||
@@ -517,24 +436,6 @@ iframe {
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
flex-basis: 100%;
|
||||
margin-top: 0.2rem;
|
||||
max-height: 160px;
|
||||
overflow: hidden;
|
||||
&.gradient {
|
||||
-webkit-mask-image: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 1) 50%,
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
);
|
||||
mask-image: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 1) 50%,
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
a:hover {
|
||||
@@ -619,14 +520,6 @@ iframe {
|
||||
}
|
||||
}
|
||||
}
|
||||
&.content,
|
||||
&.about {
|
||||
line-height: 1.4rem;
|
||||
img {
|
||||
max-width: 100%;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
.json {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 0.9rem;
|
||||
@@ -848,22 +741,6 @@ body.other {
|
||||
margin-bottom: -0.5rem;
|
||||
}
|
||||
}
|
||||
.info-wrapper {
|
||||
flex-grow: 1;
|
||||
@media (max-width: 580px) {
|
||||
display: block;
|
||||
}
|
||||
@media print {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.name,
|
||||
.npub {
|
||||
@media (max-width: 580px) {
|
||||
display: block-inline;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.published_at,
|
||||
.reply_of {
|
||||
@@ -886,16 +763,6 @@ body.other {
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 2rem;
|
||||
color: $color-base5;
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
a {
|
||||
color: $color-base5;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
@page {
|
||||
margin: 2cm 3cm;
|
||||
|
||||
@@ -17,22 +17,18 @@
|
||||
class="flex w-full sm:w-9/12 px-4 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
|
||||
>
|
||||
<div class="column columnA">
|
||||
<div class="info-wrapper">
|
||||
{{.Title}}
|
||||
<span class="display"> </span>
|
||||
</div>
|
||||
<div class="text-2xl">{{.Title}}</div>
|
||||
</div>
|
||||
|
||||
<div class="column column_content">
|
||||
<div class="field info-wrapper">
|
||||
<h1 class="name">{{.Title}}</h1>
|
||||
<div class="field">
|
||||
<h1 class="text-xl">{{.Title}}</h1>
|
||||
</div>
|
||||
<div class="field separator long"></div>
|
||||
|
||||
<div class="field last_notes">
|
||||
{{range $element := .Data }}
|
||||
<a href="/{{$.PathPrefix}}{{$element}}" class="note">
|
||||
<div class="content">{{$element}}</div>
|
||||
<div>{{$element}}</div>
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<aside
|
||||
class="column column_clients"
|
||||
_="on click toggle .up on .column_clients then toggle .lock on <body />"
|
||||
_="on click toggle .up on .column_clients then toggle .overflow-hidden on <body />"
|
||||
>
|
||||
<div class="title">
|
||||
<span class="text">Open in</span>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
{{ if .HideDetails }}
|
||||
<div
|
||||
class="field advanced-switch-wrapper"
|
||||
_="on load make a URLSearchParams from location.search then get it.get('details') then if it is 'yes' add @checked to #advanced-switch then add .visible to .advanced"
|
||||
@@ -10,6 +11,7 @@
|
||||
<label for="advanced-switch">X</label>
|
||||
<label for="advanced-switch">Show more details</label>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<div class="field {{if .HideDetails}}advanced{{end}}">
|
||||
<div class="label">Published at</div>
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
<div class="background"></div>
|
||||
|
||||
<footer class="footer mb-4">
|
||||
powered by <a href="https://github.com/fiatjaf/njump">njump</a>
|
||||
<footer class="mb-4 mt-6 text-gray-400 text-sm text-center">
|
||||
powered by
|
||||
<a class="underline text-gray-400" href="https://github.com/fiatjaf/njump"
|
||||
>njump</a
|
||||
>
|
||||
</footer>
|
||||
|
||||
<svg width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
@@ -54,7 +54,18 @@
|
||||
strongpink: '#e32a6d',
|
||||
crimson: '#bc1150',
|
||||
garnet: '#42091e'
|
||||
}
|
||||
},
|
||||
typography: ({theme}) => ({
|
||||
/* for markdown html content */
|
||||
DEFAULT: {
|
||||
css: {
|
||||
'--tw-prose-headings': theme('colors.strongpink'),
|
||||
'--tw-prose-invert-headings': theme('colors.strongpink'),
|
||||
'--tw-prose-links': theme('colors.gray[700]'),
|
||||
'--tw-prose-invert-links': theme('colors.neutral[50]')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -64,11 +75,16 @@
|
||||
.imgclip {
|
||||
clip-path: url(#svg-shape);
|
||||
}
|
||||
.gradient {
|
||||
mask-image: linear-gradient(
|
||||
to bottom,
|
||||
rgb(0, 0, 0) 50%,
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/hyperscript">
|
||||
on load get [navigator.userAgent.includes('Safari'), navigator.userAgent.includes('Chrome')] then if it[0] is true and it[1] is false add .safari to <body /> end
|
||||
|
||||
on load repeat for div in .content if div's offsetHeight == 160 add .gradient to it end end
|
||||
</script>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
class="flex w-full sm:w-9/12 px-4 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
|
||||
>
|
||||
<div>
|
||||
<h2 class="text-2xl">What is njump?</h2>
|
||||
<h2 class="text-strongpink text-2xl">What is njump?</h2>
|
||||
|
||||
<p class="leading-5 my-3">
|
||||
<i>njump</i> is a HTTP
|
||||
@@ -66,7 +66,9 @@
|
||||
>.
|
||||
</p>
|
||||
|
||||
<h2 class="text-xl">Try it now, jump to some Nostr content</h2>
|
||||
<h2 class="text-strongpink text-xl">
|
||||
Try it now, jump to some Nostr content
|
||||
</h2>
|
||||
|
||||
<div
|
||||
class="my-3 mb-8 p-4 pb-3 sm:p-6 sm:pb-4 rounded-lg bg-zinc-100 dark:bg-neutral-800"
|
||||
@@ -102,7 +104,7 @@
|
||||
content outside of Nostr:
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl">Clean, fast and solid</h2>
|
||||
<h2 class="text-strongpink text-2xl">Clean, fast and solid</h2>
|
||||
<p class="leading-5 my-3">
|
||||
Pages by <i>njump</i> are extremely lightweight and fast to load
|
||||
because there isn't any client side javascript involved; they are
|
||||
@@ -113,7 +115,7 @@
|
||||
onboard new users!
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl">Good preview</h2>
|
||||
<h2 class="text-strongpink text-2xl">Good preview</h2>
|
||||
<p class="leading-5 my-3">
|
||||
<i>njump</i> renders everything on the server-side, so it is able to
|
||||
generate useful rich previews that work on Telegram, Discord,
|
||||
@@ -127,7 +129,7 @@
|
||||
for printing or exporting to PDF.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl">Cooperative (jump-out)</h2>
|
||||
<h2 class="text-strongpink text-2xl">Cooperative (jump-out)</h2>
|
||||
<p class="leading-5 my-3">
|
||||
<i>njump</i> is not interested capturing users at all, on the
|
||||
contrary it invites them to "jump" to the Nostr resource by picking
|
||||
@@ -144,7 +146,7 @@
|
||||
support coming!
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl">Search friendly (jump-in)</h2>
|
||||
<h2 class="text-strongpink text-2xl">Search friendly (jump-in)</h2>
|
||||
<p class="leading-5 my-3">
|
||||
This is crucial: <i>njump</i> pages are static so search engines can
|
||||
index them, this means that <i>njump</i> can help others to discover
|
||||
@@ -154,7 +156,7 @@
|
||||
you also help Nostr flourish.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl">Share NIP-05 profiles</h2>
|
||||
<h2 class="text-strongpink text-2xl">Share NIP-05 profiles</h2>
|
||||
<p class="leading-5 my-3">
|
||||
Now you can share your own profile with a pretty
|
||||
<a
|
||||
@@ -177,7 +179,9 @@
|
||||
and the last notes.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl">Share on Twitter and Telegram</h2>
|
||||
<h2 class="text-strongpink text-2xl">
|
||||
Share on Twitter and Telegram
|
||||
</h2>
|
||||
<p class="leading-5 my-3">
|
||||
Now you can quickly and effortlessly share Nostr notes on Twitter
|
||||
and Telegram, and maybe on many other "social platforms": just drop
|
||||
@@ -187,7 +191,7 @@
|
||||
in-app!
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl">Relays view</h2>
|
||||
<h2 class="text-strongpink text-2xl">Relays view</h2>
|
||||
<p class="leading-5 my-3">
|
||||
You can have a view of the last content posted to a relay using
|
||||
<span class="rounded px-1 bg-lavender dark:bg-garnet"
|
||||
@@ -206,7 +210,7 @@
|
||||
to join a relay.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl">Inspector tool</h2>
|
||||
<h2 class="text-strongpink text-2xl">Inspector tool</h2>
|
||||
<p class="leading-5 my-3">
|
||||
You know, we are all programmers, including our moms, so for every
|
||||
<i>njump</i> page you can toggle the "Show more details" switch and
|
||||
|
||||
@@ -55,29 +55,34 @@
|
||||
<body class="note">
|
||||
{{template "top" .}}
|
||||
|
||||
<div
|
||||
class="block sm:flex sm:justify-center sm:items-center mx-auto px-4 sm:px-0"
|
||||
>
|
||||
<div class="sm:flex sm:justify-center sm:items-center mx-auto px-4 sm:px-0">
|
||||
<div
|
||||
class="flex w-full sm:w-9/12 px-4 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
|
||||
class="sm:flex w-full sm:w-9/12 px-4 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
|
||||
>
|
||||
<div class="column column_content">
|
||||
<header class="profile_intro">
|
||||
<a href="/{{.Npub}}">
|
||||
<header class="max-w-full mb-4">
|
||||
<a class="flex items-center flex-wrap" href="/{{.Npub}}">
|
||||
<div
|
||||
class="mr-2 sm:mr-4 basis-2/5 sm:basis-1/6 print:basis-1-12 max-w-full imgclip overflow-hidden"
|
||||
class="mr-2 sm:mr-4 basis-1/6 print:basis-1-12 max-w-full imgclip overflow-hidden"
|
||||
>
|
||||
<img class="block w-full h-auto" src="{{.Metadata.Picture}}" />
|
||||
</div>
|
||||
<div class="info-wrapper">
|
||||
<div class="name">
|
||||
<div class="block sm:grow print:text-base">
|
||||
<div class="text-sm sm:text-2xl">
|
||||
{{.Metadata.Name}}
|
||||
<!---->
|
||||
{{if not (eq .Metadata.Name .Metadata.DisplayName)}}
|
||||
<span class="display">{{.Metadata.DisplayName}}</span>
|
||||
<span
|
||||
class="text-sm sm:text-xl text-neutral-300 dark:text-slate-400"
|
||||
>{{.Metadata.DisplayName}}</span
|
||||
>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="npub">{{.NpubShort}}</div>
|
||||
<div
|
||||
class="text-sm sm:text-base text-neutral-300 dark:text-slate-400"
|
||||
>
|
||||
{{.NpubShort}}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</header>
|
||||
@@ -90,11 +95,13 @@
|
||||
|
||||
<div class="field separator"></div>
|
||||
|
||||
<article class="field content">
|
||||
<article
|
||||
class="field | prose dark:prose-invert sm:prose-a:text-justify prose-headings:font-light;"
|
||||
>
|
||||
{{ if (not (eq "" .Subject))}}
|
||||
<h1>{{.Subject}}</h1>
|
||||
<h1 class="text-2xl">{{.Subject}}</h1>
|
||||
{{ else }}
|
||||
<h1 class="h">
|
||||
<h1 class="hidden">
|
||||
{{.Metadata.Name}} on Nostr: {{.TitleizedContent}}
|
||||
</h1>
|
||||
{{ end }}
|
||||
|
||||
@@ -22,10 +22,8 @@
|
||||
class="flex w-full sm:w-9/12 px-4 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
|
||||
>
|
||||
<div class="column column_content">
|
||||
<header class="profile_intro">
|
||||
<div class="info-wrapper">
|
||||
<div class="kind_desc">{{.KindDescription}}</div>
|
||||
</div>
|
||||
<header class="">
|
||||
<div class="text-2xl mb-4">{{.KindDescription}}</div>
|
||||
</header>
|
||||
|
||||
<div class="field separator"></div>
|
||||
|
||||
@@ -31,21 +31,21 @@
|
||||
<body class="profile">
|
||||
{{template "top" .}}
|
||||
|
||||
<div
|
||||
class="block sm:flex sm:justify-center sm:items-center mx-auto px-4 sm:px-0"
|
||||
>
|
||||
<div class="sm:flex sm:justify-center sm:items-center mx-auto px-4 sm:px-0">
|
||||
<div
|
||||
class="flex w-full sm:w-9/12 px-4 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
|
||||
class="w-full sm:flex sm:w-9/12 sm:px-4 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
|
||||
>
|
||||
<header class="column columnA">
|
||||
<div
|
||||
class="info-wrapper"
|
||||
_="on scroll from window get #profile_name then measure its top, height then if top is less than height / -2 set my *display to 'block' otherwise set my *display to 'none' end"
|
||||
class="text-left basis-2/3 overflow-hidden hidden flex items-center"
|
||||
_="on load or scroll from window or resize from window get #profile_name then measure its top, height then if top is less than height / -2 or height is 0 add .flex then remove .hidden otherwise remove .flex then add .hidden"
|
||||
>
|
||||
<div class="name">
|
||||
{{.Metadata.Name}} {{if not (eq .Metadata.Name
|
||||
.Metadata.DisplayName)}}
|
||||
<span class="display">{{.Metadata.DisplayName}}</span>
|
||||
<div>
|
||||
<div class="text-2xl">{{.Metadata.Name}}</div>
|
||||
{{if not (eq .Metadata.Name .Metadata.DisplayName)}}
|
||||
<div class="text-xl text-neutral-300 dark:text-slate-400">
|
||||
{{.Metadata.DisplayName}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
@@ -57,11 +57,13 @@
|
||||
</header>
|
||||
|
||||
<div class="column column_content">
|
||||
<header class="field info-wrapper">
|
||||
<h1 id="profile_name" class="name">
|
||||
{{.Metadata.Name}} {{if not (eq .Metadata.Name
|
||||
.Metadata.DisplayName)}}
|
||||
<span class="display">{{.Metadata.DisplayName}}</span>
|
||||
<header class="field hidden sm:flex sm:items-center">
|
||||
<h1>
|
||||
<div id="profile_name" class="text-2xl">{{.Metadata.Name}}</div>
|
||||
{{if not (eq .Metadata.Name .Metadata.DisplayName)}}
|
||||
<div class="text-xl text-neutral-300 dark:text-slate-400">
|
||||
{{.Metadata.DisplayName}}
|
||||
</div>
|
||||
{{end}}
|
||||
</h1>
|
||||
</header>
|
||||
@@ -105,7 +107,7 @@
|
||||
{{if not (eq 0 (len .LastNotes))}}
|
||||
<div class="field separator"></div>
|
||||
<nav class="field last_notes">
|
||||
<h2>Last Notes</h2>
|
||||
<h2 class="text-strongpink text-2xl">Last Notes</h2>
|
||||
{{range $i, $ee := .LastNotes}}
|
||||
<a href="/{{$ee.Nevent}}" class="note">
|
||||
<div class="header">
|
||||
@@ -114,7 +116,12 @@
|
||||
<div class="is_reply">- reply</div>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="content">{{$ee.Preview}}</div>
|
||||
<div
|
||||
class="basis-full max-h-40 overflow-hidden mt-0.5"
|
||||
_="on load if my scrollHeight > my offsetHeight add .gradient"
|
||||
>
|
||||
{{$ee.Preview}}
|
||||
</div>
|
||||
</a>
|
||||
{{end}}
|
||||
</nav>
|
||||
|
||||
@@ -28,16 +28,16 @@
|
||||
<body class="profile">
|
||||
{{template "top" .}}
|
||||
|
||||
<div
|
||||
class="block sm:flex sm:justify-center sm:items-center mx-auto px-4 sm:px-0"
|
||||
>
|
||||
<div class="sm:flex sm:justify-center sm:items-center mx-auto px-4 sm:px-0">
|
||||
<div
|
||||
class="flex w-full sm:w-9/12 px-4 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
|
||||
class="sm:flex w-full sm:w-9/12 px-4 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
|
||||
>
|
||||
<div class="column columnA">
|
||||
<div class="info-wrapper">
|
||||
<div
|
||||
class="text-left basis-2/3 overflow-hidden hidden flex items-center text-2xl sm:break-all"
|
||||
_="on load or scroll from window or resize from window get #relay_name then measure its top, height then if top is less than height / -2 or height is 0 add .flex then remove .hidden otherwise remove .flex then add .hidden"
|
||||
>
|
||||
{{.Info.Name}}
|
||||
<span class="display"> </span>
|
||||
</div>
|
||||
<div
|
||||
class="max-w-full imgclip overflow-hidden basis-2/5 sm:basis-auto"
|
||||
@@ -47,11 +47,13 @@
|
||||
</div>
|
||||
|
||||
<div class="column column_content">
|
||||
<div class="field info-wrapper">
|
||||
<h1 class="name">{{.Info.Name}}</h1>
|
||||
</div>
|
||||
<div class="field separator long"></div>
|
||||
<header class="field hidden sm:flex sm:items-center">
|
||||
<h1>
|
||||
<div id="relay_name" class="text-2xl">{{.Info.Name}}</div>
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<div class="field separator long"></div>
|
||||
<div class="field">wss://{{.Hostname}}</div>
|
||||
<div class="field about">{{.Info.Description}}</div>
|
||||
<div class="field separator long"></div>
|
||||
@@ -73,7 +75,7 @@
|
||||
<div class="field separator"></div>
|
||||
|
||||
<div class="field last_notes">
|
||||
<h2>Last Notes</h2>
|
||||
<h2 class="text-strongpink text-2xl">Last Notes</h2>
|
||||
{{range $i, $ee := .LastNotes}}
|
||||
<a href="/{{$ee.Nevent}}" class="note">
|
||||
<div class="header">
|
||||
@@ -86,7 +88,12 @@
|
||||
by <span href="/{{$ee.Npub}}">{{$ee.NpubShort}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">{{$ee.Preview}}</div>
|
||||
<div
|
||||
class="basis-full max-h-40 overflow-hidden mt-0.5"
|
||||
_="on load if my scrollHeight >= my offsetHeight add .gradient"
|
||||
>
|
||||
{{$ee.Preview}}
|
||||
</div>
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user