[IPFire Artwork] Website

Sven sven.hoehn at posteo.de
Fri Apr 7 16:40:46 CEST 2017

there are some strange bugs with flex and webkit. I’m not sure if they come from Bootstrap or are real bugs in Webkit, but I think that I can workaround them.

> On 7. Apr 2017, at 12:01, Michael Tremer <michael.tremer at ipfire.org> wrote:
> Hi,
> I just updated the dev site.
> I will run a job that does this automatically once an hour from now on.
> Icons won't load at the moment... :(
> -Michael
> On Fri, 2017-04-07 at 08:11 +0200, Maurice Gesswein wrote:
>> Am 06.04.2017 10:52 nachm. schrieb "Sven" <sven.hoehn at posteo.de>:
>> @Michael can you please update the files for the dev website with the new
>> commit?
>> I correct a part of the errors written down by Maurice.
>> Also edit the icons but now I have complete control with CSS but the sizes are
>> not right, have to check the SVG code for that. (https://fvsch.com/code/svg-ic
>> ons/how-to/)
>> Seems to be that I was not clear enough, sorry. I provided the icons in a
>> wrong way. I'll send corrected icons at 24x24 this evening. Just scale the
>> existing icons to a square will not work as expected. The optical proportions
>> will be lost. Feel free to compare them with the existing ones and you will
>> see the difference.
>>> On 6. Apr 2017, at 15:19, Sven <sven.hoehn at posteo.de> wrote:
>>>> On 6. Apr 2017, at 14:19, Michael Tremer <michael.tremer at ipfire.org>
>>>> wrote:
>>>> First of all loads of thanks to you two for working on this. This is
>>>> really
>>>> coming along looking awesome.
>>>> How do we fix the "visual bugs" now?
>>> Good question,
>>>> I am not really on the same page with what should be finished now and what
>>>> not.
>>>> Many pages look broken and I assume you just have not been working on
>>>> these, yet
>>>> :)
>>> I didn’t look at any other page except the homepage and to me it’s not clear
>>> which page get a complete new layout and which page get only the “style-
>>> update”.
>>>> And I have some smaller things that don't seem to look right in Firefox.
>>>> Is this
>>>> the right time to collect these, yet?
>>> Yes. But let us open a ticket on the bug tracker for the webpage.
>>> I think that some of the things that don’t look right to you are the same
>>> for Maurice.
>>> @Michael can you create the ticket? I’m not sure in which category it goes.
>>> Thanks. 
>>>> -Michael
>>>> On Wed, 2017-04-05 at 23:02 +0200, Maurice Gesswein wrote:
>>>>> First output looks very promising for me. Thanks Sven!
>>>>> It seems to be that something went weird with the colors at Zeplin. At
>>>>> the
>>>>> thumbnails they look good, when you open a screen they doesn't. Good
>>>>> news: Hex
>>>>> codes are correct! :) I'll figure out what went wrong and perhaps I
>>>>> found
>>>>> another tool like Zeplin which can be archived by Michael ;p Stay tuned,
>>>>> still
>>>>> checking the feature set.
>>>>> Next thing is that Zeplin interprets the properties of e.g. a font
>>>>> correct but
>>>>> might be unclear for others. Please use the properties ABOVE the CSS box
>>>>> as
>>>>> the primary information about the selected element. Than your mentioned
>>>>> opacity issue should be clear. The colors should look like this: rgba(0,
>>>>> 0, 0,
>>>>> 0.6).
>>>>> I found several things I would like to fix:
>>>>> I noticed that I have to build up the Sketch file in a different way
>>>>> that
>>>>> icons will be exported correct as 24x24px size. At the moment they are
>>>>> cropped. At their proper size of 24x24px it will be a lot easier to
>>>>> align
>>>>> those vertically correct. I'll update the Icon screen asap.
>>>>> Please recheck all opacity values. A lot of them are not correct. I
>>>>> guess
>>>>> that's due to the CSS output of Zeplin and how I set up the Sketch file.
>>>>> Use
>>>>> the values which are shown above the CSS box.
>>>>> Please also recheck the line-heights of each font-style. Some of them
>>>>> has
>>>>> strange values.
>>>>> Font weight on buttons should be medium/600.
>>>>> Ghost buttons doesn't have dropshadows
>>>>> Lots of elements become smaller at <992px width. That should not
>>>>> happens.
>>>>> It seems to be that the gaps of the grid were not set to 24px instead of
>>>>> 30px.
>>>>> Aren't they? If this would cause too much trouble, we can leave it as it
>>>>> is.
>>>>> It doesn't have a bad impact.
>>>>> "Fire" of IPFire in the top navigation is not bold/medium
>>>>> The buttons has lots of different heights. Please set a fixed height of
>>>>> 36 for
>>>>> default buttons and 48px for big buttons
>>>>> The touch target area is missing at the default buttons (48px height).
>>>>> That's
>>>>> important to provide a good user experience at touch devices. The
>>>>> clickable
>>>>> area must be big enough that fat finger hits it the first time ;)
>>>>> At viewport <992px the burger icon is not left aligned anymore. But you
>>>>> already said that you doesn't spend much time at the navigation so far.
>>>>> Some more minor issues... But for now it should be enough to fix :)
>>>>> Do we want to set up a Trello board for all these and upcoming todos?
>>>>> I'm also
>>>>> fine by using Git issues for that.
>>>>> Best,
>>>>> Maurice
>>>>> On Wed, Apr 5, 2017 at 8:02 PM, Sven <sven.hoehn at posteo.de> wrote:
>>>>>> and now how we proceed?
>>>>>> Are you writing down a list with all the things to change?
>>>>>> Do we talk so that everybody express what he thinks and what to
>>>>>> change?
>>>>>>> On 5. Apr 2017, at 19:55, Michael Tremer <michael.tremer at ipfire.org>
>>>>>> wrote:
>>>>>>> Hi,
>>>>>>> it is all up on http://dev.ipfire.org
>>>>>>> If you want to view fireinfo, just add the "dev" to the domain. For
>>>>>> example:
>>>>>>>   http://fireinfo.dev.ipfire.org
>>>>>>> Do the same for planet, wishlist, etc...
>>>>>>> -Michael
>>>>>>> On Wed, 2017-04-05 at 18:11 +0100, Michael Tremer wrote:
>>>>>>>> Hi,
>>>>>>>> On Tue, 2017-04-04 at 22:18 +0200, Sven wrote:
>>>>>>>>> Hello everybody,
>>>>>>>>> I’m thinkin’ that the coding of the home page has reached a
>>>>>>>>> point where
>>>>>> we
>>>>>>>>> need the site live to discuss.
>>>>>>>> Great!
>>>>>>>>> It’s not pixel perfect, the mobile menu is only the bootstrap
>>>>>>>>> version
>>>>>> from
>>>>>>>>> top
>>>>>>>>> down and not from the left like in the mookups, the SCSS code is
>>>>>>>>> still
>>>>>> very
>>>>>>>>> chaotic, the image-scaling dosen’t work like expected and the
>>>>>>>>> svg
>>>>>> scaling
>>>>>>>>> dosen’t work at all in Safari, but it’s good enough to have a
>>>>>> conversation.
>>>>>>>>> @Michael it is possible to include html markup between these
>>>>>>>>> brackets {{
>>>>>>>>> _("IPFire") }} for example {{ _(“IP<strong>Fire</strong>") }}
>>>>>>>> No. The translation function escapes all HTML.
>>>>>>>>> @Maurice I have troubles with the colours, in zeplin for example
>>>>>>>>> the
>>>>>>>>> background is $blue_grey_900 but with a opacity of 0.6 when I
>>>>>>>>> put the
>>>>>> same
>>>>>>>>> values in my css the colour seems darker.
>>>>>>>>> But its easier to go all of these details when you see it in
>>>>>>>>> your
>>>>>> browser.
>>>>>>>>> Greetings,
>>>>>>>>> Sven
>>>>>>>> -Michael

More information about the IPFire-Artwork mailing list