@import "./variable.scss";

@import './common.scss';
@import './dash-bg.scss';
@import './footer.scss';
@import './header.scss';

$article-bg: white;

$main-bg: rgba(0, 72, 131, 0.5);

$paging-number-size: 30px;
$paging-number-bg: white;
$paging-number-active-bg: #ee5b33;

$header-height: 10rem;
$footer-height: 2rem;

html, body {
    height: 100%;
}

@font-face {
    font-family: YueSong;
    src: url('/static/font/yuesong.TTF');
}


header {
    position: absolute;
    top: 0;
    width: 100%;
    height: $header-height;
    background-color: black;
    z-index: 150;
}

.footer {
    position: absolute;
    bottom: 0;
}

header {
    overflow: hidden;
    position: relative;
    .title {
        color: white;
        font: {
            family: YueSong, PMingLiU, Hiragino Sans GB;
            size: 3rem;
        }
        letter-spacing: 10px;
    }

    .header-text {
        position: relative;
        width: 1240px;
        margin: 0 -620px;
        left: 50%;
        height: 100%;
        img {
            height: 100%;
            position: absolute;
            height: 200%;
            top: 0;
            left: 0;
            z-index: -1;
        }
    }
}

#article-canvas {
    height: 100%;
    width: 100%;
}

nav {
    position: absolute;
    width: 1240px;
    margin: 0 -620px;
    left: 50%;
    bottom: 0;
    height: 2rem;
    ul {
        margin: 0;
        padding: 0;
        float: right;
    }
    li {
        display: inline-block;
        float: left;
        color: white;
        margin-left: 1rem;
        a {
            color: white;
        }
    }
}

.main {
    position: absolute;
    padding: ($header-height + 1rem) 0 ($footer-height + 1rem);
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    box-sizing: border-box;
    z-index: 100;
}


.paper-clip {
    position: absolute;
    width: 100px;
    top: 6rem;
    left: 30%;
    margin-left: -50px;
    z-index: 1260;
}

$main-bg: #eaeae7;

.main-wrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 50%;
    margin-left: -620px;
    width: 1240px;
    border-radius: 0.1rem;
    box-sizing: border-box;
    background: {
        color: $main-bg;
    }
    box-shadow: 6px 3px 0 #a33e24;
}

.article-wrapper {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    transform: translate(0, 0);
    transition: all 700ms;
    padding: 0 1rem;
    backface-visibility: hidden;

    &.c {
        transform: translate(0, -100%);
       
    }
    &.blur {
        
        filter: blur(3px);
        
        .article {
            box-shadow: none;
        }
    }

    &.active {
        z-index: 150;
        .article {
            box-shadow: 0 0 20px black;
            &:before, &:after {
                display: none;
            }
        }
    }

    &.cover {
        will-change: transform;
        transform: translateZ(0);
        .article {
            background: {
                image: url(/static/img/fish.jpg);
                size: cover;
                repeat: no-repeat;
                position: center center;
            }
        }
    }
}


.articles {
    @include clearfix;
    backface-visibility: hidden;
    width: 70%;
    display: inline-block;
    position: relative;
    z-index: 100;
    height: 100%;
    border-radius: 1rem;
    float: left;
    box-sizing: border-box;
    box-shadow: 0 0 20px $main-bg inset;
    overflow: hidden;
    .article {
        background-color: $article-bg;
        padding: 8px;
        margin-bottom: 10px;
        position: relative;
        width: 90%;
        margin-top: 1rem;
        border-radius: 0.5rem;
        box-shadow: 3px 0 10px rgba(100, 100, 100, 1);
        transition: all;
        min-height: 80%;
        

      
        
        
        &:before, &:after {
            position: absolute;
            content: '';
            display: block;
            opacity: 0.4;
            filter: blur(1px);
            box-sizing: border-box;
            height: 100%;
            width: 1rem;
            background-color: $main-bg;
        }

        &:before {
            top: 0rem;
            left: -1.05rem ;
        }

        &:after {
            top: 0rem;
            right: -1.05rem ;
        }
       
        h1 {
            margin: 0;
            font: {
                size: 1.5rem;
            }
        }
    }

    img {
        max-width: 95%;
        margin: 0.5rem auto;
        display: block;
    }

    ul {
        display: none;
    }
}

.slide {
    display: inline-block;
    float: left;

    .avator {
        
        box-sizing: border-box;

        img {
            width: 80%;
            display: block;
            margin: 0 auto;
        }
    }
}

footer {
    position: absolute;
    bottom: 0;
    left: 0;
    background: black;
    height: $footer-height;
    width: 100%;
    z-index: 100;
    box-sizing: border-box;
}

.article-list {
    box-sizing: border-box;
    
    
}

.paging {
    @include clearfix;
    list-style: none;
    position: relative;
    padding: 0;
    margin: 5px auto 15px;
    text-align: center;
    
    &--number {
        display: inline-block;
        text-align: center;
        height: $paging-number-size;
        width: $paging-number-size;
        line-height: $paging-number-size;
        box-shadow: 0px 0px 10px $paging-number-bg;
        background: {
            color: $paging-number-bg;
        }

        &.active {
            background: {
                color: $paging-number-active-bg;
            }
            box-shadow: 0px 0px 10px $paging-number-active-bg;
        }
    }
}