Vzhled podle aktuálního stylu mozilla.org

[MikkCZ]

fix #35

[MikkCZ]

@MekliCZ r?

[MikkCZ]

desktop: https://screenshots.firefox.com/G1YL4NIWhH6u4gXG/null mobilní: https://screenshots.firefox.com/Bo1vgeLIgKXMcuUP/null

[vasimi]

Přijde mi to dost takové roztahané a neladící. Zkusím se na to doma podívat.

[MikkCZ]

Původně jsem to měl jenom takto https://screenshots.firefox.com/abLDhH8b1UkTRsET/null, ale přišlo mi, že je tam vidět jen Firefox a Focus a nic pod tím. Ještě by to nemuselo být špatné takto https://screenshots.firefox.com/MVAtRaZa1kAyq9qO/null nebo https://screenshots.firefox.com/HYbMVVPbrlfoouVS/null

Máš pravdu, že ten úplně první pruh vpravo docela ujíždí.

[vasimi]

Upravil bych to pozadí, trochu víc si pohrál s barvama (nejlíp asi s paletou co používá Mozilla na mozilla.org/firefox). Ty sekce bych taky udělal vyšší. Na ikonky sociálních sítí bych použil Font Awesome (5, ne 4).

[vasimi]

• Link na produkt bych nedělal z nadpisu, ale přidal bych tlačítko (+ ten nadpis se styly odkazu vypadá hrozně)
• Logo v horním baru bych vertikálně vycentroval (flexbox)
• Upravil bych gradienty v pozadí následovně:
  • Focus linear-gradient(to left, #c42482 0, #961e7d 20%, #8d1d7c 30%, #721979 60%)
  • Firefox linear-gradient(to left, #003eaa 0, #004ec2 50%, #0080ff 100%)
• Barvy fontů jednotlivých sekcí následovně:
  • Focus white
  • Firefox white

Můžeš zkusit aplikovat tohle? Zbytek barev bych vyřešil potom.

[MikkCZ]

Pozadí i barvy sekcí jsou přímo styly z mozilla.org/firefox. Vyšších sekcí se bojím, protože pak na trochu menším monitoru nejsou vidět ani dvě. Zkusím ale přidat menu nahoru, které na jednotlivé sekce přescrolluje.

[vasimi]

Výšku sekcí (resp. jejich padding) můžeš přizpůsobit přes media queries.

[MikkCZ]

Link na produkt bych nedělal z nadpisu, ale přidal bych tlačítko

Tlačítko do každé sekce? Brrr...

[vasimi]

Jestli ne tlačítko do každé sekce, tak by to ale chtělo vyřešit jinak, než tučný a podtržený nadpis. Ten totiž vypadá fakt hrozně.

[MikkCZ]

@MekliCZ verze 2 https://screenshots.firefox.com/saFQ5KDRzCXumkWK/null

Nejsem si jistý zarovnáním obrázků v jednotlivých sekcích. Myslíš, že je lepší je takto centrovat na zbývající prostor, nebo je zarovnat na okraj?

[vasimi]

Je to mnohem lepší. Centrování je myslím v pohodě. Co bych změnil je hover efekt - místo toho box-shadow bych si nějak pohrál s tím gradientem v pozadí (třeba ho o kousek posunul). A taky tam hodil nějaký transition, ať to není tak trhané.

Upravil bych ještě gradient za Mozilla.cz, za sebe bych vyhodil tu bílou a nechal tam jen červenou a modrou. Když je totiž bílá hned nad tím blokem, trochu to splývá.

[MikkCZ]

Udělal jsem tam opacity. Nechce se mi psát druhé gradienty s jinými barvami a/nebo posunem.

[vasimi]

Přijde mi to takové bledé s tím opacity. :/ Jestli chceš, mám hotové řešení na animaci gradientů v pozadí, můžu ti to poslat.

[MikkCZ]

Ještě by to opacity šlo opačně - světlejší po najetí myší.

Sem s tím. ;)

[vasimi]

&-button
    background-image: linear-gradient(to right, #30ced8 0%, #3e95bd 100%)
    position: relative
    &:hover::before
        opacity: 1
    &::before
        content: ''
        position: absolute
        left: 0
        top: 0
        width: 100%
        height: 100%
        opacity: 0
        transition: 0.2s opacity
        background-image: linear-gradient(to left, #30ced8 0%, #3e95bd 100%)

Je to v SASSu, tak snad si to dokážeš přepsat. ;) V ::before je gradient, který se ukáže při hoveru.

[MikkCZ]

Aktualizoval jsem commit. Že stačí gradient otočit a ne dělat nějaké úplně nové barvy mě nenapadlo. Ten `::before; na to je trochu hack, ale lepší způsob jsem nenašel.

[MikkCZ]