- 100
- 53
Rake the leaves
https://old.reddit.com/r/canada/comments/1cg0ine/loblaws_boycott_planned_for_may_across_canada/
Into a pile
https://old.reddit.com/r/AskCanada/comments/1i6ypc8/askcanada_i_am_going_to_address_all_the_boycott/
The Canadian shot at the start of Fallout 1 was probably a vicious war criminal they caught administrating "Canadian healthcare" to a camp full of undesirables
https://old.reddit.com/r/AskCanada/comments/1i21rt9/what_can_average_canadians_do_prepost_trump/
And then burn them
https://old.reddit.com/r/Anticonsumption/comments/1i6hycy/american_companies/
https://old.reddit.com/r/ThunderBay/comments/1i3z1zo/us_tariffs_boycott_list/
https://old.reddit.com/r/canada/comments/1i6m7iz/threequarters_77_of_canadians_want_an_immediate/
https://old.reddit.com/r/canada/comments/1i6le8d/if_trump_tariffs_canada_trudeau_backs/
https://old.reddit.com/r/canada/comments/1i6l0ni/trump_mentioned_manifest_destiny_in_his_inaugural/
Bonus one
https://old.reddit.com/r/AskALiberal/comments/1i41csq/why_do_a_lot_of_liberals_embrace_east_asia_so/
https://old.reddit.com/r/canada/comments/1i6v4ya/alberta_premier_danielle_smith_lays_blame_on/
https://old.reddit.com/r/canada/comments/1i6tn9z/trump_pushes_for_early_renegotiation_of_us_trade/
https://old.reddit.com/r/canada/comments/1i6v4ya/alberta_premier_danielle_smith_lays_blame_on/
Canadians deserve to die
https://old.reddit.com/r/AskCanada/comments/1i6k8u0/yes_we_do_not_have_the_best_administration_have/
https://old.reddit.com/r/canada/comments/1i6k337/5_things_to_know_if_canada_hits_back_against/
white 
boy can't pick fruit 
as good as immigrants 
video released by 
| 
+ 
= 
- 10
- 37
How is this possible!?!
β Benny Johnson (@bennyjohnson) January 31, 2025
pic.twitter.com/vahNzteaR7
INDEED, HOW IS IT POSSIBLE?!
- 79
- 121
According to plaintiffs' counsel, Meta engineer Nikolay Bashlykov, who works on the Llama research team, wrote a script to remove copyright info, including the word "copyright" and "acknowledgments," from e-books in LibGen. Separately, Meta allegedly stripped copyright markers from science journal articles and "source metadata" in the training data it used for Llama.
~Zucc
How the frick do we not have a zuck Marsey???
turn to have a hysterical meltdown about 
Elon's nazi salute
- 38
- 50
So suffuse with rage at Elon's Heated G*mer Moment is the British Government that even Starmer has 'hit out' at the Nazi c*nt in one of his latest 'uwu notice me elon' 
press releases
Here's one of his senior MPs unambiguously praising a man who killed sixty million people 
Frick, now even Starmer is part of Musk's gang of acolytes? 
How far up does this go? 
'hit us with tarriffs' neighbor we don't even export anything
, personally I hope he hits us with nuclear missiles 
Musk-san please 
CRASH OUT ALERT
let me get this straight neighbor, Musk was secretly a devoted 
national socialist, kept this fact so well-hidden that nobody even had an inkling until he came out in support of the 1st amendment (a known nazi amendment), and in the years since then he expertly manouevered himself into a tenuous position of mediocre state power, just to throw it all away at the end by getting up on stage and throwing his best Roman? 
Anyone denying it was a nazi salute is blind or wilfully ignorant
report this man for antisemitism
do you think we could maybe have some quality of life or-
no we HAVE to obsess over the literal hand gestures of a foreign billionaire for some reason
ARMED POLICE THERE'S AN UNLICENSED THOUGHT ON THIS PROPERTY 
- 6
- 12
I (19F) have been dating my boyfriend Austin (24M) for 6 months now but as of recently i started using a vibrator during s*x. The reason is because he rarely makes me c*m and doesn't seem to even try, so i started using toys while he fricked me. At first he didn't seem to care until last night after we finished he said "it's a bit selfish to use that while we're having s*x"
It came as a surprise because he never said anything the other times i used it. I told him it's because i can't c*m from only penetration, keep in mind he doesn't like giving head or fingering. But most times i give him a blowjob to start things off he just never gives anything back. and i give really good head like a lot of times he cums during the blowjob before we even start fricking, which is fine because i like sucking peepee i just don't wanna feel left out
Soo because of this i resorted to using toys which feels amazing but he doesn't like it. I tried coming to some kind of agreement like asking if he can at least stimulate my clit while he's fricking me or even 69 so we both get stimulated, but he said word for word "real Gs don't eat kitty" .... idek what that means but ok
At this point im just getting so sexually frustrated and i feel like i haven't came properly in ages. Idk if im being the butthole here but i'm tempted to end the relationship and find someone else. If you know any guys that aren't selfish in the bedroom and have a high s*x drive, plss send them my way! i don't care about age or looks
What do fat r*dditors think about this dumb fake story?
I second this. REAL men care about their partners' pleasure.
WRONG. REAL men beat their wives. Also this person has only a single submission and it's in /r/poor. Keep yourself safe.
Definitely NTA. If he doesn't care about your pleasure, what's the point? You're not a s*x toy for his convenience.
Yes you are. A s*x toy that cooks and cleans. Know your place, foid.
- 93
- 96
!incels this longpost is for you brocels, also will someone ping soyteens for me?
Dungeons & Dragons: The Xueen's Cradle
To start, you should know that I have never played D&D nor will I ever waste my time playing D&D. It might be fun with the right group of people, but the only groups you can find as a single neurodivergent smell like butt and are full of r-slurs so annoying being around them has been classified as psychological warfare in Geneva. Did I mention 
s yet? They tend to conglomerate there too. So for me, this is just generic fantasy story set in generic fantasy setting and that about sums it up. Its very generic. To summarize the plot, a party of adventurers find a boy that is supposed to act as a sacrifice for evil dragon so they try to save him by bringing him to good dragon. The voice acting is eh, the story predictable and the character design
Yeah... 
Besides that you have George Dwarf, Imane Khalif the Paladin and Druid who is a Druid. Would I recommend it? Not unless you are some huge D&D fan, also the ending is abrupt and very anticlimactic.
Ching Chong: It Takes a Life
So apparently Sifu is some Chinese beatemup? Probably only made it in to get ChingChong bux, fricking Bezos mang. To summarize, guy takes his revenge on Chinese mafia for murdering his father and uses a secret power to do it. Would I recommend it? Yeah if you have 8 minutes to spare its a nice watch, not a lot of talking just action with good choreography. What dialogue there is tends to be a little cringe (talking about the Granny Marvel quipping) but can be easily ignored.
Amazon shilling: The Once and Future BWC King
Appareantly this is some Amazon studio game no one cares about, but hear me out: this is absolute kino featuring Germanic BVLL Arnold BlackBIPOCs playing himself (again) and being great (as expected). Gigachad and his servant end up stranded on an island where everyone is immortal and nothing can permanently damage you and in an attempt to conquer it, Arnold challenges the local king and learns an important lesson about friendship (no really).
Definitely recommend this one, fun story you need zero context for. Also he definitely fricked the Babylonian tomboy and she is 100% built for BWC.
Unreal Tournament: Xan
I never played Unreal but after watching the episode I want to give it a try. Though the plot is again very predictable, this time it makes it up by delivering in the tournament department. Robots are mistreated (like g*mers and incels) so they rise the frick up and rebel against POC women in charge of gaming, just like in real life! This leads to them ending up as gladiators in the aforementioned tournament. If you are a nostalgiastrag, give it a try, if not, still give it a try. The bot is a cool character!
hammer 40,000: And They/Them Shall Know No Fear
KINO ALERT KINO ALERT KINO ALERT KINO ALERT KINO ALERT
TOTAL XENOS DEATH, TOTAL GAY BUTT R*PE DEMON DEATH, TOTAL TRAITOR DEATH
If you played Space Marine or have any interest in Warhammer 40k you should know who Captain Tinitus, lieutenant of the second company of the Ultramarine Chapter of the God-Emperors Angels of death AKA the fricking Astartes is. Besides serving as backstory for Titus who now has a old BIPOCsmurf as a mentor, its probably also a teaser for the up and coming Warhammer TV show in cooperation with the Amazon jew. If this is the standart they are going to maintain for the show I am all for it. To tldr the plot, gay heck demons do gay heresy shit so the Ultramarines have to clean it up because they are the Emperors finest. That's all you need to know, the rest is just Traitor-Ackening and TDD.
PAC-MAN: Circle
The entire premis of the episode relies on you expecting PacMan, but turns out there is a twist! So go watch it for yourself. Its a shorter episode and its alright.
Crossfire: Good Conflict
More Asiaslop no one in the west cares about, CSGO but gay and we aren't even talking about Valorant and thats all you need to know about Crossfire. Frick that gookshit, at least it has a decent snowbunny
!2dgooners bvilt for the most BIPOClicious vantablack mandingo nigerian BBCs etc. etc.
Armored Core: Keanu Chungus
Did any of you neurodivergents ever touch an AC game? I never did, but just like in Unreals case I kinda want to try it out now. This was besides the 40k episode the most anticipated one of part 1. I have no idea if it actually lived up to the hype, what I do know is that every time Keanu gets involved in a video game script they frick him over lmao. Yeah the writing could definetly be a lot better, but the action scenes are cool I guess. Schizo mecha mercanary actually doesn't refuse to pilot the mecha and goes apeshit on his targets. If you like Mecha and Chungus Reeves, go for it.
To summarize part 1 of Secret Levels
Its like a mediocre season of Love Death Robots. The shilling definetly cucked the writers in terms of creativity. The only thing that can salvage this series is coming soon...
POOPING ON CONCORDS GRAVE ONE LAST TIME FOR CHRISTMAS
- 24
- 71
Starts with post on /r/Brazil about the deported !macacos not having stewardess on their flight home
No Water Or AC On Flight, Handcuffed: How Brazilians Deported From US Reached Home
One Australian expat in Brazil asks
Can you imagine the outcry from Trump & his cronies if Australia put 100 of them on a plane, handcuffed & shackled & flew them back to the US?
The responses he gets from !burgers were not what he'd hoped
Well Australia should send them back if true
I fully support the US deporting illegal immigrants and I fully support other countries deporting Americans who have overstayed their visa and are thus illegal immigrants, they violated the law, I have no issue with them being handcuffed while they're returned to the US
I don't think Americans care, many would probably enjoy seeing them get deported.
Deport them.
Do it. If they've overstayed visas and aren't legally allowed in Australia anymore they should be sent home.
Most Americans wouldn't have any sympathy for them doing something stupid and illegal.
Kick them out if they are illegal.
Well, those 5,000 are probably unhappy about America, so you can keep them, deport them, what ever you want. America doesn't care.
I think Trump would nt have a problem with it
No outcry from me, what's fair is fair. They made an agreement and violated it.
- BernieSanders : How to do coffee right : throw it in the sink
-
Homoshrexual
: I drink Folgers and that's good enough for me
- 93
- 50
Dirt
If you buy ground coffee, Congratulations!!!! You are buying dirt!!!!!
Don't buy pre ground coffee ever. Coffee grounds go stale within hours after being ground. When you buy coffee grounds from the store, the coffee is already stale and has been for probably multiple weeks already.
Seriously, that shit is stale before it even reaches the stores shelf.
Bugs
Coffee beans are a little better, not as stale as ground coffee but there are other worries.
Quality control is terrible, with the amount of contaminants very high for coffee beans.
The FDA limits contamination at 10% of the total coffee beans count are insect-infested or insect-damaged.
So yeah, ignore my advice, and keep eating the bugs like a good little NPC.
The other issue is how old the coffee beans are will heavily affect taste quality. Too fresh, and the taste will be too bland, to old and the beans will go stale. Expiration dates aren't accurate methods of determining roast date, so honedtly you are spinning a wheel whenever you buy.
How to Do Coffee Right
The only acceptable form of coffee making is the use of GREEN COFFEE BEANS. Green Coffee Beans go stale as well, but if kept in an airtight container will be good for a good 3-6 months.
Then you roast as much a you need for a week period. There is an art to coffee roasting which I am not going to explain but YOU WILL NEED TO RESEARCH. Also don't start a fire by cooking them too long lol. After roasting, you should put the coffee grounds in airtight container and wait generally between 2 days to 2 weeks lafter roasting. This highly depends on roast and what type of taste you prefer. So play around with it a bit. I personally prefer waiting a shorter amount of time, around 3-4 days.
The before you make your coffee you grind the amount of beans you need for the amount you will drink (obviously). Don't grind all at once. This ensures coffee grounds are fresh for each cup of joe.
Machine and Method
Espresso machines are best (if you can find a good one which is hard). You want to get an all metal inside one though, which honedtly can be difficult to find and expensive. Like $2000 expensive. There are ones with plastic internals that pull amazing shots but you should obviously not do that unless u like consuming microplastics. The espresso machine imaged above is really good, great workhorse, finicky, but a classic. Rancillio Silvia, is its model. This is one of the few espresso machines I still have, since I adore it, but its plastic water reserviir so I would recommend no. Just let me be nostalgic though about pulling a better shot thab you have ever tasted on a $400 machine.
This one is all metal, but obviously, doesm't have as much capabilities:
Europiccola 8, cost around $600-1000 depending on if you know how to find used stuff.
Europiccola is the other espresso machine I currently own and is good. If you are on a microplastic free diet but still like machine precise espresso, this would be good pick up.
Pulling a good shot cna be difficult. Measure out grounds and learn the right pressure ti press the grounds into the thingy (cant remember name).
Depending on machine you might want to learn how to temperature surf. This might be outdated, since newer models might just be better at getting right temp. I had Rancillio I can't remember model, but it was like a classic. Plastic internals, but pulled amazing shots. Had to temperature surf though to get it right.
Crema
Crema is the easiest test to figure out if you pulled a good shot. Crema is layer of golden brown foam on top of the black espresso, that forms NATURALLY.
More Crema = More Swag.
Less Crema = More Strag.
No Crema = You have not only failed at making espresso, but you are also probably r-slurred.
Note on Cappuccino
If you add sugar or anything else to a Cappuccino besides frothed milk and espresso then exit my post immediately. You are a cute twink who I will slam head first into a brick wall.
Cappuccino is amazing. You need a steam wand, bezt ones come attachrd to Cappuccino/espresso machine. Don't use one of those terrible handheld frothers.
You want the container you put the milk into, to be solid metam and it should be in freezer before hand, so its icy cold. Pour milk into container froth, starting at botton then rising to top to create the froth.
Top: Froth
Bottom: Steamed Milk.
You want about 50% froth and 50% steamed milk by volume.
Then you tilt espresso cup slightly like 45Β° with espresso already made JUST BEFORE!!!! and you pour in while tilting espresso cup back to facing up.
Cappuccino Art
Cappuccino art is created with how you pour the frothed/steamed milk into te espresso.
Using a stencil, using some sort of cinammon, or whatever isn't acceptable.
Cappuccino art is ONLY achieved through the pour, using additional instruments or methods is not only cheating but also is the equivalent of sucking a peepee.
If you see some fancy desig with a logo or whatever on Cappuccino art, then that person kust used some stencil thing and I give you permission to beat them bloody.
i am not amazing at Cappuccino art, but I am much better than you will ever be. I am not going to share my secrets either. Continue to next section.
Not Espresso
Nowadays I don't even bother and only make Pourover or Mocha Pot for Espresso (rare). Too many iszues finding an all metal espresso machine under 2k so it is what it is. That being said you can pull great shots with Mocha Pot, like Italians do all the time. You just have to he an OG artist not a scientist. You knowimsayingneighbor.
Pour over is an art as well, don't listen to the cute twinks talking about temperature with therm and measuring out yada yada yah. Its an art. You use your intuition. You won't make good coffee this way if you are a nerd.
Speaking of which.
Coffee isn't for Nerds
If you want to measure out evrrything and tempetature whatever, die. That isn't coffee. Italians (the inventors if coffee), pretty much just grab the beans roast them in the oven and grind with simple grinder amd use Mocha Pots. They pull better shots than 99% of coffee shops in America.
Nerds require fancy equipment. If you are an artist, you will require less and less fancy equipment until you can pull a great shot with a handful of green coffee beans, a handgrinder, and a stove.
Alternative to Roasting
You can buy from Coffee Roaster directly and they usually (should) in most cases roast the coffee well and deliver freshly roasted coffee.
I will be honest, this is gay. Straight men don't let other men roast their beans. So if you are gay, this might be good option. If not, stick to roasting yourself.
What Coffee Roaster to Use
While you can roast Green Coffee Beans in the oven, you absolutely shouldn't for many reasons I am not going to get into here.
What you need is a good coffee roaster. These can be expensive, bunch of different types and I don't feel like explaining. Do your own research idiot. Expect to pay at least $200 for a good one though. I have a decent drum roller type one that cost like $300, but there are even better types of coffee roasters some being $600 ones all the way up to like $20,000. Obviously thise ones that aren't drum rollers, can't remember what they are called, but they are OG as shit. You probably don't need one of those though.
Look here for Drum Rollers (my preference):
https://www.sweetmarias.com/roasting/drum-roasters.html
There are other types of coffee roasters, but yeah.
Grinder
Probably most important after roaster. Get the best one you can afford, or learn how to hand grind like a true Italian. Probably cost around 400+ for a decent one.
i have a $500 (?) roaster, pictured above. That model is outdated, but I recommend since its served me well for past 10 years and alnost as good as the Italian hands grinds.
Italy
Most importantly, to make good coffee you will need to go to Italy. If you haven't been to Italy, Congratulations!!!! Your coffee is almost guranteed to be shit.
Putting this one last, since I know this is the biggest barrier to entry and want people to read through thinking they are gonna make some good joe, then realize they can't visit Italy so they juzt wasted their entire time reading a straggy article abiut coffee making.
Import Info on Italy
When I refer to Italy, I am referring to Southern Italy.
"Northern Italy" isn't Italy, its basically Brussells + France + Amsterdam if they were black. North "Italians" can't make Coffee.
Drama in the comments as commies are planning a protest on the day of Trump's inauguration [60 points, 51% upmarseyd, 532 comments] 
- 51
- 66
What is this even? A march?
https://old.reddit.com/r/SanDiegan/comments/1hzglub/for_those_interested/m6pknx8/?context=8
Struggle session with lots of screaming and tears [
]
https://old.reddit.com/r/SanDiegan/comments/1hzglub/for_those_interested/m6q1yqc/?context=8
Can you include some details? Is this supposed to be a march or a rally?
https://old.reddit.com/r/SanDiegan/comments/1hzglub/for_those_interested/m6pp2bb/?context=8
Did Tower Records help design the poster?
https://old.reddit.com/r/SanDiegan/comments/1hzglub/for_those_interested/m6qrhf5/?context=8
Genuine question: Why would anyone ever be interested in attending this crap?
https://old.reddit.com/r/SanDiegan/comments/1hzglub/for_those_interested/m6phfg1/?context=8
All these groups sound like lunatic extremists. Too bad because Trump is worth protesting, but not if the protest devolves into some kind of seize-the-means-of-production nonsense.
https://old.reddit.com/r/SanDiegan/comments/1hzglub/for_those_interested/m6pl47d/?context=8
Not the war machineβ¦aren't the current wars under the Biden administration?
https://old.reddit.com/r/SanDiegan/comments/1hzglub/for_those_interested/m6pijkl/?context=8
You have sponsors that want Socialismβ¦.
https://old.reddit.com/r/SanDiegan/comments/1hzglub/for_those_interested/m6po1l0/?context=8
Socialism groups? No ty
https://old.reddit.com/r/SanDiegan/comments/1hzglub/for_those_interested/m6q1kzy/?context=8
Wow, judging by this thread we are so cooked lmao
The groups sponsoring this event have done so much before and during this last election cycle and a simple google search would show you but that's too much to ask these days.
Coming together as a community of working class folk in solidarity against the powers that be is not a bad thing but wow yall will find any excuse to not organize or be a part of something.
https://old.reddit.com/r/SanDiegan/comments/1hzglub/for_those_interested/m6q7ofh/?context=8
What specific policies are you against?
https://old.reddit.com/r/SanDiegan/comments/1hzglub/for_those_interested/m6plcxa/?context=8
It looks like a Rally. It may not change things, but it shows that people are opposed to the extreme right.
I am honestly surprised there have not been more protests.
I hope to see more of this, since as they say, "Democracy dies in silence".
https://old.reddit.com/r/SanDiegan/comments/1hzglub/for_those_interested/m6pmekl/?context=8
This will really show themβ¦
https://old.reddit.com/r/SanDiegan/comments/1hzglub/for_those_interested/m6pshcz/?context=8
Who's going to tell them that both parties serve the "billionaire agenda."
https://old.reddit.com/r/SanDiegan/comments/1hzglub/for_those_interested/m6ptkcg/?context=8
The PSL being there is a huge red flag, and I say that as a communist
https://old.reddit.com/r/SanDiegan/comments/1hzglub/for_those_interested/m6r1fqh/?context=8
Can we also fight back against the Tiananmen Square massacre and Chinese internment camp deniers?
I'm just asking because the PSL is the very first group listed as being associated with this little protest, and last time I checked, they think those people don't exist.
https://www.liberationnews.org/tiananmen-the-massacre-that-wasnt/
For anyone seriously considering supporting these idiots, look into the PSL, or Party for Socialism and Liberation. They are essentially a political mouthpiece for the Chinese Communist Party. They've also been very vocal in their support of North Korea having nukes, Syrian President Bashar al-Assad being a great guy and didn't use chemical weapons on his people, and that Tibet belongs to China.
Remember that when you're marching down the street next to them.
https://en.wikipedia.org/wiki/Party_for_Socialism_and_Liberation
https://old.reddit.com/r/SanDiegan/comments/1hzglub/for_those_interested/m6rg15n/?context=8
- 23
- 40
- 5
- 12
today, 2 years ago, it all started. thank you! #SKIBIDITOILET pic.twitter.com/6lOGG6mDUD
— dafuqboom (@dafuqboom_legit) February 8, 2025
What are your favourite skibidi moments? Mine is when it was shown to the Russian Parliament
.
In series, episodes 70 and 73. The first (second?) use of dialogue in the series was a massive shock.
- 55
- 31
https://old.reddit.com/r/rpghorrorstories/comments/1h5c1lv/why_is_everything_woke/
https://old.reddit.com/r/TrenchCrusade/comments/1d180jg/an_extensive_review_of_the_problems_of/
https://old.reddit.com/r/HorusGalaxy/comments/1i0zpie/is_trench_crusade_good/
https://old.reddit.com/r/Grimdank/comments/1gizdcv/more_trench_crusade_to_distract_from_the_drama/
https://old.reddit.com/r/Grimdank/comments/1gqqb01/embrace_the_derp_brothers/
- 28
- 68
CSS osu!
I made a simple version of the circle clicking game osu! with HTML and CSS. I was mostly finished with it around December 4. You can find it on @YourAlterEgo's profile. It's on the desktop site only. If you're using a laptop, using a mouse is recommended.
To play it, you click the circles when the ring (approach circle) gets close to the circle. The right time to click is around the time the ring turns white or when it almost reaches the circle. You can click earlier or later if you want. If the anthem starts at the same time you click the play button, it should somewhat sync with the song (it's not perfect).
Play here on 
@YourAlterEgo's profile (Desktop only)
If the anthem autoplays or the game lags, try it here:
https://reddreamer.nekoweb.org/cssosu/
The above site is a static web hosting site like Neocities or GitHub Pages.
Click here if you want to vote on polls asking whether you played and liked the game. They're in a comment because you can't have <details> and polls in the same post.
Comment what you think. If it glitches out or doesn't work, comment what went wrong and what browser you're using. If the anthem doesn't play, try closing other rDrama tabs that have audio playing.
Assets
rDrama version (Copy and paste it into your bio and profile CSS if you want)
Non-rDrama version
I tried making a .zip, but Furryfox (Firefox) kept calling it a virus 
https://files.catbox.moe/imovff.zip
- CSS (cssosu.css) (Mirror, name it cssosu.css)
- HTML (name it anything ending with .html)
- Song: lucky-nightcore.mp3 (Mirror, name it lucky-nightcore.mp3)
- Cursor: cursor.png (Mirror, name it cursor.png)
- Logo (used as an icon): cssosulogo.png (Mirror, name it cssosulogo.png)
- Background: background.jpg (Mirror, name it background.jpg)
- Background source: https://www.flickr.com/photos/adobetutorialz/4556724799/ (Median filter used to remove the patterns)
The song is a nightcore (sped-up) version of Lucky Twice - Lucky. I got it straight from an osu map (.osz file) with the same song and edited it to start shortly before the chorus.
Questions
If you have other questions, ask in the comments, and I might answer.
1. What is osu!?
It's a free-to-play weeb rhythm game where you click circles while listening to music. This is the game's website. You can try an unoffcial web demo like I did if you don't want to download it. On the actual game and the web version, you can use Z and X to click, which is easier than clicking with the mouse. They also have sliders and spinners, which aren't present in this CSS version.
2. What is CSS?
Cascading Style Sheets, a language used for styling webpages. You can use it to change the color of text, add shadows and glows, change the page's layout, add background images, add simple animations, and so on.
3. Is there an indicator for early and late hits?
No. I tried to track early hits by adding another <details> element that would be animated to toggle its visibility (and therefore clickability). There would be 2 <details> elements you could click, and clicking the one that appears earlier would mean you hit early. However, this caused issues with the circles not responding to clicks, so I gave up on it.
4. How does it work?
CSS animations, animation delays, CSS counters, and lots of <details> and <summary> elements
This uses a lot of <details> and <summary> elements. To make the circles and play button interactive on click, they needed to be interactive HTML elements. <details> and <summary> elements (normally used for showing more text on click, like a spoiler button) are allowed in rDrama bios (unlike checkboxes), so they were perfect for this. The <summary> is the actual clickable part, so that is the element that is styled into a circle or play button.
The following is what details and summary normally look like.
Try clicking me. This clickable text is the summary element inside the details element.
Hello!
This is the hidden text!
<details>
<summary>Try clicking me. This clickable text is the <em>summary</em> element inside the <em>details</em> element.</summary>
Hello! :marseywave2: This is the hidden text!
</details>
The game screen is a <blockquote>. It has a play button at the start (<details> and <summary> elements), and there are 72 blockquotes containing other elements after the play button, one for each of the 72 circles. The bio looks something like the following.
<blockquote>
<details><summary></summary></details>
> <details><summary></summary></details><h2>a</h2><p>a</p>
> <details><summary></summary></details><h2>a</h2><p>a</p>
...
> <details><summary></summary></details><h2>a</h2><p>a</p>
#
> <details><summary></summary></details><h2>a</h2><p>a</p>
...
> <details><summary></summary></details><h2>a</h2><p>a</p>
</blockquote>
In HTML, it would be this.
<blockquote>
<details><summary></summary></details>
<blockquote><details><summary></summary></details><h2>a</h2><p>a</p></blockquote>
<blockquote><details><summary></summary></details><h2>a</h2><p>a</p></blockquote>
...
<blockquote><details><summary></summary></details><h2>a</h2><p>a</p></blockquote>
<h1></h1>
<blockquote><details><summary></summary></details><h2>a</h2><p>a</p></blockquote>
...
<blockquote><details><summary></summary></details><h2>a</h2><p>a</p></blockquote>
</blockquote>
The blockquotes are absolutely positioned and placed around the screen. Inside the blockquotes are the circles (<details> and <summary> elements), the rings/approach circles (<p>), and miss indicators (<h2>). There are also a few <h1> elements between the blockquotes used to mark the start of each section with different colored circles.
<blockquote>
<details>
<summary></summary>
</details>
<h2>a</h2>
<p>a</p>
</blockquote>
You might notice the <p> and <h2> elements have "a" written inside them. This is simply because rDrama did not allow empty <p> and <h2> elements.
The approach circles (rings), circles, and miss indicators were all animated with CSS animations. Because osu! has set timings, it's easy to simply add an animation delay to determine when circles should appear. For example, circle 1 fades in 1.13 second after you click the play button, and circle 72 appears 32.73s seconds in.
#profile--bio blockquote > blockquote:nth-of-type(1) {
animation-delay: 1.13s;
}
The circles, rings/approach circles, and miss indicators inherit the timing from the containing blockquote.
#profile--bio blockquote > blockquote p,
#profile--bio blockquote > blockquote details,
#profile--bio blockquote > blockquote h2 {
animation-delay:inherit !important;
}
The play button consists of <details> and <summary> elements. When you click the play button, the open attribute gets added to the <details> element, and the play button gets hidden. The game only starts playing the animations for the other elements when the play button has the open attribute. The CSS uses the sibling selector to use the play button to target the other elements.
#profile--bio details[open] ~ blockquote details {
animation:1.5s fadecircle ease-out;
animation-fill-mode:forwards;
}
The above means that the circle (the second details) should have an animation named "fadecircle" only after the play button (the first details) has been clicked. The details[open] means that the details element has the "open" attribute. This looks like <details open> or <details open=""> in the HTML. The ~ is a sibling selector. If you write details ~ blockquote, it targets all blockquotes that are siblings of a details element (having the same parent element) and come after it in the HTML.
The circles need to be clickable for a limited amount of time. The visibility attribute both can be animated and affects interactivity. A circle's visibility is toggled through a CSS animation to make it clickable only when it's on screen.
@keyframes fadecircle {
0% {
visibility:hidden;
opacity:0;
}
10% {
visibility:visible;
opacity:1;
}
90% {
opacity:1;
visibility:visible;
}
100% {
visibility:hidden;
opacity:0;
}
}
When you click on a circle, it hides both the approach circle and the miss indicator. The miss indicator only appears after the circle fades out, meaning that if you click the circle, the miss indicator will never appear. Clicking the circle also makes the circle play a different animation to fade out as a white glow. Like with the play button, the open attribute is used to determine whether a circle was hit.
Hide approach circle after the circle (the second details) has been hit ([open])
#profile--bio details[open] ~ blockquote details[open] ~ p {
display:none;
}
Play a different animation after the circle has been hit
#profile--bio > blockquote > blockquote > details[open] summary {
background:none;
animation:0.15s hitcircle linear;
animation-fill-mode:forwards;
border-width:6px;
}
The numbers on the circles and the hit counter were made using the CSS counter feature. The CSS counter feature allows us to count elements matching a certain selector and display the current count using the content attribute. For example, you can make a counter to count the number of circles and display the current count on each circle. That way, the 1st circle will be labelled 1, the 2nd circle will be labelled 2, and so on.
The first rule initializes 3 different counters to zero. The second adds 1 to two of the counters at every one of the 72 blockquotes inside the game. The third displays the current count of the counter circlenumbers on the circles.
#profile--bio {
counter-reset:circlenumbers hitcircles totalcircles;
}
#profile--bio blockquote > blockquote {
...
counter-increment:circlenumbers totalcircles;
...
}
#profile--bio > blockquote > blockquote > details > summary::before{
content:counter(circlenumbers);
...
}
There are different sections with different colors, and the circles in each section are numbered up starting from 1. To determine when each section starts, there are <h1> elements between the blockquotes. This allows us to use the sibling selector to target the blockquotes after each nth <h1> and change the circles' colors. The counter on the circles is also reset to 1 at each <h1>.
#profile--bio h1 {
counter-set:circlenumbers 0;
...
}
The default circle color is red. The circles in the first section use that color. The rules below override the colors of the circles after the first <h1> and the second <h1> with pink and purple respectively.
#profile--bio h1:first-of-type ~ blockquote summary {
background-color:var(--pink-transparent);
}
#profile--bio h1:nth-of-type(2) ~ blockquote summary {
background-color:var(--purple-transparent);
}
The hit counter counts the number of circles with the open attribute and is placed on the ::after pseudoelement attached to the outer container blockquote (the game screen). The element displaying this counter needs to be placed after all of the circles in order to count them all, and this meets the requirement.
#profile--bio > blockquote > blockquote details[open] {
counter-increment:hitcircles;
}
#profile--bio > blockquote::after {
content:"Total circles: " counter(totalcircles) " | Circles clicked: " counter(hitcircles);
...
}
The timer was made using ::before and ::after pseudoelements with an animated content property. I found out this was possible from @iheartrdrama's former WPD CSS!
#profile--bio > blockquote details[open] ~ h1:nth-of-type(4)::before {
content:"0:00";
left:20px;
animation:36s timer linear, 0.25s timerFade;
animation-delay:0s, 36s;
animation-fill-mode:forwards;
}
The other timer uses the same animation but in a reverse direction.
animation:36s timer linear, 0.25s timerFade;
animation-direction:reverse, normal;
Animation
@keyframes timer {
0% {
content:"0:00";
}
2.78% {
content:"0:01";
}
...
97.22% {
content:"0:35";
}
100% {
content:"0:36";
}
}
Thanks for reading if you read this post, and thanks for playing if you played the game. 
- 4
- 6
It's cold, and dry, and I have to wash my hands often, and now the skin of my hands is dry and rough. Especially on the knuckles, it breaks open and bleeds. I just put some lotion with urea on, and it burns 
- 11
- 7
Ξf wΠ΅ dΠΎnt ΡΠΎunt sub 50B Π°Γd Γt shΠΎuΔΌd bΠ΅ 440B mΓnΓmum
But wΓkΓ stΠΎΡΠ΅d uΡdΠ°tΓng Γt
- 17
- 60
I cast a pretty big shadow 
Negative temps with 40mph wind is too fricking cold
- DickButtKiss : RIP to a real 1 - trans lives matter
- 195
- 184
!kino unironically supermassive loss
eraserhead was the only horror ("horror") movie to ever get to me and its nothing now but it unsettled and inspired me a ton for years and i will never forget
- 1
- 10
- 2
- 12
Ye is a trendsetter after all. It would be really funny if they treated it like saying BIPOC and didn't let white prople do it.
Top Poster of the Day:
kaamrev
Current Registered Users: 30,953
BROWSE EFFORTPOSTS
SITE GUIDE
HOLES
PING GROUPS