changes - pgit@c02493d

Commit `c02493d`

Eric Bower · 2024-01-14 17:48:02 -0500 EST

parent 41f93ba

changes

6 files changed, +624, -28

M Makefile

M html/base.layout.tmpl

M html/tree.page.tmpl

M main.go

M static/main.css

A static/smol.css

M Makefile

+7, -2

......@@ -1,6 +1,10 @@
REV=$(shell git rev-parse --short HEAD)
PROJECT="git-pgit-$(REV)"

smol:
	curl https://pico.sh/smol.css -o ./static/smol.css
.PHONY: smol

clean:
	rm -rf ./public
.PHONY: clean

......@@ -28,6 +32,7 @@ static: build clean
.PHONY:

deploy:
	rsync -rv ./public/* erock@pgs.sh:/$(PROJECT)
	ssh erock@pgs.sh link git-pgit $(PROJECT) --write
	rsync -rv ./public/* hey@pgs.sh:/git-pgit-local
	# $(PROJECT)
	# ssh hey@pgs.sh link git-pgit $(PROJECT) --write
.PHONY: deploy

M html/base.layout.tmpl

+1, -2

......@@ -10,8 +10,7 @@

    {{template "meta" .}}

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
    <link rel="stylesheet" href="https://pico.sh/smol.css" />
    <link rel="stylesheet" href="/smol.css" />
    <link rel="stylesheet" href="/main.css" />
  </head>
  <body>

M html/tree.page.tmpl

+5, -3

......@@ -16,14 +16,16 @@
    </div>

    {{range .Tree.Items}}
      <div class="flex justify-between items-center gap p-sm border-b tree-row">
      <div class="flex justify-between items-center gap-2 p tree-row border-b">
        <div class="flex-1 tree-path flex items-center gap">
          {{if .IsDir}}
            <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="16" width="16" viewBox="0 0 512 512">
              <path d="M0 96C0 60.7 28.7 32 64 32H196.1c19.1 0 37.4 7.6 50.9 21.1L289.9 96H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM64 80c-8.8 0-16 7.2-16 16V416c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16H286.6c-10.6 0-20.8-4.2-28.3-11.7L213.1 87c-4.5-4.5-10.6-7-17-7H64z"/>
            </svg>
          {{else}}
          <i class="{{.Icon}}"></i>
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="16" width="16" viewBox="0 0 384 512">
              <path d="M320 464c8.8 0 16-7.2 16-16V160H256c-17.7 0-32-14.3-32-32V48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H320zM0 64C0 28.7 28.7 0 64 0H229.5c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64z"/>
            </svg>
          {{end}}

          <a href="{{.URL}}">{{.Name}}</a>

M main.go

+32, -21

......@@ -24,11 +24,8 @@ import (
	"go.uber.org/zap"
)

//go:embed static/main.css
var mainCss []byte

//go:embed static/syntax.css
var syntaxCss []byte
//go:embed static/*
var sfs embed.FS

//go:embed html/*.tmpl
var efs embed.FS

......@@ -120,7 +117,7 @@ type TreeItem struct {
	Size       string
	NumLines   int
	Name       string
	Icon string
	Icon       string
	Path       string
	URL        template.URL
	CommitID   string

......@@ -335,10 +332,25 @@ func (c *Config) writeHtml(writeData *WriteData) {
	bail(err)
}

func (c *Config) copyStatic(dst string, data []byte) {
	c.Logger.Infof("writing (%s)", dst)
	err := os.WriteFile(dst, data, 0755)
func (c *Config) copyStatic() error {
	dir := "static"
	entries, err := sfs.ReadDir(dir)
	bail(err)

	for _, e := range entries {
		infp := filepath.Join(dir, e.Name())
		if e.IsDir() {
			continue
		}

		w, err := os.ReadFile(infp)
		bail(err)
		fp := filepath.Join(c.Outdir, e.Name())
		c.Logger.Infof("writing (%s)", fp)
		os.WriteFile(fp, w, 0755)
	}

	return nil
}

func (c *Config) writeRootSummary(data *PageData, readme template.HTML) {

......@@ -740,15 +752,18 @@ func FilenameToDevIcon(filename string) string {
	ext := filepath.Ext(filename)
	extMappr := map[string]string{
		".html": "html5",
		".go": "go",
		".py": "python",
		".css": "css3",
		".js": "javascript",
		".md": "markdown",
		".go":   "go",
		".py":   "python",
		".css":  "css3",
		".js":   "javascript",
		".md":   "markdown",
		".ts":   "typescript",
		".tsx":  "react",
		".jsx":  "react",
	}

	nameMappr := map[string]string {
		"Makefile": "cmake",
	nameMappr := map[string]string{
		"Makefile":   "cmake",
		"Dockerfile": "docker",
	}

......@@ -890,9 +905,7 @@ func (c *Config) writeRevision(repo *git.Repository, pageData *PageData, refs []
		if pageSize == 0 {
			pageSize = 5000
		}
		fmt.Println("grabbing commits")
		commits, err := repo.CommitsByPage(pageData.RevData.ID(), 0, pageSize)
		fmt.Println("got commits")
		bail(err)

		logs := []*CommitData{}

......@@ -1058,9 +1071,7 @@ func main() {
	}

	config.writeRepo()

	config.copyStatic(filepath.Join(config.Outdir, "main.css"), mainCss)
	config.copyStatic(filepath.Join(config.Outdir, "syntax.css"), syntaxCss)
	config.copyStatic()

	url := filepath.Join("/", "index.html")
	config.Logger.Info(url)

M static/main.css

+4, -0

......@@ -1,3 +1,7 @@
.border-b {
  border-bottom: 1px solid var(--grey);
}

body {
  max-width: 900px;
}

A static/smol.css

+575, -0

......@@ -0,0 +1,575 @@
*,
::before,
::after {
  box-sizing: border-box;
}

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
:-moz-focusring {
  outline: 1px dotted ButtonText;
}
:-moz-ui-invalid {
  box-shadow: none;
}

@media (prefers-color-scheme: light) {
  :root {
    --main-hue: 250;
    --white: #6a737d;
    --code: #fff8d3;
    --code-border: #f0d547;
    --pre: #f6f8fa;
    --bg-color: #fff;
    --text-color: #24292f;
    --link-color: #005cc5;
    --visited: #6f42c1;
    --blockquote: #005cc5;
    --blockquote-bg: #fff;
    --hover: #d73a49;
    --grey: #ccc;
    --grey-light: #6a708e;
    --shadow: #252525;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --main-hue: 250;
    --white: #f2f2f2;
    --code: #414558;
    --code-border: #252525;
    --pre: #252525;
    --bg-color: #282a36;
    --text-color: #f2f2f2;
    --link-color: #8be9fd;
    --visited: #bd93f9;
    --blockquote: #bd93f9;
    --blockquote-bg: #414558;
    --hover: #ff80bf;
    --grey: #414558;
    --grey-light: #6a708e;
    --shadow: #252525;
  }
}

html {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-size: 18px;
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
}

body {
  margin: 0 auto;
}

img {
  max-width: 100%;
  height: auto;
}

b,
strong {
  font-weight: bold;
}

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
    monospace;
}

code,
kbd,
samp {
  background-color: var(--code);
  border: 1px solid var(--code-border);
}

pre > code {
  background-color: inherit;
  padding: 0;
  border: none;
}

code {
  border-radius: 0.3rem;
  padding: 0.15rem 0.2rem 0.05rem;
}

pre {
  border-radius: 5px;
  padding: 1rem;
  margin: 1rem 0;
  overflow-x: auto;
  background-color: var(--pre) !important;
}

small {
  font-size: 0.8rem;
}

summary {
  display: list-item;
}

h1,
h2,
h3 {
  margin: 0;
  padding: 0.6rem 0 0 0;
  border: 0;
  font-style: normal;
  font-weight: inherit;
  font-size: inherit;
}

h1 > code {
  font-size: inherit;
}

h2 > code {
  font-size: inherit;
}

h3 > code {
  font-size: inherit;
}

path {
  fill: var(--text-color);
  stroke: var(--text-color);
}

hr {
  color: inherit;
  border: 0;
  margin: 0;
  height: 1px;
  background: var(--grey);
  margin: 1rem auto;
  text-align: center;
}

a {
  text-decoration: underline;
  color: var(--link-color);
}

a:hover,
a:visited:hover {
  color: var(--hover);
}

a:visited {
  color: var(--visited);
}

a.link-grey {
  text-decoration: underline;
  color: var(--white);
}

a.link-grey:visited {
  color: var(--white);
}

section {
  margin-bottom: 1.4rem;
}

section:last-child {
  margin-bottom: 0;
}

header {
  margin: 1rem auto;
}

p {
  margin: 0.8rem 0;
}

article {
  overflow-wrap: break-word;
}

blockquote {
  border-left: 5px solid var(--blockquote);
  background-color: var(--blockquote-bg);
  padding: 0.8rem;
  margin: 1rem 0;
}

blockquote > p {
  margin: 0;
}

ul,
ol {
  padding: 0 0 0 2rem;
  list-style-position: outside;
}

ul[style*="list-style-type: none;"] {
  padding: 0;
}

li {
  margin: 0.5rem 0;
}

li > pre {
  padding: 0;
}

footer {
  text-align: center;
  margin-bottom: 4rem;
}

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

dd:not(:last-child) {
  margin-bottom: 0.5rem;
}

figure {
  margin: 0;
}

.container {
  max-width: 900px;
  width: 100%;
}

.container-center {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.text-3xl {
  font-size: 3rem;
}

.text-2xl {
  font-size: 1.85rem;
  line-height: 1.15;
}

.text-xl {
  font-size: 1.55rem;
  line-height: 1.15;
}

.text-lg {
  font-size: 1.35rem;
  line-height: 1.15;
}

.text-md {
  font-size: 1.15rem;
  line-height: 1.15;
}

.text-sm {
  font-size: 0.875rem;
}

.text-center {
  text-align: center;
}

.text-underline {
  border-bottom: 3px solid var(--text-color);
  padding-bottom: 3px;
}

.font-bold {
  font-weight: bold;
}

.font-italic {
  font-style: italic;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

.max-w-half {
  max-width: 50%;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.m-0 {
  margin: 0;
}

.mt {
  margin-top: 0.5rem;
}

.mt-2 {
  margin-top: 1rem;
}

.mt-4 {
  margin-top: 2rem;
}

.mt-8 {
  margin-top: 4rem;
}

.mb {
  margin-bottom: 0.5rem;
}

.mb-2 {
  margin-bottom: 1rem;
}

.mb-4 {
  margin-bottom: 2rem;
}

.mb-8 {
  margin-bottom: 4rem;
}

.mb-16 {
  margin-bottom: 8rem;
}

.mr {
  margin-right: 0.5rem;
}

.ml-sm {
  margin-left: 0.25rem;
}

.ml {
  margin-left: 0.5rem;
}

.my {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.my-2 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-4 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.my-8 {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.mx {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-2 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.p-0 {
  padding: 0;
}

.py {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-4 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-8 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.gap {
  gap: 0.5rem;
}

.gap-2 {
  gap: 1rem;
}

.group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.group-h {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.flex-1 {
  flex: 1;
}

.items-end {
  align-items: end;
}

.items-start {
  align-items: start;
}

.justify-end {
  justify-content: end;
}

.font-grey-light {
  color: var(--grey-light);
}

.hidden {
  display: none;
}

.align-right {
  text-align: right;
}

/* ==== HELPERS ==== */

.logo-header {
  line-height: 1;
  display: inline-block;
  background-image: linear-gradient(to right, #FF5555, #FF79C6, #F8F859);
  color: transparent;
  background-clip: text;
  border: 3px solid #FF79C6;
  padding: 8px 10px 10px 10px;
  border-radius: 10px;
  box-shadow: 0px 5px 0px 0px var(--shadow);
}

.btn-icon {
  border: 3px solid hsl(var(--main-hue), 92%, 66%);
  background-color: hsl(var(--main-hue), 92%, 66%);
  padding: 0.25rem 0.3rem;
  border-radius: 0.25rem;
  box-shadow: 0px 5px 0px 0px var(--shadow);
  color: var(--white);
  cursor: pointer;
}

.btn-link {
  border: 3px solid hsl(var(--main-hue), 92%, 66%);
  background-color: hsl(var(--main-hue), 92%, 66%);
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  box-shadow: 0px 5px 0px 0px var(--shadow);
  color: var(--white);
  text-decoration: none;
  font-weight: bold;
}

.btn-link:visited:hover,
.btn-link:hover {
  border: 3px solid hsl(260, 92%, 66%);
  background-color: hsl(260, 92%, 66%);
  color: var(--white);
  transform: scale(.98, .98);
}

.btn-link:visited {
  color: var(--white);
}

.box {
  border: 2px solid var(--grey-light);
  border-radius: .5rem;
  padding: 1rem;
  text-decoration: none;
  box-shadow: 0px 5px 0px 0px var(--shadow);
  color: var(--white);
}

.box:hover {
  border: 2px solid var(--white);
}

.box:visited,
.box:visited:hover,
.box:hover {
  color: var(--white);
}

@media only screen and (max-width: 600px) {
  body {
    padding: 0 1rem;
  }

  header {
    margin: 0;
  }
}

...	...		@@ -335,10 +332,25 @@ func (c Config) writeHtml(writeData WriteData) {
335	332		bail(err)
336	333		}
337	334
338		-	func (c *Config) copyStatic(dst string, data []byte) {
339		-	c.Logger.Infof("writing (%s)", dst)
340		-	err := os.WriteFile(dst, data, 0755)
	335	+	func (c *Config) copyStatic() error {
	336	+	dir := "static"
	337	+	entries, err := sfs.ReadDir(dir)
341	338		bail(err)
	339	+
	340	+	for _, e := range entries {
	341	+	infp := filepath.Join(dir, e.Name())
	342	+	if e.IsDir() {
	343	+	continue
	344	+	}
	345	+
	346	+	w, err := os.ReadFile(infp)
	347	+	bail(err)
	348	+	fp := filepath.Join(c.Outdir, e.Name())
	349	+	c.Logger.Infof("writing (%s)", fp)
	350	+	os.WriteFile(fp, w, 0755)
	351	+	}
	352	+
	353	+	return nil
342	354		}
343	355
344	356		func (c Config) writeRootSummary(data PageData, readme template.HTML) {

...	...		@@ -740,15 +752,18 @@ func FilenameToDevIcon(filename string) string {
740	752		ext := filepath.Ext(filename)
741	753		extMappr := map[string]string{
742	754		".html": "html5",
743		-	".go": "go",
744		-	".py": "python",
745		-	".css": "css3",
746		-	".js": "javascript",
747		-	".md": "markdown",
	755	+	".go": "go",
	756	+	".py": "python",
	757	+	".css": "css3",
	758	+	".js": "javascript",
	759	+	".md": "markdown",
	760	+	".ts": "typescript",
	761	+	".tsx": "react",
	762	+	".jsx": "react",
748	763		}
749	764
750		-	nameMappr := map[string]string {
751		-	"Makefile": "cmake",
	765	+	nameMappr := map[string]string{
	766	+	"Makefile": "cmake",
752	767		"Dockerfile": "docker",
753	768		}
754	769

...	...		@@ -890,9 +905,7 @@ func (c Config) writeRevision(repo git.Repository, pageData *PageData, refs []
890	905		if pageSize == 0 {
891	906		pageSize = 5000
892	907		}
893		-	fmt.Println("grabbing commits")
894	908		commits, err := repo.CommitsByPage(pageData.RevData.ID(), 0, pageSize)
895		-	fmt.Println("got commits")
896	909		bail(err)
897	910
898	911		logs := []*CommitData{}

...	...		@@ -1058,9 +1071,7 @@ func main() {
1058	1071		}
1059	1072
1060	1073		config.writeRepo()
1061		-
1062		-	config.copyStatic(filepath.Join(config.Outdir, "main.css"), mainCss)
1063		-	config.copyStatic(filepath.Join(config.Outdir, "syntax.css"), syntaxCss)
	1074	+	config.copyStatic()
1064	1075
1065	1076		url := filepath.Join("/", "index.html")
1066	1077		config.Logger.Info(url)

...	...		@@ -1,6 +1,10 @@
1	1		REV=$(shell git rev-parse --short HEAD)
2	2		PROJECT="git-pgit-$(REV)"
3	3
	4	+	smol:
	5	+	curl https://pico.sh/smol.css -o ./static/smol.css
	6	+	.PHONY: smol
	7	+
4	8		clean:
5	9		rm -rf ./public
6	10		.PHONY: clean

...	...		@@ -28,6 +32,7 @@ static: build clean
28	32		.PHONY:
29	33
30	34		deploy:
31		-	rsync -rv ./public/* erock@pgs.sh:/$(PROJECT)
32		-	ssh erock@pgs.sh link git-pgit $(PROJECT) --write
	35	+	rsync -rv ./public/* hey@pgs.sh:/git-pgit-local
	36	+	# $(PROJECT)
	37	+	# ssh hey@pgs.sh link git-pgit $(PROJECT) --write
33	38		.PHONY: deploy

...	...		@@ -10,8 +10,7 @@
10	10
11	11		{{template "meta" .}}
12	12
13		-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
14		-	<link rel="stylesheet" href="https://pico.sh/smol.css" />
	13	+	<link rel="stylesheet" href="/smol.css" />
15	14		<link rel="stylesheet" href="/main.css" />
16	15		</head>
17	16		<body>

...	...		@@ -16,14 +16,16 @@
16	16		</div>
17	17
18	18		{{range .Tree.Items}}
19		-	<div class="flex justify-between items-center gap p-sm border-b tree-row">
	19	+	<div class="flex justify-between items-center gap-2 p tree-row border-b">
20	20		<div class="flex-1 tree-path flex items-center gap">
21	21		{{if .IsDir}}
22		-	<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512">
	22	+	<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="16" width="16" viewBox="0 0 512 512">
23	23		<path d="M0 96C0 60.7 28.7 32 64 32H196.1c19.1 0 37.4 7.6 50.9 21.1L289.9 96H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM64 80c-8.8 0-16 7.2-16 16V416c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16H286.6c-10.6 0-20.8-4.2-28.3-11.7L213.1 87c-4.5-4.5-10.6-7-17-7H64z"/>
24	24		</svg>
25	25		{{else}}
26		-	<i class="{{.Icon}}"></i>
	26	+	<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="16" width="16" viewBox="0 0 384 512">
	27	+	<path d="M320 464c8.8 0 16-7.2 16-16V160H256c-17.7 0-32-14.3-32-32V48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H320zM0 64C0 28.7 28.7 0 64 0H229.5c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64z"/>
	28	+	</svg>
27	29		{{end}}
28	30
29	31		<a href="{{.URL}}">{{.Name}}</a>

...	...		@@ -24,11 +24,8 @@ import (
24	24		"go.uber.org/zap"
25	25		)
26	26
27		-	//go:embed static/main.css
28		-	var mainCss []byte
29		-
30		-	//go:embed static/syntax.css
31		-	var syntaxCss []byte
	27	+	//go:embed static/*
	28	+	var sfs embed.FS
32	29
33	30		//go:embed html/*.tmpl
34	31		var efs embed.FS

...	...		@@ -120,7 +117,7 @@ type TreeItem struct {
120	117		Size string
121	118		NumLines int
122	119		Name string
123		-	Icon string
	120	+	Icon string
124	121		Path string
125	122		URL template.URL
126	123		CommitID string

...	...		@@ -1,3 +1,7 @@
	1	+	.border-b {
	2	+	border-bottom: 1px solid var(--grey);
	3	+	}
	4	+
1	5		body {
2	6		max-width: 900px;
3	7		}

...	...		@@ -0,0 +1,575 @@
	1	+	*,
	2	+	::before,
	3	+	::after {
	4	+	box-sizing: border-box;
	5	+	}
	6	+
	7	+	::-moz-focus-inner {
	8	+	border-style: none;
	9	+	padding: 0;
	10	+	}
	11	+	:-moz-focusring {
	12	+	outline: 1px dotted ButtonText;
	13	+	}
	14	+	:-moz-ui-invalid {
	15	+	box-shadow: none;
	16	+	}
	17	+
	18	+	@media (prefers-color-scheme: light) {
	19	+	:root {
	20	+	--main-hue: 250;
	21	+	--white: #6a737d;
	22	+	--code: #fff8d3;
	23	+	--code-border: #f0d547;
	24	+	--pre: #f6f8fa;
	25	+	--bg-color: #fff;
	26	+	--text-color: #24292f;
	27	+	--link-color: #005cc5;
	28	+	--visited: #6f42c1;
	29	+	--blockquote: #005cc5;
	30	+	--blockquote-bg: #fff;
	31	+	--hover: #d73a49;
	32	+	--grey: #ccc;
	33	+	--grey-light: #6a708e;
	34	+	--shadow: #252525;
	35	+	}
	36	+	}
	37	+
	38	+	@media (prefers-color-scheme: dark) {
	39	+	:root {
	40	+	--main-hue: 250;
	41	+	--white: #f2f2f2;
	42	+	--code: #414558;
	43	+	--code-border: #252525;
	44	+	--pre: #252525;
	45	+	--bg-color: #282a36;
	46	+	--text-color: #f2f2f2;
	47	+	--link-color: #8be9fd;
	48	+	--visited: #bd93f9;
	49	+	--blockquote: #bd93f9;
	50	+	--blockquote-bg: #414558;
	51	+	--hover: #ff80bf;
	52	+	--grey: #414558;
	53	+	--grey-light: #6a708e;
	54	+	--shadow: #252525;
	55	+	}
	56	+	}
	57	+
	58	+	html {
	59	+	background-color: var(--bg-color);
	60	+	color: var(--text-color);
	61	+	font-size: 18px;
	62	+	line-height: 1.5;
	63	+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
	64	+	Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
	65	+	sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	66	+	-webkit-text-size-adjust: 100%;
	67	+	-moz-tab-size: 4;
	68	+	tab-size: 4;
	69	+	}
	70	+
	71	+	body {
	72	+	margin: 0 auto;
	73	+	}
	74	+
	75	+	img {
	76	+	max-width: 100%;
	77	+	height: auto;
	78	+	}
	79	+
	80	+	b,
	81	+	strong {
	82	+	font-weight: bold;
	83	+	}
	84	+
	85	+	code,
	86	+	kbd,
	87	+	samp,
	88	+	pre {
	89	+	font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
	90	+	monospace;
	91	+	}
	92	+
	93	+	code,
	94	+	kbd,
	95	+	samp {
	96	+	background-color: var(--code);
	97	+	border: 1px solid var(--code-border);
	98	+	}
	99	+
	100	+	pre > code {
	101	+	background-color: inherit;
	102	+	padding: 0;
	103	+	border: none;
	104	+	}
	105	+
	106	+	code {
	107	+	border-radius: 0.3rem;
	108	+	padding: 0.15rem 0.2rem 0.05rem;
	109	+	}
	110	+
	111	+	pre {
	112	+	border-radius: 5px;
	113	+	padding: 1rem;
	114	+	margin: 1rem 0;
	115	+	overflow-x: auto;
	116	+	background-color: var(--pre) !important;
	117	+	}
	118	+
	119	+	small {
	120	+	font-size: 0.8rem;
	121	+	}
	122	+
	123	+	summary {
	124	+	display: list-item;
	125	+	}
	126	+
	127	+	h1,
	128	+	h2,
	129	+	h3 {
	130	+	margin: 0;
	131	+	padding: 0.6rem 0 0 0;
	132	+	border: 0;
	133	+	font-style: normal;
	134	+	font-weight: inherit;
	135	+	font-size: inherit;
	136	+	}
	137	+
	138	+	h1 > code {
	139	+	font-size: inherit;
	140	+	}
	141	+
	142	+	h2 > code {
	143	+	font-size: inherit;
	144	+	}
	145	+
	146	+	h3 > code {
	147	+	font-size: inherit;
	148	+	}
	149	+
	150	+	path {
	151	+	fill: var(--text-color);
	152	+	stroke: var(--text-color);
	153	+	}
	154	+
	155	+	hr {
	156	+	color: inherit;
	157	+	border: 0;
	158	+	margin: 0;
	159	+	height: 1px;
	160	+	background: var(--grey);
	161	+	margin: 1rem auto;
	162	+	text-align: center;
	163	+	}
	164	+
	165	+	a {
	166	+	text-decoration: underline;
	167	+	color: var(--link-color);
	168	+	}
	169	+
	170	+	a:hover,
	171	+	a:visited:hover {
	172	+	color: var(--hover);
	173	+	}
	174	+
	175	+	a:visited {
	176	+	color: var(--visited);
	177	+	}
	178	+
	179	+	a.link-grey {
	180	+	text-decoration: underline;
	181	+	color: var(--white);
	182	+	}
	183	+
	184	+	a.link-grey:visited {
	185	+	color: var(--white);
	186	+	}
	187	+
	188	+	section {
	189	+	margin-bottom: 1.4rem;
	190	+	}
	191	+
	192	+	section:last-child {
	193	+	margin-bottom: 0;
	194	+	}
	195	+
	196	+	header {
	197	+	margin: 1rem auto;
	198	+	}
	199	+
	200	+	p {
	201	+	margin: 0.8rem 0;
	202	+	}
	203	+
	204	+	article {
	205	+	overflow-wrap: break-word;
	206	+	}
	207	+
	208	+	blockquote {
	209	+	border-left: 5px solid var(--blockquote);
	210	+	background-color: var(--blockquote-bg);
	211	+	padding: 0.8rem;
	212	+	margin: 1rem 0;
	213	+	}
	214	+
	215	+	blockquote > p {
	216	+	margin: 0;
	217	+	}
	218	+
	219	+	ul,
	220	+	ol {
	221	+	padding: 0 0 0 2rem;
	222	+	list-style-position: outside;
	223	+	}
	224	+
	225	+	ul[style*="list-style-type: none;"] {
	226	+	padding: 0;
	227	+	}
	228	+
	229	+	li {
	230	+	margin: 0.5rem 0;
	231	+	}
	232	+
	233	+	li > pre {
	234	+	padding: 0;
	235	+	}
	236	+
	237	+	footer {
	238	+	text-align: center;
	239	+	margin-bottom: 4rem;
	240	+	}
	241	+
	242	+	dt {
	243	+	font-weight: bold;
	244	+	}
	245	+
	246	+	dd {
	247	+	margin-left: 0;
	248	+	}
	249	+
	250	+	dd:not(:last-child) {
	251	+	margin-bottom: 0.5rem;
	252	+	}
	253	+
	254	+	figure {
	255	+	margin: 0;
	256	+	}
	257	+
	258	+	.container {
	259	+	max-width: 900px;
	260	+	width: 100%;
	261	+	}
	262	+
	263	+	.container-center {
	264	+	width: 100%;
	265	+	height: 100%;
	266	+	display: flex;
	267	+	justify-content: center;
	268	+	}
	269	+
	270	+	.text-3xl {
	271	+	font-size: 3rem;
	272	+	}
	273	+
	274	+	.text-2xl {
	275	+	font-size: 1.85rem;
	276	+	line-height: 1.15;
	277	+	}
	278	+
	279	+	.text-xl {
	280	+	font-size: 1.55rem;
	281	+	line-height: 1.15;
	282	+	}
	283	+
	284	+	.text-lg {
	285	+	font-size: 1.35rem;
	286	+	line-height: 1.15;
	287	+	}
	288	+
	289	+	.text-md {
	290	+	font-size: 1.15rem;
	291	+	line-height: 1.15;
	292	+	}
	293	+
	294	+	.text-sm {
	295	+	font-size: 0.875rem;
	296	+	}
	297	+
	298	+	.text-center {
	299	+	text-align: center;
	300	+	}
	301	+
	302	+	.text-underline {
	303	+	border-bottom: 3px solid var(--text-color);
	304	+	padding-bottom: 3px;
	305	+	}
	306	+
	307	+	.font-bold {
	308	+	font-weight: bold;
	309	+	}
	310	+
	311	+	.font-italic {
	312	+	font-style: italic;
	313	+	}
	314	+
	315	+	.inline {
	316	+	display: inline;
	317	+	}
	318	+
	319	+	.inline-block {
	320	+	display: inline-block;
	321	+	}
	322	+
	323	+	.max-w-half {
	324	+	max-width: 50%;
	325	+	}
	326	+
	327	+	.flex {
	328	+	display: flex;
	329	+	}
	330	+
	331	+	.flex-col {
	332	+	flex-direction: column;
	333	+	}
	334	+
	335	+	.items-center {
	336	+	align-items: center;
	337	+	}
	338	+
	339	+	.m-0 {
	340	+	margin: 0;
	341	+	}
	342	+
	343	+	.mt {
	344	+	margin-top: 0.5rem;
	345	+	}
	346	+
	347	+	.mt-2 {
	348	+	margin-top: 1rem;
	349	+	}
	350	+
	351	+	.mt-4 {
	352	+	margin-top: 2rem;
	353	+	}
	354	+
	355	+	.mt-8 {
	356	+	margin-top: 4rem;
	357	+	}
	358	+
	359	+	.mb {
	360	+	margin-bottom: 0.5rem;
	361	+	}
	362	+
	363	+	.mb-2 {
	364	+	margin-bottom: 1rem;
	365	+	}
	366	+
	367	+	.mb-4 {
	368	+	margin-bottom: 2rem;
	369	+	}
	370	+
	371	+	.mb-8 {
	372	+	margin-bottom: 4rem;
	373	+	}
	374	+
	375	+	.mb-16 {
	376	+	margin-bottom: 8rem;
	377	+	}
	378	+
	379	+	.mr {
	380	+	margin-right: 0.5rem;
	381	+	}
	382	+
	383	+	.ml-sm {
	384	+	margin-left: 0.25rem;
	385	+	}
	386	+
	387	+	.ml {
	388	+	margin-left: 0.5rem;
	389	+	}
	390	+
	391	+	.my {
	392	+	margin-top: 0.5rem;
	393	+	margin-bottom: 0.5rem;
	394	+	}
	395	+
	396	+	.my-2 {
	397	+	margin-top: 1rem;
	398	+	margin-bottom: 1rem;
	399	+	}
	400	+
	401	+	.my-4 {
	402	+	margin-top: 2rem;
	403	+	margin-bottom: 2rem;
	404	+	}
	405	+
	406	+	.my-8 {
	407	+	margin-top: 4rem;
	408	+	margin-bottom: 4rem;
	409	+	}
	410	+
	411	+	.mx {
	412	+	margin-left: 0.5rem;
	413	+	margin-right: 0.5rem;
	414	+	}
	415	+
	416	+	.mx-2 {
	417	+	margin-left: 1rem;
	418	+	margin-right: 1rem;
	419	+	}
	420	+
	421	+	.p-0 {
	422	+	padding: 0;
	423	+	}
	424	+
	425	+	.py {
	426	+	padding-top: 0.5rem;
	427	+	padding-bottom: 0.5rem;
	428	+	}
	429	+
	430	+	.py-2 {
	431	+	padding-top: 1rem;
	432	+	padding-bottom: 1rem;
	433	+	}
	434	+
	435	+	.py-4 {
	436	+	padding-top: 2rem;
	437	+	padding-bottom: 2rem;
	438	+	}
	439	+
	440	+	.py-8 {
	441	+	padding-top: 4rem;
	442	+	padding-bottom: 4rem;
	443	+	}
	444	+
	445	+	.justify-between {
	446	+	justify-content: space-between;
	447	+	}
	448	+
	449	+	.justify-center {
	450	+	justify-content: center;
	451	+	}
	452	+
	453	+	.gap {
	454	+	gap: 0.5rem;
	455	+	}
	456	+
	457	+	.gap-2 {
	458	+	gap: 1rem;
	459	+	}
	460	+
	461	+	.group {
	462	+	display: flex;
	463	+	flex-direction: column;
	464	+	gap: 0.5rem;
	465	+	}
	466	+
	467	+	.group-h {
	468	+	display: flex;
	469	+	gap: 0.5rem;
	470	+	align-items: center;
	471	+	}
	472	+
	473	+	.flex-1 {
	474	+	flex: 1;
	475	+	}
	476	+
	477	+	.items-end {
	478	+	align-items: end;
	479	+	}
	480	+
	481	+	.items-start {
	482	+	align-items: start;
	483	+	}
	484	+
	485	+	.justify-end {
	486	+	justify-content: end;
	487	+	}
	488	+
	489	+	.font-grey-light {
	490	+	color: var(--grey-light);
	491	+	}
	492	+
	493	+	.hidden {
	494	+	display: none;
	495	+	}
	496	+
	497	+	.align-right {
	498	+	text-align: right;
	499	+	}
	500	+
	501	+	/* ==== HELPERS ==== */
	502	+
	503	+	.logo-header {
	504	+	line-height: 1;
	505	+	display: inline-block;
	506	+	background-image: linear-gradient(to right, #FF5555, #FF79C6, #F8F859);
	507	+	color: transparent;
	508	+	background-clip: text;
	509	+	border: 3px solid #FF79C6;
	510	+	padding: 8px 10px 10px 10px;
	511	+	border-radius: 10px;
	512	+	box-shadow: 0px 5px 0px 0px var(--shadow);
	513	+	}
	514	+
	515	+	.btn-icon {
	516	+	border: 3px solid hsl(var(--main-hue), 92%, 66%);
	517	+	background-color: hsl(var(--main-hue), 92%, 66%);
	518	+	padding: 0.25rem 0.3rem;
	519	+	border-radius: 0.25rem;
	520	+	box-shadow: 0px 5px 0px 0px var(--shadow);
	521	+	color: var(--white);
	522	+	cursor: pointer;
	523	+	}
	524	+
	525	+	.btn-link {
	526	+	border: 3px solid hsl(var(--main-hue), 92%, 66%);
	527	+	background-color: hsl(var(--main-hue), 92%, 66%);
	528	+	padding: 0.5rem 1rem;
	529	+	border-radius: 0.25rem;
	530	+	box-shadow: 0px 5px 0px 0px var(--shadow);
	531	+	color: var(--white);
	532	+	text-decoration: none;
	533	+	font-weight: bold;
	534	+	}
	535	+
	536	+	.btn-link:visited:hover,
	537	+	.btn-link:hover {
	538	+	border: 3px solid hsl(260, 92%, 66%);
	539	+	background-color: hsl(260, 92%, 66%);
	540	+	color: var(--white);
	541	+	transform: scale(.98, .98);
	542	+	}
	543	+
	544	+	.btn-link:visited {
	545	+	color: var(--white);
	546	+	}
	547	+
	548	+	.box {
	549	+	border: 2px solid var(--grey-light);
	550	+	border-radius: .5rem;
	551	+	padding: 1rem;
	552	+	text-decoration: none;
	553	+	box-shadow: 0px 5px 0px 0px var(--shadow);
	554	+	color: var(--white);
	555	+	}
	556	+
	557	+	.box:hover {
	558	+	border: 2px solid var(--white);
	559	+	}
	560	+
	561	+	.box:visited,
	562	+	.box:visited:hover,
	563	+	.box:hover {
	564	+	color: var(--white);
	565	+	}
	566	+
	567	+	@media only screen and (max-width: 600px) {
	568	+	body {
	569	+	padding: 0 1rem;
	570	+	}
	571	+
	572	+	header {
	573	+	margin: 0;
	574	+	}
	575	+	}

Commit c02493d

Commit `c02493d`