Sass Updates
This commit is contained in:
parent
39a14a759b
commit
12783d351c
@ -24,6 +24,9 @@ docker run --rm --interactive --tty --volume ./novaconium/:/app composer:latest
|
|||||||
cp -R novaconium/vendor/4lt/novaconium/skeleton/. .;
|
cp -R novaconium/vendor/4lt/novaconium/skeleton/. .;
|
||||||
|
|
||||||
# Edit .env
|
# Edit .env
|
||||||
|
# pwgen -cnsB1v 12 root password
|
||||||
|
# pwgen -cnsB1v 12 mysql user password (need in both config and env)
|
||||||
|
# pwgen -cnsB1v 64 framework key (need in config)
|
||||||
# Edit novaconium/App/config.php
|
# Edit novaconium/App/config.php
|
||||||
|
|
||||||
docker compose up -d
|
docker compose up -d
|
||||||
|
|||||||
80
sass/abstracts/_variables.sass
Normal file
80
sass/abstracts/_variables.sass
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
// abstracts/_variables.sass (updated)
|
||||||
|
|
||||||
|
@use 'sass:map'
|
||||||
|
|
||||||
|
// Color palette (Sass map: HSL for modularity; all lightnesses darkened ~10-20%)
|
||||||
|
$colors: (
|
||||||
|
'bg-dark': hsl(0, 0%, 2%),
|
||||||
|
'bg-darker': hsl(210, 7%, 5%),
|
||||||
|
'text-light': hsla(0, 0%, 100%, 1.00),
|
||||||
|
'text-lighter': hsl(120, 52%, 15%),
|
||||||
|
'text-muted': hsl(120, 40%, 45%),
|
||||||
|
'accent-light': hsl(120, 100%, 35%),
|
||||||
|
'accent-success': hsl(120, 80%, 45%),
|
||||||
|
'accent-warning': hsl(60, 100%, 35%),
|
||||||
|
'accent-error': hsl(0, 100%, 45%),
|
||||||
|
'border-light': hsla(120, 60%, 70%, 0.2)
|
||||||
|
)
|
||||||
|
|
||||||
|
// Helper functions to pull from map
|
||||||
|
@function color($key)
|
||||||
|
@return map.get($colors, $key)
|
||||||
|
|
||||||
|
// Direct vars for common use
|
||||||
|
$bg-dark: color('bg-dark') !default
|
||||||
|
$bg-darker: color('bg-darker') !default
|
||||||
|
$text-light: color('text-light') !default
|
||||||
|
$text-lighter: color('text-lighter') !default
|
||||||
|
$text-muted: color('text-muted') !default
|
||||||
|
$accent-light: color('accent-light') !default
|
||||||
|
$accent-success: color('accent-success') !default
|
||||||
|
$accent-warning: color('accent-warning') !default
|
||||||
|
$accent-error: color('accent-error') !default
|
||||||
|
$border-light: color('border-light') !default
|
||||||
|
|
||||||
|
$font-stack: 'Courier New', 'SF Mono', monospace
|
||||||
|
$mono-font: 'Courier New', 'SF Mono', 'Fira Code', Consolas, monospace
|
||||||
|
|
||||||
|
$spacing: (
|
||||||
|
'xs': 0.25rem,
|
||||||
|
'sm': 0.5rem,
|
||||||
|
'md': 1rem,
|
||||||
|
'lg': 1.5rem,
|
||||||
|
'xl': 2.5rem,
|
||||||
|
'2xl': 4rem
|
||||||
|
)
|
||||||
|
|
||||||
|
@function space($key)
|
||||||
|
@return map.get($spacing, $key)
|
||||||
|
|
||||||
|
$breakpoints: (
|
||||||
|
'sm': 640px,
|
||||||
|
'md': 768px,
|
||||||
|
'lg': 1024px,
|
||||||
|
'xl': 1280px,
|
||||||
|
'2xl': 1536px
|
||||||
|
)
|
||||||
|
|
||||||
|
$z-index: (
|
||||||
|
'dropdown': 1000,
|
||||||
|
'sticky': 50,
|
||||||
|
'modal': 2000
|
||||||
|
)
|
||||||
|
|
||||||
|
@function z($key)
|
||||||
|
@return map.get($z-index, $key)
|
||||||
|
|
||||||
|
$dark-mode: true !default
|
||||||
|
|
||||||
|
:root
|
||||||
|
--bg-dark: #{color('bg-dark')}
|
||||||
|
--bg-darker: #{color('bg-darker')}
|
||||||
|
--text-light: #{color('text-light')}
|
||||||
|
--text-lighter: #{color('text-lighter')}
|
||||||
|
--text-muted: #{color('text-muted')}
|
||||||
|
--accent-light: #{color('accent-light')}
|
||||||
|
--accent-success: #{color('accent-success')}
|
||||||
|
--accent-warning: #{color('accent-warning')}
|
||||||
|
--accent-error: #{color('accent-error')}
|
||||||
|
--border-light: #{color('border-light')}
|
||||||
|
--font-stack: #{$font-stack}
|
||||||
1
sass/abstracts/index.sass
Normal file
1
sass/abstracts/index.sass
Normal file
@ -0,0 +1 @@
|
|||||||
|
@forward 'variables';
|
||||||
6
sass/base/_background.sass
Normal file
6
sass/base/_background.sass
Normal file
File diff suppressed because one or more lines are too long
178
sass/base/_reset.sass
Normal file
178
sass/base/_reset.sass
Normal file
@ -0,0 +1,178 @@
|
|||||||
|
// base/_reset.sass
|
||||||
|
|
||||||
|
@use '../abstracts' as *
|
||||||
|
|
||||||
|
// Global box-sizing and resets
|
||||||
|
*
|
||||||
|
box-sizing: border-box
|
||||||
|
|
||||||
|
html
|
||||||
|
font-size: 16px // Base font size
|
||||||
|
line-height: 1.5
|
||||||
|
scroll-behavior: smooth
|
||||||
|
background-color: $bg-dark // Dark bg
|
||||||
|
color: $text-light // Light text
|
||||||
|
|
||||||
|
body
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
font-family: $font-stack // e.g., -apple-system, sans-serif
|
||||||
|
background-color: $bg-dark
|
||||||
|
color: $text-light
|
||||||
|
min-height: 100vh
|
||||||
|
|
||||||
|
// Headings: Light, bold, with spacing
|
||||||
|
h1, h2, h3, h4, h5, h6
|
||||||
|
margin: 0 0 0.5em
|
||||||
|
font-weight: 600
|
||||||
|
line-height: 1.2
|
||||||
|
color: $accent-light
|
||||||
|
|
||||||
|
h1
|
||||||
|
font-size: 2.5rem
|
||||||
|
|
||||||
|
h2
|
||||||
|
font-size: 2rem
|
||||||
|
|
||||||
|
h3
|
||||||
|
font-size: 1.75rem
|
||||||
|
|
||||||
|
h4
|
||||||
|
font-size: 1.5rem
|
||||||
|
|
||||||
|
h5
|
||||||
|
font-size: 1.25rem
|
||||||
|
|
||||||
|
h6
|
||||||
|
font-size: 1rem
|
||||||
|
|
||||||
|
// Paragraphs and text
|
||||||
|
p
|
||||||
|
margin: 0 0 1em
|
||||||
|
|
||||||
|
small
|
||||||
|
font-size: 0.875rem
|
||||||
|
|
||||||
|
strong, b
|
||||||
|
font-weight: 700
|
||||||
|
|
||||||
|
em, i
|
||||||
|
font-style: italic
|
||||||
|
|
||||||
|
// Links: Light with hover underline
|
||||||
|
a
|
||||||
|
color: $accent-light
|
||||||
|
text-decoration: none
|
||||||
|
border-bottom: 1px solid transparent
|
||||||
|
transition: border-color 0.2s ease
|
||||||
|
|
||||||
|
&:hover, &:focus
|
||||||
|
border-bottom-color: $accent-light
|
||||||
|
outline: none
|
||||||
|
|
||||||
|
// Lists
|
||||||
|
ul, ol
|
||||||
|
margin: 0 0 1em
|
||||||
|
padding-left: 1.5em
|
||||||
|
|
||||||
|
li
|
||||||
|
margin-bottom: 0.25em
|
||||||
|
|
||||||
|
// Blockquote
|
||||||
|
blockquote
|
||||||
|
margin: 1em 0
|
||||||
|
padding: 0.5em 1em
|
||||||
|
border-left: 4px solid $accent-light
|
||||||
|
background-color: rgba($bg-dark, 0.5)
|
||||||
|
color: $text-light
|
||||||
|
|
||||||
|
// Code and pre
|
||||||
|
code, kbd, samp
|
||||||
|
font-family: $mono-font
|
||||||
|
font-size: 0.875em
|
||||||
|
background-color: rgba($text-light, 0.1)
|
||||||
|
padding: 0.125em 0.25em
|
||||||
|
border-radius: 3px
|
||||||
|
|
||||||
|
pre
|
||||||
|
margin: 1em 0
|
||||||
|
padding: 1em
|
||||||
|
overflow: auto
|
||||||
|
background-color: rgba($text-light, 0.1)
|
||||||
|
border-radius: 4px
|
||||||
|
code
|
||||||
|
background: none
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
// Tables
|
||||||
|
table
|
||||||
|
width: 100%
|
||||||
|
border-collapse: collapse
|
||||||
|
margin: 1em 0
|
||||||
|
|
||||||
|
th, td
|
||||||
|
padding: 0.75em
|
||||||
|
text-align: left
|
||||||
|
border-bottom: 1px solid rgba($text-light, 0.2)
|
||||||
|
|
||||||
|
th
|
||||||
|
font-weight: 600
|
||||||
|
|
||||||
|
// Forms
|
||||||
|
input, select, textarea, button
|
||||||
|
font-family: inherit
|
||||||
|
font-size: inherit
|
||||||
|
background-color: rgba($text-light, 0.1)
|
||||||
|
color: $text-light
|
||||||
|
border: 1px solid rgba($text-light, 0.3)
|
||||||
|
border-radius: 4px
|
||||||
|
padding: 0.5em
|
||||||
|
|
||||||
|
&:focus
|
||||||
|
outline: none
|
||||||
|
border-color: $accent-light
|
||||||
|
box-shadow: 0 0 0 2px rgba($accent-light, 0.2)
|
||||||
|
|
||||||
|
button
|
||||||
|
cursor: pointer
|
||||||
|
transition: background-color 0.2s ease
|
||||||
|
|
||||||
|
&:disabled
|
||||||
|
opacity: 0.5
|
||||||
|
cursor: not-allowed
|
||||||
|
|
||||||
|
// Images and media
|
||||||
|
img
|
||||||
|
max-width: 100%
|
||||||
|
height: auto
|
||||||
|
border-radius: 4px // Optional subtle rounding
|
||||||
|
|
||||||
|
figure
|
||||||
|
margin: 1em 0
|
||||||
|
|
||||||
|
// HR
|
||||||
|
hr
|
||||||
|
border: none
|
||||||
|
height: 1px
|
||||||
|
background-color: rgba($text-light, 0.2)
|
||||||
|
margin: 2em 0
|
||||||
|
|
||||||
|
// Accessibility: Focus visible for all interactive elements
|
||||||
|
*:focus-visible
|
||||||
|
outline: 2px solid $accent-light
|
||||||
|
outline-offset: 2px
|
||||||
|
|
||||||
|
// Print styles (optional)
|
||||||
|
@media print
|
||||||
|
body
|
||||||
|
background: white !important
|
||||||
|
color: black !important
|
||||||
|
|
||||||
|
::selection
|
||||||
|
background: rgba($accent-light, 0.3) // Subtle accent highlight for that terminal select vibe
|
||||||
|
color: $text-light // Crisp text contrast
|
||||||
|
|
||||||
|
// Optional: Vendor prefixes for broader support (though modern browsers are solid)
|
||||||
|
*::-moz-selection
|
||||||
|
background: rgba($accent-light, 0.3)
|
||||||
|
color: $text-light
|
||||||
2
sass/base/index.sass
Normal file
2
sass/base/index.sass
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
@forward 'reset';
|
||||||
|
@forward 'background';
|
||||||
61
sass/framework/_forms.sass
Normal file
61
sass/framework/_forms.sass
Normal file
@ -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
|
||||||
53
sass/framework/_login_form.sass
Normal file
53
sass/framework/_login_form.sass
Normal file
@ -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
|
||||||
78
sass/framework/_logo.sass
Normal file
78
sass/framework/_logo.sass
Normal file
@ -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)
|
||||||
61
sass/framework/_main.sass
Normal file
61
sass/framework/_main.sass
Normal file
@ -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
|
||||||
58
sass/framework/_ui.sass
Normal file
58
sass/framework/_ui.sass
Normal file
@ -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
|
||||||
5
sass/framework/index.sass
Normal file
5
sass/framework/index.sass
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
@forward 'main';
|
||||||
|
@forward 'ui';
|
||||||
|
@forward 'forms';
|
||||||
|
@forward 'login_form';
|
||||||
|
@forward 'logo';
|
||||||
@ -1,142 +1,4 @@
|
|||||||
body
|
// novaconium.sass
|
||||||
background-color: #1b1f23
|
@use 'abstracts' as *
|
||||||
width: 100%
|
@use 'base' as *
|
||||||
font-family: 'Fira Code', 'Source Code Pro', monospace
|
@use 'framework' as *
|
||||||
|
|
||||||
#page .container
|
|
||||||
display: flex
|
|
||||||
padding: 0
|
|
||||||
justify-content: center
|
|
||||||
align-items: flex-start
|
|
||||||
margin-top: 20px
|
|
||||||
|
|
||||||
article
|
|
||||||
width: 900px
|
|
||||||
flex-shrink: 0
|
|
||||||
|
|
||||||
#leftnav
|
|
||||||
width: 320px
|
|
||||||
flex-shrink: 0
|
|
||||||
margin: 0
|
|
||||||
margin-right: 50px
|
|
||||||
|
|
||||||
article, #leftnav
|
|
||||||
border: 1px solid #3b444c
|
|
||||||
background-color: #14171a
|
|
||||||
color: #fff
|
|
||||||
padding: 20px
|
|
||||||
|
|
||||||
ul#leftnav
|
|
||||||
list-style: none
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
#leftnav li
|
|
||||||
border-bottom: 1px solid #3b444c
|
|
||||||
|
|
||||||
&:last-child
|
|
||||||
border-bottom: none
|
|
||||||
|
|
||||||
#leftnav a
|
|
||||||
display: block
|
|
||||||
padding: 10px 15px
|
|
||||||
text-decoration: none
|
|
||||||
color: #fff
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background: #333
|
|
||||||
|
|
||||||
code
|
|
||||||
font-family: 'Fira Code', monospace
|
|
||||||
font-size: 13px
|
|
||||||
background-color: #0d1117
|
|
||||||
color: #c9d1d9
|
|
||||||
padding: 0.2em 0.4em
|
|
||||||
border-radius: 6px
|
|
||||||
border: 1px solid #30363d
|
|
||||||
|
|
||||||
.small
|
|
||||||
font-size: 10px
|
|
||||||
|
|
||||||
h2
|
|
||||||
margin-top: 40px
|
|
||||||
|
|
||||||
div.error, div#debug
|
|
||||||
border: 1px solid red
|
|
||||||
padding: 30px
|
|
||||||
background-color: pink
|
|
||||||
color: darkred
|
|
||||||
margin: 0 auto
|
|
||||||
width: 900px
|
|
||||||
|
|
||||||
div.notice
|
|
||||||
border: 1px solid rgb(31, 119, 13)
|
|
||||||
padding: 30px
|
|
||||||
background-color: rgb(169, 218, 163)
|
|
||||||
color: rgb(20, 56, 13)
|
|
||||||
margin: 0 auto
|
|
||||||
width: 900px
|
|
||||||
|
|
||||||
div#debug
|
|
||||||
margin-top: 100px
|
|
||||||
margin-bottom: 100px
|
|
||||||
|
|
||||||
.pages-table
|
|
||||||
width: 100%
|
|
||||||
border-collapse: collapse
|
|
||||||
border: 1px solid #333
|
|
||||||
|
|
||||||
th, td
|
|
||||||
padding: 10px
|
|
||||||
border: 1px solid #ddd
|
|
||||||
text-align: left
|
|
||||||
|
|
||||||
th
|
|
||||||
font-weight: bold
|
|
||||||
|
|
||||||
/* ============================================================
|
|
||||||
DARK MODE STYLES — edit-page-form-novaconium
|
|
||||||
============================================================ */
|
|
||||||
@media (prefers-color-scheme: dark)
|
|
||||||
#edit-page-form-novaconium
|
|
||||||
input[type="text"],
|
|
||||||
input[type="number"],
|
|
||||||
textarea,
|
|
||||||
select
|
|
||||||
background: #2a2a2a
|
|
||||||
border: 1px solid #444
|
|
||||||
color: #eee
|
|
||||||
|
|
||||||
input:focus,
|
|
||||||
textarea:focus,
|
|
||||||
select:focus
|
|
||||||
border-color: #3399ff
|
|
||||||
box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.25)
|
|
||||||
|
|
||||||
input[type="checkbox"]
|
|
||||||
accent-color: #3399ff
|
|
||||||
|
|
||||||
button[type="submit"]
|
|
||||||
background: #3399ff
|
|
||||||
color: #fff
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background: #1d7fd4
|
|
||||||
|
|
||||||
p
|
|
||||||
color: #aaa
|
|
||||||
|
|
||||||
a
|
|
||||||
color: #66b3ff
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
color: #99ccff
|
|
||||||
|
|
||||||
.form-group
|
|
||||||
margin-bottom: 1.2rem
|
|
||||||
|
|
||||||
&.fullwidth textarea
|
|
||||||
width: 100%
|
|
||||||
resize: vertical
|
|
||||||
|
|
||||||
.checkbox-group
|
|
||||||
margin-top: 1.5rem
|
|
||||||
|
|||||||
@ -10,5 +10,6 @@ $config = [
|
|||||||
'base_url' => 'http://localhost:8000',
|
'base_url' => 'http://localhost:8000',
|
||||||
'secure_key' => '', //64 alphanumeric characters
|
'secure_key' => '', //64 alphanumeric characters
|
||||||
'logfile' => '/logs/novaconium.log',
|
'logfile' => '/logs/novaconium.log',
|
||||||
'loglevel' => 'ERROR' // 'DEBUG', 'INFO', 'WARNING', 'ERROR', 'NONE'
|
'loglevel' => 'ERROR', // 'DEBUG', 'INFO', 'WARNING', 'ERROR', 'NONE'
|
||||||
|
'fonts' => 'https://fonts.googleapis.com/css2?family=VT323:wght@400&family=Fira+Code:wght@400;500&display=swap&family=Material+Icons:wght@400;500&display=swap'
|
||||||
];
|
];
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -20,6 +20,7 @@ require_once(FRAMEWORKPATH . '/src/functions.php');
|
|||||||
// Creates the view() function using twig
|
// Creates the view() function using twig
|
||||||
$data = array();
|
$data = array();
|
||||||
require_once(FRAMEWORKPATH . '/src/twig.php');
|
require_once(FRAMEWORKPATH . '/src/twig.php');
|
||||||
|
$data['fonts'] = $config['fonts'];
|
||||||
|
|
||||||
// Start a Session
|
// Start a Session
|
||||||
require_once(FRAMEWORKPATH . '/src/Session.php');
|
require_once(FRAMEWORKPATH . '/src/Session.php');
|
||||||
|
|||||||
@ -1,26 +1,40 @@
|
|||||||
<meta charset="utf-8">
|
{# =============================================================================
|
||||||
<title>{{ title | default('Welcome To Novaconium') }}</title>
|
<HEAD>
|
||||||
<meta name="generator" content="Novaconium" />
|
=============================================================================
|
||||||
|
#}
|
||||||
|
|
||||||
|
<meta charset="utf-8">
|
||||||
|
|
||||||
|
<title>{{ title | default('Welcome To Novaconium') }}</title>
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
{# SEO & METADATA #}
|
||||||
|
<meta name="generator" content="Novaconium" />
|
||||||
<meta name="description" content="{{ description | default('No description given') }}">
|
<meta name="description" content="{{ description | default('No description given') }}">
|
||||||
<meta name="keywords" content="{{ keywords | default('website') }}">
|
<meta name="keywords" content="{{ keywords | default('website') }}">
|
||||||
<meta name="author" content="{{ author | default('anonymous') }}">
|
<meta name="author" content="{{ author | default('anonymous') }}">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
|
|
||||||
|
{# DARK MODE & THEME HINTS #}
|
||||||
|
<meta name="color-scheme" content="dark">
|
||||||
|
<meta name="theme-color" content="#FFFFFF">
|
||||||
|
|
||||||
|
{# OPEN GRAPH (OG) FOR SOCIAL SHARING #}
|
||||||
<meta property="og:title" content="{{ title | default('Welcome') }}">
|
<meta property="og:title" content="{{ title | default('Welcome') }}">
|
||||||
<meta property="og:type" content="">
|
<meta property="og:type" content="website">
|
||||||
<meta property="og:url" content="">
|
<meta property="og:url" content="{{ app_url | default(request.scheme ~ '://' ~ request.host) }}">
|
||||||
<meta property="og:image" content="">
|
<meta property="og:image" content="{{ og_image | default('/icon.png') }}">
|
||||||
|
|
||||||
|
{# PWA & FAVICONS #}
|
||||||
<link rel="manifest" href="site.webmanifest">
|
<link rel="manifest" href="site.webmanifest">
|
||||||
<link rel="apple-touch-icon" href="/icon.png">
|
<link rel="apple-touch-icon" href="/icon.png">
|
||||||
|
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><rect width='32' height='32' fill='%23000'/><text x='16' y='22' font-family='Orbitron,monospace' font-size='20' fill='%2300ff00' text-anchor='middle' dominant-baseline='middle'>N</text><circle cx='16' cy='16' r='2' fill='%2300ff00'/></svg>">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/path/to/favicon-32x32.png"> <!-- Fallback if needed -->
|
||||||
|
|
||||||
<!-- Place favicon.ico in the root directory -->
|
{# GOOGLE FONTS (CDN VIA PRECONNECT) #}
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
{# https://developers.google.com/fonts/docs/getting_started #}
|
<link href="{{ fonts | default('https://fonts.googleapis.com/css2?family=VT323:wght@400&family=Fira+Code:wght@400;500&display=swap&family=Material+Icons:wght@400;500&display=swap') }}" rel="stylesheet">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Source+Code+Pro&display=swap&family=Material+Icons&family=Material+Icons+Outlined" rel="stylesheet">
|
|
||||||
|
|
||||||
|
{# STYLESHEET #}
|
||||||
<link rel="stylesheet" href="/css/novaconium.css">
|
<link rel="stylesheet" href="/css/novaconium.css">
|
||||||
|
|
||||||
<meta name="theme-color" content="#000000">
|
|
||||||
@ -1,11 +1,15 @@
|
|||||||
{% if username is not empty %}
|
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<ul id="leftnav">
|
<ul id="leftnav">
|
||||||
<li><a href="/">Home</a></li>
|
<li><a href="/">Home</a></li>
|
||||||
|
{% if username is not empty %}
|
||||||
<li><a href="/novaconium/dashboard">Dashboard</a></li>
|
<li><a href="/novaconium/dashboard">Dashboard</a></li>
|
||||||
<li><a href="/novaconium/pages">Pages</a></li>
|
<li><a href="/novaconium/pages">Pages</a></li>
|
||||||
<li><a href="/novaconium/messages">Messages</a></li>
|
<li><a href="/novaconium/messages">Messages</a></li>
|
||||||
|
{% endif %}
|
||||||
|
{% if username is not empty %}
|
||||||
<li><a href="/novaconium/logout">Logout</a></li>
|
<li><a href="/novaconium/logout">Logout</a></li>
|
||||||
|
{% else %}
|
||||||
|
<li><a href="/novaconium/login">Login</a></li>
|
||||||
|
{% endif %}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
|
||||||
@ -4,7 +4,7 @@
|
|||||||
<h1>{{title}}</h1>
|
<h1>{{title}}</h1>
|
||||||
|
|
||||||
|
|
||||||
<div id="login_form">
|
<div id="login">
|
||||||
|
|
||||||
<form method="post" action="/novaconium/login">
|
<form method="post" action="/novaconium/login">
|
||||||
<input type="hidden" name="token" value="{{ token }}" />
|
<input type="hidden" name="token" value="{{ token }}" />
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user