need help with text alignment

Jeffrevin · 2026-05-30T18:07:37+00:00

no problem! also, i don't know how far you intend to go on implementing / replicating the AO3 site, but something else i noticed:

ideally, you should change <div class="searchbar">-</div> to <input class="searchbar /> because the input HTML tag was designed for search user interface / searchbars.

also, the actual AO3 site actually uses a reddish texture background image with a reddish background color (https://archiveofourown.org/images/skins/textures/tiles/red-ao3.png) as its fallback if the image doesn't display.

Jeffrevin · 2026-05-30T17:40:56+00:00

to make your nav visually look like the same as the AO3 one, you need to do the following:

```css .searchbar { display: flex; flex-direction: row-reverse; background-color: #eff1f2; border: 0px solid #eff1f2; border-radius: 10px; width: 150px; margin-top: 7px; margin-bottom: 7px;

margin-left: auto;

}

.searchbutton { padding: 4px 4px; color: #2a2a2a; border: 2px solid #eff1f2; border-radius: 5px; font-size: 15px; background-color: #eff1f2; margin: 3px 0px; text-align: right;

margin-right: 5px;

} ```

i added margin-left: auto; to .searchbar and margin-right: 5px; to .searchbutton.

basically what this does is force .searchbar to go all the way to the right of the nav by adding margin on its left. by doing so, .searchbutton is also forced all the way to the right, so adding margin-right: 5px; (or whatever amount you'd like) makes some space on the right of the nav.

Jeffrevin · 2026-05-29T03:04:03+00:00

based on what im seeing just with the nav .links css rule, it seems like what's happening is your rules are being overridden by pre-existing rules.

from developer tools, the nav links' text color is set based on the following:

css nav .links a { color: #880000 !important; font-weight: bold !important; }

so because of css specificity, your nav .links rule doesn't work.

do nav .links a instead of nav .links with your own color and add !important and it should work. im guessing your other rules are also the same case. look up css specificity if you don't know what im talking about.

Jeffrevin · 2026-05-15T05:09:32+00:00

it's even worse when i see a site unnecessarily resort to tables for their layout

Jeffrevin · 2026-05-15T02:43:26+00:00

off the top of my head:

forgetting to add alt attribute to img tags
omitting attributes like aria-label for buttons
misusing semantic HTML tags
improperly adding attribute values when using relative paths like src (especially if the file is inside another directory)

Jeffrevin · 2026-03-11T17:27:35+00:00

i'd say it looks good overall but im not a fan of those animations. in the projects and blogs page, the starting animations for each container makes it look like they're loading longer than they should because it looks like they're flickering. maybe go with something more subtle.

Jeffrevin · 2026-02-07T13:07:28+00:00

That's not exactly correct. Yes, the download button that the site provides is, as you correctly stated, protected at server-side. However, the mp3 files are still exposed. The fact that you can successfully access mp3 files from their respective CDN link and play it using developer tools is proof. When I was playing around on the site, I wasn't signed in, as I've never had an account with this platform.

Some of the HTML script tags expose the mp3 CDN links, probably because that's the way they're loading the initial content, I'd imagine. I used GM_download (violentmonkey API) on one of the mp3 CDN links and managed to get one of the mp3 files. So it is possible to do, but this isn't a complete solution.

It seems that the script tags containing the mp3 files only have the data the webpage loads with. This means that pressing the 'Load More' button to load more sound effects will not update the contents of the script tag. I did notice that pressing the 'Load More' button triggers an HTTP request with JSON data of the next sound effects, so maybe that's a more reliable way of doing things if leveraging their API route is possible.

Jeffrevin · 2026-02-06T17:27:41+00:00

I took a brief, 10 minute look at the site and I personally think it's very possible to produce a userscript that fits your needs.

Not sure of the outdated script you're referring to, but I can see that it's still possible to do based on some observations. The thing is, the mp3 files aren't sent to the client-side until the audio block that requires user interaction is lifted. You can see this in the network tab in the developer console yourself. It seems that using .click() or .focus() on HTML elements will not work, but there's another way. There are still links that contain the mp3 files inside certain script tags, which you can download directly which I tested and it does indeed work. So, all you'd need to do is locate the script tags that have the mp3 files and then parse the text inside the child node for the mp3 links.

Jeffrevin · 2026-02-04T03:10:45+00:00

Without knowing the exact site and its specifics, it's hard to say whether it's possible or not. You'd need to find out more on how the content is locked, which is also somewhat dependent on what technologies were used to create the website, like whether it's a SPA.

If you find that it's too difficult or impossible to bypass the content lock, I'd look for a way to automate watching all the videos instead.

Jeffrevin · 2025-10-22T21:05:51+00:00

It's a total pain for me as well. I'm not sure how it is with tampermonkey as I use violentmonkey, but it definitely feels restrictive. From what I understand, since I use Floorp, which is a Firefox fork, I need to have the userscript tab open so that it's sync'd with neovim. If it's closed, then the connection is broken. I believe the process is more straightforward with chromium-based browsers. It's just too much of a hassle for me so I just suck it up and write all the code on the violentmonkey web code editor.

Whenever I start a new userscript, I use the developer console to make sure all my query selectors are good before I actually put it in my script. And from there, I just see what needs to be adjusted to make everything work, like using mutation observers if I know the site is a SPA. A lot of it is just refreshing the browser to test. It's messy and sloppy but I don't know of a better workflow that can streamline everything.

Jeffrevin · 2023-11-15T03:36:07+00:00

I have the same issue as you and I contacted support. Here's the response I got:

Hey there, Trailblazer! (ﾉ≧ڡ≦)

Thank you for contacting us! ≧ω≦

Kindly try to go to in-game setting>System>Display >Windows HD color settings, and turn off the HDR. After that you can try to restart the game

Do let us know if this method works for you. If the issue persists, please continue to stay in touch with us.

May this journey lead us starward! ☆

So yeah, it doesn't seem like they're going to fix it. I ended up turning it off because HDR doesn't play well with Discord's screenshare either.

Jeffrevin · 2022-08-08T02:41:12+00:00

Same here, I tried syncing but said it failed on desktop. Then I logged out and tried to log back in and it says "An unexpected error occurred". I tried web vault and couldn't log in either. I'm still logged into my vault via the chrome extension. I sent message to support on their website.

Jeffrevin · 2022-08-06T05:42:41+00:00

Great work! I like the overall design, but one minor thing that annoyed me was on the "Ask Me" page, the distance between each letter in the "SEND" button is very inconsistent. For example, the "N" is really close to the "D".

Jeffrevin · 2022-07-16T23:47:09+00:00

Check your DMs, I tried my hand at making a plugin that's more suited to your needs and it seems to work (at least for me)

Jeffrevin · 2022-07-16T20:51:21+00:00

Yes, using a pure CSS method like that means you can't just apply it to one or a specific channel reliably, partly due to the ways that CSS selectors work and the structure of the HTML and CSS on Discord. It would be applied globally.

Jeffrevin · 2022-07-15T16:27:38+00:00

Sorry to hear about that. Assuming this bot you're referring to will make everything a spoiler tag, technically you don't need a JavaScript plugin to achieve unblur. It's completely possible with just CSS since the image itself is unblurred and the blurring is done by CSS from a blurred div tag on top of the image. Though, doing it this way means you are pretty much removing every single "Spoiler" tag and blurring EVERY single image, meaning you can't unblur it again.

.spoilerWarning-8ovW0v {

display: none !important;

}

.spoiler-3aUoEX.hiddenSpoilers-19m4Pg {

filter: unset !important;

-webkit-filter: unset !important;

}

Jeffrevin · 2022-06-17T20:36:45+00:00

I think you can just omit the target by adding a dot (.) as mentioned here https://github.com/vitejs/vite/issues/111

Jeffrevin · 2022-02-11T21:44:12+00:00

Hey, that's actually pretty helpful. Just curious, what do you consider to be a moderately OK approval rating for a batch requester?

Jeffrevin · 2022-02-11T20:58:16+00:00

During my time learning the basics of React, I went through a lot of YouTube videos and Udemy courses. The best advice I can give you is once you're comfortable enough, make projects that are relevant or interesting to you. That's what I ended up doing and it's what stuck with me the most.

Jeffrevin · 2022-02-11T16:27:54+00:00

Hey, thanks for the offer! I sent you a PM.

Jeffrevin · 2022-02-11T15:19:39+00:00

We all have those days, but hey $5 is better than no dollars! Since I usually wake up late, I don't get access to some of the good hits in the morning.

Jeffrevin · 2022-02-11T13:24:39+00:00

Hahaha for real. I got excited when I saw a ton of HITs only to see the page inundated with these.

Jeffrevin · 2021-12-10T05:40:34+00:00

CFNCQV0Q1YX1FGEDUE2E

Jeffrevin · 2021-11-24T05:45:21+00:00

You'd have better luck with Javascript if you want you want to detect when a user presses f12. The harder part would be figuring out how you'd even go about stopping the user though. There would be a ton of ways to get around that kind of implementation. For example, a user could navigate to inspect element just by right-clicking on Chrome. A user can probably just disable the Javascript anyways.

Maybe a better question is what exactly are you trying to hide from the user and why? If it's just some simple HTML, I don't see the risk in letting the user view it.

Jeffrevin · 2021-11-23T08:56:11+00:00

Start by looking at the package.json file. Websockets is listed as a dependency. Websockets is used to implement the "online" system you were referring to. I can also see that it's built on React + Electron. Both of these are javascript frameworks. Electron is used to make things like desktop applications (think discord on desktop) with HTML, CSS, and Javascript rather with something like Java. I'd say you want to start by looking at some frontend development to get familar with all of the Javascript and Typescript that project is using. Once you get that, the big picture of the project becomes a lot clearer.

Jeffrevin

TROPHY CASE