Here is a single, comprehensive prompt structured as a design specification. You can copy and paste this directly into your GitHub Issue.
Issue Title: Design Implementation: "ChuckyLab" Biopunk Aesthetic for Blog Home Component
Issue Description:
I need Copilot to generate the HTML structure and associated SCSS styles for our existing Angular blog homepage template to match the specific "ChuckyLab" visual design provided in the reference image.
Target Component: The main blog home component (assume standard Angular component.html and component.scss structure).
- Overall Aesthetic & Theme Specification
The design is a "Biopunk/Cyber-Nature" fusion. It must feel like a futuristic, organic laboratory interface.
Global Background: The entire page background must feature dark, complex circuit board patterns intertwined with glowing, bio-luminescent green vines and spores. (Assume an asset URL: 'assets/images/biopunk-bg-main.jpg').
Color Palette (SCSS Variables):
--neon-cyan: #00e5ff (Primary accent, text glows)
--neon-green: #39ff14 (Secondary accent, vine glows, borders)
--deep-purple: #7b1fa2 (Accents, shadows)
--bg-dark-panel: rgba(10, 14, 26, 0.85) (Semi-transparent dark background for content boxes to ensure readability over the busy background).
Typography:
Primary Font: A retro-futuristic, monospaced, or terminal-style font (e.g., 'Orbitron', 'Share Tech Mono', or similar web font).
Text Effects: Heavy use of text-shadow to create neon glow effects on titles and active elements.
- Layout Structure (CSS Grid)
The main container below the header should use CSS Grid for a two-column layout:
Left Column (Main Content): Approx 70-75% width. Contains navigation and blog post grid.
Right Column (Sidebar): Approx 25-30% width. Contains the "Lab Notes" widget.
Gap: 20px-30px between columns.
- Component-Level Specifications
A. Hero Header Section (Full Width)
Container style: Must use the global background texture but slightly darker.
Left Content (Flex column):
H1 Title ("CHUCKYLAB"): Large, uppercase, retro font with a strong cyan/purple neon text glow.
Tagline ("Exploring Tech, Nature & Beyond"): Smaller, cleaner white text.
Right Content (Clock Widget):
A distinct container looking like a retro digital readout screen.
Must have a glowing cyan border and a scanline effect overlay.
Display time (HH:MM:SS), Timezone/Date in a digital, monospaced font.
B. Navigation Bar (Top of Left Column)
Layout: Horizontal Flexbox list.
Styling: Links should look like interface buttons. Dark panel background.
Active State: The active link (e.g., "BLOG") must have a prominent, glowing neon cyan underline or bottom border indicating selection.
C. Blog Posts Grid (Below Nav in Left Column)
Layout: CSS Grid, 3 columns.
Card Style (.blog-card):
Background: --bg-dark-panel (semi-transparent).
Border: Thin, glowing border (mix of cyan or purple).
Image: Top section, standard aspect ratio.
Typography: Titles must be uppercase, monospaced font. Dates at the bottom in smaller text.
D. Sidebar Widget ("Lab Notes" - Right Column)
Container Style: Similar to blog cards—semi-transparent dark panel with a glowing border (perhaps green to differentiate).
Content:
Header ("LAB NOTES").
A bulleted list (ul) of short updates.
A footer section containing 3-4 stylized social/tech icons (beakers, gears, twitter bird) with glow effects on hover.
Instruction for Copilot: Based on the specifications above, please generate the required HTML template code (using Angular syntax where appropriate, like *ngFor for standard repeating items) and the corresponding SCSS to achieve this exact visual result.
Here is a single, comprehensive prompt structured as a design specification. You can copy and paste this directly into your GitHub Issue.
Issue Title: Design Implementation: "ChuckyLab" Biopunk Aesthetic for Blog Home Component
Issue Description:
I need Copilot to generate the HTML structure and associated SCSS styles for our existing Angular blog homepage template to match the specific "ChuckyLab" visual design provided in the reference image.
Target Component: The main blog home component (assume standard Angular component.html and component.scss structure).
The design is a "Biopunk/Cyber-Nature" fusion. It must feel like a futuristic, organic laboratory interface.
Global Background: The entire page background must feature dark, complex circuit board patterns intertwined with glowing, bio-luminescent green vines and spores. (Assume an asset URL: 'assets/images/biopunk-bg-main.jpg').
Color Palette (SCSS Variables):
--neon-cyan: #00e5ff (Primary accent, text glows)
--neon-green: #39ff14 (Secondary accent, vine glows, borders)
--deep-purple: #7b1fa2 (Accents, shadows)
--bg-dark-panel: rgba(10, 14, 26, 0.85) (Semi-transparent dark background for content boxes to ensure readability over the busy background).
Typography:
Primary Font: A retro-futuristic, monospaced, or terminal-style font (e.g., 'Orbitron', 'Share Tech Mono', or similar web font).
Text Effects: Heavy use of text-shadow to create neon glow effects on titles and active elements.
The main container below the header should use CSS Grid for a two-column layout:
Left Column (Main Content): Approx 70-75% width. Contains navigation and blog post grid.
Right Column (Sidebar): Approx 25-30% width. Contains the "Lab Notes" widget.
Gap: 20px-30px between columns.
A. Hero Header Section (Full Width)
Container style: Must use the global background texture but slightly darker.
Left Content (Flex column):
H1 Title ("CHUCKYLAB"): Large, uppercase, retro font with a strong cyan/purple neon text glow.
Tagline ("Exploring Tech, Nature & Beyond"): Smaller, cleaner white text.
Right Content (Clock Widget):
A distinct container looking like a retro digital readout screen.
Must have a glowing cyan border and a scanline effect overlay.
Display time (HH:MM:SS), Timezone/Date in a digital, monospaced font.
B. Navigation Bar (Top of Left Column)
Layout: Horizontal Flexbox list.
Styling: Links should look like interface buttons. Dark panel background.
Active State: The active link (e.g., "BLOG") must have a prominent, glowing neon cyan underline or bottom border indicating selection.
C. Blog Posts Grid (Below Nav in Left Column)
Layout: CSS Grid, 3 columns.
Card Style (.blog-card):
Background: --bg-dark-panel (semi-transparent).
Border: Thin, glowing border (mix of cyan or purple).
Image: Top section, standard aspect ratio.
Typography: Titles must be uppercase, monospaced font. Dates at the bottom in smaller text.
D. Sidebar Widget ("Lab Notes" - Right Column)
Container Style: Similar to blog cards—semi-transparent dark panel with a glowing border (perhaps green to differentiate).
Content:
Header ("LAB NOTES").
A bulleted list (ul) of short updates.
A footer section containing 3-4 stylized social/tech icons (beakers, gears, twitter bird) with glow effects on hover.
Instruction for Copilot: Based on the specifications above, please generate the required HTML template code (using Angular syntax where appropriate, like *ngFor for standard repeating items) and the corresponding SCSS to achieve this exact visual result.