#CSS 9 hashtags

JayViiKubikPixel™
cartoon with two panels showing Santa Claus holding a cookie. In the first panel he looks happy and says 'This is how a web developer gets into the nice list!' and the code on the cookie is CSS: '#Santa .cookie { scale: 1.5 }'. In tthe second panel he looks angry and says '...And this is how they end in the naughty list!!' The cookie has some JS code: document.cookie = session_token=secretvalue;path=/

Comic: Santa's Cookies
— by comicss.art

What is delicious on the website and what is not is explained in an understandable way by Santa Clous for everyone.

🎅 comicss.art/comics/226/

#santa #cookie #js #webdev #comicss #css #cartoon #javascript #cookies #web

JayVii

Yesterday, I implemented #CSS rules in my "purpleish theme" within my #ktistec tweaks that change the display of posts in card style, similar to other social media. Also adds some very subtle shadow, which gives it a very slight 3D effect. This looks a lot more modern now, I think: https://src.jayvii.de/pub/ktistec-tweaks/commit/136cc0629bd23df71cc4969e23e6c252f847a9c6.html

Image description: Screenshot of a heavily styled ktistec instance, displaying a thread with three replies to some post. All posts appear within a dark grey card object with round corners. The reply cars are slightly indented and have a light gray border on the left side.
JayVii
JayVii

I am actually really happy about how my mobile-tweaks for #ktistec turned out. There was a lot of #CSS hacking involved, but I am pretty happy with the results :)

Here's a little video of how it looks:

Bildschirmaufzeichnung vom 2024-08-08, 18-28-20.webm 187.76 KB
JayVii

I finally transferred almost all my webtools to SimpleCSS, for example the #goaccess dashboard for privacy preserving web traffic measurements:

https://src.jayvii.de/pub/goaccess_dashboard/ (see it in action here: traffic.jayvii.de

Or other tools such as a barebones youtube-feed yt2html, twitch-feed tw2html, youtube-to-podcatcher service yt2rss, ...

I really like the idea of simple and classless #CSS. It helped me improve the visuals of my #PHP services quite a lot!

JayVii

Also added a docker-compose file for (even) easier deployment of #ktistec, as well as some notes on #backup management. The #CSS has also been improved in the meantime. I added deployment-notes for those too!

https://src.jayvii.de/pub/ktistec-tweaks

JayVii

Started working on some tiny #ktistec end-user hacks: https://src.jayvii.de/pub/ktistec-tweaks

For now only a user #CSS theme i dupped "purple-ish": https://src.jayvii.de/pub/ktistec-tweaks/file/css/purpleish.css.html

Maybe more to come in the future. Or not, we'll see :)

JayVii

My extension & adaptation quest of #stagit goes on next week! I implemented basic functionality that automate mosts common tasks a while back already. Implemented dynamic #CSS themes earlier this year and a more modern look in the past week (as well as a summary page for every repository). Next week, I want to bring the menu bar to a more modern design:

https://src.jayvii.de

JayVii

Did some more #CSS hacking on my #stagit server: src.jayvii.de #git #selfhosting

The table-layout scheme used by stagit is simplistic and gives a great quick overview over repos, commits, etc. But it just doesn't work well on mobile devices and looks awfully outdated.

So I reform the tables to a more modern GitLab-inspired look just with a few lines of CSS.

Here are a few before and after screenshots:

Image description 1: Screenshots of the repository index page in mobile mode. On the left side is the old version with "normal" table. Each repository is listed as a single row of a table. The text overflows to the right, so the description is only partially visible and repository-owner and date of last commit are not visible at all. On the right side is the new version, which looks a lot more modern by giving each field full-width, meaning that each "row" of the table is not below each other rather than next to each other. Separating lines between each repository as well as repository names styled as headlines make differentiation easy and give it a more modern look.
Image description 2: Two screenshots of the commit log of the "stagit-jayvii.de" repository, which is similarly layed out as on the first image of this post. On the left side is the old version, whereas commit messages are only partially visible due to overflowing text and comitting user as well as number of modified files and lines are not visible at all. On the right side is the new vertically aligned version, which makes browsing the commits of a repository on mobile devices a lot easier.