Sass Updates

sass/framework/_forms.sass

@@ -0,0 +1,61 @@
+// pages/_forms.sass
+
+@use '../abstracts' as *
+@use '../base' as *
+
+#edit-page-form-novaconium
+  // Form groups: Spacing
+  .form-group
+    margin-bottom: space('md')  // 1rem
+
+    &.fullwidth textarea
+      width: 100%
+      resize: vertical
+
+  .checkbox-group
+    margin-top: space('lg')  // 1.5rem
+
+  // Inputs: Dark bg, green focus
+  input[type="text"],
+  input[type="number"],
+  textarea,
+  select
+    background-color: color('bg-darker')  // Deeper green-black
+    border: 1px solid color('border-light')
+    color: $text-light
+    padding: space('sm')
+    border-radius: 4px
+    font-family: 'VT323', $mono-font  // Matrix monospace
+
+    &:focus
+      border-color: $accent-light  // Lime focus
+      box-shadow: 0 0 0 space('xs') rgba($accent-light, 0.3)  // Glow ring
+      outline: none
+
+  input[type="checkbox"]
+    accent-color: $accent-light  // Green checkbox
+
+  // Submit button: Green primary
+  button[type="submit"]
+    background-color: $accent-light
+    color: color('bg-dark')  // Dark text on green
+    border: none
+    padding: space('sm') space('md')
+    border-radius: 4px
+    cursor: pointer
+    font-family: 'VT323', $mono-font
+
+    &:hover, &:focus
+      background-color: hsl(120, 100%, 30%)  // Darker green (35% L -5%)
+      box-shadow: 0 0 4px rgba($accent-light, 0.5)
+
+  // Text/links: Muted with hover
+  p
+    color: $text-muted
+
+  a
+    color: $accent-light
+
+    &:hover
+      color: $text-lighter  // Brighter green
+      text-decoration: underline

sass/framework/_login_form.sass

@@ -0,0 +1,53 @@
+// framework/_login_form.sass
+
+@use '../abstracts' as *
+
+#login
+  // No background or border—use parent's ambient styling
+  padding: 0 // Or keep minimal if needed; adjust to 2rem if you want internal space
+  // No centering: left-aligned by default
+
+  // Wrapper for inputs/button to align widths
+  input[type="text"],
+  input[type="password"],
+  button[type="submit"]
+    width: 100% // Full width of form (no max cap for flow)
+    max-width: 300px // Keep cap for consistency across fields
+    padding: 1rem
+    margin-bottom: 1rem
+    box-sizing: border-box // Include padding in width
+    font-size: 1rem
+    border: 1px solid $border-light
+    border-radius: 4px
+    background: $bg-dark
+    color: $text-light
+
+  // Icon backgrounds: Cyber icons via data URI, now in white for visibility
+  input[type="text"] // Username input
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")
+    background-repeat: no-repeat
+    background-position: 1rem center
+    background-size: 20px
+    padding-left: 3rem // Space for icon
+
+  input[type="password"] // Password input
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E")
+    background-repeat: no-repeat
+    background-position: 1rem center
+    background-size: 20px
+    padding-left: 3rem // Space for icon
+
+  button[type="submit"]
+    background: $accent-light // Green accent for submit
+    border-color: $accent-light
+    cursor: pointer
+    transition: background 0.2s
+
+    &:hover
+      background: $accent-light
+      text-shadow: 0 0 5px rgba($accent-light, 0.5) // Cyber glow
+
+    // No icon needed for button, but add if you want (e.g., arrow)
+    &::after
+      content: ' →' // Simple arrow, or swap for Material Icon
+      margin-left: 0.5rem

sass/framework/_logo.sass

@@ -0,0 +1,78 @@
+#biglogo
+  position: relative
+  display: inline-block
+  padding: 20px 0
+  border-radius: 0 // Keep it sharp, no curves
+  overflow: hidden
+
+  &::before
+    content: ''
+    position: absolute
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    background-image: linear-gradient(rgba(0, 255, 0, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 0, 0.02) 1px, transparent 1px)
+    background-size: 20px 20px
+    opacity: 0.1 // Subtle grid/matrix rain hint
+    pointer-events: none
+
+  // Scan lines for extra flicker
+  &::after
+    content: ''
+    position: absolute
+    top: 0
+    left: 0
+    right: 0
+    height: 1px
+    background: linear-gradient(90deg, transparent, #00ff00, transparent)
+    opacity: 0.05
+    animation: scan 3s linear infinite
+
+  .main
+    display: block
+    font-family: 'Orbitron', sans-serif // Cyberpunk geometric punch
+    font-size: 4.5rem // Chunky figlet scale
+    font-weight: 900 // Black weight for max angular depth
+    color: #fff
+    letter-spacing: 0.1em // Slightly looser for Orbitron's geometry
+    line-height: 0.85 // Compact height like figlet blocks
+    text-transform: uppercase
+    
+    // Multi-layer shadow to mimic ansishadow's depth: base shadow + edge glow
+    text-shadow: 4px 4px 0 #222, 5px 5px 0 #111, -1px -1px 0 #00ff00, 1px 1px 20px rgba(0, 255, 0, 0.3) // Main drop shadow, deeper offset, subtle green edge highlight for cyber pop, glow for security flair
+    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.8)) // Browser shadow boost
+
+  .sub
+    display: block
+    font-family: 'Orbitron', sans-serif // Match for cohesion, or swap to monospace if you want contrast
+    font-size: 2.5rem
+    font-weight: 700 // Bold but not overpowering
+    color: #fff
+    letter-spacing: 0.15em // Wider for emphasis
+    margin-top: 0.5rem
+    text-shadow: 2px 2px 0 #222, -1px -1px 0 #00ff00, 1px 1px 10px rgba(0, 255, 0, 0.2) // Lighter shadow, subtle green edge, glow
+    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.6))
+
+  // Optional: Glitch animation on hover for that hacked feel
+  &:hover
+    .main
+      animation: glitch 0.3s infinite
+
+@keyframes scan
+  0%
+    top: -1px
+  100%
+    top: 100%
+
+@keyframes glitch
+  0%, 100%
+    transform: translate(0)
+  20%
+    transform: translate(-2px, 2px)
+  40%
+    transform: translate(-2px, -2px)
+  60%
+    transform: translate(2px, 2px)
+  80%
+    transform: translate(2px, -2px)

sass/framework/_main.sass

@@ -0,0 +1,61 @@
+// layout/_main.sass
+
+@use '../abstracts' as *
+@use '../base' as *
+
+// Main page wrapper: Centered flex
+#page .container
+  display: flex
+  padding: 0
+  justify-content: center
+  align-items: flex-start
+  padding-top: space('lg')
+
+// Article content: Fixed width, no shrink
+article
+  width: 1140px
+  flex-shrink: 0
+  padding: 3rem
+  margin: 0
+  background-color: $bg-dark
+  border: 1px solid $bg-darker
+
+ul#leftnav
+  width: 320px
+  flex-shrink: 0
+  list-style: none
+  padding: 0
+  margin: 0 space('xl') 0 0 // Right margin preserved (overrides the 0 for other sides)
+  background-color: $bg-dark
+  border: 1px solid $bg-darker
+
+#leftnav li
+  border-bottom: 1px solid color('border-light')
+
+  &:last-child
+    border-bottom: none
+
+#leftnav a
+  display: block
+  padding: space('sm') space('md')  // Consistent spacing
+  text-decoration: none
+  color: $text-light  // Theme text
+
+  &:hover, &:focus
+    background-color: rgba($accent-light, 0.1)  // Green hover tint
+    color: $accent-light  // Accent on hover
+    border-radius: 4px
+
+// Responsive: Stack on mobile (add to themes/ for media queries)
+@media (max-width: 1280px)  // Your xl breakpoint
+  #page .container
+    flex-direction: column
+    align-items: center
+
+  article, #leftnav
+    width: 100%
+    max-width: 900px
+    margin: space('md') 0
+
+  #leftnav
+    margin-right: 0

sass/framework/_ui.sass

@@ -0,0 +1,58 @@
+// components/_ui.sass
+
+@use '../abstracts' as *
+@use '../base' as *
+
+// Code blocks: Monospace lock-in with darker green tint
+code
+  font-family: 'VT323', $mono-font  // Prioritize Matrix font
+  font-size: 0.875rem  // Smaller for inline; reset has base
+  background-color: color('bg-darker')  // Deeper green-black
+  color: $text-light  // Lighter green text
+  padding: space('xs') space('sm')
+  border-radius: 4px
+  border: 1px solid color('border-light')
+  box-shadow: 0 0 2px rgba($accent-light, 0.1)  // Subtle glow
+
+// Utility: Small text (if still needed; consider rem-based)
+.small
+  font-size: 0.625rem  // 10px equiv; use sparingly
+
+// Error/notice divs: Centered alerts with theme colors
+div.error, div.notice, div#debug
+  margin: space('xl') auto  // Top/bottom spacing from map
+  width: 900px  // Fixed width; add media query for mobile later
+  padding: space('lg')  // Generous padding
+  border-radius: 6px
+  border: 1px solid
+
+div.error
+  background-color: rgba(color('accent-error'), 0.1)  // Subtle red tint
+  color: color('accent-error')  // Darker red text
+  border-color: color('accent-error')
+
+div.notice
+  background-color: rgba(color('accent-success'), 0.1)  // Green tint
+  color: color('accent-success')  // Heavier green text
+  border-color: color('accent-success')
+
+div#debug
+  background-color: color('bg-darker')  // Deeper bg for debug
+  color: $text-muted  // Muted green
+  border-color: color('border-light')
+  margin-top: space('2xl')
+  margin-bottom: space('2xl')
+
+// Tables: Simplified; reset handles collapse/padding
+.pages-table
+  width: 100%
+  border: 1px solid color('border-light')  // Green border
+
+  th, td
+    border: 1px solid color('border-light')
+    text-align: left
+
+  th
+    background-color: rgba($accent-light, 0.05)  // Subtle accent bg
+    color: $text-lighter  // Header green
+    font-weight: 600  // Semi-bold; no bold in monospace

sass/framework/index.sass

@@ -0,0 +1,5 @@
+@forward 'main';
+@forward 'ui';
+@forward 'forms';
+@forward 'login_form';
+@forward 'logo';