lucavi | CODE ✦ WINDOWS.

what happened to the soul —

≡

❑

— that you used to be?

≡

❑

MY GHOST —

WHERE'D YOU GO?

INBOX LINK LINK LINK

not mere potential —

≡

❑

— but rather, a promise.

≡

❑

don't look behind you —

NO FEARS TO FALL TO.

INBOX LINK LINK LINK

A frontnav-style code inspired by a mix of vapourwave and general old Windows 78, Windows XP-era looks.

✓ RESPONSIVE (MOBILE FRIENDLY)
✓ COMMENT FRIENDLY
✓ CUSTOMISABLE
✗ NOT EMAIL-FRIENDLY / EMAIL-TESTED

By default the text area just has two lines of text for whatever you want, but you can really replace it with whatever you'd like within the "TEXT AREA" brackets. If you add a lot of links, they'll also automatically wrap over to the next line. The links aren't default styled, but if the colour doesn't work with your theme, you can add styling to each link. Areas to Ctrl+F and replace for best results are:

✦ **COLOUR_1** (x2)
✦ **COLOUR_2** (x2)
✦ **BACKGROUND_IMG_URL**
✦ window name (both), taglines line 1 & 2.
✦ optional: default is set to max-width:800px; this value can be changed to your leisure.
✦ optional: default is set to font:600 16px/1.25 'MS Gothic', monospace; MS Gothic looks best for emulating the old pixelated text on Windows, but it isn't the most legible font. If you'd like to change out for a different one, replace the 'MS Gothic', monospace to whatever web-safe font you'd like. There are three instances of this code, but you only need to change the one at the very start.

HORIZONTAL

<raw-code>
<div style="display:flex; justify-content:center;">
<div style="display:grid; grid-template-columns:10% 1fr 10%; grid-template-rows:200px 100px auto; gap:3px; width:100%; max-width:800px; font:600 16px/1.25 'MS Gothic', monospace;">

<div style="grid-column:1/-1; grid-row:1/3; display:grid; align-items:stretch; background:#ddd;">
<div style="display:flex; flex-flow:column nowrap; gap:3px; width:100%; padding:3px; border:3px outset #fff; box-sizing:border-box;">
  <div style="display:flex; justify-content:space-between; align-items:center; gap:10px; padding:5px 5px 5px 10px; color:#fff; cursor:default;
    background:#333; 
    background:linear-gradient(45deg, **COLOUR_1**, **COLOUR_2**);">

<span>WINDOW NAME (TOP)</span>

<span>WINDOW NAME (BOTTOM)</span>

<div style="font-size:clamp(18px,4.5vw,24px); font-weight:600;">
       tagline line 1
    </div>
    <div style="font-size:clamp(24px,4.5vw,35px); font-weight:600;">
      tagline line 2
    </div>

<div style="display:flex; flex-flow:row wrap; justify-content:center; gap:10px; padding-top:25px;">
    <a href="LINKHERE">INBOX</a>
    <a href="LINKHERE">LINK</a>
    <a href="LINKHERE">LINK</a>
    <a href="LINKHERE">LINK</a>
    
    </div>

</div>
</div>
</div>
</div>
</div>
</raw-code>

VERTICAL

<raw-code>
<div style="display:flex; justify-content:center;">
<div style="display:grid; grid-template-columns:1fr 100px 1fr; grid-template-rows:100px auto 100px; gap:3px; width:100%; max-width:800px; font:600 16px/1.25 'MS Gothic', monospace;">

<div style="grid-column:1/3; grid-row:1/-1; display:grid; align-items:stretch; background:#ddd;">
<div style="display:flex; flex-flow:column nowrap; gap:3px; width:100%; padding:3px; border:3px outset #fff; box-sizing:border-box;">
  <div style="display:flex; justify-content:space-between; align-items:center; gap:10px; padding:5px 5px 5px 10px; color:#fff; cursor:default;
    background:#333; 
    background:linear-gradient(45deg, **COLOUR_1**, **COLOUR_2**);">

<span>WINDOW NAME (LEFT)</span>

<span>WINDOW NAME (RIGHT)</span>

<div style="font-size:clamp(18px,4.5vw,24px); font-weight:600;">
      tagline line 1
    </div>
    <div style="font-size:clamp(24px,4.5vw,35px); font-weight:600;">
      tagline line 2
    </div>

<div style="display:flex; flex-flow:row wrap; justify-content:center; gap:10px; padding-top:25px;">
      <a href="✦">INBOX</a>
      <a href="✦">LINK</a>
      <a href="✦">LINK</a>
      <a href="✦">LINK</a>
    </div>
  
  
  </div>
</div>
</div>
</div>
</div>
</raw-code>

Flat | Top-Level Comments Only

hello! this is so cool and i love it! i have a question - i've fiddled with it and i can't seem to figure it out. this looks correct on my entry page, on your journal view, and on one other person's example on this post, but on my journal view and one other person's on this post it's looking like this, with some gaps on one side of the windows. it's like this for me in both firefox and chrome. do you happen to know what the issue might be? thanks in advance for your time, no worries if not.

hey there! sorry for getting to you a little late, and thanks for checking out my code!

i took a look at the problem, and it seems to be that on certain dreamwidth pages, the box-sizing property isn't always properly applied, so the padding is causing things to shift.

could you try adding in box-sizing:border-box; to the second div of both windows and see if that fixes the issue for you? it should be in this code block:
<div style="display:flex; flex-flow:column nowrap; gap:3px; width:100%; padding:3px; border:3px outset #fff;">

this wasn't late at all! thanks so much for taking a look at the issue for me, i really appreciate it.

and that worked perfectly! all set!

fantastic! thanks for pointing it out to me, i'll have the code updated as well!

CODE ✦ WINDOWS.

HORIZONTAL

VERTICAL

no subject

no subject

no subject

no subject