ElkArte Community

Elk Development => Bug Reports => Topic started by: scripple on October 21, 2017, 09:02:29 pm

Title: 1.1 CSS Issues
Post by: scripple on October 21, 2017, 09:02:29 pm
As I've been converting my theme variant to 1.1 I've noticed some ugly things in the new 1.1 base theme. 

1)  Why does this font-family line exist?  For linux you've left off all linux fonts you try elsewhere and actually end up with serif instead of at least sans-serif as the fallback like everywhere else.   Why are these particular headers even trying to pull from a different font family at all?

Code: [Select]
.codeheader, .quoteheader, .expand_pages, .table_head > th, .topic_sorting_row > h3, .topic_name h4 a, .poster .name, .keyinfo h5 a, .keyinfo h5 a strong, .ui-dialog .ui-dialog-titlebar, #creator dt strong, .settings label, .popup_heading {
    font-weight: 600;
    font-family: "Segoe UI Semibold","Segoe UI","Helvetica Neue Medium","Helvetica Neue",serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

2) The topic icons on the editor page (where you select the icon) are the old quickbuttons graphics but then out in the topic index where they are displayed they're different svg based icons.  Odd to pick from one set then have the world see a different set.

3) <span class="topicicon" img_normal> has a line-height of 2em, but the :topicicon::before that puts the icon into the span has a fixed height of 16px.  So if the fonts get scaled they look bad.  They should be sized to 2em or at least something in em so that they will scale with the span.
Title: Re: 1.1 CSS Issues
Post by: emanuele on October 22, 2017, 07:58:21 am
1) I don't know, I guess @Spuds knows. O:-)
2) tracked at https://github.com/elkarte/Elkarte/issues/3013
3) tracked at https://github.com/elkarte/Elkarte/issues/3014
Title: Re: 1.1 CSS Issues
Post by: Spuds on October 22, 2017, 11:13:49 am
I don't believe that font stack changed from 1.0 :(

Those areas use a font that is between bold and normal, so semi bold for presentation.  The weight of 600 does not exist in the core font stack (mostly at least, I recall various issues) so this stack was put in place for use in those areas.  Anyway you are correct that a better fallback should be put in place, and maybe a *nix font added that may support 600 as well.   When I updated the core font stack (the 1.0 one was really dated) I should have updated this one as well ... if you have suggestions, please let us know.  I'll add it to the tracker as well.
Title: Re: 1.1 CSS Issues
Post by: scripple on October 22, 2017, 12:21:07 pm
I do not know which linux fonts support a weight of 600.  I put it to weight 700 which I've been using all along and set it to the default font stack which has linux fonts in it.

At the very least put the linux fonts from the default stack back in the line and end with sans-serif like the default so even if the weight 600 does nothing it doesn't do nothing and pull up a completely different font not used anywhere else.
Title: Re: 1.1 CSS Issues
Post by: Vekseid on October 22, 2017, 02:56:06 pm
I started to fix #2 but @emanuele objected to me making everything into svg >_>
Title: Re: 1.1 CSS Issues
Post by: scripple on October 22, 2017, 03:20:03 pm
Then turn them all back into images.  They need to match in both places.
Title: Re: 1.1 CSS Issues
Post by: emanuele on October 22, 2017, 04:08:41 pm
Quote from: Vekseid – I started to fix #2 but @emanuele objected to me making everything into svg >_>
Not exactly, I said that we should support "images" either svg, png or jpeg and would prefer not to remove the upload. After you replying that adding svg icon was possible I didn't object.
The fact I moved it to 2.0 was because after a month you were not interested in working on it.
Sorry for the misunderstanding. :)

Quote from: scripple – Then turn them all back into images.  They need to match in both places.
Well, we can just change the sprite and have them match. :P
Title: Re: 1.1 CSS Issues
Post by: scripple on October 22, 2017, 04:30:58 pm
Quote from: emanuele – Well, we can just change the sprite and have them match. :P
Yeah.  Then everyone who changes the colors can edit both the embedded SVG and the sprites.