lucavi | CODE DUMP ✦ TEXT BOX CODES!

Just a bunch of text box codes I wrote between breaks, nothing too loaded with them. Figured I could share them in one collection dump. Minimal instructions, but all of them should be set in a way that in order to change basic colours and the like, you only need to fiddle with the custom code values at the very beginning of each code. Sorry the keywords are a little bit chaotic since I made these at random times all over the place. As always though, please feel free to drop a question if you have any. Happy coding!

KEEP IT SHORT

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.

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

PERSONA!

<raw-code>
<div style="display:flex; flex-flow:column nowrap; align-items:center; gap:15px; justify-content:center;
  --shadowColour: #e10000;
  --titleColour: #fefefe;
  --textboxBackground: #fefefe;
  --textColour: #1d1d1d;
  --borderColour: #1d1d1d;
">
<div style="display:grid; grid-template-columns:15px auto; grid-template-rows:auto 15px auto; flex-flow:column nowrap; width:100%; max-width:1080px; padding:10px 0;">
<div style="display:block; grid-column:1/-1; grid-row:1/3; place-self:start; padding:10px; color:var(--titleColour); font:600 24px/1 'Arial Black', sans-serif; letter-spacing:2px; text-transform:uppercase; background:var(--borderColour); transform:rotate(-1.5deg);">
  KEEP IT SHORT
</div>

<p>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.</p>

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

Something Wicked...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

✓ RESPONSIVE (MOBILE FRIENDLY)
✓ COMMENT FRIENDLY
✓ CUSTOMISABLE (border image needs more fiddling if you want to change it)
✗ NOT EMAIL-FRIENDLY / EMAIL-TESTED

..THIS WAY COMES!

<raw-code>
<div style="display:flex; justify-content:center;
  --primary: #1d1d1d;
  --bgColour: #eee;">
<div style="width:100%; padding:15px; border:5px solid var(--primary); background:#eae6e5 url('https://thumbs.dreamstime.com/b/gothic-skulls-damask-style-black-white-seamless-pattern-design-gothic-skulls-damask-style-black-white-seamless-pattern-173462152.jpg') center repeat; background-size:50%; background-blend-mode:multiply; border-radius:4px;">
<div style="display:grid; padding:15px; color:var(--primary); background:var(--bgColour); box-shadow:0 3px 6px inset var(--primary);">
  <div style="display:flex; justify-content:center; align-items:center; gap:15px; padding:12px 0; font:600 clamp(28px,3.5vw,35px)/1.25 Georgia, Garamond, sans-serif; font-variant:small-caps; text-shadow:0 1px 3px #1d1d1d3c;">
    <hr style="flex-grow:1; border-top:2px solid var(--primary);">
    <div style="max-width:80%; text-align:center; line-height:1.1;">
      Something Wicked...
    </div>
    <hr style="flex-grow:1; border-top:2px solid var(--primary);">
  </div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

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

whoa, what the dog doin'?!

that's a section title!

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

POP ART

<raw-code>
<div style="display:flex; flex-flow:column nowrap; align-content:center;
  --mainBG: #f9f5ee;
  --mainHeaderIMG: url('https://img.freepik.com/premium-vector/blue-comic-pop-art-background_530597-58.jpg');
  --textHeaderColour: #ed7d3b;
  --mainTextColour: #1d1d1d;
  --borderWidth: 6px;
  --borderColour: #1d1d1d;
  --shadowColour: #ffb58a;">

whoa, what the dog doin'?!

</div>
  </div>

<div style="padding:15px;">
    <div style="display:inline-block; padding:10px; font:600 clamp(24px,3.5vw,35px)/1 'Arial Black', sans-serif; text-transform:uppercase; color:var(--mainBG); background:var(--textHeaderColour);">
      that's a section title!
    </div><div style="padding:5px 0;"></div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

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

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

RPGMAKER

<raw-code>
<div style="display:grid; grid-template-columns:5% 110px auto 5%; grid-template-rows:60px 60px auto; justify-items:stretch; align-items:center; gap:0 10px; 
  font: 16px/1.25 'Andale Mono', monospace; 
  color: #eee;
  --bgColour: #1d1d1d;
  --borderColour: #82b7f1;
  --borderWidth: 4px;
  --portraitImg: url('https://e7.pngegg.com/pngimages/53/309/png-clipart-pikachu-pixel-art-pikachu-angle-smiley.png');">
<div style="grid-column:1/-1; grid-row:2/4; padding:70px 5% 10px; border:var(--borderWidth) outset var(--borderColour); border-radius:15px; background:var(--bgColour);">

</div>
</raw-code>

Pikachu

Article Title Goes Here.

LINK | LINK | LINK | LINK | LINK

orem 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.

✓ RESPONSIVE (MOBILE FRIENDLY)
✓ COMMENT FRIENDLY
✗ CUSTOMISABLE (only image and link colours, anything else requires more precise fiddling)
✗ NOT EMAIL-FRIENDLY / EMAIL-TESTED

NEWS ARTICLE

<raw-code>
<div style="display:flex; justify-content:center;
  --headerImg: url('https://images.pexels.com/photos/531321/pexels-photo-531321.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
  --linkColour: #c00;
">
<div style="display:flex; flex-flow:column nowrap; gap:10px; width:100%; padding:15px; background:#ddd url('https://www.tilingtextures.com/wp-content/uploads/2019/05/0090b-512x512.jpg') center repeat; border:5px double #333;">
<div style="display:grid; place-items:center; padding:35px; font:small-caps 600 clamp(24px,3.5vw,32px)/1.25 Georgia, Garamond, serif; text-align:center; letter-spacing:3px; color:#eee; background:#a1a1a1 var(--headerImg) center no-repeat; background-size:cover; background-blend-mode:multiply;">
  Article Title Goes Here.
</div>
<div style="display:flex; flex-flow:row wrap; justify-content:center; gap:5px 10px; padding:15px; font:small-caps 600 12px/1.25 Georgia, Garamond, serif; border-top:1px solid #333; border-bottom:1px solid #333;">
  <a style="color:var(--linkColour); text-decoration:none;"
     href="LINKHERE">LINK</a> |
  <a style="color:var(--linkColour); text-decoration:none;"
     href="LINKHERE">LINK</a> |
  <a style="color:var(--linkColour); text-decoration:none;"
     href="LINKHERE">LINK</a> |
  <a style="color:var(--linkColour); text-decoration:none;"
     href="LINKHERE">LINK</a> |
  <a style="color:var(--linkColour); text-decoration:none;"
     href="LINKHERE">LINK</a>
</div>

<div style="padding-top:10px; color:#333;">
<div style="float:left; padding:0 5px 0 0; font:600 35px/1 Georgia, Garamond, serif;">L</div>
<p>orem 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.</p>

</div>

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

Flat | Top-Level Comments Only

Here's the code for the adjusted layout! It does reduce the amount of space for the name field though, so that might look wonky on some mobile layouts as a warning.

<raw-code>
<div style="display:grid; grid-template-columns:5% 110px 110px auto 5%; grid-template-rows:60px 60px auto; justify-items:stretch; align-items:center; gap:0 10px; 
  font: 16px/1.25 'Andale Mono', monospace; 
  color: #eee;
  --bgColour: #1d1d1d;
  --borderColour: #82b7f1;
  --borderWidth: 4px;
  --portraitImg1: url('https://e7.pngegg.com/pngimages/53/309/png-clipart-pikachu-pixel-art-pikachu-angle-smiley.png');
  --portraitImg2: url('https://external-preview.redd.it/Me_988TLP4G1mJxoUIsfmFgz8k0gc_g4r_PzJpfgUss.gif?format=png8&s=abedeeed021d314b72917732d60c26f9c704c001');">
<div style="grid-column:1/-1; grid-row:2/4; padding:70px 5% 10px; border:var(--borderWidth) outset var(--borderColour); border-radius:15px; background:var(--bgColour);">

</div>
<div style="align-self:start; grid-column:2; grid-row:1/3; width:110px; aspect-ratio:1; border:var(--borderWidth) outset var(--borderColour); border-radius:15px; background:#eee var(--portraitImg1) center no-repeat; background-size:cover;"></div>
<div style="align-self:start; grid-column:3; grid-row:1/3; width:110px; aspect-ratio:1; border:var(--borderWidth) outset var(--borderColour); border-radius:15px; background:#eee var(--portraitImg2) center no-repeat; background-size:cover;"></div>
<div style="align-self:center; grid-column:4/-2; grid-row:1/3; display:grid; align-items:center; width:fit-content; padding:10px 15px; font-size:125%; border:var(--borderWidth) outset var(--borderColour); border-radius:15px; background:var(--bgColour);">
  Pikachu
</div>

And then here's nerd stuff about the grid layout in case you want to make further adjustments yourself, but definitely feel free to ask me anyway! Basically what's going on is that the grid-template-columns:5% 110px auto 5%; property currently creates a column layout grid that's essentially:

110px
icon

auto
name field

So the grid-template-columns: property has to be adjusted in a way that makes room for the new stuff, so like:

110px
icon1

110px
icon2

And then adding on the new divs containing what you want and changing their grid-column: number so it's in the column you want it to be in. Hope this helps in figuring out grid, which makes for cool layouts but is a pain in the butt to understand at first lol.

THANK YOU SO SO MUCH FOR THE EXPLANATION im very stoked to use this!!!

CODE DUMP ✦ TEXT BOX CODES!

PERSONA!

..THIS WAY COMES!

POP ART

RPGMAKER

NEWS ARTICLE

no subject

no subject