Font size improvements for www.xfce.org

Daffy Duck <[email protected]>
Newsgroups gmane.comp.xfce.user
Message-ID <g2Q8m2Bf854ITYm0nkU1iY21wyM4iduM8rKSyCrcXrgk-MKcnEFuSHhtQfMdR0xy1_z-MAZyScR25UX_vJCi5aKEqOnUq2LvSo-U7FufhUk=@proton.me>
This mail is about font size improvements to the www.xfce.org webpage (home page).

I am posting this to the mailing list because I still haven't received the login credentials for gitlab.xfce.org that I previously requested here:
https://mail.xfce.org/pipermail/xfce/2026-August/038583.html

At the www.xfce.org webpage, the text font size computes to 12.8 px. This alone makes the site look significantly outdated. Therefore, the primary improvement should be to increase the base font size to 17 px, which is the current standard for modern design. Other changes are secondary to this.

Adding the following CSS to the top of site_www.css achieves this result, although I have not resized any images:

	body {font-size: 17px; }
	#xfce-header {font-size:96%;}
	#mainnav {font-size:96%;}
	#mainnav #languageform select {font-size:96%;}	
	#top .rss {font-size:90%;}
	#article { line-height: 1.6em; }

In general, I find the current structure of the website satisfactory and would prefer that it not be significantly revamped.

There is a related issue already reported (on May 10, 2023), regarding mobile-friendliness of the website:
https://gitlab.xfce.org/www/www.xfce.org/-/work_items/36

Adding the following CSS (to the top of site_www.css) would resolve the layout issues on tablets and mobile devices:

	@media screen and (max-width: 1030px) 
	{
		body {font-size: 16px; }
		#main  { min-width: initial; }
		#main .frontpage_cols {  flex-direction: column; }
		#main .frontpage_cols .column { max-width: 95%; }
	}	
	@media screen and (max-width: 600px) 
	{
		body { font-size: 15.3px; }
		#article { line-height: 1.5em; }
		#xfce-header ul { padding-top: 1em; }
	}

Finally, there is a bug in the header where an unnecessary &nbsp; interferes with element positioning:

	<h1 id="xfce-header-title">Xfce</h1>
	<h2 id="xfce-header-subtitle">Subdomains</h2>
	&nbsp;

Removing that whitespace fixes positioning glitches visible in mobile layouts, though it requires adjusting the padding for mobile screens (max-width: 600px) to:

	#xfce-header ul { padding-top: 2.4em; }

Regards, 
	daffyduck
_______________________________________________
Xfce mailing list
[email protected]
https://mail.xfce.org/mailman/listinfo/xfce
http://www.xfce.org
lmpx.com only provides a reader for public news (NNTP) servers. It is not affiliated with the servers or forums shown here and is not responsible for the content of articles, which is written by their respective authors.