#amethyst about

[phantomcodes]

amethyst about page preview & download / preview two

features:

made to match my amethyst theme

header with 80px x 80px icon image, blog title, url, & icon link

sections for an image (automatically resizes), description, basic info stats, likes & dislikes, blogs, & quotes

day/night toggle & scroll to top buttons

customizable google fonts, font size, border radius, and colors

optional glow effect

semi-responsive

credits:

phosphor icons

day/night mode tutorial by eggdesign

all credits listed in the code

terms:

please like/reblog if using

feel free to send me an ask if you need help customizing!

do not redistribute as your own

do not remove the credit

[phantomcodes]

hi, sage!! i wasn't sure if this is considered an allowed customization, but i just wanted to make sure !! for your 'amethyst' about page, i noticed that the day/night toggle doesn't stay whenever i refresh a page (basically: i have to manually put the page back into dark mode), so i was wondering i can add a script so my preferred version can stay?

hi yes that's fine!

[phantomcodes]

hi y’all just a reminder i won’t be offering support for the og amethyst codes, i’m in the process of revamping them so pls be patient!!

[phantomcodes]

Heya! Is there any way to make the description on the Amethyst about page to scroll? So even though there's a lot of text, it's still the same height (if that's the right term) as the image on the left? Sorry for the bother, I really love how it looks except the overflow haha. Thank youuu

hi! yes, i just updated the code so you can adjust the max-height of your description text to match whatever image you use

i'll show u what i added below the cut if you don't wanna redownload it!

find this section (towards the top of the code) and add the bolded line:

/*---- VARIABLES ---*/ --border-radius:5px; /*-- 0px, 5px, or 10px recommended --*/ --glow: 0 0 10px; /*-- change to 0 if you don't want the glow --*/ --description-height:340px; /*-- height of your description text before it starts to scroll, adjust this to fit the height of your image! --*/

find the line that says .description {width:50%;} and paste the following lines below it:

.description #text {max-height:var(--description-height); overflow:auto;} #text::-webkit-scrollbar { width: 4px; height: 4px; background-color:transparent; } #text::-webkit-scrollbar-track {background-color:transparent;}

lastly make sure to wrap your description text in <div id="text"></div>

see example below: