CODE ✦ WINDOWS.

[lucavi]

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;"> <!--- TOP WINDOW START! // ---> <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**);"> <!--- ^^^ FALLBACK COLOUR & GRADIENT COLOURS ABOVE // ---> <!--- TOP WINDOW NAME HERE // ---> <span>WINDOW NAME (TOP)</span> <div style="align-self:start; display:flex; gap:3px; font:16px/1 'MS Gothic', monospace; text-align:center; color:#333; cursor:pointer;"><div style="align-self:center; width:20px; aspect-ratio:1; background:#ddd; border:2px outset #fff;">≡</div><div style="align-self:center; width:20px; aspect-ratio:1; background:#ddd; border:2px outset #fff;">❑</div> <div style="align-self:center; width:20px; aspect-ratio:1; background:#ddd; border:2px outset #fff;">✕</div></div> </div> <div style="flex:1; border:3px inset #ddd; background:transparent url('**BACKGROUND_IMG_URL**') center no-repeat; background-size:cover;"> </div> </div> </div> <!--- TOP WINDOW END // ---> <!--- :::::::::::::::::::: ---> <!--- BOTTOM WINDOW START! // ---> <div style="align-self:baseline; grid-column:2; grid-row:2/-1; 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**);"> <!--- ^^^ FALLBACK COLOUR & GRADIENT COLOURS ABOVE // ---> <!--- BOTTOM WINDOW NAME HERE // ---> <span>WINDOW NAME (BOTTOM)</span> <div style="align-self:start; display:flex; gap:3px; font:600 16px/1 'Ms Gothic', monospace; text-align:center; color:#333; cursor:pointer;"><div style="align-self:center; width:20px; aspect-ratio:1; background:#ddd; border:2px outset #fff;">≡</div><div style="align-self:center; width:20px; aspect-ratio:1; background:#ddd; border:2px outset #fff;">❑</div><div style="align-self:center; width:20px; aspect-ratio:1; background:#ddd; border:2px outset #fff;">✕</div></div> </div> <div style="padding:25px 15px; font-size:14px; font-weight:300; text-align:center; color:#333;"> <!--- TEXT AREA START! // ---> <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> <!--- EXTRA LINKS ABOVE THIS LINE // ---> </div> <!--- TEXT AREA END // ---> </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;"> <!--- LEFT WINDOW START! // ---> <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**);"> <!--- ^^^ FALLBACK COLOUR & GRADIENT COLOURS ABOVE // ---> <!--- LEFT WINDOW NAME HERE // ---> <span>WINDOW NAME (LEFT)</span> <div style="align-self:start; display:flex; gap:3px; text-align:center; color:#333; cursor:pointer; font:16px/1 'Ms Gothic', monospace;"><div style="align-self:center; width:20px; aspect-ratio:1; background:#ddd; border:2px outset #fff;">≡</div><div style="align-self:center; width:20px; aspect-ratio:1; background:#ddd; border:2px outset #fff;">❑</div> <div style="align-self:center; width:20px; aspect-ratio:1; background:#ddd; border:2px outset #fff;">✕</div></div> </div> <div style="flex:1; border:3px inset #ddd; background:transparent url('**BACKGROUND_IMG_URL**') center no-repeat; background-size:cover;"> </div> </div> </div> <!--- LEFT WINDOW END // ---> <!--- :::::::::::::::::::: ---> <!--- RIGHT WINDOW START! // ---> <div style="align-self:baseline; grid-column:2/-1; grid-row:2; 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**);"> <!--- ^^^ FALLBACK COLOUR & GRADIENT COLOURS ABOVE // ---> <!--- BOTTOM WINDOW NAME HERE // ---> <span>WINDOW NAME (RIGHT)</span> <div style="align-self:start; display:flex; gap:3px; text-align:center; color:#333; cursor:pointer; font:16px/1 'Ms Gothic', monospace;"><div style="align-self:center; width:20px; aspect-ratio:1; background:#ddd; border:2px outset #fff;">≡</div><div style="align-self:center; width:20px; aspect-ratio:1; background:#ddd; border:2px outset #fff;">❑</div><div style="align-self:center; width:20px; aspect-ratio:1; background:#ddd; border:2px outset #fff;">✕</div></div> </div> <div style="padding:25px 15px; font-size:14px; font-weight:300; text-align:center; color:#333;"> <!--- TEXT AREA START! // ---> <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> <!--- TEXT AREA END // ---> </div> </div> </div> </div> </div> </raw-code>

Comments

HORIZONTAL (COMMENT EXAMPLE)

[lucavi]

WINDOW NAME (TOP)

≡

❑

✕

WINDOW NAME (BOTTOM)

≡

❑

✕

tagline line 1

tagline line 2

INBOX LINK LINK LINK

VERTICAL (COMMENT EXAMPLE)

[lucavi]

WINDOW NAME (LEFT)

≡

❑

✕

WINDOW NAME (RIGHT)

≡

❑

✕

tagline line 1

tagline line 2

INBOX LINK LINK LINK

[depth]

love this! using on this journal. ty!

[wrenchedup]

LOVE this so much!!!! Used it here.

[ex_ghostface110]

this is so sick tysm! using it here

[nowhere]

this is fantastic, thanks so much for sharing!

[lucavi]

♥! thank you!

[lucavi]

love your window header text choice :o

[wrenchedup]

oh hush. :p thanks so much! I love your news splash code, too. beautiful codes!

[peaceout]

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.

[lucavi]

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;">

[peaceout]

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!

[lucavi]

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

[thepasteldyke]

Hello! This is really cute, but I'm having some issues with getting it to work. I saw someone else had some sort of trouble but imgur is down so I can't check to see if it's the same. Here is a screenshot of what it looks like in the entry. The frame gets sort of... elongated?

It looks a bit better in the editor but when I view it in the actual entry it looks like the first image.

The entry itself is here. I've tried viewing it in two different versions of firefox and chrome.

The only change I've made is insert an image, I haven't made any other changes to the code. I only know very very little coding myself so I'm not really sure of what to do.

[lucavi]

Hello! Thanks for reaching out, terribly sorry for the late response.

Inspecting your entry, it looks like the <raw-code> tag might be missing. Based off of your screenshot, it looks like you have it on Rich Text mode in the entry creator, which can jank up codes pretty badly due to its tendency to auto-format. You'll have to paste it as raw text in while under the HTML tab instead and use the preview button below to see what it'd look like.

Could you let me know what it looks like with this and if there are still issues?

[thepasteldyke]

While it did have the raw-code, it seems like the rich text mode was what messed it up. That helped, thank you! =D

[lucavi]

Hooray!! Glad it worked out!