jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2023-09-30 10:04 pm
10billionghosts) wrote2023-09-30 10:04 pm
Entry tags:
code: CONVERTIBLE - a mobile friendly nav/mood board
hello hello! attempting to combat burnout by producing things!! Wish me luck!! This is CONVERTIBLE a minimalist nav/mood board that is built to be used with generator layouts (and mobile displays).
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.
I've included 2 versions of the code: one with 6 links, and one with 3 links. Pretty examples this time are by me (the Ramza one) andthisisalex (the others). THANK YOU ALEX, LIGHT OF MY LIFE!!
6 LINK CODE:
3 LINK CODE:
HOW TO USE
❣️ Mind those lj-raw tags!! If you're missing one it will cause the circle to be flat on the bottom.
❣️ This code is mobile compatible -- it's actually specifically coded with mobile displays in mind -- and insanejournal friendly!
❣️ On most desktop journal views, especially on insanejournal, you are always going to get the single row version of this code. This is intentional. If you would like to permanently force the code into the multi-row mobile/narrow display format change the "max-width:575px" at the top of the code to "max-width:325px" This will ensure you always see the collapsed version.
❣️ 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!
❣️ If you're using the 6 link version of this code, the small squares work best with VERY SHORT ANCHOR TEXT (the LINK text). I mean it!! Four letters max!!
❣️ The anchor text (the word 'LINK') is optional! You can delete it, and the small squares will still be links w/o text. Just be sure to alter the title="" value for each link to improve accessibility.
❣️ Default text color is declared as black (#000) at the top of the code. Individual links are declared white (#fff). You'll need to change each of these to adjust font color.
❣️ I kinda feel like this code benefits from fooling around with the font-family (at the top of the code). So, do that if you know how. By default it is set to a perfectly legible and respectable arial/sans serif.
❣️ 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!
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.
I've included 2 versions of the code: one with 6 links, and one with 3 links. Pretty examples this time are by me (the Ramza one) and
thisisalex (the others). THANK YOU ALEX, LIGHT OF MY LIFE!!3 LINK CODE:
HOW TO USE
❣️ Mind those lj-raw tags!! If you're missing one it will cause the circle to be flat on the bottom.
❣️ This code is mobile compatible -- it's actually specifically coded with mobile displays in mind -- and insanejournal friendly!
❣️ On most desktop journal views, especially on insanejournal, you are always going to get the single row version of this code. This is intentional. If you would like to permanently force the code into the multi-row mobile/narrow display format change the "max-width:575px" at the top of the code to "max-width:325px" This will ensure you always see the collapsed version.
❣️ 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!
❣️ If you're using the 6 link version of this code, the small squares work best with VERY SHORT ANCHOR TEXT (the LINK text). I mean it!! Four letters max!!
❣️ The anchor text (the word 'LINK') is optional! You can delete it, and the small squares will still be links w/o text. Just be sure to alter the title="" value for each link to improve accessibility.
❣️ Default text color is declared as black (#000) at the top of the code. Individual links are declared white (#fff). You'll need to change each of these to adjust font color.
❣️ I kinda feel like this code benefits from fooling around with the font-family (at the top of the code). So, do that if you know how. By default it is set to a perfectly legible and respectable arial/sans serif.
❣️ 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!