Simple Machines Community Forum

General Community => Site Comments, Issues and Concerns => Topic started by: spiros on June 09, 2020, 02:27:37 PM

Title: Dark theme for this site?
Post by: spiros on June 09, 2020, 02:27:37 PM
Would be good to have a dark theme option given the availability of so many dark themes.
Title: Re: Dark theme for this site?
Post by: Deaks on June 09, 2020, 02:34:39 PM
SMF has always used the default with no modifications or little, so I cannot see this happening.  In honesty their is an accessibility argument here.  I know K@ used a browser addon and forced the css to have a dark theme as he needed it so it is possible using external methods.
Title: Re: Dark theme for this site?
Post by: spiros on June 09, 2020, 02:42:44 PM
I am not talking about the main theme being a dark theme, I am talking of having the option to select a dark theme as a user. In all honesty, I cannot see why this could not happen.

I use browser add-ons for dark theme, but current themes do not look good in them due to heavy image use. You are correct, this is an important accessibility issue, SMF should be accessible.
Title: Re: Dark theme for this site?
Post by: Arantor on June 09, 2020, 02:46:15 PM
There are some technical considerations that make this difficult to manage on this site.

Not to mention the maintenance of it in future SMF editions.
Title: Re: Dark theme for this site?
Post by: spiros on June 09, 2020, 02:48:57 PM
I don't thing that much maintenance is required. Just install a working theme. Something, even if imperfect, is better than nothing. Checking the stats for this site's use of alternative themes:

The default theme from Simple Machines.
7 people are using this theme.

The default theme of SMF's previous incarnation, codenamed Core.
11 people are using this theme.

I doubt there is much maintenance going on on these themes.
Title: Re: Dark theme for this site?
Post by: Arantor on June 09, 2020, 02:52:04 PM
You're assuming the theme is on the same server as the forum itself.

Which given that the URLs for the default theme images are not even on the same *domain* isn't a given. (They're served from https://static.simplemachinesweb.com/smf/default/images/ in case you're wondering).

You're also assuming that this wouldn't immediately be a second class citizen (like the way the session check was introduced in 2.0.14 Curve but not in 2.0.14 Core).

But I'm sure you understand the server architecture and setup of the server here more than I do or what's involved in the practicalities of this.

I'd also point out that 2.1 isn't even shipping an update of Curve for 2.1, when you upgrade you get that theme and nothing else. No backwards compatibility.
Title: Re: Dark theme for this site?
Post by: Ricky. on June 09, 2020, 02:55:43 PM
There is multi-variant theme feature in SMF (same theme, multiple CSS), may be use it .
Title: Re: Dark theme for this site?
Post by: spiros on June 09, 2020, 02:59:08 PM
But I'm sure you understand the server architecture and setup of the server here more than I do or what's involved in the practicalities of this.

I doubt I understand something with respect to SMF or server architecture better than you do -:)

On the other had, I did already know about static files being served from a different domain. It still beats me why simply installing an extra theme would be such a major undertaking.

Ideally, the main theme should have the ability to switch to a different css scheme, not being heavy on image use would make that easier.

Anyway, thoughts for a more accessible future for all.
Title: Re: Dark theme for this site?
Post by: Arantor on June 09, 2020, 03:11:57 PM
Because the theme doesn't live on the same server... that's the point.

SMF does have a variant system, but even then it would still immediately become a second class citizen much the way RTL already is.
Title: Re: Dark theme for this site?
Post by: Illori on June 09, 2020, 03:15:40 PM
We also have some custom features in our theme. If we gave more options then that is more for our small site team to support. So much more likely that it could be removed due to lack of time. Then we get more complaints.
Title: Re: Dark theme for this site?
Post by: m4z on June 09, 2020, 04:10:55 PM
2.1 will have the Curve2 color changer (https://custom.simplemachines.org/mods/index.php?mod=4231) (sadly, IIRC it only works on the default theme, so you can't set multiple color schemes; schemes can't be exported to a (file system) theme copy; and it can't be used by individual users for themselves, only by the admin).

I personally use global style changers like the Stylus add-on with a "global dark" userstyles.org theme in Chromium, or the "dark background with light text" (IIRC) add-on in Firefox.
Title: Re: Dark theme for this site?
Post by: Sir Osis of Liver on June 09, 2020, 05:02:34 PM
It's always been my feeling that this forum should have done more to demonstrate the flexibility, both visually and functionally, of the software.  This site looks pretty much (exactly?) the same as it has since 2.0 was officially released (9 years ago Thursday!), that's a very long time for anything software-related.  Rotating themes, featured mods, there's so much can be done with SMF, it's a shame no attempt was made to promote it here.  I appreciate the maintenance hassles it would create, but still, it seems a missed opportunity.
Title: Re: Dark theme for this site?
Post by: Arantor on June 09, 2020, 05:06:41 PM
This site was always meant to keep to the default theme in general so that it's a showcase of what you get out of the box.

Every time mods are used here, people ask how they're configured as though they're core features.

That said I miss smsite2 as a theme and wish we could have that back, I always preferred it to Curve.
Title: Re: Dark theme for this site?
Post by: Sir Osis of Liver on June 09, 2020, 05:30:56 PM
Well, what about 2.1 Curve2?  It's very similar to Curve.  IIRC, Kindred had done some really nice looking color variants while 2.1 was still alpha, but Curve2 ends up being very bland. :P  After all this time in development, I'd prefer to see 2.1 come out with a whole new look.
Title: Re: Dark theme for this site?
Post by: Arantor on June 09, 2020, 05:31:29 PM
Then you guarantee it'll take even longer to change it AGAIN.
Title: Re: Dark theme for this site?
Post by: Sir Osis of Liver on June 09, 2020, 05:35:36 PM
I believe what Kindred did on a test install was all css, so it shouldn't be too difficult to change.  Wonder if he still has it?
Title: Re: Dark theme for this site?
Post by: gecitli on June 10, 2020, 11:40:51 AM
I think this topic will help you.

Demo (https://webtiryaki.com/index.php/topic,544.0.html)
Title: Re: Dark theme for this site?
Post by: Kindred on June 10, 2020, 11:44:23 AM
you mean this?

https://test2.turtleshellprod.com/

I'm still working on getting that tweaked for my client before 2.1 final comes out...
and I need to put the "palette choice" option back in.

but yes, it's all CSS (except for the palette chooser)



I think this topic will help you.

That's source changes....   which we have already explained why we don't do that here/
Title: Re: Dark theme for this site?
Post by: Arantor on June 10, 2020, 11:45:16 AM
I would be concerned if the SMF team were not capable of implementing this on their own site, but it isn’t the simple case people make it out to be because this site has a ton of integration work, not to mention the multiple server front ends required to service it.

The skill is here to do it, but there are better things to spend the limited developer time available on.
Title: Re: Dark theme for this site?
Post by: Sir Osis of Liver on June 10, 2020, 12:19:59 PM
you mean this?

https://test2.turtleshellprod.com/


Yes, that's it. :)  Will that be available on theme site or is it strictly a custom job for client?
Title: Re: Dark theme for this site?
Post by: Kindred on June 10, 2020, 01:58:52 PM
well, the specific background images and brand images would be custom. :)

I may make it available at some point.   It's a port of Bloc's 2.0 Studio003 theme look/feel

but it would probably not make much sense to use that theme here on simplemachines.org...
Title: Re: Dark theme for this site?
Post by: live627 on June 10, 2020, 07:10:09 PM
smsite2
Party like it's 2009!
Title: Re: Dark theme for this site?
Post by: Arantor on June 10, 2020, 07:16:01 PM
Because I'm a nerd.
Title: Re: Dark theme for this site?
Post by: Antechinus on June 10, 2020, 07:27:34 PM
I'd forgotten that one existed.

It did occur to me that it wouldn't be that difficult to grab the CSS for Prince of Darkness or Chocolate Curvaceous and throw it into Stylem (or Stylus or Stylish, as you prefer). Anyone could do that if they really want a dark theme for this site. You could even add some basic responsive bits.

Meh. I might do it just for fun. I have been idly thinking of updating those themes.
Title: Re: Dark theme for this site?
Post by: Gwenwyfar on June 11, 2020, 03:32:03 AM
Cards are always fun :D
Title: Re: Dark theme for this site?
Post by: Antechinus on June 13, 2020, 07:53:03 PM
I am not talking about the main theme being a dark theme, I am talking of having the option to select a dark theme as a user. In all honesty, I cannot see why this could not happen.

I use browser add-ons for dark theme, but current themes do not look good in them due to heavy image use. You are correct, this is an important accessibility issue, SMF should be accessible.

You can try this. I did a quick revamp of one of my old dark themes (Chocolate Curvaceous) and I'm running it in Stylem at the moment.  Stylish or Stylus would also work, of course. I'm quite liking it, now that you got me motivated. It gives a rather nice dark theme here, still in the Curve style, without dumping extra maintenance responsibilities on the SMF team.

The CSS could still do with a bit of cleaning up, but is pretty decent considering it has to run on top of what is here. Most images have been ditched, with only a few essential ones remaining, and those have been tweaked with CSS filters so they don't look too bad.

It has basic responsive behavior on desktop, but I suspect that the site's lack of a viewport meta tag may screw with the responsiveness on mobile (have not tested this, as I don't use mobile for browsing). Also note that at the moment it has only been tested on this domain (home & forum). I haven't yet tried to make it compatible with the downloads/customize sites, but that would obviously be feasible.

Anyway, feel free to throw the CSS in a browser add-on and see what you think. :)

PS: I also made the drop menus less twitchy. ;)
Title: Re: Dark theme for this site?
Post by: spiros on June 14, 2020, 07:08:19 AM
Looks amazing! I added it here as well https://userstyles.org/styles/185187/dark-smf (Stylish for Chrome - https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en)
Title: Re: Dark theme for this site?
Post by: Arantor on June 14, 2020, 07:16:25 AM
Huh, did they rerelease Stylish without the nasty tracking everything you do and phoning home with it?
Title: Re: Dark theme for this site?
Post by: Antechinus on June 14, 2020, 07:28:24 AM
Stylish has the tracking. :P
Stylus doesn't. :) You can get that here: https://add0n.com/stylus.html
Neither does Stylem (for Pale Moon). Which obviously is my favourite: https://addons.palemoon.org/addon/stylem/

I wouldn't have gone as far as adding it to userstyles quite yet, because I can see it getting more tweaking (and basic code clean up) but I'm fine with you doing it anyway as long as I don't have to support that version.

It's a bit off though, because the new.gif's are the wrong color. This could be because of your language selection. There's a site bug at the moment in that the old (blue) new.gif somehow got uploaded for English. The filter in the CSS was set for that, so would look wrong with an orange gif. Easy to fix. Just remove this from the CSS:

Code: [Select]
  img[src*="new.gif"] {
    filter: hue-rotate(160deg) brightness(1.1);
    border: 1px solid blue;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px blue;
 }
Title: Re: Dark theme for this site?
Post by: Bloc on June 14, 2020, 06:36:23 PM
Nowadays I do all my CSS editing in Stylus, its just sooo easier to see changes right away. Combined with Vivaldi's option to show 2 windows side by side its a killer setup for doing any css work IMHO.
Title: Re: Dark theme for this site?
Post by: Antechinus on June 14, 2020, 07:44:36 PM
I do a fair bit in Stylem (or Stylus when I'm using another browser) but for testing on local it's better in some ways to still use Notepad++. Page reloads are near enough to instant anyway, and you get the benefit of extra functionality in the editor. But I do have quite a few WIP theme ideas sacked up in Stylem, which I switch on and off as the mood takes me. :)
Title: Re: Dark theme for this site?
Post by: Bloc on June 15, 2020, 12:25:03 PM
Yes, Editplus, my long time writing pal is always open so its just nice to have Stylus side by side with the live page, especially when I also use the inspector to find out what went wrong..I also use a small extension for Chrome/Vivaldi called Hard Refresh - you can set what to erase, cache, cookies, just css files etc. Often a regular hard refresh will log you out, but not with this one. Very helpful for javascript file changes.

Speaking of localhost...and since we are on the subject anyway :) I've used Xampp for years but recently switched to Laragon. Its faster, can do SSL(ish) and custom domains(at least xxx.test sites) on localhost and can switch PHP versions as well if the need arise. But best of all is the automation where you create a blank site "mysite" whereby database "mysite" and domain "mysite.test" + a folder in the www folder called "mysite" is created. I am sure devs around here know this already, but for me its real gem to have in my toolbox.
Title: Re: Dark theme for this site?
Post by: Antechinus on June 15, 2020, 05:11:58 PM
Haven't tried it. I'm still using Vertrigo for local. It was idiot-proof back when I started coding, and still seems to be. :)
Title: Re: Dark theme for this site?
Post by: lurkalot on June 17, 2020, 03:36:37 AM

Speaking of localhost...and since we are on the subject anyway :) I've used Xampp for years but recently switched to Laragon. Its faster, can do SSL(ish) and custom domains(at least xxx.test sites) on localhost and can switch PHP versions as well if the need arise. But best of all is the automation where you create a blank site "mysite" whereby database "mysite" and domain "mysite.test" + a folder in the www folder called "mysite" is created. I am sure devs around here know this already, but for me its real gem to have in my toolbox.

Thanks for the heads up on this, I'm just giving Laragon a try.  Only been playing for a few minutes very impressed already.  Starts a lot faster than Xampp, and the clone project feature is great.  Within a few minutes had my first Laragon test site up, and cloned a working copy of it.  Obviously had to run repair settings on the clone but it did everything else for me in a couple of clicks.  Nice.  8)
Title: Re: Dark theme for this site?
Post by: Bloc on June 17, 2020, 12:36:36 PM
Yes, it takes away the boring chore of setting things up. :)
Title: Re: Dark theme for this site?
Post by: Antechinus on June 18, 2020, 12:24:43 AM
Ok, got another one. This has turned into one of my all-time favourites, so I'll also be doing it as an installable custom theme on the Theme Site. IOW, the whole kaboodle, with templates and language files and all the usual stuff that themes have. I'm thinking I'll make it a three variant dark theme: this one (Blue Steel) + Chocolate Curvaceous (the dark brown one I posted earlier) + Prince of Darkness, all updated to the style of this variant.

In the meantime it's CSS only, on this site's markup, so it can be dropped into Stylus or Stylem for browsing on smf.org. It handles the non-forum areas as well as the forum. In other words, it works fairly well with everything in the site menu (at the top right of the forum header).

Do note that this is a pile of overrides for this site's code and should not, this means NOT, be taken as a guide for how to write good CSS in general. Lots of it is seriously horrible, because it had to be to work on top of what is in this site's files. If being done from scratch, as a pure custom theme, it could be done a lot cleaner and simpler.

The CSS file has been minified, so formatting is not particularly friendly, but it all works AFAICT. Code allows for basic responsiveness, but I can't guarantee how that will behave with this site's lack of the usual viewport meta tag.

I have implemented pure CSS "New" icons because I hated the old new.gif. This means it can't pick up the default language strings, so if you don't want it to say "New" in English you'll have to edit the CSS to your preferred language. I have put this at the end of the file so it's easy to find and edit.

 
Code: [Select]
/* Pure CSS "New" icons: board index, message index, unread. */
/* English default. Examples provided for French and German. */
/* Edit content text to suit your preferred language. */
/*
content:'nouveau';
content:'neu';
*/
.children .new_posts+a::after,.topic_table a[id*=newicon]::after{content:'new';background:#55677b;color:#ffe3ad;font-weight:700;font-size:1rem;padding:0 4px;text-transform:uppercase;text-shadow:0 0 1px #000}.children .new_posts+a:hover,.topic_table a[id*=newicon]:hover{text-decoration:none;border-color:#55677b;transition:border-color .1s step-end}}

The only part you have to change if you do not want English is where it says content;'new';

The screenshots show how the theme looks when running live in Pale Moon with the Stylem add-on. Do note that at this stage there is no support for RTL languages.
Title: Re: Dark theme for this site?
Post by: Bloc on June 18, 2020, 01:53:34 AM
Looks very nice :) Tested in Stylus, no problems reported.

This actually looks like fun - styling up this site like that. :D
Title: Re: Dark theme for this site?
Post by: Antechinus on June 18, 2020, 02:17:17 AM
It has been quite good fun, although the code you have to work with is pretty damned horrendous in places. It gets you thinking though, because you are forced to use what's there and can't do any of the usual stunts like rewriting anything that's a PITA.

I came up with a range of handy little tricks, including such things as declaring a 50% border-radius on the default smiley gif's to make them look decent on a dark background. And then there's the playing with filters to re-style existing icons. That's quite handy. I remember when we were first talking about CSS filters and we thought there wouldn't be much use for them in practice. Turns out there is. :)
Title: Re: Dark theme for this site?
Post by: spiros on June 18, 2020, 02:56:24 AM
This is stunningly good work! I switched to Stylus from Stylish, the only issue being that I could not find many public templates for third sites (i.e. github, linkedin).
Title: Re: Dark theme for this site?
Post by: Antechinus on June 18, 2020, 03:00:04 AM
The same code will run in any of these add-ons. It's all just CSS with an @document header to define the domain(s) you want it to work on. You can grab the guts out of any user style and apply it to any domain (although obviously it may not look good on the wrong sites).
Title: Re: Dark theme for this site?
Post by: Arantor on June 18, 2020, 03:39:25 AM
This is stunningly good work! I switched to Stylus from Stylish, the only issue being that I could not find many public templates for third sites (i.e. github, linkedin).

They’re the same thing, except for one being a fork of the other with all the “report on all your browsing” removed.
Title: Re: Dark theme for this site?
Post by: Antechinus on June 22, 2020, 06:54:25 AM
Ok, here's an update of the theme that was posted back here (https://www.simplemachines.org/community/index.php?topic=573662.msg4060914#msg4060914).

Updated version is about as good as I can make it, given what I have to work with. Should be free of bugs (the earlier version had a few) and is a bit more refined in general. Contains even more cunning trickery and eye candy, and even more rampant abuse of !important to shortcut horrendous strings of selectors.

Zip contains a fully formatted CSS file (if you want to mess around with it) and a minified CSS file (if you just want to use the thing) and a readme (which you should read*).

Code can be dropped into Stylus (https://add0n.com/stylus.html) (for Chrome, Firefox and Opera) or Stylem (https://addons.palemoon.org/addon/stylem/) (for Pale Moon).

*(...but probably won't :P ).
Title: Re: Dark theme for this site?
Post by: spiros on June 22, 2020, 08:37:10 AM
I wish there was an easy way for people accessing this site (and are not aware of this post) to benefit from this option. Maybe some sort of "dark mode" link?
Title: Re: Dark theme for this site?
Post by: Kindred on June 22, 2020, 10:55:19 AM
... ... ... already explained why not.
Title: Re: Dark theme for this site?
Post by: Bloc on June 22, 2020, 05:51:41 PM
Ok, here's an update of the theme that was posted back here (https://www.simplemachines.org/community/index.php?topic=573662.msg4060914#msg4060914).

Updated version is about as good as I can make it, given what I have to work with. Should be free of bugs (the earlier version had a few) and is a bit more refined in general. Contains even more cunning trickery and eye candy, and even more rampant abuse of !important to shortcut horrendous strings of selectors.

Zip contains a fully formatted CSS file (if you want to mess around with it) and a minified CSS file (if you just want to use the thing) and a readme (which you should read*).

Code can be dropped into Stylus (https://add0n.com/stylus.html) (for Chrome, Firefox and Opera) or Stylem (https://addons.palemoon.org/addon/stylem/) (for Pale Moon).

*(...but probably won't :P ).

Darn. Now you got me hooked too. :P

Very nice indeed, genuine dark(ish) version of the site..and even with the distinct top/bottom links added. :D I will need to study the css abit but already tried the target-anywhere option.
Title: Re: Dark theme for this site?
Post by: Bloc on June 22, 2020, 05:56:48 PM
I wish there was an easy way for people accessing this site (and are not aware of this post) to benefit from this option. Maybe some sort of "dark mode" link?
Its a little work to setup to begin with - but start using Stylus/Stylish and you won't regret it. Used it on some sites that need quick fixes(and using to develop new sites even)..or just for the fun of it. But its always going to be a manual affair, I doubt any site will promote any use of styling their content.
Title: Re: Dark theme for this site?
Post by: Antechinus on June 22, 2020, 06:11:07 PM
Target anywhere? Maybe I need more coffee, but I don't understand that at the moment. :)

You won't stay hooked. Trust me on that. The code here is bloody horrible. :D But turning it into a stand-alone custom theme is going to be fun. That's the pay-off. I figured out most of the detailing I want while doing this thing, so the theme is 99% sorted.

Hey funny thing about board index layout. The Mutant Curve uses a max-width of 88em, simply because that suits my preference for a post content area around 1000px max on desktop. I find once it starts getting over that sentences start getting irritatingly long. You can still read them just fine, but there's a subtle niggle compared to shorter ones.

So Mutant's board index layout was developed for that width (and for ease of stacking on narrower screens) and it looks well-balanced at that width. This one uses 104em max-width, because I was using a more traditional board and message index layout (due to not wanting to go full bananas on the CSS) and that looks most balanced around 104em wide. At 88em it looks a tad stunted, while at 104em the Mutant layout looks a tad lost in space.

Sentences in posts are still ok at 104em wrapper width, but are definitely nudging the outer limits. Not that most people will notice, because they're used to it being stupid wide* so will regard the annoyance as a normal web experience.

*Honestly, on a modern 2560 monitor a 90% wrapper width really is stupid. There are other words to describe it, but they're even less polite. :D
Title: Re: Dark theme for this site?
Post by: Antechinus on June 22, 2020, 06:32:22 PM
I wish there was an easy way for people accessing this site (and are not aware of this post) to benefit from this option. Maybe some sort of "dark mode" link?

I can always add the thing to the downloads for my Mutant Curve. Or I suppose (if you can talk the team into it) there could even be a sticky in this board for in-browser dark variants, or even for any variants at all. If anyone wants to promote the flexibility of SMF theming this wouldn't be such a bad way of doing it. Provided, of course, that support for said variants was not dumped on the SMF team (who wouldn't want to know about it).

I have even considered using something like Greasemonkey to inject a viewport meta tag into the DOM. That would open up scope for doing genuinely responsive variants on smf.org, although obviously running a custom script is an extra hoop for newbies to jump through, so probably a tad too scary.
Title: Re: Dark theme for this site?
Post by: Bloc on June 22, 2020, 07:39:45 PM
Target anywhere? Maybe I need more coffee, but I don't understand that at the moment. :)

You won't stay hooked. Trust me on that. The code here is bloody horrible. :D But turning it into a stand-alone custom theme is going to be fun. That's the pay-off. I figured out most of the detailing I want while doing this thing, so the theme is 99% sorted.

Hey funny thing about board index layout. The Mutant Curve uses a max-width of 88em, simply because that suits my preference for a post content area around 1000px max on desktop. I find once it starts getting over that sentences start getting irritatingly long. You can still read them just fine, but there's a subtle niggle compared to shorter ones.

So Mutant's board index layout was developed for that width (and for ease of stacking on narrower screens) and it looks well-balanced at that width. This one uses 104em max-width, because I was using a more traditional board and message index layout (due to not wanting to go full bananas on the CSS) and that looks most balanced around 104em wide. At 88em it looks a tad stunted, while at 104em the Mutant layout looks a tad lost in space.

Sentences in posts are still ok at 104em wrapper width, but are definitely nudging the outer limits. Not that most people will notice, because they're used to it being stupid wide* so will regard the annoyance as a normal web experience.

*Honestly, on a modern 2560 monitor a 90% wrapper width really is stupid. There are other words to describe it, but they're even less polite. :D

target-anywhere as in targeting any attribute of a node..but yes, agreed on 90% width is just plain silly on wide displays. I actually gone another route of applying a padding at the sides of 10vw, going down to 5vw below 1400px and finally staying with 1rem below 1200px, that seems to work out fine for me.

Yes, the code is difficult..but we know that from starting every new theme copying the default code, nothing new under the sun and for me at least, its a code I know very well having mangled it so many times :) Yes, I am still hooked, as in nearly finishing my first ever SMF-site styling for Stylus/Stylish. :)

I wish there was an easy way for people accessing this site (and are not aware of this post) to benefit from this option. Maybe some sort of "dark mode" link?

I can always add the thing to the downloads for my Mutant Curve. Or I suppose (if you can talk the team into it) there could even be a sticky in this board for in-browser dark variants, or even for any variants at all. If anyone wants to promote the flexibility of SMF theming this wouldn't be such a bad way of doing it. Provided, of course, that support for said variants was not dumped on the SMF team (who wouldn't want to know about it).

I have even considered using something like Greasemonkey to inject a viewport meta tag into the DOM. That would open up scope for doing genuinely responsive variants on smf.org, although obviously running a custom script is an extra hoop for newbies to jump through, so probably a tad too scary.

Thats a great idea..well, maybe a tad bit off the top for most users to add in Greasemonkey(or Tampermonkey) to add the needed meta tag..and I guess its a whole new level to tackle when making it phone-friendly.. I think I'll rather change the template too then and then its out of scope for this particular project anyway.
Title: Re: Dark theme for this site?
Post by: Gwenwyfar on June 27, 2020, 11:58:25 AM
Quote
*Honestly, on a modern 2560 monitor a 90% wrapper width really is stupid. There are other words to describe it, but they're even less polite. :D
Finally, someone that understands :D

Honestly, this is why we should start using some of that space to add menus or other such things, instead of stacking everything vertically then stretching a 100% width ON-YOUR-FACE image and then adding a title with 3 words that occupies all that space.

People, a site isn't a ******ing billboard. I have taken to using things at 80% size lately to make it more bearable.


And btw, this is looking quite good :)
Title: Re: Dark theme for this site?
Post by: Antechinus on June 27, 2020, 05:21:38 PM
Even 80% is too much, IMO. My 2c is max-width is the one to use and % is irrelevant, since what I am primarily wanting to do is keep lines of text to a reasonable length. This is basic typography stuff. Lines of text five miles long are a PITA to read, so size content to a reasonable maximum line length. The most logical unit to use is em (or rem, if you prefer) since that relates to number of characters, which is the relevant thing to measure against. :)

And yes, it is looking quite good. I knew that. :D Icons are a tad sucky, but for general distribution I thought I should stick with default icons (although I did consider loading a folder of custom ones online and calling those).
Title: Re: Dark theme for this site?
Post by: spiros on June 28, 2020, 08:05:51 AM
Just an idea to reduce image use in the themes proper you are working on, replacing blockquote image, I implemented FA on Timeless theme:

Code: [Select]
.bbc_standard_quote::before {
    content: "\f10d";
    font-family: 'Font Awesome 5 Free';
    color: gray;
    position: absolute;
    font-weight: 900;
    left: 4px;
    top: 2px;
}

You could use pure css of course:

Code: [Select]
.bbc_standard_quote::before {
    content: "\201C";
    font-family: 'Georgia';
    color: gray;
    position: absolute;
    left: 4px;
    top: 10px;
    font-size: 30px;
}
Title: Re: Dark theme for this site?
Post by: Antechinus on June 28, 2020, 08:14:13 AM
That requires calling Font Awesome, which is not part of this site. The idea with these is to run CSS-only on top of this site's code. FA is a whole 'nother ball game. Sure, you can use FA for a custom theme if you want to, but that's not the same thing as these overrides.

And frankly you don't even need FA for basic things like a quote mark. You could do it just with html.
See: https://www.toptal.com/designers/htmlarrows/punctuation/

(TBH I only left the quote mark image in because it was already there. I've never liked it much, and would probably ditch it for my own use.)
Title: Re: Dark theme for this site?
Post by: spiros on June 28, 2020, 08:38:11 AM
The 2nd version is pure css. I used FA well, because it was already there as part of the theme.
Title: Re: Dark theme for this site?
Post by: Antechinus on June 28, 2020, 06:17:30 PM
Fair enough.
Title: Re: Dark theme for this site?
Post by: Gwenwyfar on June 29, 2020, 04:30:49 PM
Even 80% is too much, IMO. My 2c is max-width is the one to use and % is irrelevant, since what I am primarily wanting to do is keep lines of text to a reasonable length. This is basic typography stuff. Lines of text five miles long are a PITA to read, so size content to a reasonable maximum line length. The most logical unit to use is em (or rem, if you prefer) since that relates to number of characters, which is the relevant thing to measure against. :)

And yes, it is looking quite good. I knew that. :D Icons are a tad sucky, but for general distribution I thought I should stick with default icons (although I did consider loading a folder of custom ones online and calling those).
Oh, I mean I'm scaling sites down to 80% scale, not the max width. Got confusing there. I think the readability limit is somewhere around 1200px, which is what I set 2.1 to. I'd prefer smaller, myself.

But pretty much. Not to mention when one thing is in one side and the equivalent thing is on the other side riiiiiight there and you have this effing huge white space in the middle :P
Title: Re: Dark theme for this site?
Post by: Antechinus on June 29, 2020, 06:34:37 PM
Yup. My preference is around 1000px max for actual post content, but I'm even perfectly happy with 800px. El Darko Magnifico is set to 1200px post content, which as you say is about the upper limit for anything approaching sanity.
Title: Re: Dark theme for this site?
Post by: Gwenwyfar on June 30, 2020, 10:06:50 AM
Pretty much.

I wish cm/mm was a usable unit sometime soon, it would make sense to measure some things according to their (approximate as it may be) real size. Specially as px is getting out of hand with every monitor having a different size.

But it would require screens to report their physical size, and that the browser somehow knows that size and the resolution to calculate it against. So who knows how that's gonna go.

Maybe if it could be made into a manual input... but who's gonna be arsed to grab out a ruler and configure their screen size? :P
Title: Re: Dark theme for this site?
Post by: Arantor on June 30, 2020, 12:57:57 PM
It'll go badly because the Windows display API can't get this right. Better on Linux, incidentally.
Title: Re: Dark theme for this site?
Post by: Antechinus on June 30, 2020, 06:27:50 PM
I can't see anything wrong with using em and rem. Things on the web are generally sized around making them readable, so em and rem seem like the logical units to use.
Title: Re: Dark theme for this site?
Post by: Gwenwyfar on July 03, 2020, 09:57:20 AM
There's nothing wrong with em and rem where it refers to scaling everything around font size, but even font size itself might make more sense to size in cm/mm depending on the situation. Width limit also does (it's more about the physical size than font size, after all. A larger font may go all the way to 2000px if you decide to limit width on em, which might be way over half a meter depending on the monitor, but might be smaller in another.)

There's already some funky stuff going on to try to make things somewhat consistent when 1 real px in a monitor can be half the size of a px in another.

So basically, you could use cm/mm to define key points where real size matters more than scaling it around it. You could define a font in mm, then use rem/em through the rest of the css to scale everything accordingly. Remember, proportions are important, so rem/em will always be very useful no matter the circumstance.

Also, it would open doors to doing more case-specific things, like say I have a plants site, I could make the leaves display in their real size of cm/mm instead of a scaled down/up px measure. That could help people relate to it better. And so forth.

(Speaking of, I went to the pet store this week and found they were selling "Lavendula". I wonder what the heck is that :laugh: For a moment I took it seriously and wondered if it wasn't some special kind of Lavender but then I looked close and it seemed pretty much Lavender to me. So typos ahoooy! XD )

It'll go badly because the Windows display API can't get this right. Better on Linux, incidentally.
Ah... the joys of Windows...*

*Written from a Windows device
Title: Re: Dark theme for this site?
Post by: Antechinus on July 03, 2020, 05:12:07 PM
Lavendula is the botanical name for lavender. For example, if you want one that will handle a sub-tropical climate the best one to get is Lavendula dentata (commonly known as French lavender). English lavender (L. augustifolia) tends to curl up and die in the sub-tropics.
Title: Re: Dark theme for this site?
Post by: Gwenwyfar on July 04, 2020, 02:59:04 PM
Ooops. Fair enough, it should have an accent if they were going for that. Google, you failed me. I found lots of verb definitions for it :P