achates ripoff code, but it’s an editable template

[keylogged]

casual HTML as always

---

for <achates>

Giant heading text here

Make sure your text is enclosed by the full <!--TEXT CONTENT--> & <!--/END TEXT CONTENT--> lines! There’s some extra styling to account for an empty line before & after the text begins, for visibility in the code editor.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Subheader Text

Same div as above for spacing shenanigans. In the Aeneid, Achates (Ancient Greek: Ἀχάτης, "good, faithful Achates", fidus Achates as he was called) was a close friend of Aeneas; his name became a by-word for a very intimate companion.

» Lists tend to use this character.
» I recommend typing them out as regular text lines, because Deamwidth lists auto-add a bunch of spacing.
» But whatever floats your code.

Fancy Bullshit

Stuff that I use in my own post, with some modifications for ease of editing.

Stuff in the first column. Note that there is no extra spacing around the text here, or it would look fluky on thin screens. Each column takes about half the width of the post contents.

Stuff in the second column. These can get pretty thin before jumping to a one-column layout! With the intended font, the minimum width is about as long as the “fancy bullshit” header.

This will also look weird with extra spacing, sorry! There’s also a solid line of extra space above & below the text here (intentional), so it works better with a longer block of text. Or just something that you really, really want to stand out, I guess.

Dropdown

This basically recycles the blockquote code, above, so you will once again have extra space above & below the content. It’s not my favorite, but this keeps it easier to edit.

If you want a plain ol’ text dropdown without the subheading look, replace the <summary line with <summary style="cursor:pointer;">.

Like so.

You don’t even need the fancy side-line div, really! (But it does look better with some visual distinction, IMO, to where the dropdown content begins & ends.)

And That’s Basically It

It’s a little more complicated than the codes I usually put out, just because each text section has its own little div, and also there are fancy bullshit options. For an effectively-plaintext post, though, you can ignore the fancy bullshit options and be all set with text & a header or two.

code by Flyleaf, blatantly ripping off the game info

---

base/container code
everything goes in here!

<raw-code><div style="max-width:56em; margin:0 auto; font-family:tahoma,sans-serif; line-height:1.5;"><div style="border-left:20px solid; padding:1em 0 1em 1em;"> <!--text in the top right, links back to achates navigation--> <p style="margin:0 0 .5em;text-align:right; font-family:georgia,sans-serif; font-style:italic; letter-spacing:.1em;"><small><b> for <a href="https://panopte.dreamwidth.org/377.html" style="color:inherit;text-decoration:none;"><achates></a> </b></small></p> <!--/end top right text--> <!--LARGE HEADER & ADDITIONAL CONTENT GO HERE--> </div><p style="margin:.75em 0 0;text-align:right; font-style:italic; letter-spacing:.05em; opacity:.5;"><small>code by <a href="https://a-musements.dreamwidth.org/12453.html" style="color:inherit;">Flyleaf</a>, blatantly ripping off the game info</small></p></div></raw-code>

large heading

<!--LARGE HEADER--> <div style="font-size:2em; letter-spacing:.05em; font-style:italic; border-bottom:3px solid; font-family:arial,sans-serif; text-transform:uppercase; line-height:1.25; font-weight:normal; margin:0; padding:0 0 .15em;"> Giant heading text here </div> <!--/END LARGE HEADER-->

subheading

<!--SUBHEADER--> <div style="font-size:1.5em; letter-spacing:.025em; font-style:italic; border-bottom:2px solid; font-family:arial,sans-serif; text-transform:uppercase; margin-bottom:.75em; line-height:1.25; max-width:25em; font-weight:normal; margin:0; padding:0 0 .25em;"> Subheader Text </div> <!--/END SUBHEADER-->

text content
every block of unformatted text should go in one of these!

<!--TEXT CONTENT--><div style="margin:-2.5em 0 0;"></raw-code> Blablabla lorem ipsum dolor sit amet we all know it. In the Aeneid, <a href="https://en.wikipedia.org/wiki/Achates_(Aeneid)">Achates</a> (Ancient Greek: Ἀχάτης, "good, faithful Achates", <i>fidus Achates</i> as he was called) was a close friend of Aeneas; his name became a by-word for a very intimate companion. » Lists tend to use this character. » I recommend typing them out as regular text lines for ease of editing. <raw-code></div><!--/END TEXT CONTENT-->

---

fancy bullshit
optional!

two columns

<!--TWO-COLUMN THING--> <div style="display:flex; flex-wrap:wrap; gap:0 1.5em; margin:-1.5em 0 3em;"> <!--COLUMN 1--> <div style="flex:1; padding-top:.5em; margin-bottom:-1em; min-width:17.5em;"></raw-code> Stuff in the first column. Note that there is <b>no</b> extra spacing around the text here, or it would look fluky on thin screens. Each column takes about half the width of the post contents. <raw-code></div><!--/END COLUMN 1--> <!--COLUMN 2--> <div style="flex:1; padding-top:.5em; margin-bottom:-1em; min-width:17.5em;"></raw-code> Stuff in the second column. These can get pretty thin before jumping to a one-column layout! With the intended font, the minimum width is about as long as the “fancy bullshit” header. <raw-code></div><!--/END COLUMN 2--> </div> <!--/END TWO-COLUMN THING-->

blockquote

<!--BLOCKQUOTE--> <blockquote style="border:0;margin:1em 0;padding:0 0 2em 1em;border-left:3px solid;"></raw-code> This will also look weird with extra spacing, sorry! There’s also a solid line of extra space above & below the text here (intentional), so it works better with a longer block of text. Or just something that you really, <em>really</em> want to stand out, I guess. <raw-code></blockquote> <!--/END BLOCKQUOTE>

dropdown

<!--DROPDOWN--> <details style="margin:1em 0;"> <summary style="cursor:pointer; border-bottom:2px solid; max-width:25em;"><div style="font-size:1.5em; letter-spacing:.025em; font-style:italic; border-bottom:2px solid; font-family:arial,sans-serif; text-transform:uppercase; margin-bottom:.75em; line-height:1.25; font-weight:normal; margin:0; padding:0 0 .25em; border:0; display:inline-block; vertical-align:top;"> Dropdown </div></summary> <div style="border:0;margin:1em 0;padding:0 0 2em 1em;border-left:3px solid;"></raw-code> This basically recycles the blockquote code, above, so you will once again have extra space above & below the content. It’s not my favorite, but this keeps it easier to edit. <raw-code></div> </details> <!--/END DROPDOWN-->

Any questions, feel free to ask o7