Mastodon 🐘

Rosita (she/her)Still building my custom WordPress theme: Rules by Rosita. Latest: – Accessible inline SVG logo – Dynamic menu (in progress) – Custom Comments template and form – Better structure + a11y - Dynamic footerNext up: Add navigation logic, Searchresults, and build a 404 page. It’s a fun deep dive into theme development and accessibility best practicesGitHub: <a href="https://github.com/Rosita311/RulesbyRosita-theme" target="_blank" rel="nofollow noopener" translate="no">https://github.com/Rosita311/RulesbyRosita-theme</a> Example: <a href="https://rosita311.github.io/RulesbyRosita-theme/" target="_blank" rel="nofollow noopener" translate="no">https://rosita311.github.io/RulesbyRosita-theme/</a><a href="https://mstdn.social/tags/WordPress" class="mention hashtag" rel="tag">#WordPress</a> <a href="https://mstdn.social/tags/RulesByRosita" class="mention hashtag" rel="tag">#RulesByRosita</a> <a href="https://mstdn.social/tags/Blog" class="mention hashtag" rel="tag">#Blog</a> <a href="https://mstdn.social/tags/FrontEndDeveloper" class="mention hashtag" rel="tag">#FrontEndDeveloper</a> <a href="https://mstdn.social/tags/Coding" class="mention hashtag" rel="tag">#Coding</a> <a href="https://mstdn.social/tags/A11y" class="mention hashtag" rel="tag">#A11y</a> <a href="https://mstdn.social/tags/CodingProject" class="mention hashtag" rel="tag">#CodingProject</a>

Rosita (she/her)After diving into accessibility, I tried adding auto high-contrast… It gave me a real headache 😅 so I scrapped it. But! I did build a full accessibility settings menu. Now the static site is done — ready to become a real WordPress theme!GitHub: <a href="https://github.com/Rosita311/RulesbyRosita-theme" target="_blank" rel="nofollow noopener" translate="no">https://github.com/Rosita311/RulesbyRosita-theme</a> Live: <a href="https://rosita311.github.io/RulesbyRosita-theme/" target="_blank" rel="nofollow noopener" translate="no">https://rosita311.github.io/RulesbyRosita-theme/</a><a href="https://mstdn.social/tags/WordPress" class="mention hashtag" rel="tag">#WordPress</a> <a href="https://mstdn.social/tags/RulesByRosita" class="mention hashtag" rel="tag">#RulesByRosita</a> <a href="https://mstdn.social/tags/Blog" class="mention hashtag" rel="tag">#Blog</a> <a href="https://mstdn.social/tags/FrontEndDeveloper" class="mention hashtag" rel="tag">#FrontEndDeveloper</a> <a href="https://mstdn.social/tags/Coding" class="mention hashtag" rel="tag">#Coding</a> <a href="https://mstdn.social/tags/A11y" class="mention hashtag" rel="tag">#A11y</a> <a href="https://mstdn.social/tags/CodingProject" class="mention hashtag" rel="tag">#CodingProject</a>

Rosita (she/her)Just updated the link styles and improved the submenu animation on my WordPress theme project! Cleaner links, smoother UX, and better accessibility (including prefers-reduced-motion support). Even the chevron icon got a little upgrade.This template mockup website is almost finished and ready to be customized further for WordPress use.GitHub: <a href="https://github.com/Rosita311/RulesbyRosita-theme" target="_blank" rel="nofollow noopener" translate="no">https://github.com/Rosita311/RulesbyRosita-theme</a> Live: <a href="https://rosita311.github.io/RulesbyRosita-theme/" target="_blank" rel="nofollow noopener" translate="no">https://rosita311.github.io/RulesbyRosita-theme/</a><a href="https://mstdn.social/tags/WordPress" class="mention hashtag" rel="tag">#WordPress</a> <a href="https://mstdn.social/tags/RulesByRosita" class="mention hashtag" rel="tag">#RulesByRosita</a> <a href="https://mstdn.social/tags/Blog" class="mention hashtag" rel="tag">#Blog</a> <a href="https://mstdn.social/tags/FrontEndDeveloper" class="mention hashtag" rel="tag">#FrontEndDeveloper</a> <a href="https://mstdn.social/tags/Coding" class="mention hashtag" rel="tag">#Coding</a> <a href="https://mstdn.social/tags/A11y" class="mention hashtag" rel="tag">#A11y</a> <a href="https://mstdn.social/tags/CodingProject" class="mention hashtag" rel="tag">#CodingProject</a>

Rosita (she/her)Making great strides on my WordPress theme! Just added a fully functional submenu with keyboard accessibility and working on consistent focus styles to improve navigation for all users. Dark mode toggle is looking sharp, and the primary red color scheme really pops.Take a look on GitHub and try the live demo:GitHub: <a href="https://github.com/Rosita311/RulesbyRosita-theme" target="_blank" rel="nofollow noopener" translate="no">https://github.com/Rosita311/RulesbyRosita-theme</a> Live: <a href="https://rosita311.github.io/RulesbyRosita-theme/" target="_blank" rel="nofollow noopener" translate="no">https://rosita311.github.io/RulesbyRosita-theme/</a><a href="https://mstdn.social/tags/WordPress" class="mention hashtag" rel="tag">#WordPress</a> <a href="https://mstdn.social/tags/RulesByRosita" class="mention hashtag" rel="tag">#RulesByRosita</a> <a href="https://mstdn.social/tags/Blog" class="mention hashtag" rel="tag">#Blog</a> <a href="https://mstdn.social/tags/FrontEndDeveloper" class="mention hashtag" rel="tag">#FrontEndDeveloper</a> <a href="https://mstdn.social/tags/Coding" class="mention hashtag" rel="tag">#Coding</a> <a href="https://mstdn.social/tags/A11y" class="mention hashtag" rel="tag">#A11y</a> <a href="https://mstdn.social/tags/CodingProject" class="mention hashtag" rel="tag">#CodingProject</a>

Rosita (she/her)Just wrapped up the hero sections with styled dots and adaptive image ratios, fully responsive and clean. The single post now subtly echoes the dot theme without overpowering the content. Next up: designing the homepage intro section in the same playful style and working on improving scalability and performance across different screen sizes and devices.GitHub: <a href="https://github.com/Rosita311/RulesbyRosita-theme" target="_blank" rel="nofollow noopener" translate="no">https://github.com/Rosita311/RulesbyRosita-theme</a> Live: <a href="https://rosita311.github.io/RulesbyRosita-theme/" target="_blank" rel="nofollow noopener" translate="no">https://rosita311.github.io/RulesbyRosita-theme/</a><a href="https://mstdn.social/tags/WordPress" class="mention hashtag" rel="tag">#WordPress</a> <a href="https://mstdn.social/tags/RulesByRosita" class="mention hashtag" rel="tag">#RulesByRosita</a> <a href="https://mstdn.social/tags/Blog" class="mention hashtag" rel="tag">#Blog</a> <a href="https://mstdn.social/tags/FrontEndDeveloper" class="mention hashtag" rel="tag">#FrontEndDeveloper</a> <a href="https://mstdn.social/tags/Coding" class="mention hashtag" rel="tag">#Coding</a> <a href="https://mstdn.social/tags/A11y" class="mention hashtag" rel="tag">#A11y</a> <a href="https://mstdn.social/tags/CodingProject" class="mention hashtag" rel="tag">#CodingProject</a>

Rosita (she/her)I’ve updated the README for my **Rules by Rosita** WordPress theme with more details on the development process, design choices, and accessibility goals. I’ve been working on making the post-meta navigation accessible, but unfortunately, it’s not quite working as expected yet. I’ll keep refining it, but it’s proving to be a challenge.GitHub: <a href="https://github.com/Rosita311/RulesbyRosita-theme" target="_blank" rel="nofollow noopener" translate="no">https://github.com/Rosita311/RulesbyRosita-theme</a> Live: <a href="https://rosita311.github.io/RulesbyRosita-theme/" target="_blank" rel="nofollow noopener" translate="no">https://rosita311.github.io/RulesbyRosita-theme/</a><a href="https://mstdn.social/tags/WordPress" class="mention hashtag" rel="tag">#WordPress</a> <a href="https://mstdn.social/tags/RulesByRosita" class="mention hashtag" rel="tag">#RulesByRosita</a> <a href="https://mstdn.social/tags/Blog" class="mention hashtag" rel="tag">#Blog</a> <a href="https://mstdn.social/tags/FrontEndDeveloper" class="mention hashtag" rel="tag">#FrontEndDeveloper</a> <a href="https://mstdn.social/tags/Coding" class="mention hashtag" rel="tag">#Coding</a> <a href="https://mstdn.social/tags/A11y" class="mention hashtag" rel="tag">#A11y</a> <a href="https://mstdn.social/tags/CodingProject" class="mention hashtag" rel="tag">#CodingProject</a>

Rosita (she/her)I continued building my custom blog theme Today I finished the single blogpost template part.The header, cards, and single-post pages are nearly finished. The homepage, footer, still need some work. Accessibility (A11y) is also a priority.And ofcourse everything is becoming a WordPress theme eventually. GitHub: <a href="https://github.com/Rosita311/RulesbyRosita-theme" target="_blank" rel="nofollow noopener" translate="no">https://github.com/Rosita311/RulesbyRosita-theme</a> Live: <a href="https://rosita311.github.io/RulesbyRosita-theme/" target="_blank" rel="nofollow noopener" translate="no">https://rosita311.github.io/RulesbyRosita-theme/</a><a href="https://mstdn.social/tags/WordPress" class="mention hashtag" rel="tag">#WordPress</a> <a href="https://mstdn.social/tags/RulesByRosita" class="mention hashtag" rel="tag">#RulesByRosita</a> <a href="https://mstdn.social/tags/Blog" class="mention hashtag" rel="tag">#Blog</a> <a href="https://mstdn.social/tags/FrontEndDeveloper" class="mention hashtag" rel="tag">#FrontEndDeveloper</a> <a href="https://mstdn.social/tags/Coding" class="mention hashtag" rel="tag">#Coding</a> <a href="https://mstdn.social/tags/A11y" class="mention hashtag" rel="tag">#A11y</a> <a href="https://mstdn.social/tags/CodingProject" class="mention hashtag" rel="tag">#CodingProject</a>

Rosita (she/her)For the peepz who don't want to, or can't (or what ever) use Javascript. I build a non-JS fallback menu and darkmode. (I hope it stays intact in WordPress 🫣)GitHub: <a href="https://github.com/Rosita311/RulesbyRosita-theme" target="_blank" rel="nofollow noopener" translate="no">https://github.com/Rosita311/RulesbyRosita-theme</a> Live: <a href="https://rosita311.github.io/RulesbyRosita-theme/" target="_blank" rel="nofollow noopener" translate="no">https://rosita311.github.io/RulesbyRosita-theme/</a><a href="https://mstdn.social/tags/WordPress" class="mention hashtag" rel="tag">#WordPress</a> <a href="https://mstdn.social/tags/RulesByRosita" class="mention hashtag" rel="tag">#RulesByRosita</a> <a href="https://mstdn.social/tags/Blog" class="mention hashtag" rel="tag">#Blog</a> <a href="https://mstdn.social/tags/FrontEndDeveloper" class="mention hashtag" rel="tag">#FrontEndDeveloper</a> <a href="https://mstdn.social/tags/Coding" class="mention hashtag" rel="tag">#Coding</a> <a href="https://mstdn.social/tags/A11y" class="mention hashtag" rel="tag">#A11y</a> <a href="https://mstdn.social/tags/CodingProject" class="mention hashtag" rel="tag">#CodingProject</a>

Rosita (she/her)It’s been a while — hard to find time to work on the theme, but here’s a quick update: Blog cards are done, archive and page templates mostly finished. Homepage template still needs a redesign. Started on the single post template (that one is messy).Some links lead to different HTML templates. Will be turned into a full PHP-based WordPress theme.GitHub: <a href="https://github.com/Rosita311/RulesbyRosita-theme" target="_blank" rel="nofollow noopener" translate="no">https://github.com/Rosita311/RulesbyRosita-theme</a> Live: <a href="https://rosita311.github.io/RulesbyRosita-theme/" target="_blank" rel="nofollow noopener" translate="no">https://rosita311.github.io/RulesbyRosita-theme/</a><a href="https://mstdn.social/tags/WordPress" class="mention hashtag" rel="tag">#WordPress</a> <a href="https://mstdn.social/tags/RulesByRosita" class="mention hashtag" rel="tag">#RulesByRosita</a> <a href="https://mstdn.social/tags/Blog" class="mention hashtag" rel="tag">#Blog</a> <a href="https://mstdn.social/tags/FrontEndDeveloper" class="mention hashtag" rel="tag">#FrontEndDeveloper</a> <a href="https://mstdn.social/tags/Coding" class="mention hashtag" rel="tag">#Coding</a> <a href="https://mstdn.social/tags/A11y" class="mention hashtag" rel="tag">#A11y</a> <a href="https://mstdn.social/tags/CodingProject" class="mention hashtag" rel="tag">#CodingProject</a>

Rosita (she/her)The cards are done! Styling was a challenge, but I’m happy with the result. Still tweaking the “read more” and screen reader order, but for now — done! Also fixed the menu bug.Check it out: <a href="https://github.com/Rosita311/RulesbyRosita-theme" target="_blank" rel="nofollow noopener" translate="no">https://github.com/Rosita311/RulesbyRosita-theme</a> <a href="https://rosita311.github.io/RulesbyRosita-theme/" target="_blank" rel="nofollow noopener" translate="no">https://rosita311.github.io/RulesbyRosita-theme/</a><a href="https://mstdn.social/tags/WordPress" class="mention hashtag" rel="tag">#WordPress</a> <a href="https://mstdn.social/tags/RulesByRosita" class="mention hashtag" rel="tag">#RulesByRosita</a> <a href="https://mstdn.social/tags/Blog" class="mention hashtag" rel="tag">#Blog</a> <a href="https://mstdn.social/tags/FrontEndDeveloper" class="mention hashtag" rel="tag">#FrontEndDeveloper</a> <a href="https://mstdn.social/tags/Coding" class="mention hashtag" rel="tag">#Coding</a> <a href="https://mstdn.social/tags/A11y" class="mention hashtag" rel="tag">#A11y</a> <a href="https://mstdn.social/tags/CodingProject" class="mention hashtag" rel="tag">#CodingProject</a>

Rosita (she/her)Question, I really need your opinion:I have red as my brand color (<a href="https://mstdn.social/tags/E00000" class="mention hashtag" rel="tag">#E00000</a>). But I also have a more green/teal color as a contrast color, also on darkmode. My boyfriend says it clashes with the red color. And what do you think of the hover effect on the cards? Personaly I really like the pink hover effect on the cards. This is not finished yet. by the way. <a href="https://rosita311.github.io/RulesbyRosita-theme/" target="_blank" rel="nofollow noopener" translate="no">https://rosita311.github.io/RulesbyRosita-theme/</a><a href="https://mstdn.social/tags/WordPress" class="mention hashtag" rel="tag">#WordPress</a> <a href="https://mstdn.social/tags/RulesByRosita" class="mention hashtag" rel="tag">#RulesByRosita</a> <a href="https://mstdn.social/tags/Blog" class="mention hashtag" rel="tag">#Blog</a> <a href="https://mstdn.social/tags/FrontEndDeveloper" class="mention hashtag" rel="tag">#FrontEndDeveloper</a> <a href="https://mstdn.social/tags/Coding" class="mention hashtag" rel="tag">#Coding</a> <a href="https://mstdn.social/tags/A11y" class="mention hashtag" rel="tag">#A11y</a> <a href="https://mstdn.social/tags/CodingProject" class="mention hashtag" rel="tag">#CodingProject</a>

Rosita (she/her)Working on the blog cards! The design and colors are finally set, and I’m happy with the result. Making the whole card clickable turned out to be harder than expected—I failed the first time, but I’ll try again! 💪Meanwhile, the footer is almost done, and the homepage structure is in place. Check it out: <a href="https://github.com/Rosita311/RulesbyRosita-theme" target="_blank" rel="nofollow noopener" translate="no">https://github.com/Rosita311/RulesbyRosita-theme</a> <a href="https://rosita311.github.io/RulesbyRosita-theme/" target="_blank" rel="nofollow noopener" translate="no">https://rosita311.github.io/RulesbyRosita-theme/</a><a href="https://mstdn.social/tags/WordPress" class="mention hashtag" rel="tag">#WordPress</a> <a href="https://mstdn.social/tags/RulesByRosita" class="mention hashtag" rel="tag">#RulesByRosita</a> <a href="https://mstdn.social/tags/Blog" class="mention hashtag" rel="tag">#Blog</a> <a href="https://mstdn.social/tags/FrontEndDeveloper" class="mention hashtag" rel="tag">#FrontEndDeveloper</a> <a href="https://mstdn.social/tags/Coding" class="mention hashtag" rel="tag">#Coding</a> <a href="https://mstdn.social/tags/A11y" class="mention hashtag" rel="tag">#A11y</a> <a href="https://mstdn.social/tags/CodingProject" class="mention hashtag" rel="tag">#CodingProject</a>

Rosita (she/her)The header is done! 🎉 With a working dark mode and screen reader accessibility, it was a challenge to get everything right. Yesterday, my code kept breaking, and I wondered what I had gotten myself into—but I made it! Now, onto the footer. Check it out: <a href="https://github.com/Rosita311/RulesbyRosita-theme" target="_blank" rel="nofollow noopener" translate="no">https://github.com/Rosita311/RulesbyRosita-theme</a> <a href="https://rosita311.github.io/RulesbyRosita-theme/" target="_blank" rel="nofollow noopener" translate="no">https://rosita311.github.io/RulesbyRosita-theme/</a><a href="https://mstdn.social/tags/WordPress" class="mention hashtag" rel="tag">#WordPress</a> <a href="https://mstdn.social/tags/RulesByRosita" class="mention hashtag" rel="tag">#RulesByRosita</a> <a href="https://mstdn.social/tags/Blog" class="mention hashtag" rel="tag">#Blog</a> <a href="https://mstdn.social/tags/FrontEndDeveloper" class="mention hashtag" rel="tag">#FrontEndDeveloper</a> <a href="https://mstdn.social/tags/Coding" class="mention hashtag" rel="tag">#Coding</a> <a href="https://mstdn.social/tags/A11y" class="mention hashtag" rel="tag">#A11y</a> <a href="https://mstdn.social/tags/CodingProject" class="mention hashtag" rel="tag">#CodingProject</a>

Rosita (she/her)Tried to build a darkmode button in JavaScript, and it Works! 😃But only once😞You'll have to refresh the page to switch back. And really don't know how to resolve this. 🐤 Maybe its because I have two buttons? <a href="https://mstdn.social/tags/WordPress" class="mention hashtag" rel="tag">#WordPress</a> <a href="https://mstdn.social/tags/RulesByRosita" class="mention hashtag" rel="tag">#RulesByRosita</a> <a href="https://mstdn.social/tags/Blog" class="mention hashtag" rel="tag">#Blog</a> <a href="https://mstdn.social/tags/FrontEndDeveloper" class="mention hashtag" rel="tag">#FrontEndDeveloper</a> <a href="https://mstdn.social/tags/Coding" class="mention hashtag" rel="tag">#Coding</a> <a href="https://mstdn.social/tags/A11y" class="mention hashtag" rel="tag">#A11y</a> <a href="https://mstdn.social/tags/CodingProject" class="mention hashtag" rel="tag">#CodingProject</a>

Rosita (she/her)Still making progress on my WordPress theme—learning a lot along the way! 🙌- Using A Modern CSS Reset to control browser styles - Managing HTML attributes with setAttribute & removeAttribute - Working on separate branches for a cleaner workflowThe header & menu are nearly done, now tackling dark mode! Also, GitHub Copilot is a game-changer. 🚀Check it out: 🔗 <a href="https://github.com/Rosita311/RulesbyRosita-theme" target="_blank" rel="nofollow noopener" translate="no">https://github.com/Rosita311/RulesbyRosita-theme</a> 🔗 <a href="https://rosita311.github.io/RulesbyRosita-theme/" target="_blank" rel="nofollow noopener" translate="no">https://rosita311.github.io/RulesbyRosita-theme/</a><a href="https://mstdn.social/tags/WordPress" class="mention hashtag" rel="tag">#WordPress</a> <a href="https://mstdn.social/tags/RulesByRosita" class="mention hashtag" rel="tag">#RulesByRosita</a> <a href="https://mstdn.social/tags/Blog" class="mention hashtag" rel="tag">#Blog</a> <a href="https://mstdn.social/tags/FrontEndDeveloper" class="mention hashtag" rel="tag">#FrontEndDeveloper</a> <a href="https://mstdn.social/tags/Coding" class="mention hashtag" rel="tag">#Coding</a> <a href="https://mstdn.social/tags/A11y" class="mention hashtag" rel="tag">#A11y</a> <a href="https://mstdn.social/tags/CodingProject" class="mention hashtag" rel="tag">#CodingProject</a>

Rosita (she/her)Today I moved all the HTML files and Git to the theme folder in WordPress and had to do a rebase. There was also a merge conflict, resolved that as well and I also built a skip link! And did all this while having hardly any energy today. It's CP you know ;) And my shunt is acting up today, don't know why. :(. Hopefully it's getting better.<a href="https://github.com/Rosita311/RulesbyRosita-theme" target="_blank" rel="nofollow noopener" translate="no">https://github.com/Rosita311/RulesbyRosita-theme</a><a href="https://mstdn.social/tags/WordPress" class="mention hashtag" rel="tag">#WordPress</a> <a href="https://mstdn.social/tags/RulesByRosita" class="mention hashtag" rel="tag">#RulesByRosita</a> <a href="https://mstdn.social/tags/Blog" class="mention hashtag" rel="tag">#Blog</a> <a href="https://mstdn.social/tags/FrontEndDeveloper" class="mention hashtag" rel="tag">#FrontEndDeveloper</a> <a href="https://mstdn.social/tags/Coding" class="mention hashtag" rel="tag">#Coding</a> <a href="https://mstdn.social/tags/A11y" class="mention hashtag" rel="tag">#A11y</a> <a href="https://mstdn.social/tags/CodingProject" class="mention hashtag" rel="tag">#CodingProject</a>

Rosita (she/her)I started building my own Wordpress theme, first with HTML, CSS and JavaScript. Later on I'll use PHP. There is not much in it yet, but already wrote a whole story (in Dutch) in the README file. One of the blogs that inspired me, is the blog of <a href="https://fosstodon.org/@mahryekuh" class="u-url mention">@mahryekuh</a> 🥰 <a href="https://github.com/Rosita311/RulesbyRosita-theme" target="_blank" rel="nofollow noopener" translate="no">https://github.com/Rosita311/RulesbyRosita-theme</a><a href="https://mstdn.social/tags/WordPress" class="mention hashtag" rel="tag">#WordPress</a> <a href="https://mstdn.social/tags/RulesByRosita" class="mention hashtag" rel="tag">#RulesByRosita</a> <a href="https://mstdn.social/tags/Blog" class="mention hashtag" rel="tag">#Blog</a> <a href="https://mstdn.social/tags/FrontEndDeveloper" class="mention hashtag" rel="tag">#FrontEndDeveloper</a> <a href="https://mstdn.social/tags/Coding" class="mention hashtag" rel="tag">#Coding</a> <a href="https://mstdn.social/tags/A11y" class="mention hashtag" rel="tag">#A11y</a> <a href="https://mstdn.social/tags/CodingProject" class="mention hashtag" rel="tag">#CodingProject</a>

Rosita (she/her)Let's do this! I downloaded my blog and got it working in Local. Learned how to change the URL in the database, and now I am going to start to code my own theme. Oh, and I don't have a design, just some ideas👀. I want to make it accessible and scaleable and add a dark mode. My blog is still online, by the way. I am so hyped! 😱And now I have to find a way to ramble about it. 😅<a href="https://mstdn.social/tags/WordPress" class="mention hashtag" rel="tag">#WordPress</a> <a href="https://mstdn.social/tags/RulesByRosita" class="mention hashtag" rel="tag">#RulesByRosita</a> <a href="https://mstdn.social/tags/Blog" class="mention hashtag" rel="tag">#Blog</a> <a href="https://mstdn.social/tags/FrontEndDeveloper" class="mention hashtag" rel="tag">#FrontEndDeveloper</a> <a href="https://mstdn.social/tags/Coding" class="mention hashtag" rel="tag">#Coding</a> <a href="https://mstdn.social/tags/A11y" class="mention hashtag" rel="tag">#A11y</a> <a href="https://mstdn.social/tags/CodingProject" class="mention hashtag" rel="tag">#CodingProject</a>

Recent searches

Search options

Administered by:

Server stats:

#RulesByRosita