From 2b10bc61b7700b2b5e50124e17ddaf027f8c200f Mon Sep 17 00:00:00 2001 From: Daniele Tonon Date: Mon, 22 May 2023 15:46:39 +0200 Subject: [PATCH 01/26] Setup up a first desktop version --- .gitignore | 2 + event.html | 102 ++++++++++++++++++++++------ main.go | 3 + render.go | 16 +++-- static/styles.css | 167 ++++++++++++++++++++++++++++++++++++++++++++++ utils.go | 8 +-- 6 files changed, 267 insertions(+), 31 deletions(-) create mode 100644 static/styles.css diff --git a/.gitignore b/.gitignore index 3e56dee..b2bd13d 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,3 @@ njump +.air.toml +tmp/* \ No newline at end of file diff --git a/event.html b/event.html index f45898e..04d1212 100644 --- a/event.html +++ b/event.html @@ -47,32 +47,89 @@ {{end}} - + + -
- open {{.type}} in {{range .clients}}
-    - {{.name}} {{end}} + +
+ What is nostr?
-
{{.eventJSON}}
-
+ +
+
+
+
+ + + + + + + + +
+
+ Last update:
+ {{.createdAt}} +
+
+
+
+ {{.content_json.name}} {{.content_json.display_name}} +
+
+
+ {{.content_json.website}} +
+
+ {{.content_json.about}} +
+
+
+
Public key
+ {{.npub}} +
+
+
NIP-05
+ {{.content_json.nip05}} +
+
+
LN Address
+ {{.content_json.lud16}} +
+
+
Metadata Event
+ {{.nevent}} +
+
+
JSON
+ {{.eventJSON}} +
+
+
+
+
Open {{.type}} in
+
+ {{range .clients}} +
+ {{.name}} + +
+ {{end}} +
+
+
+
+ + + +
+ diff --git a/main.go b/main.go index f28cec2..fd2997f 100644 --- a/main.go +++ b/main.go @@ -7,6 +7,9 @@ import ( ) func main() { + + http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static")))) + http.HandleFunc("/image/", generate) http.HandleFunc("/proxy/", proxy) http.HandleFunc("/", render) diff --git a/render.go b/render.go index e2990f6..8480536 100644 --- a/render.go +++ b/render.go @@ -8,7 +8,7 @@ import ( "regexp" "strings" "text/template" - + "time" "github.com/nbd-wtf/go-nostr" "github.com/nbd-wtf/go-nostr/nip19" ) @@ -48,6 +48,7 @@ func render(w http.ResponseWriter, r *http.Request) { npub, _ := nip19.EncodePublicKey(event.PubKey) nevent, _ := nip19.EncodeEvent(event.ID, []string{}, event.PubKey) naddr := "" + createdAt := time.Unix(int64(event.CreatedAt), 0).Format("2006-01-02 15:04:05") author := event if event.Kind != 0 { @@ -142,21 +143,23 @@ func render(w http.ResponseWriter, r *http.Request) { // : '' textImageURL := "" - description := "" + content := "" + content_json := make(map[string]interface{}) if useTextImage { textImageURL = fmt.Sprintf("https://%s/image/%s", hostname, code) if subject != "" { - description = fmt.Sprintf("%s -- %s", subject, seenOnRelays) + content = fmt.Sprintf("%s -- %s", subject, seenOnRelays) } else { - description = seenOnRelays + content = seenOnRelays } } else { - description = prettyJsonOrRaw(event.Content) + content_json, content = prettyJsonOrRaw(event.Content) } eventJSON, _ := json.MarshalIndent(event, "", " ") params := map[string]any{ + "createdAt": createdAt, "clients": generateClientList(code, event), "type": typ, "title": title, @@ -166,7 +169,8 @@ func render(w http.ResponseWriter, r *http.Request) { "naddr": naddr, "metadata": metadata, "authorLong": authorLong, - "description": description, + "content": content, + "content_json": content_json, "textImageURL": textImageURL, "videoType": videoType, "image": image, diff --git a/static/styles.css b/static/styles.css new file mode 100644 index 0000000..4ab66a5 --- /dev/null +++ b/static/styles.css @@ -0,0 +1,167 @@ +html { + font-family: Helvetica, sans-serif; + font-size: 20px; + font-weight: 300; +} + +body { + color: #373737; +} + +a { + color: #373737; +} + +.background { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: white; + overflow: hidden; + z-index: -1; +} + +.background::after { + content: ""; + position: absolute; + background-color: #FAFAFA; + width: 140%; + height: 100%; + transform: rotate(-20deg); + transform-origin: bottom; + bottom: -40%; +} + +.top, .container_wrapper { + display: flex; + justify-content: center; + align-items: center; +} + +.top { + margin: 1rem 0; + justify-content: left; +} + +.nostr_link { + flex-basis: 15%; + text-align: right; + text-decoration: none; +} + +.container { + display: flex; + width: 70%; + justify-content: space-between; + gap: 4.8vw; +} + +.column { +} + +.column1 { + flex-basis: 25%; + margin-top: 2rem; +} + +.container.profile .column1 .pic-wrapper { + max-width: 100%; + overflow: hidden; +} + +.container.profile .column1 img.pic { + max-width: 100%; + width: 100%; + height: auto; + -webkit-clip-path: url(#svg-shape); + -moz-clip-path: url(#svg-shape); + -o-clip-path: url(#svg-shape); + -ms-clip-path: url(#svg-shape); + clip-path: url(#svg-shape); +} + +.last_update { + font-size: 0.8em; + text-align: center; + color: #C9C9C9; +} + +.column2 { + flex-basis: 50%; + max-width: 50%; + flex-grow: 0; + flex-shrink: 0; + word-wrap: break-word; + margin-right: 1vw; +} + +.column2 .name { + font-size: 1.6rem; +} + +.column2 .name .display { + color: #C9C9C9; +} + +.column2 .separator { + height: 6px; + width: 30%; + margin-left: -0.6rem; + background-color: #F3F3F3; +} + +.column2 .field { + margin-bottom: 1.5rem; +} + +.column2 .field .label { + font-size: 0.8rem; + color: #E32A6D; +} + +.column3 { + flex-basis: 25%; + margin-top: 2rem; +} + +.column3 .title { + font-size: 0.8rem; + margin-bottom: 1rem; +} + +.column3 .btn { + display: flex; + align-items: center; + margin-bottom: 0.8rem; +} + +.column3 .btn a { + flex-basis: 80%; + padding: 0.4rem; + text-align: center; + font-size: 0.9rem; + color: #FFFFFF; + background-color: #5A5A5A; + text-decoration: none; + border-radius: 8px; +} + +.column3 .btn a:hover { + background-color: #373737; +} + +.column3 .btn:first-child a { + background-color: #E32A6D; +} + +.column3 .btn:first-child a:hover { + background-color: #bc1150; +} + +.column3 .btn span { + flex-basis: 20%; + margin-left: 0.4rem; + color: #9a9a9a; +} \ No newline at end of file diff --git a/utils.go b/utils.go index 54c77b9..92cf320 100644 --- a/utils.go +++ b/utils.go @@ -81,14 +81,14 @@ func mergeMaps[K comparable, V any](m1 map[K]V, m2 map[K]V) map[K]V { return m1 } -func prettyJsonOrRaw(j string) string { - var parsedContent any +func prettyJsonOrRaw(j string) (map[string]interface{}, string) { + var parsedContent map[string]interface{} if err := json.Unmarshal([]byte(j), &parsedContent); err == nil { if t, err := toml.Marshal(parsedContent); err == nil && len(t) > 0 { - return string(t) + return parsedContent, string(t) } } - return j + return nil, j } func getPreviewStyle(r *http.Request) string { From 6ad6c47b62d3af888434dea1e8b0d7c8db18dd09 Mon Sep 17 00:00:00 2001 From: Daniele Tonon Date: Mon, 22 May 2023 18:33:17 +0200 Subject: [PATCH 02/26] Add scss => css conversion --- .gitignore | 4 +- event.html | 6 +- justfile | 5 + package-lock.json | 212 ++++++++++++++++++++++++++++++++++++++++++ package.json | 5 + static/styles.css | 67 ++++++------- static/styles.css.map | 1 + static/styles.scss | 162 ++++++++++++++++++++++++++++++++ 8 files changed, 419 insertions(+), 43 deletions(-) create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 static/styles.css.map create mode 100644 static/styles.scss diff --git a/.gitignore b/.gitignore index b2bd13d..3b235c1 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ njump .air.toml -tmp/* \ No newline at end of file +tmp/ +node_modules/ +.sass-cache/ \ No newline at end of file diff --git a/event.html b/event.html index 04d1212..26effc3 100644 --- a/event.html +++ b/event.html @@ -58,7 +58,7 @@
-
+
@@ -77,7 +77,7 @@ {{.createdAt}}
-
+
{{.content_json.name}} {{.content_json.display_name}}
@@ -111,7 +111,7 @@
-
+
Open {{.type}} in
{{range .clients}} diff --git a/justfile b/justfile index 414a988..688363a 100644 --- a/justfile +++ b/justfile @@ -1,4 +1,5 @@ build: + sass -s compressed static/styles.scss static/styles.css CC=$(which musl-gcc) go build -ldflags='-s -w -linkmode external -extldflags "-static"' -o ./njump deploy: build @@ -6,3 +7,7 @@ deploy: build rsync njump turgot:njump/njump-new ssh turgot 'mv njump/njump-new njump/njump' ssh root@turgot 'systemctl start njump' + +refresh_build: + sass static/styles.scss static/styles.css + go build -o ./tmp/main . \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..38ebbae --- /dev/null +++ b/package-lock.json @@ -0,0 +1,212 @@ +{ + "name": "njump", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "dependencies": { + "sass": "^1.62.1" + } + }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "engines": { + "node": ">=8" + } + }, + "node_modules/braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dependencies": { + "fill-range": "^7.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/chokidar": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", + "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "funding": [ + { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + ], + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/immutable": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz", + "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==" + }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "engines": { + "node": ">=0.12.0" + } + }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, + "node_modules/sass": { + "version": "1.62.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.62.1.tgz", + "integrity": "sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..1e435dc --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "sass": "^1.62.1" + } +} diff --git a/static/styles.css b/static/styles.css index 4ab66a5..f806489 100644 --- a/static/styles.css +++ b/static/styles.css @@ -1,3 +1,4 @@ + html { font-family: Helvetica, sans-serif; font-size: 20px; @@ -22,7 +23,6 @@ a { overflow: hidden; z-index: -1; } - .background::after { content: ""; position: absolute; @@ -34,17 +34,20 @@ a { bottom: -40%; } -.top, .container_wrapper { +.top { display: flex; justify-content: center; align-items: center; -} - -.top { margin: 1rem 0; justify-content: left; } +.container_wrapper { + display: flex; + justify-content: center; + align-items: center; +} + .nostr_link { flex-basis: 15%; text-align: right; @@ -58,20 +61,16 @@ a { gap: 4.8vw; } -.column { -} - -.column1 { +.columnA { flex-basis: 25%; margin-top: 2rem; } -.container.profile .column1 .pic-wrapper { +.container.profile .columnA .pic-wrapper { max-width: 100%; overflow: hidden; } - -.container.profile .column1 img.pic { +.container.profile .columnA img.pic { max-width: 100%; width: 100%; height: auto; @@ -88,7 +87,7 @@ a { color: #C9C9C9; } -.column2 { +.columnB { flex-basis: 50%; max-width: 50%; flex-grow: 0; @@ -96,48 +95,40 @@ a { word-wrap: break-word; margin-right: 1vw; } - -.column2 .name { +.columnB .name { font-size: 1.6rem; } - -.column2 .name .display { +.columnB .name .display { color: #C9C9C9; } - -.column2 .separator { +.columnB .separator { height: 6px; width: 30%; margin-left: -0.6rem; background-color: #F3F3F3; } - -.column2 .field { +.columnB .field { margin-bottom: 1.5rem; } - -.column2 .field .label { +.columnB .field .label { font-size: 0.8rem; color: #E32A6D; } -.column3 { +.columnC { flex-basis: 25%; margin-top: 2rem; } - -.column3 .title { +.columnC .title { font-size: 0.8rem; margin-bottom: 1rem; } - -.column3 .btn { +.columnC .btn { display: flex; align-items: center; margin-bottom: 0.8rem; } - -.column3 .btn a { +.columnC .btn a { flex-basis: 80%; padding: 0.4rem; text-align: center; @@ -147,21 +138,19 @@ a { text-decoration: none; border-radius: 8px; } - -.column3 .btn a:hover { +.columnC .btn a:hover { background-color: #373737; } - -.column3 .btn:first-child a { +.columnC .btn:first-child a { background-color: #E32A6D; } - -.column3 .btn:first-child a:hover { +.columnC .btn:first-child a:hover { background-color: #bc1150; } - -.column3 .btn span { +.columnC .btn span { flex-basis: 20%; margin-left: 0.4rem; color: #9a9a9a; -} \ No newline at end of file +} + +/*# sourceMappingURL=styles.css.map */ diff --git a/static/styles.css.map b/static/styles.css.map new file mode 100644 index 0000000..bf96083 --- /dev/null +++ b/static/styles.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;;;AAuBV;EACC,OAxBS;;;AA0BV;EACC;EACA;EACA;EACA;EACA;EACA,kBA1BoB;EA2BpB;EACA;;AACA;EACC;EACA;EACA,kBA/BmB;EAgCnB;EACA;EACA;EACA;EACA;;;AAGF;EACC;EACA;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;;;AAED;EACC;EACA;;;AAIC;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIH;EACC;EACA;EACA,OA7FS;;;AA+FV;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AACA;EACC,OAzGO;;AA4GT;EACC;EACA;EACA;EACA,kBAzGmB;;AA2GpB;EACC;;AACA;EACC;EACA,OArHO;;;AAyHV;EACC;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA,OAxIO;EAyIP,kBAnIkB;EAoIlB;EACA;;AACA;EACC,kBAtIiB;;AA0IlB;EACC,kBA1IiB;;AA2IjB;EACC,kBA3IgB;;AA+InB;EACC;EACA;EACA,OA1JO","file":"styles.css"} \ No newline at end of file diff --git a/static/styles.scss b/static/styles.scss new file mode 100644 index 0000000..3d123d5 --- /dev/null +++ b/static/styles.scss @@ -0,0 +1,162 @@ +$color_1: #373737; +$color_2: #C9C9C9; +$color_3: #E32A6D; +$color_4: #FFFFFF; +$color_5: #9a9a9a; +$font-family_1: Helvetica, sans-serif; +$background-color_1: white; +$background-color_2: #FAFAFA; +$background-color_3: #F3F3F3; +$background-color_4: #5A5A5A; +$background-color_5: #373737; +$background-color_6: #E32A6D; +$background-color_7: #bc1150; + +/*# sourceMappingURL=styles.css.map */ +html { + font-family: $font-family_1; + font-size: 20px; + font-weight: 300; +} +body { + color: $color_1; +} +a { + color: $color_1; +} +.background { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: $background-color_1; + overflow: hidden; + z-index: -1; + &::after { + content: ""; + position: absolute; + background-color: $background-color_2; + width: 140%; + height: 100%; + transform: rotate(-20deg); + transform-origin: bottom; + bottom: -40%; + } +} +.top { + display: flex; + justify-content: center; + align-items: center; + margin: 1rem 0; + justify-content: left; +} +.container_wrapper { + display: flex; + justify-content: center; + align-items: center; +} +.nostr_link { + flex-basis: 15%; + text-align: right; + text-decoration: none; +} +.container { + display: flex; + width: 70%; + justify-content: space-between; + gap: 4.8vw; +} +.columnA { + flex-basis: 25%; + margin-top: 2rem; +} +.container.profile { + .columnA { + .pic-wrapper { + max-width: 100%; + overflow: hidden; + } + img.pic { + max-width: 100%; + width: 100%; + height: auto; + -webkit-clip-path: url(#svg-shape); + -moz-clip-path: url(#svg-shape); + -o-clip-path: url(#svg-shape); + -ms-clip-path: url(#svg-shape); + clip-path: url(#svg-shape); + } + } +} +.last_update { + font-size: 0.8em; + text-align: center; + color: $color_2; +} +.columnB { + flex-basis: 50%; + max-width: 50%; + flex-grow: 0; + flex-shrink: 0; + word-wrap: break-word; + margin-right: 1vw; + .name { + font-size: 1.6rem; + .display { + color: $color_2; + } + } + .separator { + height: 6px; + width: 30%; + margin-left: -0.6rem; + background-color: $background-color_3; + } + .field { + margin-bottom: 1.5rem; + .label { + font-size: 0.8rem; + color: $color_3; + } + } +} +.columnC { + flex-basis: 25%; + margin-top: 2rem; + .title { + font-size: 0.8rem; + margin-bottom: 1rem; + } + .btn { + display: flex; + align-items: center; + margin-bottom: 0.8rem; + a { + flex-basis: 80%; + padding: 0.4rem; + text-align: center; + font-size: 0.9rem; + color: $color_4; + background-color: $background-color_4; + text-decoration: none; + border-radius: 8px; + &:hover { + background-color: $background-color_5; + } + } + &:first-child { + a { + background-color: $background-color_6; + &:hover { + background-color: $background-color_7; + } + } + } + span { + flex-basis: 20%; + margin-left: 0.4rem; + color: $color_5; + } + } +} From 1d89f33f779471e9804d210f0fa74f713474294b Mon Sep 17 00:00:00 2001 From: Daniele Tonon Date: Tue, 23 May 2023 08:53:51 +0200 Subject: [PATCH 03/26] Implement mobile version --- event.html | 69 +++++++--- static/styles.css | 233 +++++++++++++++++++++++++++---- static/styles.css.map | 2 +- static/styles.scss | 309 ++++++++++++++++++++++++++++++------------ 4 files changed, 483 insertions(+), 130 deletions(-) diff --git a/event.html b/event.html index 26effc3..daf23e6 100644 --- a/event.html +++ b/event.html @@ -47,6 +47,7 @@ {{end}} + @@ -58,30 +59,25 @@
+
+
+ {{.content_json.name}} {{.content_json.display_name}} +
- - - - - - -
Last update:
{{.createdAt}}
+
{{.content_json.name}} {{.content_json.display_name}}
-
+
{{.content_json.website}}
@@ -107,28 +103,45 @@
JSON
- {{.eventJSON}} +
{{.eventJSON}}
+
-
Open {{.type}} in
-
+
+ Open {{.type}} in + + + + + + + + + + +
+
{{range .clients}}
- {{.name}} + Open {{.type}} in {{.name}}
{{end}}
+
- +
-
+ + + + + + + + + + diff --git a/static/styles.css b/static/styles.css index f806489..4033ab1 100644 --- a/static/styles.css +++ b/static/styles.css @@ -7,6 +7,8 @@ html { body { color: #373737; + margin: 0; + margin-bottom: 4rem; } a { @@ -33,6 +35,12 @@ a { transform-origin: bottom; bottom: -40%; } +@media (max-width: 580px) { + .background::after { + width: 200%; + bottom: -40%; + } +} .top { display: flex; @@ -41,12 +49,27 @@ a { margin: 1rem 0; justify-content: left; } +@media (max-width: 580px) { + .top { + display: block; + width: 90%; + margin: 1.5rem auto 0 auto; + font-size: 0.8rem; + } +} .container_wrapper { display: flex; justify-content: center; align-items: center; } +@media (max-width: 580px) { + .container_wrapper { + display: block; + width: 90%; + margin: 0 auto; + } +} .nostr_link { flex-basis: 15%; @@ -54,23 +77,56 @@ a { text-decoration: none; } -.container { +.container.profile { display: flex; width: 70%; justify-content: space-between; gap: 4.8vw; } - -.columnA { +@media (max-width: 580px) { + .container.profile { + display: block; + width: 100%; + } +} +.container.profile .columnA { flex-basis: 25%; margin-top: 2rem; } - +@media (max-width: 580px) { + .container.profile .columnA { + display: flex; + align-items: center; + margin-top: 0rem; + } +} +.container.profile .columnA .name { + display: none; +} +@media (max-width: 580px) { + .container.profile .columnA .name { + display: block; + flex-basis: 64%; + max-width: 64%; + overflow: hidden; + font-size: 1.6rem; + } + .container.profile .columnA .name .display { + display: block; + font-size: 1.2rem; + color: #C9C9C9; + } +} .container.profile .columnA .pic-wrapper { max-width: 100%; overflow: hidden; } -.container.profile .columnA img.pic { +@media (max-width: 580px) { + .container.profile .columnA .pic-wrapper { + flex-basis: 40%; + } +} +.container.profile .columnA .pic-wrapper img.pic { max-width: 100%; width: 100%; height: auto; @@ -80,14 +136,18 @@ a { -ms-clip-path: url(#svg-shape); clip-path: url(#svg-shape); } - -.last_update { +.container.profile .columnA .last_update { font-size: 0.8em; + margin-top: 0.5rem; text-align: center; color: #C9C9C9; } - -.columnB { +@media (max-width: 580px) { + .container.profile .columnA .last_update { + display: none; + } +} +.container.profile .columnB { flex-basis: 50%; max-width: 50%; flex-grow: 0; @@ -95,62 +155,187 @@ a { word-wrap: break-word; margin-right: 1vw; } -.columnB .name { +@media (max-width: 580px) { + .container.profile .columnB { + flex-basis: 100%; + max-width: 100%; + } +} +.container.profile .columnB .name { font-size: 1.6rem; } -.columnB .name .display { +.container.profile .columnB .name .display { color: #C9C9C9; } -.columnB .separator { +@media (max-width: 580px) { + .container.profile .columnB .name { + display: none; + } +} +.container.profile .columnB .separator { height: 6px; width: 30%; margin-left: -0.6rem; background-color: #F3F3F3; } -.columnB .field { +.container.profile .columnB .separator.long { + width: 50%; +} +@media (max-width: 580px) { + .container.profile .columnB .separator { + margin-left: -1rem; + } +} +.container.profile .columnB .field { margin-bottom: 1.5rem; } -.columnB .field .label { +.container.profile .columnB .field .label { font-size: 0.8rem; color: #E32A6D; } - -.columnC { +.container.profile .columnC { flex-basis: 25%; margin-top: 2rem; } -.columnC .title { +@media (max-width: 580px) { + .container.profile .columnC { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + transition: all 500ms ease-in-out; + } + .container.profile .columnC.up .btn { + display: block; + } + .container.profile .columnC.up .title span.open { + display: none; + } +} +.container.profile .columnC .title { font-size: 0.8rem; margin-bottom: 1rem; } -.columnC .btn { +.container.profile .columnC .title span.open, .container.profile .columnC .title span.close { + display: none; +} +@media (max-width: 580px) { + .container.profile .columnC .title { + position: absolute; + top: 0; + right: 0; + width: 2.6rem; + height: 2.6rem; + border-left: 1px solid #bc1150; + } + .container.profile .columnC .title span.text { + display: none; + } + .container.profile .columnC .title span.open, .container.profile .columnC .title span.close { + display: inline; + } + .container.profile .columnC .title span.open svg, .container.profile .columnC .title span.close svg { + width: 50%; + height: 50%; + margin: 28% auto auto auto; + display: block; + } +} +.container.profile .columnC .btn { display: flex; align-items: center; margin-bottom: 0.8rem; } -.columnC .btn a { +@media (max-width: 580px) { + .container.profile .columnC .btn { + display: none; + margin-bottom: 0; + } +} +.container.profile .columnC .btn a { flex-basis: 80%; padding: 0.4rem; text-align: center; font-size: 0.9rem; color: #FFFFFF; background-color: #5A5A5A; + border-bottom: 1px solid #373737; text-decoration: none; border-radius: 8px; } -.columnC .btn a:hover { +@media (max-width: 580px) { + .container.profile .columnC .btn a { + display: block; + padding: 0.8rem; + border-radius: 0px; + font-weight: 400; + text-align: left; + } +} +.container.profile .columnC .btn a span { + display: none; +} +@media (max-width: 580px) { + .container.profile .columnC .btn a span { + display: inline; + color: #FFFFFF; + } +} +.container.profile .columnC .btn a:hover { background-color: #373737; } -.columnC .btn:first-child a { - background-color: #E32A6D; +@media (max-width: 580px) { + .container.profile .columnC .btn:first-of-type { + display: block; + } } -.columnC .btn:first-child a:hover { +.container.profile .columnC .btn:first-of-type a { + background-color: #E32A6D; + border-bottom: none; +} +@media (max-width: 580px) { + .container.profile .columnC .btn:first-of-type a { + border-radius: 8px 8px 0 0; + } +} +.container.profile .columnC .btn:first-of-type a:hover { background-color: #bc1150; } -.columnC .btn span { +.container.profile .columnC .btn span { flex-basis: 20%; margin-left: 0.4rem; color: #9a9a9a; } +@media (max-width: 580px) { + .container.profile .columnC .btn span { + display: none; + } +} + +pre { + outline: 1px solid #ccc; + padding: 5px; + margin: 5px; +} + +.string { + color: green; +} + +.number { + color: darkorange; +} + +.boolean { + color: blue; +} + +.null { + color: magenta; +} + +.key { + color: red; +} /*# sourceMappingURL=styles.css.map */ diff --git a/static/styles.css.map b/static/styles.css.map index bf96083..b02dc48 100644 --- a/static/styles.css.map +++ b/static/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;;;AAuBV;EACC,OAxBS;;;AA0BV;EACC;EACA;EACA;EACA;EACA;EACA,kBA1BoB;EA2BpB;EACA;;AACA;EACC;EACA;EACA,kBA/BmB;EAgCnB;EACA;EACA;EACA;EACA;;;AAGF;EACC;EACA;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;;;AAED;EACC;EACA;;;AAIC;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIH;EACC;EACA;EACA,OA7FS;;;AA+FV;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AACA;EACC,OAzGO;;AA4GT;EACC;EACA;EACA;EACA,kBAzGmB;;AA2GpB;EACC;;AACA;EACC;EACA,OArHO;;;AAyHV;EACC;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA,OAxIO;EAyIP,kBAnIkB;EAoIlB;EACA;;AACA;EACC,kBAtIiB;;AA0IlB;EACC,kBA1IiB;;AA2IjB;EACC,kBA3IgB;;AA+InB;EACC;EACA;EACA,OA1JO","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;;AAED;EACC,OA1BS;;;AA4BV;EACC;EACA;EACA;EACA;EACA;EACA,kBA5BoB;EA6BpB;EACA;;AACA;EACC;EACA;EACA,kBAjCmB;EAkCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;;AAGF;EACC;EACA;EACA;;AACC;EAJF;IAKE;IACE;IACF;;;;AAGF;EACC;EACA;EACA;;;AAED;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;IACA,OA7GK;;;AAiHR;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;EACA;EACA;EACA,OAtIO;;AAuIP;EALD;IAME;;;AAIH;EACC;EACA;EAKA;EACA;EACA;EACA;;AAPA;EAHD;IAIE;IACA;;;AAMD;EACC;;AACA;EACC,OA1JM;;AA4JP;EALD;IAME;;;AAGF;EACC;EACA;EACA;EACA,kBA7JkB;;AA8JlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OA/KM;;AAmLT;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;;AACA;EACC;;AAED;EAND;IAOE;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,OA7OM;EA8ON,kBAxOiB;EAyOjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OA7PI;;;AAgQN;EACC,kBA1PgB;;AA8PjB;EADD;IAEE;;;AAED;EACC,kBAjQgB;EAkQhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBAtQe;;AA0QlB;EACC;EACA;EACA,OArRM;;AAsRN;EAJD;IAKE;;;;AAQL;EAAK;EAAyB;EAAc;;;AAC5C;EAAU;;;AACV;EAAU;;;AACV;EAAW;;;AACX;EAAQ;;;AACR;EAAO","file":"styles.css"} \ No newline at end of file diff --git a/static/styles.scss b/static/styles.scss index 3d123d5..1b39a60 100644 --- a/static/styles.scss +++ b/static/styles.scss @@ -20,6 +20,8 @@ html { } body { color: $color_1; + margin: 0; + margin-bottom: 4rem; } a { color: $color_1; @@ -42,6 +44,10 @@ a { transform: rotate(-20deg); transform-origin: bottom; bottom: -40%; + @media (max-width: 580px) { + width: 200%; + bottom: -40%; + } } } .top { @@ -50,113 +56,242 @@ a { align-items: center; margin: 1rem 0; justify-content: left; + @media (max-width: 580px) { + display: block; + width: 90%; + margin: 1.5rem auto 0 auto; + font-size: 0.8rem; + } } .container_wrapper { display: flex; justify-content: center; align-items: center; + @media (max-width: 580px) { + display: block; + width: 90%; + margin: 0 auto; + } } .nostr_link { flex-basis: 15%; text-align: right; text-decoration: none; } -.container { +.container.profile { display: flex; width: 70%; justify-content: space-between; gap: 4.8vw; -} -.columnA { - flex-basis: 25%; - margin-top: 2rem; -} -.container.profile { + + @media (max-width: 580px) { + display: block; + width: 100%; + } + .columnA { - .pic-wrapper { - max-width: 100%; - overflow: hidden; + flex-basis: 25%; + margin-top: 2rem; + @media (max-width: 580px) { + display: flex; + align-items: center; + margin-top: 0rem; } - img.pic { - max-width: 100%; - width: 100%; - height: auto; - -webkit-clip-path: url(#svg-shape); - -moz-clip-path: url(#svg-shape); - -o-clip-path: url(#svg-shape); - -ms-clip-path: url(#svg-shape); - clip-path: url(#svg-shape); - } - } -} -.last_update { - font-size: 0.8em; - text-align: center; - color: $color_2; -} -.columnB { - flex-basis: 50%; - max-width: 50%; - flex-grow: 0; - flex-shrink: 0; - word-wrap: break-word; - margin-right: 1vw; - .name { - font-size: 1.6rem; - .display { - color: $color_2; - } - } - .separator { - height: 6px; - width: 30%; - margin-left: -0.6rem; - background-color: $background-color_3; - } - .field { - margin-bottom: 1.5rem; - .label { - font-size: 0.8rem; - color: $color_3; - } - } -} -.columnC { - flex-basis: 25%; - margin-top: 2rem; - .title { - font-size: 0.8rem; - margin-bottom: 1rem; - } - .btn { - display: flex; - align-items: center; - margin-bottom: 0.8rem; - a { - flex-basis: 80%; - padding: 0.4rem; - text-align: center; - font-size: 0.9rem; - color: $color_4; - background-color: $background-color_4; - text-decoration: none; - border-radius: 8px; - &:hover { - background-color: $background-color_5; - } - } - &:first-child { - a { - background-color: $background-color_6; - &:hover { - background-color: $background-color_7; + .name { + display: none; + @media (max-width: 580px) { + display: block; + flex-basis: 64%; + max-width: 64%; + overflow: hidden; + font-size: 1.6rem; + .display { + display: block; + font-size: 1.2rem; + color: $color_2; } } } - span { - flex-basis: 20%; - margin-left: 0.4rem; - color: $color_5; + .pic-wrapper { + max-width: 100%; + overflow: hidden; + @media (max-width: 580px) { + flex-basis: 40%; + } + img.pic { + max-width: 100%; + width: 100%; + height: auto; + -webkit-clip-path: url(#svg-shape); + -moz-clip-path: url(#svg-shape); + -o-clip-path: url(#svg-shape); + -ms-clip-path: url(#svg-shape); + clip-path: url(#svg-shape); + } + } + .last_update { + font-size: 0.8em; + margin-top: 0.5rem; + text-align: center; + color: $color_2; + @media (max-width: 580px) { + display: none; + } } } + .columnB { + flex-basis: 50%; + max-width: 50%; + @media (max-width: 580px) { + flex-basis: 100%; + max-width: 100%; + } + flex-grow: 0; + flex-shrink: 0; + word-wrap: break-word; + margin-right: 1vw; + .name { + font-size: 1.6rem; + .display { + color: $color_2; + } + @media (max-width: 580px) { + display: none; + } + } + .separator { + height: 6px; + width: 30%; + margin-left: -0.6rem; + background-color: $background-color_3; + &.long { + width: 50%; + } + @media (max-width: 580px) { + margin-left: -1rem; + } + } + .field { + margin-bottom: 1.5rem; + .label { + font-size: 0.8rem; + color: $color_3; + } + } + } + .columnC { + flex-basis: 25%; + margin-top: 2rem; + @media (max-width: 580px) { + position: fixed; + // top: calc(100vh - 4.6rem); + bottom: 0; + left: 0; + width: 100%; + transition: all 500ms ease-in-out; + &.up { + .btn { + display: block; + } + .title span.open { + display: none; + } + } + } + .title { + font-size: 0.8rem; + margin-bottom: 1rem; + span.open, span.close { + display: none; + } + @media (max-width: 580px) { + position: absolute; + top: 0; + right: 0; + width: 2.6rem; + height: 2.6rem; + border-left: 1px solid #bc1150; + span.text { + display: none; + } + span.open, span.close { + display: inline; + svg { + width: 50%; + height: 50%; + margin: 28% auto auto auto; + display: block; + } + } + } + } + .btn { + display: flex; + align-items: center; + margin-bottom: 0.8rem; + @media (max-width: 580px) { + display: none; + margin-bottom: 0; + } + a { + flex-basis: 80%; + padding: 0.4rem; + text-align: center; + font-size: 0.9rem; + color: $color_4; + background-color: $background-color_4; + border-bottom: 1px solid $background-color_5; + text-decoration: none; + border-radius: 8px; + @media (max-width: 580px) { + display: block; + padding: 0.8rem; + border-radius: 0px; + font-weight: 400; + text-align: left; + } + span { + display: none; + @media (max-width: 580px) { + display: inline; + color: $color_4; + } + } + &:hover { + background-color: $background-color_5; + } + } + &:first-of-type { + @media (max-width: 580px) { + display: block; + } + a { + background-color: $background-color_6; + border-bottom: none; + @media (max-width: 580px) { + border-radius: 8px 8px 0 0; + } + &:hover { + background-color: $background-color_7; + } + } + } + span { + flex-basis: 20%; + margin-left: 0.4rem; + color: $color_5; + @media (max-width: 580px) { + display: none; + } + } + } + } } + + +pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; } +.string { color: green; } +.number { color: darkorange; } +.boolean { color: blue; } +.null { color: magenta; } +.key { color: red; } \ No newline at end of file From 770571d34c6ae93ff418bbd8dccc44ec14b8cf50 Mon Sep 17 00:00:00 2001 From: Daniele Tonon Date: Tue, 23 May 2023 11:02:49 +0200 Subject: [PATCH 04/26] Add a switch to show the formatted json --- event.html | 57 ++++++++++++++++++---- static/styles.css | 108 ++++++++++++++++++++++++++++++++---------- static/styles.css.map | 2 +- static/styles.scss | 103 +++++++++++++++++++++++++++++++++++----- 4 files changed, 223 insertions(+), 47 deletions(-) diff --git a/event.html b/event.html index daf23e6..87dc9d3 100644 --- a/event.html +++ b/event.html @@ -97,12 +97,20 @@
LN Address
{{.content_json.lud16}}
+
Metadata Event
- {{.nevent}} +
{{.nevent}}
-
-
JSON
+ +
+ + + +
+ +
+
Event JSON
{{.eventJSON}}
@@ -137,10 +145,8 @@
-
- - powered by njump - +
+ Powered by njump
diff --git a/static/styles.css b/static/styles.css index 4033ab1..c268a48 100644 --- a/static/styles.css +++ b/static/styles.css @@ -66,7 +66,7 @@ a { @media (max-width: 580px) { .container_wrapper { display: block; - width: 90%; + padding: 0 1rem; margin: 0 auto; } } @@ -159,6 +159,7 @@ a { .container.profile .columnB { flex-basis: 100%; max-width: 100%; + margin-right: 0; } } .container.profile .columnB .name { @@ -193,6 +194,84 @@ a { font-size: 0.8rem; color: #E32A6D; } +.container.profile .columnB .field.advanced { + display: none; +} +.container.profile .columnB .field.advanced.visible { + display: block; +} +.container.profile .columnB .field.advanced .label { + padding: 0.2rem 1rem; + margin: 0 -1rem; + color: #373737; + background-color: #C9C9C9; +} +.container.profile .columnB .field .json, .container.profile .columnB .field .data { + white-space: pre-wrap; + word-break: break-all; + background-color: #F3F3F3; + padding: 1rem; + margin: 0 -1rem; +} +.container.profile .columnB .field .json .key, .container.profile .columnB .field .data .key { + display: inline-block; + margin-top: 0.5rem; + color: #E32A6D; +} +.container.profile .columnB .field .json .string, .container.profile .columnB .field .data .string { + color: #373737; +} +.container.profile .columnB .field .json .number, .container.profile .columnB .field .data .number { + color: darkorange; +} +.container.profile .columnB .field .json .boolean, .container.profile .columnB .field .data .boolean { + color: #373737; +} +.container.profile .columnB .field .json .null, .container.profile .columnB .field .data .null { + color: #373737; +} +.container.profile .columnB .field.advanced-switch-wrapper { + display: flex; + align-items: center; +} +.container.profile .columnB .field.advanced-switch-wrapper input[type=checkbox] { + height: 0; + width: 0; + visibility: hidden; + display: none; +} +.container.profile .columnB .field.advanced-switch-wrapper label:first-of-type { + cursor: pointer; + text-indent: -9999px; + width: 3rem; + height: 1.4rem; + background: grey; + display: inline-block; + border-radius: 100px; + position: relative; + margin-right: 0.5rem; +} +.container.profile .columnB .field.advanced-switch-wrapper label:first-of-type:after { + content: ""; + position: absolute; + top: 2px; + left: 2px; + width: 1.2rem; + height: 1.2rem; + background: #fff; + border-radius: 1rem; + transition: 0.5s; +} +.container.profile .columnB .field.advanced-switch-wrapper input:checked + label { + background: #E32A6D; +} +.container.profile .columnB .field.advanced-switch-wrapper input:checked + label:first-of-type:after { + left: calc(100% - 2px); + transform: translateX(-100%); +} +.container.profile .columnB .field.advanced-switch-wrapper label:first-of-type:active:after { + width: 130px; +} .container.profile .columnC { flex-basis: 25%; margin-top: 2rem; @@ -312,30 +391,9 @@ a { } } -pre { - outline: 1px solid #ccc; - padding: 5px; - margin: 5px; -} - -.string { - color: green; -} - -.number { - color: darkorange; -} - -.boolean { - color: blue; -} - -.null { - color: magenta; -} - -.key { - color: red; +.footer { + font-size: 0.8rem; + text-align: center; } /*# sourceMappingURL=styles.css.map */ diff --git a/static/styles.css.map b/static/styles.css.map index b02dc48..693d9dc 100644 --- a/static/styles.css.map +++ b/static/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;;AAED;EACC,OA1BS;;;AA4BV;EACC;EACA;EACA;EACA;EACA;EACA,kBA5BoB;EA6BpB;EACA;;AACA;EACC;EACA;EACA,kBAjCmB;EAkCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;;AAGF;EACC;EACA;EACA;;AACC;EAJF;IAKE;IACE;IACF;;;;AAGF;EACC;EACA;EACA;;;AAED;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;IACA,OA7GK;;;AAiHR;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;EACA;EACA;EACA,OAtIO;;AAuIP;EALD;IAME;;;AAIH;EACC;EACA;EAKA;EACA;EACA;EACA;;AAPA;EAHD;IAIE;IACA;;;AAMD;EACC;;AACA;EACC,OA1JM;;AA4JP;EALD;IAME;;;AAGF;EACC;EACA;EACA;EACA,kBA7JkB;;AA8JlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OA/KM;;AAmLT;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;;AACA;EACC;;AAED;EAND;IAOE;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,OA7OM;EA8ON,kBAxOiB;EAyOjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OA7PI;;;AAgQN;EACC,kBA1PgB;;AA8PjB;EADD;IAEE;;;AAED;EACC,kBAjQgB;EAkQhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBAtQe;;AA0QlB;EACC;EACA;EACA,OArRM;;AAsRN;EAJD;IAKE;;;;AAQL;EAAK;EAAyB;EAAc;;;AAC5C;EAAU;;;AACV;EAAU;;;AACV;EAAW;;;AACX;EAAQ;;;AACR;EAAO","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;;AAED;EACC,OA1BS;;;AA4BV;EACC;EACA;EACA;EACA;EACA;EACA,kBA5BoB;EA6BpB;EACA;;AACA;EACC;EACA;EACA,kBAjCmB;EAkCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;;AAGF;EACC;EACA;EACA;;AACC;EAJF;IAKE;IACE;IACF;;;;AAGF;EACC;EACA;EACA;;;AAED;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;IACA,OA7GK;;;AAiHR;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;EACA;EACA;EACA,OAtIO;;AAuIP;EALD;IAME;;;AAIH;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EAPD;IAQE;IACA;IACA;;;AAED;EACC;;AACA;EACC,OA3JM;;AA6JP;EALD;IAME;;;AAGF;EACC;EACA;EACA;EACA,kBA9JkB;;AA+JlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OAhLM;;AAkLP;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA,OA5LK;EA6LL,kBA5LK;;AA+LP;EACC;EACA;EACA,kBA3LiB;EA4LjB;EACA;;AAEA;EACC;EACA;EACA,OAxMK;;AA2MN;EAAU,OA7MJ;;AA8MN;EAAU;;AACV;EAAW,OA/ML;;AAgNN;EAAQ,OAhNF;;AAmNP;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC,YArPK;;AAwPN;EACC;EACA;;AAGD;EACC;;AAOJ;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;;AACA;EACC;;AAED;EAND;IAOE;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,OA/TM;EAgUN,kBA1TiB;EA2TjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OA/UI;;;AAkVN;EACC,kBA5UgB;;AAgVjB;EADD;IAEE;;;AAED;EACC,kBAnVgB;EAoVhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBAxVe;;AA4VlB;EACC;EACA;EACA,OAvWM;;AAwWN;EAJD;IAKE;;;;AAOL;EACC;EACA","file":"styles.css"} \ No newline at end of file diff --git a/static/styles.scss b/static/styles.scss index 1b39a60..bbc221a 100644 --- a/static/styles.scss +++ b/static/styles.scss @@ -69,7 +69,7 @@ a { align-items: center; @media (max-width: 580px) { display: block; - width: 90%; + padding: 0 1rem; margin: 0 auto; } } @@ -142,14 +142,15 @@ a { .columnB { flex-basis: 50%; max-width: 50%; - @media (max-width: 580px) { - flex-basis: 100%; - max-width: 100%; - } flex-grow: 0; flex-shrink: 0; word-wrap: break-word; margin-right: 1vw; + @media (max-width: 580px) { + flex-basis: 100%; + max-width: 100%; + margin-right: 0; + } .name { font-size: 1.6rem; .display { @@ -177,6 +178,87 @@ a { font-size: 0.8rem; color: $color_3; } + &.advanced { + display: none; + &.visible { + display: block; + } + .label { + padding: 0.2rem 1rem; + margin: 0 -1rem; + color: $color_1; + background-color: $color_2; + } + } + .json, .data { + white-space: pre-wrap; + word-break: break-all; + background-color: $background-color_3; + padding: 1rem; + margin: 0 -1rem; + + .key { + display: inline-block; + margin-top: 0.5rem; + color: $color_3; + } + + .string { color: $color_1; } + .number { color: darkorange; } + .boolean { color: $color_1; } + .null { color: $color_1; } + } + + &.advanced-switch-wrapper { + display: flex; + align-items: center; + + input[type=checkbox]{ + height: 0; + width: 0; + visibility: hidden; + display: none; + } + + label:first-of-type { + cursor: pointer; + text-indent: -9999px; + width: 3rem; + height: 1.4rem; + background: grey; + display: inline-block; + border-radius: 100px; + position: relative; + margin-right: 0.5rem; + } + + label:first-of-type:after { + content: ''; + position: absolute; + top: 2px; + left: 2px; + width: 1.2rem; + height: 1.2rem; + background: #fff; + border-radius: 1rem; + transition: 0.5s; + } + + input:checked + label { + background: $color_3; + } + + input:checked + label:first-of-type:after { + left: calc(100% - 2px); + transform: translateX(-100%); + } + + label:first-of-type:active:after { + width: 130px; + } + + } + } } .columnC { @@ -288,10 +370,7 @@ a { } } - -pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; } -.string { color: green; } -.number { color: darkorange; } -.boolean { color: blue; } -.null { color: magenta; } -.key { color: red; } \ No newline at end of file +.footer { + font-size: 0.8rem; + text-align: center; +} \ No newline at end of file From bab0ecf038c6a247b76f73e86fc14cbc5a72bb42 Mon Sep 17 00:00:00 2001 From: Daniele Tonon Date: Tue, 23 May 2023 11:17:59 +0200 Subject: [PATCH 05/26] Remove the saas compilation from justfile's build action No needed, the css must by compiled at avery scss' update --- justfile | 1 - 1 file changed, 1 deletion(-) diff --git a/justfile b/justfile index 688363a..2716fa3 100644 --- a/justfile +++ b/justfile @@ -1,5 +1,4 @@ build: - sass -s compressed static/styles.scss static/styles.css CC=$(which musl-gcc) go build -ldflags='-s -w -linkmode external -extldflags "-static"' -o ./njump deploy: build From 5ba8499d88c18038df70b161cd6ffec1966aac69 Mon Sep 17 00:00:00 2001 From: Daniele Tonon Date: Tue, 23 May 2023 14:38:16 +0200 Subject: [PATCH 06/26] Improve switch design --- static/styles.css | 26 +++++++++++++++++++------- static/styles.css.map | 2 +- static/styles.scss | 22 +++++++++++++++------- 3 files changed, 35 insertions(+), 15 deletions(-) diff --git a/static/styles.css b/static/styles.css index c268a48..12277a4 100644 --- a/static/styles.css +++ b/static/styles.css @@ -243,24 +243,36 @@ a { .container.profile .columnB .field.advanced-switch-wrapper label:first-of-type { cursor: pointer; text-indent: -9999px; - width: 3rem; - height: 1.4rem; - background: grey; + width: 2.6rem; + height: 1.2rem; + background: #5A5A5A; display: inline-block; border-radius: 100px; position: relative; margin-right: 0.5rem; } +@media (max-width: 580px) { + .container.profile .columnB .field.advanced-switch-wrapper label:first-of-type { + width: 3rem; + height: 1.4rem; + } +} .container.profile .columnB .field.advanced-switch-wrapper label:first-of-type:after { content: ""; position: absolute; top: 2px; left: 2px; - width: 1.2rem; - height: 1.2rem; + width: 1rem; + height: 1rem; background: #fff; border-radius: 1rem; - transition: 0.5s; + transition: 0.2s; +} +@media (max-width: 580px) { + .container.profile .columnB .field.advanced-switch-wrapper label:first-of-type:after { + width: 1.2rem; + height: 1.2rem; + } } .container.profile .columnB .field.advanced-switch-wrapper input:checked + label { background: #E32A6D; @@ -270,7 +282,7 @@ a { transform: translateX(-100%); } .container.profile .columnB .field.advanced-switch-wrapper label:first-of-type:active:after { - width: 130px; + width: 2rem; } .container.profile .columnC { flex-basis: 25%; diff --git a/static/styles.css.map b/static/styles.css.map index 693d9dc..81f9223 100644 --- a/static/styles.css.map +++ b/static/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;;AAED;EACC,OA1BS;;;AA4BV;EACC;EACA;EACA;EACA;EACA;EACA,kBA5BoB;EA6BpB;EACA;;AACA;EACC;EACA;EACA,kBAjCmB;EAkCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;;AAGF;EACC;EACA;EACA;;AACC;EAJF;IAKE;IACE;IACF;;;;AAGF;EACC;EACA;EACA;;;AAED;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;IACA,OA7GK;;;AAiHR;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;EACA;EACA;EACA,OAtIO;;AAuIP;EALD;IAME;;;AAIH;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EAPD;IAQE;IACA;IACA;;;AAED;EACC;;AACA;EACC,OA3JM;;AA6JP;EALD;IAME;;;AAGF;EACC;EACA;EACA;EACA,kBA9JkB;;AA+JlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OAhLM;;AAkLP;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA,OA5LK;EA6LL,kBA5LK;;AA+LP;EACC;EACA;EACA,kBA3LiB;EA4LjB;EACA;;AAEA;EACC;EACA;EACA,OAxMK;;AA2MN;EAAU,OA7MJ;;AA8MN;EAAU;;AACV;EAAW,OA/ML;;AAgNN;EAAQ,OAhNF;;AAmNP;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC,YArPK;;AAwPN;EACC;EACA;;AAGD;EACC;;AAOJ;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;;AACA;EACC;;AAED;EAND;IAOE;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,OA/TM;EAgUN,kBA1TiB;EA2TjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OA/UI;;;AAkVN;EACC,kBA5UgB;;AAgVjB;EADD;IAEE;;;AAED;EACC,kBAnVgB;EAoVhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBAxVe;;AA4VlB;EACC;EACA;EACA,OAvWM;;AAwWN;EAJD;IAKE;;;;AAOL;EACC;EACA","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;;AAED;EACC,OA1BS;;;AA4BV;EACC;EACA;EACA;EACA;EACA;EACA,kBA5BoB;EA6BpB;EACA;;AACA;EACC;EACA;EACA,kBAjCmB;EAkCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;;AAGF;EACC;EACA;EACA;;AACC;EAJF;IAKE;IACE;IACF;;;;AAGF;EACC;EACA;EACA;;;AAED;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;IACA,OA7GK;;;AAiHR;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;EACA;EACA;EACA,OAtIO;;AAuIP;EALD;IAME;;;AAIH;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EAPD;IAQE;IACA;IACA;;;AAED;EACC;;AACA;EACC,OA3JM;;AA6JP;EALD;IAME;;;AAGF;EACC;EACA;EACA;EACA,kBA9JkB;;AA+JlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OAhLM;;AAkLP;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA,OA5LK;EA6LL,kBA5LK;;AA+LP;EACC;EACA;EACA,kBA3LiB;EA4LjB;EACA;;AAEA;EACC;EACA;EACA,OAxMK;;AA2MN;EAAU,OA7MJ;;AA8MN;EAAU;;AACV;EAAW,OA/ML;;AAgNN;EAAQ,OAhNF;;AAmNP;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,YA1NgB;EA2NhB;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC,YA7PK;;AAgQN;EACC;EACA;;AAGD;EACC;;AAOJ;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;;AACA;EACC;;AAED;EAND;IAOE;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,OAvUM;EAwUN,kBAlUiB;EAmUjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OAvVI;;;AA0VN;EACC,kBApVgB;;AAwVjB;EADD;IAEE;;;AAED;EACC,kBA3VgB;EA4VhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBAhWe;;AAoWlB;EACC;EACA;EACA,OA/WM;;AAgXN;EAJD;IAKE;;;;AAOL;EACC;EACA","file":"styles.css"} \ No newline at end of file diff --git a/static/styles.scss b/static/styles.scss index bbc221a..5d78ccd 100644 --- a/static/styles.scss +++ b/static/styles.scss @@ -223,13 +223,17 @@ a { label:first-of-type { cursor: pointer; text-indent: -9999px; - width: 3rem; - height: 1.4rem; - background: grey; + width: 2.6rem; + height: 1.2rem; + background: $background-color_4; display: inline-block; border-radius: 100px; position: relative; margin-right: 0.5rem; + @media (max-width: 580px) { + width: 3rem; + height: 1.4rem; + } } label:first-of-type:after { @@ -237,11 +241,15 @@ a { position: absolute; top: 2px; left: 2px; - width: 1.2rem; - height: 1.2rem; + width: 1rem; + height: 1rem; background: #fff; border-radius: 1rem; - transition: 0.5s; + transition: 0.2s; + @media (max-width: 580px) { + width: 1.2rem; + height: 1.2rem; + } } input:checked + label { @@ -254,7 +262,7 @@ a { } label:first-of-type:active:after { - width: 130px; + width: 2rem; } } From f4c4fb51cb1aad433ac4a60b1861066406978da5 Mon Sep 17 00:00:00 2001 From: Daniele Tonon Date: Tue, 23 May 2023 14:39:39 +0200 Subject: [PATCH 07/26] Fix a bug related to the possible cached state of the toggle --- event.html | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/event.html b/event.html index 87dc9d3..3927138 100644 --- a/event.html +++ b/event.html @@ -188,14 +188,24 @@ clients_list.classList.toggle('up'); }); + function updateAdvanceSwitch() { + advanced_list.forEach(element => { + if (advanceSwitch.checked) { + element.classList.add('visible'); + } else { + element.classList.remove('visible'); + } + }); + } + const advanceSwitch = document.querySelector('.advanced-switch'); const advanced_list = document.querySelectorAll('.advanced'); advanceSwitch.addEventListener('change', function() { - advanced_list.forEach(element => { - element.classList.toggle('visible'); - }); + updateAdvanceSwitch() }); + updateAdvanceSwitch(); // Check at the page load, some browsers keep the state in cache + function syntaxHighlight(json) { json = json.replace(/&/g, '&').replace(//g, '>'); return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) { From 9a16e0a51236424eabeb2a612a07099d362e8242 Mon Sep 17 00:00:00 2001 From: Daniele Tonon Date: Tue, 23 May 2023 14:50:04 +0200 Subject: [PATCH 08/26] Lock background scrolling when the menu is open (mobile) --- event.html | 5 +++++ static/styles.css | 5 +++++ static/styles.css.map | 2 +- static/styles.scss | 5 +++++ 4 files changed, 16 insertions(+), 1 deletion(-) diff --git a/event.html b/event.html index 3927138..5103bb5 100644 --- a/event.html +++ b/event.html @@ -186,6 +186,11 @@ const clients_list = document.querySelector('.columnC'); shareButton.addEventListener('click', function() { clients_list.classList.toggle('up'); + if (clients_list.classList.contains('up')) { + document.body.classList.add('lock'); + } else { + document.body.classList.remove('lock'); + } }); function updateAdvanceSwitch() { diff --git a/static/styles.css b/static/styles.css index 12277a4..6605da9 100644 --- a/static/styles.css +++ b/static/styles.css @@ -10,6 +10,11 @@ body { margin: 0; margin-bottom: 4rem; } +@media (max-width: 580px) { + body.lock { + overflow: hidden; + } +} a { color: #373737; diff --git a/static/styles.css.map b/static/styles.css.map index 81f9223..3000c36 100644 --- a/static/styles.css.map +++ b/static/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;;AAED;EACC,OA1BS;;;AA4BV;EACC;EACA;EACA;EACA;EACA;EACA,kBA5BoB;EA6BpB;EACA;;AACA;EACC;EACA;EACA,kBAjCmB;EAkCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;;AAGF;EACC;EACA;EACA;;AACC;EAJF;IAKE;IACE;IACF;;;;AAGF;EACC;EACA;EACA;;;AAED;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;IACA,OA7GK;;;AAiHR;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;EACA;EACA;EACA,OAtIO;;AAuIP;EALD;IAME;;;AAIH;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EAPD;IAQE;IACA;IACA;;;AAED;EACC;;AACA;EACC,OA3JM;;AA6JP;EALD;IAME;;;AAGF;EACC;EACA;EACA;EACA,kBA9JkB;;AA+JlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OAhLM;;AAkLP;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA,OA5LK;EA6LL,kBA5LK;;AA+LP;EACC;EACA;EACA,kBA3LiB;EA4LjB;EACA;;AAEA;EACC;EACA;EACA,OAxMK;;AA2MN;EAAU,OA7MJ;;AA8MN;EAAU;;AACV;EAAW,OA/ML;;AAgNN;EAAQ,OAhNF;;AAmNP;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,YA1NgB;EA2NhB;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC,YA7PK;;AAgQN;EACC;EACA;;AAGD;EACC;;AAOJ;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;;AACA;EACC;;AAED;EAND;IAOE;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,OAvUM;EAwUN,kBAlUiB;EAmUjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OAvVI;;;AA0VN;EACC,kBApVgB;;AAwVjB;EADD;IAEE;;;AAED;EACC,kBA3VgB;EA4VhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBAhWe;;AAoWlB;EACC;EACA;EACA,OA/WM;;AAgXN;EAJD;IAKE;;;;AAOL;EACC;EACA","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;AAEC;EADD;IAEE;;;;AAIH;EACC,OA/BS;;;AAiCV;EACC;EACA;EACA;EACA;EACA;EACA,kBAjCoB;EAkCpB;EACA;;AACA;EACC;EACA;EACA,kBAtCmB;EAuCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;;AAGF;EACC;EACA;EACA;;AACC;EAJF;IAKE;IACE;IACF;;;;AAGF;EACC;EACA;EACA;;;AAED;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;IACA,OAlHK;;;AAsHR;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;EACA;EACA;EACA,OA3IO;;AA4IP;EALD;IAME;;;AAIH;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EAPD;IAQE;IACA;IACA;;;AAED;EACC;;AACA;EACC,OAhKM;;AAkKP;EALD;IAME;;;AAGF;EACC;EACA;EACA;EACA,kBAnKkB;;AAoKlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OArLM;;AAuLP;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA,OAjMK;EAkML,kBAjMK;;AAoMP;EACC;EACA;EACA,kBAhMiB;EAiMjB;EACA;;AAEA;EACC;EACA;EACA,OA7MK;;AAgNN;EAAU,OAlNJ;;AAmNN;EAAU;;AACV;EAAW,OApNL;;AAqNN;EAAQ,OArNF;;AAwNP;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,YA/NgB;EAgOhB;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC,YAlQK;;AAqQN;EACC;EACA;;AAGD;EACC;;AAOJ;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;;AACA;EACC;;AAED;EAND;IAOE;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,OA5UM;EA6UN,kBAvUiB;EAwUjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OA5VI;;;AA+VN;EACC,kBAzVgB;;AA6VjB;EADD;IAEE;;;AAED;EACC,kBAhWgB;EAiWhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBArWe;;AAyWlB;EACC;EACA;EACA,OApXM;;AAqXN;EAJD;IAKE;;;;AAOL;EACC;EACA","file":"styles.css"} \ No newline at end of file diff --git a/static/styles.scss b/static/styles.scss index 5d78ccd..8cd4542 100644 --- a/static/styles.scss +++ b/static/styles.scss @@ -22,6 +22,11 @@ body { color: $color_1; margin: 0; margin-bottom: 4rem; + &.lock { + @media (max-width: 580px) { + overflow: hidden; + } + } } a { color: $color_1; From 28272617c6ab290c4a3c64be567061d411215ac6 Mon Sep 17 00:00:00 2001 From: Daniele Tonon Date: Tue, 23 May 2023 14:56:14 +0200 Subject: [PATCH 09/26] Fix emoji rendering --- event.html | 1 + 1 file changed, 1 insertion(+) diff --git a/event.html b/event.html index 5103bb5..0f5e3f2 100644 --- a/event.html +++ b/event.html @@ -1,5 +1,6 @@ + {{if eq .type "profile"}} Nostr Public Key {{.npub}} From 75c7f08cbeacdd79aedf56727499884f94091467 Mon Sep 17 00:00:00 2001 From: Daniele Tonon Date: Tue, 23 May 2023 15:10:52 +0200 Subject: [PATCH 10/26] Refactor css --- static/styles.css | 48 +++++++++++++++++++++---------------------- static/styles.css.map | 2 +- static/styles.scss | 37 +++++++++++++++------------------ 3 files changed, 41 insertions(+), 46 deletions(-) diff --git a/static/styles.css b/static/styles.css index 6605da9..7137efd 100644 --- a/static/styles.css +++ b/static/styles.css @@ -211,30 +211,6 @@ a { color: #373737; background-color: #C9C9C9; } -.container.profile .columnB .field .json, .container.profile .columnB .field .data { - white-space: pre-wrap; - word-break: break-all; - background-color: #F3F3F3; - padding: 1rem; - margin: 0 -1rem; -} -.container.profile .columnB .field .json .key, .container.profile .columnB .field .data .key { - display: inline-block; - margin-top: 0.5rem; - color: #E32A6D; -} -.container.profile .columnB .field .json .string, .container.profile .columnB .field .data .string { - color: #373737; -} -.container.profile .columnB .field .json .number, .container.profile .columnB .field .data .number { - color: darkorange; -} -.container.profile .columnB .field .json .boolean, .container.profile .columnB .field .data .boolean { - color: #373737; -} -.container.profile .columnB .field .json .null, .container.profile .columnB .field .data .null { - color: #373737; -} .container.profile .columnB .field.advanced-switch-wrapper { display: flex; align-items: center; @@ -289,6 +265,30 @@ a { .container.profile .columnB .field.advanced-switch-wrapper label:first-of-type:active:after { width: 2rem; } +.container.profile .columnB .field .json, .container.profile .columnB .field .data { + white-space: pre-wrap; + word-break: break-all; + background-color: #F3F3F3; + padding: 1rem; + margin: 0 -1rem; +} +.container.profile .columnB .field .json .key, .container.profile .columnB .field .data .key { + display: inline-block; + margin-top: 0.5rem; + color: #E32A6D; +} +.container.profile .columnB .field .json .string, .container.profile .columnB .field .data .string { + color: #373737; +} +.container.profile .columnB .field .json .number, .container.profile .columnB .field .data .number { + color: darkorange; +} +.container.profile .columnB .field .json .boolean, .container.profile .columnB .field .data .boolean { + color: #373737; +} +.container.profile .columnB .field .json .null, .container.profile .columnB .field .data .null { + color: #373737; +} .container.profile .columnC { flex-basis: 25%; margin-top: 2rem; diff --git a/static/styles.css.map b/static/styles.css.map index 3000c36..a2cc165 100644 --- a/static/styles.css.map +++ b/static/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;AAEC;EADD;IAEE;;;;AAIH;EACC,OA/BS;;;AAiCV;EACC;EACA;EACA;EACA;EACA;EACA,kBAjCoB;EAkCpB;EACA;;AACA;EACC;EACA;EACA,kBAtCmB;EAuCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;;AAGF;EACC;EACA;EACA;;AACC;EAJF;IAKE;IACE;IACF;;;;AAGF;EACC;EACA;EACA;;;AAED;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;IACA,OAlHK;;;AAsHR;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;EACA;EACA;EACA,OA3IO;;AA4IP;EALD;IAME;;;AAIH;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EAPD;IAQE;IACA;IACA;;;AAED;EACC;;AACA;EACC,OAhKM;;AAkKP;EALD;IAME;;;AAGF;EACC;EACA;EACA;EACA,kBAnKkB;;AAoKlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OArLM;;AAuLP;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA,OAjMK;EAkML,kBAjMK;;AAoMP;EACC;EACA;EACA,kBAhMiB;EAiMjB;EACA;;AAEA;EACC;EACA;EACA,OA7MK;;AAgNN;EAAU,OAlNJ;;AAmNN;EAAU;;AACV;EAAW,OApNL;;AAqNN;EAAQ,OArNF;;AAwNP;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,YA/NgB;EAgOhB;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC,YAlQK;;AAqQN;EACC;EACA;;AAGD;EACC;;AAOJ;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;;AACA;EACC;;AAED;EAND;IAOE;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,OA5UM;EA6UN,kBAvUiB;EAwUjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OA5VI;;;AA+VN;EACC,kBAzVgB;;AA6VjB;EADD;IAEE;;;AAED;EACC,kBAhWgB;EAiWhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBArWe;;AAyWlB;EACC;EACA;EACA,OApXM;;AAqXN;EAJD;IAKE;;;;AAOL;EACC;EACA","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;AAEC;EADD;IAEE;;;;AAIH;EACC,OA/BS;;;AAiCV;EACC;EACA;EACA;EACA;EACA;EACA,kBAjCoB;EAkCpB;EACA;;AACA;EACC;EACA;EACA,kBAtCmB;EAuCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;;AAGF;EACC;EACA;EACA;;AACC;EAJF;IAKE;IACE;IACF;;;;AAGF;EACC;EACA;EACA;;;AAED;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;IACA,OAlHK;;;AAsHR;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;EACA;EACA;EACA,OA3IO;;AA4IP;EALD;IAME;;;AAIH;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EAPD;IAQE;IACA;IACA;;;AAED;EACC;;AACA;EACC,OAhKM;;AAkKP;EALD;IAME;;;AAGF;EACC;EACA;EACA;EACA,kBAnKkB;;AAoKlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OArLM;;AAuLP;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA,OAjMK;EAkML,kBAjMK;;AAoMP;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,YA5MgB;EA6MhB;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC,YA/OK;;AAkPN;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA,kBAzPiB;EA0PjB;EACA;;AACA;EACC;EACA;EACA,OArQK;;AAuQN;EAAU,OAzQJ;;AA0QN;EAAU;;AACV;EAAW,OA3QL;;AA4QN;EAAQ,OA5QF;;AAgRT;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;;AACA;EACC;;AAED;EAND;IAOE;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,OAxUM;EAyUN,kBAnUiB;EAoUjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OAxVI;;;AA2VN;EACC,kBArVgB;;AAyVjB;EADD;IAEE;;;AAED;EACC,kBA5VgB;EA6VhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBAjWe;;AAqWlB;EACC;EACA;EACA,OAhXM;;AAiXN;EAJD;IAKE;;;;AAML;EACC;EACA","file":"styles.css"} \ No newline at end of file diff --git a/static/styles.scss b/static/styles.scss index 8cd4542..93508b1 100644 --- a/static/styles.scss +++ b/static/styles.scss @@ -195,25 +195,6 @@ a { background-color: $color_2; } } - .json, .data { - white-space: pre-wrap; - word-break: break-all; - background-color: $background-color_3; - padding: 1rem; - margin: 0 -1rem; - - .key { - display: inline-block; - margin-top: 0.5rem; - color: $color_3; - } - - .string { color: $color_1; } - .number { color: darkorange; } - .boolean { color: $color_1; } - .null { color: $color_1; } - } - &.advanced-switch-wrapper { display: flex; align-items: center; @@ -271,7 +252,22 @@ a { } } - + .json, .data { + white-space: pre-wrap; + word-break: break-all; + background-color: $background-color_3; + padding: 1rem; + margin: 0 -1rem; + .key { + display: inline-block; + margin-top: 0.5rem; + color: $color_3; + } + .string { color: $color_1; } + .number { color: darkorange; } + .boolean { color: $color_1; } + .null { color: $color_1; } + } } } .columnC { @@ -382,7 +378,6 @@ a { } } } - .footer { font-size: 0.8rem; text-align: center; From e6a3bea19235f4199a090190ffe4912a235895c9 Mon Sep 17 00:00:00 2001 From: Daniele Tonon Date: Tue, 23 May 2023 15:11:58 +0200 Subject: [PATCH 11/26] Add last update in the mobile --- event.html | 5 +++++ static/styles.css | 10 ++++++++++ static/styles.css.map | 2 +- static/styles.scss | 8 ++++++++ 4 files changed, 24 insertions(+), 1 deletion(-) diff --git a/event.html b/event.html index 0f5e3f2..2d3ec12 100644 --- a/event.html +++ b/event.html @@ -104,6 +104,11 @@
{{.nevent}}
+
+ Last update:
+ {{.createdAt}} +
+
diff --git a/static/styles.css b/static/styles.css index 7137efd..4f06d09 100644 --- a/static/styles.css +++ b/static/styles.css @@ -289,6 +289,16 @@ a { .container.profile .columnB .field .json .null, .container.profile .columnB .field .data .null { color: #373737; } +.container.profile .columnB .field.last_update { + display: none; +} +@media (max-width: 580px) { + .container.profile .columnB .field.last_update { + display: block; + font-size: 0.8em; + color: #C9C9C9; + } +} .container.profile .columnC { flex-basis: 25%; margin-top: 2rem; diff --git a/static/styles.css.map b/static/styles.css.map index a2cc165..28bd129 100644 --- a/static/styles.css.map +++ b/static/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;AAEC;EADD;IAEE;;;;AAIH;EACC,OA/BS;;;AAiCV;EACC;EACA;EACA;EACA;EACA;EACA,kBAjCoB;EAkCpB;EACA;;AACA;EACC;EACA;EACA,kBAtCmB;EAuCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;;AAGF;EACC;EACA;EACA;;AACC;EAJF;IAKE;IACE;IACF;;;;AAGF;EACC;EACA;EACA;;;AAED;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;IACA,OAlHK;;;AAsHR;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;EACA;EACA;EACA,OA3IO;;AA4IP;EALD;IAME;;;AAIH;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EAPD;IAQE;IACA;IACA;;;AAED;EACC;;AACA;EACC,OAhKM;;AAkKP;EALD;IAME;;;AAGF;EACC;EACA;EACA;EACA,kBAnKkB;;AAoKlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OArLM;;AAuLP;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA,OAjMK;EAkML,kBAjMK;;AAoMP;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,YA5MgB;EA6MhB;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC,YA/OK;;AAkPN;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA,kBAzPiB;EA0PjB;EACA;;AACA;EACC;EACA;EACA,OArQK;;AAuQN;EAAU,OAzQJ;;AA0QN;EAAU;;AACV;EAAW,OA3QL;;AA4QN;EAAQ,OA5QF;;AAgRT;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;;AACA;EACC;;AAED;EAND;IAOE;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,OAxUM;EAyUN,kBAnUiB;EAoUjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OAxVI;;;AA2VN;EACC,kBArVgB;;AAyVjB;EADD;IAEE;;;AAED;EACC,kBA5VgB;EA6VhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBAjWe;;AAqWlB;EACC;EACA;EACA,OAhXM;;AAiXN;EAJD;IAKE;;;;AAML;EACC;EACA","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;AAEC;EADD;IAEE;;;;AAIH;EACC,OA/BS;;;AAiCV;EACC;EACA;EACA;EACA;EACA;EACA,kBAjCoB;EAkCpB;EACA;;AACA;EACC;EACA;EACA,kBAtCmB;EAuCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;;AAGF;EACC;EACA;EACA;;AACC;EAJF;IAKE;IACE;IACF;;;;AAGF;EACC;EACA;EACA;;;AAED;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;IACA,OAlHK;;;AAsHR;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;EACA;EACA;EACA,OA3IO;;AA4IP;EALD;IAME;;;AAIH;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EAPD;IAQE;IACA;IACA;;;AAED;EACC;;AACA;EACC,OAhKM;;AAkKP;EALD;IAME;;;AAGF;EACC;EACA;EACA;EACA,kBAnKkB;;AAoKlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OArLM;;AAuLP;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA,OAjMK;EAkML,kBAjMK;;AAoMP;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,YA5MgB;EA6MhB;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC,YA/OK;;AAkPN;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA,kBAzPiB;EA0PjB;EACA;;AACA;EACC;EACA;EACA,OArQK;;AAuQN;EAAU,OAzQJ;;AA0QN;EAAU;;AACV;EAAW,OA3QL;;AA4QN;EAAQ,OA5QF;;AA8QP;EACC;;AACA;EAFD;IAGE;IACA;IACA,OAlRK;;;AAuRT;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;;AACA;EACC;;AAED;EAND;IAOE;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,OAhVM;EAiVN,kBA3UiB;EA4UjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OAhWI;;;AAmWN;EACC,kBA7VgB;;AAiWjB;EADD;IAEE;;;AAED;EACC,kBApWgB;EAqWhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBAzWe;;AA6WlB;EACC;EACA;EACA,OAxXM;;AAyXN;EAJD;IAKE;;;;AAML;EACC;EACA","file":"styles.css"} \ No newline at end of file diff --git a/static/styles.scss b/static/styles.scss index 93508b1..6f3e9d0 100644 --- a/static/styles.scss +++ b/static/styles.scss @@ -268,6 +268,14 @@ a { .boolean { color: $color_1; } .null { color: $color_1; } } + &.last_update { + display: none; + @media (max-width: 580px) { + display: block; + font-size: 0.8em; + color: $color_2; + } + } } } .columnC { From 1e408d7fa086303c8422c61a1e2e6d70f333b173 Mon Sep 17 00:00:00 2001 From: Daniele Tonon Date: Tue, 23 May 2023 15:53:59 +0200 Subject: [PATCH 12/26] Uppercase the first char of web clients --- utils.go | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/utils.go b/utils.go index 92cf320..5e858c3 100644 --- a/utils.go +++ b/utils.go @@ -38,28 +38,28 @@ func generateClientList(code string, event *nostr.Event) []map[string]string { if strings.HasPrefix(code, "nevent") || strings.HasPrefix(code, "note") { return []map[string]string{ {"name": "native client", "url": "nostr:" + code}, - {"name": "snort", "url": "https://snort.social/e/" + code}, - {"name": "coracle", "url": "https://coracle.social/" + code}, - {"name": "satellite", "url": "https://satellite.earth/thread/" + event.ID}, - {"name": "iris", "url": "https://iris.to/" + code}, - {"name": "yosup", "url": "https://yosup.app/thread/" + event.ID}, - {"name": "nostr.band", "url": "https://nostr.band/" + code}, - {"name": "primal", "url": "https://primal.net/thread/" + event.ID}, - {"name": "nostribe", "url": "https://www.nostribe.com/post/" + event.ID}, - {"name": "nostrid", "url": "https://web.nostrid.app/note/" + event.ID}, + {"name": "Snort", "url": "https://Snort.social/e/" + code}, + {"name": "Coracle", "url": "https://coracle.social/" + code}, + {"name": "Satellite", "url": "https://satellite.earth/thread/" + event.ID}, + {"name": "Iris", "url": "https://iris.to/" + code}, + {"name": "Yosup", "url": "https://yosup.app/thread/" + event.ID}, + {"name": "Nostr.band", "url": "https://nostr.band/" + code}, + {"name": "Primal", "url": "https://primal.net/thread/" + event.ID}, + {"name": "Nostribe", "url": "https://www.nostribe.com/post/" + event.ID}, + {"name": "Nostrid", "url": "https://web.nostrid.app/note/" + event.ID}, } } else if strings.HasPrefix(code, "npub") || strings.HasPrefix(code, "nprofile") { return []map[string]string{ {"name": "native client", "url": "nostr:" + code}, - {"name": "snort", "url": "https://snort.social/p/" + code}, - {"name": "coracle", "url": "https://coracle.social/" + code}, - {"name": "satellite", "url": "https://satellite.earth/@" + code}, - {"name": "iris", "url": "https://iris.to/" + code}, - {"name": "yosup", "url": "https://yosup.app/profile/" + event.PubKey}, - {"name": "nostr.band", "url": "https://nostr.band/" + code}, - {"name": "primal", "url": "https://primal.net/profile/" + event.PubKey}, - {"name": "nostribe", "url": "https://www.nostribe.com/profile/" + event.PubKey}, - {"name": "nostrid", "url": "https://web.nostrid.app/account/" + event.PubKey}, + {"name": "Snort", "url": "https://snort.social/p/" + code}, + {"name": "Coracle", "url": "https://coracle.social/" + code}, + {"name": "Satellite", "url": "https://satellite.earth/@" + code}, + {"name": "Iris", "url": "https://iris.to/" + code}, + {"name": "Yosup", "url": "https://yosup.app/profile/" + event.PubKey}, + {"name": "Nostr.band", "url": "https://nostr.band/" + code}, + {"name": "Primal", "url": "https://primal.net/profile/" + event.PubKey}, + {"name": "Nostribe", "url": "https://www.nostribe.com/profile/" + event.PubKey}, + {"name": "Nostrid", "url": "https://web.nostrid.app/account/" + event.PubKey}, } } else if strings.HasPrefix(code, "naddr") { return []map[string]string{ From f237999b04508b209cde49f269ca9758735375b1 Mon Sep 17 00:00:00 2001 From: Daniele Tonon Date: Tue, 23 May 2023 18:41:08 +0200 Subject: [PATCH 13/26] Add a querystring param to automatically open the details area --- event.html | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/event.html b/event.html index 2d3ec12..fdda216 100644 --- a/event.html +++ b/event.html @@ -216,6 +216,12 @@ }); updateAdvanceSwitch(); // Check at the page load, some browsers keep the state in cache + + var url = new URL(window.location.href); + var searchParams = new URLSearchParams(url.search); + if (searchParams.has('details') && searchParams.get('details') == 'yes') { + advanceSwitch.click(); + } function syntaxHighlight(json) { json = json.replace(/&/g, '&').replace(//g, '>'); From 3a7e3d02ad0fabf2731081926813cce0280c415e Mon Sep 17 00:00:00 2001 From: Daniele Tonon Date: Wed, 24 May 2023 20:46:40 +0200 Subject: [PATCH 14/26] Reorder clients list by usage --- event.html | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/event.html b/event.html index fdda216..4d3db5c 100644 --- a/event.html +++ b/event.html @@ -136,11 +136,10 @@
-
+
{{range .clients}}
Open {{.type}} in {{.name}} -
{{end}}
@@ -164,12 +163,24 @@ let url = clients[i].href let key = 'nj:' + type + ':' + name let count = parseInt(localStorage.getItem(key) || 0) - clients[i].nextElementSibling.innerText = count + clients[i].parentNode.setAttribute("count", count) + clients[i].parentNode.setAttribute("title", "Used " + count + " times") clients[i].addEventListener('click', () => { localStorage.setItem(key, count + 1) }) counts.push([count, name, url]) } + + // Reorder clients following the counter + let clients_wrapper = document.querySelector('.clients_wrapper') + const elements = Array.from(clients_wrapper.getElementsByClassName("btn")); + elements.sort((a, b) => { + const rankA = parseInt(a.getAttribute("count")); + const rankB = parseInt(b.getAttribute("count")); + return rankB - rankA; + }); + elements.forEach((element) => clients_wrapper.appendChild(element)); + counts.sort((a, b) => b[0] - a[0]) let tailsum = counts.slice(1).reduce((acc, c) => acc + c[0], 0) From 0c90ec92ea3d95cab386d7982a297b36eb42bb98 Mon Sep 17 00:00:00 2001 From: Daniele Tonon Date: Thu, 25 May 2023 13:58:30 +0200 Subject: [PATCH 15/26] Revert prettyJsonOrRaw update and use go-nostr v1.8.4 for all user's metadata --- event.html | 12 ++++++------ go.mod | 5 ++++- go.sum | 14 ++++++++++++-- render.go | 12 +++++------- utils.go | 8 ++++---- 5 files changed, 31 insertions(+), 20 deletions(-) diff --git a/event.html b/event.html index 4d3db5c..f765f15 100644 --- a/event.html +++ b/event.html @@ -63,7 +63,7 @@
- {{.content_json.name}} {{.content_json.display_name}} + {{.metadata.Name}} {{.metadata.DisplayName}}
@@ -76,14 +76,14 @@
- {{.content_json.name}} {{.content_json.display_name}} + {{.metadata.Name}} {{.metadata.DisplayName}}
- {{.content_json.website}} + {{.metadata.Website}}
- {{.content_json.about}} + {{.metadata.About}}
@@ -92,11 +92,11 @@
NIP-05
- {{.content_json.nip05}} + {{.metadata.NIP05}}
LN Address
- {{.content_json.lud16}} + {{.metadata.LUD16}}
diff --git a/go.mod b/go.mod index cf0ba51..8c7b211 100644 --- a/go.mod +++ b/go.mod @@ -7,7 +7,7 @@ require ( github.com/die-net/lrucache v0.0.0-20220628165024-20a71bc65bf1 github.com/lukevers/freetype-go v0.0.0-20150513150840-77e276735410 github.com/mailru/easyjson v0.7.7 - github.com/nbd-wtf/go-nostr v0.18.1-0.20230509030905-52a493fd9666 + github.com/nbd-wtf/go-nostr v0.18.4 github.com/pelletier/go-toml v1.9.5 golang.org/x/image v0.0.0-20190802002840-cff245a6509b ) @@ -23,6 +23,9 @@ require ( github.com/gobwas/pool v0.2.1 // indirect github.com/gobwas/ws v1.2.0 // indirect github.com/josharian/intern v1.0.0 // indirect + github.com/tidwall/gjson v1.14.4 // indirect + github.com/tidwall/match v1.1.1 // indirect + github.com/tidwall/pretty v1.2.0 // indirect golang.org/x/exp v0.0.0-20221106115401-f9659909a136 // indirect golang.org/x/sys v0.6.0 // indirect ) diff --git a/go.sum b/go.sum index 65fea02..7800b26 100644 --- a/go.sum +++ b/go.sum @@ -69,8 +69,12 @@ github.com/lukevers/freetype-go v0.0.0-20150513150840-77e276735410 h1:ED5jVfC//X github.com/lukevers/freetype-go v0.0.0-20150513150840-77e276735410/go.mod h1:cnsFc3HOpydgckvXF3xq4fvlLFOAuTh4VyJ118x8LQc= github.com/mailru/easyjson v0.7.7 h1:UGYAvKxe3sBsEDzO8ZeWOSlIQfWFlxbzLZe7hwFURr0= github.com/mailru/easyjson v0.7.7/go.mod h1:xzfreul335JAWq5oZzymOObrkdz5UnU4kGfJJLY9Nlc= -github.com/nbd-wtf/go-nostr v0.18.1-0.20230509030905-52a493fd9666 h1:dWnwxgOl+dnVsKQLoNo5TaYJB7opG3LUIZ0YPl63iQI= -github.com/nbd-wtf/go-nostr v0.18.1-0.20230509030905-52a493fd9666/go.mod h1:fN8trCzHEtsf2954h8neqNERM/OXnCYI71nA4wWCobI= +github.com/nbd-wtf/go-nostr v0.18.4-0.20230514132335-123d3a6a9ab1 h1:rfkAcjBBR7j9aHRYIn+VjCO12lt8Bero5/cYPmO6Q6Q= +github.com/nbd-wtf/go-nostr v0.18.4-0.20230514132335-123d3a6a9ab1/go.mod h1:GPJOOK8US38kz+bfb9nWe873Xu0e6bXlThejOs1LTkc= +github.com/nbd-wtf/go-nostr v0.18.4-0.20230525112312-5c0f8bff83ea h1:L4eHtPd5bgj7Cl9j+TA5fZaQGVPt8SunZhqNtMbqzWo= +github.com/nbd-wtf/go-nostr v0.18.4-0.20230525112312-5c0f8bff83ea/go.mod h1:GPJOOK8US38kz+bfb9nWe873Xu0e6bXlThejOs1LTkc= +github.com/nbd-wtf/go-nostr v0.18.4 h1:P5qHEvvwS6DMaDMD82fP66M3kFBJnNQATczGH93rC0s= +github.com/nbd-wtf/go-nostr v0.18.4/go.mod h1:GPJOOK8US38kz+bfb9nWe873Xu0e6bXlThejOs1LTkc= github.com/nxadm/tail v1.4.4/go.mod h1:kenIhsEOeOJmVchQTgglprH7qJGnHDVpk1VPCcaMI8A= github.com/onsi/ginkgo v1.6.0/go.mod h1:lLunBs/Ym6LB5Z9jYTR76FiuTmxDTDusOGeTQH+WWjE= github.com/onsi/ginkgo v1.7.0/go.mod h1:lLunBs/Ym6LB5Z9jYTR76FiuTmxDTDusOGeTQH+WWjE= @@ -92,6 +96,12 @@ github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/ github.com/stretchr/testify v1.7.5 h1:s5PTfem8p8EbKQOctVV53k6jCJt3UX4IEJzwh+C324Q= github.com/stretchr/testify v1.7.5/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU= github.com/syndtr/goleveldb v1.0.1-0.20210819022825-2ae1ddf74ef7/go.mod h1:q4W45IWZaF22tdD+VEXcAWRA037jwmWEB5VWYORlTpc= +github.com/tidwall/gjson v1.14.4 h1:uo0p8EbA09J7RQaflQ1aBRffTR7xedD2bcIVSYxLnkM= +github.com/tidwall/gjson v1.14.4/go.mod h1:/wbyibRr2FHMks5tjHJ5F8dMZh3AcwJEMf5vlfC0lxk= +github.com/tidwall/match v1.1.1 h1:+Ho715JplO36QYgwN9PGYNhgZvoUSc9X2c80KVTi+GA= +github.com/tidwall/match v1.1.1/go.mod h1:eRSPERbgtNPcGhD8UCthc6PmLEQXEWd3PRB5JTxsfmM= +github.com/tidwall/pretty v1.2.0 h1:RWIZEg2iJ8/g6fDDYzMpobmaoGh5OLl4AXtGUGPcqCs= +github.com/tidwall/pretty v1.2.0/go.mod h1:ITEVvHYasfjBbM0u2Pg8T2nJnzm8xPwvNhhsoaGGjNU= golang.org/x/crypto v0.0.0-20170930174604-9419663f5a44/go.mod h1:6SG95UA2DQfeDnfUPMdvaQW0Q7yPrPDi9nlGo2tz2b4= golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w= golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto= diff --git a/render.go b/render.go index 8480536..f515591 100644 --- a/render.go +++ b/render.go @@ -143,17 +143,16 @@ func render(w http.ResponseWriter, r *http.Request) { // : '' textImageURL := "" - content := "" - content_json := make(map[string]interface{}) + description := "" if useTextImage { textImageURL = fmt.Sprintf("https://%s/image/%s", hostname, code) if subject != "" { - content = fmt.Sprintf("%s -- %s", subject, seenOnRelays) + description = fmt.Sprintf("%s -- %s", subject, seenOnRelays) } else { - content = seenOnRelays + description = seenOnRelays } } else { - content_json, content = prettyJsonOrRaw(event.Content) + description = prettyJsonOrRaw(event.Content) } eventJSON, _ := json.MarshalIndent(event, "", " ") @@ -169,8 +168,7 @@ func render(w http.ResponseWriter, r *http.Request) { "naddr": naddr, "metadata": metadata, "authorLong": authorLong, - "content": content, - "content_json": content_json, + "description": description, "textImageURL": textImageURL, "videoType": videoType, "image": image, diff --git a/utils.go b/utils.go index 5e858c3..214a94e 100644 --- a/utils.go +++ b/utils.go @@ -81,14 +81,14 @@ func mergeMaps[K comparable, V any](m1 map[K]V, m2 map[K]V) map[K]V { return m1 } -func prettyJsonOrRaw(j string) (map[string]interface{}, string) { - var parsedContent map[string]interface{} +func prettyJsonOrRaw(j string) string { + var parsedContent any if err := json.Unmarshal([]byte(j), &parsedContent); err == nil { if t, err := toml.Marshal(parsedContent); err == nil && len(t) > 0 { - return parsedContent, string(t) + return string(t) } } - return nil, j + return j } func getPreviewStyle(r *http.Request) string { From d01e6c5d04cb78002e8a14aa11f9354d336ce5bd Mon Sep 17 00:00:00 2001 From: Daniele Tonon Date: Thu, 25 May 2023 15:42:16 +0200 Subject: [PATCH 16/26] Split templates by event type Currently fallback to the raw.html if type is not a profile --- event.html => profile.html | 0 raw.html | 101 +++++++++++++++++++++++++++++++++++++ render.go | 21 ++++++-- 3 files changed, 117 insertions(+), 5 deletions(-) rename event.html => profile.html (100%) create mode 100644 raw.html diff --git a/event.html b/profile.html similarity index 100% rename from event.html rename to profile.html diff --git a/raw.html b/raw.html new file mode 100644 index 0000000..f45898e --- /dev/null +++ b/raw.html @@ -0,0 +1,101 @@ + + + + {{if eq .type "profile"}} + Nostr Public Key {{.npub}} + + + {{ if .metadata.Picture }} + + + {{end}} {{ if .metadata.About }} + + {{end}} + + {{end}} + + {{ if eq .type "event" }} + Nostr Event {{.nevent}} + + + + + {{ if .textImageURL }} + + + + + {{ else }} + + + {{ if .image }} + + + {{end}} {{ if .video }} + + + + {{end}} + + {{end}} + + + {{end}} + + {{ if eq .type "address" }} + Nostr Address {{.naddr}} + {{end}} + + + + + +
+ open {{.type}} in {{range .clients}}
+    + {{.name}} {{end}} +
+
{{.eventJSON}}
+
+ + powered by njump + +
+ + + diff --git a/render.go b/render.go index f515591..655a024 100644 --- a/render.go +++ b/render.go @@ -13,10 +13,14 @@ import ( "github.com/nbd-wtf/go-nostr/nip19" ) -//go:embed event.html -var eventHTML string +//go:embed raw.html +var rawHTML string -var tmpl = template.Must(template.New("event").Parse(eventHTML)) +//go:embed profile.html +var profileHTML string + +//go:embed raw.html +var noteHTML string func render(w http.ResponseWriter, r *http.Request) { fmt.Println(r.URL.Path, ":~", r.Header.Get("user-agent")) @@ -52,7 +56,7 @@ func render(w http.ResponseWriter, r *http.Request) { author := event if event.Kind != 0 { - typ = "event" + typ = "note" author, _ = getEvent(r.Context(), npub) if event.Kind >= 30000 && event.Kind < 40000 { @@ -158,7 +162,7 @@ func render(w http.ResponseWriter, r *http.Request) { eventJSON, _ := json.MarshalIndent(event, "", " ") params := map[string]any{ - "createdAt": createdAt, + "createdAt": createdAt, "clients": generateClientList(code, event), "type": typ, "title": title, @@ -176,6 +180,13 @@ func render(w http.ResponseWriter, r *http.Request) { "proxy": "https://" + hostname + "/proxy?src=", "eventJSON": string(eventJSON), } + + templates := make(map[string]string) + templates["profile"] = profileHTML + templates["note"] = rawHTML + templates["address"] = rawHTML + var tmpl = template.Must(template.New("event").Parse(templates[typ])) + if err := tmpl.ExecuteTemplate(w, "event", params); err != nil { http.Error(w, "error rendering: "+err.Error(), 500) return From 41685aa8ea3a1d7c323792bdd8b48c03f7afd55c Mon Sep 17 00:00:00 2001 From: Daniele Tonon Date: Thu, 25 May 2023 20:55:22 +0200 Subject: [PATCH 17/26] Add note rendering with basic formatting (images and links) --- note.html | 263 ++++++++++++++++++++++++++++++++++++++++++ profile.html | 14 ++- render.go | 14 ++- static/styles.css | 246 +++++++++++++++++++++++++-------------- static/styles.css.map | 2 +- static/styles.scss | 131 ++++++++++++++++----- utils.go | 37 ++++++ 7 files changed, 578 insertions(+), 129 deletions(-) create mode 100644 note.html diff --git a/note.html b/note.html new file mode 100644 index 0000000..6a62bbf --- /dev/null +++ b/note.html @@ -0,0 +1,263 @@ + + + + + {{if eq .type "profile"}} + Nostr Public Key {{.npub}} + + + {{ if .metadata.Picture }} + + + {{end}} {{ if .metadata.About }} + + {{end}} + + {{end}} + + {{ if eq .type "event" }} + Nostr Event {{.nevent}} + + + + + {{ if .textImageURL }} + + + + + {{ else }} + + + {{ if .image }} + + + {{end}} {{ if .video }} + + + + {{end}} + + {{end}} + + + {{end}} + + {{ if eq .type "address" }} + Nostr Address {{.naddr}} + {{end}} + + + + + + + + +
+ What is nostr? +
+ +
+
+ +
+ +
+
+ +
+
+
+ {{.metadata.Name}} {{.metadata.DisplayName}} +
+
{{.npubShort}}
+
+
+ {{.createdAt}} +
+
+ +
+ +
+ {{.description | BasicFormatting }} +
+ +
+ +
+
Author Public key
+ {{.npub}} +
+ +
+
Nevent
+
{{.nevent}}
+
+ +
+ Last update:
+ {{.createdAt}} +
+ +
+ + + +
+ +
+
Event JSON
+
{{.eventJSON}}
+
+
+
+ +
+
+ Open {{.type}} in + + + + + + + + + + +
+
+ {{range .clients}} +
+ Open {{.type}} in {{.name}} +
+ {{end}} +
+
+ +
+
+ +
+ +
+ Powered by njump +
+ + + + + + + + + + + + + + + + diff --git a/profile.html b/profile.html index f765f15..953bcb0 100644 --- a/profile.html +++ b/profile.html @@ -62,7 +62,7 @@
-
+
{{.metadata.Name}} {{.metadata.DisplayName}}
@@ -74,9 +74,11 @@
-
-
- {{.metadata.Name}} {{.metadata.DisplayName}} +
+
+
+ {{.metadata.Name}} {{.metadata.DisplayName}} +
@@ -122,7 +124,7 @@
-
+
Open {{.type}} in @@ -200,7 +202,7 @@ } const shareButton = document.querySelector('.open-list'); - const clients_list = document.querySelector('.columnC'); + const clients_list = document.querySelector('.column_clients'); shareButton.addEventListener('click', function() { clients_list.classList.toggle('up'); if (clients_list.classList.contains('up')) { diff --git a/render.go b/render.go index 655a024..a0758c7 100644 --- a/render.go +++ b/render.go @@ -19,7 +19,7 @@ var rawHTML string //go:embed profile.html var profileHTML string -//go:embed raw.html +//go:embed note.html var noteHTML string func render(w http.ResponseWriter, r *http.Request) { @@ -161,6 +161,9 @@ func render(w http.ResponseWriter, r *http.Request) { eventJSON, _ := json.MarshalIndent(event, "", " ") + // TODO: Sanitize content + description += "\n" + params := map[string]any{ "createdAt": createdAt, "clients": generateClientList(code, event), @@ -168,6 +171,7 @@ func render(w http.ResponseWriter, r *http.Request) { "title": title, "twitterTitle": twitterTitle, "npub": npub, + "npubShort": npubShort, "nevent": nevent, "naddr": naddr, "metadata": metadata, @@ -183,9 +187,13 @@ func render(w http.ResponseWriter, r *http.Request) { templates := make(map[string]string) templates["profile"] = profileHTML - templates["note"] = rawHTML + templates["note"] = noteHTML templates["address"] = rawHTML - var tmpl = template.Must(template.New("event").Parse(templates[typ])) + + var funcMap = template.FuncMap{ + "BasicFormatting": BasicFormatting, + } + var tmpl = template.Must(template.New("event").Funcs(funcMap).Parse(templates[typ])) if err := tmpl.ExecuteTemplate(w, "event", params); err != nil { http.Error(w, "error rendering: "+err.Error(), 500) diff --git a/static/styles.css b/static/styles.css index 4f06d09..d9e92ca 100644 --- a/static/styles.css +++ b/static/styles.css @@ -63,6 +63,26 @@ a { } } +.pic-wrapper { + max-width: 100%; + overflow: hidden; +} +@media (max-width: 580px) { + .pic-wrapper { + flex-basis: 40%; + } +} +.pic-wrapper img.pic { + max-width: 100%; + width: 100%; + height: auto; + -webkit-clip-path: url(#svg-shape); + -moz-clip-path: url(#svg-shape); + -o-clip-path: url(#svg-shape); + -ms-clip-path: url(#svg-shape); + clip-path: url(#svg-shape); +} + .container_wrapper { display: flex; justify-content: center; @@ -82,146 +102,122 @@ a { text-decoration: none; } -.container.profile { +.container { display: flex; width: 70%; justify-content: space-between; gap: 4.8vw; } @media (max-width: 580px) { - .container.profile { + .container { display: block; width: 100%; } } -.container.profile .columnA { +.container .columnA { flex-basis: 25%; margin-top: 2rem; } @media (max-width: 580px) { - .container.profile .columnA { + .container .columnA { display: flex; align-items: center; margin-top: 0rem; } } -.container.profile .columnA .name { +.container .columnA .info-wrapper { display: none; } @media (max-width: 580px) { - .container.profile .columnA .name { + .container .columnA .info-wrapper { display: block; flex-basis: 64%; max-width: 64%; overflow: hidden; font-size: 1.6rem; } - .container.profile .columnA .name .display { + .container .columnA .info-wrapper .display { display: block; font-size: 1.2rem; color: #C9C9C9; } } -.container.profile .columnA .pic-wrapper { - max-width: 100%; - overflow: hidden; -} -@media (max-width: 580px) { - .container.profile .columnA .pic-wrapper { - flex-basis: 40%; - } -} -.container.profile .columnA .pic-wrapper img.pic { - max-width: 100%; - width: 100%; - height: auto; - -webkit-clip-path: url(#svg-shape); - -moz-clip-path: url(#svg-shape); - -o-clip-path: url(#svg-shape); - -ms-clip-path: url(#svg-shape); - clip-path: url(#svg-shape); -} -.container.profile .columnA .last_update { +.container .columnA .last_update { font-size: 0.8em; margin-top: 0.5rem; text-align: center; color: #C9C9C9; } @media (max-width: 580px) { - .container.profile .columnA .last_update { + .container .columnA .last_update { display: none; } } -.container.profile .columnB { - flex-basis: 50%; - max-width: 50%; +.container .column_content { flex-grow: 0; flex-shrink: 0; word-wrap: break-word; margin-right: 1vw; } -@media (max-width: 580px) { - .container.profile .columnB { - flex-basis: 100%; - max-width: 100%; - margin-right: 0; - } -} -.container.profile .columnB .name { +.container .column_content .info-wrapper { font-size: 1.6rem; } -.container.profile .columnB .name .display { +.container .column_content .info-wrapper .display { + color: #C9C9C9; +} +.container .column_content .info-wrapper .npub { + font-size: 1rem; color: #C9C9C9; } @media (max-width: 580px) { - .container.profile .columnB .name { + .container .column_content .info-wrapper { display: none; } } -.container.profile .columnB .separator { +.container .column_content .separator { height: 6px; width: 30%; margin-left: -0.6rem; background-color: #F3F3F3; } -.container.profile .columnB .separator.long { +.container .column_content .separator.long { width: 50%; } @media (max-width: 580px) { - .container.profile .columnB .separator { + .container .column_content .separator { margin-left: -1rem; } } -.container.profile .columnB .field { +.container .column_content .field { margin-bottom: 1.5rem; } -.container.profile .columnB .field .label { +.container .column_content .field .label { font-size: 0.8rem; color: #E32A6D; } -.container.profile .columnB .field.advanced { +.container .column_content .field.advanced { display: none; } -.container.profile .columnB .field.advanced.visible { +.container .column_content .field.advanced.visible { display: block; } -.container.profile .columnB .field.advanced .label { +.container .column_content .field.advanced .label { padding: 0.2rem 1rem; margin: 0 -1rem; color: #373737; background-color: #C9C9C9; } -.container.profile .columnB .field.advanced-switch-wrapper { +.container .column_content .field.advanced-switch-wrapper { display: flex; align-items: center; } -.container.profile .columnB .field.advanced-switch-wrapper input[type=checkbox] { +.container .column_content .field.advanced-switch-wrapper input[type=checkbox] { height: 0; width: 0; visibility: hidden; display: none; } -.container.profile .columnB .field.advanced-switch-wrapper label:first-of-type { +.container .column_content .field.advanced-switch-wrapper label:first-of-type { cursor: pointer; text-indent: -9999px; width: 2.6rem; @@ -233,12 +229,12 @@ a { margin-right: 0.5rem; } @media (max-width: 580px) { - .container.profile .columnB .field.advanced-switch-wrapper label:first-of-type { + .container .column_content .field.advanced-switch-wrapper label:first-of-type { width: 3rem; height: 1.4rem; } } -.container.profile .columnB .field.advanced-switch-wrapper label:first-of-type:after { +.container .column_content .field.advanced-switch-wrapper label:first-of-type:after { content: ""; position: absolute; top: 2px; @@ -250,83 +246,87 @@ a { transition: 0.2s; } @media (max-width: 580px) { - .container.profile .columnB .field.advanced-switch-wrapper label:first-of-type:after { + .container .column_content .field.advanced-switch-wrapper label:first-of-type:after { width: 1.2rem; height: 1.2rem; } } -.container.profile .columnB .field.advanced-switch-wrapper input:checked + label { +.container .column_content .field.advanced-switch-wrapper input:checked + label { background: #E32A6D; } -.container.profile .columnB .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); transform: translateX(-100%); } -.container.profile .columnB .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; } -.container.profile .columnB .field .json, .container.profile .columnB .field .data { +.container .column_content .field.content img { + max-width: 100%; + margin: 1rem 0; +} +.container .column_content .field .json, .container .column_content .field .data { white-space: pre-wrap; word-break: break-all; background-color: #F3F3F3; padding: 1rem; margin: 0 -1rem; } -.container.profile .columnB .field .json .key, .container.profile .columnB .field .data .key { +.container .column_content .field .json .key, .container .column_content .field .data .key { display: inline-block; margin-top: 0.5rem; color: #E32A6D; } -.container.profile .columnB .field .json .string, .container.profile .columnB .field .data .string { +.container .column_content .field .json .string, .container .column_content .field .data .string { color: #373737; } -.container.profile .columnB .field .json .number, .container.profile .columnB .field .data .number { +.container .column_content .field .json .number, .container .column_content .field .data .number { color: darkorange; } -.container.profile .columnB .field .json .boolean, .container.profile .columnB .field .data .boolean { +.container .column_content .field .json .boolean, .container .column_content .field .data .boolean { color: #373737; } -.container.profile .columnB .field .json .null, .container.profile .columnB .field .data .null { +.container .column_content .field .json .null, .container .column_content .field .data .null { color: #373737; } -.container.profile .columnB .field.last_update { +.container .column_content .field.last_update { display: none; } @media (max-width: 580px) { - .container.profile .columnB .field.last_update { + .container .column_content .field.last_update { display: block; font-size: 0.8em; color: #C9C9C9; } } -.container.profile .columnC { +.container .column_clients { flex-basis: 25%; margin-top: 2rem; } @media (max-width: 580px) { - .container.profile .columnC { + .container .column_clients { position: fixed; bottom: 0; left: 0; width: 100%; transition: all 500ms ease-in-out; } - .container.profile .columnC.up .btn { + .container .column_clients.up .btn { display: block; } - .container.profile .columnC.up .title span.open { + .container .column_clients.up .title span.open { display: none; } } -.container.profile .columnC .title { +.container .column_clients .title { font-size: 0.8rem; margin-bottom: 1rem; } -.container.profile .columnC .title span.open, .container.profile .columnC .title span.close { +.container .column_clients .title span.open, .container .column_clients .title span.close { display: none; } @media (max-width: 580px) { - .container.profile .columnC .title { + .container .column_clients .title { position: absolute; top: 0; right: 0; @@ -334,31 +334,31 @@ a { height: 2.6rem; border-left: 1px solid #bc1150; } - .container.profile .columnC .title span.text { + .container .column_clients .title span.text { display: none; } - .container.profile .columnC .title span.open, .container.profile .columnC .title span.close { + .container .column_clients .title span.open, .container .column_clients .title span.close { display: inline; } - .container.profile .columnC .title span.open svg, .container.profile .columnC .title span.close svg { + .container .column_clients .title span.open svg, .container .column_clients .title span.close svg { width: 50%; height: 50%; margin: 28% auto auto auto; display: block; } } -.container.profile .columnC .btn { +.container .column_clients .btn { display: flex; align-items: center; margin-bottom: 0.8rem; } @media (max-width: 580px) { - .container.profile .columnC .btn { + .container .column_clients .btn { display: none; margin-bottom: 0; } } -.container.profile .columnC .btn a { +.container .column_clients .btn a { flex-basis: 80%; padding: 0.4rem; text-align: center; @@ -370,7 +370,7 @@ a { border-radius: 8px; } @media (max-width: 580px) { - .container.profile .columnC .btn a { + .container .column_clients .btn a { display: block; padding: 0.8rem; border-radius: 0px; @@ -378,45 +378,113 @@ a { text-align: left; } } -.container.profile .columnC .btn a span { +.container .column_clients .btn a span { display: none; } @media (max-width: 580px) { - .container.profile .columnC .btn a span { + .container .column_clients .btn a span { display: inline; color: #FFFFFF; } } -.container.profile .columnC .btn a:hover { +.container .column_clients .btn a:hover { background-color: #373737; } @media (max-width: 580px) { - .container.profile .columnC .btn:first-of-type { + .container .column_clients .btn:first-of-type { display: block; } } -.container.profile .columnC .btn:first-of-type a { +.container .column_clients .btn:first-of-type a { background-color: #E32A6D; border-bottom: none; } @media (max-width: 580px) { - .container.profile .columnC .btn:first-of-type a { + .container .column_clients .btn:first-of-type a { border-radius: 8px 8px 0 0; } } -.container.profile .columnC .btn:first-of-type a:hover { +.container .column_clients .btn:first-of-type a:hover { background-color: #bc1150; } -.container.profile .columnC .btn span { +.container .column_clients .btn span { flex-basis: 20%; margin-left: 0.4rem; color: #9a9a9a; } @media (max-width: 580px) { - .container.profile .columnC .btn span { + .container .column_clients .btn span { display: none; } } +.container.profile .column_content { + flex-basis: 50%; + max-width: 50%; +} +@media (max-width: 580px) { + .container.profile .column_content { + flex-basis: 100%; + max-width: 100%; + margin-right: 0; + } +} +.container.note .column_content { + flex-basis: 70%; + max-width: 70%; +} +@media (max-width: 580px) { + .container.note .column_content { + flex-basis: 100%; + max-width: 100%; + margin-right: 0; + } +} +.container.note .column_content .profile_intro { + display: flex; + max-width: 100%; + align-items: center; + margin: 1rem 0 1rem 0; +} +@media (max-width: 580px) { + .container.note .column_content .profile_intro { + flex-wrap: wrap; + } +} +.container.note .column_content .profile_intro .info-wrapper { + display: block; +} +@media (max-width: 580px) { + .container.note .column_content .profile_intro .info-wrapper { + flex-basis: 80%; + } +} +@media (max-width: 580px) { + .container.note .column_content .profile_intro .info-wrapper .name, .container.note .column_content .profile_intro .info-wrapper .npub { + display: block-inline; + font-size: 0.9rem; + } +} +.container.note .column_content .profile_intro .pic-wrapper { + flex-basis: 16%; + margin-right: 1rem; +} +@media (max-width: 580px) { + .container.note .column_content .profile_intro .pic-wrapper { + margin-right: 0.5rem; + } +} +.container.note .column_content .profile_intro .published_at { + flex-grow: 1; + text-align: right; + align-self: end; + font-size: 0.8rem; + color: #9a9a9a; +} +@media (max-width: 580px) { + .container.note .column_content .profile_intro .published_at { + padding-top: 0.5rem; + } +} .footer { font-size: 0.8rem; diff --git a/static/styles.css.map b/static/styles.css.map index 28bd129..7aa9e7e 100644 --- a/static/styles.css.map +++ b/static/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;AAEC;EADD;IAEE;;;;AAIH;EACC,OA/BS;;;AAiCV;EACC;EACA;EACA;EACA;EACA;EACA,kBAjCoB;EAkCpB;EACA;;AACA;EACC;EACA;EACA,kBAtCmB;EAuCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;;AAGF;EACC;EACA;EACA;;AACC;EAJF;IAKE;IACE;IACF;;;;AAGF;EACC;EACA;EACA;;;AAED;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;IACA,OAlHK;;;AAsHR;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;EACA;EACA;EACA,OA3IO;;AA4IP;EALD;IAME;;;AAIH;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EAPD;IAQE;IACA;IACA;;;AAED;EACC;;AACA;EACC,OAhKM;;AAkKP;EALD;IAME;;;AAGF;EACC;EACA;EACA;EACA,kBAnKkB;;AAoKlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OArLM;;AAuLP;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA,OAjMK;EAkML,kBAjMK;;AAoMP;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,YA5MgB;EA6MhB;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC,YA/OK;;AAkPN;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA,kBAzPiB;EA0PjB;EACA;;AACA;EACC;EACA;EACA,OArQK;;AAuQN;EAAU,OAzQJ;;AA0QN;EAAU;;AACV;EAAW,OA3QL;;AA4QN;EAAQ,OA5QF;;AA8QP;EACC;;AACA;EAFD;IAGE;IACA;IACA,OAlRK;;;AAuRT;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;;AACA;EACC;;AAED;EAND;IAOE;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,OAhVM;EAiVN,kBA3UiB;EA4UjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OAhWI;;;AAmWN;EACC,kBA7VgB;;AAiWjB;EADD;IAEE;;;AAED;EACC,kBApWgB;EAqWhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBAzWe;;AA6WlB;EACC;EACA;EACA,OAxXM;;AAyXN;EAJD;IAKE;;;;AAML;EACC;EACA","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;AAEC;EADD;IAEE;;;;AAIH;EACC,OA/BS;;;AAiCV;EACC;EACA;EACA;EACA;EACA;EACA,kBAjCoB;EAkCpB;EACA;;AACA;EACC;EACA;EACA,kBAtCmB;EAuCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;;AAIF;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;;;AAED;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;IACA,OArIK;;;AAyIR;EACC;EACA;EACA;EACA,OA7IO;;AA8IP;EALD;IAME;;;AAIH;EAEC;EACA;EACA;EACA;;AAEA;EACC;;AACA;EACC,OA7JM;;AA+JP;EACC;EACA,OAjKM;;AAmKP;EATD;IAUE;;;AAGF;EACC;EACA;EACA;EACA,kBApKkB;;AAqKlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OAtLM;;AAwLP;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA,OAlMK;EAmML,kBAlMK;;AAqMP;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,YA7MgB;EA8MhB;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC,YAhPK;;AAmPN;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;;AAED;EACC;EACA;EACA,kBA9PiB;EA+PjB;EACA;;AACA;EACC;EACA;EACA,OA1QK;;AA4QN;EAAU,OA9QJ;;AA+QN;EAAU;;AACV;EAAW,OAhRL;;AAiRN;EAAQ,OAjRF;;AAmRP;EACC;;AACA;EAFD;IAGE;IACA;IACA,OAvRK;;;AA8RT;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;;AACA;EACC;;AAED;EAND;IAOE;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,OAvVM;EAwVN,kBAlViB;EAmVjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OAvWI;;;AA0WN;EACC,kBApWgB;;AAwWjB;EADD;IAEE;;;AAED;EACC,kBA3WgB;EA4WhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBAhXe;;AAoXlB;EACC;EACA;EACA,OA/XM;;AAgYN;EAJD;IAKE;;;AAOH;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAMF;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAED;EAgBC;EACA;EACA;EACA;;AAlBA;EADD;IAEE;;;AAED;EACC;;AACA;EAFD;IAGE;;;AAGA;EADD;IAEE;IACA;;;AAQH;EACC;EACA;;AACA;EAHD;IAIE;;;AAGF;EACC;EACA;EACA;EACA;EACA,OA5bK;;AA6bL;EAND;IAOE;;;;AASN;EACC;EACA","file":"styles.css"} \ No newline at end of file diff --git a/static/styles.scss b/static/styles.scss index 6f3e9d0..1f596f2 100644 --- a/static/styles.scss +++ b/static/styles.scss @@ -68,6 +68,25 @@ a { font-size: 0.8rem; } } + +.pic-wrapper { + max-width: 100%; + overflow: hidden; + @media (max-width: 580px) { + flex-basis: 40%; + } + img.pic { + max-width: 100%; + width: 100%; + height: auto; + -webkit-clip-path: url(#svg-shape); + -moz-clip-path: url(#svg-shape); + -o-clip-path: url(#svg-shape); + -ms-clip-path: url(#svg-shape); + clip-path: url(#svg-shape); + } +} + .container_wrapper { display: flex; justify-content: center; @@ -83,7 +102,7 @@ a { text-align: right; text-decoration: none; } -.container.profile { +.container { display: flex; width: 70%; justify-content: space-between; @@ -102,7 +121,7 @@ a { align-items: center; margin-top: 0rem; } - .name { + .info-wrapper { display: none; @media (max-width: 580px) { display: block; @@ -117,23 +136,6 @@ a { } } } - .pic-wrapper { - max-width: 100%; - overflow: hidden; - @media (max-width: 580px) { - flex-basis: 40%; - } - img.pic { - max-width: 100%; - width: 100%; - height: auto; - -webkit-clip-path: url(#svg-shape); - -moz-clip-path: url(#svg-shape); - -o-clip-path: url(#svg-shape); - -ms-clip-path: url(#svg-shape); - clip-path: url(#svg-shape); - } - } .last_update { font-size: 0.8em; margin-top: 0.5rem; @@ -144,23 +146,22 @@ a { } } } - .columnB { - flex-basis: 50%; - max-width: 50%; + .column_content { + flex-grow: 0; flex-shrink: 0; word-wrap: break-word; margin-right: 1vw; - @media (max-width: 580px) { - flex-basis: 100%; - max-width: 100%; - margin-right: 0; - } - .name { + + .info-wrapper { font-size: 1.6rem; .display { color: $color_2; } + .npub { + font-size: 1rem; + color: $color_2; + } @media (max-width: 580px) { display: none; } @@ -252,6 +253,10 @@ a { } } + &.content img { + max-width: 100%; + margin: 1rem 0; + } .json, .data { white-space: pre-wrap; word-break: break-all; @@ -277,8 +282,10 @@ a { } } } + } - .columnC { + + .column_clients { flex-basis: 25%; margin-top: 2rem; @media (max-width: 580px) { @@ -384,8 +391,72 @@ a { } } } - } + } + + &.profile { + .column_content { + flex-basis: 50%; + max-width: 50%; + @media (max-width: 580px) { + flex-basis: 100%; + max-width: 100%; + margin-right: 0; + } + } + } + + &.note { + .column_content { + flex-basis: 70%; + max-width: 70%; + @media (max-width: 580px) { + flex-basis: 100%; + max-width: 100%; + margin-right: 0; + } + .profile_intro { + @media (max-width: 580px) { + flex-wrap: wrap; + } + .info-wrapper { + display: block; + @media (max-width: 580px) { + flex-basis: 80%; + } + .name, .npub { + @media (max-width: 580px) { + display: block-inline; + font-size: 0.9rem; + } + } + } + display: flex; + max-width: 100%; + align-items: center; + margin: 1rem 0 1rem 0; + .pic-wrapper { + flex-basis: 16%; + margin-right: 1rem; + @media (max-width: 580px) { + margin-right: 0.5rem; + } + } + .published_at { + flex-grow: 1; + text-align: right; + align-self: end; + font-size: 0.8rem; + color: $color_5; + @media (max-width: 580px) { + padding-top: 0.5rem; + } + } + } + } + } + } + .footer { font-size: 0.8rem; text-align: center; diff --git a/utils.go b/utils.go index 214a94e..fb05e8b 100644 --- a/utils.go +++ b/utils.go @@ -2,7 +2,9 @@ package main import ( "encoding/json" + "fmt" "net/http" + "regexp" "strings" "github.com/nbd-wtf/go-nostr" @@ -114,3 +116,38 @@ func getPreviewStyle(r *http.Request) string { return "unknown" } } + +func BasicFormatting(input string) string { + lines := strings.Split(input, "\n") + + var processedLines []string + for _, line := range lines { + processedLine := ReplaceURLsWithTags(line) + processedLines = append(processedLines, processedLine) + } + + return strings.Join(processedLines, "
") +} + +func ReplaceURLsWithTags(line string) string { + + // Match and replace image URLs with tags + imageExtensions := []string{".jpg", ".jpeg", ".png", ".webp", ".gif"} + for _, extension := range imageExtensions { + regexPattern := fmt.Sprintf(`\s*(https?://\S+%s)\s*`, extension) + regex := regexp.MustCompile(regexPattern) + matches := regex.FindAllString(line, -1) + + for _, match := range matches { + imgTag := fmt.Sprintf(``, strings.ReplaceAll(match, "\n", "")) + line = strings.ReplaceAll(line, match, imgTag) + return line + } + } + + // Match and replace other URLs with tags + otherRegexPattern := `\S*(https?://\S+)\S*` + otherRegex := regexp.MustCompile(otherRegexPattern) + line = otherRegex.ReplaceAllString(line, `$1`) + return line +} From f38571c8e929a61d4496e99b752f602cc2ca27d5 Mon Sep 17 00:00:00 2001 From: Daniele Tonon Date: Thu, 25 May 2023 21:05:58 +0200 Subject: [PATCH 18/26] Sanitize html content --- note.html | 52 +++++++++++++++++++++++----------------------- profile.html | 58 ++++++++++++++++++++++++++-------------------------- render.go | 5 ++--- 3 files changed, 57 insertions(+), 58 deletions(-) diff --git a/note.html b/note.html index 6a62bbf..82ce1ff 100644 --- a/note.html +++ b/note.html @@ -4,47 +4,47 @@ {{if eq .type "profile"}} Nostr Public Key {{.npub}} - - + + {{ if .metadata.Picture }} - - + + {{end}} {{ if .metadata.About }} - + {{end}} {{end}} {{ if eq .type "event" }} Nostr Event {{.nevent}} - - - + + + {{ if .textImageURL }} - - + + {{ else }} {{ if .image }} - - + + {{end}} {{ if .video }} - - - + + + {{end}} {{end}} - - + + {{end}} {{ if eq .type "address" }} - Nostr Address {{.naddr}} + Nostr Address {{.naddr | SanitizeString}} {{end}} @@ -65,23 +65,23 @@
- +
- {{.metadata.Name}} {{.metadata.DisplayName}} + {{.metadata.Name | SanitizeString}} {{.metadata.DisplayName | SanitizeString}}
-
{{.npubShort}}
+
{{.npubShort | SanitizeString}}
- {{.createdAt}} + {{.createdAt | SanitizeString}}
- {{.description | BasicFormatting }} + {{.description | SanitizeString | BasicFormatting }}
@@ -93,12 +93,12 @@
Nevent
-
{{.nevent}}
+
{{.nevent | SanitizeString}}
Last update:
- {{.createdAt}} + {{.createdAt | SanitizeString}}
@@ -109,7 +109,7 @@
Event JSON
-
{{.eventJSON}}
+
{{.eventJSON | SanitizeString}}
diff --git a/profile.html b/profile.html index 953bcb0..e254b8d 100644 --- a/profile.html +++ b/profile.html @@ -4,47 +4,47 @@ {{if eq .type "profile"}} Nostr Public Key {{.npub}} - - + + {{ if .metadata.Picture }} - - + + {{end}} {{ if .metadata.About }} - + {{end}} {{end}} {{ if eq .type "event" }} Nostr Event {{.nevent}} - - - + + + {{ if .textImageURL }} - - + + {{ else }} {{ if .image }} - - + + {{end}} {{ if .video }} - - - + + + {{end}} {{end}} - - + + {{end}} {{ if eq .type "address" }} - Nostr Address {{.naddr}} + Nostr Address {{.naddr | SanitizeString }} {{end}} @@ -63,52 +63,52 @@
- {{.metadata.Name}} {{.metadata.DisplayName}} + {{.metadata.Name | SanitizeString}} {{.metadata.DisplayName | SanitizeString}}
- +
Last update:
- {{.createdAt}} + {{.createdAt | SanitizeString}}
- {{.metadata.Name}} {{.metadata.DisplayName}} + {{.metadata.Name | SanitizeString}} {{.metadata.DisplayName | SanitizeString}}
- {{.metadata.Website}} + {{.metadata.Website | SanitizeString}}
- {{.metadata.About}} + {{.metadata.About | SanitizeString}}
Public key
- {{.npub}} + {{.npub | SanitizeString}}
NIP-05
- {{.metadata.NIP05}} + {{.metadata.NIP05 | SanitizeString}}
LN Address
- {{.metadata.LUD16}} + {{.metadata.LUD16 | SanitizeString}}
Metadata Event
-
{{.nevent}}
+
{{.nevent | SanitizeString}}
Last update:
- {{.createdAt}} + {{.createdAt | SanitizeString}}
diff --git a/render.go b/render.go index a0758c7..fffb512 100644 --- a/render.go +++ b/render.go @@ -4,6 +4,7 @@ import ( _ "embed" "encoding/json" "fmt" + "html" "net/http" "regexp" "strings" @@ -161,9 +162,6 @@ func render(w http.ResponseWriter, r *http.Request) { eventJSON, _ := json.MarshalIndent(event, "", " ") - // TODO: Sanitize content - description += "\n" - params := map[string]any{ "createdAt": createdAt, "clients": generateClientList(code, event), @@ -192,6 +190,7 @@ func render(w http.ResponseWriter, r *http.Request) { var funcMap = template.FuncMap{ "BasicFormatting": BasicFormatting, + "SanitizeString": html.EscapeString, } var tmpl = template.Must(template.New("event").Funcs(funcMap).Parse(templates[typ])) From 1798cda23a891d4c7e2ff84c060b6a8d68bcee2f Mon Sep 17 00:00:00 2001 From: Daniele Tonon Date: Fri, 26 May 2023 08:50:32 +0200 Subject: [PATCH 19/26] Use an indipendent var for note content --- note.html | 2 +- render.go | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/note.html b/note.html index 82ce1ff..fb12e3a 100644 --- a/note.html +++ b/note.html @@ -81,7 +81,7 @@
- {{.description | SanitizeString | BasicFormatting }} + {{.content | SanitizeString | BasicFormatting }}
diff --git a/render.go b/render.go index fffb512..13dd08d 100644 --- a/render.go +++ b/render.go @@ -160,6 +160,8 @@ func render(w http.ResponseWriter, r *http.Request) { description = prettyJsonOrRaw(event.Content) } + content := prettyJsonOrRaw(event.Content) + eventJSON, _ := json.MarshalIndent(event, "", " ") params := map[string]any{ @@ -175,6 +177,7 @@ func render(w http.ResponseWriter, r *http.Request) { "metadata": metadata, "authorLong": authorLong, "description": description, + "content": content, "textImageURL": textImageURL, "videoType": videoType, "image": image, From fcdbf347b14ab3e14509a78b7f2634b6fa8fd3b8 Mon Sep 17 00:00:00 2001 From: Daniele Tonon Date: Fri, 26 May 2023 08:52:25 +0200 Subject: [PATCH 20/26] Add nostr events' links to the basic formatting --- utils.go | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/utils.go b/utils.go index fb05e8b..4b3d1ec 100644 --- a/utils.go +++ b/utils.go @@ -145,6 +145,21 @@ func ReplaceURLsWithTags(line string) string { } } + // Match and replace npup1, nprofile1, note1, nevent1, etc + nostrRegexPattern := `\s*nostr:((npub|note|nevent|nprofile)1[a-z0-9]+)\s*` + nostrRegex := regexp.MustCompile(nostrRegexPattern) + line = nostrRegex.ReplaceAllStringFunc(line, func(match string) string { + submatch := nostrRegex.FindStringSubmatch(match) + if len(submatch) < 2 { + return match + } + capturedGroup := submatch[1] + first6 := capturedGroup[:6] + last6 := capturedGroup[len(capturedGroup)-6:] + replacement := fmt.Sprintf(`%s`, capturedGroup, first6+"…"+last6) + return replacement + }) + // Match and replace other URLs with tags otherRegexPattern := `\S*(https?://\S+)\S*` otherRegex := regexp.MustCompile(otherRegexPattern) From 7cb5233e650e9aba860a53c9fca15c1122fd5e55 Mon Sep 17 00:00:00 2001 From: Daniele Tonon Date: Fri, 26 May 2023 16:36:39 +0200 Subject: [PATCH 21/26] Move nevent under 'more details' and fix css details --- note.html | 46 ++++++------ profile.html | 18 ++--- static/styles.css | 57 ++++++++++----- static/styles.css.map | 2 +- static/styles.scss | 164 ++++++++++++++++++++++++------------------ 5 files changed, 166 insertions(+), 121 deletions(-) diff --git a/note.html b/note.html index fb12e3a..9bf5b61 100644 --- a/note.html +++ b/note.html @@ -49,34 +49,36 @@ - + - +
- What is nostr? + What is nostr?
-
+
-
-
- +
+ +
+ +
+
+
+ {{.metadata.Name | SanitizeString}} {{.metadata.DisplayName | SanitizeString}} +
+
{{.npubShort | SanitizeString}}
+
+
+ {{.createdAt | SanitizeString}} +
+
-
-
- {{.metadata.Name | SanitizeString}} {{.metadata.DisplayName | SanitizeString}} -
-
{{.npubShort | SanitizeString}}
-
-
- {{.createdAt | SanitizeString}} -
-
@@ -91,11 +93,6 @@ {{.npub}}
-
-
Nevent
-
{{.nevent | SanitizeString}}
-
-
Last update:
{{.createdAt | SanitizeString}} @@ -108,6 +105,11 @@
+
Nevent
+
{{.nevent | SanitizeString}}
+
+ +
Event JSON
{{.eventJSON | SanitizeString}}
diff --git a/profile.html b/profile.html index e254b8d..2eb32be 100644 --- a/profile.html +++ b/profile.html @@ -49,17 +49,17 @@ - + - +
- What is nostr? + What is nostr?
-
+
@@ -101,11 +101,6 @@ {{.metadata.LUD16 | SanitizeString}}
-
-
Metadata Event
-
{{.nevent | SanitizeString}}
-
-
Last update:
{{.createdAt | SanitizeString}} @@ -118,6 +113,11 @@
+
Metadata Event
+
{{.nevent | SanitizeString}}
+
+ +
Event JSON
{{.eventJSON}}
diff --git a/static/styles.css b/static/styles.css index d9e92ca..6a7ded3 100644 --- a/static/styles.css +++ b/static/styles.css @@ -62,6 +62,9 @@ a { font-size: 0.8rem; } } +.top span { + color: #E32A6D; +} .pic-wrapper { max-width: 100%; @@ -201,7 +204,7 @@ a { .container .column_content .field.advanced.visible { display: block; } -.container .column_content .field.advanced .label { +.container .column_content .field.advanced.boxed .label { padding: 0.2rem 1rem; margin: 0 -1rem; color: #373737; @@ -261,6 +264,9 @@ a { .container .column_content .field.advanced-switch-wrapper label:first-of-type:active:after { width: 2rem; } +.container .column_content .field.content { + line-height: 1.4rem; +} .container .column_content .field.content img { max-width: 100%; margin: 1rem 0; @@ -321,6 +327,7 @@ a { .container .column_clients .title { font-size: 0.8rem; margin-bottom: 1rem; + text-align: center; } .container .column_clients .title span.open, .container .column_clients .title span.close { display: none; @@ -359,7 +366,7 @@ a { } } .container .column_clients .btn a { - flex-basis: 80%; + flex-basis: 100%; padding: 0.4rem; text-align: center; font-size: 0.9rem; @@ -417,63 +424,77 @@ a { display: none; } } -.container.profile .column_content { + +body.profile .column_content { flex-basis: 50%; max-width: 50%; } @media (max-width: 580px) { - .container.profile .column_content { + body.profile .column_content { flex-basis: 100%; max-width: 100%; margin-right: 0; } } -.container.note .column_content { + +@media (max-width: 580px) { + body.note .top { + text-align: right; + } +} +body.note .column_content { flex-basis: 70%; max-width: 70%; } @media (max-width: 580px) { - .container.note .column_content { + body.note .column_content { flex-basis: 100%; max-width: 100%; margin-right: 0; } } -.container.note .column_content .profile_intro { +body.note .column_content .profile_intro { display: flex; max-width: 100%; align-items: center; +} +body.note .column_content .profile_intro a { + display: inherit; + align-items: inherit; margin: 1rem 0 1rem 0; + text-decoration: none; + flex-wrap: wrap; } @media (max-width: 580px) { - .container.note .column_content .profile_intro { - flex-wrap: wrap; + body.note .column_content .profile_intro a { + margin-top: 0rem; + margin-bottom: -0.5rem; } } -.container.note .column_content .profile_intro .info-wrapper { - display: block; +body.note .column_content .profile_intro .info-wrapper { + flex-basis: 80%; } @media (max-width: 580px) { - .container.note .column_content .profile_intro .info-wrapper { - flex-basis: 80%; + body.note .column_content .profile_intro .info-wrapper { + display: block; } } @media (max-width: 580px) { - .container.note .column_content .profile_intro .info-wrapper .name, .container.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; font-size: 0.9rem; } } -.container.note .column_content .profile_intro .pic-wrapper { +body.note .column_content .profile_intro .pic-wrapper { flex-basis: 16%; margin-right: 1rem; } @media (max-width: 580px) { - .container.note .column_content .profile_intro .pic-wrapper { + body.note .column_content .profile_intro .pic-wrapper { margin-right: 0.5rem; } } -.container.note .column_content .profile_intro .published_at { +body.note .column_content .profile_intro .published_at { flex-grow: 1; text-align: right; align-self: end; @@ -481,7 +502,7 @@ a { color: #9a9a9a; } @media (max-width: 580px) { - .container.note .column_content .profile_intro .published_at { + body.note .column_content .profile_intro .published_at { padding-top: 0.5rem; } } diff --git a/static/styles.css.map b/static/styles.css.map index 7aa9e7e..174bc5b 100644 --- a/static/styles.css.map +++ b/static/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;AAEC;EADD;IAEE;;;;AAIH;EACC,OA/BS;;;AAiCV;EACC;EACA;EACA;EACA;EACA;EACA,kBAjCoB;EAkCpB;EACA;;AACA;EACC;EACA;EACA,kBAtCmB;EAuCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;;AAIF;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;;;AAED;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;IACA,OArIK;;;AAyIR;EACC;EACA;EACA;EACA,OA7IO;;AA8IP;EALD;IAME;;;AAIH;EAEC;EACA;EACA;EACA;;AAEA;EACC;;AACA;EACC,OA7JM;;AA+JP;EACC;EACA,OAjKM;;AAmKP;EATD;IAUE;;;AAGF;EACC;EACA;EACA;EACA,kBApKkB;;AAqKlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OAtLM;;AAwLP;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA,OAlMK;EAmML,kBAlMK;;AAqMP;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,YA7MgB;EA8MhB;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC,YAhPK;;AAmPN;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;;AAED;EACC;EACA;EACA,kBA9PiB;EA+PjB;EACA;;AACA;EACC;EACA;EACA,OA1QK;;AA4QN;EAAU,OA9QJ;;AA+QN;EAAU;;AACV;EAAW,OAhRL;;AAiRN;EAAQ,OAjRF;;AAmRP;EACC;;AACA;EAFD;IAGE;IACA;IACA,OAvRK;;;AA8RT;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;;AACA;EACC;;AAED;EAND;IAOE;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,OAvVM;EAwVN,kBAlViB;EAmVjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OAvWI;;;AA0WN;EACC,kBApWgB;;AAwWjB;EADD;IAEE;;;AAED;EACC,kBA3WgB;EA4WhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBAhXe;;AAoXlB;EACC;EACA;EACA,OA/XM;;AAgYN;EAJD;IAKE;;;AAOH;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAMF;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAED;EAgBC;EACA;EACA;EACA;;AAlBA;EADD;IAEE;;;AAED;EACC;;AACA;EAFD;IAGE;;;AAGA;EADD;IAEE;IACA;;;AAQH;EACC;EACA;;AACA;EAHD;IAIE;;;AAGF;EACC;EACA;EACA;EACA;EACA,OA5bK;;AA6bL;EAND;IAOE;;;;AASN;EACC;EACA","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;AAEC;EADD;IAEE;;;;AAIH;EACC,OA/BS;;;AAiCV;EACC;EACA;EACA;EACA;EACA;EACA,kBAjCoB;EAkCpB;EACA;;AACA;EACC;EACA;EACA,kBAtCmB;EAuCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;AAED;EACC,OApEQ;;;AAwEV;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;IACA,OAzIK;;;AA6IR;EACC;EACA;EACA;EACA,OAjJO;;AAkJP;EALD;IAME;;;AAIH;EAEC;EACA;EACA;EACA;;AAEA;EACC;;AACA;EACC,OAjKM;;AAmKP;EACC;EACA,OArKM;;AAuKP;EATD;IAUE;;;AAGF;EACC;EACA;EACA;EACA,kBAxKkB;;AAyKlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OA1LM;;AA4LP;EACC;;AACA;EACC;;AAGA;EACC;EACA;EACA,OAvMI;EAwMJ,kBAvMI;;AA2MP;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,YAnNgB;EAoNhB;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC,YAtPK;;AAyPN;EACC;EACA;;AAGD;EACC;;AAIF;EACC;;AACA;EACC;EACA;;AAGF;EACC;EACA;EACA,kBAvQiB;EAwQjB;EACA;;AACA;EACC;EACA;EACA,OAnRK;;AAqRN;EAAU,OAvRJ;;AAwRN;EAAU;;AACV;EAAW,OAzRL;;AA0RN;EAAQ,OA1RF;;AA4RP;EACC;;AACA;EAFD;IAGE;IACA;IACA,OAhSK;;;AAuST;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,OAjWM;EAkWN,kBA5ViB;EA6VjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OAjXI;;;AAoXN;EACC,kBA9WgB;;AAkXjB;EADD;IAEE;;;AAED;EACC,kBArXgB;EAsXhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBA1Xe;;AA8XlB;EACC;EACA;EACA,OAzYM;;AA0YN;EAJD;IAKE;;;;AASJ;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;;AAOD;EADD;IAEE;;;AAGF;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;EACA,OApdM;;AAqdN;EAND;IAOE;;;;AAOL;EACC;EACA","file":"styles.css"} \ No newline at end of file diff --git a/static/styles.scss b/static/styles.scss index 1f596f2..9c3fda8 100644 --- a/static/styles.scss +++ b/static/styles.scss @@ -67,6 +67,9 @@ a { margin: 1.5rem auto 0 auto; font-size: 0.8rem; } + span { + color: $color_3; + } } .pic-wrapper { @@ -102,6 +105,7 @@ a { text-align: right; text-decoration: none; } + .container { display: flex; width: 70%; @@ -189,11 +193,13 @@ a { &.visible { display: block; } - .label { - padding: 0.2rem 1rem; - margin: 0 -1rem; - color: $color_1; - background-color: $color_2; + &.boxed { + .label { + padding: 0.2rem 1rem; + margin: 0 -1rem; + color: $color_1; + background-color: $color_2; + } } } &.advanced-switch-wrapper { @@ -253,10 +259,13 @@ a { } } - &.content img { - max-width: 100%; - margin: 1rem 0; - } + &.content{ + line-height: 1.4rem; + img { + max-width: 100%; + margin: 1rem 0; + } + } .json, .data { white-space: pre-wrap; word-break: break-all; @@ -307,6 +316,7 @@ a { .title { font-size: 0.8rem; margin-bottom: 1rem; + text-align: center; span.open, span.close { display: none; } @@ -340,7 +350,7 @@ a { margin-bottom: 0; } a { - flex-basis: 80%; + flex-basis: 100%; padding: 0.4rem; text-align: center; font-size: 0.9rem; @@ -393,68 +403,80 @@ a { } } - &.profile { - .column_content { - flex-basis: 50%; - max-width: 50%; - @media (max-width: 580px) { - flex-basis: 100%; - max-width: 100%; - margin-right: 0; - } - } - } - - &.note { - .column_content { - flex-basis: 70%; - max-width: 70%; - @media (max-width: 580px) { - flex-basis: 100%; - max-width: 100%; - margin-right: 0; - } - .profile_intro { - @media (max-width: 580px) { - flex-wrap: wrap; - } - .info-wrapper { - display: block; - @media (max-width: 580px) { - flex-basis: 80%; - } - .name, .npub { - @media (max-width: 580px) { - display: block-inline; - font-size: 0.9rem; - } - } - } - display: flex; - max-width: 100%; - align-items: center; - margin: 1rem 0 1rem 0; - .pic-wrapper { - flex-basis: 16%; - margin-right: 1rem; - @media (max-width: 580px) { - margin-right: 0.5rem; - } - } - .published_at { - flex-grow: 1; - text-align: right; - align-self: end; - font-size: 0.8rem; - color: $color_5; - @media (max-width: 580px) { - padding-top: 0.5rem; - } - } - } - } - } +} +body.profile { + .column_content { + flex-basis: 50%; + max-width: 50%; + @media (max-width: 580px) { + flex-basis: 100%; + max-width: 100%; + margin-right: 0; + } + } +} + +body.note { + .top { + @media (max-width: 580px) { + text-align: right; + } + } + .column_content { + flex-basis: 70%; + max-width: 70%; + @media (max-width: 580px) { + flex-basis: 100%; + max-width: 100%; + margin-right: 0; + } + .profile_intro { + display: flex; + max-width: 100%; + align-items: center; + a { + display: inherit; + align-items: inherit; + margin: 1rem 0 1rem 0; + text-decoration: none; + flex-wrap: wrap; + @media (max-width: 580px) { + margin-top: -0rem; + margin-bottom: -0.5rem; + } + } + .info-wrapper { + flex-basis: 80%; + @media (max-width: 580px) { + display: block; + } + .name, .npub { + @media (max-width: 580px) { + display: block-inline; + font-size: 0.9rem; + } + } + } + .pic-wrapper { + flex-basis: 16%; + margin-right: 1rem; + @media (max-width: 580px) { + margin-right: 0.5rem; + } + } + .published_at { + flex-grow: 1; + text-align: right; + align-self: end; + font-size: 0.8rem; + color: $color_5; + @media (max-width: 580px) { + padding-top: 0.5rem; + } + } + } + } } .footer { From 9deaa1e410db8c13f397351b5d3a7f3d269e7216 Mon Sep 17 00:00:00 2001 From: Daniele Tonon Date: Fri, 26 May 2023 17:50:39 +0200 Subject: [PATCH 22/26] Reorganize templates by partials --- column_clients.html | 22 +++++ footer.html | 16 ++++ head.html | 51 ++++++++++++ note.html | 194 ++----------------------------------------- profile.html | 198 ++------------------------------------------ render.go | 10 ++- scripts.js | 97 ++++++++++++++++++++++ top.html | 3 + 8 files changed, 210 insertions(+), 381 deletions(-) create mode 100644 column_clients.html create mode 100644 footer.html create mode 100644 head.html create mode 100644 scripts.js create mode 100644 top.html diff --git a/column_clients.html b/column_clients.html new file mode 100644 index 0000000..a5bc312 --- /dev/null +++ b/column_clients.html @@ -0,0 +1,22 @@ +
+
+ Open {{.type}} in + + + + + + + + + + +
+
+ {{range .clients}} +
+ Open {{.type}} in {{.name}} +
+ {{end}} +
+
\ No newline at end of file diff --git a/footer.html b/footer.html new file mode 100644 index 0000000..f10d5c7 --- /dev/null +++ b/footer.html @@ -0,0 +1,16 @@ +
+ +
+ Powered by njump +
+ + + + + + + + diff --git a/head.html b/head.html new file mode 100644 index 0000000..1f26513 --- /dev/null +++ b/head.html @@ -0,0 +1,51 @@ + + {{if eq .type "profile"}} + Nostr Public Key {{.npub}} + + + {{ if .metadata.Picture }} + + + {{end}} {{ if .metadata.About }} + + {{end}} + + {{end}} + + {{ if eq .type "event" }} + Nostr Event {{.nevent}} + + + + + {{ if .textImageURL }} + + + + + {{ else }} + + + {{ if .image }} + + + {{end}} {{ if .video }} + + + + {{end}} + + {{end}} + + + {{end}} + + {{ if eq .type "address" }} + Nostr Address {{.naddr | SanitizeString }} + {{end}} + + + + + + \ No newline at end of file diff --git a/note.html b/note.html index 9bf5b61..24a0407 100644 --- a/note.html +++ b/note.html @@ -1,62 +1,11 @@ - - {{if eq .type "profile"}} - Nostr Public Key {{.npub}} - - - {{ if .metadata.Picture }} - - - {{end}} {{ if .metadata.About }} - - {{end}} - - {{end}} - - {{ if eq .type "event" }} - Nostr Event {{.nevent}} - - - - - {{ if .textImageURL }} - - - - - {{ else }} - - - {{ if .image }} - - - {{end}} {{ if .video }} - - - - {{end}} - - {{end}} - - - {{end}} - - {{ if eq .type "address" }} - Nostr Address {{.naddr | SanitizeString}} - {{end}} - + {{template "head.html" .}} - - - - -
- What is nostr? -
+ {{template "top.html" .}}
@@ -116,150 +65,17 @@
-
-
- Open {{.type}} in - - - - - - - - - - -
-
- {{range .clients}} -
- Open {{.type}} in {{.name}} -
- {{end}} -
-
+ {{template "column_clients.html" .}}
-
- -
- Powered by njump -
+ {{template "footer.html"}} - - - - - - - - - - diff --git a/profile.html b/profile.html index 2eb32be..3ece7aa 100644 --- a/profile.html +++ b/profile.html @@ -1,62 +1,11 @@ - - {{if eq .type "profile"}} - Nostr Public Key {{.npub}} - - - {{ if .metadata.Picture }} - - - {{end}} {{ if .metadata.About }} - - {{end}} - - {{end}} - - {{ if eq .type "event" }} - Nostr Event {{.nevent}} - - - - - {{ if .textImageURL }} - - - - - {{ else }} - - - {{ if .image }} - - - {{end}} {{ if .video }} - - - - {{end}} - - {{end}} - - - {{end}} - - {{ if eq .type "address" }} - Nostr Address {{.naddr | SanitizeString }} - {{end}} - + {{template "head.html" .}} - - - - -
- What is nostr? -
+ {{template "top.html" .}}
@@ -124,150 +73,17 @@
-
-
- Open {{.type}} in - - - - - - - - - - -
-
- {{range .clients}} -
- Open {{.type}} in {{.name}} -
- {{end}} -
-
+ {{template "column_clients.html" .}}
- -
- -
- Powered by njump -
- + + {{template "footer.html"}} + - - - - - - - - - - diff --git a/render.go b/render.go index 13dd08d..bef9198 100644 --- a/render.go +++ b/render.go @@ -10,6 +10,7 @@ import ( "strings" "text/template" "time" + "github.com/nbd-wtf/go-nostr" "github.com/nbd-wtf/go-nostr/nip19" ) @@ -195,7 +196,14 @@ func render(w http.ResponseWriter, r *http.Request) { "BasicFormatting": BasicFormatting, "SanitizeString": html.EscapeString, } - var tmpl = template.Must(template.New("event").Funcs(funcMap).Parse(templates[typ])) + + tmpl, err := template.Must(template.New("event"). + Funcs(funcMap). + Parse(templates[typ])). + ParseFiles("head.html", "top.html", "column_clients.html", "footer.html", "scripts.js") + if err != nil { + // Handle error + } if err := tmpl.ExecuteTemplate(w, "event", params); err != nil { http.Error(w, "error rendering: "+err.Error(), 500) diff --git a/scripts.js b/scripts.js new file mode 100644 index 0000000..5496306 --- /dev/null +++ b/scripts.js @@ -0,0 +1,97 @@ +const type = '{{.type}}' +let counts = [] +let clients = document.querySelectorAll('.client') +for (let i = 0; i < clients.length; i++) { + let name = clients[i].innerText + let url = clients[i].href + let key = 'nj:' + type + ':' + name + let count = parseInt(localStorage.getItem(key) || 0) + clients[i].parentNode.setAttribute('count', count) + clients[i].parentNode.setAttribute('title', 'Used ' + count + ' times') + clients[i].addEventListener('click', () => { + localStorage.setItem(key, count + 1) + }) + counts.push([count, name, url]) +} + +// Reorder clients following the counter +let clients_wrapper = document.querySelector('.clients_wrapper') +const elements = Array.from(clients_wrapper.getElementsByClassName('btn')) +elements.sort((a, b) => { + const rankA = parseInt(a.getAttribute('count')) + const rankB = parseInt(b.getAttribute('count')) + return rankB - rankA +}) +elements.forEach(element => clients_wrapper.appendChild(element)) + +counts.sort((a, b) => b[0] - a[0]) +let tailsum = counts.slice(1).reduce((acc, c) => acc + c[0], 0) + +if (location.hash !== '#noredirect') { + if (counts[0][0] - tailsum > 10) { + location.href = counts[0][2] + } +} + +let jsons = document.querySelectorAll('.json') +for (let i = 0; i < jsons.length; i++) { + console.log(jsons[i].innerHTML) + jsons[i].innerHTML = syntaxHighlight(jsons[i].innerHTML) +} + +const shareButton = document.querySelector('.open-list') +const clients_list = document.querySelector('.column_clients') +shareButton.addEventListener('click', function () { + clients_list.classList.toggle('up') + if (clients_list.classList.contains('up')) { + document.body.classList.add('lock') + } else { + document.body.classList.remove('lock') + } +}) + +function updateAdvanceSwitch() { + advanced_list.forEach(element => { + if (advanceSwitch.checked) { + element.classList.add('visible') + } else { + element.classList.remove('visible') + } + }) +} + +const advanceSwitch = document.querySelector('.advanced-switch') +const advanced_list = document.querySelectorAll('.advanced') +advanceSwitch.addEventListener('change', function () { + updateAdvanceSwitch() +}) + +updateAdvanceSwitch() // Check at the page load, some browsers keep the state in cache + +var url = new URL(window.location.href) +var searchParams = new URLSearchParams(url.search) +if (searchParams.has('details') && searchParams.get('details') == 'yes') { + advanceSwitch.click() +} + +function syntaxHighlight(json) { + json = json.replace(/&/g, '&').replace(//g, '>') + return json.replace( + /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, + function (match) { + var cls = 'number' + if (/^"/.test(match)) { + if (/:$/.test(match)) { + cls = 'key' + } else { + cls = 'string' + } + } else if (/true|false/.test(match)) { + cls = 'boolean' + } else if (/null/.test(match)) { + cls = 'null' + } + return '' + match + '' + } + ) +} \ No newline at end of file diff --git a/top.html b/top.html new file mode 100644 index 0000000..fb6ee9b --- /dev/null +++ b/top.html @@ -0,0 +1,3 @@ +
+ What is nostr? +
\ No newline at end of file From c43de7478b92215fbc87de4968c6866703ae5076 Mon Sep 17 00:00:00 2001 From: Daniele Tonon Date: Fri, 26 May 2023 17:54:58 +0200 Subject: [PATCH 23/26] Move all html/js templates under static/ --- render.go | 9 ++++----- column_clients.html => static/column_clients.html | 0 footer.html => static/footer.html | 0 head.html => static/head.html | 0 note.html => static/note.html | 0 profile.html => static/profile.html | 0 raw.html => static/raw.html | 0 scripts.js => static/scripts.js | 0 top.html => static/top.html | 0 9 files changed, 4 insertions(+), 5 deletions(-) rename column_clients.html => static/column_clients.html (100%) rename footer.html => static/footer.html (100%) rename head.html => static/head.html (100%) rename note.html => static/note.html (100%) rename profile.html => static/profile.html (100%) rename raw.html => static/raw.html (100%) rename scripts.js => static/scripts.js (100%) rename top.html => static/top.html (100%) diff --git a/render.go b/render.go index bef9198..b159643 100644 --- a/render.go +++ b/render.go @@ -10,18 +10,17 @@ import ( "strings" "text/template" "time" - "github.com/nbd-wtf/go-nostr" "github.com/nbd-wtf/go-nostr/nip19" ) -//go:embed raw.html +//go:embed static/raw.html var rawHTML string -//go:embed profile.html +//go:embed static/profile.html var profileHTML string -//go:embed note.html +//go:embed static/note.html var noteHTML string func render(w http.ResponseWriter, r *http.Request) { @@ -200,7 +199,7 @@ func render(w http.ResponseWriter, r *http.Request) { tmpl, err := template.Must(template.New("event"). Funcs(funcMap). Parse(templates[typ])). - ParseFiles("head.html", "top.html", "column_clients.html", "footer.html", "scripts.js") + ParseFiles("static/head.html", "static/top.html", "static/column_clients.html", "static/footer.html", "static/scripts.js") if err != nil { // Handle error } diff --git a/column_clients.html b/static/column_clients.html similarity index 100% rename from column_clients.html rename to static/column_clients.html diff --git a/footer.html b/static/footer.html similarity index 100% rename from footer.html rename to static/footer.html diff --git a/head.html b/static/head.html similarity index 100% rename from head.html rename to static/head.html diff --git a/note.html b/static/note.html similarity index 100% rename from note.html rename to static/note.html diff --git a/profile.html b/static/profile.html similarity index 100% rename from profile.html rename to static/profile.html diff --git a/raw.html b/static/raw.html similarity index 100% rename from raw.html rename to static/raw.html diff --git a/scripts.js b/static/scripts.js similarity index 100% rename from scripts.js rename to static/scripts.js diff --git a/top.html b/static/top.html similarity index 100% rename from top.html rename to static/top.html From f00926440d90b3c69ac48894e6a9d55d2fdd04b0 Mon Sep 17 00:00:00 2001 From: Daniele Tonon Date: Sat, 27 May 2023 01:04:18 +0200 Subject: [PATCH 24/26] Add dark mode (static) --- static/note.html | 2 +- static/profile.html | 2 +- static/styles.css | 150 +++++++++++++++++++++++++---- static/styles.css.map | 2 +- static/styles.scss | 217 +++++++++++++++++++++++++++++++++--------- 5 files changed, 303 insertions(+), 70 deletions(-) diff --git a/static/note.html b/static/note.html index 24a0407..6ce54a7 100644 --- a/static/note.html +++ b/static/note.html @@ -1,5 +1,5 @@ - + {{template "head.html" .}} diff --git a/static/profile.html b/static/profile.html index 3ece7aa..453bfab 100644 --- a/static/profile.html +++ b/static/profile.html @@ -1,5 +1,5 @@ - + {{template "head.html" .}} diff --git a/static/styles.css b/static/styles.css index 6a7ded3..854795a 100644 --- a/static/styles.css +++ b/static/styles.css @@ -6,19 +6,27 @@ html { } body { - color: #373737; margin: 0; margin-bottom: 4rem; } +.theme--default body { + color: #373737; +} +.theme--dark body { + color: #FAFAFA; +} @media (max-width: 580px) { body.lock { overflow: hidden; } } -a { +.theme--default a { color: #373737; } +.theme--dark a { + color: #FAFAFA; +} .background { position: fixed; @@ -26,20 +34,30 @@ a { bottom: 0; left: 0; right: 0; - background-color: white; overflow: hidden; z-index: -1; } +.theme--default .background { + background: #FFFFFF; +} +.theme--dark .background { + background: #1e1e1e; +} .background::after { content: ""; position: absolute; - background-color: #FAFAFA; width: 140%; height: 100%; transform: rotate(-20deg); transform-origin: bottom; bottom: -40%; } +.theme--default .background::after { + background: #FFFFFF; +} +.theme--dark .background::after { + background: #181818; +} @media (max-width: 580px) { .background::after { width: 200%; @@ -62,7 +80,10 @@ a { font-size: 0.8rem; } } -.top span { +.theme--default .top span { + color: #E32A6D; +} +.theme--dark .top span { color: #E32A6D; } @@ -142,6 +163,11 @@ a { .container .columnA .info-wrapper .display { display: block; font-size: 1.2rem; + } + .theme--default .container .columnA .info-wrapper .display { + color: #C9C9C9; + } + .theme--dark .container .columnA .info-wrapper .display { color: #C9C9C9; } } @@ -149,6 +175,11 @@ a { font-size: 0.8em; margin-top: 0.5rem; text-align: center; +} +.theme--default .container .columnA .last_update { + color: #C9C9C9; +} +.theme--dark .container .columnA .last_update { color: #C9C9C9; } @media (max-width: 580px) { @@ -165,11 +196,19 @@ a { .container .column_content .info-wrapper { font-size: 1.6rem; } -.container .column_content .info-wrapper .display { +.theme--default .container .column_content .info-wrapper .display { + color: #C9C9C9; +} +.theme--dark .container .column_content .info-wrapper .display { color: #C9C9C9; } .container .column_content .info-wrapper .npub { font-size: 1rem; +} +.theme--default .container .column_content .info-wrapper .npub { + color: #C9C9C9; +} +.theme--dark .container .column_content .info-wrapper .npub { color: #C9C9C9; } @media (max-width: 580px) { @@ -181,7 +220,12 @@ a { height: 6px; width: 30%; margin-left: -0.6rem; - background-color: #F3F3F3; +} +.theme--default .container .column_content .separator { + background: #F3F3F3; +} +.theme--dark .container .column_content .separator { + background: #232323; } .container .column_content .separator.long { width: 50%; @@ -196,6 +240,11 @@ a { } .container .column_content .field .label { font-size: 0.8rem; +} +.theme--default .container .column_content .field .label { + color: #E32A6D; +} +.theme--dark .container .column_content .field .label { color: #E32A6D; } .container .column_content .field.advanced { @@ -204,11 +253,32 @@ a { .container .column_content .field.advanced.visible { display: block; } +.container .column_content .field.advanced.boxed { + padding: 0 1rem 1rem; + margin-left: -1rem; + margin-right: -1rem; +} +.theme--default .container .column_content .field.advanced.boxed { + background: #F3F3F3; +} +.theme--dark .container .column_content .field.advanced.boxed { + background: #131313; +} .container .column_content .field.advanced.boxed .label { padding: 0.2rem 1rem; margin: 0 -1rem; +} +.theme--default .container .column_content .field.advanced.boxed .label { color: #373737; - background-color: #C9C9C9; +} +.theme--dark .container .column_content .field.advanced.boxed .label { + color: #9a9a9a; +} +.theme--default .container .column_content .field.advanced.boxed .label { + background: #C9C9C9; +} +.theme--dark .container .column_content .field.advanced.boxed .label { + background: #191919; } .container .column_content .field.advanced-switch-wrapper { display: flex; @@ -225,7 +295,7 @@ a { text-indent: -9999px; width: 2.6rem; height: 1.2rem; - background: #5A5A5A; + background: #3d3d3d; display: inline-block; border-radius: 100px; position: relative; @@ -254,7 +324,10 @@ a { height: 1.2rem; } } -.container .column_content .field.advanced-switch-wrapper input:checked + label { +.theme--default .container .column_content .field.advanced-switch-wrapper input:checked + label { + background: #E32A6D; +} +.theme--dark .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 { @@ -274,27 +347,39 @@ a { .container .column_content .field .json, .container .column_content .field .data { white-space: pre-wrap; word-break: break-all; - background-color: #F3F3F3; - padding: 1rem; - margin: 0 -1rem; + margin-top: 1rem; } .container .column_content .field .json .key, .container .column_content .field .data .key { display: inline-block; margin-top: 0.5rem; +} +.theme--default .container .column_content .field .json .key, .theme--default .container .column_content .field .data .key { color: #E32A6D; } -.container .column_content .field .json .string, .container .column_content .field .data .string { +.theme--dark .container .column_content .field .json .key, .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 { color: #373737; } +.theme--dark .container .column_content .field .json .string, .theme--dark .container .column_content .field .data .string { + color: #FAFAFA; +} .container .column_content .field .json .number, .container .column_content .field .data .number { color: darkorange; } -.container .column_content .field .json .boolean, .container .column_content .field .data .boolean { +.theme--default .container .column_content .field .json .boolean, .theme--default .container .column_content .field .data .boolean { color: #373737; } -.container .column_content .field .json .null, .container .column_content .field .data .null { +.theme--dark .container .column_content .field .json .boolean, .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 { color: #373737; } +.theme--dark .container .column_content .field .json .null, .theme--dark .container .column_content .field .data .null { + color: #FAFAFA; +} .container .column_content .field.last_update { display: none; } @@ -302,6 +387,11 @@ a { .container .column_content .field.last_update { display: block; font-size: 0.8em; + } + .theme--default .container .column_content .field.last_update { + color: #C9C9C9; + } + .theme--dark .container .column_content .field.last_update { color: #C9C9C9; } } @@ -371,7 +461,7 @@ a { text-align: center; font-size: 0.9rem; color: #FFFFFF; - background-color: #5A5A5A; + background-color: #3d3d3d; border-bottom: 1px solid #373737; text-decoration: none; border-radius: 8px; @@ -395,7 +485,7 @@ a { } } .container .column_clients .btn a:hover { - background-color: #373737; + background: #373737; } @media (max-width: 580px) { .container .column_clients .btn:first-of-type { @@ -403,22 +493,35 @@ a { } } .container .column_clients .btn:first-of-type a { - background-color: #E32A6D; border-bottom: none; } +.theme--default .container .column_clients .btn:first-of-type a { + background: #E32A6D; +} +.theme--dark .container .column_clients .btn:first-of-type a { + background: #E32A6D; +} @media (max-width: 580px) { .container .column_clients .btn:first-of-type a { border-radius: 8px 8px 0 0; } } -.container .column_clients .btn:first-of-type a:hover { - background-color: #bc1150; +.theme--default .container .column_clients .btn:first-of-type a:hover { + background: #bc1150; +} +.theme--dark .container .column_clients .btn:first-of-type a:hover { + background: #bc1150; } .container .column_clients .btn span { flex-basis: 20%; margin-left: 0.4rem; +} +.theme--default .container .column_clients .btn span { color: #9a9a9a; } +.theme--dark .container .column_clients .btn span { + color: #F3F3F3; +} @media (max-width: 580px) { .container .column_clients .btn span { display: none; @@ -499,8 +602,13 @@ body.note .column_content .profile_intro .published_at { text-align: right; align-self: end; font-size: 0.8rem; +} +.theme--default body.note .column_content .profile_intro .published_at { color: #9a9a9a; } +.theme--dark body.note .column_content .profile_intro .published_at { + color: #F3F3F3; +} @media (max-width: 580px) { body.note .column_content .profile_intro .published_at { padding-top: 0.5rem; diff --git a/static/styles.css.map b/static/styles.css.map index 174bc5b..44e5952 100644 --- a/static/styles.css.map +++ b/static/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;AAEC;EADD;IAEE;;;;AAIH;EACC,OA/BS;;;AAiCV;EACC;EACA;EACA;EACA;EACA;EACA,kBAjCoB;EAkCpB;EACA;;AACA;EACC;EACA;EACA,kBAtCmB;EAuCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;AAED;EACC,OApEQ;;;AAwEV;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;IACA,OAzIK;;;AA6IR;EACC;EACA;EACA;EACA,OAjJO;;AAkJP;EALD;IAME;;;AAIH;EAEC;EACA;EACA;EACA;;AAEA;EACC;;AACA;EACC,OAjKM;;AAmKP;EACC;EACA,OArKM;;AAuKP;EATD;IAUE;;;AAGF;EACC;EACA;EACA;EACA,kBAxKkB;;AAyKlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OA1LM;;AA4LP;EACC;;AACA;EACC;;AAGA;EACC;EACA;EACA,OAvMI;EAwMJ,kBAvMI;;AA2MP;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,YAnNgB;EAoNhB;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC,YAtPK;;AAyPN;EACC;EACA;;AAGD;EACC;;AAIF;EACC;;AACA;EACC;EACA;;AAGF;EACC;EACA;EACA,kBAvQiB;EAwQjB;EACA;;AACA;EACC;EACA;EACA,OAnRK;;AAqRN;EAAU,OAvRJ;;AAwRN;EAAU;;AACV;EAAW,OAzRL;;AA0RN;EAAQ,OA1RF;;AA4RP;EACC;;AACA;EAFD;IAGE;IACA;IACA,OAhSK;;;AAuST;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,OAjWM;EAkWN,kBA5ViB;EA6VjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OAjXI;;;AAoXN;EACC,kBA9WgB;;AAkXjB;EADD;IAEE;;;AAED;EACC,kBArXgB;EAsXhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBA1Xe;;AA8XlB;EACC;EACA;EACA,OAzYM;;AA0YN;EAJD;IAKE;;;;AASJ;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;;AAOD;EADD;IAEE;;;AAGF;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;EACA,OApdM;;AAqdN;EAND;IAOE;;;;AAOL;EACC;EACA","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAoFA;EACC;EACA;EACA;;;AAED;EAIC;EACA;;AA3BG;EAwBA;;AAxBA;EAwBA;;AAKF;EADD;IAEE;;;;AA9BC;EAoCA;;AApCA;EAoCA;;;AAGJ;EACC;EACA;EACA;EACA;EACA;EAIA;EACA;;AAjDG;EA8CF;;AA9CE;EA8CF;;AAID;EACC;EACA;EAIA;EACA;EACA;EACA;EACA;;AA5DE;EAsDD;;AAtDC;EAsDD;;AAOD;EAXD;IAYE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;AA7EE;EAiFD;;AAjFC;EAiFD;;;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;;EArJD;IAuJE;;EAvJF;IAuJE;;;AAKJ;EACC;EACA;EACA;;AA/JC;EAiKA;;AAjKA;EAiKA;;AAED;EAPD;IAQE;;;AAIH;EAEC;EACA;EACA;EACA;;AAEA;EACC;;AAhLC;EAmLC;;AAnLD;EAmLC;;AAGF;EACC;;AAvLA;EAyLC;;AAzLD;EAyLC;;AAGF;EAbD;IAcE;;;AAGF;EACC;EACA;EACA;;AAnMC;EAqMA;;AArMA;EAqMA;;AAED;EACC;;AAED;EAVD;IAWE;;;AAGF;EACC;;AACA;EACC;;AAjNA;EAmNC;;AAnND;EAmNC;;AAGF;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA;;AA9ND;EAgOE;;AAhOF;EAgOE;;AAED;EACC;EACA;;AApOF;EAsOG;;AAtOH;EAsOG;;AAtOH;EAyOG;;AAzOH;EAyOG;;AAKJ;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,YA3TS;EA4TT;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AArRF;EA2RE;;AA3RF;EA2RE;;AAIF;EACC;EACA;;AAGD;EACC;;AAIF;EACC;;AACA;EACC;EACA;;AAGF;EACC;EACA;EACA;;AACA;EACC;EACA;;AAtTD;EAwTE;;AAxTF;EAwTE;;AAxTF;EA6TI;;AA7TJ;EA6TI;;AAGJ;EAAU;;AAhUV;EAmUI;;AAnUJ;EAmUI;;AAnUJ;EAwUI;;AAxUJ;EAwUI;;AAIL;EACC;;AACA;EAFD;IAGE;IACA;;EAhVD;IAkVE;;EAlVF;IAkVE;;;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,OAxdU;EAydV,kBApdU;EAqdV;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OAxeQ;;;AA2eV;EACC,YAteS;;AA0eV;EADD;IAEE;;;AAED;EAIC;;AArbD;EAmbG;;AAnbH;EAmbG;;AAGF;EALD;IAME;;;AAvbF;EA2bG;;AA3bH;EA2bG;;AAKJ;EACC;EACA;;AAlcA;EAocC;;AApcD;EAocC;;AAED;EAND;IAOE;;;;AASJ;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;;AAOD;EADD;IAEE;;;AAGF;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;;AA/gBA;EAihBC;;AAjhBD;EAihBC;;AAED;EARD;IASE;;;;AAOL;EACC;EACA","file":"styles.css"} \ No newline at end of file diff --git a/static/styles.scss b/static/styles.scss index 9c3fda8..d7a0f6b 100644 --- a/static/styles.scss +++ b/static/styles.scss @@ -1,25 +1,96 @@ -$color_1: #373737; -$color_2: #C9C9C9; -$color_3: #E32A6D; -$color_4: #FFFFFF; -$color_5: #9a9a9a; -$font-family_1: Helvetica, sans-serif; -$background-color_1: white; -$background-color_2: #FAFAFA; -$background-color_3: #F3F3F3; -$background-color_4: #5A5A5A; -$background-color_5: #373737; -$background-color_6: #E32A6D; -$background-color_7: #bc1150; + +$color-base1: #FFFFFF; +$color-base2: #FAFAFA; +$color-base3: #F3F3F3; +$color-base4: #C9C9C9; +$color-base5: #9a9a9a; +$color-base6: #3d3d3d; +$color-base7: #373737; +$color-accent1: #E32A6D; +$color-accent2: #bc1150; + +$themes: ( + default: ( + base1: $color-base1, + base2: $color-base2, + base3: $color-base3, + base4: $color-base4, + base5: $color-base5, + base6: $color-base6, + base7: $color-base7, + accent1: $color-accent1, + accent2: $color-accent2, + bg-up: $color-base1, + bg-down: $color-base1, + boxed-title: $color-base7, + boxed-bg-title: $color-base4, + boxed-bg: $color-base3, + separator: $color-base3, + ), + dark: ( + base1: $color-base7, + base2: $color-base6, + base3: $color-base5, + base4: $color-base4, + base5: $color-base3, + base6: $color-base2, + base7: $color-base2, + accent1: $color-accent1, + accent2: $color-accent2, + bg-up: darken($color-base6, 12%), + bg-down: darken($color-base7, 12%), + boxed-title: $color-base5, + boxed-bg-title: darken($color-base6, 14%), + boxed-bg: darken($color-base7, 14%), + separator: darken($color-base7, 8%), + ), +); + +$base1: 'base1'; +$base2: 'base2'; +$base3: 'base3'; +$base4: 'base4'; +$base5: 'base5'; +$base6: 'base6'; +$base7: 'base7'; +$accent1: 'accent1'; +$accent2: 'accent2'; +$bg-up: 'bg-up'; +$bg-down: 'bg-down'; +$boxed-title: 'boxed-title'; +$boxed-bg-title: 'boxed-bg-title'; +$boxed-bg: 'boxed-bg'; +$separator: 'separator'; + +$theme-map: null; +@mixin themed() { + @each $theme, $map in $themes { + .theme--#{$theme} & { + $theme-map: () !global; + @each $key, $submap in $map { + $value: map-get(map-get($themes, $theme), '#{$key}'); + $theme-map: map-merge($theme-map, ($key: $value)) !global; + } + @content; + $theme-map: null !global; + } + } +} + +@function t($key) { + @return map-get($theme-map, $key); +} /*# sourceMappingURL=styles.css.map */ html { - font-family: $font-family_1; + font-family: Helvetica, sans-serif; font-size: 20px; font-weight: 300; } body { - color: $color_1; + @include themed() { + color: t($base7); + } margin: 0; margin-bottom: 4rem; &.lock { @@ -29,7 +100,9 @@ body { } } a { - color: $color_1; + @include themed() { + color: t($base7); + } } .background { position: fixed; @@ -37,13 +110,17 @@ a { bottom: 0; left: 0; right: 0; - background-color: $background-color_1; + @include themed() { + background: t($bg-up); + } overflow: hidden; z-index: -1; &::after { content: ""; position: absolute; - background-color: $background-color_2; + @include themed() { + background: t($bg-down); + } width: 140%; height: 100%; transform: rotate(-20deg); @@ -68,7 +145,9 @@ a { font-size: 0.8rem; } span { - color: $color_3; + @include themed() { + color: t($accent1); + } } } @@ -136,7 +215,9 @@ a { .display { display: block; font-size: 1.2rem; - color: $color_2; + @include themed() { + color: t($base4); + } } } } @@ -144,7 +225,9 @@ a { font-size: 0.8em; margin-top: 0.5rem; text-align: center; - color: $color_2; + @include themed() { + color: t($base4); + } @media (max-width: 580px) { display: none; } @@ -160,11 +243,15 @@ a { .info-wrapper { font-size: 1.6rem; .display { - color: $color_2; + @include themed() { + color: t($base4); + } } .npub { font-size: 1rem; - color: $color_2; + @include themed() { + color: t($base4); + } } @media (max-width: 580px) { display: none; @@ -174,7 +261,9 @@ a { height: 6px; width: 30%; margin-left: -0.6rem; - background-color: $background-color_3; + @include themed() { + background: t($separator); + } &.long { width: 50%; } @@ -186,7 +275,9 @@ a { margin-bottom: 1.5rem; .label { font-size: 0.8rem; - color: $color_3; + @include themed() { + color: t($accent1); + } } &.advanced { display: none; @@ -194,11 +285,21 @@ a { display: block; } &.boxed { + padding: 0 1rem 1rem; + margin-left: -1rem; + margin-right: -1rem; + @include themed() { + background: t($boxed-bg); + } .label { padding: 0.2rem 1rem; margin: 0 -1rem; - color: $color_1; - background-color: $color_2; + @include themed() { + color: t($boxed-title); + } + @include themed() { + background: t($boxed-bg-title); + } } } } @@ -218,7 +319,7 @@ a { text-indent: -9999px; width: 2.6rem; height: 1.2rem; - background: $background-color_4; + background: $color-base6; display: inline-block; border-radius: 100px; position: relative; @@ -246,7 +347,9 @@ a { } input:checked + label { - background: $color_3; + @include themed() { + background: t($accent1); + } } input:checked + label:first-of-type:after { @@ -269,25 +372,39 @@ a { .json, .data { white-space: pre-wrap; word-break: break-all; - background-color: $background-color_3; - padding: 1rem; - margin: 0 -1rem; + margin-top: 1rem; .key { display: inline-block; margin-top: 0.5rem; - color: $color_3; + @include themed() { + color: t($accent1); + } + } + .string { + @include themed() { + color: t($base7); + } } - .string { color: $color_1; } .number { color: darkorange; } - .boolean { color: $color_1; } - .null { color: $color_1; } + .boolean { + @include themed() { + color: t($base7); + } + } + .null { + @include themed() { + color: t($base7); + } + } } &.last_update { display: none; @media (max-width: 580px) { display: block; font-size: 0.8em; - color: $color_2; + @include themed() { + color: t($base4); + } } } } @@ -354,9 +471,9 @@ a { padding: 0.4rem; text-align: center; font-size: 0.9rem; - color: $color_4; - background-color: $background-color_4; - border-bottom: 1px solid $background-color_5; + color: $color-base1; + background-color: $color-base6; + border-bottom: 1px solid $color-base7; text-decoration: none; border-radius: 8px; @media (max-width: 580px) { @@ -370,11 +487,11 @@ a { display: none; @media (max-width: 580px) { display: inline; - color: $color_4; + color: $color-base1; } } &:hover { - background-color: $background-color_5; + background: $color-base7; } } &:first-of-type { @@ -382,20 +499,26 @@ a { display: block; } a { - background-color: $background-color_6; + @include themed() { + background: t($accent1); + } border-bottom: none; @media (max-width: 580px) { border-radius: 8px 8px 0 0; } &:hover { - background-color: $background-color_7; + @include themed() { + background: t($accent2); + } } } } span { flex-basis: 20%; margin-left: 0.4rem; - color: $color_5; + @include themed() { + color: t($base5); + } @media (max-width: 580px) { display: none; } @@ -470,7 +593,9 @@ body.note { text-align: right; align-self: end; font-size: 0.8rem; - color: $color_5; + @include themed() { + color: t($base5); + } @media (max-width: 580px) { padding-top: 0.5rem; } From d5c90abb587ac5d32d7c1ed823e57c3e4c7e3cbb Mon Sep 17 00:00:00 2001 From: Daniele Tonon Date: Sat, 27 May 2023 12:30:48 +0200 Subject: [PATCH 25/26] Add automati + manual dark mode switch --- static/head.html | 2 +- static/note.html | 2 +- static/profile.html | 2 +- static/styles.css | 55 +++++++++++++++++++++++++++++++++---------- static/styles.css.map | 2 +- static/styles.scss | 50 +++++++++++++++++++++++++++++++-------- static/top.html | 42 ++++++++++++++++++++++++++++++++- 7 files changed, 127 insertions(+), 28 deletions(-) diff --git a/static/head.html b/static/head.html index 1f26513..e8172b4 100644 --- a/static/head.html +++ b/static/head.html @@ -46,6 +46,6 @@ - + \ No newline at end of file diff --git a/static/note.html b/static/note.html index 6ce54a7..1c1e783 100644 --- a/static/note.html +++ b/static/note.html @@ -1,5 +1,5 @@ - + {{template "head.html" .}} diff --git a/static/profile.html b/static/profile.html index 453bfab..96b2721 100644 --- a/static/profile.html +++ b/static/profile.html @@ -1,5 +1,5 @@ - + {{template "head.html" .}} diff --git a/static/styles.css b/static/styles.css index 854795a..6abb9c1 100644 --- a/static/styles.css +++ b/static/styles.css @@ -65,6 +65,45 @@ body { } } +.theme-toggle { + position: fixed; + top: 1rem; + right: 1rem; + width: 1rem; + height: 1rem; + border-radius: 50%; + cursor: pointer; +} +.theme--default .theme-toggle { + color: #F3F3F3; +} +.theme--dark .theme-toggle { + color: #9a9a9a; +} +@media (max-width: 580px) { + .theme-toggle { + position: relative; + float: right; + top: 0; + right: 0; + } +} + +.sun { + display: none; +} + +.moon { + display: block; +} + +.theme--dark .sun { + display: block; +} +.theme--dark .moon { + display: none; +} + .top { display: flex; justify-content: center; @@ -76,7 +115,7 @@ body { .top { display: block; width: 90%; - margin: 1.5rem auto 0 auto; + margin: 1rem auto 1rem auto; font-size: 0.8rem; } } @@ -462,7 +501,7 @@ body { font-size: 0.9rem; color: #FFFFFF; background-color: #3d3d3d; - border-bottom: 1px solid #373737; + border-bottom: 1px solid #131313; text-decoration: none; border-radius: 8px; } @@ -515,12 +554,7 @@ body { .container .column_clients .btn span { flex-basis: 20%; margin-left: 0.4rem; -} -.theme--default .container .column_clients .btn span { - color: #9a9a9a; -} -.theme--dark .container .column_clients .btn span { - color: #F3F3F3; + color: #FFFFFF; } @media (max-width: 580px) { .container .column_clients .btn span { @@ -540,11 +574,6 @@ body.profile .column_content { } } -@media (max-width: 580px) { - body.note .top { - text-align: right; - } -} body.note .column_content { flex-basis: 70%; max-width: 70%; diff --git a/static/styles.css.map b/static/styles.css.map index 44e5952..aa70b7a 100644 --- a/static/styles.css.map +++ b/static/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAoFA;EACC;EACA;EACA;;;AAED;EAIC;EACA;;AA3BG;EAwBA;;AAxBA;EAwBA;;AAKF;EADD;IAEE;;;;AA9BC;EAoCA;;AApCA;EAoCA;;;AAGJ;EACC;EACA;EACA;EACA;EACA;EAIA;EACA;;AAjDG;EA8CF;;AA9CE;EA8CF;;AAID;EACC;EACA;EAIA;EACA;EACA;EACA;EACA;;AA5DE;EAsDD;;AAtDC;EAsDD;;AAOD;EAXD;IAYE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;AA7EE;EAiFD;;AAjFC;EAiFD;;;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;;EArJD;IAuJE;;EAvJF;IAuJE;;;AAKJ;EACC;EACA;EACA;;AA/JC;EAiKA;;AAjKA;EAiKA;;AAED;EAPD;IAQE;;;AAIH;EAEC;EACA;EACA;EACA;;AAEA;EACC;;AAhLC;EAmLC;;AAnLD;EAmLC;;AAGF;EACC;;AAvLA;EAyLC;;AAzLD;EAyLC;;AAGF;EAbD;IAcE;;;AAGF;EACC;EACA;EACA;;AAnMC;EAqMA;;AArMA;EAqMA;;AAED;EACC;;AAED;EAVD;IAWE;;;AAGF;EACC;;AACA;EACC;;AAjNA;EAmNC;;AAnND;EAmNC;;AAGF;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA;;AA9ND;EAgOE;;AAhOF;EAgOE;;AAED;EACC;EACA;;AApOF;EAsOG;;AAtOH;EAsOG;;AAtOH;EAyOG;;AAzOH;EAyOG;;AAKJ;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,YA3TS;EA4TT;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AArRF;EA2RE;;AA3RF;EA2RE;;AAIF;EACC;EACA;;AAGD;EACC;;AAIF;EACC;;AACA;EACC;EACA;;AAGF;EACC;EACA;EACA;;AACA;EACC;EACA;;AAtTD;EAwTE;;AAxTF;EAwTE;;AAxTF;EA6TI;;AA7TJ;EA6TI;;AAGJ;EAAU;;AAhUV;EAmUI;;AAnUJ;EAmUI;;AAnUJ;EAwUI;;AAxUJ;EAwUI;;AAIL;EACC;;AACA;EAFD;IAGE;IACA;;EAhVD;IAkVE;;EAlVF;IAkVE;;;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,OAxdU;EAydV,kBApdU;EAqdV;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OAxeQ;;;AA2eV;EACC,YAteS;;AA0eV;EADD;IAEE;;;AAED;EAIC;;AArbD;EAmbG;;AAnbH;EAmbG;;AAGF;EALD;IAME;;;AAvbF;EA2bG;;AA3bH;EA2bG;;AAKJ;EACC;EACA;;AAlcA;EAocC;;AApcD;EAocC;;AAED;EAND;IAOE;;;;AASJ;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;;AAOD;EADD;IAEE;;;AAGF;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;;AA/gBA;EAihBC;;AAjhBD;EAihBC;;AAED;EARD;IASE;;;;AAOL;EACC;EACA","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAoFA;EACC;EACA;EACA;;;AAED;EAIC;EACA;;AA3BG;EAwBA;;AAxBA;EAwBA;;AAKF;EADD;IAEE;;;;AA9BC;EAoCA;;AApCA;EAoCA;;;AAGJ;EACC;EACA;EACA;EACA;EACA;EAIA;EACA;;AAjDG;EA8CF;;AA9CE;EA8CF;;AAID;EACC;EACA;EAIA;EACA;EACA;EACA;EACA;;AA5DE;EAsDD;;AAtDC;EAsDD;;AAOD;EAXD;IAYE;IACA;;;;AAKH;EACC;EACA;EACA;EACA;EACA;EAKA;EACA;;AA/EG;EA2EF;;AA3EE;EA2EF;;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;;;AAlHE;EAsHD;;AAtHC;EAsHD;;;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;;EA1LD;IA4LE;;EA5LF;IA4LE;;;AAKJ;EACC;EACA;EACA;;AApMC;EAsMA;;AAtMA;EAsMA;;AAED;EAPD;IAQE;;;AAIH;EAEC;EACA;EACA;EACA;;AAEA;EACC;;AArNC;EAwNC;;AAxND;EAwNC;;AAGF;EACC;;AA5NA;EA8NC;;AA9ND;EA8NC;;AAGF;EAbD;IAcE;;;AAGF;EACC;EACA;EACA;;AAxOC;EA0OA;;AA1OA;EA0OA;;AAED;EACC;;AAED;EAVD;IAWE;;;AAGF;EACC;;AACA;EACC;;AAtPA;EAwPC;;AAxPD;EAwPC;;AAGF;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA;;AAnQD;EAqQE;;AArQF;EAqQE;;AAED;EACC;EACA;;AAzQF;EA2QG;;AA3QH;EA2QG;;AA3QH;EA8QG;;AA9QH;EA8QG;;AAKJ;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,YAhWS;EAiWT;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AA1TF;EAgUE;;AAhUF;EAgUE;;AAIF;EACC;EACA;;AAGD;EACC;;AAIF;EACC;;AACA;EACC;EACA;;AAGF;EACC;EACA;EACA;;AACA;EACC;EACA;;AA3VD;EA6VE;;AA7VF;EA6VE;;AA7VF;EAkWI;;AAlWJ;EAkWI;;AAGJ;EAAU;;AArWV;EAwWI;;AAxWJ;EAwWI;;AAxWJ;EA6WI;;AA7WJ;EA6WI;;AAIL;EACC;;AACA;EAFD;IAGE;IACA;;EArXD;IAuXE;;EAvXF;IAuXE;;;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,OA7fU;EA8fV,kBAzfU;EA0fV;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OA7gBQ;;;AAghBV;EACC,YA3gBS;;AA+gBV;EADD;IAEE;;;AAED;EAIC;;AA1dD;EAwdG;;AAxdH;EAwdG;;AAGF;EALD;IAME;;;AA5dF;EAgeG;;AAheH;EAgeG;;AAKJ;EACC;EACA;EACA,OA1iBU;;AA2iBV;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;;AA7iBA;EA+iBC;;AA/iBD;EA+iBC;;AAED;EARD;IASE;;;;AAOL;EACC;EACA","file":"styles.css"} \ No newline at end of file diff --git a/static/styles.scss b/static/styles.scss index d7a0f6b..59a0fa9 100644 --- a/static/styles.scss +++ b/static/styles.scss @@ -132,6 +132,43 @@ a { } } } + +.theme-toggle { + position: fixed; + top: 1rem; + right: 1rem; + width: 1rem; + height: 1rem; + @include themed() { + color: t($base3); + // background: t($base3); + } + border-radius: 50%; + cursor: pointer; + @media (max-width: 580px) { + position: relative; + float: right; + top: 0; + right: 0; + } +} + +.sun { + display: none +} +.moon { + display: block +} + +.theme--dark { + .sun { + display: block + } + .moon { + display: none + } +} + .top { display: flex; justify-content: center; @@ -141,7 +178,7 @@ a { @media (max-width: 580px) { display: block; width: 90%; - margin: 1.5rem auto 0 auto; + margin: 1rem auto 1rem auto; font-size: 0.8rem; } span { @@ -473,7 +510,7 @@ a { font-size: 0.9rem; color: $color-base1; background-color: $color-base6; - border-bottom: 1px solid $color-base7; + border-bottom: 1px solid darken($color-base7, 14%); text-decoration: none; border-radius: 8px; @media (max-width: 580px) { @@ -516,9 +553,7 @@ a { span { flex-basis: 20%; margin-left: 0.4rem; - @include themed() { - color: t($base5); - } + color: $color-base1; @media (max-width: 580px) { display: none; } @@ -541,11 +576,6 @@ body.profile { } body.note { - .top { - @media (max-width: 580px) { - text-align: right; - } - } .column_content { flex-basis: 70%; max-width: 70%; diff --git a/static/top.html b/static/top.html index fb6ee9b..8fdb5ad 100644 --- a/static/top.html +++ b/static/top.html @@ -1,3 +1,43 @@
What is nostr? -
\ No newline at end of file +
+ + +
+
+ + \ No newline at end of file From ab627faf60979ca01e8ff4e0cc8bfda3b721340d Mon Sep 17 00:00:00 2001 From: Daniele Tonon Date: Sat, 27 May 2023 12:40:31 +0200 Subject: [PATCH 26/26] Reduce overall font size --- static/styles.css | 7 ++++++- static/styles.css.map | 2 +- static/styles.scss | 5 ++++- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/static/styles.css b/static/styles.css index 6abb9c1..21c833c 100644 --- a/static/styles.css +++ b/static/styles.css @@ -1,9 +1,14 @@ html { font-family: Helvetica, sans-serif; - font-size: 20px; + font-size: 19px; font-weight: 300; } +@media (max-width: 580px) { + html { + font-size: 18px; + } +} body { margin: 0; diff --git a/static/styles.css.map b/static/styles.css.map index aa70b7a..2b34ac3 100644 --- a/static/styles.css.map +++ b/static/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAoFA;EACC;EACA;EACA;;;AAED;EAIC;EACA;;AA3BG;EAwBA;;AAxBA;EAwBA;;AAKF;EADD;IAEE;;;;AA9BC;EAoCA;;AApCA;EAoCA;;;AAGJ;EACC;EACA;EACA;EACA;EACA;EAIA;EACA;;AAjDG;EA8CF;;AA9CE;EA8CF;;AAID;EACC;EACA;EAIA;EACA;EACA;EACA;EACA;;AA5DE;EAsDD;;AAtDC;EAsDD;;AAOD;EAXD;IAYE;IACA;;;;AAKH;EACC;EACA;EACA;EACA;EACA;EAKA;EACA;;AA/EG;EA2EF;;AA3EE;EA2EF;;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;;;AAlHE;EAsHD;;AAtHC;EAsHD;;;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;;EA1LD;IA4LE;;EA5LF;IA4LE;;;AAKJ;EACC;EACA;EACA;;AApMC;EAsMA;;AAtMA;EAsMA;;AAED;EAPD;IAQE;;;AAIH;EAEC;EACA;EACA;EACA;;AAEA;EACC;;AArNC;EAwNC;;AAxND;EAwNC;;AAGF;EACC;;AA5NA;EA8NC;;AA9ND;EA8NC;;AAGF;EAbD;IAcE;;;AAGF;EACC;EACA;EACA;;AAxOC;EA0OA;;AA1OA;EA0OA;;AAED;EACC;;AAED;EAVD;IAWE;;;AAGF;EACC;;AACA;EACC;;AAtPA;EAwPC;;AAxPD;EAwPC;;AAGF;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA;;AAnQD;EAqQE;;AArQF;EAqQE;;AAED;EACC;EACA;;AAzQF;EA2QG;;AA3QH;EA2QG;;AA3QH;EA8QG;;AA9QH;EA8QG;;AAKJ;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,YAhWS;EAiWT;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AA1TF;EAgUE;;AAhUF;EAgUE;;AAIF;EACC;EACA;;AAGD;EACC;;AAIF;EACC;;AACA;EACC;EACA;;AAGF;EACC;EACA;EACA;;AACA;EACC;EACA;;AA3VD;EA6VE;;AA7VF;EA6VE;;AA7VF;EAkWI;;AAlWJ;EAkWI;;AAGJ;EAAU;;AArWV;EAwWI;;AAxWJ;EAwWI;;AAxWJ;EA6WI;;AA7WJ;EA6WI;;AAIL;EACC;;AACA;EAFD;IAGE;IACA;;EArXD;IAuXE;;EAvXF;IAuXE;;;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,OA7fU;EA8fV,kBAzfU;EA0fV;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OA7gBQ;;;AAghBV;EACC,YA3gBS;;AA+gBV;EADD;IAEE;;;AAED;EAIC;;AA1dD;EAwdG;;AAxdH;EAwdG;;AAGF;EALD;IAME;;;AA5dF;EAgeG;;AAheH;EAgeG;;AAKJ;EACC;EACA;EACA,OA1iBU;;AA2iBV;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;;AA7iBA;EA+iBC;;AA/iBD;EA+iBC;;AAED;EARD;IASE;;;;AAOL;EACC;EACA","file":"styles.css"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/static/styles.scss b/static/styles.scss index 59a0fa9..51b966f 100644 --- a/static/styles.scss +++ b/static/styles.scss @@ -84,8 +84,11 @@ $theme-map: null; /*# sourceMappingURL=styles.css.map */ html { font-family: Helvetica, sans-serif; - font-size: 20px; + font-size: 19px; font-weight: 300; + @media (max-width: 580px) { + font-size: 18px; + } } body { @include themed() {