This is my first ever code! Well, not exactly. I've edited others' codes before - but never to this extent. Different layout, new features, edited CSS... I'm proud of the result!
This code focuses on feasibility of reading, writing, and editing - every section has comments to tell you what you're editing at the moment, and all the colours and links can be set at the top of the CSS, without needing to scroll and find each line.
Detailed instructions are in the code (including the settings, links, and details of the headers used), but... spoiler! You only need to change two root colours, and all the others will be automatically generated!
The code is below - have fun!
Codepen: Pop & Shine Lesson Code
The base for this code came from showersandflowers, from her code here
Moving on to what I changed and why my credits are inserted towards the bottom - I take this seriously, so my extensive explanation is below the cut.
Overview
The revised template maintains the original intent and functionality; however, it accommodates a more modular, flexible, and maintainable structure.
These changes focus on:
Layout logic
Ease of editing
Separation of concerns
Decorative interaction layers
The purpose and overall visual direction stay the same.
Structural and Layout Changes
Centralised Styling and Assets
A central control layer was added using CSS variables defined in :root.
This consolidates:
Theme values
Automatically derived shades
Image and asset references
This means visual updates can be done in one place, without having to touch layout or content-related rules.
Updated Layout Logic
The sections with supporting details now use a Flexbox-based row layout.
This provides:
Consistent alignment across cards
Even spacing
Stable layout behavior regardless of content length
Cards visible at all times to smoothen the reader's experience
Content-Responsive Sizing
Height constraints were replaced with minimum and maximum sizing rules where appropriate.
This allows containers to expand naturally with content, avoiding clipping
Interaction and Effects
Decorative JavaScript Layer
JavaScript is used exclusively for a decorative shine effect on hover.
Layout does not depend on JavaScript
Content visibility is unaffected
The effect is fully optional and non-blocking
This is keeping in mind that a WoX site might filter out the JS.
Styled Scroll Behaviour
Scrollable areas retain visible scrollbars, styled according to the theme in which they are used.
Organisational Improvements
Asset Mapping using Variables
Images such as headers, backgrounds, and other decorative elements are mapped via variables instead of being hard-coded within individual selectors.
This improves:
Reuse across variations
Consistency across components
Ease of future updating
Design Approach
The revised version maintains the same purpose as the original: presenting a primary lesson area supported by secondary detail sections.
The difference is in the implementation:
Clearer layout logic
Different styling
Separated decorative behaviour
Better maintainability
Cards always visible
Credit and Authorship
The original template is kept intact and is attributed as such.
My credit represents:
Structural reorganization
Modular layout logic
The centralized styling system
Decorative interaction layers
This version is an extension built on an existing base and represents a different organisational and technical approach.
If you got till here - congrats! I hope you understand that I respect the original code but still think this one is different enough that my credits are justified!
This is a code I had been working on for quite a while until it wasn't needed anymore, so I stopped -- but now I've decided to finish it off and keep it ready for my bestie (may her birthday arrive fast).
It includes Javascript, CSS, and HTML all together, and each page is a different code I copy-pasted into this one, so... yes, this is basically as hastily put together mixture of cool codes.
BUT it's the outcome that matters, and I love how it's coming along!
I'll be adding credits at the end, of course, but won't be sharing my sources/this code since, well, it isn't really mine to share.
I'm hoping to be done soon, and I'll be sharing the end result once I am!
