raincoded | [03] expanding navigation

WHAT: A navigation code that, with the right stylesheet additions, will expand when hovered. Defaults to having room for 6 links, but you can change the max-height to add room for more. Stacks on mobile views. Transparent textures from transparent textures dot com.

LIVE PREVIEW

the chosen one

Buffy: The Vampire Slayer

Here's a quick blurb about Buffy.

Thanks to the raw-code wrappers, I can get simple line breaks without having to add brs.

Make sure that you don't add a line-break right before or after the tags, though.

QUICK STATS

age; 20 • hair; blonde • eyes; hazel • height; 5'3"

timeline; season 5, "Buffy vs Dracula"

open PSL •

bakerstreet

CANON

the series • the girl

PLAYER

name; Your Name
pronouns; they/them
contact;

your_username
timezone; EST

inbox

buffy summers
female • she/her
human-ish

activity

🌧️

USAGE:
🌈 Copy-paste the "MAIN" code into a new journal entry.
🌈 Replace YOUR_BACKGROUND_TEXTURE_HERE with links to your desired background textures.
🌈 Replace YOUR_ICON_HERE with links to your desired icons and YOUR_BACKGROUND_IMAGE_HERE with a link to your desired "main" image for the largest pane.
🌈 Replace YOUR_NAV_LINK_HERE with links to whichever posts you want to feature on your navigation. You can have more than six, but you'll want to increase --height to a higher number.
🌈 Fill out the content area. I've provided some dummy content, using divs instead of p for paragraphs, but you can put anything you want in here.

SINGLE-PAGE NAV:
🌈 Copy-paste the "STYLESHEET" code into your custom CSS section for animations.
🌈 COMING SOON: A guide to setting this up so that you still have prev/next/manage entries links.

COLORS (for replacing):
🌈 Background color: #ffffff
🌈 Hue: 250, 50%, 50% — to change this, you'll want to update the values of --colorH and --colorS. The other properties can also be updated manually, if you'd rather, but they will default to absorbing your hue and saturation if you do it this way, creating a harmonious monochromatic look. Convert HEX colors to HSL using any free generator online; there are lots!

CODE (main)

<raw-code>
   
   <div style="
      --bgColor:#ffffff;
      --colorH:250;
      --colorS:50%;
      --paneBgColor:hsla(var(--colorH),var(--colorS), 80%, .9);
      --borderColor:hsla(var(--colorH),var(--colorS), 40%, .9);
      --headerColor:hsla(var(--colorH),var(--colorS), 20%, .9);
      --textColor:hsla(var(--colorH),var(--colorS), 5%, .9);
      --layoutLinkColor:hsl(var(--colorH),var(--colorS), 100%, .7);
      --dropShadow:1px 1px 0px var(--textColor);

--font:arial,helvetica,sans-serif;
      --fontSize:11px;
      --headerFontSize:24px;
      --bioFontSize:13px;

--width:940px;
      --halfWidth:calc(var(--width) / 2);
      --height:500px;
      --paneWidth:calc(var(--width) / 6);
      --paneBgImg:url(YOUR_BACKGROUND_TEXTURE_HERE) repeat;
      --headerImg:url(YOUR_BACKGROUND_TEXTURE_HERE) repeat;

--bigImg:url(YOUR_BACKGROUND_IMAGE_HERE) no-repeat top right;
      --img1:url(YOUR_ICON_HERE);
      --img2:url(YOUR_ICON_HERE);
      --img3:url(YOUR_ICON_HERE);
      --img4:url(YOUR_ICON_HERE);
      --img5:url(YOUR_ICON_HERE);
      --img6:url(YOUR_ICON_HERE);

background:var(--bgColor);color:var(--textColor);font-family:var(--font);font-size:var(--fontSize);line-height:1.5;width:100%;max-width:var(--width);display:flex;flex-wrap:wrap;margin:auto"class="expanding-nav-03">

<div style="flex-basis:var(--halfWidth);height:100vh;max-height:var(--height);display:flex;flex-wrap:nowrap;flex-grow:1;overflow:hidden" class="expandable_parent">
 
         
         <div style="background:var(--paneBgImg);background-color:var(--paneBgColor);max-width:var(--paneWidth);display:flex;flex-wrap:nowrap;flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:20px;box-sizing:border-box;font-weight:600;font-variant:small-caps;text-shadow:var(--dropShadow)">
            <div style="background:var(--img1);background-size:cover;width:100px;height:100px;border:5px solid var(--borderColor)"><a href="YOUR_NAV_LINK_HERE" style="width:100%;height:100%;color:var(--layoutLinkColor);text-decoration:none;display:flex;justify-content:end;align-items:end;padding-right:5px"><span>application</span></a></div>
            <div style="background:var(--img2);background-size:cover;width:100px;height:100px;border:5px solid var(--borderColor)"><a href="YOUR_NAV_LINK_HERE" style="width:100%;height:100%;color:var(--layoutLinkColor);text-decoration:none;display:flex;justify-content:end;align-items:end;padding-right:5px"><span>permissions</span></a></div>
            <div style="background:var(--img3);background-size:cover;width:100px;height:100px;border:5px solid var(--borderColor)"><a href="YOUR_NAV_LINK_HERE" style="width:100%;height:100%;color:var(--layoutLinkColor);text-decoration:none;display:flex;justify-content:end;align-items:end;padding-right:5px"><span>cr chart</span></a></div>
            <div style="background:var(--img4);background-size:cover;width:100px;height:100px;border:5px solid var(--borderColor)"><a href="YOUR_NAV_LINK_HERE" style="width:100%;height:100%;color:var(--layoutLinkColor);text-decoration:none;display:flex;justify-content:end;align-items:end;padding-right:5px"><span>biosheet</span></a></div>
         </div>

<div style="flex-grow:1;box-sizing:border-box;overflow:auto"class="expandable">
            <div style="display:flex;flex-direction:column;gap:20px;padding:12px;box-sizing:border-box">

<div style="color:var(--headerColor);font-size:var(--headerFontSize);font-weight:600;font-variant:small-caps;text-align:center;margin-bottom:-30px">headline here</div>
               <div style="color:var(--headerColor);font-size:calc(var(--headerFontSize) - 6px);font-weight:600;text-align:center"><i>Optional Subtitle Here</i></div>

<div>
                  </raw-code>Viverra nam libero justo laoreet sit amet cursus sit amet dictum sit amet justo donec enim diam vulputate ut pharetra sit amet aliquam id diam maecenas ultricies mi eget mauris pharetra et.
			   
                  Laoreet sit amet cursus sit amet dictum sit amet justo donec enim diam vulputate ut pharetra sit!
			   
                  Justo donec enim diam vulputate ut pharetra sit amet aliquam...<raw-code>
               </div>
               <div style="background:var(--headerImg);background-color:var(--headerColor);color:var(--bgColor);text-align:center;font-weight:600;padding:2px">QUICK STATS</div>
               <div style="text-align:center">
                  <span style="font-weight:600;font-variant:small-caps">age;</span> ##
                  •
                  <span style="font-weight:600;font-variant:small-caps">hair;</span> color
                  •
                  <span style="font-weight:600;font-variant:small-caps">eyes;</span> color
                  •
                  <span style="font-weight:600;font-variant:small-caps">height;</span> #'#"/###cm
               </div>
               <div style="background:var(--headerImg);background-color:var(--headerColor);color:var(--bgColor);font-weight:600;text-align:center;padding:2px">RP</div>
               <div><span style="font-variant:small-caps;font-weight:600">timeline;</span> episode or chapter</div>
               <div style="text-align:center">
                  <a href="YOUR_LINK_HERE">open PSL</a> • 
                  <user name="bakerstreet">
               </div>
               <div style="background:var(--headerImg);background-color:var(--headerColor);color:var(--bgColor);text-align:center;font-weight:600;padding:2px">CANON</div>
               <div style="text-align:center">
                  <a href="YOUR_LINK_HERE">link</a>
                  •
                  <a href="YOUR_LINK_HERE">link</a>
                  •
                  <a href="YOUR_LINK_HERE">link</a>
                  •
                  <a href="YOUR_LINK_HERE">link</a>
			   </div>
               <div style="background:var(--headerImg);background-color:var(--headerColor);color:var(--bgColor);font-weight:600;text-align:center;padding:2px">PLAYER</div>
               <div></raw-code>
                  <span style="font-variant:small-caps;font-weight:600">name;</span> Your Name
                  <span style="font-variant:small-caps;font-weight:600">pronouns;</span> they/them
                  <span style="font-variant:small-caps;font-weight:600">contact;</span> <user name="your_username"site="plurk.com">
                  <span style="font-variant:small-caps;font-weight:600">timezone;</span> EST<raw-code>
               </div>
               
            </div>
         </div>
         
      </div>

<div style="flex-basis:var(--halfWidth);height:100vh;max-height:var(--height);display:flex;flex-wrap:nowrap;flex-grow:1">

<div style="background:var(--paneBgImg);background-color:var(--paneBgColor);max-width:var(--paneWidth);display:flex;flex-direction:column;justify-content:center;align-items:center;flex-wrap:nowrap;gap:20px;">
            <div style="background:var(--img5);background-size:cover;width:100px;height:100px;border:5px solid var(--borderColor);margin:0 20px;font-weight:600;font-variant:small-caps;text-shadow:var(--dropShadow)"><a href="YOUR_NAV_LINK_HERE" style="display:block;color:var(--layoutLinkColor);text-decoration:none;width:100%;height:100%;display:flex;justify-content:end;align-items:end;padding-right:5px"><span>inbox</span></a></div>
            <div style="text-align:center"></raw-code><span style="font-size:var(--bioFontSize);font-weight:600;font-variant:small-caps">character name</span>
               gender • pronouns
               species</raw-code>
            </div>
            <div style="background:var(--img6);background-size:cover;width:100px;height:100px;border:5px solid var(--borderColor);margin:0 20px;font-weight:600;font-variant:small-caps;text-shadow:var(--dropShadow)"><a href="YOUR_NAV_LINK_HERE" style="width:100%;height:100%;color:var(--layoutLinkColor);text-decoration:none;display:flex;justify-content:end;align-items:end;padding-right:5px"><span>activity</span></a></div>
         </div>

CODE (stylesheet, for animation)

[03] expanding navigation

no subject

no subject