diff --git a/landing/header.css b/landing/header.css index 00125fb73..3fb6a8f65 100644 --- a/landing/header.css +++ b/landing/header.css @@ -1,127 +1,131 @@ nav.wrapper { transition-property: max-width; transition: 300ms; max-width: 1850px; margin-left: auto; margin-right: auto; display: grid; padding: 16px 0; align-items: center; grid-template-columns: 40px repeat(12, 1fr) 40px; column-gap: 1.5%; grid-template-areas: '. logo logo . . . page_nav page_nav . . sIcons sIcons sIcons .'; } .logo { grid-area: logo; } .logo h1 { font-size: 28px; font-weight: 500; color: var(--logo-color); } .tab { font-size: 24px; font-weight: 500; color: #808080; font-family: 'IBM Plex Sans', sans-serif; transition: 150ms; transition-property: color; } .tab:hover { color: #ffffff; } .page_nav { grid-area: page_nav; display: flex; justify-content: space-evenly; min-width: 225px; } .social_icons_container { grid-area: sIcons; display: flex; justify-self: flex-end; align-items: center; } div.twitter_icon, div.github_icon, div.webapp_icon { display: flex; justify-content: center; align-items: center; font-size: 24px; margin-inline: 4px; border-radius: 50px; width: 44px; height: 44px; transition: 300ms; } div.twitter_icon svg, div.github_icon svg, div.webapp_icon svg { transition: 300ms; } div.github_icon:hover svg { color: #151013; transition: 300ms; } div.github_icon:hover { background-color: #ffffff; transition: 300ms; } div.webapp_icon:hover { background-color: var(--btn-bg); transition: 300ms; } div.twitter_icon:hover { background-color: #1d9bf0; transition: 300ms; } @media screen and (max-width: 1099px) { nav.wrapper { grid-template-columns: 16px repeat(12, 1fr) 16px; grid-template-areas: '. logo logo logo page_nav page_nav page_nav page_nav page_nav page_nav sIcons sIcons sIcons .'; } .logo { min-width: 85px; } .page_nav { justify-content: center; gap: 12px; } .social_icon { display: block; } + + div.webapp_icon { + display: none; + } } @media screen and (max-width: 480px) { nav.wrapper { grid-template-columns: 16px repeat(6, 1fr) 16px; grid-template-rows: 1fr 1fr; column-gap: 1.5%; row-gap: 25px; grid-template-areas: '. logo logo . sIcons sIcons sIcons .' '. page_nav page_nav page_nav page_nav page_nav page_nav .'; } .page_nav { grid-area: page_nav; display: flex; justify-content: center; gap: 40px; min-width: 225px; } }