Commit 63d23904 authored by Ale's avatar Ale

feat: Update styles

parent 0b896c1b
This diff is collapsed.
......@@ -200,18 +200,21 @@ const init_timeline = function(items)
{
if(!items) return;
const timeline = document.querySelector('.timeline');
console.log(items);
items.forEach( i => {
var item = document.createElement('div');
item.classList.add( `item-${i.pk}`);
item.classList.add('timeline-item');
item.innerHTML = i.img ? `<img class="timeline-item__img" src="${ i.img }" />` : '';
var video_holder = document.createElement('div');
video_holder.classList.add('timeline-item__video');
var video = document.createElement('video');
video.setAttribute('controls', true);
video.setAttribute('src', i.video);
video_holder.appendChild(video);
item.appendChild(video_holder);
item.innerHTML += `<h3 class="timeline-item__name">${ i.name }</h3>`;
item.innerHTML += '<div class="timeline-item__video"><video src="' + i.video + '" controls></video></div>';
item.innerHTML += `<p class="timeline-item__terms"><b>Categorías</b><br/> ${ i.cats['category'].join(", ") }</p>`;
item.innerHTML += `<p class="timeline-item__date"><b>Fecha</b> ${ i.date }</p>`;
console.log ( item.innerHTML );
item.addEventListener('click', ()=>{ select_item(i.pk) });
item.innerHTML += `<p class="timeline-item__terms"><em>Categorías</em><br/> ${ i.cats['category'].join(", ") }</p>`;
item.innerHTML += `<p class="timeline-item__date"><em>Fecha</em> ${ i.date }</p>`;
item.addEventListener('click', ()=>{ select_item(i.pk); });
timeline.appendChild( item );
} );
}
......
......@@ -359,10 +359,10 @@ select:hover {
background: white; }
::-webkit-scrollbar-thumb {
background-color: #ddd; }
background-color: #FD4741; }
* {
scrollbar-color: #ddd white;
scrollbar-color: #FD4741 white;
scrollbar-width: thin; }
/* Common regions */
......@@ -385,16 +385,19 @@ select:hover {
.region-content__inner--twocol.show-left {
grid-template-columns: 0fr 1fr !important; }
@media screen and (min-width: 768px) {
.layout__left--twocol {
max-height: calc(100vh - 1.6rem);
overflow-y: auto; } }
.site-header {
padding: 0 0.8rem;
margin: 0.8rem 0;
background: white; }
@media screen and (min-width: 768px) {
.site-header {
height: 20vh; } }
.site-logo {
width: 50%; }
@media screen and (min-width: 1200px) {
.site-logo {
width: 75%; } }
.two-columns {
column-count: 2; }
......@@ -587,28 +590,20 @@ select:hover {
.timeline-wrapper {
padding: 1.6rem; }
@media screen and (min-width: 768px) {
.timeline-wrapper {
max-height: calc(100vh - 20vh - 3.2rem);
overflow-y: auto; } }
.timeline-item {
background: white;
margin-bottom: 1.6rem; }
.timeline-item:hover:not(.selected) {
outline: 2px solid rgba(0, 0, 0, 0.05);
cursor: pointer; }
.timeline-item.selected {
pointer-events: none; }
margin-bottom: 1.6rem;
padding-bottom: 1.6rem; }
.timeline-item:not(:last-child) {
border-bottom: 2px dashed; }
.timeline-item > a {
display: block; }
.timeline-item__name {
margin: 0.8rem 0;
color: #333; }
font-size: 2rem; }
.timeline-item a:link {
color: #FD4741; }
......@@ -627,12 +622,18 @@ select:hover {
.timeline-item__video video {
max-width: 100%;
height: auto; }
.timeline-item__video video:hover {
cursor: pointer; }
.timeline-item__terms,
.timeline-item__date {
font-size: 0.7em;
opacity: 0.8;
text-transform: uppercase; }
font-size: 0.6em;
text-transform: uppercase;
margin-top: 0.5333333333rem; }
.timeline-item__terms em,
.timeline-item__date em {
font-style: normal;
opacity: 0.7; }
.form__field {
margin-bottom: 3.2rem; }
......@@ -714,24 +715,26 @@ select:hover {
font-size: 1.8rem; }
.menu-main {
padding: 1.6rem 0;
margin-top: 1.6rem;
padding: 0.8rem 0.8rem 1.6rem;
font-weight: bold;
color: #333;
color: #43AD36;
text-transform: uppercase;
transition: color 0.2s ease;
font-size: 1.6rem; }
.menu-main__items {
display: flex; }
.menu-main__items .menu-main__item {
margin-bottom: 1.6rem; }
@media screen and (min-width: 1200px) {
.menu-main__items {
display: flex; }
.menu-main__items .menu-main__item:not(:last-child) {
margin-right: 1.6rem;
margin-bottom: 0; } }
.menu-main__item:hover {
cursor: pointer;
color: #fc160f; }
.menu-main__item:not(:last-child) {
margin-right: 1.6rem; }
.modal {
position: fixed;
z-index: 150000; }
......
This diff is collapsed.
......@@ -67,8 +67,8 @@ select
background: white
::-webkit-scrollbar-thumb
background-color: #ddd
background-color: $red
*
scrollbar-color: #ddd white
scrollbar-color: $red white
scrollbar-width: thin
......@@ -21,15 +21,19 @@
.region-content__inner--twocol.show-left
grid-template-columns: 0fr 1fr !important
.layout__left--twocol
+breakpoint('sm')
max-height: calc(100vh - #{$m})
overflow-y: auto
.site-header
padding: 0 $m/2
margin: $m/2 0
background: white
+breakpoint('sm')
height: $height_header
.site-logo
width: 50%
+breakpoint('lg')
width: 75%
.two-columns
column-count: 2
......
// timeline items
.timeline-wrapper
+breakpoint('sm')
max-height: calc(100vh - #{ $height_header } - #{ $m*2 })
overflow-y: auto
padding: $m
.timeline-item
background: white
margin-bottom: $m
.timeline-item:hover:not(.selected)
outline: 2px solid rgba(black, .05)
cursor: pointer
.timeline-item.selected
pointer-events: none
padding-bottom: $m
&:not(:last-child)
border-bottom: 2px dashed
.timeline-item > a
display: block
&:hover
.timeline-item__name
margin: $m/2 0
color: #333
font-size: 2rem
.timeline-item
+link_colors($red, $green)
.timeline-item.hidden
......@@ -26,8 +21,13 @@
.timeline-item__video video
max-width: 100%
height: auto
&:hover
cursor: pointer
.timeline-item__terms,
.timeline-item__date
font-size: .7em
opacity: .8
font-size: .6em
text-transform: uppercase
margin-top: $m/3
em
font-style: normal
opacity: .7
.menu-main
padding: $m 0
margin-top: $m
padding: $m/2 $m/2 $m
font-weight: bold
color: #333
color: $green
text-transform: uppercase
transition: color .2s ease
font-size: 1.6rem
.menu-main__items
display: flex
.menu-main__item
margin-bottom: $m
+breakpoint('lg')
display: flex
.menu-main__item:not(:last-child)
margin-right: $m
margin-bottom: 0
.menu-main__item:hover
cursor: pointer
color: darken($red, 10%)
.menu-main__item:not(:last-child)
margin-right: $m
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment