jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2024-04-17 12:45 pm
10billionghosts) wrote2024-04-17 12:45 pm
Entry tags:
code: GAMBLER - a mobile friendly mood board + nav
Woke up this morning and needed to kill 3 - 4 hours until Aventurine's banner starts in Honkai Star Rail (GUARANTEE LINED UP, 31 PITY, 72 PULLS SAVED, BAYBEE -- he's coming home), so here is a mobile friendly mood board that I cooked up!
This code is intended to collapse down to a narrow column on mobile displays and narrow layouts. Then, on a full page desktop view, it expands out to one row, making it great for dropboxes and main navs. You can use it as a splash page or just another entry page. THE WORLD IS YOUR OYSTER, BABY. Have the most fun.
By default, this code comes with four circle links, as that works the best with this code. Technically, though, you can remove some or add a few more, though I can't promise that 5 or more links won't donk the code up on mobile displays.
CREDIT FOR THE GIF IN THE SAMPLE GOES TO b1adie ON TUMBLR
GET THE CODE:
HOW TO USE:
❣️ Mind those lj-raw tags!!
❣️ This code is mobile compatible -- it's actually specifically coded with mobile displays in mind -- and insanejournal friendly!
❣️ On most desktop/wide screen journal views, especially on insanejournal, you are always going to get the version of this code with the circles on the left. This is intentional. If you would like to permanently force the circles to the top, go to the top of the code and change the "max-width:450px" at the top of the code to "max-width:365px" This will ensure you always see the collapsed version.
❣️ Under the CIRCLES/LINKS section, you can add or remove links by copy-pasting or deleting them, but 1 - 4 is proooobably about where you want to keep it at.
❣️ Don't want the circles to be links? remove the
❣️ Optionally, you can change
❣️ BUSINESS AS USUAL FOR THE MOST PART HERE! Change IMG_URL and #URL_HERE to fit your needs. :)
❣️ I've just blanketedly used #ccc (gray) for every square. For best results, be sure to change this color to better match your aesthetic!
❣️ This code comes with a credit by default. Appreciate it if you leave it in, but you can delete if you want! :) It's at the top of the code this time, but it's still clearly marked.
❣️ 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!
❣️ wish me luck on getting jingliu's sig, swordmommy needs her light cone so daniel can inherit death of an aeon.
This code is intended to collapse down to a narrow column on mobile displays and narrow layouts. Then, on a full page desktop view, it expands out to one row, making it great for dropboxes and main navs. You can use it as a splash page or just another entry page. THE WORLD IS YOUR OYSTER, BABY. Have the most fun.
By default, this code comes with four circle links, as that works the best with this code. Technically, though, you can remove some or add a few more, though I can't promise that 5 or more links won't donk the code up on mobile displays.
CREDIT FOR THE GIF IN THE SAMPLE GOES TO b1adie ON TUMBLR
HOW TO USE:
❣️ Mind those lj-raw tags!!
❣️ This code is mobile compatible -- it's actually specifically coded with mobile displays in mind -- and insanejournal friendly!
❣️ On most desktop/wide screen journal views, especially on insanejournal, you are always going to get the version of this code with the circles on the left. This is intentional. If you would like to permanently force the circles to the top, go to the top of the code and change the "max-width:450px" at the top of the code to "max-width:365px" This will ensure you always see the collapsed version.
❣️ Under the CIRCLES/LINKS section, you can add or remove links by copy-pasting or deleting them, but 1 - 4 is proooobably about where you want to keep it at.
❣️ Don't want the circles to be links? remove the
name="desc" href="#URL_HERE" from each one. That's a quick and dirty way to change them into just circles.❣️ Optionally, you can change
name="desc" on each link to give it a description -- like profile, dropbox, etc.❣️ BUSINESS AS USUAL FOR THE MOST PART HERE! Change IMG_URL and #URL_HERE to fit your needs. :)
❣️ I've just blanketedly used #ccc (gray) for every square. For best results, be sure to change this color to better match your aesthetic!
❣️ This code comes with a credit by default. Appreciate it if you leave it in, but you can delete if you want! :) It's at the top of the code this time, but it's still clearly marked.
❣️ 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!
❣️ wish me luck on getting jingliu's sig, swordmommy needs her light cone so daniel can inherit death of an aeon.
no subject