lucavi | CODE ✦ NEWS SPLASH.

THE SUN ALSO RISES

ontrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

INBOX ✦ LINK ✦ LINK

A bit of an old, Roman-ish looking / inspired splash page. News Splash is:

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

Very simple code! Default width is set to 450px because it looked about right with the placeholder text I put in, but that can be changed to your preference.

✦ **TOP_IMG_URL**
✦ vertical text, main body text, a href links.
✦ optional: default is set to max-width:450px; this value can be changed to your leisure.

NEWS SPLASH

<raw-code>
<div style="display:flex; justify-content:center; padding:7px 0;">
<div style="display:flex; flex-flow:row nowrap; width:100%; max-width:450px; margin:0 auto; text-align:justify;">

<div class="HORIZONTAL-TEXT" style="display:block; min-width:55px;">
<span style="display:block; font:600 italic 42px/1.25 Georgia, serif; letter-spacing:2px; writing-mode:tb-rl; transform:rotate(180deg);">
  your vertical text.
</span>
</div>

<div class="PROFILE-SECTION" style="width:calc(100% - 55px);">
  <div style="display:block; margin-bottom:10px; padding:150px 0; background:#333 url('**TOP_IMG_URL**') 55% center no-repeat; background-size:200%;"></div>
  <div style="padding:5px 0;"></div>
  <div style="float:left; padding-right:5px; font:600 35px/1 Georgia, serif;">
    C
  </div>
  <p>ontrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>

<div style="display:flex; justify-content:center; gap:10px; font:normal 14px/1.25 Georgia, serif;">
    <a href="">INBOX</a> ✦
    <a href="">LINK</a> ✦
    <a href="">LINK</a>
  </div>
</div>

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

Flat | Top-Level Comments Only

Edited 2023-01-02 06:12 (UTC)

This is stunning, thank you so much!

i love your codes so much. i adapted this one into my muselist, and i'm still trying to figure out somewhere i can use the discord one because it's cute and clever.

did you make your own layout for this journal? it's so neat and minimal and works really well on my phone, i love the wipe in as it loads, i would loooove the code if you're willing to share! (i would credit + am fine to change up the colours or features, i just think it would make checking my reading page for game updates much better since it looks better on my phone than any other layout i've seen.)

Hello! Thank you so much! Always happy to hear people like my stuff!

I did make my own layout; however, the only problem is that it's pretty much for appearances and other pages like reading pages or tag pages don't actually display properly atm. 😅 Putting out full and proper layouts is something I'm interested in doing in the future though. I'd be happy to let you know if I get around to fixing up my current layout and/or other layouts in full!

CODE ✦ NEWS SPLASH.

NEWS SPLASH

(frozen comment) NEWS SPLASH (COMMENT EXAMPLE)

no subject

no subject

no subject