#and then i will learn html css to do weird things

[antimonys-stuff]

weird fucking sadness permeating... I should log off twitter forever

[mariyekos]

The struggle that is me wanting to work on several longfics and just not having time for them all.

The big problem right now is that I'm getting really excited about the Time Travel fic again but I have two (2) multichapter fics partially published right now and I don't want to abandon them to get that one out. I definitely want to finish "Within a forest dark" before I get to TT, but I'm not sure about whether I'll stick with Inheritance Found before doing some of TT. Idk. It's hard to say. IF is an interesting concept to me, but not nearly as much as TT. I've been in love with Time Travel concepts since I was around 10 or 11, so it has a bigger grip on me than the kidnapping premise of IF. That and TT is currently sitting at over 100k words while IF is only the 5k I've published.

I guess one of my big decisions here is how in depth I want to go with IF. The more in-depth I go, the longer it will take me to get to the stuff I'm currently excited about writing. But if I rush IF, I might end up disappointed by the result. So it's hard to say.

...also there's the Nidstinien fic sitting at 45k in my drafts that I really want to fix up, but I have a feeling it won't be done in less than 60k so. That's also going to be time consuming. Ahhh! So many fics to write, so little time. Spending my evenings playing FFXIV 4 days a week really sucks up a lot of my free time... I'm looking forward to when we clear so I only have to raid 2 or 3 days a week for reclears instead. (Currently I have 3 days for Savage Raiding and 1 day for Extreme Mount Farm. Though....my FRU group wants to do more reclears too which will take up extra days so ahhhh my free tiiiiime I want you baaaaack).

[spiders-around]

YOU MUST MAKE A WEBSITE

Oh wow, look at that! YET ANOTHER post urging you to make a webbed site! What a completely new thing that people haven't made a thousand masterposts for already!!

• Making a website might look scary. It is Not.

At first, I too thought making a website was too much work. It really isn't! It turns out that all you need is

an HTML file,

a web hosting service and

w3schools tutorials,

and that's about it!

This post will point you towards these resources, and others I found useful while figuring out how to make a website.

• VERY QUICK EXPLANATIONS:

What's HTML and CSS?

HTML is the content of your webpage, the skeleton of it. What shows up in a webpage is what's written in the HTML file!

CSS is the way the HTML is styled; the colour of the background and the letters, the size of elements, the font, all that!

Do I absolutely NEED JavaScript for a website?

Not at all! You don't need to worry about learning it before getting started.

• What do I make a website for? What do I put in there?

ANYTHING AND ALMOST EVERYTHING. Here's some ideas for pages from a post of mine were I was very normal about websites:

You can make a page that's only pictures of your pets.

You can make an interactive adventure.

You can make your own academic blog full of your own essays or articles.

You can just post a ton of art or make a full music page.

You can make a blog and infodump eternally, give book reccs and reviews. You can host a thousand virtual pets and nothing else.

Upload entire books in a single html file. Make a wikipedia for your ocs. Make a fake site for a random fictional place (restaurant, hotel, whatever). You can make a thousand fanpages/shrines about your favorite media. You can upload your own webcomic and make it all like a fancy website and shit.

I could keep going but, for the sake of "brevity", I won't.

• WEBSITE EXAMPLES!

If I started listing the websites I know, this post would be bottomless. Here's only seven:

https://publictransit.neocities.org/ - A webbed site, for sure

https://ribo.zone/ - A personal site

https://leusyth.neocities.org/ - An art archive

https://solaria.neocities.org/ - Personal website with A Lot of stuff (it'll come up in a bit, because it offers web making resources)

https://hog.neocities.org/ - The Hogsite

https://thegardenofmadeline.neocities.org/ - Another personal site! It also has a web resources page and has made another masterpost like this one (but better)

https://spiders.neocities.org/ - My own website, which must be weird to see in mobile . sorry

• You've convinced me. I want a webbed site. Where do I start?

https://neocities.org/

FIRST OF ALL: Neocities. It is a free web hosting service, and it's the one I and the sites I linked use!

When I first started, my website was a black page with red letters and a drawing, and nothing else! It was like that for a month, till i started picking up on how to do things.

Here's what helped me get an idea of how to make things work:

https://sadgrl.online/learn/articles/beginners-guide-neocities

An absolute beginners guide to neocities -- while when you make an account there you get a tutorial page from the site, this one's extra support for that.

https://www.w3schools.com/

Learn HTML, CSS, JavaScript and MANY other coding things for free. All the tutorial/reference pages have live testing windows for you to mess with!! helped me a LOT while figuring this stuff out!

https://htmlcheatsheet.com/

https://htmlcheatsheet.com/css/

Cheatsheets for HTML and CSS, respectively. It includes a JavaScript one too!

https://sadgrl.online/webmastery/

Sadgrl's webmastery resources! Also includes the next resource listed here:

https://sadgrl.online/projects/layout-builder/

Sadgrl's layout builder; not a lot of customization at a first glance, but I've seen wildly different websites all using it as a base, plus it works using CSS Flexbox, so it generates a responsive layout!

(basically, a responsive layout is one that translates well in different sized screens)

https://www.tumblr.com/fysa/728086939730919424/wikitable-code?source=share

Tumblr user fysa made this layout imitating a wiki page!

https://brackets.io/

At some point, you might want to do things outside the Neocities code editor and get one outside the site. I recommend Brackets, because my old as fuck computer can run that and absolutely nothing else apparently, and it works wonderfully! Though I recommend either turning off the code autocomplete or using it after a good while of already using the Neocities code editor, so you get used to coding on your own.

http://www.unit-conversion.info/texttools/text-to-html/

Turn your text into HTML code! i use this kind of pages for my lengthy blog entries that I don't feel like formatting myself.

https://imagecompressor.com/

COMPRESS YOUR IMAGES.

The heavier an image is, the more your site weighs and the more time your page will spend loading. You don't want that, specially if your site is heavy on graphics. This might help!

https://solaria.neocities.org/guides

Some CSS, JavaScript and Accessibility guides! Worth checking out!

https://eloquentjavascript.net/

This is a free, interactive book for learning JavaScript! NOTE: It is very intuitive, but JavaScript is HARD!! I still haven't learned much of it, and my website does fine without so don't worry if you end up not doing much with it. It's still useful + the exercises are fun.

And now, accessories!

• Silly stuff for your page :]

https://gifypet.neocities.org/

Make a virtual pet, copy the code and paste it in your HTML file! You'll get a little guy in your webbed site :]

https://www.wikplayer.com/

Music player for your website!

http://www.mf2fm.com/rv/

JavaScript silly effects for your site :]

https://blinkies.neocities.org/geoblinkies

Blinkie search engine!

https://www.cbox.ws/

Add a chatbox to your site!!

https://momg.neocities.org/

Infinite gallery of gifs. i've spent hours in there looking at moving pictures and out of them all, the ONLY gif i actually ended up using on my site was a rotating tomato slice. it is still there. trapped.

https://wrender.neocities.org/tarotinstructions

A widget that gives you a random tarot card!

https://www.websudoku.com/widget.php

Sudoku widget!

That's about it for now! I don't know how to end this!!! Remember to have fun and google everything you don't know :]

[mournstera]

Hi flipse! I know you don't teach but what advice would you give to start making themes?

Apparently a hot take, but: Make it responsive.

Learn how to do that, it's so simple. hell my tumblr basecode has eveything in it already for you to use!! (don't need to use it just learn from it at least!)

There's this weird thing with Tumblr that seem to be stuck in 2014 where no themes were responsive. Like, we all have different screen sizes, it's such an insane thing to only make it work for like 20% of people.

Also good place to start: https://www.htmlforpeople.com/

and HTML and CSS course for absolute beginners on youtube

[m0r1bund]

hello! I was catching up on reading NAKAQUOI! and the essay from the most recent entry was such an inspiring method of storytelling. enough so to make me reach out and ask about your website in general (if you're comfortable answering!). what is it like running a lore/gallery site for your work? how and why did you get started? and lastly, what about it keeps you going?

thank you, cheers! -Winn

😭 Thank you so much for the kind words, this means a lot to me. I really enjoyed writing that little essay.

This is going to be a weird and vulnerable sidebar, but I promise I’m going somewhere with it. Honestly, it blows my mind that anyone reads them. I think it’s because I’m still operating on the assumption that this form of storytelling is for n=1 (yours truly) and other people are merely tolerating it, LOL. I used to be way more sensitive about sharing my characters / stories / worlds, because the forms of storytelling that came naturally to me were often received as incomprehensible, dense, and unintuitive by other people. At a certain point I decided that I just had to accept this and become my own hype man. People could enjoy the pretty pictures out of context, and they could be a vehicle for me to journal about the pretend people who live in my head. Good compromise 👍

for someone who talks big about making weird art and finding the 6 people in the audience who truly get it, I don’t think I realized that this could include my deranged essays about things that aren’t real. And yet. AND YET!!!! I think this desire to present my work in a way that’s “more” than just pretty pictures with text attached to them has been simmering for a long time, even though I dismissed it and was kind of embarrassed about it. Which is wild. Because I grew up on bestiaries and warrior cats lore compendiums and video game wikis and morrowind. There was clearly a precedent. And Yet.

Anyway, this desire started rubbing shoulders with the technical limitations of blogs and gallery websites, and also a general disillusionment with social media during the enshittification of the internet. Like, yeah it sucked that my whole body of work could vanish overnight. But mostly I had worldbuilding neuroses that made me want to scratch at the walls, and I knew just enough html + css to be dangerous. In 2018, I had also finished some longer works that made me more confident in my ability to deliver a cohesive Moribund, and these works weren’t intuitive to share on social media… So… I guess that gave me the impetus to stop flirting with the idea of getting my own website and start actually working on it.

M0R1BUND.com used to be a pure html + css + js website hosted on Neocities. It was ideal and I miss it in a lot of ways, because yeah, that IS the most unadulterated control you can have over your webspace. Had a blast with it, experimented a lot, learned a lot, hosted galleries and twines and webfiction and digital collages and ARPG stuff and interactive maps and a webcomic. And it was mine as much as it was the work of kind people sharing sample code on stackexchange, LOL.

Eventually, I felt the growing pains of managing this by hand. Updating ate hours out of my day. There are definitely more intuitive ways to build and maintain a pure html + css + js website, but I was working with what I knew. I started learning wordpress for basedt.net with the hopes of automating certain operations, like posting art to a gallery or pages to a webcomic. It felt intuitive enough that I later rebuilt M0R1BUND.com in wordpress.

It took a long time and a lot of work, like almost a year? And I still haven’t mirrored everything. Wordpress has made things easier to maintain, but I learned the hard way that it doesn't avoid the pitfalls of simpler website-builders… which is to say… whatever it does to make life easier will also make life incredibly difficult if you decide you want to do something manually. And it’s never the stuff you expect.

These days there’s also the baggage of Automattic’s nonsense. Wordpress is open source, so I don’t think it will go anywhere, but it’s still the corporate clownery that I wanted to escape by making my own website. Blech.

Really though, I love running M0R1BUND and it’s the closest thing I have to an ideal “home” for my work. Going to a dedicated website is unintuitive and out of the way for a lot of people, but (indicates generally) what have we just learned about me. This one’s for n=1 and the, like, 6 people who pop in and say hello. You are my people...

Looking forward, things cook at the rate of 2937728839 irons in the fire, and they are all getting done, but they are all getting done sooooo slowly… I’m having fun. Besides having a general compulsion to make art and tell stories and be Understood, I think that’s what carries me thru this. I want to have fun. and I want to trick people into caring about my characters and also the Sonoran Desert. And as Bjork says, I have to get the wiggles out or else the dark times will come.

It’s getting late and I don’t have a denouement for this. Thank you for your kind words! Thank you for asking! hope this answers? hope this helps (???) take the best and leave the rest.

[highly-nonexistent]

There is something very weird about the relatively short nature of the culture surrounding website creation. As in, like, internet-user-created websites have been around for like 30-31 years at this point, and the culture surrounding them has changed so very much.

People used to create websites left and right for their own needs, their little shops and their little blogs about what they liked. Some websites of course housing horrible content since their dawn, and some being as mundane but as unique as the person behind its code. I have seen older sites, archived, that promoted creating your own site, and that was interesting to see. That culture of creating your own website and of sharing that knowledge on a still-growing facet of communication.

And then at some point social media appeared, and that was interesting, because now everyone was able to quickly present themselves without the need of a website, but that didn't mean people stopped making websites. I mean, hell, Geocities died in 2009, so a lot of people were creating their own websites for free before that time, no need to pay for domain names or hosting. And even without Geocities, there were other website hosting things that yes, while not as customizable, were still a resource for people to work with them. There's still a website floating around that I made when I was a kid using one of these services. Cool stuff.

All this to say that I do feel a weird sense of dread looking back and cross-referencing with the present and seeing things like "website creator powered by AI" and shit like that, because just ?? How did it go plummeting so quickly. There is a weird feeling of having lost a developing culture to corporations making quick access to posting things that, as corporations' nature dictates, are used to sell data or to train models or what have you. Similarly, we get pretty same-y looking pages because of the need to be slick or whatever with designs that just leaves everything looking the same. ALSO, the loss of spaces for kids, or just the gradual lowering of them in favor of cocomelons and whatever else the devil's machine has spawned is like watching an apple decay before having ripened. I do feel like there is this phenomenon in which how to make a site has been lost in the notion of "making a website falls into the realm of evil and scary coding and I could never be a programmer, plus who would look at it, plus we have tools to make them," etc etc etc. Here is a little secret: website creation is not exactly hard to pick up at all. You might say it's very similar to using a rich text editor like Word or a notes app or whatever you use. Similarly, have you used markdown for things like messages or D iscord messages, you know, with the asterisks for bold text and the likes? Markdown is based on html's structures. And truly, you do not have to even learn to code using Javascript if you don't want to, you can just go full html + css and structure your things as you go, adding your little images and your updates. Because guess what !! Html and css are not programming languages, they're a markup language and a stylesheet language respectively, which is a fancy way to say "you make the structure of your page with the first one and make it pretty with the second one". This includes cool stuff like tables, lists, grids, colors, transitions, etc. All of that without any programming. (That being said, if you are interested in programming, Javascript isn't too bad to pick up. The language itself *is* kind of evil, but using it in conjunction with html is not too difficult). I do have to say though, I am glad that there is a push to making your own websites and things, especially with Neocities sprawling a huge community of avid website creators, as well as the huge amount of tutorials and stuff making the push forward with making sites and online spaces and experiences more widely available. Hopefully this becomes a trend that keeps going up, considering the state of seemingly every single social media that has existed since the 2000s- 2010s.

[hoje--aqui]

hi there, just discovered your blog, binged scrolled and consumed all your posts. <3 [ sorry, i don't want to sound weird ] I have a question if you would be so kind to answer? I saw your WIP of Dear Your Holiness, and I am wondering how are you doing your speech-text bubbles? How do you make it look like texts? Is it a software? I am trying to typeset Did you miss me? - Fantismal&Krethes, and let me tell you, that is 80% text-bubbles. And I don't think what i've got going on now is very efficient. Right now i am editing the .css and .html directly in Calibre.

hi! I'm glad you like this blog, nothing weird about it, sorry about the messy house actually and be my guest!!

I really love your ask cause text bubbles are really a pain in the ass and I love babble about my typessets. So I warn you, this answer may be a bit longer than expected. 

The short is: Existing 200k ways to do chat text on writer and more 200k to do on typessets.

Editing the .css and .html directly is my first time seeing it, but I guess it works very well too, just maybe too much time consuming. In general, the most common is pre-setting a paragraph on the software you use to design your project. Most of the softwares for writers can do this. So you can select the dialog, click a button and voilá all your dialogs will look the same and your typesset will be really beautiful really fast.

Affinity and Adobe InDesign I know better, but I know Word does this too, just don't know how. Find one to learn and have joy :)))

My personal response is more like: How do you want your project to look? 

So I think the most important thing to me here is not where to do it, or how to do it fast, but how to do exactly what we want it and what we can do to make this happen. And here lives my lack of sanity. 

It really depends on the project. I have done some fic with chats and none of them I did exactly the same way. But for my Dear Your Holiness project, I want this look of a mobile chat but without remembering any social media chat we know and I want make it fancy

So I try to emulate some things we see on these social media chats and with a bit of compulsory search I discover some things really helpful.

First of all, the typography choice

I'm a little biased here, I love typography. But it is exactly because of this that I notice that chat typography is simple. They need we read fast but without notice, so we don't have serifs, that remember us of academic texts, and the contrast are really light

I had this other typesser of Wish You Are Here by @afieryfox, and she uses Discord and Twitter to set her fic, in this case I choose the exact fonts that each platform uses to set my typesset (and setting a paragraph for each site). But in the main text I use some simple serifed font, to help the reading.

Main Text: Cambria

Discord: Whitney

Twitter/X : Helvetica Neue

The same to DYH, I chose a serif font with some fancy look to the body and a saint serif font to the text, but I chose one with some alike things to do not look too drastic.

I chose to set the main text in OldStyle because it has this vintage look., and the chats on Made infinit (this one I ask permission for personal use). They pretty similar except for the g, so i think work very well

The second was the contrast. 

We had this constant that is the color of the chats, where who sends the text is the most eye-catching bubble, and the right one. So I just set this with the pov one being our dramatic bubble. In this case, our Padfoot

And the last thing, our guides and spaces!!

We are not on a mobile, so we have pretty much space and this is a problem, because chat texts are compacts and a book… not exactly. So what i did was divide the space I had to rearrange our text so we can feel like the space was purposeful

I divide my workspace in 3, and each side of the chat could only transpose ⅔. then they has their own section and don’t steal the friend's space.

this is not extremely strict, the text can transpass the line till I feel like is acceptable. So, if the text is too long and insist on cross the guide, i can shift then and make these big balloons

Other guides I like:

the space between the start of the text end the start of the bubble

the space between bubbles

the center of the text on inside de bubble

the last bubble with the call tail (idk how call this)

So

How I did my Dear Your Holiness chat bubbles?

I did all the typesset first.

I use Adobe Indesign to do my typessets, so I set up all the text blocks, with all the typos to set my pre-sert paragraphs. All my paragraphs are pre-settings cause I like my life easy when I can have it, cause the rest of the process is really time-consuming.

So set all the pre-set paragraphs and the dialogues exactly the way I want it. Till look something like this 

So I take a simple print from the naked page and go to Adobe Illustrator, were I put the the cute little outfit (the bubble)

There I have a board setting on my page size to use the correct scale on the bubbles, I just scale the print on the board and fit the bubbles on the dialogues. 

The bubbles are actually little rectangles with rounded corners. We can easily do the call tail (still don't know how call this thing) just push one off the corners staring, but I really wanted this sexy toothpaste curve, so I make this little shape and overlapped my bubble.

To put the bubbles over the print, i set the opacity on 80% or less just to confirm the guides and the * I left to mark the ones that will be big balloons. So I correct the opacity, remove the print and save as a pdf

the pdf I put above my text, and change the color of Sirius’s chat, because we can’t read black on black and voíla, -1 page to do.

Now all we need is repeat till end all dialogues bubbles left in the fic. 

After some time this became a really mechanical thing, so listen to something in that maintime that the time flies. So yes, a pain in the ass as i said, but look how pretty they turn!!!!

yeah, I think that's it

I hope I've answered

[ne0nwithazero]

ur website is awesome where did you learn html and css!! ive been looking for months now but i cant find any starting points i can easily understand

Thank you! I kind of mostly used to do Neopets template junk in 2007 and had some extremely basic and outdated HTML knowledge until recently LOL (As in that my knowledge was basically knowing that <i> made your text italic and if I typed color="blue" it would change the color of the text haha)

But yeah, I'm basically self-taught! One of the courses I did in the past did have a few Web Design classes, but I had a really hard time understanding any of it and my grades were awful, so I hardly count that as having contributed anything to my knowledge x) (We were forced to make the most bland minimalistic corporate websites so the lack of fun in that definitely contributed hahaha)

I guess starting out really depends on what you're personally comfortable with? The way I personally started was that I used one of those Free Website Makers like Wix/Weebly/etc to try and "sketch" my website! I had this old unused !Weebly portfolio website I wasn't doing anything with, so I used that

W3Schools is the MVP for this stuff since it has basically everything you can learn about HTML/CSS/etc! For my Website I remember first starting by trying to create the navbar, looking at the Weebly mockup and trying to mentally deconstruct it all into boxes to try and understand how I could recreate it with my own code!

(The reason my navbar looks so different from the screenshot was because I had a really hard time recreating it xD And I ended up with something a lot more basic to match my skillset!)

Something that always worked for me was using templates and just trial and error my way into trying to understand what did what x)

Considering my website has the three-column format, I do recall using SadGrl's Layout Maker code as a reference for my own!

And I guess that's advice I can give?? Finding websites you like, or if you're wondering how someone did something, how their font has weird colours, what animations they're using, etc etc, just go look into their source code, or use the Inspect Tool (F12) and select elements to try and understand the code!

I do sometimes hide goofy hidden text and easter eggs in my source codes, so I'm personally cool with people looking through mine to understand how I did things :)

I definitely relate to this all being overwhelming or confusing at the start, so I'd say just take it slow and make things fun for yourself! I used weird fonts and bright colours when trying to see what does what, use dumb placeholder texts and images too LMAO

Another thing that helped was that I found gifs and images I liked to place on the website and try to make it feel all the more personal and cozy!

Again this is just my personal experience and what I did to make the learning experience more enjoyable :)

[skinsort]

Hello, I've been thinking about code and selling code and sharing code in the rpc because someone posed the question to me of what I'd want to happen if someone was heavily editing a skin I sold, and to be honest, my first instinct was 'take my name off it'. That was met with some surprise, but let me explain why.

Code, to me, is a largely democratic landscape. If you want to learn, hundreds of thousands of people and websites have come together to teach you. Masses of people share open source work on codepen, stack overflow etc. Code as a skill is like assembling an especially abstract puzzle where you can only think about the pieces, not really see them. But most puzzles have similar strategies to solve- start with the corner pieces, then the edges, then the most recognizable patterns etc etc etc working your way down to the more and more difficult details. Most of code- most of my job writing code- involves minimizing the amount of time working on those shared strategies so we can have more time to work on the the interesting bits, the hard bits. the bits that make the site we're working on unique and useful. Frankly, jcink is the easy part of code, by and large. Your data is already structured and provided to you in a very particular way. It is inefficiently, but largely documented. Many other people have solved all the problems you are likely to have trying to build a skin. Skinning is html and css for the vast majority of items. It is the easy stuff. If I sell code, that code is now the property of the person I sold it to. It is not shareable or redistributable. You can't take my code and resell it as your own, but as far as I'm concerned you can do whatever you want with it. If I solved problems that might otherwise feel difficult (accessibility and responsiveness come to mind) cool. You can solve the easy ones, like styling and colors and fonts you like. You can add or subtract things that vibe with what you want that code to do. Once it is sold, it is yours to do with what you like when it comes to personal use. This is true of almost all coding contracts that exist in the entire world. If it weren't, no one would ever hire external contractors to do any work for their company, and I can tell you now, even companies which could fully afford to do all their tech in house absolutely do not in 99% of cases if their business isn't selling their own tech. The rule is generally- you may do anything you like with this, except resell it to someone else. So why take my name off it? I don't endorse how other people code. Even in my professional life, I've taken projects off my portfolio because the client took a project I worked on and broke it (imo), often with other professional developers doing the breaking. If a prospective employer were to go look at it, I'd be embarrassed by what it looks like today. Tell me why I (and my team) created a website that was fully responsive, and they went back to make it adaptive in the year of our lord 2022 because they preferred to have pixel perfect views at 3 specific breakpoints rather than a responsive site. I don't know, it's infuriating. I can't cite that project as an example of my work anymore, because it isn't. I would never leave a site in that state.

So, my first instinct with the idea of people using a skin i sell them as a base is 'take my name off it.' I don't want to be associated if responsive/accessible features are lost due to others working on a skin I wrote. But at the same time, where is the line between using something as a base, and editing a few small features? I certainly don't want to be an arbiter of that, or have to field questions or navigate feelings about it. In fact, personally I would not feel upset at all if someone used a paid for skin as a base, and inviting that kind of discussion is the only way I possibly could get upset since people have weird attitudes about a lot of this stuff. So I think the more practical standard is just to put credit, but make it explicit that the work has been heavily altered. Don't resell or redistribute, and you're golden, imo. Anyway, those are my feelings as someone who writes code for a living. I'm interested to hear counterpoints - constructively of course.

[jcmarchi]

Styling Counters in CSS

New Post has been published on https://thedigitalinsider.com/styling-counters-in-css/

Styling Counters in CSS

Yes, you are reading that correctly: This is indeed a guide to styling counters with CSS. Some of you are cheering, “Finally!”, but I understand that the vast majority of you are thinking, “Um, it’s just styling lists.” If you are part of the second group, I get it. Before learning and writing more and more about counters, I thought the same thing. Now I am part of the first group, and by the end of this guide, I hope you join me there.

There are many ways to create and style counters, which is why I wanted to write this guide and also how I plan to organize it: going from the most basic styling to the top-notch level of customization, sprinkling in between some sections about spacing and accessibility. It isn’t necessary to read the guide in order — each section should stand by itself, so feel free to jump to any part and start reading.

Customizing Counters in HTML

Lists elements were among the first 18 tags that made up HTML. Their representation wasn’t defined yet but deemed fitting a bulleted list for unordered lists, and a sequence of numbered paragraphs for an ordered list.

Cool but not enough; soon people needed more from HTML alone and new list attributes were added throughout the years to fill in the gaps.

start

The start attribute takes an integer and sets from where the list should start:

<ol start="2"> <li>Bread</li> <li>Milk</li> <li>Butter</li> <li>Apples</li> </ol>

Bread

Milk

Butter

Apples

Although, it isn’t limited to positive values; zero and negative integers are allowed as well:

<ol start="0"> <li>Bread</li> <li>Milk</li> <li>Butter</li> <li>Apples</li> </ol> <ol start="-2"> <li>Bread</li> <li>Milk</li> <li>Butter</li> <li>Apples</li> </ol>

Bread

Milk

Butter

Apples

Bread

Milk

Butter

Apples

type

We can use the type attribute to change the counter’s representation. It’s similar to CSS’s list-style-type, but it has its own limited uses and shouldn’t be used interchangeably*. Its possible values are:

1 for decimal numbers (default)

a for lowercase alphabetic

A for uppercase alphabetic

i for lowercase Roman numbers

I for uppercase Roman numbers

<ol type="a"> <li>Bread</li> <li>Milk</li> <li>Butter</li> <li>Apples</li> </ol> <ol type="i"> <li>Bread</li> <li>Milk</li> <li>Butter</li> <li>Apples</li> </ol>

Bread

Milk

Butter

Apples

Bread

Milk

Butter

Apples

It’s weird enough to use type on ol elements, but it still has some use cases*. However, usage with the ul element is downright deprecated.

value

The value attribute sets the value for a specific li element. This also affects the values of the li elements after it.

<ol> <li>Bread</li> <li value="4">Milk</li> <li>Butter</li> <li>Apples</li> </ol>

Bread

Milk

Butter

Apples

reversed

The reversed attribute will start counting elements in reverse order, so from highest to lowest.

<ol reversed> <li>Bread</li> <li>Milk</li> <li>Butter</li> <li>Apples</li> </ol>

Bread

Milk

Butter

Apples

All can be combined

If you ever feel the need, all list attributes can be combined in one (ordered) list.

<ol reversed start="2" type="i"> <li>Bread</li> <li value="4">Milk</li> <li>Butter</li> <li>Apples</li> </ol>

Bread

Milk

Butter

Apples

* Do we need them if we now have CSS?

Funny enough, the first CSS specification already included list-style-type and other properties to style lists, and it was released before HTML 3.2 — the first HTML spec that included some of the previous list attributes. This means that at least on paper, we had CSS list styling before HTML list attributes, so the answer isn’t as simple as “they were there before CSS.”

Without CSS, a static page (such as this guide) won’t be pretty, but at the very least, it should be readable. For example, the type attribute ensures that styled ordered lists won’t lose their meaning if CSS is missing, which is especially useful in legal or technical documents. Some attributes wouldn’t have a CSS equivalent until years later, including reversed, start and value.

Styling Simple Counters in CSS

For most use cases, styling lists in CSS doesn’t take more than a couple of rules, but even in that brevity, we can find different ways to style the same list.

::marker or ::before?

The ::marker pseudo-element represents the counter part of a list item. As a pseudo-element, we can set its content property to any string to change its counter representation:

li::marker content: "💜 ";

Bread

Milk

Butter

Apples

The content in pseudo-elements also accepts images, which allows us to create custom markers:

li::marker content: url("./logo.svg") " ";

bread

milk

butter

apples

By default, only li elements have a ::marker but we can give it to any element by setting its display property to list-item:

h4 display: list-item; h4::marker content: "◦ ";

This will give each h4 a ::marker which we can change to any string:

List Title

However, ::marker is an odd case: it was described in the CSS spec more than 20 years ago, but only gained somewhat reliable support in 2020 and still isn’t fully supported in Safari. What’s worst, only font-related properties (such as font-size or color) are allowed, so we can’t change its margin or background-color.

This has led many to use ::before instead of ::marker, so you’ll see a lot of CSS in which the author got rid of the ::marker using list-style-type: none and used ::before instead:

li /* removes ::marker */ list-style-type: none; li::before /* mimics ::marker */ content: "▸ ";

list-style-type

The list-style-type property can be used to replace the ::marker‘s string. Unlike ::marker, list-style-type has been around forever and is most people’s go-to option for styling lists. It can take a lot of different counter styles that are built-in in browsers, but you will probably use one of the following:

For unordered lists:

disc

circle

square

ul list-style-type: square; ul list-style-type: circle;

bread

milk

butter

apples

For ordered lists:

decimal

decimal-leading-zero

lower-roman

upper-roman

lower-alpha

upper-alpha

ol list-style-type: upper-roman; ol list-style-type: lower-alpha;

bread

milk

butter

apples

You can find a full list of valid counter styles here.

It can also take none to remove the marker altogether, and since not long ago, it can also take a <string> for ul elements.

ul list-style-type: none; ul list-style-type: "➡️ ";

Creating Custom Counters

For a long time, there wasn’t a CSS-equivalent to the HTML reverse, start or value attributes. So if we wanted to reverse or change the start of multiple lists, instead of a CSS class to rule them all, we had to change their HTML one by one. You can imagine how repetitive that would get.

Besides, list attributes simply had their limitations: we can’t change how they increment with each item and there isn’t an easy way to attach a prefix or suffix to the counter. And maybe the biggest reason of all is that there wasn’t a way to number things that weren’t lists!

Custom counters let us number any collection of elements with a whole new level of customization. The workflow is to:

Initiate the counter with the counter-reset property.

Increment the counter with the counter-increment property.

Individually set the counters with the counter-set property.

Output the counters with either the counter() and counters() functions.

As I mentioned, we can make a list out of any collection of elements, and while this has its accessibility concerns, just for demonstration’s sake, let’s try to turn a collection of headings like this…

<div class="index"> <h2>The Old Buccaneer</h2> <h2>The Sea Cook</h2> <h2>My Shore Adventure</h2> <h2>The Log Cabin</h2> <h2>My Sea Adventure</h2> <h2>Captain Silver</h2> </div>

…into something that looks list-like. But just because we can make an element look like a list doesn’t always mean we should do it. Be sure to consider how the list will be announced by assistive technologies, like screen readers, and see the Accessibility section for more information.

Initiate counters: counter-reset

The counter-reset property takes two things: the name of the counter as a custom ident and the initial count as an integer. If the initial count isn’t given, then it will start at 0 by default:

.index counter-reset: index; /* The same as */ counter-reset: index 0;

You can initiate several counters at once with a space-separated list and set a specific value for each one:

.index counter-reset: index another-counter 2;

This will start our index counter at 0 (the default) and another-counter at 2.

Set counters: counter-set

The counter-set works similar to counter-reset: it takes the counter’s name followed by an integer, but this time it will set the count for that element onwards. If the integer is omitted, it will set the counter to 0 by default.

h2:nth-child(2) counter-set: index; /* same as */ counter-set: index 0;

And we can set several counters at once, as well:

h2:nth-child(3) counter-set: index 5 another-counter 10;

This will set the third h2 element’s index count to 5 and another-counter to 10.

If there isn’t an active counter with that name, counter-set will initiate it at 0.

Increment counters: counter-increment

Right now, we have our counter, but it will stagnate at 0 since we haven’t set which elements should increment it. We can use the counter-increment property for that, which takes the name of the counter and how much it should be incremented by. If we only write the counter’s name, it will increment it by 1.

In this case, we want each h2 title to increment the counter by one, and that should be as easy as setting counter-increment to the counter’s name:

h2 counter-increment: index; /* same as */ counter-increment: index 1;

Just like with counter-reset, we can increment several counters at once in a space-separated list:

h2 counter-increment: index another-counter 2;

This will increment index by one and another-counter by two on each h2 element.

If there isn’t an active counter with that name, counter-increment will initiate it at 0.

Output simple lists: counter()

So far, we won’t see any change in the counter representation. The counters are counting but not showing, so to output the counter’s result we use the counter() and counters() functions. Yes, those are two functions with similar names but important differences.

The counter() function takes the name of a counter and outputs its content as a string. If many active counters have the same name, it will select the one that is defined closest to the element, so we can only output one counter at a time.

As mentioned earlier, we can set an element’s display to list-item to work with its ::marker pseudo-element:

h2 display: list-item;

Then, we can use counter() in its content property to output the current count. This allows us to prefix and suffix the counter by writing a string before or after the counter() function:

h2::marker content: "Part " counter(index) ": ";

Alternatively, we can use the everyday ::before pseudo-element to the same effect:

h2::before content: "Part " counter(index) ": ";

Output nested lists: counters()

counter() works great for most situations, but what if we wanted to do a nested list like this:

1. Paradise Beaches 1.1. Hawaiian Islands 1.2. Caribbean Getaway 1.2.1. Aruba 1.2.2. Barbados 2. Outdoor Escapades 2.1 National Park Hike 2.2. Mountain Skiing Trip

We would need to initiate individual counters and write different counter() functions for each level of nesting, and that’s only possible if we know how deep the nesting goes, which we simply don’t at times.

In this case, we use the counters() function, which also takes the name of a counter as an argument but instead of just outputting its content, it will join all active counters with that name into a single string and output it. To do so, it takes a string as a second argument, usually something like a dot (".") or dash ("-") that will be used between counters to join them.

We can use counter-reset and counter-increment to initiate a counter for each ol element, while each li will increment its closest counter by 1:

ol counter-reset: item; li counter-increment: item;

But this time, instead of using counter() (which would only display one counter per item), we will use counters() to join all active counters by a string (e.g. ".“) and output them at once:

li::marker content: counters(item, ".") ". ";

Styling Counters

Both the counter() and counters() functions accept one additional, yet optional, last argument representing the counter style, the same ones we use in the list-style-type property. So in our last two examples, we could change the counter styles to Roman numbers and alphabetic letters, respectively:

h2::marker content: "Part " counter(index, upper-roman) ": ";

li::marker content: counters(item, ".", lower-alpha) ". ";

Reverse Counters

It’s possible to count backward using custom counters, but we need to know beforehand the number of elements we’ll count. So for example, if we want to make a Top Five list in reversed order:

<h1>Best rated animation movies</h1> <ol> <li>Toy Story 2</li> <li>Toy Story 1</li> <li>Finding Nemo</li> <li>How to Train your Dragon</li> <li>Inside Out</li> </ol>

We have to initiate our counter at the total number of elements plus one (so it doesn’t end at 0):

ol counter-reset: movies 6;

And then set the increment to a negative integer:

li counter-increment: movies -1;

To output the count we use counter() as we did before:

li::marker content: counter(movies) ". ";

There is also a way to write reversed counters supported in Firefox, but it hasn’t shipped to any other browser. Using the reversed() functional notation, we can wrap the counter name while initiating it to say it should be reversed.

ol counter-reset: reversed(movies); li counter-increment: movies; li::marker content: counter(movies) " .";

Styling Custom Counters

The last section was all about custom counters: we changed from where they started and how they increased, but at the end of the day, their output was styled in one of the browser’s built-in counter styles, usually decimal. Now using @counter-style, we’ll build our own counter styles to style any list.

The @counter-style at-rule, as its name implies, lets you create custom counter styles. After writing the at-rule it takes a custom ident as a name:

@counter-style my-counter-style /* etc. */

That name can be used inside the properties and functions that take a counter style, such as list-style-type or the last argument in counter() and counters():

ul list-style-type: my-counter-style; li::marker content: counter(my-counter, my-counter-style) ". ";

What do we write inside @counter-style? Descriptors! How many descriptors? Honestly, a lot. Just look at this quick review of all of them:

system: specifies which algorithm will be used to construct the counter’s string representation. (Obligatory)

negative: specifies the counter representation if the counter value is negative. (Optional)

prefix: specifies a character that will be attached before the marker representation and any negative sign. (Optional)

suffix: specifies a character that will be attached after the marker representation and any negative sign. (Optional)

range: specifies the range in which the custom counter is used. Counter values outside the range will drop to their fallback counter style. (Optional)

pad: specifies a minimum width all representations have to reach. Representations shorter than the minimum are padded with a character. (Optional)

fallback: specifies a fallback counter used whenever a counter style can’t represent a counter value. (Optional)

symbols: specifies the symbols used by the construction system algorithm. It’s obligatory unless the system is set to additive or extends.

additive-symbols: specifies the symbols used by the construction algorithm when the system descriptor is set to additive.

speak-as: specifies how screen readers should read the counter style. (Optional)

However, I’ll focus on the required descriptors first: system, symbols and additive-symbols.

The system descriptor

The symbols or additive-symbols descriptors define the characters used for the counter style, while system says how to use them.

The valid system values are:

cyclic

alphabetic

symbolic

additive

fixed

extends

cyclic will go through the characters set on symbols and repeat them. We can use just one character in the symbols to mimic a bullet list:

@counter-style cyclic-example system: cyclic; symbols: "⏵"; suffix: " ";

bread

butter

milk

apples

Or alternate between two or more characters:

@counter-style cyclic-example system: cyclic; symbols: "🔸" "🔹"; suffix: " ";

fixed will write the characters in symbols descriptor just one time. In the last example, only the first two items will have a custom counter if set to fixed, while the others will drop to their fallback, which is decimal by default.

@counter-style multiple-example system: fixed; symbols: "🔸" "🔹"; suffix: " ";

We can set when the custom counters start by appending an <integer> to the fixed value. For example, the following custom counter will start at the fourth item:

@counter-style fixed-example system: fixed 4; symbols: "💠"; suffix: " ";

numeric will numerate list items using a custom positional system (base-2, base-8, base-16, etc.). Positional systems start at 0, so the first character at symbols will be used as 0, the next as 1, and so on. Knowing this, we can make an ordered list using non-decimal numerical systems like hexadecimal:

@counter-style numeric-example system: numeric; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "A" "B" "C" "D" "E" "F"; suffix: ". ";

bread

butter

milk

apples

alphabetic will enumerate the list items using a custom alphabetical system. It’s similar to the numeric system but with the key difference that it doesn’t have a character for 0, so the next digits are just repeated. For example, if our symbols are "A" "B" "C" they will wrap to "AA", "AB", "AC", then BA, BB, BC and so on.

Since there is no equivalent for 0 and negative values, they will drop down to their fallback.

@counter-style alphabetic-example system: alphabetic; symbols: "A" "B" "C"; suffix: ". ";

bread

butter

milk

apples

cinnamon

symbolic will go through the characters in symbols repeating them one more time each iteration. So for example, if our symbols are "A", "B", "C", it will go “A”, “B”, and “C”, double them in the next iteration as “AA”, “BB”, and “CC”, then triple them as “AAA”, “BBB”, “CCC” and so on.

Since there is no equivalent for 0 and negative values, they will drop down to their fallback.

@counter-style symbolic-example system: symbolic; symbols: "A" "B" "C"; suffix: ". ";

bread

butter

milk

apples

cinnamon

additive will give characters a numerical value and add them together to get the counter representation. You can think of it as the way we usually count bills: if we have only $5, $2, and $1 bills, we will add them together to get the desired quantity, trying to keep the number of bills used at a minimum. So to represent 10, we will use two $5 bills instead of ten $1 bills.

Since there is no equivalent for negative values, they will drop down to their fallback.

@counter-style additive -example system: additive; additive-symbols: 5 "5️⃣", 2 "2️⃣", 1 "1️⃣"; suffix: " ";

Notice how we use additive-symbols when the system is additive, while we use just symbols for the previous systems.

extends will create a custom style from another one but with modifications. To do so, it takes a <counter-style-name> after the extends value. For example, we could change the decimal counter style default’s suffix to a closing parenthesis (")")`:

@counter-style extends-example system: extends decimal; suffix: ") ";

bread

butter

milk

cinnamon

Per spec, “If a @counter-style uses the extends system, it must not contain a symbols or additive-symbols descriptor, or else the @counter-style rule is invalid.”

The other descriptors

The negative descriptor allows us to create a custom representation for a list’s negative values. It can take one or two characters: The first one is prepended to the counter, and by default it’s the hyphen-minus ("-"). The second one is appended to the symbol. For example, we could enclose negative representations into parenthesis (2), (1), 0, 1, 2:

@counter-style negative-example system: extends decimal; negative: "(" ")";

bread

butter

milk

apples

The prefix and suffix descriptors allow us to prepend and append, respectively, a character to the counter representation. We can use it to add a character at the beginning of each counter using prefix:

@counter-style prefix-suffix-example system: extends decimal; prefix: "("; suffix: ") ";

bread

butter

milk

apples

The range descriptor defines an inclusive range in which the counter style is used. We can define a bounded range by writing one <integer> next to another. For example, a range of 2 4 will affect elements 2, 3, and 4:

@counter-style range-example system: cyclic; symbols: "‣"; suffix: " "; range: 2 4;

bread

butter

milk

apples

cinnamon

On the other hand, using the infinite value we can unbound the range to one side. For example, we could write infinite 3 so all items up to 3 have a counter style:

@counter-style range-example system: alphabetic; symbols: "A" "B" "C"; suffix: ". "; range: infinite 3;

bread

butter

milk

apples

cinnamon

The pad descriptor takes an <integer> that represents the minimum width for the counter and a character to pad it. For example, a zero-padded counter style would look like the following:

@counter-style pad-example system: extends decimal; pad: 3 "0";

bread

butter

milk

apples

The fallback descriptor allows you to define which counter style should be used as a fallback whenever we can’t represent a specific count. For example, the following counter style is fixed and will fallback to lower-roman after the sixth item:

@counter-style fallback-example system: fixed; symbols: "⚀" "⚁" "⚂" "⚃"; fallback: lower-roman;

bread

butter

milk

apples

cinnamon

Lastly, the speak-as descriptor hints to speech readers on how the counter style should be read. It can be:

auto Uses the system default.

bullets reads an unordered list. By default, cyclic systems are read as bullets

numbers reads the counter’s numeric value in the content language. By default, additive, fixed, numeric, and, symbolic are read as numbers.

words reads the counter representation as words.

spell-out reads the counter representation letter by letter. By default, alphabetic is read as spell-out.

<counter-style-name> It will use that counter’s speak-as value.

@counter-style speak-as-example system: extends decimal; prefix: "Item "; suffix: " is "; speak-as: words;

symbols()

The symbols() function defines an only-use counter style without the need to do a whole @counter-style, but at the cost of missing some features. It can be used inside the list-style-type property and the counter() and counters() functions.

ol list-style-type: symbols(cyclic "🥬");

However, its browser support is appalling since it’s only supported in Firefox.

Images in Counters

In theory, there are four ways to add images to lists:

list-style-image property

content property

symbols descriptor in @counter-style

symbols() function.

In practice, the only supported ways are using list-style-image and content, since support for images in @counter-style and support in general for symbols() isn’t the best (it’s pretty bad).

list-style-image

The list-style-image can take an image or a gradient. In this case, we want to focus on images but gradients can also be used to create custom square bullets:

li list-style-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

bread

butter

milk

apples

Sadly, changing the shape would require styling more the ::marker and this isn’t currently possible.

To use an image, we pass its url(), make sure is small enough to work as a counter:

li list-style-image: url("./logo.svg");

bread

milk

butter

apples

content

The content property works similar to list-style-image: we pass the image’s url() and provide a little padding on the left as an empty string:

li::marker content: url("./logo.svg") " ";

Spacing Things Out

You may notice in the last part how the image — depending on its size — isn’t completely centered on the text, and also that we provide an empty string on content properties for spacing instead of giving things either a padding or margin. Well, there’s an explanation for all of this, as since spacing is one of the biggest pain points when it comes to styling lists.

Margins and paddings are wacky

Spacing the ::marker from the list item should be as easy as increasing the marker’s or list margin, but in reality, it takes a lot more work.

First, the padding and margin properties aren’t allowed in ::marker. While lists have two types of elements: the list wrapper (usually ol or ul) and the list item (li), each with a default padding and margin. Which should we use?

You can test each property in this demo by Šime Vidas in his article dedicated to the gap after the list marker:

You’ll notice how the only property that affects the spacing within ::marker and the text is the li item’s padding property, while the rest of the spacing properties will move the entire list item. Another thing to note is even when the padding is set to 0px, there is a space after the ::marker. This is set by browsers and will vary depending on which browser you’re using.

list-style-position

One last thing you may notice in the demo is a checkbox for the list-style-position property, and how once you set it to inside, the ::marker will move to the inside of the box, at the cost of removing any spacing given by the list item’s padding.

By default, markers are rendered outside the ul element’s box. A lot of times, this isn’t the best behavior: markers sneak out of elements, text-align won’t align the marker, and paradoxically, centered lists with flex or grid won’t look completely centered since the markers are outside the box.

To change this we can use the list-style-position property, it can be either outside (default) and inside to define where to position the list marker: either outside or the outside of the ul box.

ul border: solid 2px red; .inside list-style-position: inside; .outside list-style-position: outside;

bread

butter

milk

apple

content with empty strings

In the same article, Šime says:

Appending a space to content feels more like a workaround than the optimal solution.

And I completely agree that’s true, but just using ::marker there isn’t a correct way to add spacing between the ::marker and the list text, especially since most people prefer to set list-style-position to inside. So, as much as it pains me to say it, the simplest way to increase the gap after the marker is to suffix the content property with an empty string:

li::marker content: "• ";

bread

milk

butter

apples

BUT! This is only if we want to be purists and stick with the ::marker pseudo-element because, in reality, there is a much better way to position that marker: not using it at all.

Just use ::before

There is a reason people love using the ::before more than ::marker. First, we can’t use something like CSS Grid or Flexbox since changing the display of li to something other than list-item will remove the ::marker, and we can set the ::marker‘s height or width properties to better align it.

Let’s be real, ::marker works fine when we just want simple styling. But we are not here for simple styling! Once we want something more involved, ::marker will fall short and we’ll have to use the ::before pseudo-element.

Using ::before means we can use Flexbox, which allows for two things we couldn’t do before:

Vertically center the marker with the text

Easily increase the gap after the marker

Both can be achieved with Flexbox:

li display: flex; align-items: center; /* Vertically center the marker */ gap: 20px; /* Increases the gap */ list-style-type: none;

The original ::marker is removed by changing the display.

Accesibility

In a previous section we turned things that weren’t lists into seemingly looking lists, so the question arises: should we actually do that? Doesn’t it hurt accessibility to make something look like a list when it isn’t one? As always, it depends. For a visual user, all the examples in this entry look all right, but for assistive technology users, some examples lack the necessary markup for accessible navigation.

Take for example our initial demo. Here, listing titles serves as decoration since the markup structure is given by the titles themselves. It’s the same deal for the counting siblings demo from earlier, as assistive technology users can read the document through the title structure.

However, this is the exception rather than the norm. That means a couple of the examples we looked at would fail if we need the list to be announced as a list in assistive technology, like screen readers. For example this list we looked at earlier:

<div class="index"> <h2>The Old Buccaneer</h2> <h2>The Sea Cook</h2> <h2>My Shore Adventure</h2> <h2>The Log Cabin</h2> <h2>My Sea Adventure</h2> <h2>Captain Silver</h2> </div>

…should be written as a list instead:

<ul class="index"> <li>The Old Buccaneer</li> <li>The Sea Cook</li> <li>My Shore Adventure</li> <li>The Log Cabin</li> <li>My Sea Adventure</li> <li>Captain Silver</li> </ul>

Listing elements is rarely used just as decoration, so as a rule of thumb, use lists in the markup even if you are planning to change them with CSS.

Almanac References

List Properties

Counters

Custom Counter Styles

Pseudo-Elements

More Tutorials & Tricks!

[ratzzey]

🔥IN THIS BLOG WE HATE EVERYBODY & EVERYTHING 🔥

... But respectfully! 🐀

🔥 • ° • ° • ° • 🔥

Hey, Ya probably don't know me — want to know some more?

🔥 • ° • ° • ° • 🔥

Hi, I'm Rattzy. Alternatively Ratzz/-ttz, Rattzey/-zzey, Rattiz or Driftin' Motorist (as that's my main blog).

Paradoxically I'm generally nice and often like to be the devil's advocate, so am kinda... more tolerant? Ofc not for everyone exactly — there's still a large number of ethically (or mentally in a metaphorical way) depraved people which I just CAN'T understand.

Philosophy sometimes just robs me from other thoughts, but it's in some way entertaining for me; also sorry if you see some mistakes in my spelling(writing?), english language isn't my best skill.

🔥 • ° • ° • ° • 🔥

My main goal for this blog: to keep it not only as the network of me and outer world but also as my demanding way to socialize. And to talk somewhere else than my brain.

Oh and a little simple DNI: if you came here to throwin' up with discriminatory bullshit towards anyone then get the [d]uck out of here. This is a safe bunker and you are not invited in.

WARNING: This user is not responsible for any damages caused to anybody's physical or psychical being. Reader discretion is advised. But of course specific contents will be under separator button.

(lower section is gonna be moved to somewhere else)

... Oh, ya want even more? Curiosity consumes you whole? Ok then:

🔥-> Five Nights at Freddy's fan (litterally have just made the whole main account about it 🗿; don't mind me);

🔥-> interested in internet privacy (tf am I doing here), darknet, Linux, bushcraft, programming, psychology and ham radio;

🔥-> likes rats 🐀;

🔥-> likes various aesthetics (warning - it's gonna be a huge-ass list):

apocalyptic theme's spectrum (such as soft-apo or just post-apo & Stalker),

diesel-/steampunk,

forestpunk,

internetcore 'n' hacker, generally old web and Frutiger Aero,

liminal, dream-/weird-/nostalgiacore,

plaguecore,

techwear, tacticool and cargopunk [Aesthetics Wiki archived ver.] (yea I know it started as a joke and practically doesn't exists but man hear me out- 🥲),

🔥-> music: dream-/weirdcore themed, phonk (except brasilian), some kind of trap (hehe hry223, ok i'll shut up) music and some folk songs;

🔥-> reads poems sometimes;

🔥-> wants to be a radio amateur;

🔥-> writes things in HTML /w CSS (gonna learn XHTML);

Ah- I had a dilemma 'bout adding this but if someone would want to see something even more personal: pronouns.page.

Last updated: 03/09/25

[cascading-sys]

intro to the cascading system blog

hello world, it's nice to be here. we're a diagnosed did system from hong kong currently studying in the us with a history phd programme. we got our baccalaureate in australia and have lived in four countries. we speak english and canto, and we're trying to learn spanish. our system name comes from css because we studied computer science in uni for undergrad.

🐝 bee

hi! i'm the host of this system. i use she/they pronouns and i've been around the longest. i'm trying to make this blog a nice and safe place for all my headmates to express themselves. please be niceys :3

🐴 cassie

My name is Cassie (used to spell it CaSSie) or Cassandra and I'm an introject of the CSS coding language (weird, I know)! I'm she/her. I used to be a main fronter and I guess I still am, but it's weird because we don't have much coding to do anymore ¯\_(ツ)_/¯ I guess the system is named after me bc I'm the reason we realised we're plural but it was a consensus. I think it would be funny if we got an HTML introject, we could name him Hamilton or something XSWL

❤️‍🔥 austin

hey, I'm austin and I'm our caretaker, any pronouns, I don't really care, I really like going to the zoo and seeing pandas, I don't front a lot so don't expect to hear from me here much

💚 pidge

Hey there, it's pidge. They/them please :)

💎 kai

Hiii 🤠 i started out as an introject but I'm kind of over it but i do write fic about it sometimes because my lore is canon-divergent 😅 I also used to be a persecutor but I'm recovering from that haha.

🌹 Rose

hi im rose and i like to sort things, it's comforting and helps us get calm when we need to

🔭 Ciel

I'm not really going to use this blog but thanks for making it

[g-hua]

I don't remember where I saw someone yelling at people for having carrd.co pages, but hear me out:

No:

Putting personal information on your carrd;

Putting things that can be used against you in your carrd if you are going to have your carrd linked in unsafe places (I'm looking at you twitter);

Putting things like your face on your carrd if you're a minor and/or don't have photos of yourself anywhere else.

Yes:

Using you carrd like a mini personal website;

Getting creative with your carrd layout now that social media has 0 costumization options and is all boring and sterile looking;

Sharing your interests in your carrd so that it is easier to find like-minded people to befriend;

I think some of us are looking at carrds like someone having some weird sense of unwarranted self-importance. We are looking at it completely wrong. Carrd (and similar websites) are basically the only even vaguely popular pseudo social media we have left besides tumblr, where we can personalise our space. Everything else is under the control of the company that owns the social media we are using. We're lucky if we can pick the accent colours.

We're not given spaces to describe ourselves as people anymore. The "About Me" sections back when I was a teenager used to have insane character limits so that we could express ourselves however we wanted. We could put whatever we wanted there. We chose what was put there and in what order. We had entire playlists filled with our favourite songs that people could listen to shoved in there! That's actually how I discovered JRock! Costumization like this was how and why I learned HTML, CSS, and expanded my knowledge on graphic design!

Now? There's a box for everything. Your age, your gender, your pronouns, your location. Sometimes, we're forced to share information we don't want to share. I deleted Facebook over a decade ago when they started forcing users to use their real name on their accounts. Both first and last. I never put my full real name online, and I wasn't going to let some dull little social network to force me into doing so.

The more I hear about the decentralised Internet as a way to make social media personal and actually social again, the more I support it. Personal websites, giving people the freedom to decorate their online space however they want and express whatever they want about themselves without being stuck to a dropbox of options, Little circles of websites who share similar interests and ideas, personal blogs where people can talk about whatever they want, the end of popularity contests with likes, follows, views and whatever other dull statistics that have become so important to us as human beings that they have a monetary value to companies looking to sell us useless crap. All this makes me want this aspect of the decentralised Internet to become a reality more and more.

So make your carrd or similar. Share your interests and passions. Decorate it with the things you love and the things that make you happy. Be unapologetically you. The Internet is too boring, and these dull beige mom social medias need to go. As long as you're staying safe when it comes to personal information or where you share it if you have things there that can be used to harm you like you triggers, you're good!

And to the person that complained about carrds and said they'd never read anyone's carrd, wherever it was I saw that: That's honestly your loss buddy. You're missing out on seeing people's creativity and possibly making new friends who love the same things you do.

[m0r1bund]

"Lore, where have you been?"

In hell, probably. I remade M0R1BUND.com.

“For the love of god, why?”

Short answer: to save time and money.

Long answer: Sharing art was getting burdensome. Neocities hosts static websites built with html, css, and javascript—which is awesome for its mission, to encourage people to create future-proof websites. But this also means that every page is created and maintained by hand. I handle every little link and file and bit of code, and if I want to do site-wide changes, I have to push those by hand, too. This takes time, and so does writing image descriptions and cross-posting art to other websites. It became normal for sharing art to eat up an entire day.

I later created Basedt.net in WordPress, so that I didn’t have to worry about managing link hierarchies, which was a big timewaster on my old webcomic. I liked working in WordPress well enough, and I knew I would benefit from being able to use PHP to manage the sheer amount of stuff that’s on M0R1BUND.com. I was also paying double for webhosting through two different services, when I really didn’t need to…. So… I knew it was inevitable that I would consolidate the two at some point. It was time.

I do really love Neocities and I’m sorry to let it go. I encourage anyone who wants to learn web design and create their own website to start there.

Anyway, that’s how I ended up in hell for 6 months.

“What’s changed?”

Most things. I’m most excited about the quality-of-life stuff, like being able to sort art by character/location/world, or being able to move between individual pieces instead of having to return to the gallery landing page. There are lots of things I want to add, but my soft deadline for this was the new year, so I focused on recreating M0R1BUND.com as it existed before… well… this.

I’ve also edited most of my writing. This site is old, and the art is even older, it felt good to give it some TLC.

There are still a few things missing from the new site:

The Woods and RANSOM. They aren’t really representative of Basedt or Mercasor anymore, and I was not a competent writer in 2018. If I re-share them, it will be in the distant future.  

Some of my Those Who Went Missing stuff. I haven’t been playing TWWM publicly, so this is lower priority right now. It will happen when it happens.  

Some twines. They haven’t adjusted to the new filepath format yet. Killswitch is here, though :)

If you need them urgently for some reason, I can share them with you? but that seems doubtful haha.

Links to pages on the old M0R1BUND.com are broken and will remain broken until I set up redirections to the new M0R1BUND.com. I have no idea how long that will take! … Hopefully not long, given the new semester is here.

And of course... If you see anything weird, tell me! I test as much as I can, but I only have access to so many devices. Break this website within an inch of its miserable life so that I can fix it.

“How’s Basedt going?”

It’s going. Recreating my website took precedence for the above reasons, but I’ve been working concurrently on it in my spare time. We move like a glacier into the new year. ETA: ???

[maddiviner]

I joined Tumblr in 2014. I'd browsed 4chan for a few years (no joke). That does a number on the human brain (more so even than Tumblr could ever). Don't mistake, though - this wasn't /pol/, or /b/ even, this was the occult-y, ghost-y, creepypasta side of things.

Beyond just scrolling /x/ (paranormal board), I mostly hung out with channers who'd formed spinoff occult groups, chats, etc. This started around 2009-ish.

Some of the people were really awesome and are still in my life to this day, in major ways, of course. Some others ran demigod-kin Skype cults predicting the apocalypse, but anyways.

By 2014, I was watching some of those occult cliques disintegrate in a rapid, dramatic fashion. Some people were diving headfirst into the alt right because 4chan, whereas others were realizing that mindset would probably kill them, and backing out slowly.

Ended up looking for a new place to be. I already spent some time lurking a few Tumblr blogs (mostly related to food, painting/journaling, and knitting/crochet/yarn).

I remember learning to do the candied glitter grapes thing from Tumblr right after creating my (main) blog. I also made lemonade with lavender and club soda (IIRC), and ultimately a lot of different everyday recipes, too.

Sweets aside, I just wanted a little online place where everyone wasn't accusing each other of incel curses or threatening each other over interpretations of Aleister Crowley or some shit. I was starting to grasp that maybe we all needed to log off, just for a while, and make some candied grapes and fizzy lavender lemonade.

I eventually figured out that Tumblr included some really neat art tutorials, too, if I searched the right tags (back then, at least). I decided to create an account, but didn't plan to post much. I discovered witchblr and the Tarot community on here a few weeks later and created this blog as a sideblog.

It ultimately became (mostly) the only blog I use on here, but I hadn't planned for that. My main blog sits unused. Tumblr's better in some (most) ways than my other online hangouts, but not without its problems over the years (some aspects pretty bad, of course).

I'm still here because I definitely feel like I'm getting old faster than I expected, and learning new platforms is kinda difficult (also a time sink). I might move parts of my site to a Wordpress installation eventually, but until then, I'm trying to keep my blog as organized as possible. I already know Wordpress pretty well, but the move itself would take forever.

Either way, I'm here because it helped me get away from some weird channer cliques before they imploded, and because I like fiddling with the themes/etc. Keeping a website, especially messing with themes, graphics, etc, is soothing, like gardening almost.

I'm thinking of actually trying to learn Javascript, and I'm trying to teach myself the newer CSS/HTML stuff that has changed over the years. I used to be fairly decent with that kind of thing as a kid, but now, it's a (fun) learning experience.

How did you find tumblr?

I really enjoy talking with tumblr users so I thought I'd try posting more prompts to get some conversations started.

I was in a nostalgic mood this week and was trying to remember how I first came to tumblr. It got me thinking that it would be cool to learn other's origin stories. I'll go first.

Even though I'm a big nerd who loves Star Trek (DS9 4 life) and Anime (Fairy Tail forever) it was WordPress that brought me to tumblr. Back in 2010 while in college I worked part time for a WordPress theme shop called Obox Themes. They were looking for new markets and decided that tumblr themes would be a good area to get into. I fell in love with how easy it was to modify my digital home and how there was a whole community of people hacking and releasing themes. Creating a WordPress theme from scratch would have been impossible with my skillset then but with tumblr I could do anything with my handy CSS guide and a few energy drinks.

Over the years what kept bringing me back was the themes. They were funky, weird and sometimes a little broken but who cares. It seemed like the entire web was trying to be grown up but tumblr was Toys R Us, they said it’s ok to be a kid. I loved that. Whenever I felt like I didn’t belong anywhere else I’d come back to tumblr and make a new theme (https://www.tumblr.com/themes/by/nick). I use to love clicking on the installs and seeing what kind of fun folks were using my stuff. What kind of people liked the weird stuff I did. It's your turn. What brought you to tumblr?

[antisocialxconstruct]

So you made a neocities... now what?

Okay, here it is! So you’ve seen how web2 is becoming more and more corporatized and toxic, you know web3 will be a capitalist nightmare if it becomes reality, and people are rediscovering the nostalgic charm of the web1 era so you want in. You want to stake out your little corner of the internet, you made your neocities account, maybe a proboards to go with it...

Now what do you do with it?

This is a short(-ish) guide intended to give you some direction when populating your own site. This is not a technical guide for building a website, I am by no means qualified to teach you html or css, and besides those resources exist already. Think of this more as content inspiration, organized loosely based on what you already use social media for and what you’d be bringing with you to a new space.

If anyone has ideas I didn’t think of, feel free to add on!

you could start a blog if you:

write a lot of original twitter/tumblr posts

like aggregating other people’s content

This one might be the most obvious considering twitter and tumblr both advertise themselves mainly as “blogging platforms.” A personal blog is the simplest way to make use of a personal website, because the greatest demand on you once you have a template you like is to simply write posts. Publish your lore posts and metacommentary on your favorite media, write about your day and the weird things that happen to you at work, show off new recipes you learned, review your favorite bands’ new albums, point people toward cool artists you’ve discovered, hype up your friend’s new art... the list goes on. You can theme the blog around a specific topic or let it be broad and untargeted, you can write essays or a couple sentences. There are No Rules.

you could start a hobby website if you:

run a themed blog on tumblr

have a niche interest you’re passionate about

do a craft with a process people might find interesting

This would be sort of an offshoot of a basic blog. Do you make cosplay? Ceramics? Do you have a lot of opinions about 19th century interior design? Do you find yourself constantly wanting to correct common misconceptions about East Asian martial arts? You can make a whole website about that, if you really want to. Document your process, document the sources you’ve gone to for research, just gush or vent about the things you’re always aching to talk about but don’t think anyone else wants to hear. Organize it all however you want and make it look pretty.

* you could make a fandom site if you:

like collecting and/or creating fanworks

want to minimize fandom discourse

Back In The Day, before large-scale fanwork directories existed, people used to curate their own smaller fandom communities with their own rules about what could and couldn’t be posted or discussed. Yes, a lot of work from those eras was lost specifically because these were small, decentralized communities, and it’s always advisable to keep backups of everything you create, but the greater appeal of these communities was the avoidance of “competing needs” issues when it came to people’s tastes and interests. If you want to post and collect fanfic for your favorite show but there are things you absolutely do not want to see in them, you can set those rules. The people who agree with you will be happy to have a space curated to their tastes. The people who don’t agree with you can make their own site.

you could build a portfolio/gallery if you:

are primarily a content creator who does art, fiction, music, etc

like posting photos/art on instagram

have a lot of original concepts/characters/projects

create raunchy art and are tired of being chased off other platforms

This one should also be pretty obvious. If you make creative work and you want a place to show off without worrying about algorithms, peak posting times, terms of service, etc., your best bet is to just make your own space. Post whatever you want, organize it however you want. If you’re concerned about reach, it’s still worth cross-posting to social media, but since no truly just-for-artists socmed has risen to the surface yet, a personal site is still going to be your freest and most flexible safe haven. (Look into Lightbox! It’s pretty easy to set up and it’s great for displaying a lot of images in one place.)

you could host a webcomic if you:

have a webcomic

What more is there to say? Once again, you don’t have the built-in traffic of hosting on a site like webtoons, but you do have freedom and flexibility.

* you could make a roleplay forum if you:

already enjoy roleplaying on discord, tumblr, google docs, etc

like the idea of tabletop gaming but not the scheduling challenges

want your stories to be better organized and preserved

This is another “back in the day” sort of suggestion, but most roleplaying that I remember used to be done on forums that were run and moderated by community members. As with a fandom site, you have a lot of control over who joins, and what people are permitted to do, meaning you can create exactly the kind of community you want to be a part of.

* a couple of these would obviously require some degree of management/moderation on your part if you’re planning to be the host of the space, so you should consider whether that’s a responsibility you want to take on.

At the end of the day, the simplest answer to “what do I do with a personal website?” is... anything you want :) But I know that can be a bit daunting. Hopefully this has pointed you roughly in the right direction, at least!