improve style and base layout

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

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

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

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
+

assets/sass/main.sass

@@ -1,4 +1,5 @@
 @import "fonts"
-*
-    color: white
-    background: black
+@import "colors"
+@import "layout"
+@import "taxonomy"
+@import "links"