diff --git a/assets/sass/_colors.sass b/assets/sass/_colors.sass new file mode 100644 index 0000000..f0ae35f --- /dev/null +++ b/assets/sass/_colors.sass @@ -0,0 +1,28 @@ +// +// _colors.sass +// Attractive dark mode color scheme for fmtools +// + +// Primary palette +$primary: #3380ff +$primary-dark: #1a3e70 +$primary-light: #8fc6ff + +// Accent colors +$accent: #1de9b6 +$accent-dark: #00897b +$accent-light: #6fffd2 + + +// Success, warning, error +$success: #00e676 +$warning: #ffd600 +$error: #ff1744 + +// Neutral palette (dark mode) +$darkest: #0a0c11 +$background: #10131a +$surface: #1a1e29 +$border: #3a4054 +$text: #ffffff +$text-subtle: #bfc9e6 diff --git a/assets/sass/_layout.sass b/assets/sass/_layout.sass new file mode 100644 index 0000000..cc26f8b --- /dev/null +++ b/assets/sass/_layout.sass @@ -0,0 +1,117 @@ +/* _layout.sass */ + +/* Variables */ +$spacing-unit: 1.5rem +$section-spacing: 2rem +$border-radius: 8px + +html + background: darken($background, 3%) + +/* Base Layout */ +body + background: $background + color: $text + font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif + width: 100% + height: 100% + max-width: 1024px + margin: $spacing-unit auto + padding: $spacing-unit + box-sizing: border-box + border-radius: $border-radius + +header + background: $surface + margin: $spacing-unit + padding: $spacing-unit + display: flex + flex-wrap: wrap + align-items: center + justify-content: space-between + border-radius: $border-radius + margin: 0 auto + +header h1, header h1 a + margin: 0 + font-size: 1.6rem + font-weight: 600 + color: $text + text-decoration: none + padding: 0 + transition: color 0.4s + &:hover, &:focus + color: $accent-light + +nav + display: flex + gap: $spacing-unit + align-items: center + +nav ul + list-style: none + margin: 0 + padding: 0 + display: flex + gap: 0.5rem + flex-wrap: wrap + +nav ul li + margin: 0 + padding: 0 + +nav ul li a + padding: 0.4rem 0.6rem + border-radius: $border-radius + background: $primary-dark + color: $text + text-decoration: none + font-weight: 500 + transition: background 0.4s + &:hover, &:focus + background: $accent-dark + +@media (max-width: 600px) + header + flex-direction: column + align-items: flex-start + gap: $spacing-unit + + nav + width: 100% + justify-content: flex-start + margin-top: $spacing-unit + +main + margin: $spacing-unit 0 + padding: $spacing-unit + +footer + background: $surface + margin: $spacing-unit + padding: $spacing-unit + border-radius: $border-radius + margin: 0 auto + text-align: center + +footer p + margin: 0 + font-size: 0.9rem + color: $text-subtle + text-align: center + +section + border-bottom: 3px solid $surface + margin: $section-spacing 0 + padding-bottom: $section-spacing + +#page-header + border-bottom: 3px solid $surface + margin: $section-spacing 0 + padding-bottom: $section-spacing + text-align: center + h1 + margin: 0 + .time + font-size: 0.8rem + color: $text-subtle diff --git a/assets/sass/_links.sass b/assets/sass/_links.sass new file mode 100644 index 0000000..8178585 --- /dev/null +++ b/assets/sass/_links.sass @@ -0,0 +1,36 @@ +/* _text.sass */ + +#quick-links + text-align: left + +#link-list + display: flex + gap: $spacing-unit + align-items: left + margin: $spacing-unit 0 + +#link-list h2 + flex: none + +#link-list ul + list-style: none + margin: 0 + padding: 0 + display: flex + gap: 1rem + flex-wrap: wrap + +#link-list ul li + margin: 0 + padding: 0 + +#link-list ul li a + padding: 0.3rem 0.6rem + border-radius: $border-radius + background: $primary-light + color: $darkest + text-decoration: none + font-weight: 500 + transition: background 0.4s + &:hover, &:focus + background: $accent-light diff --git a/assets/sass/_taxonomy.sass b/assets/sass/_taxonomy.sass new file mode 100644 index 0000000..41dcea0 --- /dev/null +++ b/assets/sass/_taxonomy.sass @@ -0,0 +1,79 @@ + +table#taxonomy-table + width: 100% + border-collapse: collapse + // border: 3px solid $darkest + box-sizing: border-box + background: $surface + text-align: left + + tr:nth-child(even) + background: darken($surface, 2%) + transition: background 0.4s + tr:nth-child(odd) + background: lighten($surface, 3%) + transition: background 0.4s + tr:hover, tr:focus + background: $border + +#taxonomy-table thead + text-align: left + border: none + background: $darkest + border-radius: $border-radius $border-radius 0 0 + +#taxonomy-table th + color: $text + padding: 0.6rem 0.6rem + text-align: left + font-weight: 600 + border: none + +#taxonomy-table td + padding: 0.3rem 0.6rem + text-align: left + font-weight: 600 + border: none + +#taxonomy-table tr + border-bottom: 3px solid $background + &:hover, &:focus + background: $primary-light + +#taxonomy-table a.term-link + padding: 0.2rem 0.6rem + margin: 0.2rem + display: inline-block + border-radius: $border-radius + text-decoration: none + font-weight: 500 + color: $text + transition: color 0.4s + &:hover, &:focus + color: $darkest + +#taxonomy-table a.taxonomy-name + padding: 0 + margin: 0.2rem + display: inline-block + border-radius: $border-radius + text-decoration: none + font-weight: 500 + color: $text + transition: color 0.4s + &:hover, &:focus + color: $accent-light + +#taxonomy-page a.term-link + padding: 0.3rem 1.2rem + margin: 0.2rem + display: inline-block + border-radius: $border-radius + text-decoration: none + font-weight: 500 + color: $text + transition: color 0.4s + font-size: 1.2rem + &:hover, &:focus + color: $darkest + diff --git a/assets/sass/main.sass b/assets/sass/main.sass index b449a18..2d28d0a 100644 --- a/assets/sass/main.sass +++ b/assets/sass/main.sass @@ -1,4 +1,5 @@ @import "fonts" -* - color: white - background: black \ No newline at end of file +@import "colors" +@import "layout" +@import "taxonomy" +@import "links" \ No newline at end of file diff --git a/layouts/_partials/term-link.html b/layouts/_partials/term-link.html index 9a38dd3..0b20302 100644 --- a/layouts/_partials/term-link.html +++ b/layouts/_partials/term-link.html @@ -7,6 +7,7 @@ {{ $b := printf "0x%s" (substr $hash 4 2) | int }} {{ $rgba := printf "rgba(%d,%d,%d,0.2)" $r $g $b }} diff --git a/layouts/home.html b/layouts/home.html index 0df6597..bf97519 100644 --- a/layouts/home.html +++ b/layouts/home.html @@ -1,7 +1,13 @@ {{ define "main" }} {{ .Content }} - {{ range site.RegularPages }} -

{{ .LinkTitle }}

- {{ .Summary }} - {{ end }} + {{ $pages := shuffle (where site.RegularPages "Section" "tools") | first 20 }} +
+

Featured Tools

+ {{ range $pages }} +
+

{{ .Title }}

+

{{ .Content | truncate 100 }}

+
+ {{ end }} +
{{ end }} diff --git a/layouts/section.html b/layouts/section.html index 50fc92d..e9fbe06 100644 --- a/layouts/section.html +++ b/layouts/section.html @@ -1,8 +1,12 @@ {{ define "main" }}

{{ .Title }}

{{ .Content }} - {{ range .Pages }} -

{{ .LinkTitle }}

- {{ .Summary }} - {{ end }} +
+ {{ range .Pages }} +
+

{{ .Title }}

+

{{ .Content | truncate 100 }}

+
+ {{ end }} +
{{ end }} diff --git a/layouts/taxonomies.html b/layouts/taxonomies.html new file mode 100644 index 0000000..f25b372 --- /dev/null +++ b/layouts/taxonomies.html @@ -0,0 +1,37 @@ +{{ define "main" }} +

{{ .Title }}

+ {{ .Content }} + +
+ + + + {{ range $taxonomyname, $taxonomy := .Site.Taxonomies }} + {{ with $taxonomy }} + + + + + {{ end }} + {{ end }} + +
+ + {{ $taxonomyname | strings.FirstUpper }} + + + {{ range $key, $value := $taxonomy }} + {{ partial "term-link.html" (dict "name" $key "taxonomy" $taxonomyname) }} + {{ end }} +
+
+ + +{{ end }} diff --git a/layouts/taxonomy.html b/layouts/taxonomy.html index c2e7875..2095436 100644 --- a/layouts/taxonomy.html +++ b/layouts/taxonomy.html @@ -1,7 +1,11 @@ {{ define "main" }} -

{{ .Title }}

+

All {{ .Title }}

{{ .Content }} +
+ {{ $taxonomy := .Title | urlize }} {{ range .Pages }} -

{{ .LinkTitle }}

+ + {{ partial "term-link.html" (dict "name" .LinkTitle "taxonomy" $taxonomy ) }} {{ end }} +
{{ end }} diff --git a/layouts/tools/page.html b/layouts/tools/page.html index 8cb6eec..43180de 100644 --- a/layouts/tools/page.html +++ b/layouts/tools/page.html @@ -1,47 +1,41 @@ {{ define "main" }} + +

{{ .Title }}

{{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }} {{ $dateHuman := .Date | time.Format ":date_long" }} - Updated + Updated + +
{{ with .Params.links }} -
-

Links

- + {{ end }} - {{ with .Params.website }} -

- Website: {{ . }} -

- {{ end }} - - {{ with .Params.github }} -

- View on GitHub -

- {{ end }} - -
+

At a Glance

- - - - - - - +
TaxonomyTerms
{{ range $taxonomyname, $taxonomy := .Site.Taxonomies }} {{ with $taxonomy }} - +
{{ $taxonomyname | strings.FirstUpper }} + + {{ $taxonomyname | strings.FirstUpper }} + + {{ range $key, $value := $taxonomy }} {{ partial "term-link.html" (dict "name" $key "taxonomy" $taxonomyname) }}