fixed styling issues
This commit is contained in:
andres alcocer
@@ -1,67 +1,147 @@
|
||||
/* GLOBAL RESET */
|
||||
:global(html), :global(body), :global(div), :global(span), :global(applet), :global(object), :global(iframe),
|
||||
:global(h1), :global(h2), :global(h3), :global(h4), :global(h5), :global(h6), :global(p), :global(blockquote), :global(pre),
|
||||
:global(a), :global(abbr), :global(acronym), :global(address), :global(big), :global(cite), :global(code),
|
||||
:global(del), :global(dfn), :global(em), :global(img), :global(ins), :global(kbd), :global(q), :global(s), :global(samp),
|
||||
:global(small), :global(strike), :global(strong), :global(sub), :global(sup), :global(tt), :global(var),
|
||||
:global(b), :global(u), :global(i), :global(center),
|
||||
:global(dl), :global(dt), :global(dd), :global(ol), :global(ul), :global(li),
|
||||
:global(fieldset), :global(form), :global(label), :global(legend),
|
||||
:global(table), :global(caption), :global(tbody), :global(tfoot), :global(thead), :global(tr), :global(th), :global(td),
|
||||
:global(article), :global(aside), :global(canvas), :global(details), :global(embed),
|
||||
:global(figure), :global(figcaption), :global(footer), :global(header), :global(hgroup),
|
||||
:global(menu), :global(nav), :global(output), :global(ruby), :global(section), :global(summary),
|
||||
:global(time), :global(mark), :global(audio), :global(video) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
vertical-align: baseline;
|
||||
box-sizing: inherit;
|
||||
:global(html),
|
||||
:global(body),
|
||||
:global(div),
|
||||
:global(span),
|
||||
:global(applet),
|
||||
:global(object),
|
||||
:global(iframe),
|
||||
:global(h1),
|
||||
:global(h2),
|
||||
:global(h3),
|
||||
:global(h4),
|
||||
:global(h5),
|
||||
:global(h6),
|
||||
:global(p),
|
||||
:global(blockquote),
|
||||
:global(pre),
|
||||
:global(a),
|
||||
:global(abbr),
|
||||
:global(acronym),
|
||||
:global(address),
|
||||
:global(big),
|
||||
:global(cite),
|
||||
:global(code),
|
||||
:global(del),
|
||||
:global(dfn),
|
||||
:global(em),
|
||||
:global(img),
|
||||
:global(ins),
|
||||
:global(kbd),
|
||||
:global(q),
|
||||
:global(s),
|
||||
:global(samp),
|
||||
:global(small),
|
||||
:global(strike),
|
||||
:global(strong),
|
||||
:global(sub),
|
||||
:global(sup),
|
||||
:global(tt),
|
||||
:global(var),
|
||||
:global(b),
|
||||
:global(u),
|
||||
:global(i),
|
||||
:global(center),
|
||||
:global(dl),
|
||||
:global(dt),
|
||||
:global(dd),
|
||||
:global(ol),
|
||||
:global(ul),
|
||||
:global(li),
|
||||
:global(fieldset),
|
||||
:global(form),
|
||||
:global(label),
|
||||
:global(legend),
|
||||
:global(table),
|
||||
:global(caption),
|
||||
:global(tbody),
|
||||
:global(tfoot),
|
||||
:global(thead),
|
||||
:global(tr),
|
||||
:global(th),
|
||||
:global(td),
|
||||
:global(article),
|
||||
:global(aside),
|
||||
:global(canvas),
|
||||
:global(details),
|
||||
:global(embed),
|
||||
:global(figure),
|
||||
:global(figcaption),
|
||||
:global(footer),
|
||||
:global(header),
|
||||
:global(hgroup),
|
||||
:global(menu),
|
||||
:global(nav),
|
||||
:global(output),
|
||||
:global(ruby),
|
||||
:global(section),
|
||||
:global(summary),
|
||||
:global(time),
|
||||
:global(mark),
|
||||
:global(audio),
|
||||
:global(video) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
vertical-align: baseline;
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
:global(article), :global(aside), :global(details), :global(figcaption), :global(figure),
|
||||
:global(footer), :global(header), :global(hgroup), :global(menu), :global(nav), :global(section) {
|
||||
display: block;
|
||||
:global(article),
|
||||
:global(aside),
|
||||
:global(details),
|
||||
:global(figcaption),
|
||||
:global(figure),
|
||||
:global(footer),
|
||||
:global(header),
|
||||
:global(hgroup),
|
||||
:global(menu),
|
||||
:global(nav),
|
||||
:global(section) {
|
||||
display: block;
|
||||
}
|
||||
:global(body) {
|
||||
line-height: 1;
|
||||
line-height: 1;
|
||||
}
|
||||
:global(ol), :global(ul) {
|
||||
list-style: none;
|
||||
:global(ol),
|
||||
:global(ul) {
|
||||
list-style: none;
|
||||
}
|
||||
:global(blockquote), :global(q) {
|
||||
quotes: none;
|
||||
:global(blockquote),
|
||||
:global(q) {
|
||||
quotes: none;
|
||||
}
|
||||
:global(blockquote:before),
|
||||
:global(blockquote:after),
|
||||
:global(q:before),
|
||||
:global(q:after) {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
:global(blockquote:before), :global(blockquote:after),
|
||||
:global(q:before), :global(q:after) {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
:global(table) {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Hind', sans-serif;
|
||||
box-sizing: border-box;
|
||||
background-color: $color-background;
|
||||
font-family: 'Hind', sans-serif;
|
||||
box-sizing: border-box;
|
||||
background-color: $color-background;
|
||||
}
|
||||
|
||||
html {
|
||||
// this defines what 1rem is --> font root size
|
||||
font-size: 62.5%; // 10/16, 1rem = 10px;
|
||||
|
||||
@include responsive(tab_port) {
|
||||
font-size: 50%;
|
||||
}
|
||||
// this defines what 1rem is --> font root size
|
||||
font-size: 62.5%; // 10/16, 1rem = 10px;
|
||||
|
||||
@include responsive(tab_port) {
|
||||
font-size: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// GRID AREA
|
||||
// GRID AREA
|
||||
.container {
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: min-content min-content min-content min-content;
|
||||
grid-template-columns: 4% repeat(10, 1fr) 4%;
|
||||
display: grid;
|
||||
grid-template-rows: min-content min-content min-content min-content;
|
||||
grid-template-columns: 0 repeat(10, 1fr);
|
||||
}
|
||||
|
||||
@@ -3,17 +3,25 @@
|
||||
top: 0 !important;
|
||||
height: 2rem !important;
|
||||
text-align: right !important;
|
||||
padding-right: 4rem !important;
|
||||
// padding-right: 24rem !important;
|
||||
// margin-right: 12rem !important;
|
||||
// right: 3rem;
|
||||
// position: relative;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet {
|
||||
background-color: rgb(255, 255, 255) !important;
|
||||
}
|
||||
|
||||
.swiper-horizontal > .swiper-pagination-bullets,
|
||||
.swiper-pagination-bullets.swiper-pagination-horizontal {
|
||||
width: 97.5% !important;
|
||||
}
|
||||
|
||||
.swiper-container-horizontal > .swiper-pagination-bullets {
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
// width: 10% !important;
|
||||
}
|
||||
|
||||
div.swiper-button-prev,
|
||||
@@ -32,10 +40,11 @@ div.swiper-button-next {
|
||||
}
|
||||
|
||||
.swiper-wrapper:hover .swiper-slide {
|
||||
z-index: 10000;
|
||||
opacity: 0.3 !important;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.3) !important;
|
||||
transform: scale(1.4) !important;
|
||||
opacity: 1 !important;
|
||||
|
||||
@include responsive(tab_port) {
|
||||
@@ -50,7 +59,8 @@ div.swiper-button-next {
|
||||
color: #fff;
|
||||
|
||||
&__heading {
|
||||
padding-top: 2rem;
|
||||
margin-bottom: 0;
|
||||
padding-left: 4rem;
|
||||
}
|
||||
|
||||
&__container::-webkit-scrollbar {
|
||||
@@ -63,7 +73,7 @@ div.swiper-button-next {
|
||||
}
|
||||
|
||||
&--movie:hover ~ &--movie {
|
||||
transform: translate3d(5rem, 0, 0);
|
||||
transform: translate3d(6.5rem, 0, 0);
|
||||
|
||||
@include responsive(tab_port) {
|
||||
transform: translate3d(3rem, 0, 0);
|
||||
|
||||
@@ -16,11 +16,11 @@
|
||||
|
||||
&__container {
|
||||
background-color: transparent;
|
||||
margin-left: 3.8rem;
|
||||
display: flex;
|
||||
height: 6.7rem;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding-left: 2rem;
|
||||
|
||||
@include responsive(phone) {
|
||||
margin-left: 1rem;
|
||||
@@ -99,8 +99,8 @@
|
||||
}
|
||||
|
||||
&--logo {
|
||||
margin-top: 1rem;
|
||||
height: 5rem;
|
||||
margin-top: 2rem;
|
||||
height: 6rem;
|
||||
padding-right: 1rem;
|
||||
|
||||
@include responsive(tab_port) {
|
||||
@@ -110,7 +110,7 @@
|
||||
|
||||
&-link {
|
||||
font-weight: 500;
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.4rem;
|
||||
color: rgb(221, 221, 221);
|
||||
text-decoration: none;
|
||||
margin-right: 2rem;
|
||||
|
||||
Reference in New Issue
Block a user