Changeset View
Changeset View
Standalone View
Standalone View
landing/header.css
nav.wrapper { | nav.headerContainer { | ||||
transition-property: max-width; | display: flex; | ||||
transition: 300ms; | justify-content: center; | ||||
max-width: 1850px; | } | ||||
margin-left: auto; | |||||
margin-right: auto; | div.headerNavContentContainer { | ||||
display: grid; | display: flex; | ||||
padding: 16px 0; | |||||
align-items: center; | align-items: center; | ||||
grid-template-columns: 40px repeat(12, 1fr) 40px; | justify-content: space-between; | ||||
column-gap: 1.5%; | padding: 18px 32px; | ||||
grid-template-areas: '. logo logo . . . page_nav page_nav . . sIcons sIcons sIcons .'; | width: 1850px; | ||||
} | } | ||||
.logo { | .logo { | ||||
grid-area: logo; | display: flex; | ||||
align-items: center; | |||||
min-width: 85px; | |||||
} | } | ||||
.logo h1 { | .logo h1 { | ||||
font-size: 28px; | font-size: 28px; | ||||
font-weight: 500; | font-weight: 500; | ||||
color: var(--logo-color); | color: var(--logo-color); | ||||
} | } | ||||
.tab { | .tab { | ||||
font-size: 24px; | font-size: 24px; | ||||
font-weight: 500; | font-weight: 500; | ||||
color: #808080; | color: #808080; | ||||
font-family: var(--sans-serif); | font-family: var(--sans-serif); | ||||
transition: 150ms; | transition: 150ms; | ||||
transition-property: color; | transition-property: color; | ||||
} | } | ||||
.tab:hover { | .tab:hover { | ||||
color: #ffffff; | color: #ffffff; | ||||
} | } | ||||
.page_nav { | .pageNav { | ||||
grid-area: page_nav; | |||||
display: flex; | display: flex; | ||||
justify-content: space-evenly; | justify-content: space-evenly; | ||||
min-width: 225px; | min-width: 225px; | ||||
} | } | ||||
.social_icons_container { | .socialIconsContainer { | ||||
grid-area: sIcons; | |||||
display: flex; | display: flex; | ||||
justify-self: flex-end; | justify-self: flex-end; | ||||
align-items: center; | align-items: center; | ||||
} | } | ||||
div.twitter_icon, | div.twitterIcon, | ||||
div.github_icon, | div.githubIcon, | ||||
div.webapp_icon { | 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; | ||||
border-radius: 50px; | border-radius: 50px; | ||||
width: 44px; | width: 44px; | ||||
height: 44px; | height: 44px; | ||||
transition: 300ms; | transition: 300ms; | ||||
} | } | ||||
div.twitter_icon svg, | div.menuIcon { | ||||
div.github_icon svg, | display: none; | ||||
div.webapp_icon svg { | } | ||||
div.twitterIcon svg, | |||||
div.githubIcon svg, | |||||
div.webappIcon svg { | |||||
transition: 300ms; | transition: 300ms; | ||||
} | } | ||||
div.github_icon:hover svg { | div.githubIcon:hover svg { | ||||
color: #151013; | color: #151013; | ||||
transition: 300ms; | transition: 300ms; | ||||
} | } | ||||
div.github_icon:hover { | div.githubIcon:hover { | ||||
background-color: #ffffff; | background-color: #ffffff; | ||||
transition: 300ms; | transition: 300ms; | ||||
} | } | ||||
div.webapp_icon:hover { | div.webappIcon:hover { | ||||
background-color: var(--btn-bg); | background-color: var(--btn-bg); | ||||
transition: 300ms; | transition: 300ms; | ||||
} | } | ||||
div.twitter_icon:hover { | |||||
div.twitterIcon:hover { | |||||
background-color: #1d9bf0; | background-color: #1d9bf0; | ||||
transition: 300ms; | transition: 300ms; | ||||
} | } | ||||
@media screen and (max-width: 1099px) { | @media screen and (max-width: 480px) { | ||||
nav.wrapper { | .pageNav { | ||||
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; | display: none; | ||||
} | } | ||||
} | |||||
@media screen and (max-width: 480px) { | div.twitterIcon, | ||||
nav.wrapper { | div.githubIcon, | ||||
grid-template-columns: 16px repeat(6, 1fr) 16px; | div.webappIcon { | ||||
grid-template-rows: 1fr 1fr; | display: none; | ||||
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 { | div.menuIcon { | ||||
grid-area: page_nav; | |||||
display: flex; | display: flex; | ||||
justify-content: center; | justify-content: center; | ||||
gap: 40px; | align-items: center; | ||||
min-width: 225px; | font-size: 24px; | ||||
margin-inline: 4px; | |||||
width: 44px; | |||||
height: 44px; | |||||
} | |||||
div.menuIcon:hover { | |||||
cursor: pointer; | |||||
} | } | ||||
} | } |