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')