improve style and base layout

2025-06-06 17:06:11 -06:00
parent 94950041f6
commit 4acfe1d027
11 changed files with 349 additions and 42 deletions
--- 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