improve style and base layout

2025-06-06 17:06:11 -06:00
11 changed files with 349 additions and 42 deletions
--- a/assets/sass/_colors.sass
+++ 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
--- a/assets/sass/_layout.sass
+++ 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
--- a/assets/sass/_links.sass
+++ 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
--- a/assets/sass/_taxonomy.sass
+++ 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
+
--- a/assets/sass/main.sass
+++ b/assets/sass/main.sass
@@ -1,4 +1,5 @@
@import "fonts"
-*
-    color: white
-    background: black
+@import "colors"
+@import "layout"
+@import "taxonomy"
+@import "links"
--- 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 }}
 <a 
+    class="term-link"
    id="{{ $taxonomy | urlize }}_{{ $name | urlize }}" 
    style="background:rgba({{ $r }},{{ $g }},{{ $b }},0.4)" 
    href="{{ "/" | relLangURL}}{{ $taxonomy | urlize }}{{ "/" | relLangURL}}{{ $name | urlize }}">
--- a/layouts/home.html
+++ b/layouts/home.html
@@ -1,7 +1,13 @@
 {{ define "main" }}
  {{ .Content }}
-  {{ range site.RegularPages }}
-    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
-    {{ .Summary }}
-  {{ end }}
+  {{ $pages := shuffle (where site.RegularPages "Section" "tools") | first 20 }}
+  <section>
+    <h2>Featured Tools</h2>
+    {{ range $pages }}
+      <article>
+        <h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
+            <p>{{ .Content | truncate 100 }}</p>
+      </article>
+    {{ end }}
+  </section>
 {{ end }}
--- a/layouts/section.html
+++ b/layouts/section.html
@@ -1,8 +1,12 @@
 {{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
-  {{ range .Pages }}
-    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
-    {{ .Summary }}
-  {{ end }}
+  <section>
+    {{ range .Pages }}
+      <article>
+        <h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
+            <p>{{ .Content | truncate 100 }}</p>
+      </article>
+    {{ end }}
+  </section>
 {{ end }}
--- a/layouts/taxonomies.html
+++ b/layouts/taxonomies.html
@@ -0,0 +1,37 @@
+{{ define "main" }}
+  <h1>{{ .Title }}</h1>
+  {{ .Content }}
+
+  <section>
+    <table id="taxonomy-table">
+      <!-- <thead>
+        <tr>
+          <th>Taxonomy</th>
+          <th>Terms</th>
+        </tr>
+      </thead> -->
+      <tbody>
+        {{ range $taxonomyname, $taxonomy := .Site.Taxonomies }}
+        {{ with $taxonomy }}
+        <tr>
+          <td>
+            <a 
+              class="taxonomy-name" 
+              href="{{ "/" | relLangURL }}{{ $taxonomyname }}">
+              {{ $taxonomyname | strings.FirstUpper }}
+            </a>
+          </td>
+          <td>
+            {{ range $key, $value := $taxonomy }}
+              {{ partial "term-link.html" (dict "name" $key "taxonomy" $taxonomyname) }}
+            {{ end }}
+          </td>
+        </tr>
+        {{ end }}
+        {{ end }}
+      </tbody>
+    </table>
+  </section>
+
+
+{{ end }}
--- a/layouts/taxonomy.html
+++ b/layouts/taxonomy.html
@@ -1,7 +1,11 @@
 {{ define "main" }}
-  <h1>{{ .Title }}</h1>
+  <h1>All {{ .Title }}</h1>
  {{ .Content }}
+  <section id="taxonomy-page">
+  {{ $taxonomy := .Title | urlize }}
  {{ range .Pages }}
-    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+    <!-- <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2> -->
+    {{ partial "term-link.html" (dict "name" .LinkTitle "taxonomy" $taxonomy ) }}
  {{ end }}
+  </section>
 {{ end }}
--- a/layouts/tools/page.html
+++ b/layouts/tools/page.html
@@ -1,47 +1,41 @@
 {{ define "main" }}
+
+  <div id="page-header">
  <h1>{{ .Title }}</h1>

  {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
  {{ $dateHuman := .Date | time.Format ":date_long" }}
-  Updated <time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
+  <span class="time">Updated <time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time></span>
+
+  </div>

  {{ with .Params.links }}
-  <section>
-    <h2>Links</h2>
-    <ul>
-      {{ range . }}
-        <li><a href="{{ .url }}" target="_blank" rel="noopener">{{ .title }}</a></li>
-      {{ end }}
-    </ul>
+  <section id="quick-links">
+    <h2>Quick Links</h2>
+    <div id="link-list">
+      <ul>
+        {{ range . }}
+          <li><a href="{{ .url }}" target="_blank" rel="noopener">{{ .title }}</a></li>
+        {{ end }}
+      </ul>
+    </div>
  </section>
  {{ end }}

-  {{ with .Params.website }}
-  <p>
-    Website: <a href="{{ . }}" target="_blank" rel="noopener">{{ . }}</a>
-  </p>
-  {{ end }}
-
-  {{ with .Params.github }}
-  <p>
-    <a href="{{ . }}" target="_blank" rel="noopener">View on GitHub</a>
-  </p>
-  {{ end }}
-
-  <section>
+  <section id="taxonomies">
    <h2>At a Glance</h2>
-    <table id="taxonomies">
-      <thead>
-        <tr>
-          <th>Taxonomy</th>
-          <th>Terms</th>
-        </tr>
-      </thead>
+    <table id="taxonomy-table">
      <tbody>
        {{ range $taxonomyname, $taxonomy := .Site.Taxonomies }}
        {{ with $taxonomy }}
        <tr>
-          <th>{{ $taxonomyname | strings.FirstUpper }}</th>
+          <td>
+            <a 
+              class="taxonomy-name" 
+              href="{{ "/" | relLangURL }}{{ $taxonomyname }}">
+              {{ $taxonomyname | strings.FirstUpper }}
+            </a>
+            </td>
          <td>
            {{ range $key, $value := $taxonomy }}
              {{ partial "term-link.html" (dict "name" $key "taxonomy" $taxonomyname) }}