10billionghosts | code: columned

Hello friends. Sorry for the long absence. I continue to be uhhhhhhhhhhhh very tired and creatively zapped, but we're probably all more than a little zapped at this point. WHEW ANYWAY time to remember how to do a release post.

COLUMNED is a simple combination mood board and nav code created for use as a splash page, but functional as a simple in entry post, as well. You can see a couple of live previews of this code on Dreamwidth at

totheviktor and on InsaneJournal at

nonecknovember. In entry examples are at the bottom of this post.

The code's pretty straightforward (for once lmao) so let's get right to it! Instructions below.

CODE HERE:

<lj-raw><div style="max-width:700px;width:100%;margin:0 auto;display:grid;grid-template-columns:1fr 1.5fr 1fr;justify-content:center;align-items:stretch;gap:10px;font-family:arial, helvetica, sans serif;font-size:11px;font-weight:bold;line-height:1;color:#fff;background:transparent;">

<div style="grid-column-start:1;grid-column-end:2;padding:10px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:space-between;gap:10px;box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;border:1px solid #6a0000;background:#fff;">

</div>

<div style="grid-column-start:2;grid-column-end:3;padding:10px;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:space-between;gap:10px;box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;border:1px solid #6a0000;background:#fff;">

<div style="width:100%;height:130px;display:grid;grid-template-columns: 1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;background:transparent;">

</div>

<div style="width:100%;height:150px;padding:10px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:center;text-align:center;color:#9c0000">

<div style="width:100%;font-size: clamp(20px, 2vw, 25px);">!!HEADER!!</div>
<div style="width:100%;font-weight:lighter;margin-top:0px;">!!sub-header text!!</div>

<div style="font-weight:normal;font-size: clamp(11px, 1vw, 12px);"></lj-raw>!!space for a short blurb, quote, concept line, etc. or delete this text and leave blank!!<lj-raw></div>

</div>

<div style="width:100%;height:130px;display:grid;grid-template-columns: 1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;background:transparent;">

</div>

</div>

<div style="grid-column-start:3;grid-column-end:4;padding:10px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:space-between;gap:10px;box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;border:1px solid #6a0000;background:#fff;">

</div>

<div style="grid-column-start:1;grid-column-end:4;text-align:right;font-size:10px;"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#fa0000;">❤</a></div>

</div>

HOW TO USE:

❣️ Mind those lj-raw tags!! It can really donk this code up if you lose one lmao so be careful.

❣️ This code is insanejournal optimized (it was made for IJ first) and conditionally mobile compatible. It is fully mobile compatible on InsaneJournal and may be mobile compatible in some, but not all, Dreamwidth layouts.

❣️ Want to use this code as a splash page for your journal? Check out Manx's guide to making splash pages on Dreamwidth, or Tess's guide for insanejournal!

❣️ #URL_HERE should be corrected to the url you'd like a given link to connect to!

❣️ Don't want those link squares to be links? remove href="#URL_HERE" from each one, and it will stop the link action.

❣️ Remember to replace IMG_URL with the url of the image you'd like to use. Portrait images and landscape images that have the point of focus well centered work best for this code.

❣️ By default, all images are set to background-size:cover (meaning they will automatically resize) and positioned to the center both vertically and horizontally. This code has been pretty forgiving on positioning for me, but you may find that you need to tweak the background-size: value or the background positioning (that's the thing that says 'center' right next to (IMG_URL) in the code) to get things just right.

❣️ hex code #6a0000 is a dark red and is the color used on the border of each column. Find and replace this to change the border color.

❣️ hex code #9c0000 is a bright red and is both the color of text in the center of the middle column and the background color for each link. Be sure to find-replace this if you'd like to change this color.

❣️ hex code #8f0303 is the color for the horizontal line separating the header from the blurb text. Don't forget to change this to match the rest of your code!

❣️ If you'd like to edit the shadow, make sure you do so for each of the three instances of it (box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px in the base code) to ensure each column looks consistent.

❣️ This code features space for 8 links. If you're using this as a splash page code and you're using your journal's reading page regularly, I strongly suggest tying one of the links to your reading page.

❣️ While I'm happy to assist in modifying the code to have fewer links, I can't support adding more links, as adding more sort of becomes a pain in the butt.

❣️ This code contains a credit link. I'd appreciate if you'd left it in, but you can remove it if you'd like!

❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you'd like, you can also donate to my ko-fi!

PROFILE CONTACT LINK LINK

Viktor Djt-dvre

artisan, adventurer, & almost azem -- or so he's told

blurb here Brownie pastry jujubes sesame snaps cake biscuit chocolate cake jelly-o. Sweet roll chupa chups dragée croissant donut candy canes.

MOOD MUSIC GLAMS READING

❤