fleet/website/assets/styles/pages/homepage.less
gillespi314 5af0d6b870
Update website styling (#715)
* Update website styling

* Convert ellipse margin from rem to px

* Adjust padding to match neighboring card element

* Fix linting errors

* Remove unneeded div
2021-05-07 13:54:29 -05:00

109 lines
2.3 KiB
Plaintext
Vendored

#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;
}
.log-destinations-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.log-destination-card {
text-align: center;
padding: 24px;
background: #fff;
box-shadow: 0px 7px 3px -5px rgba(25, 33, 71, 0.1);
border-radius: 8px;
flex: 1;
margin: 5px;
}
.log-destination-card img {
margin: 0 auto;
}
.log-destination-card h6 {
padding-top: 12px;
margin-bottom: 0;
font-weight: bold;
font-size: 0.9rem;
}
@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;
}
}
}