Changeset View
Changeset View
Standalone View
Standalone View
landing/header.css
nav.headerContainer { | nav.headerContainer { | ||||
display: flex; | display: flex; | ||||
justify-content: center; | justify-content: center; | ||||
} | } | ||||
div.headerNavContentContainer { | div.headerNavContentContainer { | ||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
padding: 18px 32px; | padding: 18px 32px; | ||||
width: 1850px; | width: 1850px; | ||||
} | } | ||||
.logo { | .logo { | ||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
min-width: 85px; | min-width: 180px; | ||||
} | } | ||||
.logo h1 { | .logoText { | ||||
font-size: 28px; | color: var(--white-100); | ||||
font-weight: 500; | margin-right: 8px; | ||||
color: var(--logo-color); | } | ||||
.betaBadge { | |||||
padding: 4px 16px; | |||||
background-color: #ebebeb26; | |||||
border-radius: 16px; | |||||
color: var(--white-100); | |||||
} | } | ||||
.tab { | .tab { | ||||
font-size: 24px; | color: var(--black-60); | ||||
font-weight: 500; | |||||
color: #808080; | |||||
font-family: var(--sans-serif); | |||||
transition: 150ms; | transition: 150ms; | ||||
transition-property: color; | transition-property: color; | ||||
} | } | ||||
.tab:hover { | .tab:hover { | ||||
color: #ffffff; | color: var(--white-100); | ||||
} | |||||
.activeTab { | |||||
color: var(--white-100); | |||||
} | } | ||||
.pageNav { | .pageNav { | ||||
display: flex; | display: flex; | ||||
justify-content: space-evenly; | column-gap: 72px; | ||||
min-width: 225px; | |||||
} | } | ||||
.socialIconsContainer { | .socialIconsContainer { | ||||
display: flex; | display: flex; | ||||
justify-self: flex-end; | justify-self: flex-end; | ||||
align-items: center; | align-items: center; | ||||
} | } | ||||
.icon { | |||||
color: var(--white-100); | |||||
} | |||||
div.twitterIcon, | div.twitterIcon, | ||||
div.githubIcon, | div.githubIcon, | ||||
div.webappIcon { | div.webappIcon { | ||||
display: flex; | display: flex; | ||||
justify-content: center; | justify-content: center; | ||||
align-items: center; | align-items: center; | ||||
font-size: 24px; | font-size: 24px; | ||||
margin-inline: 4px; | margin-inline: 4px; | ||||
Show All 27 Lines | div.webappIcon:hover { | ||||
transition: 300ms; | transition: 300ms; | ||||
} | } | ||||
div.twitterIcon:hover { | div.twitterIcon:hover { | ||||
background-color: #1d9bf0; | background-color: #1d9bf0; | ||||
transition: 300ms; | transition: 300ms; | ||||
} | } | ||||
@media screen and (max-width: 480px) { | @media screen and (max-width: 848px) { | ||||
.pageNav { | .pageNav { | ||||
display: none; | display: none; | ||||
} | } | ||||
div.twitterIcon, | div.twitterIcon, | ||||
div.githubIcon, | div.githubIcon, | ||||
div.webappIcon { | div.webappIcon { | ||||
display: none; | display: none; | ||||
Show All 16 Lines |