Template:FAFU CHINA/fenye/css/styles
body {
font-family: 'Architects Daughter', sans-serif;
}
- paper-back {
width: 100%; height: 100vh; background-color: #243040; position: fixed; top: 0; left: 0; font-size: 33px;
}
- paper-back nav {
padding: 120px 34px;
}
- paper-back nav a {
display: block; margin-bottom: 25px; text-decoration: none; color: rgba(255, 255, 255, 0.7);
}
- paper-window {
height: 100vh; width: 100vw; position: relative; overflow-x: hidden; overflow-y: scroll; z-index: 2;
}
- paper-window.tilt {
overflow: hidden; pointer-events: none;
}
- paper-window.tilt #paper-front {
-webkit-transform: rotate(10deg) translateZ(0); transform: rotate(10deg) translateZ(0);
}
- paper-front {
pointer-events: auto; position: relative; z-index: 3; background-color: white; box-shadow: 0 0 20px rgba(0, 0, 0, 0.7); -webkit-transform-origin: center 70%; -ms-transform-origin: center 70%; transform-origin: center 70%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;
}
- container section {
height: 600px; text-align: center;
}
- container section:first-of-type {
padding-top: 10vh;
}
- container section:first-of-type h1 {
font-size: 45px;
}
- container section:first-of-type p {
font-size: 25px;
} @media (max-width: 600px) {
#container section:first-of-type { padding-top: 15vh; } #container section:first-of-type h1 { font-size: 30px; } #container section:first-of-type p { font-size: 18px; }
}
- container section:nth-of-type(2n) {
background-color: #edf1f5;
}
.hamburger {
position: fixed; z-index: 4; top: 30px; left: 30px; width: 45px; height: 34px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
} .hamburger span {
position: relative;
} .hamburger span, .hamburger span:before, .hamburger span:after {
display: block; width: 45px; height: 6px; background-color: #243040; border-radius: 2px;
} .hamburger span:before, .hamburger span:after {
content: ; position: absolute;
} .hamburger span:before {
bottom: -14px;
} .hamburger span:after {
bottom: -28px;
}
.close {
position: fixed; top: 30px; left: 30px; width: 45px; height: 34px; cursor: pointer;
} .close-z-index{
z-index: 10;
} .close:before, .close:after {
content: ; position: absolute; display: block; width: 45px; height: 6px; top: 50%; background-color: white; border-radius: 2px;
} .close:before {
-webkit-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg);
} .close:after {
-webkit-transform: translateY(-50%) rotate(-45deg); -ms-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg);
}