You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

197 lines
3.8 KiB

.home-header {
position: relative;
width: 100%;
margin: 0px auto;
margin-top: 10px;
&-dark{
.carousel-indicators{
li{
background-color: inherit !important;
}
}
}
&-light{
.carousel-indicators{
li{
padding: 5px;
border-radius: 5px !important;
background-color: rgba(255, 255, 255, 0.281) !important;
}
}
}
span {
height: 80%;
width: 8px;
background-color: white;
border-radius: 10px;
}
.item {
height: 460px;
background-size: 100% 100% !important;
background-repeat: no-repeat !important;
background-position: 0px 0px !important;
font-family: numeralLight;
color: white;
padding-right: 70%;
padding-top: 120px;
border-radius: 10px;
margin: 0px 10px;
h1 {
font-family: numeralBold;
}
}
strong {
font-weight: 300;
}
&__cover {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: linear-gradient(
0deg,
hsla(0, 0%, 0%, 1) 0%,
hsla(250, 14%, 61%, 0) 44%
);
border-radius: 10px;
}
}
@media screen and (min-width: 1441px) {
.home-header {
max-width: 1350px;
font-family: numeralLight;
&__info{
&--author{
position: absolute;
left: 30px;
bottom: 100px;
h3{
margin-right: 5px;
font-size: 15px;
}
i{
margin-right: 5px;
font-size: 15px;
}
}
}
.item {
h1 {
font-family: numeralMedium;
font-size: 24px;
}
h2{
font-size: 17px;
font-family: numeralMedium;
}
}
.carousel-indicators li {
margin-left: 20px !important;
max-width: 150px !important;
div {
margin-right: 10px;
}
strong {
font-size: 12px;
}
b {
font-size: 16px;
}
}
}
}
@media screen and (min-width: 1008px) and (max-width: 1440px) {
.home-header {
max-width: 1250px;
.item {
padding-top: 360px;
h1 {
font-size: calc(100vw / 65);
}
h2 {
font-size: calc(100vw / 80);
}
}
&__info{
&--author{
position: absolute;
left: 30px;
bottom: 100px;
h3{
margin-right: 5px;
font-size: calc(100vw / 100);
}
i{
margin-right: 5px;
font-size: calc(100vw / 100);
}
}
}
.carousel-indicators li {
margin-left: 10px !important;
max-width: 200px !important;
div {
margin-right: 10px;
}
strong {
font-size: calc(100vw / 100);
}
b {
font-size: calc(100vw / 90);
}
}
}
}
.carousel-indicators {
position: absolute !important;
left: 0px !important;
right: auto !important;
bottom: 40px !important;
z-index: auto !important;
display: auto !important;
justify-content: auto !important;
padding: auto !important;
margin: 0px !important;
list-style: auto !important;
color: white;
width: 30% !important;
justify-content: flex-start !important;
span.active {
height: 80% !important;
width: 8px !important;
background-color: yellow !important;
}
}
.active span {
background-color: yellow !important;
height: 80% !important;
width: 8px !important;
}
.carousel-indicators li {
display: auto !important;
width: auto !important;
height: auto !important;
margin: 0px !important;
text-indent: 0px !important;
cursor: pointer !important;
background-color: inherit !important;
border: 0px !important;
border-radius: 0px !important;
text-align: right !important;
justify-content: flex-start !important;
font-family: numeralLight !important;
span {
height: 80%;
width: 8px;
background-color: white;
border-radius: 10px;
}
}