jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2025-05-04 12:42 am
10billionghosts) wrote2025-05-04 12:42 am
Entry tags:
code: LAYERS, a modular, mobile-responsive aesthetic code
Hello! This new modular code, LAYERS, is a mood board with a bunch of different styling options so that you can use it for navigation, IC/OOCs or thread toppers. It is mobile responsive, meaning it will collapse into one single column on narrow displays, rather than creating a horizontal scroll.
This code comes with five base options:
A MILLION BILLION THANK YOUS TO THE MOST PERFECT CHURL FOR DOING MOST OF THE EXAMPLE CODES FOR THIS. The only one I made was the HSR one lmfao. Thank you for my life Cheryl they are so cute.
HOW TO USE:
❣️ This code is mobile compatible! I have not tested this code on InsaneJournal.
❣️ Be sure to update any instances of IMG_URL for pictures or #URL_HERE for links.
❣️ The BASE image board has two style options: one where the interior squares are not styled and are just flat pictures and one where they are styled with a border and drop shadow. You can see them side by side below.
❣️ The BASE image board comes with three squares by default, but you can delete one and just have two per a few of the example codes below. If you tweak the width and height to make the squares smaller, you can probably fit more than 3, as well.
❣️ Each subsequent code comes with UNSTYLED interior squares on the left-side image board. If you would like the styled interior squares, just swap out the styled version for the unstyled version!
❣️ The NAVIGATION code will automatically stack links three across. You can have as many or as few as you'd like and they should fit without breaking the code!
❣️ (Intermediate Tip) If you would like to change the number of links per line in the NAVIGATION code, you'll want to change
❣️ Any of the TEXT versions of the code have room for a header and a short paragraph of text. Good for an aesthetic quote or a very short description!
❣️ COLORS:
❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you're feeling generous, you can also donate to my ko-fi -- it's always greatly appreciated!
This code comes with five base options:
- Base is a simple, single column mood board with two styling options.
- Mood Board adds a second column of all images to make a fuller moodboard.
- Navigation offers a scaling link section so you can add as many links as you like.
- Text features a space for a shortish text blurb, good for a short summary.
- Text & Nav combines the above two for a very aesthetic navigation code.
A MILLION BILLION THANK YOUS TO THE MOST PERFECT CHURL FOR DOING MOST OF THE EXAMPLE CODES FOR THIS. The only one I made was the HSR one lmfao. Thank you for my life Cheryl they are so cute.
HOW TO USE:
❣️ This code is mobile compatible! I have not tested this code on InsaneJournal.
❣️ Be sure to update any instances of IMG_URL for pictures or #URL_HERE for links.
❣️ The BASE image board has two style options: one where the interior squares are not styled and are just flat pictures and one where they are styled with a border and drop shadow. You can see them side by side below.
❣️ The BASE image board comes with three squares by default, but you can delete one and just have two per a few of the example codes below. If you tweak the width and height to make the squares smaller, you can probably fit more than 3, as well.
❣️ Each subsequent code comes with UNSTYLED interior squares on the left-side image board. If you would like the styled interior squares, just swap out the styled version for the unstyled version!
❣️ The NAVIGATION code will automatically stack links three across. You can have as many or as few as you'd like and they should fit without breaking the code!
❣️ (Intermediate Tip) If you would like to change the number of links per line in the NAVIGATION code, you'll want to change
grid-template-columns:auto auto auto;. You can add an additional 'auto' to make it four per line, or remove 'auto's to make it two or one per line.❣️ Any of the TEXT versions of the code have room for a header and a short paragraph of text. Good for an aesthetic quote or a very short description!
❣️ COLORS:
- hex code #fff (white) is declared in each link, and is the text color for each link. To change this most easily, use find-replace.
- hex code #0146b5 is a dark blue used for the header text on TEXT codes by default. It is only declared in the text area part of the code.
- hex code #2d2d2d is a dark gray used for the body text in TEXT codes and is only declared in that area once.
- any instance of hex code #ccc can be changed to another hex code, and the url('IMG_URL') left blank to create a solid color block, rather than an image.
❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you're feeling generous, you can also donate to my ko-fi -- it's always greatly appreciated!
BASE IMAGE WITH PLAIN INTERIOR SQUARES
Header Text
Biscuit pie halvah shortbread jelly-o gingerbread chocolate dessert apple pie. Bear claw cheesecake pie toffee lemon drops. Gummies tiramisu donut powder oat cake gingerbread. Bear claw candy canes donut sweet gummi bears chocolate muffin. Sweet roll dragée muffin shortbread candy.
no subject
no subject
no subject
no subject
no subject