Source

Modified ago
include head.pug include loader.pug include menu.pug include scroller.pug mixin family(name) - const info = require(__dirname + '/public/data/' + name + '.json'); const sizeOf = require('image-size'); const utils = require(__dirname + '/public/scripts/lib/utils.js'); +head(utils.capitalize(info.name)) body.body.body_hidden(class!=`body_page_${info.name}`, data-start=info.colors.start, data-end=info.colors.end) //- Menu slider +menu(info.name) //- Content slide .slider__slide.content //- Menu button .menu__button(class!=`menu__button_${info.name}`) .hamburger.menu__hamburger(class!=`hamburger_${info.name}`) .menu__button.menu__button_bottom.menu__button_hidden(class!=`menu__button_${info.name}`) //- Hamburger just to keep the button the same size as the main one .hamburger.menu__hamburger.hamburger_hidden //- Main play button .play-button.play-button_main#play-button(class!=`play-button_${info.name}`) //- Horizontal slide .slider.slider_type_horizontal .slider__wrapper //- Music slide .slider__slide .columns .columns__column.columns__column_md_6.columns__column_centered-content h2.title.title_small(class!=`title_${info.name}`) Music .grow .slider.slider_type_vertical-list#music .slider__wrapper //- Insert songs each song in info.music .slider__slide .song.frame.frame_square.frame_has-title(class!=`frame_${info.name}`, data-url!=`${song.url}`) h3.frame__title= song.title //- frame__image inside frame__image since it doesn't make a difference to the image itself but the play-button needs to be relative to the image and not the frame .frame__image img.frame__image(src=`/public/images/music/${song.cover}`) .play-button //- Audio element that will play all songs audio#player //- Main slide .slider__slide //- Vertical slider .slider.slider_type_vertical .slider__wrapper //- Intro slide .slider__slide .columns .columns__column.columns__column_md_6.columns__column_md_hidden canvas.circles(class!=`circles_${info.name}`) //- canvas.circles2(class!=`circles_${info.name}`) .main(class!= `main_${info.name}`,style=`background-image:url(/public/images/site/${info.image})`) if info.extra .main.main_extra(class!= `main_${info.name}`,style=`background-image:url(/public/images/site/${info.extra})`) .columns__column.columns__column_md_6.columns__column_centered-content if info.title_image h1.title(class!=`title_${info.name}`) img.title__image(src=`/public/images/site/${info.title_image}`, alt!=info.name) else h1.title(class!=`title_${info.name}`)= utils.capitalize(info.name) | span.title__extra= info.japanese ul.characteristics(class!=`text_${info.name}`) each characteristic in info.characteristics li.characteristics__characteristic!= characteristic //- Description slide .slider__slide .columns //- Empty column .columns__column.columns__column_md_6.columns__column_md_hidden .columns__column.columns__column_md_6.columns__column_centered-content //- Description .description(class!=`description_${info.name} text_${info.name}`) - var text = info.description; - var wordArray = text.split(' '); - var b = 0; //- Separate words for effects while b < wordArray.length span(class!=`description__word_${info.name}`)= wordArray[b] | | - b++ //- Up and down buttons .slider__button.slider__button_type_vertical.slider__button_direction_up.slider__button_disabled(class!=`slider__button_${info.name}`) .slider__button.slider__button_type_vertical.slider__button_direction_down(class!=`slider__button_${info.name}`) //- Fake slider to hold the second canvas on the front .slider.slider_type_fake#fake-slider .slider__wrapper .slider__slide .columns .columns__column.columns__column_md_6.columns__column_md_hidden canvas.circles(class!=`circles_${info.name} circles2_${info.name}`) //- Empty slide .slider__slide //- Gallery slide .slider__slide .columns .columns__column.columns__column_xs_12.columns__column_centered-content h2.title.title_small(class!=`title_${info.name}`) | Gallery +scroller(info.name, true) //- Gallery element #gallery.gallery //- Create gallery sections - index = 0 each images, name in info.gallery h3(id!=`gallery-${name}`, class!=`gallery__title_${info.name}`).gallery__title= utils.capitalize(name) .gallery__section(class!=`gallery__section_${info.name}`) //- Create gallery images each filename in images - dimensions = sizeOf(`${__dirname}/public/images/galleries/${filename}`) .frame(class!=`frame_${info.name}`, style=`height: 250px; width: ${250 * dimensions.width / dimensions.height}px`, data-src=filename, data-index=index) +loader(class=`loader__spinner_${info.name}`) img.frame__image.frame__image_loading - index++ //- Gallery section shortcuts .pagination each images, name in info.gallery .pagination__bullet(class!=`pagination__bullet_${info.name}`, data-section=utils.capitalize(name)) .mouse(class!=`mouse_${info.name}`) .mouse__wheel //- Left and right buttons .slider__button.slider__button_type_horizontal.slider__button_direction_left.slider__button_disalllow(class!=`slider__button_${info.name}`) .slider__button.slider__button_type_horizontal.slider__button_direction_right.slider__button_disalllow(class!=`slider__button_${info.name}`) .overlay.overlay_hidden#overlay(class!=`overlay_${info.name}`) //- Modal .slider.slider_type_gallery.modal.modal_hidden#gallery-modal(class!=`modal_${info.name}`) .slider__wrapper each images, name in info.gallery each filename in images .slider__slide.modal__item(data-src=filename) +loader(class=`loader__spinner_${info.name}`) img.modal__image.modal__image_loading .modal__close(class=`modal__close_${info.name}`) Close //- Left and right buttons .slider__button.slider__button_type_horizontal.slider__button_direction_left .slider__button.slider__button_type_horizontal.slider__button_direction_right script(src='/public/scripts/main.min.js')