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/. .;
|
||||
|
||||
# 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
|
||||
|
||||
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
|
||||
background-color: #1b1f23
|
||||
width: 100%
|
||||
font-family: 'Fira Code', 'Source Code Pro', monospace
|
||||
|
||||
#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
|
||||
// novaconium.sass
|
||||
@use 'abstracts' as *
|
||||
@use 'base' as *
|
||||
@use 'framework' as *
|
||||
|
||||
@ -10,5 +10,6 @@ $config = [
|
||||
'base_url' => 'http://localhost:8000',
|
||||
'secure_key' => '', //64 alphanumeric characters
|
||||
'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
|
||||
$data = array();
|
||||
require_once(FRAMEWORKPATH . '/src/twig.php');
|
||||
$data['fonts'] = $config['fonts'];
|
||||
|
||||
// Start a Session
|
||||
require_once(FRAMEWORKPATH . '/src/Session.php');
|
||||
|
||||
@ -1,26 +1,40 @@
|
||||
<meta charset="utf-8">
|
||||
<title>{{ title | default('Welcome To Novaconium') }}</title>
|
||||
<meta name="generator" content="Novaconium" />
|
||||
{# =============================================================================
|
||||
<HEAD>
|
||||
=============================================================================
|
||||
#}
|
||||
|
||||
<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="keywords" content="{{ keywords | default('website') }}">
|
||||
<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:type" content="">
|
||||
<meta property="og:url" content="">
|
||||
<meta property="og:image" content="">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="{{ app_url | default(request.scheme ~ '://' ~ request.host) }}">
|
||||
<meta property="og:image" content="{{ og_image | default('/icon.png') }}">
|
||||
|
||||
{# PWA & FAVICONS #}
|
||||
<link rel="manifest" href="site.webmanifest">
|
||||
<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 -->
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
||||
|
||||
{# https://developers.google.com/fonts/docs/getting_started #}
|
||||
<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">
|
||||
{# GOOGLE FONTS (CDN VIA PRECONNECT) #}
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<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">
|
||||
|
||||
{# STYLESHEET #}
|
||||
<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">
|
||||
<ul id="leftnav">
|
||||
<li><a href="/">Home</a></li>
|
||||
{% if username is not empty %}
|
||||
<li><a href="/novaconium/dashboard">Dashboard</a></li>
|
||||
<li><a href="/novaconium/pages">Pages</a></li>
|
||||
<li><a href="/novaconium/messages">Messages</a></li>
|
||||
{% endif %}
|
||||
{% if username is not empty %}
|
||||
<li><a href="/novaconium/logout">Logout</a></li>
|
||||
{% else %}
|
||||
<li><a href="/novaconium/login">Login</a></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -4,7 +4,7 @@
|
||||
<h1>{{title}}</h1>
|
||||
|
||||
|
||||
<div id="login_form">
|
||||
<div id="login">
|
||||
|
||||
<form method="post" action="/novaconium/login">
|
||||
<input type="hidden" name="token" value="{{ token }}" />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user