web2019/sass/css/_layout.scss

262 lines
5.0 KiB
SCSS
Raw Normal View History

2019-08-01 20:49:14 +08:00
.hero + main {
margin-top: -50px;
}
2019-07-03 17:52:11 +08:00
.hero {
2019-08-01 20:49:14 +08:00
height: 330px;
background: url("../images/hero-phone@2x.png") repeat-x top center;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
h1 {
color: #fff;
margin-bottom: 30px;
}
2019-07-03 17:52:11 +08:00
}
2019-07-08 23:15:56 +08:00
.hero2, .hero3 {
2019-07-18 17:24:14 +08:00
//height: 130px;
2019-08-01 20:49:14 +08:00
//background: none;
}
2019-07-03 17:52:11 +08:00
2019-08-01 20:49:14 +08:00
.hero2 {
height: 230px;
background: url("../images/hero2-phone@2x.png") no-repeat top center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.hero3 {
height: 230px;
background: url("../images/hero3-phone@2x.png") repeat-x top center;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
2019-08-01 20:49:14 +08:00
.hero5 {
height: 230px;
background: url("../images/hero3-phone@2x.png") no-repeat top center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.hero6 {
height: 230px;
background: url("../images/hero2-phone@2x.png") no-repeat top center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.card-artiq {
background: #fff url("../images/artiq-phone@2x.png") no-repeat top center;
background-size: contain;
}
.card-artiq > div {
padding-top: 66.64%;
}
.card-gateware {
background: #fff url("../images/gateware-phone@2x.png") no-repeat top center;
background-size: contain;
}
.card-gateware > div {
padding-top: 81.64%;
}
2019-12-29 16:00:31 +08:00
.card-jobs {
background: #fff url("../images/jobs-phone@2x.png") no-repeat top center;
background-size: contain;
}
.card-jobs > div {
padding-top: 81.64%;
}
2019-08-01 20:49:14 +08:00
2019-07-03 17:52:11 +08:00
.card h5,
h5 {
color: $brand-color;
}
h3, h2, h1 {
2019-07-03 17:52:11 +08:00
color: $color-secondary;
}
.shadow.sticky-top {
background: #fff;
2019-07-03 18:55:58 +08:00
}
.logos-centered {
p {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
align-items: center;
flex-wrap: wrap;
img {
width: 150px;
padding: .8rem;
}
}
}
.card-img-top {
padding: .4rem; }
2019-07-03 18:55:58 +08:00
p ~ h5 {
margin-top: 3rem;
}
img.kf25 {
width: 310px;
}
2019-07-03 18:55:58 +08:00
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {
2019-08-01 20:49:14 +08:00
.card-artiq > div {
padding-top: 0;
}
.card-gateware > div {
padding-top: 0;
}
2019-12-29 16:00:31 +08:00
.card-jobs > div {
padding-top: 0;
}
2019-07-03 18:55:58 +08:00
}
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
img.kf25 {
width: 400px;
}
2019-07-03 18:55:58 +08:00
}
// Large devices (desktops, 992px and up)
@media (min-width: 992px) {
.hero {
// height: 692px;
height: calc(100vh - 200px);
2019-07-03 18:55:58 +08:00
background: url("../images/hero@2x.png") repeat-x top center;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
h1 {
color: $background-color;
margin-bottom: 30px;
margin-top: -100px;
}
}
.hero2 {
height: 380px;
background: url("../images/hero2@2x.png") repeat-x top center;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
2019-07-08 23:15:56 +08:00
.hero3 {
height: 380px;
background: url("../images/hero3@2x.png") repeat-x top center;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
2019-07-24 23:21:55 +08:00
.hero4 {
height: 750px;
background: url("../images/404@2x-min.png") repeat-x top center;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
.hero5 {
height: 380px;
background: url("../images/bottom-graphic-min@2x.png") no-repeat top center;
2019-08-01 17:53:36 +08:00
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.hero6 {
height: 380px;
background: url("../images/top-graphic-min@2x.png") no-repeat top center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.hero + main {
2019-07-03 18:55:58 +08:00
margin-top: -150px;
}
.shadow-lg {
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}
.card-artiq {
background: #fff url("../images/artiq@2x.png") no-repeat top right;
}
.card-gateware {
background: #fff url("../images/gateware@2x.png") no-repeat top right;
}
2019-12-29 16:00:31 +08:00
.card-jobs {
background: #fff url("../images/jobs-min@2x.png") no-repeat top right;
2019-12-29 16:00:31 +08:00
}
.logos-centered {
p {
img {
width: 200px;
}
}
}
2019-07-19 22:16:26 +08:00
.dropdown-menu {
padding-top: .5rem;
margin-top: 12px;
}
2019-07-19 23:28:56 +08:00
.modal-lg {
max-width: 60%;
2019-07-19 23:28:56 +08:00
}
2019-07-03 18:55:58 +08:00
}
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
#root-shop, #root-shop>div {
height: 100%;
}
2019-07-03 17:52:11 +08:00
}