Changeset View
Changeset View
Standalone View
Standalone View
landing/header.css
Show First 20 Lines • Show All 51 Lines • ▼ Show 20 Lines | .socialIconsContainer { | ||||
justify-self: flex-end; | justify-self: flex-end; | ||||
align-items: center; | align-items: center; | ||||
} | } | ||||
.icon { | .icon { | ||||
color: var(--white-100); | color: var(--white-100); | ||||
} | } | ||||
div.socialIconsContainer a { | |||||
-webkit-tap-highlight-color: transparent; | |||||
} | |||||
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; | ||||
border-radius: 50px; | border-radius: 50px; | ||||
width: 44px; | width: 44px; | ||||
height: 44px; | height: 44px; | ||||
transition: 300ms; | transition: 300ms; | ||||
} | } | ||||
div.menuIcon { | div.menuIcon { | ||||
display: none; | display: none; | ||||
} | } | ||||
div.twitterIcon svg, | div.twitterIcon svg, | ||||
div.githubIcon svg, | div.githubIcon svg, | ||||
div.webappIcon svg { | div.webappIcon svg { | ||||
transition: 300ms; | transition: 300ms; | ||||
} | } | ||||
@media screen and (hover: hover) { | |||||
div.githubIcon:hover svg { | div.githubIcon:hover svg { | ||||
color: #151013; | color: #151013; | ||||
transition: 300ms; | transition: 300ms; | ||||
} | } | ||||
div.githubIcon:hover { | div.githubIcon:hover { | ||||
background-color: #ffffff; | background-color: #ffffff; | ||||
transition: 300ms; | transition: 300ms; | ||||
} | } | ||||
div.webappIcon:hover { | div.webappIcon:hover { | ||||
background-color: var(--btn-bg); | background-color: var(--btn-bg); | ||||
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: 848px) { | @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; | ||||
} | } | ||||
div.menuIcon { | div.menuIcon { | ||||
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; | |||||
width: 44px; | width: 44px; | ||||
height: 44px; | height: 44px; | ||||
transition: 300ms; | |||||
} | } | ||||
div.menuIcon svg { | |||||
transition: 300ms; | |||||
} | |||||
} | |||||
@media screen and (max-width: 848px) and (hover: hover) { | |||||
div.menuIcon:hover { | div.menuIcon:hover { | ||||
cursor: pointer; | cursor: pointer; | ||||
background-color: var(--btn-bg); | |||||
transition: 300ms; | |||||
} | } | ||||
} | } |