fleet/website/assets/styles/pages/homepage.less
noahtalerman 0c31044340
Add top navigation, add new assets, and edit text on fleetdm.com (#517)
* Add nav items for desktop width

* Finish desktop width navigation styles

* Add new assets

* Add mobile menu and graphic

* Add assets and new navigation

* trivial (just for consistency, in case we ever change where that points)

* Make image go away on small screens

* Update deploy-google-cloud-75x60@2x.png

Uploaded correct sized retina image.

Co-authored-by: Mike McNeil <mikermcneil@users.noreply.github.com>
Co-authored-by: mthomas-fleet <mthomas@fleetdm.com>
2021-03-23 17:56:15 +09:00

89 lines
1.9 KiB
Plaintext

#homepage {
.hero-banner {
background: rgb(31, 29, 66);
background: linear-gradient(170.26deg, #1F1D42 7.33%, #00FFF0 130.16%);//lesshint-disable-line duplicateProperty
color: #fff;
}
.hero-bg {
min-height: 700px;
background-image: url('/images/hero-bg-3424x700@2x.png');
background-position: center bottom;
background-size: 3424px 700px;
}
.prop-statement {
display: flex;
}
.prop-statement__container {
display: flex;
flex-direction: column;
}
.prop-statement__header {
font-size: 48px;
}
.feature-card {
margin-left: 5px;
margin-right: 5px;
}
.quote-mark {
font-family: @header-font;
}
.footer-fade {
background: linear-gradient(360deg, #201E43 0%, #353D62 100%);
}
@media (max-width: 1175px) {
.hero-bg {
background-position: -1100px bottom;
}
}
@media (max-width: 960px) {
.feature-card-deck {
flex-direction: column;
.feature-card {
margin-left: auto;
margin-right: auto;
}
}
}
@media (max-width: 600px) {
.hero-bg {
min-height: 600px;
background-image: url('/images/hero-bg-3000x700@2x.png');
background-position: left -850px bottom -50px;
background-size: 3000px 700px;
}
.prop-statement {
justify-content: center;
}
.prop-statement__container {
align-items: center;
}
.prop-statement__header {
text-align: center;
font-size: 36px;
}
.prop-statement__paragraph {
text-align: center;
}
}
@media (max-width: 500px) {
.os-logo {
width: 43px;
height: 40px;
}
}
@media (max-width: 420px) {
.hero-bg {
background-position: left -900px bottom -50px;
}
}
@media (max-width: 360px) {
.os-logo {
width: 32px;
height: 30px;
}
[purpose='meet-the-fleet-community-expanded-text'] {
display: none;
}
}
}