From 9cfcbabb032c729b06d581412a64a9e7cefed6b1 Mon Sep 17 00:00:00 2001 From: Anhgelus Morhtuuzh Date: Mon, 6 Oct 2025 19:22:14 +0200 Subject: style(format): install prettier and run --- .editorconfig | 2 + README.md | 3 +- backend/templates/404.html | 20 ++- backend/templates/base.html | 47 +++--- backend/templates/components.html | 41 +++--- backend/templates/home.html | 10 +- backend/templates/home_log.html | 4 +- backend/templates/log.html | 16 +-- backend/templates/simple.html | 4 +- bun.lock | 3 + design/index.html | 114 ++++++++------- design/log.html | 190 ++++++++++++++----------- design/reset.css | 149 ++++++++++++++----- design/styles.css | 291 +++++++++++++++++++------------------- frontend/index.ts | 55 +++---- frontend/scss/general.scss | 21 ++- frontend/scss/main.scss | 4 +- package.json | 6 +- 18 files changed, 558 insertions(+), 422 deletions(-) create mode 100644 .editorconfig diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..fac7a92 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,2 @@ +[*] +max_line_length = 120 diff --git a/README.md b/README.md index f6b7a82..cc99a04 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Small Web -Welcome to anhgelus's logs. +Welcome to anhgelus's logs. Bienvenue dans les logs d'anhgelus. @@ -36,4 +36,3 @@ The backend is in `backend`. It uses `github.com/go-chi/chi/v5`. The frontend stuff is in `frontend`. - diff --git a/backend/templates/404.html b/backend/templates/404.html index 0655652..e0bca68 100644 --- a/backend/templates/404.html +++ b/backend/templates/404.html @@ -1,15 +1,11 @@ {{ define "body" }}
-

Oh non, je crois que tu t'es perdu :(

-

- Tu as des liens en haut pour retrouver ton chemin :3 -

-

- Si tu penses que c'est un bug, hésite pas à ouvrir une issue sur - GitHub :D -

-

- (enfin, sauf si tu as un compte sur ma forge, mais ça m'étonnerait...) -

+

Oh non, je crois que tu t'es perdu :(

+

Tu as des liens en haut pour retrouver ton chemin :3

+

+ Si tu penses que c'est un bug, hésite pas à ouvrir une issue sur + GitHub :D +

+

(enfin, sauf si tu as un compte sur ma forge, mais ça m'étonnerait...)

-{{ end }} \ No newline at end of file +{{ end }} diff --git a/backend/templates/base.html b/backend/templates/base.html index 5e6982b..86e2f58 100644 --- a/backend/templates/base.html +++ b/backend/templates/base.html @@ -1,11 +1,12 @@ - - - + + + {{ .Title }} - {{ $styles := asset "styles.css" }} - + {{ $styles := asset "styles.css" }} + + @@ -15,7 +16,9 @@ - {{ if ne .PubDate "" }}{{ end }} + {{ if ne .PubDate "" }} + + {{ end }} @@ -23,18 +26,22 @@ - - -
- Logo - -
-{{ template "body" . }} - -{{ $script := asset "index.js" }} - + + +
+ Logo + +
+ {{ template "body" . }} + + {{ $script := asset "index.js" }} + + diff --git a/backend/templates/components.html b/backend/templates/components.html index 2b43579..da133a6 100644 --- a/backend/templates/components.html +++ b/backend/templates/components.html @@ -1,23 +1,26 @@ {{define "logs_display"}}
- {{ range .Logs }} - - {{ end }} - {{ if ne .PagesNumber 1 }} - - {{ end }} + {{ range .Logs }} + + {{ end }} {{ if ne .PagesNumber 1 }} + + {{ end }}
{{end}} diff --git a/backend/templates/home.html b/backend/templates/home.html index c570845..7a76e48 100644 --- a/backend/templates/home.html +++ b/backend/templates/home.html @@ -1,11 +1,9 @@ {{define "body"}}
-
+

logs

-

- {{ .PageDescription }} -

-
-{{ template "logs_display" . }} +

{{ .PageDescription }}

+
+ {{ template "logs_display" . }}
{{end}} diff --git a/backend/templates/home_log.html b/backend/templates/home_log.html index c57272c..485661c 100644 --- a/backend/templates/home_log.html +++ b/backend/templates/home_log.html @@ -1,5 +1,3 @@ {{define "body"}} -
-{{ template "logs_display" . }} -
+
{{ template "logs_display" . }}
{{end}} diff --git a/backend/templates/log.html b/backend/templates/log.html index 1dcf1bc..75e0a42 100644 --- a/backend/templates/log.html +++ b/backend/templates/log.html @@ -1,13 +1,11 @@ {{define "body"}}
-

{{ .LogTitle }}

-

- {{ .Description }} -

-
- {{ .Img.Alt }} -
{{ .Img.Legend }}
-
- {{ .Content }} +

{{ .LogTitle }}

+

{{ .Description }}

+
+ {{ .Img.Alt }} +
{{ .Img.Legend }}
+
+ {{ .Content }}
{{end}} diff --git a/backend/templates/simple.html b/backend/templates/simple.html index 7b4f6d3..94721df 100644 --- a/backend/templates/simple.html +++ b/backend/templates/simple.html @@ -1,5 +1,3 @@ {{ define "body" }} -
-{{ .Content }} -
+
{{ .Content }}
{{ end }} diff --git a/bun.lock b/bun.lock index 1fbf6c2..93505bf 100644 --- a/bun.lock +++ b/bun.lock @@ -11,6 +11,7 @@ }, "devDependencies": { "@types/bun": "latest", + "prettier": "^3.6.2", }, "peerDependencies": { "typescript": "^5", @@ -82,6 +83,8 @@ "picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="], + "prettier": ["prettier@3.6.2", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ=="], + "readdirp": ["readdirp@4.1.2", "", {}, "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="], "reset-css": ["reset-css@5.0.2", "", {}, "sha512-YtgUGSq5z5W0NPSjsBW7ys7rtWa8P8AiE7S6Fg3d1TQCPpAodgYyLuZYlU0AOsLtprk/fC9ormHN/0pAavVIDw=="], diff --git a/design/index.html b/design/index.html index e42aa98..7d31b19 100644 --- a/design/index.html +++ b/design/index.html @@ -1,65 +1,71 @@ - + - - - + + + anhgelus - - - - + + + +
- pfp - + pfp +
-
-

logs

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere. -

-
+
+

logs

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna + accessio potest, si aliquod aeternum et infinitum impendere. +

+
+
+
+

Article title

+
+ +
A placeholder.
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et + dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen + permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. +

+
-
-

Article title

-
- -
A placeholder.
-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. -

-
-
-

Article title

-
- -
A placeholder.
-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. -

-
- +

Article title

+
+ +
A placeholder.
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et + dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen + permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. +

+ +
- + diff --git a/design/log.html b/design/log.html index b95be46..89fb583 100644 --- a/design/log.html +++ b/design/log.html @@ -1,95 +1,125 @@ - + - - - + + + anhgelus - log entry - Title - - - - + + + +
- pfp - + pfp +
-

Page title

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere. -

-
- -
A placeholder large image.
-
-

A. Section

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre. -

-
- placeholder -
A placeholder image.
-
-

1. Subsection

-

- Et ultimum bonorum, quod omnium philosophorum sententia tale debet esse, ut ad Orestem pervenias profectus a Theseo. At vero Epicurus una in domo, et ea quidem angusta, quam magnos quantaque amoris conspiratione consentientis tenuit amicorum greges! Quod fit etiam nunc ab Epicureis. Sed ad rem redeamus; de hominibus dici non modo. -

-

- Civitatis, P. Scaevolam M'.que Manilium, ab iisque vitiis, quae paulo ante collegi, abest plurimum et, cum stultorum vitam cum sua comparat, magna afficitur voluptate. Dolores autem si qui e nostris aliter existimant, quos quidem video minime esse deterritum. Quae cum dixisset, Explicavi, inquit, sententiam meam, et eo quidem consilio, tuum iudicium ut. -

-

2. Subsection

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea variari voluptas distinguique possit, augeri amplificarique non possit. -

-

- Verborum vis et natura orationis et consequentium repugnantiumve ratio potest perspici. Omnium autem rerum natura perspecta erit, nullo modo sine amicitia firmam et perpetuam iucunditatem vitae tenere possumus neque vero ipsam amicitiam tueri, nisi aeque. -

-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus. -
-

John Doe, Foo Bar

-
-

- Laborum perfunctio neque perpessio dolorum per se esse expetendam et dolorem ipsum per se esse fugiendum. Itaque aiunt hanc quasi naturalem atque insitam in animis inclusae inter se reprehensiones non sunt vituperandae, maledicta, contumeliae, tum iracundiae, contentiones concertationesque in disputando pertinaces indignae philosophia mihi. -

-

B. Section

-

- Ignorant. Animi autem voluptates et dolores nasci fatemur e corporis voluptatibus et doloribus -- itaque concedo, quod modo dicebas, cadere causa, si qui incurrunt, numquam vim tantam habent, ut non dicas, quid non probes. Principio, inquam, in physicis, quibus maxime gloriatur, primum totus est alienus. Democritea dicit perpauca mutans, sed ita, ut ea, quae dicta sunt ab iis quos probamus, eisque nostrum iudicium et. -

- - 
package main
+      
Page title

+      

+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna
+        accessio potest, si aliquod aeternum et infinitum impendere.
+      

+      

+        
+        
A placeholder large image.

+      

+      
A. Section

+      

+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+        et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri
+        tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur.
+        Quod idem licet transferre.
+      

+      

+        placeholder
+        
A placeholder image.

+      

+      
1. Subsection

+      

+        Et ultimum bonorum, quod omnium philosophorum sententia tale debet esse,
+        ut ad Orestem pervenias profectus a Theseo. At vero Epicurus una in domo, et ea quidem angusta,
+        quam magnos quantaque amoris conspiratione consentientis tenuit amicorum greges! Quod fit etiam nunc ab
+        Epicureis. Sed ad rem redeamus; de hominibus dici non modo.
+      

+      

+        Civitatis, P. Scaevolam M'.que Manilium, ab iisque vitiis, quae paulo ante collegi, abest plurimum et, cum
+        stultorum vitam cum sua comparat, magna afficitur voluptate. Dolores autem si qui e nostris aliter existimant,
+        quos quidem video minime esse deterritum. Quae cum dixisset, Explicavi, inquit, sententiam meam, et eo quidem
+        consilio, tuum iudicium ut.
+      

+      
2. Subsection

+      

+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus,
+        fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur.
+        Quod idem licet transferre in voluptatem, ut postea variari voluptas distinguique possit, augeri amplificarique
+        non possit.
+      

+      

+        Verborum vis et natura orationis et
+        consequentium repugnantiumve ratio potest perspici. Omnium autem rerum natura perspecta erit,
+        nullo modo sine amicitia firmam et perpetuam iucunditatem vitae tenere possumus neque vero ipsam amicitiam
+        tueri, nisi aeque.
+      

+      

+        

+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magnam aliquam quaerat voluptatem. Ut enim aeque doleamus.
+        

+        
John Doe, Foo Bar

+      

+      

+        Laborum perfunctio neque perpessio dolorum per se esse expetendam et dolorem ipsum per se esse fugiendum.
+        Itaque aiunt hanc quasi naturalem atque insitam in animis inclusae inter se reprehensiones non sunt
+        vituperandae, maledicta, contumeliae, tum iracundiae, contentiones concertationesque in disputando pertinaces
+        indignae philosophia mihi.
+      

+      
B. Section

+      

+        Ignorant. Animi autem voluptates et dolores nasci fatemur e corporis voluptatibus et doloribus -- itaque
+        concedo, quod modo dicebas, cadere causa, si qui incurrunt, numquam vim tantam habent, ut non dicas, quid non
+        probes. Principio, inquam, in physicis, quibus maxime gloriatur, primum totus est alienus.
+        Democritea dicit perpauca mutans, sed ita, ut ea, quae dicta sunt ab iis quos probamus, eisque
+        nostrum iudicium et.
+      

+      
    
+        
  • Item A
    • 
+        
  • Item B
    • 
+        
  • Item C
    • 
+      

+      
package main
 
 import "fmt"
 
 func main() {
     fmt.Printf("Hey %s!", "you")
 }

-        

-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea variari voluptas distinguique possit, augeri amplificarique non possit. At etiam Athenis.
-        

-        
    
-            
  1. Item 1
    2. 
-            
  2. Item 2
    3. 
-            
  3. Item 3
    4. 
-        

+      

+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+        dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen
+        permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur.
+        Quod idem licet transferre in voluptatem, ut postea variari voluptas distinguique possit, augeri
+        amplificarique non possit. At etiam Athenis.
+      

+      
    
+        
  1. Item 1
    2. 
+        
  2. Item 2
    3. 
+        
  3. Item 3
    4. 
+
- + diff --git a/design/reset.css b/design/reset.css index af94440..45a05ec 100644 --- a/design/reset.css +++ b/design/reset.css @@ -3,46 +3,127 @@ License: none (public domain) */ -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; } body { - line-height: 1; + line-height: 1; } -ol, ul { - list-style: none; +ol, +ul { + list-style: none; } -blockquote, q { - quotes: none; +blockquote, +q { + quotes: none; } -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; } table { - border-collapse: collapse; - border-spacing: 0; -} \ No newline at end of file + border-collapse: collapse; + border-spacing: 0; +} diff --git a/design/styles.css b/design/styles.css index 6b0e1fb..398605a 100644 --- a/design/styles.css +++ b/design/styles.css @@ -1,251 +1,258 @@ :root { - --color-dark: hsl(202, 25%, 9%); - --color-light: #EFF7F6; - --color-gray: #BCB3BB; /* quote and legend */ - --color-rose: #F2B5D4; /* link accent */ - --color-light-rose: hsl(330, 55%, 70%, 0.2); /* link accent hover and highlight */ + --color-dark: hsl(202, 25%, 9%); + --color-light: #eff7f6; + --color-gray: #bcb3bb; /* quote and legend */ + --color-rose: #f2b5d4; /* link accent */ + --color-light-rose: hsl(330, 55%, 70%, 0.2); /* link accent hover and highlight */ - --font-size-tiny: 0.85rem; /* quote, legend, code */ + --font-size-tiny: 0.85rem; /* quote, legend, code */ - --width-content: 700px; /* main, article */ - --width-deco: 900px; /* header, footer, large image */ - --height-header: 8rem; /* header, footer, introduction */ + --width-content: 700px; /* main, article */ + --width-deco: 900px; /* header, footer, large image */ + --height-header: 8rem; /* header, footer, introduction */ - --margin-base: 1.5rem; - --margin-header: calc(var(--height-header) / 2); + --margin-base: 1.5rem; + --margin-header: calc(var(--height-header) / 2); - font-size: 20px; + font-size: 20px; } body { - font-family: Raveo, Inter, sans-serif; + font-family: Raveo, Inter, sans-serif; - background: var(--color-dark); - color: var(--color-light); + background: var(--color-dark); + color: var(--color-light); - padding: 2rem; + padding: 2rem; } body * { - line-height: 1.4em; + line-height: 1.4em; } -main, article { - max-width: var(--width-content); - margin: 0 auto; +main, +article { + max-width: var(--width-content); + margin: 0 auto; } -h1, h2, h3 { - font-weight: 500; +h1, +h2, +h3 { + font-weight: 500; - margin-bottom: 0.5rem; + margin-bottom: 0.5rem; } h1 { - font-size: 2rem; - font-weight: 600; + font-size: 2rem; + font-weight: 600; } h2 { - font-size: 1.66rem; + font-size: 1.66rem; - margin-top: calc(var(--margin-base) + 1rem); + margin-top: calc(var(--margin-base) + 1rem); } h3 { - font-size: 1.33rem; + font-size: 1.33rem; - margin-top: calc(var(--margin-base) + 0.5rem); + margin-top: calc(var(--margin-base) + 0.5rem); } p { - margin-bottom: var(--margin-base); + margin-bottom: var(--margin-base); } a { - color: var(--color-rose); - text-decoration: underline; + color: var(--color-rose); + text-decoration: underline; - &:hover { - background: var(--color-light-rose); - } + &:hover { + background: var(--color-light-rose); + } } -em, cite { - font-style: italic; +em, +cite { + font-style: italic; } b { - background: var(--color-light-rose); - /* color: var(--color-dark); */ - font-weight: 500; + background: var(--color-light-rose); + /* color: var(--color-dark); */ + font-weight: 500; - padding: 0.05em 0.1em; + padding: 0.05em 0.1em; } -ul, ol { - margin-top: -0.5rem; - margin-bottom: var(--margin-base - 0.5rem); - margin-left: 1rem; +ul, +ol { + margin-top: -0.5rem; + margin-bottom: var(--margin-base - 0.5rem); + margin-left: 1rem; - list-style-position: outside; + list-style-position: outside; } ul { - list-style-type: disc; + list-style-type: disc; } ol { - list-style-type: roman; + list-style-type: roman; } li { - margin-bottom: 0.25rem; + margin-bottom: 0.25rem; } .quote { - font-size: var(--font-size-tiny); + font-size: var(--font-size-tiny); } blockquote { - padding: 0.5rem 2rem; - margin-bottom: 0.25rem; + padding: 0.5rem 2rem; + margin-bottom: 0.25rem; + + color: var(--color-gray); - color: var(--color-gray); - - border-left: var(--color-rose) solid 0.25em; + border-left: var(--color-rose) solid 0.25em; } figure { - display: flex; - flex-direction: column; - justify-content: center; - gap: 0.5rem; - - text-align: center; - - margin-bottom: var(--margin-base); - - & a, img { - max-height: max(60vh, 400px); - max-width: 100%; - display: block; - - &.large { - --max-width: var(--width-deco); - --width: min(calc(100vw - 4rem), var(--max-width)); - margin-left: max(-15%, calc((100% - var(--width))/2)); - width: var(--max-width); - max-width: var(--width); - max-height: none; - } + display: flex; + flex-direction: column; + justify-content: center; + gap: 0.5rem; + + text-align: center; + + margin-bottom: var(--margin-base); + + & a, + img { + max-height: max(60vh, 400px); + max-width: 100%; + display: block; + + &.large { + --max-width: var(--width-deco); + --width: min(calc(100vw - 4rem), var(--max-width)); + margin-left: max(-15%, calc((100% - var(--width)) / 2)); + width: var(--max-width); + max-width: var(--width); + max-height: none; } + } } figcaption { - font-size: var(--font-size-tiny); + font-size: var(--font-size-tiny); - color: var(--color-gray); + color: var(--color-gray); } -code, pre { - background: rgba(0, 0, 0, 0.4); +code, +pre { + background: rgba(0, 0, 0, 0.4); } code { - padding: 0.05em 0.1em; + padding: 0.05em 0.1em; - font-family: monospace; - font-size: var(--font-size-tiny); + font-family: monospace; + font-size: var(--font-size-tiny); - color: var(--color-gray); - border: var(--color-light) 1px solid; + color: var(--color-gray); + border: var(--color-light) 1px solid; } pre { - border: var(--color-light) 2px solid; + border: var(--color-light) 2px solid; - margin: 0 -1rem var(--margin-base) -1rem; - padding: 0.5rem 1rem; + margin: 0 -1rem var(--margin-base) -1rem; + padding: 0.5rem 1rem; - & code { - padding: 0; + & code { + padding: 0; - background: none; - border: none; - } + background: none; + border: none; + } } header { - max-width: var(--width-deco); - height: var(--height-header); + max-width: var(--width-deco); + height: var(--height-header); - margin: 0 auto var(--margin-header) auto; - padding-bottom: 2rem; + margin: 0 auto var(--margin-header) auto; + padding-bottom: 2rem; - display: flex; - flex-direction: row; - gap: 2rem; - - border-bottom: var(--color-light) 2px solid; - - @media only screen and (max-width: 600px) { - flex-direction: column; - height: auto; - min-height: var(--height-header); - & img { - width: max(33%, 128px); - margin: 0 auto; - } + display: flex; + flex-direction: row; + gap: 2rem; + + border-bottom: var(--color-light) 2px solid; + + @media only screen and (max-width: 600px) { + flex-direction: column; + height: auto; + min-height: var(--height-header); + & img { + width: max(33%, 128px); + margin: 0 auto; } + } - & nav { - display: flex; - flex-direction: column; - flex-wrap: wrap; - gap: 0.5rem; + & nav { + display: flex; + flex-direction: column; + flex-wrap: wrap; + gap: 0.5rem; - & a { - display: block; + & a { + display: block; - min-width: 8rem; + min-width: 8rem; - font-family: monospace; - } + font-family: monospace; } + } } footer { - max-width: var(--width-deco); - height: var(--height-header); + max-width: var(--width-deco); + height: var(--height-header); - margin: var(--margin-header) auto 0 auto; - padding-top: 2rem; + margin: var(--margin-header) auto 0 auto; + padding-top: 2rem; - border-top: var(--color-light) 2px solid; + border-top: var(--color-light) 2px solid; - font-size: var(--font-size-tiny); + font-size: var(--font-size-tiny); } .introduction { - margin: var(--margin-header) 0; + margin: var(--margin-header) 0; } article article { - margin-bottom: var(--margin-header); - &:last-child { - margin-bottom: 0; - } + margin-bottom: var(--margin-header); + &:last-child { + margin-bottom: 0; + } } .pagination { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - gap: var(--margin-base); - - & p { - margin-bottom: 0; - } + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: var(--margin-base); + + & p { + margin-bottom: 0; + } } diff --git a/frontend/index.ts b/frontend/index.ts index a00854f..61215cf 100644 --- a/frontend/index.ts +++ b/frontend/index.ts @@ -3,35 +3,36 @@ import htmx from "htmx.org"; htmx.config.historyRestoreAsHxRequest = false; function setupAnchors() { - document.querySelectorAll("a").forEach(e => { - // stuff related to external links are already handled in the backend - if (!e.href.startsWith(window.location.origin) && /https?:\/\//.test(e.href)) return; - if (e.href == window.location.href) e.classList.add("target"); - else e.classList.remove("target"); - if (e.hasAttribute("hx-trigger")) return; - e.setAttribute("hx-get", e.href) - e.setAttribute("hx-trigger", "click") - e.setAttribute("hx-target", "#content") - e.setAttribute("hx-swap", "outerHTML show:body:top") - htmx.process(e) - }); + document.querySelectorAll("a").forEach((e) => { + // stuff related to external links are already handled in the backend + if (!e.href.startsWith(window.location.origin) && /https?:\/\//.test(e.href)) return; + if (e.href == window.location.href) e.classList.add("target"); + else e.classList.remove("target"); + if (e.hasAttribute("hx-trigger")) return; + e.setAttribute("hx-get", e.href); + e.setAttribute("hx-trigger", "click"); + e.setAttribute("hx-target", "#content"); + e.setAttribute("hx-swap", "outerHTML show:body:top"); + htmx.process(e); + }); } // updating history and window title -document.addEventListener("htmx:afterSettle", e => { - if (e.detail.xhr === undefined) return - const title = e.detail.xhr.getResponseHeader("Updated-Title") - if (title?.length !== 0) document.title = decodeURIComponent(title).replaceAll("+", " ") - const quote = e.detail.xhr.getResponseHeader("Updated-Quote") - if (quote?.length !== 0) - document.querySelector("#quote")!.innerHTML = "« " + decodeURIComponent(quote).replaceAll("+", " ") + " »" - setupAnchors() -}) +document.addEventListener("htmx:afterSettle", (e) => { + if (e.detail.xhr === undefined) return; + const title = e.detail.xhr.getResponseHeader("Updated-Title"); + if (title?.length !== 0) document.title = decodeURIComponent(title).replaceAll("+", " "); + const quote = e.detail.xhr.getResponseHeader("Updated-Quote"); + if (quote?.length !== 0) + document.querySelector("#quote")!.innerHTML = + "« " + decodeURIComponent(quote).replaceAll("+", " ") + " »"; + setupAnchors(); +}); -document.body.addEventListener('htmx:beforeSwap', function(e) { - if(e.detail.xhr.status !== 404) return - e.detail.shouldSwap = true; - e.detail.isError = false; -}) +document.body.addEventListener("htmx:beforeSwap", function (e) { + if (e.detail.xhr.status !== 404) return; + e.detail.shouldSwap = true; + e.detail.isError = false; +}); -setupAnchors() +setupAnchors(); diff --git a/frontend/scss/general.scss b/frontend/scss/general.scss index 694a4b0..4df6da0 100644 --- a/frontend/scss/general.scss +++ b/frontend/scss/general.scss @@ -11,12 +11,15 @@ body * { line-height: var(--line-height); } -main, article { +main, +article { max-width: var(--width-content); margin: 0 auto; } -h1, h2, h3 { +h1, +h2, +h3 { font-weight: 500; line-height: var(--line-height-smaller); @@ -64,7 +67,8 @@ nav > a { line-height: var(--line-height-smaller); } -em, cite { +em, +cite { font-style: italic; } @@ -75,7 +79,8 @@ b { padding: 0.05em 0.1em; } -ul, ol { +ul, +ol { margin-top: -1rem; margin-bottom: var(--margin-base); margin-left: 1rem; @@ -118,14 +123,15 @@ figure { margin-bottom: var(--margin-base); - & a, img { + & a, + img { max-width: 100%; display: block; &.large { --max-width: var(--width-deco); --width: min(calc(100vw - 4rem), var(--max-width)); - margin-left: max(calc((100% - var(--max-width))/2), calc((100% - var(--width))/2)); + margin-left: max(calc((100% - var(--max-width)) / 2), calc((100% - var(--width)) / 2)); width: var(--width); max-width: var(--max-width); max-height: none; @@ -139,7 +145,8 @@ figcaption { color: var(--color-gray); } -code, pre { +code, +pre { background: var(--color-black); } diff --git a/frontend/scss/main.scss b/frontend/scss/main.scss index 541dd9e..d704d74 100644 --- a/frontend/scss/main.scss +++ b/frontend/scss/main.scss @@ -6,8 +6,8 @@ :root { --color-dark: hsl(202, 25%, 9%); --color-light: #dce4e4; - --color-gray: #BCB3BB; /* quote and legend */ - --color-rose: #F2B5D4; /* link accent */ + --color-gray: #bcb3bb; /* quote and legend */ + --color-rose: #f2b5d4; /* link accent */ --color-light-rose: hsl(330, 55%, 70%, 0.2); /* link accent hover and highlight */ --color-black: rgba(0, 0, 0, 0.4); /* pre, code */ diff --git a/package.json b/package.json index 0c88ca7..6946be4 100644 --- a/package.json +++ b/package.json @@ -7,10 +7,12 @@ "build:sass": "sass --no-source-map --style=compressed frontend/scss/main.scss dist/styles.css", "watch:sass": "sass --watch frontend/scss/main.scss dist/styles.css", "build:js": "bun build frontend/index.ts --outdir ./dist --minify", - "build": "bun run build:sass && bun run build:js" + "build": "bun run build:sass && bun run build:js", + "format": "prettier . --write" }, "devDependencies": { - "@types/bun": "latest" + "@types/bun": "latest", + "prettier": "^3.6.2" }, "peerDependencies": { "typescript": "^5" -- cgit v1.2.3