aljaz/njump
1
0
Fork 0
mirror of https://github.com/aljazceru/njump.git synced 2025-12-17 06:14:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

run prettier on web files.

Browse Source
This commit is contained in:
fiatjaf
2023-05-27 08:45:32 -03:00
parent 65a61cdcd6
commit 11e96a0d73
11 changed files with 799 additions and 682 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
static/.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
*.map

165
static/styles.css
View File

@@ -1,4 +1,3 @@
html { html {
font-family: Helvetica, sans-serif; font-family: Helvetica, sans-serif;
font-size: 19px; font-size: 19px;
@@ -18,7 +17,7 @@ body {
color: #373737; color: #373737;
} }
.theme--dark body { .theme--dark body {
color: #FAFAFA; color: #fafafa;
} }
@media (max-width: 580px) { @media (max-width: 580px) {
body.lock { body.lock {
@@ -30,7 +29,7 @@ body {
color: #373737; color: #373737;
} }
.theme--dark a { .theme--dark a {
color: #FAFAFA; color: #fafafa;
} }
.background { .background {
@@ -43,13 +42,13 @@ body {
z-index: -1; z-index: -1;
} }
.theme--default .background { .theme--default .background {
background: #FFFFFF; background: #ffffff;
} }
.theme--dark .background { .theme--dark .background {
background: #1e1e1e; background: #1e1e1e;
} }
.background::after { .background::after {
content: ""; content: '';
position: absolute; position: absolute;
width: 140%; width: 140%;
height: 100%; height: 100%;
@@ -58,7 +57,7 @@ body {
bottom: -40%; bottom: -40%;
} }
.theme--default .background::after { .theme--default .background::after {
background: #FFFFFF; background: #ffffff;
} }
.theme--dark .background::after { .theme--dark .background::after {
background: #181818; background: #181818;
@@ -80,7 +79,7 @@ body {
cursor: pointer; cursor: pointer;
} }
.theme--default .theme-toggle { .theme--default .theme-toggle {
color: #F3F3F3; color: #f3f3f3;
} }
.theme--dark .theme-toggle { .theme--dark .theme-toggle {
color: #9a9a9a; color: #9a9a9a;
@@ -125,10 +124,10 @@ body {
} }
} }
.theme--default .top span { .theme--default .top span {
color: #E32A6D; color: #e32a6d;
} }
.theme--dark .top span { .theme--dark .top span {
color: #E32A6D; color: #e32a6d;
} }
.pic-wrapper { .pic-wrapper {
@@ -209,10 +208,10 @@ body {
font-size: 1.2rem; font-size: 1.2rem;
} }
.theme--default .container .columnA .info-wrapper .display { .theme--default .container .columnA .info-wrapper .display {
color: #C9C9C9; color: #c9c9c9;
} }
.theme--dark .container .columnA .info-wrapper .display { .theme--dark .container .columnA .info-wrapper .display {
color: #C9C9C9; color: #c9c9c9;
} }
} }
.container .columnA .last_update { .container .columnA .last_update {
@@ -221,10 +220,10 @@ body {
text-align: center; text-align: center;
} }
.theme--default .container .columnA .last_update { .theme--default .container .columnA .last_update {
color: #C9C9C9; color: #c9c9c9;
} }
.theme--dark .container .columnA .last_update { .theme--dark .container .columnA .last_update {
color: #C9C9C9; color: #c9c9c9;
} }
@media (max-width: 580px) { @media (max-width: 580px) {
.container .columnA .last_update { .container .columnA .last_update {
@@ -241,19 +240,19 @@ body {
font-size: 1.6rem; font-size: 1.6rem;
} }
.theme--default .container .column_content .info-wrapper .display { .theme--default .container .column_content .info-wrapper .display {
color: #C9C9C9; color: #c9c9c9;
} }
.theme--dark .container .column_content .info-wrapper .display { .theme--dark .container .column_content .info-wrapper .display {
color: #C9C9C9; color: #c9c9c9;
} }
.container .column_content .info-wrapper .npub { .container .column_content .info-wrapper .npub {
font-size: 1rem; font-size: 1rem;
} }
.theme--default .container .column_content .info-wrapper .npub { .theme--default .container .column_content .info-wrapper .npub {
color: #C9C9C9; color: #c9c9c9;
} }
.theme--dark .container .column_content .info-wrapper .npub { .theme--dark .container .column_content .info-wrapper .npub {
color: #C9C9C9; color: #c9c9c9;
} }
@media (max-width: 580px) { @media (max-width: 580px) {
.container .column_content .info-wrapper { .container .column_content .info-wrapper {
@@ -266,7 +265,7 @@ body {
margin-left: -0.6rem; margin-left: -0.6rem;
} }
.theme--default .container .column_content .separator { .theme--default .container .column_content .separator {
background: #F3F3F3; background: #f3f3f3;
} }
.theme--dark .container .column_content .separator { .theme--dark .container .column_content .separator {
background: #232323; background: #232323;
@@ -286,10 +285,10 @@ body {
font-size: 0.8rem; font-size: 0.8rem;
} }
.theme--default .container .column_content .field .label { .theme--default .container .column_content .field .label {
color: #E32A6D; color: #e32a6d;
} }
.theme--dark .container .column_content .field .label { .theme--dark .container .column_content .field .label {
color: #E32A6D; color: #e32a6d;
} }
.container .column_content .field.advanced { .container .column_content .field.advanced {
display: none; display: none;
@@ -303,7 +302,7 @@ body {
margin-right: -1rem; margin-right: -1rem;
} }
.theme--default .container .column_content .field.advanced.boxed { .theme--default .container .column_content .field.advanced.boxed {
background: #F3F3F3; background: #f3f3f3;
} }
.theme--dark .container .column_content .field.advanced.boxed { .theme--dark .container .column_content .field.advanced.boxed {
background: #131313; background: #131313;
@@ -319,7 +318,7 @@ body {
color: #9a9a9a; color: #9a9a9a;
} }
.theme--default .container .column_content .field.advanced.boxed .label { .theme--default .container .column_content .field.advanced.boxed .label {
background: #C9C9C9; background: #c9c9c9;
} }
.theme--dark .container .column_content .field.advanced.boxed .label { .theme--dark .container .column_content .field.advanced.boxed .label {
background: #191919; background: #191919;
@@ -328,7 +327,10 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.container .column_content .field.advanced-switch-wrapper input[type=checkbox] { .container
.column_content
.field.advanced-switch-wrapper
input[type='checkbox'] {
height: 0; height: 0;
width: 0; width: 0;
visibility: hidden; visibility: hidden;
@@ -346,13 +348,19 @@ body {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
@media (max-width: 580px) { @media (max-width: 580px) {
.container .column_content .field.advanced-switch-wrapper label:first-of-type { .container
.column_content
.field.advanced-switch-wrapper
label:first-of-type {
width: 3rem; width: 3rem;
height: 1.4rem; height: 1.4rem;
} }
} }
.container .column_content .field.advanced-switch-wrapper label:first-of-type:after { .container
content: ""; .column_content
.field.advanced-switch-wrapper
label:first-of-type:after {
content: '';
position: absolute; position: absolute;
top: 2px; top: 2px;
left: 2px; left: 2px;
@@ -363,22 +371,42 @@ body {
transition: 0.2s; transition: 0.2s;
} }
@media (max-width: 580px) { @media (max-width: 580px) {
.container .column_content .field.advanced-switch-wrapper label:first-of-type:after { .container
.column_content
.field.advanced-switch-wrapper
label:first-of-type:after {
width: 1.2rem; width: 1.2rem;
height: 1.2rem; height: 1.2rem;
} }
} }
.theme--default .container .column_content .field.advanced-switch-wrapper input:checked + label { .theme--default
background: #E32A6D; .container
.column_content
.field.advanced-switch-wrapper
input:checked
+ label {
background: #e32a6d;
} }
.theme--dark .container .column_content .field.advanced-switch-wrapper input:checked + label { .theme--dark
background: #E32A6D; .container
.column_content
.field.advanced-switch-wrapper
input:checked
+ label {
background: #e32a6d;
} }
.container .column_content .field.advanced-switch-wrapper input:checked + label:first-of-type:after { .container
.column_content
.field.advanced-switch-wrapper
input:checked
+ label:first-of-type:after {
left: calc(100% - 2px); left: calc(100% - 2px);
transform: translateX(-100%); transform: translateX(-100%);
} }
.container .column_content .field.advanced-switch-wrapper label:first-of-type:active:after { .container
.column_content
.field.advanced-switch-wrapper
label:first-of-type:active:after {
width: 2rem; width: 2rem;
} }
.container .column_content .field.content { .container .column_content .field.content {
@@ -388,41 +416,52 @@ body {
max-width: 100%; max-width: 100%;
margin: 1rem 0; margin: 1rem 0;
} }
.container .column_content .field .json, .container .column_content .field .data { .container .column_content .field .json,
.container .column_content .field .data {
white-space: pre-wrap; white-space: pre-wrap;
word-break: break-all; word-break: break-all;
margin-top: 1rem; margin-top: 1rem;
} }
.container .column_content .field .json .key, .container .column_content .field .data .key { .container .column_content .field .json .key,
.container .column_content .field .data .key {
display: inline-block; display: inline-block;
margin-top: 0.5rem; margin-top: 0.5rem;
} }
.theme--default .container .column_content .field .json .key, .theme--default .container .column_content .field .data .key { .theme--default .container .column_content .field .json .key,
color: #E32A6D; .theme--default .container .column_content .field .data .key {
color: #e32a6d;
} }
.theme--dark .container .column_content .field .json .key, .theme--dark .container .column_content .field .data .key { .theme--dark .container .column_content .field .json .key,
color: #E32A6D; .theme--dark .container .column_content .field .data .key {
color: #e32a6d;
} }
.theme--default .container .column_content .field .json .string, .theme--default .container .column_content .field .data .string { .theme--default .container .column_content .field .json .string,
.theme--default .container .column_content .field .data .string {
color: #373737; color: #373737;
} }
.theme--dark .container .column_content .field .json .string, .theme--dark .container .column_content .field .data .string { .theme--dark .container .column_content .field .json .string,
color: #FAFAFA; .theme--dark .container .column_content .field .data .string {
color: #fafafa;
} }
.container .column_content .field .json .number, .container .column_content .field .data .number { .container .column_content .field .json .number,
.container .column_content .field .data .number {
color: darkorange; color: darkorange;
} }
.theme--default .container .column_content .field .json .boolean, .theme--default .container .column_content .field .data .boolean { .theme--default .container .column_content .field .json .boolean,
.theme--default .container .column_content .field .data .boolean {
color: #373737; color: #373737;
} }
.theme--dark .container .column_content .field .json .boolean, .theme--dark .container .column_content .field .data .boolean { .theme--dark .container .column_content .field .json .boolean,
color: #FAFAFA; .theme--dark .container .column_content .field .data .boolean {
color: #fafafa;
} }
.theme--default .container .column_content .field .json .null, .theme--default .container .column_content .field .data .null { .theme--default .container .column_content .field .json .null,
.theme--default .container .column_content .field .data .null {
color: #373737; color: #373737;
} }
.theme--dark .container .column_content .field .json .null, .theme--dark .container .column_content .field .data .null { .theme--dark .container .column_content .field .json .null,
color: #FAFAFA; .theme--dark .container .column_content .field .data .null {
color: #fafafa;
} }
.container .column_content .field.last_update { .container .column_content .field.last_update {
display: none; display: none;
@@ -433,10 +472,10 @@ body {
font-size: 0.8em; font-size: 0.8em;
} }
.theme--default .container .column_content .field.last_update { .theme--default .container .column_content .field.last_update {
color: #C9C9C9; color: #c9c9c9;
} }
.theme--dark .container .column_content .field.last_update { .theme--dark .container .column_content .field.last_update {
color: #C9C9C9; color: #c9c9c9;
} }
} }
.container .column_clients { .container .column_clients {
@@ -463,7 +502,8 @@ body {
margin-bottom: 1rem; margin-bottom: 1rem;
text-align: center; text-align: center;
} }
.container .column_clients .title span.open, .container .column_clients .title span.close { .container .column_clients .title span.open,
.container .column_clients .title span.close {
display: none; display: none;
} }
@media (max-width: 580px) { @media (max-width: 580px) {
@@ -478,10 +518,12 @@ body {
.container .column_clients .title span.text { .container .column_clients .title span.text {
display: none; display: none;
} }
.container .column_clients .title span.open, .container .column_clients .title span.close { .container .column_clients .title span.open,
.container .column_clients .title span.close {
display: inline; display: inline;
} }
.container .column_clients .title span.open svg, .container .column_clients .title span.close svg { .container .column_clients .title span.open svg,
.container .column_clients .title span.close svg {
width: 50%; width: 50%;
height: 50%; height: 50%;
margin: 28% auto auto auto; margin: 28% auto auto auto;
@@ -504,7 +546,7 @@ body {
padding: 0.4rem; padding: 0.4rem;
text-align: center; text-align: center;
font-size: 0.9rem; font-size: 0.9rem;
color: #FFFFFF; color: #ffffff;
background-color: #3d3d3d; background-color: #3d3d3d;
border-bottom: 1px solid #131313; border-bottom: 1px solid #131313;
text-decoration: none; text-decoration: none;
@@ -525,7 +567,7 @@ body {
@media (max-width: 580px) { @media (max-width: 580px) {
.container .column_clients .btn a span { .container .column_clients .btn a span {
display: inline; display: inline;
color: #FFFFFF; color: #ffffff;
} }
} }
.container .column_clients .btn a:hover { .container .column_clients .btn a:hover {
@@ -540,10 +582,10 @@ body {
border-bottom: none; border-bottom: none;
} }
.theme--default .container .column_clients .btn:first-of-type a { .theme--default .container .column_clients .btn:first-of-type a {
background: #E32A6D; background: #e32a6d;
} }
.theme--dark .container .column_clients .btn:first-of-type a { .theme--dark .container .column_clients .btn:first-of-type a {
background: #E32A6D; background: #e32a6d;
} }
@media (max-width: 580px) { @media (max-width: 580px) {
.container .column_clients .btn:first-of-type a { .container .column_clients .btn:first-of-type a {
@@ -559,7 +601,7 @@ body {
.container .column_clients .btn span { .container .column_clients .btn span {
flex-basis: 20%; flex-basis: 20%;
margin-left: 0.4rem; margin-left: 0.4rem;
color: #FFFFFF; color: #ffffff;
} }
@media (max-width: 580px) { @media (max-width: 580px) {
.container .column_clients .btn span { .container .column_clients .btn span {
@@ -617,7 +659,8 @@ body.note .column_content .profile_intro .info-wrapper {
} }
} }
@media (max-width: 580px) { @media (max-width: 580px) {
body.note .column_content .profile_intro .info-wrapper .name, body.note .column_content .profile_intro .info-wrapper .npub { body.note .column_content .profile_intro .info-wrapper .name,
body.note .column_content .profile_intro .info-wrapper .npub {
display: block-inline; display: block-inline;
font-size: 0.9rem; font-size: 0.9rem;
} }
@@ -641,7 +684,7 @@ body.note .column_content .profile_intro .published_at {
color: #9a9a9a; color: #9a9a9a;
} }
.theme--dark body.note .column_content .profile_intro .published_at { .theme--dark body.note .column_content .profile_intro .published_at {
color: #F3F3F3; color: #f3f3f3;
} }
@media (max-width: 580px) { @media (max-width: 580px) {
body.note .column_content .profile_intro .published_at { body.note .column_content .profile_intro .published_at {

1
static/styles.css.map
View File

@@ -1 +0,0 @@
{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAoFA;EACC;EACA;EACA;;AACA;EAJD;IAKE;;;;AAGF;EAIC;EACA;;AA9BG;EA2BA;;AA3BA;EA2BA;;AAKF;EADD;IAEE;;;;AAjCC;EAuCA;;AAvCA;EAuCA;;;AAGJ;EACC;EACA;EACA;EACA;EACA;EAIA;EACA;;AApDG;EAiDF;;AAjDE;EAiDF;;AAID;EACC;EACA;EAIA;EACA;EACA;EACA;EACA;;AA/DE;EAyDD;;AAzDC;EAyDD;;AAOD;EAXD;IAYE;IACA;;;;AAKH;EACC;EACA;EACA;EACA;EACA;EAKA;EACA;;AAlFG;EA8EF;;AA9EE;EA8EF;;AAKD;EAZD;IAaE;IACE;IACA;IACA;;;;AAIJ;EACC;;;AAED;EACC;;;AAIA;EACC;;AAED;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;AArHE;EAyHD;;AAzHC;EAyHD;;;AAKH;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;;AACC;EAJF;IAKE;IACE;IACF;;;;AAGF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;AAEC;EANF;IAOE;IACE;;;AAGH;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA;IACA;IACA;IACA;;EACA;IACC;IACA;;EA7LD;IA+LE;;EA/LF;IA+LE;;;AAKJ;EACC;EACA;EACA;;AAvMC;EAyMA;;AAzMA;EAyMA;;AAED;EAPD;IAQE;;;AAIH;EAEC;EACA;EACA;EACA;;AAEA;EACC;;AAxNC;EA2NC;;AA3ND;EA2NC;;AAGF;EACC;;AA/NA;EAiOC;;AAjOD;EAiOC;;AAGF;EAbD;IAcE;;;AAGF;EACC;EACA;EACA;;AA3OC;EA6OA;;AA7OA;EA6OA;;AAED;EACC;;AAED;EAVD;IAWE;;;AAGF;EACC;;AACA;EACC;;AAzPA;EA2PC;;AA3PD;EA2PC;;AAGF;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA;;AAtQD;EAwQE;;AAxQF;EAwQE;;AAED;EACC;EACA;;AA5QF;EA8QG;;AA9QH;EA8QG;;AA9QH;EAiRG;;AAjRH;EAiRG;;AAKJ;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,YAnWS;EAoWT;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AA7TF;EAmUE;;AAnUF;EAmUE;;AAIF;EACC;EACA;;AAGD;EACC;;AAIF;EACC;;AACA;EACC;EACA;;AAGF;EACC;EACA;EACA;;AACA;EACC;EACA;;AA9VD;EAgWE;;AAhWF;EAgWE;;AAhWF;EAqWI;;AArWJ;EAqWI;;AAGJ;EAAU;;AAxWV;EA2WI;;AA3WJ;EA2WI;;AA3WJ;EAgXI;;AAhXJ;EAgXI;;AAIL;EACC;;AACA;EAFD;IAGE;IACA;;EAxXD;IA0XE;;EA1XF;IA0XE;;;AAQL;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;EACA;;AACA;EACC;;AAED;EAPD;IAQE;IACA;IACA;IACA;IACA;IACA;;EACA;IACC;;EAED;IACC;;EACA;IACC;IACA;IACA;IACA;;;AAKJ;EACC;EACA;EACA;;AACA;EAJD;IAKE;IACA;;;AAED;EACC;EACA;EACA;EACA;EACA,OAhgBU;EAigBV,kBA5fU;EA6fV;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OAhhBQ;;;AAmhBV;EACC,YA9gBS;;AAkhBV;EADD;IAEE;;;AAED;EAIC;;AA7dD;EA2dG;;AA3dH;EA2dG;;AAGF;EALD;IAME;;;AA/dF;EAmeG;;AAneH;EAmeG;;AAKJ;EACC;EACA;EACA,OA7iBU;;AA8iBV;EAJD;IAKE;;;;AASJ;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;;AAMF;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;;;AAGF;EACC;;AACA;EAFD;IAGE;;;AAGA;EADD;IAEE;IACA;;;AAIH;EACC;EACA;;AACA;EAHD;IAIE;;;AAGF;EACC;EACA;EACA;EACA;;AAhjBA;EAkjBC;;AAljBD;EAkjBC;;AAED;EARD;IASE;;;;AAOL;EACC;EACA","file":"styles.css"}

56
static/styles.scss
View File

@@ -1,12 +1,11 @@
$color-base1: #ffffff;
$color-base1: #FFFFFF; $color-base2: #fafafa;
$color-base2: #FAFAFA; $color-base3: #f3f3f3;
$color-base3: #F3F3F3; $color-base4: #c9c9c9;
$color-base4: #C9C9C9;
$color-base5: #9a9a9a; $color-base5: #9a9a9a;
$color-base6: #3d3d3d; $color-base6: #3d3d3d;
$color-base7: #373737; $color-base7: #373737;
$color-accent1: #E32A6D; $color-accent1: #e32a6d;
$color-accent2: #bc1150; $color-accent2: #bc1150;
$themes: ( $themes: (
@@ -25,7 +24,7 @@ $themes: (
boxed-title: $color-base7, boxed-title: $color-base7,
boxed-bg-title: $color-base4, boxed-bg-title: $color-base4,
boxed-bg: $color-base3, boxed-bg: $color-base3,
separator: $color-base3, separator: $color-base3
), ),
dark: ( dark: (
base1: $color-base7, base1: $color-base7,
@@ -42,8 +41,8 @@ $themes: (
boxed-title: $color-base5, boxed-title: $color-base5,
boxed-bg-title: darken($color-base6, 14%), boxed-bg-title: darken($color-base6, 14%),
boxed-bg: darken($color-base7, 14%), boxed-bg: darken($color-base7, 14%),
separator: darken($color-base7, 8%), separator: darken($color-base7, 8%)
), )
); );
$base1: 'base1'; $base1: 'base1';
@@ -69,7 +68,12 @@ $theme-map: null;
$theme-map: () !global; $theme-map: () !global;
@each $key, $submap in $map { @each $key, $submap in $map {
$value: map-get(map-get($themes, $theme), '#{$key}'); $value: map-get(map-get($themes, $theme), '#{$key}');
$theme-map: map-merge($theme-map, ($key: $value)) !global; $theme-map: map-merge(
$theme-map,
(
$key: $value
)
) !global;
} }
@content; @content;
$theme-map: null !global; $theme-map: null !global;
@@ -119,7 +123,7 @@ a {
overflow: hidden; overflow: hidden;
z-index: -1; z-index: -1;
&::after { &::after {
content: ""; content: '';
position: absolute; position: absolute;
@include themed() { @include themed() {
background: t($bg-down); background: t($bg-down);
@@ -157,18 +161,18 @@ a {
} }
.sun { .sun {
display: none display: none;
} }
.moon { .moon {
display: block display: block;
} }
.theme--dark { .theme--dark {
.sun { .sun {
display: block display: block;
} }
.moon { .moon {
display: none display: none;
} }
} }
@@ -274,7 +278,6 @@ a {
} }
} }
.column_content { .column_content {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
word-wrap: break-word; word-wrap: break-word;
@@ -347,7 +350,7 @@ a {
display: flex; display: flex;
align-items: center; align-items: center;
input[type=checkbox]{ input[type='checkbox'] {
height: 0; height: 0;
width: 0; width: 0;
visibility: hidden; visibility: hidden;
@@ -400,7 +403,6 @@ a {
label:first-of-type:active:after { label:first-of-type:active:after {
width: 2rem; width: 2rem;
} }
} }
&.content { &.content {
line-height: 1.4rem; line-height: 1.4rem;
@@ -409,7 +411,8 @@ a {
margin: 1rem 0; margin: 1rem 0;
} }
} }
.json, .data { .json,
.data {
white-space: pre-wrap; white-space: pre-wrap;
word-break: break-all; word-break: break-all;
margin-top: 1rem; margin-top: 1rem;
@@ -425,7 +428,9 @@ a {
color: t($base7); color: t($base7);
} }
} }
.number { color: darkorange; } .number {
color: darkorange;
}
.boolean { .boolean {
@include themed() { @include themed() {
color: t($base7); color: t($base7);
@@ -448,7 +453,6 @@ a {
} }
} }
} }
} }
.column_clients { .column_clients {
@@ -474,7 +478,8 @@ a {
font-size: 0.8rem; font-size: 0.8rem;
margin-bottom: 1rem; margin-bottom: 1rem;
text-align: center; text-align: center;
span.open, span.close { span.open,
span.close {
display: none; display: none;
} }
@media (max-width: 580px) { @media (max-width: 580px) {
@@ -487,7 +492,8 @@ a {
span.text { span.text {
display: none; display: none;
} }
span.open, span.close { span.open,
span.close {
display: inline; display: inline;
svg { svg {
width: 50%; width: 50%;
@@ -563,7 +569,6 @@ a {
} }
} }
} }
} }
body.profile { body.profile {
@@ -607,7 +612,8 @@ body.note {
@media (max-width: 580px) { @media (max-width: 580px) {
display: block; display: block;
} }
.name, .npub { .name,
.npub {
@media (max-width: 580px) { @media (max-width: 580px) {
display: block-inline; display: block-inline;
font-size: 0.9rem; font-size: 0.9rem;

32
templates/column_clients.html
View File

@@ -2,20 +2,42 @@
<div class="title open-list"> <div class="title open-list">
<span class="text">Open {{.type}} in</span> <span class="text">Open {{.type}} in</span>
<span class="open"> <span class="open">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 20 20"> <svg
<path fill="#FAFAFA" fill-rule="evenodd" d="M3.808.355h2.85a2.85 2.85 0 0 1 2.85 2.85v2.85a2.85 2.85 0 0 1-2.85 2.85h-2.85a2.85 2.85 0 0 1-2.85-2.85v-2.85a2.85 2.85 0 0 1 2.85-2.85Zm2.85 6.65a.95.95 0 0 0 .95-.95v-2.85a.95.95 0 0 0-.95-.95h-2.85a.95.95 0 0 0-.95.95v2.85c0 .525.425.95.95.95h2.85Zm0 3.8h-2.85a2.85 2.85 0 0 0-2.85 2.85v2.85a2.85 2.85 0 0 0 2.85 2.85h2.85a2.85 2.85 0 0 0 2.85-2.85v-2.85a2.85 2.85 0 0 0-2.85-2.85Zm0 6.65a.95.95 0 0 0 .95-.95v-2.85a.95.95 0 0 0-.95-.95h-2.85a.95.95 0 0 0-.95.95v2.85c0 .525.425.95.95.95h2.85Zm10.45-6.65h-2.85a2.85 2.85 0 0 0-2.85 2.85v2.85a2.85 2.85 0 0 0 2.85 2.85h2.85a2.85 2.85 0 0 0 2.85-2.85v-2.85a2.85 2.85 0 0 0-2.85-2.85Zm0 6.65a.95.95 0 0 0 .95-.95v-2.85a.95.95 0 0 0-.95-.95h-2.85a.95.95 0 0 0-.95.95v2.85c0 .525.425.95.95.95h2.85Zm0-17.1h-2.85a2.85 2.85 0 0 0-2.85 2.85v2.85a2.85 2.85 0 0 0 2.85 2.85h2.85a2.85 2.85 0 0 0 2.85-2.85v-2.85a2.85 2.85 0 0 0-2.85-2.85Zm0 6.65a.95.95 0 0 0 .95-.95v-2.85a.95.95 0 0 0-.95-.95h-2.85a.95.95 0 0 0-.95.95v2.85c0 .525.425.95.95.95h2.85Z" clip-rule="evenodd"/> xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fill="#FAFAFA"
fill-rule="evenodd"
d="M3.808.355h2.85a2.85 2.85 0 0 1 2.85 2.85v2.85a2.85 2.85 0 0 1-2.85 2.85h-2.85a2.85 2.85 0 0 1-2.85-2.85v-2.85a2.85 2.85 0 0 1 2.85-2.85Zm2.85 6.65a.95.95 0 0 0 .95-.95v-2.85a.95.95 0 0 0-.95-.95h-2.85a.95.95 0 0 0-.95.95v2.85c0 .525.425.95.95.95h2.85Zm0 3.8h-2.85a2.85 2.85 0 0 0-2.85 2.85v2.85a2.85 2.85 0 0 0 2.85 2.85h2.85a2.85 2.85 0 0 0 2.85-2.85v-2.85a2.85 2.85 0 0 0-2.85-2.85Zm0 6.65a.95.95 0 0 0 .95-.95v-2.85a.95.95 0 0 0-.95-.95h-2.85a.95.95 0 0 0-.95.95v2.85c0 .525.425.95.95.95h2.85Zm10.45-6.65h-2.85a2.85 2.85 0 0 0-2.85 2.85v2.85a2.85 2.85 0 0 0 2.85 2.85h2.85a2.85 2.85 0 0 0 2.85-2.85v-2.85a2.85 2.85 0 0 0-2.85-2.85Zm0 6.65a.95.95 0 0 0 .95-.95v-2.85a.95.95 0 0 0-.95-.95h-2.85a.95.95 0 0 0-.95.95v2.85c0 .525.425.95.95.95h2.85Zm0-17.1h-2.85a2.85 2.85 0 0 0-2.85 2.85v2.85a2.85 2.85 0 0 0 2.85 2.85h2.85a2.85 2.85 0 0 0 2.85-2.85v-2.85a2.85 2.85 0 0 0-2.85-2.85Zm0 6.65a.95.95 0 0 0 .95-.95v-2.85a.95.95 0 0 0-.95-.95h-2.85a.95.95 0 0 0-.95.95v2.85c0 .525.425.95.95.95h2.85Z"
clip-rule="evenodd"
/>
</svg> </svg>
</span> </span>
<span class="close"> <span class="close">
<svg xmlns="http://www.w3.org/2000/svg" width="31" height="16" fill="currentColor" viewBox="0 0 31 16"> <svg
<path fill="#fff" d="M30.207 3.016 16.744 14.983a1.496 1.496 0 0 1-1.974 0L1.307 3.016A1.496 1.496 0 0 1 3.28.772l12.476 11.085L28.233.772a1.496 1.496 0 1 1 1.974 2.244Z"/> xmlns="http://www.w3.org/2000/svg"
width="31"
height="16"
fill="currentColor"
viewBox="0 0 31 16"
>
<path
fill="#fff"
d="M30.207 3.016 16.744 14.983a1.496 1.496 0 0 1-1.974 0L1.307 3.016A1.496 1.496 0 0 1 3.28.772l12.476 11.085L28.233.772a1.496 1.496 0 1 1 1.974 2.244Z"
/>
</svg> </svg>
</span> </span>
</div> </div>
<div class="clients_wrapper"> <div class="clients_wrapper">
{{range .clients}} {{range .clients}}
<div class="btn"> <div class="btn">
<a class="client" href="{{.url}}"><span>Open {{.type}} in</span> {{.name}}</a> <a class="client" href="{{.url}}"
><span>Open {{.type}} in</span> {{.name}}</a
>
</div> </div>
{{end}} {{end}}
</div> </div>

20
templates/head.html
View File

@@ -5,9 +5,15 @@
<meta property="og:title" content="{{.title | SanitizeString}}" /> <meta property="og:title" content="{{.title | SanitizeString}}" />
{{ if .metadata.Picture }} {{ if .metadata.Picture }}
<meta property="og:image" content="{{.metadata.Picture | SanitizeString}}" /> <meta property="og:image" content="{{.metadata.Picture | SanitizeString}}" />
<meta property="twitter:image" content="{{.proxy}}{{.metadata.Picture | SanitizeString}}" /> <meta
property="twitter:image"
content="{{.proxy}}{{.metadata.Picture | SanitizeString}}"
/>
{{end}} {{ if .metadata.About }} {{end}} {{ if .metadata.About }}
<meta property="og:description" content="{{.metadata.About | SanitizeString}}" /> <meta
property="og:description"
content="{{.metadata.About | SanitizeString}}"
/>
{{end}} {{end}}
<meta property="twitter:card" content="summary" /> <meta property="twitter:card" content="summary" />
{{end}} {{end}}
@@ -32,12 +38,18 @@
{{end}} {{ if .video }} {{end}} {{ if .video }}
<meta property="og:video" content="{{.video | SanitizeString}}" /> <meta property="og:video" content="{{.video | SanitizeString}}" />
<meta property="og:video:secure_url" content="{{.video | SanitizeString}}" /> <meta property="og:video:secure_url" content="{{.video | SanitizeString}}" />
<meta property="og:video:type" content="video/{{.videoType | SanitizeString}}" /> <meta
property="og:video:type"
content="video/{{.videoType | SanitizeString}}"
/>
{{end}} {{end}}
<!----> <!---->
{{end}} {{end}}
<meta property="og:description" content="{{.description | SanitizeString}}" /> <meta property="og:description" content="{{.description | SanitizeString}}" />
<meta name="twitter:description" content="{{.description | SanitizeString}}" /> <meta
name="twitter:description"
content="{{.description | SanitizeString}}"
/>
{{end}} {{end}}
<!-----------> <!----------->
{{ if eq .type "address" }} {{ if eq .type "address" }}

23
templates/note.html
View File

@@ -1,17 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class="theme--default"> <html class="theme--default">
<meta charset="UTF-8"> <meta charset="UTF-8" />
{{template "head.html" .}} {{template "head.html" .}}
<body class="note"> <body class="note">
{{template "top.html" .}} {{template "top.html" .}}
<div class="container_wrapper"> <div class="container_wrapper">
<div class="container"> <div class="container">
<div class="column column_content"> <div class="column column_content">
<div class="profile_intro"> <div class="profile_intro">
<a href="/{{.npub | SanitizeString}}"> <a href="/{{.npub | SanitizeString}}">
<div class="pic-wrapper"> <div class="pic-wrapper">
@@ -19,13 +16,14 @@
</div> </div>
<div class="info-wrapper"> <div class="info-wrapper">
<div class="name"> <div class="name">
{{.metadata.Name | SanitizeString}} <span class="display">{{.metadata.DisplayName | SanitizeString}}</span> {{.metadata.Name | SanitizeString}}
<span class="display"
>{{.metadata.DisplayName | SanitizeString}}</span
>
</div> </div>
<div class="npub">{{.npubShort | SanitizeString}}</div> <div class="npub">{{.npubShort | SanitizeString}}</div>
</div> </div>
<div class="published_at"> <div class="published_at">{{.createdAt | SanitizeString}}</div>
{{.createdAt | SanitizeString}}
</div>
</a> </a>
</div> </div>
@@ -48,7 +46,11 @@
</div> </div>
<div class="field advanced-switch-wrapper"> <div class="field advanced-switch-wrapper">
<input type="checkbox" id="advanced-switch" class="advanced-switch" /> <input
type="checkbox"
id="advanced-switch"
class="advanced-switch"
/>
<label for="advanced-switch">X</label> <label for="advanced-switch">X</label>
<label for="advanced-switch">Show more details</label> <label for="advanced-switch">Show more details</label>
</div> </div>
@@ -66,7 +68,6 @@
</div> </div>
{{template "column_clients.html" .}} {{template "column_clients.html" .}}
</div> </div>
</div> </div>
@@ -75,7 +76,5 @@
<script> <script>
{{template "scripts.js"}} {{template "scripts.js"}}
</script> </script>
</body> </body>
</html> </html>

31
templates/profile.html
View File

@@ -1,18 +1,19 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class="theme--default"> <html class="theme--default">
<meta charset="UTF-8"> <meta charset="UTF-8" />
{{template "head.html" .}} {{template "head.html" .}}
<body class="profile"> <body class="profile">
{{template "top.html" .}} {{template "top.html" .}}
<div class="container_wrapper"> <div class="container_wrapper">
<div class="container"> <div class="container">
<div class="column columnA"> <div class="column columnA">
<div class="info-wrapper"> <div class="info-wrapper">
{{.metadata.Name | SanitizeString}} <span class="display">{{.metadata.DisplayName | SanitizeString}}</span> {{.metadata.Name | SanitizeString}}
<span class="display"
>{{.metadata.DisplayName | SanitizeString}}</span
>
</div> </div>
<div class="pic-wrapper"> <div class="pic-wrapper">
<img class="pic" src="{{.metadata.Picture | SanitizeString}}" /> <img class="pic" src="{{.metadata.Picture | SanitizeString}}" />
@@ -26,16 +27,19 @@
<div class="column column_content"> <div class="column column_content">
<div class="field info-wrapper"> <div class="field info-wrapper">
<div class="name"> <div class="name">
{{.metadata.Name | SanitizeString}} <span class="display">{{.metadata.DisplayName | SanitizeString}}</span> {{.metadata.Name | SanitizeString}}
<span class="display"
>{{.metadata.DisplayName | SanitizeString}}</span
>
</div> </div>
</div> </div>
<div class="field separator long"></div> <div class="field separator long"></div>
<div class="field"> <div class="field">
<a href="{{.metadata.Website | SanitizeString}}">{{.metadata.Website | SanitizeString}}</a> <a href="{{.metadata.Website | SanitizeString}}"
</div> >{{.metadata.Website | SanitizeString}}</a
<div class="field"> >
{{.metadata.About | SanitizeString}}
</div> </div>
<div class="field">{{.metadata.About | SanitizeString}}</div>
<div class="field separator"></div> <div class="field separator"></div>
<div class="field"> <div class="field">
<div class="label">Public key</div> <div class="label">Public key</div>
@@ -56,7 +60,11 @@
</div> </div>
<div class="field advanced-switch-wrapper"> <div class="field advanced-switch-wrapper">
<input type="checkbox" id="advanced-switch" class="advanced-switch" /> <input
type="checkbox"
id="advanced-switch"
class="advanced-switch"
/>
<label for="advanced-switch">X</label> <label for="advanced-switch">X</label>
<label for="advanced-switch">Show more details</label> <label for="advanced-switch">Show more details</label>
</div> </div>
@@ -74,7 +82,6 @@
</div> </div>
{{template "column_clients.html" .}} {{template "column_clients.html" .}}
</div> </div>
</div> </div>
@@ -83,7 +90,5 @@
<script> <script>
{{template "scripts.js"}} {{template "scripts.js"}}
</script> </script>
</body> </body>
</html> </html>

62
templates/top.html
View File

@@ -1,40 +1,70 @@
<div class="top"> <div class="top">
<a href="https://nostr.com" class="nostr_link">What is <span>nostr</span>?</a> <a href="https://nostr.com" class="nostr_link">What is <span>nostr</span>?</a>
<div class="theme-toggle"> <div class="theme-toggle">
<svg aria-hidden="true" data-prefix="fas" class="moon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg> <svg
<svg aria-hidden="true" data-prefix="fas" class="sun" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"></path></svg> aria-hidden="true"
data-prefix="fas"
class="moon"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
fill="currentColor"
d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"
></path>
</svg>
<svg
aria-hidden="true"
data-prefix="fas"
class="sun"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
fill="currentColor"
d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"
></path>
</svg>
</div> </div>
</div> </div>
<script> <script>
function toggleTheme() { function toggleTheme() {
const htmlElement = document.documentElement; const htmlElement = document.documentElement
const isDarkMode = htmlElement.classList.contains('theme--dark'); const isDarkMode = htmlElement.classList.contains('theme--dark')
// Toggle theme classes on the html element // Toggle theme classes on the html element
htmlElement.classList.toggle('theme--dark', !isDarkMode); htmlElement.classList.toggle('theme--dark', !isDarkMode)
htmlElement.classList.toggle('theme--default', isDarkMode); htmlElement.classList.toggle('theme--default', isDarkMode)
// Save preference in a cookie that expires at the end of the session // Save preference in a cookie that expires at the end of the session
const expiryDate = new Date(); const expiryDate = new Date()
document.cookie = `themePreference=${isDarkMode ? 'light' : 'dark'};`; document.cookie = `themePreference=${isDarkMode ? 'light' : 'dark'};`
} }
// Check if the OS prefers dark mode // Check if the OS prefers dark mode
const prefersDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; const prefersDarkMode =
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches
// Load preference from the cookie if it exists // Load preference from the cookie if it exists
const themePreference = document.cookie.replace(/(?:(?:^|.*;\s*)themePreference\s*\=\s*([^;]*).*$)|^.*$/, '$1'); const themePreference = document.cookie.replace(
const isDarkMode = themePreference === 'dark' || (themePreference === '' && prefersDarkMode); /(?:(?:^|.*;\s*)themePreference\s*\=\s*([^;]*).*$)|^.*$/,
'$1'
)
const isDarkMode =
themePreference === 'dark' || (themePreference === '' && prefersDarkMode)
// Apply theme based on the preference // Apply theme based on the preference
const htmlElement = document.documentElement; const htmlElement = document.documentElement
htmlElement.classList.toggle('theme--dark', isDarkMode); htmlElement.classList.toggle('theme--dark', isDarkMode)
htmlElement.classList.toggle('theme--default', !isDarkMode); htmlElement.classList.toggle('theme--default', !isDarkMode)
// Add click event listener to the theme toggle button // Add click event listener to the theme toggle button
const themeToggleButton = document.querySelector('.theme-toggle'); const themeToggleButton = document.querySelector('.theme-toggle')
themeToggleButton.addEventListener('click', toggleTheme); themeToggleButton.addEventListener('click', toggleTheme)
// const prefersDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; // const prefersDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
// if (prefersDarkMode) { // if (prefersDarkMode) {