Luna Sharp

Hey there! I'm Luna Sharp, and I do everything on this blog, from write to code to scroll aimlessly. I'll be doing a lot of stuff. I'll post codes I either created, or codes from others that I edited. I'll yap a lot. I'll share some excerpts of stuff I've written. I'll reblog whatever seems amazing. And I'll probably share a lot of other stuff that doesn't come to mind right now. Thanks for turning up here (and here's to you staying!) My messages are always open, and so are my requests, if you ever seen a code and want it edited to suit you! I'm still figuring out this whole... having a site of my own thing (screams excitedly), so bear with me if everything's a bit much :D

[lunasharp-uncharted]

Hello There!

Hiya! I'm going to start off with a disclaimer — this was going to be an introductory post.

But then I remembered I'm fundamentally incapable of doing things the usual way.

So... here goes!

Welcome to Luna Sharp Uncharted- Wait, my name?

SYSTEM LOG: IDENTITY CONFIRMATION

Luna Sharp.

My real name? Nice try.

But this identity does travel to plenty of systems. The World of Potter (US), for instance. Oh, alright... I'll give you another. In the tech-lit shadows of Discord, I answer to silvershade1217. Yes, I reply to all my transmissions. Promptly. Don't look so impressed.

SYSTEM LOG: ACCESS GRANTED

Anyway, as I was saying, welcome to the Memory Bay of my ship!

And not just any ship. This ship could take you from one end of the Earth to the far end of the universe.

You're on a spaceship right now. Buckle up — some of my files can be... moody.

Luckily for you, the Memory Bay got some spit and polish work done just today! It went, in the blink of an eye (give or take three hours), from a dark, dusty attic, to a shiny new laboratory.

And trust me, you're lucky — I wouldn't have given anybody a tour around that old place.

SYSTEM LOG: FILE STATUS

The files are a whole 'nother question. Back then of course, I was a rookie — stupid decisions, boring stories, and worst of all, no organisation system! The state of my folders when I glanced at the Bay... whew!

Well... they're all gone now.

That's right.

Every. Single. Story.

Oh, except the transmissions from fellow galaxy-hoppers — those are sacred.

But never fear! Your hopes of flipping through the pages of my discoveries have not been in vain.

I would be ashamed to call myself an explorer without having a good memory.

So I present to you, shinier, better, and slightly less embarassing... rewrites of every single entry from before!

Oh, what am I doing? You're not here to hear about the Bay — I'm sure it's what's inside that has your attention.

SYSTEM LOG: ARTIFICIAL ASSISTANCE

Alright then!

This is the library of all things Luna — from experiences to works to discoveries and more.

Head over to Navigation to figure out my not-so-complex filing system, and you'll be on your way with the click of a button!

Of course, I'm always here to help an explorer in need. Feel free to request a code ship-upgrade if you ever want one made personally for you. No cost. And extra smiles just for good measure!

Enjoy your time, explorer! I'll bring you biscuits if you think you're here a while.

Signing off,

[lunasharp-uncharted]

Skylit Tides: Lesson Code

Super simple lesson code that I finally completed after almost a month of it sitting in my WIPs. The main thing I'm exploring here is moving elements, so there's a lot, and I mean a lot of hover effects.

There's a big banner, content, and two section for requirements/assignment followed by a note box. Styles for tags, images, and notes, are also included, and can be used as many times as you'd like, or not at all!

It can be both light and dark themed, and it's very easy to switch between the two. There's only four variables needed to change the colour scheme: background and text, and two colours that set the theme (both must contrast with the background).

The comments explain everything in way too much detail, so go forth and have fun with the code :P

Please don't steal my credits, but go ahead an add your own! I would also love to see any versions anyone makes!

I've made two versions so you can check out the light vs dark themes ;)

Codepen: Sunlit Tides Code Codepen: Starlit Tides Code

[lunasharp-uncharted]

Hi Luna! I really like the Pop and Shine code you made. Will you be able to make a matching one for Course Introductions?

Hiya! I would love to, but at the moment I've been working on an updated version of the Pop and Shine code (a templatized version of the one I'm actually using for lessons) so the course overview would come after that. If you'd like, you can DM me to see a work in progress version you might want to use instead?

[lunasharp-uncharted]

Hi Luna! If I were to use one of your codes, may I change the color of the credits?

Hi there! Yes you may, just try to make sure that the position and size stay the same, and that the colour change still keeps it visible. Other than that, go right ahead!

[lunasharp-uncharted]

Coloured Haze: Wallpost Code

Here's to all those weirdo layouts I am absolutely in love with. I'm back with a brand-new wallpost, and wouldn't ya know it, I'm obsessed. It's heavily inspired by a Carrd design I found on Pinterest, although I have added my own touches and edits.

As usual, WoX wallposts are supremely finnicky, so against my wishes, I must advise not to play around with the layout and code unless you know exactly what you're doing. The code is commented throughout, and I've also included instructions on how to easily change the colour scheme of the wallpost.

Please don't steal my credits, but go ahead an add your own! I would also love to see any versions anyone makes!

I made two versions, partially to test out the very editing instructions I've included in the code, so here you go!

Codepen: Sunset Haze Code

Codepen: Bluebell Haze Code

[lunasharp-uncharted]

I have a question!

Hai everybody! In case you missed it, I have a question! If, by chance, I were to make a code that looked like Spotify UI, and if, by chance, it was a backstory code with different pages,

would you want:

Each page to have its own music track

The entire code to have the same music track

Voting ended onJan 24

[lunasharp-uncharted]

Timewoven: Backstory Code

Tada! My best work yet! This code might not look like much, but I'm extremely proud of it, not least because I changed directions halfway through on how to code it, and had to revamp the whole thing.

It's a backstory code in the form of a vertical timeline, more for people who want to showcase multiple events rather than describe the character's life in long paragraphs. The backstory starts on a simple name/image page, but as you scroll, a spine appears, with cards (events) appearing to either side.

The main aspect of this code is the ease of editing though. A few variables in the beginning of the code, and you can change everything from font to layout to colours.

Each event is assigned its own theme (which are, again, defined at the very top)

The themes decide the card's colour, and the colour of the part of the spine it corresponds to.

Since the cards aren't directly connected to the spine, coloured circles correspond to the card's place on the timeline, with an icon inside.

Hovering makes the card and its corresponding icon-circle to glow, so its easy to tell which icon belongs to which card.

The cards have options for titles, subtitles, dates, and participant orbs.

Participant orbs are little circular images at the bottom of the card that showcase people that particular event may have involved or been connected to. They can be turned into links, should someone wish to link them to user profiles.

Please don't steal my credits, but go ahead an add your own! I would also love to see any versions anyone makes!

Since I particularly wanted to display the flexibility of the design, I've made two versions, both linked below.

Codepen: Timewoven Cloud Nine Code Codepen: Timewoven Glitch Code

[lunasharp-uncharted]

Inkbound: Article Code

I am back from a vacation, a cold, and a very long dilemma (of deciding what to code) with... this!

It's a very overly-neat-newspaper coded design, and it can be used as both an article or a book. Essentially, it has a page system for books, and the comments (very extensively) explain how to remove the page-ification to turn it into an article.

It's extremely easy to use and edit:

Change three variables at the beginning of the CSS (the section in the markers) as explained in the comments to change the entire colour scheme

use tags to make things stand out or divide boxes into different sections, as explained in the comments

Also explained in the comments (how very surprising), is how the page and box system works (including the alternating sizes and how to override them)

If I missed anything, rest assured, they're explained in the comments :D

Please don't steal my credits (feel free to add your own, though), and go forth and ✨edit✨

Codepen: Inkbound Article Code

[lunasharp-uncharted]

Pop & Shine: Lesson Code [adapted]

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!

[lunasharp-uncharted]

Happy Birthday Code!

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!

[lunasharp-uncharted]

Hey luna! I wanted to ask how you do all this. Like posting not coding!

-Aure

Aure!!! Fancy seeing you here! I'll send you a full message soon to explain <33

[lunasharp-uncharted]

code

Hi, Luna! Do you think you can make me a code for WoX?

Hey Artemis, I would absolutely LOVE to do that! Let's connect :D