/
githubmirror
/
carbon
Обзор
Документация
Войти
/
githubmirror
/
carbon
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
components/Header.js
48 строк
1 KB
Mike Fix
better header on mobile
24 сен 2019, 23:28
24 сен 2019, 23:28
30b26bf
Код
Авторство
О чём код?
import React from 'react' import Logo from './svg/Logo' const Header = ({ enableHeroText }) => ( <header role="banner" className="mb4"> <div className="header-content"> <a id="link-home" href="/" aria-label="Home"> <Logo /> </a> {enableHeroText ? ( <h2 className="mt3"> Create and share beautiful images of your source code. <br /> Start typing or drop a file into the text area to get started. </h2> ) : null} </div> <style jsx> {` .header-content { display: flex; flex-direction: column; align-items: center; } .header-content a { height: 64px; max-width: 96vw; } h2 { text-align: center; } @media (max-width: 768px) { header { margin-bottom: var(--x3); } h2 { font-size: 13px; } } `} </style> </header> ) export default Header