Source

/aya.waifu.ist/public/stylesheets/pages/old.sass

Modified ago
@use 'sass:list'

$blue: #a9c0ff
$light-blue: #dae4ff
$black: #2e364d

$semi-blue: rgba(255, 255, 255, 0.3)

.old-title
    font-family: Gabriela
    font-size: 4em
    margin: 0.4em
    text-align: center
.old-title_small
    font-size: 2em
    text-align: left


.old-icon path
    fill: #a5beff
    stroke: #8292C2

// Fancy Corners
.old-corner
    height: 30vh
    position: absolute

.old-corner_lt
    left: 0
    top: 0

.old-corner_rt
    right: 0
    top: 0
    transform: rotateY(180deg)

.old-corner_lb
    bottom: 0
    left: 0
    transform: rotateX(180deg)

.old-corner_rb
    bottom: 0
    right: 0
    transform: rotateX(180deg) rotateY(180deg)

// Welcome letters
.old-welcome
    align-items: baseline
    bottom: 94%
    box-sizing: border-box
    display: flex
    justify-content: center
    padding: 0 10%
    position: absolute
    width: 100%

.old-letter__char
    animation: wobble 1000 linear
    height: 15vh
    padding: 0 10px
    //   opacity: 0

.old-letter
    margin: 0
    &:first-child .old-letter__char
        height: 40vh
        margin-right: -8vh

    &:nth-child(3) .old-letter__char
        height: 22vh


// Marquees
.marquees
    height: 100%
    overflow: hidden
    position: relative
    width: 100%

.marquee
    animation-play-state: paused
    font-size: 15vh
    line-height: 0
    pointer-events: none
    position: absolute

    @for $i from 1 through 5
        &:nth-child(#{$i})
            top: 7.5% + (20) * ($i - 1)


.marquee_left
    animation: marquee-left 0.5s infinite linear
    left: -100%
    transform: translateX(100vw)

.marquee_right
    animation: marquee-right 0.5s infinite linear
    left: -2em
    transform: translateX(0)


@keyframes marquee-left
    0%
        transform: translateX(-1.06em)
    100%
        transform: translateX(0)

@keyframes marquee-right
    0%
        transform: translateX(1.06em)
    100%
        transform: translateX(0)

@keyframes title-rotate
    0%
        transform: rotateZ(0)
    100%
        transform: rotateZ(360deg)

// Anchors
.anchors
    height: 14vh
    left: 0
    position: absolute
    top: 0
    transform: translateY(0)
    transition: 1s
    width: 100%
    z-index: 3
.anchors_hidden
    transform: translateY(100vh)

.anchors_stored .anchor
    transition: 1s 1s
    transform: translateX(-50%) translateY(-18vh)

.anchors__tooltip
    background-color: $semi-blue
    border: solid 3px #8292C2
    border-radius: 50px
    font-size: 6vh
    height: 15vh
    line-height: 2.3
    opacity: 0
    pointer-events: none
    position: absolute
    top: 20vh
    text-align: center
    transition: opacity 0.3s
    width: 30vh
    z-index: 10

.anchors__tooltip_small
  background: none
  border: none
  font-size: 4vh
  height: 14vh
  line-height: 1
  top:  3vh
  width: 14vh

.anchor
    cursor: pointer
    height: 32vh
    max-height: none
    position: absolute
    transition: 1s

.anchor_bottom
    top: 67vh

.anchor_middle
    top: 37vh

.anchor_top
    top: 7vh

.anchor_left-1
    left: 0

.anchor_left-2
    left: 10vw

.anchor_left-3
    left: 20vw

.anchor_right-1
    left: 63vw

.anchor_right-2
    left: 73vw

.anchor_right-3
    left: 83vw

.anchor_main
    display: block
    height: 92vh
    left: 50vw
    min-height: 18vh
    pointer-events: none
    top: 7vh
    transform: translateX(-50%)


.anchor_small
    height: 14vh
    pointer-events: all
    top: 0
    transform: translateX(-50%)
    @for $i from 1 to 8
        &:nth-child(#{$i})
            left: 50vw + (-14vw * (3 - ($i - 1)))

.old-status__text
    a
        color: inherit
        font-weight: 600
        text-decoration: none
        white-space: nowrap

// Status
.old-status
    margin: 3em 0

.old-status__text
    margin: 0.5em 0

.old-status__date, .old-status__byebye
    margin: 0.5em 0
    text-align: right

// Abouts
.old-about__page
    margin-top: -4vh
    height: 80%
    opacity: 0
    pointer-events: none
    position: absolute
    transition: 1s
    width: 100%

.old-about__page_active
    pointer-events: all
    opacity: 1

.old-about__table
    height: 80%
    text-align: center
    width: 100%

.old-about__image
    bottom: 0
    position: absolute
    right: 0
    transform: rotateY(180deg)
    width: 100%

.old-about-us__image
    bottom: 0
    left: 0
    max-height: 100%
    position: absolute
    transform: rotateY(180deg)

// Songs
.old-songs
    height: 60vh
    left: 5%
    position: absolute
    width: 90vw

.old-songs__page
    display: flex
    height: 100%
    flex-wrap: wrap
    justify-content: center
    position: absolute
    width: 100%

.old-songs__page_active .old-song
    transform: scale(1)
    transition: 1s 1s

.old-songs__visualizer
    left: 0
    position: absolute
    top: 0

.old-song
    height: 20vh
    position: relative
    transition: 1s 0s
    transform: scale(0)
    transform-origin: center
    width: 20vh
    z-index: 2

    &:hover
        .old-song__info
            height: 100%
            width: 100%

        .old-song_title
            opacity: 1

.old-song__player
    height: 14vh
    left: 50%
    position: absolute
    top: 50%
    transform: translateX(-50%) translateY(-50%)
    width: 14vh

.old-song__info
    background-color: $semi-blue
    border: solid 3px #8292C2
    border-radius: 50%
    bottom: 0
    height: 70%
    left: 0
    margin: auto
    overflow: hidden
    position: absolute
    right: 0
    top: 0
    transition: height 1s, width 1s
    width: 70%

.old-song_title
    animation: title-rotate 8s infinite linear
    font-weight: 400
    height: 140%
    left: -20%
    opacity: 0
    margin: 0
    pointer-events: none
    position: absolute
    top: -20%
    transition: opacity 1s
    user-select: none
    width: 140%
    span
        height: 100%
        left: 50%
        position: absolute

.play-button_old
    border: none
    height: 100%
    transform: translate3d(-50%,50%,0) rotate(0)
    width: 100%


.old-songs__link, .old-about__link
    cursor: pointer
    position: absolute
    z-index: 1

.old-songs__link
    top: 100%
.old-about__link
    bottom: 0

.old-songs__link_hidden, .old-about__link_hidden
    display: none

.old-songs__link_dir_left, .old-about__link_dir_left
    left: 2vw

.old-songs__link_dir_right, .old-about__link_dir_right
    right: 2vw

.old-bgms
    left: 0
    display: flex
    height: 5vh
    justify-content: center
    position: absolute
    top: 100%
    width: 100%

.old-bgms__bgm
    background-color: $semi-blue
    border: 2px solid #8292C2
    border-radius: 2vh
    cursor: pointer
    font-size: 0.7em
    height: 100%
    margin: 0 0.5em
    padding: 0.75vh
    text-align: center
    transform: translateY(0)
    transition: 0.3s
    width: 10%

    &:hover
        transform: translateY(-10px)

// Gallery
.old-board
    display: block
    height: 90%
    margin: 0 auto
    perspective: 1000px
    position: relative
    top: 5%
    transform-style: preserve-3d
    transform: rotateY(0deg)
    width: 140vh * 0.9
    z-index: 10

.old-board__board, .old-board__text
    height: 100%
    pointer-events: none
    position: absolute
    .old-board__img
        height: 100%

.old-board__text
    transform: translateZ(20px)

// TODO: Improve all of this
// Format: left, top, width, height, translateZ, portrait, tape1, tape2, tape3, tape4
$coords: (32 22 4 7 40 false 1.2 -1 -1 -1 -1) (26 27 6 11 50 false 1.6 -1 -1 -1 -1) (76 25 21 34 50 true 4 -1 -1 -1 -1) (63 22 16 14 70 true 4 -1 -1 -1 -1) (78 0 21 19 60 false 4 -1 -1 -1 -1) (14 2 23 17 60 true 4 -1 -1 -1 -1) (82 68 11 23 80 false 4 -1 -1 -1 -1) (0 67 12 17 40 false 4 -1 -1 -1 -1) (34 40 16 17 60 false 4 -1 -1 -1 -1) (14 42 25 25 80 false 4 -1 -1 -1 -1) (39 54 33 44 100 false 4 -1 -1 -1 -1)

.old-board__layer
    border: 4px solid #000
    overflow: hidden
    position: absolute

    &:hover .old-board__link
        opacity: 1

    .old-board__img
        left: 50%
        position: absolute
        top: 50%
        transform: translate3d(-50%, -50%, 0)


    @for $i from 1 through 11
        $coord: list.nth($coords, $i)

        $width: list.nth($coord, 3)
        $height: list.nth($coord, 4)
        &:nth-child(#{$i + 2})
            height: $height + 0%
            left: list.nth($coord, 1) + 0%
            top: list.nth($coord, 2) + 0%
            width: $width + 0%

            transform: translateZ(list.nth($coord, 5) + 0px)

            .old-board__img
                @if list.nth($coord, 6)
                    width: 100%
                @else
                    height: 100%

            .old-board__link
                font-size: list.nth($coord, 7) + 0vh

.old-board__link
    align-items: center
    background: #000c
    cursor: pointer
    display: flex
    height: 100%
    justify-content: center
    opacity: 0
    position: absolute
    transition: 0.5s
    width: 100%

.old-gallery__screen
    align-items: center
    background: url('/public/images/site/old/gallery_background.png')
    box-sizing: border-box
    display: flex
    justify-content: center
    left: 0
    height: 100vh
    padding-bottom: 15vh
    position: absolute
    top: 100vh
    transition: transform 1s 1s, top 0s 2s
    width: 100vw
    z-index: 1000
.old-gallery__screen_active
    top: -100vh
    transition: transform 1s 0s
    transform: translateY(100%)

.old-gallery__list
    background: rgba(0, 0, 0, 0.1)
    left: 0
    height: 15vh
    position: absolute
    top: 100vh
    transition: 1s 0s
    width: 100vw
    z-index: 1001
.old-gallery__list_active
    transition: 1s 1s
    transform: translateY(-100%)

.old-gallery__slider
    height: 100%

.old-gallery__image
    max-height: 100%
    max-width: 100%
.old-gallery__frame
    width: initial
    &:not(:first-child)
        margin-left: -125px

.old-gallery__thumb
    height: 100%
    pointer-events: none

.old-gallery__link
    cursor: pointer
    font-size: 4vh
    left: 1em
    position: absolute
    top: 1em
    z-index: 1

// Comments
.old-form
    padding: 1em
    width: 50%

.old-form__label
    font-size: 0.75em

.old-form__input
    background-color: $semi-blue
    border-radius: 1vh
    color: #8292C2
    outline: none
    &::placeholder
        opacity: 0.5
        color: #8292C2
.old-form__input_single
    margin: 0.1vh
    padding: 0.2vh 0.8vh
    border: 1px solid #8292C2
    font-size: 2vh
.old-form__input_multi
    display: block
    width: 100%
    height: 20vh
    margin: 0.1vh
    padding: 1vh
    border: 1px solid #8292C2
    max-height: 70vh
    max-width: 50vw
    max-height: 65vh

.old-form__controls
    font-size: 0.75em

.old-form__submit
    align-items: center
    cursor: pointer
    display: flex
    float: right
    &:hover
        .old-form__path
            fill: #f00
        .old-form__path_ok
            fill: #0f0

.old-form__icon
    height: 1em
    margin-left: 0.2em

.old-form__path
    transition: fill 0.3s

.old-form__reply
    background-color: $semi-blue
    border: 1px solid #8292C2
    border-radius: 1vh
    cursor: pointer
    float: left
    padding: 2px
    padding-right: 4vh
    position: relative
    transition: 1s
    transform: scale(0)
    &::after
        content: 'X'
        color: #8292C2
        position: absolute
        right: 4px
.old-form__reply_active
    transform: scale(1)

.old-comments
    height: 100vh
    padding: 16vh 0 1em

.old-comments__thread .old-comments__thread
    padding-left: 1em

.old-comment
    background-color: $semi-blue
    border: 0.4vh solid #8292C2
    border-radius: 1vh
    margin-bottom: 1em
    padding: 2%
    position: relative
    div
        font-size: 0.5em
        position: absolute

.old-comment__name
    left: 0
    top: -0.75em
.old-comment__date
    right: 0
    top: -0.75em
.old-comment__reply
    bottom: -0.75em
    left: 0
.old-comment__id
    bottom: -0.75em
    right: 0


/*
 *  OVERWRITES
 */
.body_page_old
    background-image: url('/public/images/site/old/noise.png')
    color: #dae4ff
    font-family: "Helvetica Neue", Helvetica,Arial, sans-serif
    font-weight: 400
    text-shadow: 0 0 1px $black
    -webkit-text-stroke: initial

    .content .slider__wrapper
        font-size: 4vh

        // TODO: Remove the need for this
        *
            box-sizing: border-box

// Menu
.menu_old
    background-image: url('/public/images/site/old/noise.png')
    border-color: #8292C2
    color: #dae4ff
    .slider
        background-color: $semi-blue


.menu__button_old
    background-color: $semi-blue
    border: 8px solid #8292C2
    border-left-color: #c7d5ff
    border-top-color: #c7d5ff

.hamburger_old
    &, &:before, &:after
        background-color: #8292C2

// Play button
.play-button_main_old
    border-color: transparent #8292C2 transparent #8292C2

// Scroller
.scroller.scroller_old .scroller__wrapper
    box-sizing: content-box
.scrollbar_old
    background-color: rgba(255, 255, 255, 0.1)
    width: 7px
.scrollbar__handle_old
    background-color: #c3d4ff
    border: 2px solid #8292C2
    border-radius: 50px

// Contained
// Need to hammer this in because this page was not created for the new layout
.body_old_contained
    .marquee
        font-size: 50px
    .anchors
        height: 100%
    .anchor
        height: 32%

    .anchor_bottom
        top: 67%

    .anchor_middle
        top: 37%

    .anchor_top
        top: 7%

    .anchor_left-2
        left: 10%

    .anchor_left-3
        left: 20%

    .anchor_right-1
        left: 63%

    .anchor_right-2
        left: 73%

    .anchor_right-3
        left: 83%

    .anchor_main
        height: 92%
        left: 50%
        top: 7%