pillar/src/styles/components/_timeline.sass

.timeline
    .group
        opacity: 0
        animation: fade-in 500ms forwards

    .group-date
        color: rgba($color-text, .4)

    .group-title
        @extend .border-bottom
        @extend .bg-white
        @extend .text-uppercase
        @extend .font-weight-bold
        a
            color: $color-text

body.homepage
    .timeline
        .sticky-top
            top: 2.5rem

body.is-mobile
        .timeline
            .js-asset-list
                @extend .card-deck-vertical
Lazy Home: Lazy load latest blog posts and assets and group by week and project. Javascript tutti.js and timeline.js is needed, and then the following to init the timeline: $('.timeline') .timeline({ url: '/api/timeline' }); # Javascript Notes: ## ES6 transpile: * Files in src/scripts/js/es6/common will be transpiled from modern es6 js to old es5 js, and then added to tutti.js * Files in src/scripts/js/es6/individual will be transpiled from modern es6 js to old es5 js to individual module files ## JS Testing * Added the Jest test framework to write javascript tests. * `npm test` will run all the javascript tests Thanks to Sybren for reviewing 2018-11-12 12:57:25 +01:00			`.timeline`
Project-Timeline: Introduced timeline on projects Limited to projects of category assets and film for now. 2018-11-20 16:29:01 +01:00			`.group`
			`opacity: 0`
			`animation: fade-in 500ms forwards`

Minor layout and style adjustments. 2018-11-22 21:35:27 +01:00			`.group-date`
			`color: rgba($color-text, .4)`

Timeline: Style and layout adjustments 2018-11-21 20:32:27 +01:00			`.group-title`
Minor layout and style adjustments. 2018-11-22 21:35:27 +01:00			`@extend .border-bottom`
			`@extend .bg-white`
			`@extend .text-uppercase`
			`@extend .font-weight-bold`
			`a`
			`color: $color-text`
Timeline: Style and layout adjustments 2018-11-21 20:32:27 +01:00
Project-Timeline: Introduced timeline on projects Limited to projects of category assets and film for now. 2018-11-20 16:29:01 +01:00			`body.homepage`
			`.timeline`
			`.sticky-top`
			`top: 2.5rem`
Lazy Home: Lazy load latest blog posts and assets and group by week and project. Javascript tutti.js and timeline.js is needed, and then the following to init the timeline: $('.timeline') .timeline({ url: '/api/timeline' }); # Javascript Notes: ## ES6 transpile: * Files in src/scripts/js/es6/common will be transpiled from modern es6 js to old es5 js, and then added to tutti.js * Files in src/scripts/js/es6/individual will be transpiled from modern es6 js to old es5 js to individual module files ## JS Testing * Added the Jest test framework to write javascript tests. * `npm test` will run all the javascript tests Thanks to Sybren for reviewing 2018-11-12 12:57:25 +01:00
			`body.is-mobile`
			`.timeline`
			`.js-asset-list`
Project-Timeline: Introduced timeline on projects Limited to projects of category assets and film for now. 2018-11-20 16:29:01 +01:00			`@extend .card-deck-vertical`