repos / pgit

static site generator for git
git clone https://github.com/picosh/pgit.git

commit
01c88ba
parent
5e46398
author
Eric Bower
date
2024-04-23 03:01:51 +0000 UTC
fix: `--theme` flag loads proper chroma styles
6 files changed,  +33, -720
M Makefile
+4, -5
 1@@ -28,11 +28,10 @@ static: build clean
 2 		--desc "static site generator for git" \
 3 		--clone-url "https://github.com/picosh/pgit.git" \
 4 		--home-url "https://git.erock.io" \
 5+		--theme "algol" \
 6 		--revs main
 7 .PHONY:
 8 
 9-deploy:
10-	rsync -rv ./public/* hey@pgs.sh:/git-pgit-local
11-	# $(PROJECT)
12-	# ssh hey@pgs.sh link git-pgit $(PROJECT) --write
13-.PHONY: deploy
14+dev: static
15+	rsync -rv ./public/* pgs.sh:/git-pgit-local
16+.PHONY: dev
M README.md
+2, -2
 1@@ -2,8 +2,8 @@
 2 
 3 A static site generator for git.
 4 
 5-This golang binary will generate a commit log, files, and references based
 6-on a git repository and the provided revisions.
 7+This golang binary will generate a commit log, files, and references based on a
 8+git repository and the provided revisions.
 9 
10 It will only generate a commit log and files for the provided revisions.
11 
M main.go
+25, -12
  1@@ -7,6 +7,7 @@ import (
  2 	"flag"
  3 	"fmt"
  4 	"html/template"
  5+	"log/slog"
  6 	"math"
  7 	"os"
  8 	"path/filepath"
  9@@ -14,7 +15,6 @@ import (
 10 	"strings"
 11 	"sync"
 12 	"unicode/utf8"
 13-	"log/slog"
 14 
 15 	"github.com/alecthomas/chroma"
 16 	formatterHtml "github.com/alecthomas/chroma/formatters/html"
 17@@ -62,7 +62,8 @@ type Config struct {
 18 	// logger
 19 	Logger *slog.Logger
 20 	// chroma style
 21-	Theme *chroma.Style
 22+	Theme     *chroma.Style
 23+	Formatter *formatterHtml.Formatter
 24 }
 25 
 26 type RevInfo interface {
 27@@ -234,12 +235,7 @@ func diffFileType(_type git.DiffFileType) string {
 28 }
 29 
 30 // converts contents of files in git tree to pretty formatted code
 31-func parseText(filename string, text string, style *chroma.Style) (string, error) {
 32-	formatter := formatterHtml.New(
 33-		formatterHtml.WithLineNumbers(true),
 34-		formatterHtml.LinkableLineNumbers(true, ""),
 35-		formatterHtml.WithClasses(true),
 36-	)
 37+func (c *Config) parseText(filename string, text string) (string, error) {
 38 	lexer := lexers.Match(filename)
 39 	if lexer == nil {
 40 		lexer = lexers.Analyse(text)
 41@@ -252,7 +248,7 @@ func parseText(filename string, text string, style *chroma.Style) (string, error
 42 		return text, err
 43 	}
 44 	var buf bytes.Buffer
 45-	err = formatter.Format(&buf, style, iterator)
 46+	err = c.Formatter.Format(&buf, c.Theme, iterator)
 47 	if err != nil {
 48 		return text, err
 49 	}
 50@@ -343,7 +339,7 @@ func (c *Config) copyStatic(dir string) error {
 51 		bail(err)
 52 		fp := filepath.Join(c.Outdir, e.Name())
 53 		c.Logger.Info("writing", "filepath", fp)
 54-		os.WriteFile(fp, w, 0755)
 55+		os.WriteFile(fp, w, 0644)
 56 	}
 57 
 58 	return nil
 59@@ -411,7 +407,7 @@ func (c *Config) writeHTMLTreeFile(pageData *PageData, treeItem *TreeItem) strin
 60 	contents := "binary file, cannot display"
 61 	if treeItem.IsTextFile {
 62 		treeItem.NumLines = len(strings.Split(str, "\n"))
 63-		contents, err = parseText(treeItem.Entry.Name(), string(b), c.Theme)
 64+		contents, err = c.parseText(treeItem.Entry.Name(), string(b))
 65 		bail(err)
 66 	}
 67 
 68@@ -484,7 +480,7 @@ func (c *Config) writeLogDiff(repo *git.Repository, pageData *PageData, commit *
 69 			}
 70 		}
 71 		// set filename to something our `ParseText` recognizes (e.g. `.diff`)
 72-		finContent, err := parseText("commit.diff", content, c.Theme)
 73+		finContent, err := c.parseText("commit.diff", content)
 74 		bail(err)
 75 
 76 		fl.Content = template.HTML(finContent)
 77@@ -1045,6 +1041,12 @@ func main() {
 78 		revs = []string{}
 79 	}
 80 
 81+	formatter := formatterHtml.New(
 82+		formatterHtml.WithLineNumbers(true),
 83+		formatterHtml.LinkableLineNumbers(true, ""),
 84+		formatterHtml.WithClasses(true),
 85+	)
 86+
 87 	config := &Config{
 88 		Outdir:             out,
 89 		RepoPath:           repoPath,
 90@@ -1058,6 +1060,7 @@ func main() {
 91 		Desc:               *descFlag,
 92 		MaxCommits:         *maxCommitsFlag,
 93 		HideTreeLastCommit: *hideTreeLastCommitFlag,
 94+		Formatter:          formatter,
 95 	}
 96 	config.Logger.Info("config", "config", config)
 97 
 98@@ -1068,6 +1071,16 @@ func main() {
 99 	config.writeRepo()
100 	config.copyStatic("static")
101 
102+	fp := filepath.Join(out, "syntax.css")
103+	w, err := os.OpenFile(fp, os.O_RDWR|os.O_CREATE|os.O_TRUNC, 0644)
104+	if err != nil {
105+		bail(err)
106+	}
107+	err = formatter.WriteCSS(w, theme)
108+	if err != nil {
109+		bail(err)
110+	}
111+
112 	url := filepath.Join("/", "index.html")
113 	config.Logger.Info("root url", "url", url)
114 }
A static/_pgs_ignore
+1, -0
1@@ -0,0 +1 @@
2+# dont ignore any files
M static/smol.css
+1, -1
 1@@ -106,6 +106,7 @@ pre > code {
 2   background-color: inherit;
 3   padding: 0;
 4   border: none;
 5+  color: initial;
 6 }
 7 
 8 code {
 9@@ -119,7 +120,6 @@ pre {
10   padding: 1rem;
11   margin: 1rem 0;
12   overflow-x: auto;
13-  background-color: var(--pre) !important;
14 }
15 
16 small {
D static/syntax.css
+0, -700
  1@@ -1,700 +0,0 @@
  2-@media (prefers-color-scheme: light) {
  3-  /* Background */
  4-  .bg {
  5-    background-color: #ffffff;
  6-  }
  7-  /* PreWrapper */
  8-  .chroma {
  9-    background-color: #ffffff;
 10-  }
 11-  /* Other */
 12-  .chroma .x {
 13-  }
 14-  /* Error */
 15-  .chroma .err {
 16-    background-color: #a848a8;
 17-  }
 18-  /* CodeLine */
 19-  .chroma .cl {
 20-  }
 21-  /* LineTableTD */
 22-  .chroma .lntd {
 23-    vertical-align: top;
 24-    padding: 0;
 25-    margin: 0;
 26-    border: 0;
 27-  }
 28-  /* LineTable */
 29-  .chroma .lntable {
 30-    border-spacing: 0;
 31-    padding: 0;
 32-    margin: 0;
 33-    border: 0;
 34-  }
 35-  /* LineHighlight */
 36-  .chroma .hl {
 37-    background-color: #ffffcc;
 38-  }
 39-  /* LineNumbersTable */
 40-  .chroma .lnt {
 41-    white-space: pre;
 42-    user-select: none;
 43-    margin-right: 0.4em;
 44-    padding: 0 0.4em 0 0.4em;
 45-    color: #7f7f7f;
 46-  }
 47-  /* LineNumbers */
 48-  .chroma .ln {
 49-    white-space: pre;
 50-    user-select: none;
 51-    margin-right: 0.4em;
 52-    padding: 0 0.4em 0 0.4em;
 53-    color: #7f7f7f;
 54-  }
 55-  /* Line */
 56-  .chroma .line {
 57-    display: flex;
 58-  }
 59-  /* Keyword */
 60-  .chroma .k {
 61-    color: #2838b0;
 62-  }
 63-  /* KeywordConstant */
 64-  .chroma .kc {
 65-    color: #444444;
 66-    font-style: italic;
 67-  }
 68-  /* KeywordDeclaration */
 69-  .chroma .kd {
 70-    color: #2838b0;
 71-    font-style: italic;
 72-  }
 73-  /* KeywordNamespace */
 74-  .chroma .kn {
 75-    color: #2838b0;
 76-  }
 77-  /* KeywordPseudo */
 78-  .chroma .kp {
 79-    color: #2838b0;
 80-  }
 81-  /* KeywordReserved */
 82-  .chroma .kr {
 83-    color: #2838b0;
 84-  }
 85-  /* KeywordType */
 86-  .chroma .kt {
 87-    color: #2838b0;
 88-    font-style: italic;
 89-  }
 90-  /* Name */
 91-  .chroma .n {
 92-  }
 93-  /* NameAttribute */
 94-  .chroma .na {
 95-    color: #388038;
 96-  }
 97-  /* NameBuiltin */
 98-  .chroma .nb {
 99-    color: #388038;
100-  }
101-  /* NameBuiltinPseudo */
102-  .chroma .bp {
103-    font-style: italic;
104-  }
105-  /* NameClass */
106-  .chroma .nc {
107-    color: #287088;
108-  }
109-  /* NameConstant */
110-  .chroma .no {
111-    color: #b85820;
112-  }
113-  /* NameDecorator */
114-  .chroma .nd {
115-    color: #287088;
116-  }
117-  /* NameEntity */
118-  .chroma .ni {
119-    color: #709030;
120-  }
121-  /* NameException */
122-  .chroma .ne {
123-    color: #908828;
124-  }
125-  /* NameFunction */
126-  .chroma .nf {
127-    color: #785840;
128-  }
129-  /* NameFunctionMagic */
130-  .chroma .fm {
131-    color: #b85820;
132-  }
133-  /* NameLabel */
134-  .chroma .nl {
135-    color: #289870;
136-  }
137-  /* NameNamespace */
138-  .chroma .nn {
139-    color: #289870;
140-  }
141-  /* NameOther */
142-  .chroma .nx {
143-  }
144-  /* NameProperty */
145-  .chroma .py {
146-  }
147-  /* NameTag */
148-  .chroma .nt {
149-    color: #2838b0;
150-  }
151-  /* NameVariable */
152-  .chroma .nv {
153-    color: #b04040;
154-  }
155-  /* NameVariableClass */
156-  .chroma .vc {
157-  }
158-  /* NameVariableGlobal */
159-  .chroma .vg {
160-    color: #908828;
161-  }
162-  /* NameVariableInstance */
163-  .chroma .vi {
164-  }
165-  /* NameVariableMagic */
166-  .chroma .vm {
167-    color: #b85820;
168-  }
169-  /* Literal */
170-  .chroma .l {
171-  }
172-  /* LiteralDate */
173-  .chroma .ld {
174-  }
175-  /* LiteralString */
176-  .chroma .s {
177-    color: #b83838;
178-  }
179-  /* LiteralStringAffix */
180-  .chroma .sa {
181-    color: #444444;
182-  }
183-  /* LiteralStringBacktick */
184-  .chroma .sb {
185-    color: #b83838;
186-  }
187-  /* LiteralStringChar */
188-  .chroma .sc {
189-    color: #a848a8;
190-  }
191-  /* LiteralStringDelimiter */
192-  .chroma .dl {
193-    color: #b85820;
194-  }
195-  /* LiteralStringDoc */
196-  .chroma .sd {
197-    color: #b85820;
198-    font-style: italic;
199-  }
200-  /* LiteralStringDouble */
201-  .chroma .s2 {
202-    color: #b83838;
203-  }
204-  /* LiteralStringEscape */
205-  .chroma .se {
206-    color: #709030;
207-  }
208-  /* LiteralStringHeredoc */
209-  .chroma .sh {
210-    color: #b83838;
211-  }
212-  /* LiteralStringInterpol */
213-  .chroma .si {
214-    color: #b83838;
215-    text-decoration: underline;
216-  }
217-  /* LiteralStringOther */
218-  .chroma .sx {
219-    color: #a848a8;
220-  }
221-  /* LiteralStringRegex */
222-  .chroma .sr {
223-    color: #a848a8;
224-  }
225-  /* LiteralStringSingle */
226-  .chroma .s1 {
227-    color: #b83838;
228-  }
229-  /* LiteralStringSymbol */
230-  .chroma .ss {
231-    color: #b83838;
232-  }
233-  /* LiteralNumber */
234-  .chroma .m {
235-    color: #444444;
236-  }
237-  /* LiteralNumberBin */
238-  .chroma .mb {
239-    color: #444444;
240-  }
241-  /* LiteralNumberFloat */
242-  .chroma .mf {
243-    color: #444444;
244-  }
245-  /* LiteralNumberHex */
246-  .chroma .mh {
247-    color: #444444;
248-  }
249-  /* LiteralNumberInteger */
250-  .chroma .mi {
251-    color: #444444;
252-  }
253-  /* LiteralNumberIntegerLong */
254-  .chroma .il {
255-    color: #444444;
256-  }
257-  /* LiteralNumberOct */
258-  .chroma .mo {
259-    color: #444444;
260-  }
261-  /* Operator */
262-  .chroma .o {
263-    color: #666666;
264-  }
265-  /* OperatorWord */
266-  .chroma .ow {
267-    color: #a848a8;
268-  }
269-  /* Punctuation */
270-  .chroma .p {
271-    color: #888888;
272-  }
273-  /* Comment */
274-  .chroma .c {
275-    color: #888888;
276-    font-style: italic;
277-  }
278-  /* CommentHashbang */
279-  .chroma .ch {
280-    color: #287088;
281-    font-style: italic;
282-  }
283-  /* CommentMultiline */
284-  .chroma .cm {
285-    color: #888888;
286-    font-style: italic;
287-  }
288-  /* CommentSingle */
289-  .chroma .c1 {
290-    color: #888888;
291-    font-style: italic;
292-  }
293-  /* CommentSpecial */
294-  .chroma .cs {
295-    color: #888888;
296-    font-style: italic;
297-  }
298-  /* CommentPreproc */
299-  .chroma .cp {
300-    color: #289870;
301-  }
302-  /* CommentPreprocFile */
303-  .chroma .cpf {
304-    color: #289870;
305-  }
306-  /* Generic */
307-  .chroma .g {
308-  }
309-  /* GenericDeleted */
310-  .chroma .gd {
311-    color: #c02828;
312-  }
313-  /* GenericEmph */
314-  .chroma .ge {
315-    font-style: italic;
316-  }
317-  /* GenericError */
318-  .chroma .gr {
319-    color: #c02828;
320-  }
321-  /* GenericHeading */
322-  .chroma .gh {
323-    color: #666666;
324-  }
325-  /* GenericInserted */
326-  .chroma .gi {
327-    color: #388038;
328-  }
329-  /* GenericOutput */
330-  .chroma .go {
331-    color: #666666;
332-  }
333-  /* GenericPrompt */
334-  .chroma .gp {
335-    color: #444444;
336-  }
337-  /* GenericStrong */
338-  .chroma .gs {
339-    font-weight: bold;
340-  }
341-  /* GenericSubheading */
342-  .chroma .gu {
343-    color: #444444;
344-  }
345-  /* GenericTraceback */
346-  .chroma .gt {
347-    color: #2838b0;
348-  }
349-  /* GenericUnderline */
350-  .chroma .gl {
351-    text-decoration: underline;
352-  }
353-  /* TextWhitespace */
354-  .chroma .w {
355-    color: #a89028;
356-  }
357-}
358-
359-@media (prefers-color-scheme: dark) {
360-  /* Background */
361-  .bg {
362-    color: #f8f8f2;
363-    background-color: #282a36;
364-  }
365-  /* PreWrapper */
366-  .chroma {
367-    color: #f8f8f2;
368-    background-color: #282a36;
369-  }
370-  /* Other */
371-  .chroma .x {
372-  }
373-  /* Error */
374-  .chroma .err {
375-  }
376-  /* CodeLine */
377-  .chroma .cl {
378-  }
379-  /* LineTableTD */
380-  .chroma .lntd {
381-    vertical-align: top;
382-    padding: 0;
383-    margin: 0;
384-    border: 0;
385-  }
386-  /* LineTable */
387-  .chroma .lntable {
388-    border-spacing: 0;
389-    padding: 0;
390-    margin: 0;
391-    border: 0;
392-  }
393-  /* LineHighlight */
394-  .chroma .hl {
395-    background-color: #ffffcc;
396-  }
397-  /* LineNumbersTable */
398-  .chroma .lnt {
399-    white-space: pre;
400-    user-select: none;
401-    margin-right: 0.4em;
402-    padding: 0 0.4em 0 0.4em;
403-    color: #7f7f7f;
404-  }
405-  /* LineNumbers */
406-  .chroma .ln {
407-    white-space: pre;
408-    user-select: none;
409-    margin-right: 0.4em;
410-    padding: 0 0.4em 0 0.4em;
411-    color: #7f7f7f;
412-  }
413-  /* Line */
414-  .chroma .line {
415-    display: flex;
416-  }
417-  /* Keyword */
418-  .chroma .k {
419-    color: #ff79c6;
420-  }
421-  /* KeywordConstant */
422-  .chroma .kc {
423-    color: #ff79c6;
424-  }
425-  /* KeywordDeclaration */
426-  .chroma .kd {
427-    color: #8be9fd;
428-    font-style: italic;
429-  }
430-  /* KeywordNamespace */
431-  .chroma .kn {
432-    color: #ff79c6;
433-  }
434-  /* KeywordPseudo */
435-  .chroma .kp {
436-    color: #ff79c6;
437-  }
438-  /* KeywordReserved */
439-  .chroma .kr {
440-    color: #ff79c6;
441-  }
442-  /* KeywordType */
443-  .chroma .kt {
444-    color: #8be9fd;
445-  }
446-  /* Name */
447-  .chroma .n {
448-  }
449-  /* NameAttribute */
450-  .chroma .na {
451-    color: #50fa7b;
452-  }
453-  /* NameBuiltin */
454-  .chroma .nb {
455-    color: #8be9fd;
456-    font-style: italic;
457-  }
458-  /* NameBuiltinPseudo */
459-  .chroma .bp {
460-  }
461-  /* NameClass */
462-  .chroma .nc {
463-    color: #50fa7b;
464-  }
465-  /* NameConstant */
466-  .chroma .no {
467-  }
468-  /* NameDecorator */
469-  .chroma .nd {
470-  }
471-  /* NameEntity */
472-  .chroma .ni {
473-  }
474-  /* NameException */
475-  .chroma .ne {
476-  }
477-  /* NameFunction */
478-  .chroma .nf {
479-    color: #50fa7b;
480-  }
481-  /* NameFunctionMagic */
482-  .chroma .fm {
483-  }
484-  /* NameLabel */
485-  .chroma .nl {
486-    color: #8be9fd;
487-    font-style: italic;
488-  }
489-  /* NameNamespace */
490-  .chroma .nn {
491-  }
492-  /* NameOther */
493-  .chroma .nx {
494-  }
495-  /* NameProperty */
496-  .chroma .py {
497-  }
498-  /* NameTag */
499-  .chroma .nt {
500-    color: #ff79c6;
501-  }
502-  /* NameVariable */
503-  .chroma .nv {
504-    color: #8be9fd;
505-    font-style: italic;
506-  }
507-  /* NameVariableClass */
508-  .chroma .vc {
509-    color: #8be9fd;
510-    font-style: italic;
511-  }
512-  /* NameVariableGlobal */
513-  .chroma .vg {
514-    color: #8be9fd;
515-    font-style: italic;
516-  }
517-  /* NameVariableInstance */
518-  .chroma .vi {
519-    color: #8be9fd;
520-    font-style: italic;
521-  }
522-  /* NameVariableMagic */
523-  .chroma .vm {
524-  }
525-  /* Literal */
526-  .chroma .l {
527-  }
528-  /* LiteralDate */
529-  .chroma .ld {
530-  }
531-  /* LiteralString */
532-  .chroma .s {
533-    color: #f1fa8c;
534-  }
535-  /* LiteralStringAffix */
536-  .chroma .sa {
537-    color: #f1fa8c;
538-  }
539-  /* LiteralStringBacktick */
540-  .chroma .sb {
541-    color: #f1fa8c;
542-  }
543-  /* LiteralStringChar */
544-  .chroma .sc {
545-    color: #f1fa8c;
546-  }
547-  /* LiteralStringDelimiter */
548-  .chroma .dl {
549-    color: #f1fa8c;
550-  }
551-  /* LiteralStringDoc */
552-  .chroma .sd {
553-    color: #f1fa8c;
554-  }
555-  /* LiteralStringDouble */
556-  .chroma .s2 {
557-    color: #f1fa8c;
558-  }
559-  /* LiteralStringEscape */
560-  .chroma .se {
561-    color: #f1fa8c;
562-  }
563-  /* LiteralStringHeredoc */
564-  .chroma .sh {
565-    color: #f1fa8c;
566-  }
567-  /* LiteralStringInterpol */
568-  .chroma .si {
569-    color: #f1fa8c;
570-  }
571-  /* LiteralStringOther */
572-  .chroma .sx {
573-    color: #f1fa8c;
574-  }
575-  /* LiteralStringRegex */
576-  .chroma .sr {
577-    color: #f1fa8c;
578-  }
579-  /* LiteralStringSingle */
580-  .chroma .s1 {
581-    color: #f1fa8c;
582-  }
583-  /* LiteralStringSymbol */
584-  .chroma .ss {
585-    color: #f1fa8c;
586-  }
587-  /* LiteralNumber */
588-  .chroma .m {
589-    color: #bd93f9;
590-  }
591-  /* LiteralNumberBin */
592-  .chroma .mb {
593-    color: #bd93f9;
594-  }
595-  /* LiteralNumberFloat */
596-  .chroma .mf {
597-    color: #bd93f9;
598-  }
599-  /* LiteralNumberHex */
600-  .chroma .mh {
601-    color: #bd93f9;
602-  }
603-  /* LiteralNumberInteger */
604-  .chroma .mi {
605-    color: #bd93f9;
606-  }
607-  /* LiteralNumberIntegerLong */
608-  .chroma .il {
609-    color: #bd93f9;
610-  }
611-  /* LiteralNumberOct */
612-  .chroma .mo {
613-    color: #bd93f9;
614-  }
615-  /* Operator */
616-  .chroma .o {
617-    color: #ff79c6;
618-  }
619-  /* OperatorWord */
620-  .chroma .ow {
621-    color: #ff79c6;
622-  }
623-  /* Punctuation */
624-  .chroma .p {
625-  }
626-  /* Comment */
627-  .chroma .c {
628-    color: #6272a4;
629-  }
630-  /* CommentHashbang */
631-  .chroma .ch {
632-    color: #6272a4;
633-  }
634-  /* CommentMultiline */
635-  .chroma .cm {
636-    color: #6272a4;
637-  }
638-  /* CommentSingle */
639-  .chroma .c1 {
640-    color: #6272a4;
641-  }
642-  /* CommentSpecial */
643-  .chroma .cs {
644-    color: #6272a4;
645-  }
646-  /* CommentPreproc */
647-  .chroma .cp {
648-    color: #ff79c6;
649-  }
650-  /* CommentPreprocFile */
651-  .chroma .cpf {
652-    color: #ff79c6;
653-  }
654-  /* Generic */
655-  .chroma .g {
656-  }
657-  /* GenericDeleted */
658-  .chroma .gd {
659-    color: #ff5555;
660-  }
661-  /* GenericEmph */
662-  .chroma .ge {
663-    text-decoration: underline;
664-  }
665-  /* GenericError */
666-  .chroma .gr {
667-  }
668-  /* GenericHeading */
669-  .chroma .gh {
670-    font-weight: bold;
671-  }
672-  /* GenericInserted */
673-  .chroma .gi {
674-    color: #50fa7b;
675-    font-weight: bold;
676-  }
677-  /* GenericOutput */
678-  .chroma .go {
679-    color: #44475a;
680-  }
681-  /* GenericPrompt */
682-  .chroma .gp {
683-  }
684-  /* GenericStrong */
685-  .chroma .gs {
686-  }
687-  /* GenericSubheading */
688-  .chroma .gu {
689-    font-weight: bold;
690-  }
691-  /* GenericTraceback */
692-  .chroma .gt {
693-  }
694-  /* GenericUnderline */
695-  .chroma .gl {
696-    text-decoration: underline;
697-  }
698-  /* TextWhitespace */
699-  .chroma .w {
700-  }
701-}