Dev.to WebDev 🛠 Dev Sat, 24 Oct 2026 16:13:46 +0000 👁 0 📖 4 min read

Making the wiki of my dreams & Giving Charles the dog a home!

Going through the code editor over and over for a for loop project that was stuck in my mind. I had something pending to do here. I needed to give Charles the dog a home no matter what. For others he might have just been a placeholder dog shown in the first lessons in The Odin Project. An image of him, to see how tags work.

To me he was not just any image, nor any dog. To me he was THE DOG who showed me the way, smiling at me, a truly genuine smile, warm. In my darkness, while finally being able to do this, a smile from cute being...I had forgotten how smiles like those look like, at least for the ones in animals. Because I never found a human who did something like that. He is an important dog. That is why I had to give him a home. More than just practicing tables, more than making the dog wiki of my dreams: to create a home for Charles. That is what matters the most here. It was a self-imposed project. No one told me to do this, nowhere in The Odin Project, but I felt like I had to give Charles a home no matter what. At least Charles shall have a home!

Without further ado, allow me to explain what made it possible:

1// The Split Matrix

In our global style sheet (style.css), the rest of the wiki operates on a strict, minimalist Dalmatian matrix. It uses a pure white, off-white, and graphite palette anchored by stark ink-black spot gradients. It is a closed-circuit system built for functional clarity.

Why Dalmatians, you ask? Because that breed does have layers that feel relatable, and I love how comforting it feels the visual of white with spots. It makes you wonder: how many spots can be aligned and reach the perfect symmetry?

And, of course, when it comes to Charles, a custom style that feels like him for his own dog house is needed too! o achieve his warmth (oatmeal backgrounds, deep chestnut timber tones, and amber light) without destroying the global style sheet, we established a strict Standalone CSS Isolation pattern.

By linking both the .html exclusively to his own .css, we eliminated specificity wars entirely. The global rules stay locked in the matrix; Charles keeps his den. Nothing gets mixed up anymore!

Of course, for a proper wiki, tables were needed, and, Charles required walls. Instead of using tables for data, we used them for structure. The

, , and elements form the rigid, load-bearing frame of the den, while standard

cells hold the vital statistics of our companion. It is a structural skeleton of semantic HTML. Lastly, to make the UX WORK via CSS shapes: A standard rectangular container wouldn’t do. If Charles is going to have a digital sanctuary, the UI needs to physically reflect the architecture of a shelter. We achieved this entirely through native CSS, avoiding heavy image assets. Then, it follows with: `1. The Pitched Gable Roofline (::before)` To crown the main wiki wrapper, we reached for the container's pseudo-element and deployed a precise coordinate polygon via clip-path. A 50-pixel-high block is cut into a clean triangle, anchored right above the wrapper’s top border, creating an immediate, tactile wooden gable roof. We mounted the roofline signboard (::after) directly into the center of the gable using a transformed absolute position. The Arched Kennel Doorway (The Infobox) On the right-hand side of the layout, the companion profile card acts as the visual threshold of the shelter. Instead of a standard corporate dashboard box, we used asymmetrical border-radius shaping (120px 120px 12px 12px) to mimic a classic arched kennel entrance. Inside, Charles’s profile photo sits wrapped in a matching arched container, complete with an inner drop shadow that gives it depth against the cream paper background. The Color Palette Constants To pull the entire den together, we defined a dedicated CSS variable block (:root) inside charles.css, utilizing radial-gradient spot placements scattered across the oatmeal outer background. The page feels less like a web document and more like a permanent digital room. Of course, I separated my dog breeds that are aligned with my own soul resonance in the files. dogwiki.html, the purposeful index that shows a wiki under construction, just like a dream that was never completely fulfilled. A wiki under construction, vs the ideals, vs the bright warm of Charles. But, at least it works! A reminder to make the beautiful Dalmatian coat: `:root {` --bg-pure: #ffffff; --bg-offwhite: #f7f7f7; --ink-black: #111111; --graphite: #333333; --border-gray: #d0d0d0; --spot-color: rgba(17, 17, 17, 0.08); } body { background-color: var(--bg-pure); color: var(--ink-black); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Subtle ink-black radial margin accents */ background-image: radial-gradient(circle at 10% 15%, var(--spot-color) 0%, var(--spot-color) 4%, transparent 5%), radial-gradient(circle at 85% 25%, var(--spot-color) 0%, var(--spot-color) 6%, transparent 7%), radial-gradient(circle at 15% 75%, var(--spot-color) 0%, var(--spot-color) 5%, transparent 6%), radial-gradient(circle at 90% 85%, var(--spot-color) 0%, var(--spot-color) 8%, transparent 9%); background-size: 100% 100%; background-attachment: fixed; } Check it out here: https://labrava0x.github.io/charliewiki/

cells hold the vital statistics of our companion. It is a structural skeleton of semantic HTML.

Lastly, to make the UX WORK via CSS shapes: A standard rectangular container wouldn’t do. If Charles is going to have a digital sanctuary, the UI needs to physically reflect the architecture of a shelter. We achieved this entirely through native CSS, avoiding heavy image assets. Then, it follows with:

1. The Pitched Gable Roofline (::before)

To crown the main wiki wrapper, we reached for the container's pseudo-element and deployed a precise coordinate polygon via clip-path. A 50-pixel-high block is cut into a clean triangle, anchored right above the wrapper’s top border, creating an immediate, tactile wooden gable roof. We mounted the roofline signboard (::after) directly into the center of the gable using a transformed absolute position.

The Arched Kennel Doorway (The Infobox)
On the right-hand side of the layout, the companion profile card acts as the visual threshold of the shelter. Instead of a standard corporate dashboard box, we used asymmetrical border-radius shaping (120px 120px 12px 12px) to mimic a classic arched kennel entrance. Inside, Charles’s profile photo sits wrapped in a matching arched container, complete with an inner drop shadow that gives it depth against the cream paper background.
The Color Palette Constants

To pull the entire den together, we defined a dedicated CSS variable block (:root) inside charles.css, utilizing radial-gradient spot placements scattered across the oatmeal outer background. The page feels less like a web document and more like a permanent digital room.

Of course, I separated my dog breeds that are aligned with my own soul resonance in the files. dogwiki.html, the purposeful index that shows a wiki under construction, just like a dream that was never completely fulfilled. A wiki under construction, vs the ideals, vs the bright warm of Charles. But, at least it works!

A reminder to make the beautiful Dalmatian coat:

:root {

--bg-pure: #ffffff;
 --bg-offwhite: #f7f7f7;
 --ink-black: #111111;
 --graphite: #333333;
 --border-gray: #d0d0d0;
 --spot-color: rgba(17, 17, 17, 0.08);
}

body {
 background-color: var(--bg-pure);
 color: var(--ink-black);
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

 /* Subtle ink-black radial margin accents */
 background-image: 
 radial-gradient(circle at 10% 15%, var(--spot-color) 0%, var(--spot-color) 4%, transparent 5%),
 radial-gradient(circle at 85% 25%, var(--spot-color) 0%, var(--spot-color) 6%, transparent 7%),
        radial-gradient(circle at 15% 75%, var(--spot-color) 0%, var(--spot-color) 5%, transparent 6%),
        radial-gradient(circle at 90% 85%, var(--spot-color) 0%, var(--spot-color) 8%, transparent 9%);
    background-size: 100% 100%;
    background-attachment: fixed;
}

Check it out here: https://labrava0x.github.io/charliewiki/

📰 Read the original article on Dev.to WebDev

Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.

← News 🛠 Dev 🏠 Home