Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- body {
- overflow: hidden;
- padding: 0px;
- margin: 0px;
- background-repeat: no-repeat;
- background-size: contain;
- }
- .header {
- font-family: arial;
- height: 34px;
- position: relative;
- background-color: #613c9e;
- padding: 0.3%;
- box-shadow: 0px 5px 5px 0px #613c9e;
- text-shadow: 1px 1px 1px white;
- width: 100%;
- }
- .header::before {
- content: '';
- position: absolute;
- top: -50%;
- right: -50%;
- bottom: -50%;
- left: -50%;
- z-index: -1;
- /*TODO: DEFINE SIZE:*/
- height: 50px;
- width: 50px;
- background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255, 255, 255, 0.5) 50%, rgba(229, 172, 142, 0));
- background-color: #613c9e;
- -webkit-animation: color_change 6s linear 0s infinite alternate;
- animation: color_change 6s linear 0s infinite alternate;
- -webkit-animation: position_change 6s linear 0s infinite alternate;
- animation: position_change 6s linear 0s infinite alternate;
- }
- @-webkit-keyframes position_change {
- 0% {
- left: 0%;
- top: 10px;
- }
- 100% {
- top: 10px;
- left: 100%;
- }
- }
- @keyframes position_change {
- 0% {
- left: 0%;
- top: 10px;
- }
- 100% {
- top: 10px;
- left: 100%;
- }
- }
- @-webkit-keyframes color_change {
- 0% {
- background-color: #613c9e;
- }
- 5% {
- background-color: #232323;
- }
- 10% {
- background-color: #613c9e;
- }
- 15% {
- background-color: #232323;
- }
- 20% {
- background-color: #613c9e;
- }
- 25% {
- background-color: #232323;
- }
- 30% {
- background-color: #613c9e;
- }
- 35% {
- background-color: #232323;
- }
- 40% {
- background-color: #613c9e;
- }
- 45% {
- background-color: #232323;
- }
- 50% {
- background-color: #613c9e;
- }
- 55% {
- background-color: #232323;
- }
- 60% {
- background-color: #613c9e;
- }
- 65% {
- background-color: #232323;
- }
- 70% {
- background-color: #613c9e;
- }
- 75% {
- background-color: #232323;
- }
- 80% {
- background-color: #613c9e;
- }
- 85% {
- background-color: #232323;
- }
- 90% {
- background-color: #613c9e;
- }
- 95% {
- background-color: #232323;
- }
- 100% {
- background-color: #613c9e;
- }
- }
- @keyframes color_change {
- 0% {
- background-color: #613c9e;
- }
- 5% {
- background-color: #232323;
- }
- 10% {
- background-color: #613c9e;
- }
- 15% {
- background-color: #232323;
- }
- 20% {
- background-color: #613c9e;
- }
- 25% {
- background-color: #232323;
- }
- 30% {
- background-color: #613c9e;
- }
- 35% {
- background-color: #232323;
- }
- 40% {
- background-color: #613c9e;
- }
- 45% {
- background-color: #232323;
- }
- 50% {
- background-color: #613c9e;
- }
- 55% {
- background-color: #232323;
- }
- 60% {
- background-color: #613c9e;
- }
- 65% {
- background-color: #232323;
- }
- 70% {
- background-color: #613c9e;
- }
- 75% {
- background-color: #232323;
- }
- 80% {
- background-color: #613c9e;
- }
- 85% {
- background-color: #232323;
- }
- 90% {
- background-color: #613c9e;
- }
- 95% {
- background-color: #232323;
- }
- 100% {
- background-color: #613c9e;
- }
- }
- body {
- /* make it look decent enough */
- background: #232323;
- overflow: hidden;
- font-family: "Avenir Next", "Avenir", sans-serif;
- }
- a {
- text-decoration: none;
- color: grey;
- transition: color 0.3s ease;
- }
- a:hover {
- color: #4d004d;
- }
- #menuToggle {
- display: block;
- position: absolute;
- right: 20px;
- top: 15px;
- z-index: 1;
- -webkit-user-select: none;
- user-select: none;
- }
- #menuToggle input {
- display: block;
- width: 40px;
- height: 32px;
- position: absolute;
- top: -7px;
- left: -5px;
- cursor: pointer;
- opacity: 0;
- /* hide this */
- z-index: 2;
- /* and place it over the hamburger */
- -webkit-touch-callout: none;
- }
- #menuToggle span {
- display: block;
- width: 35px;
- height: 3px;
- margin-bottom: 6px;
- position: relative;
- background: #fff;
- border-radius: 2px;
- z-index: 1;
- transform-origin: 4px 0px;
- transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
- background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
- opacity 0.55s ease;
- }
- #menuToggle span:first-child {
- transform-origin: 0% 0%;
- }
- #menuToggle span:nth-last-child(2) {
- transform-origin: 0% 100%;
- }
- /*Transformation*/
- #menuToggle input:checked~span {
- opacity: 1;
- transform: rotate(45deg) translate(-2px, -1px);
- background: #232323;
- }
- #menuToggle input:checked~span:nth-last-child(3) {
- opacity: 0;
- transform: rotate(0deg) scale(0.2, 0.2);
- }
- #menuToggle input:checked~span:nth-last-child(2) {
- transform: rotate(-45deg) translate(0, -1px);
- }
- #menu {
- overflow: hidden;
- height: 82.9vh;
- position: absolute;
- width: 200px;
- margin: -50px 0 0 -50px;
- padding: 50px;
- padding-top: 125px;
- background: #0e0e0e;
- list-style-type: none;
- -webkit-font-smoothing: antialiased;
- transform-origin: 0% 0%;
- transform: translate(100%, 0);
- transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
- }
- #menu li {
- padding: 10px 0;
- font-size: 22px;
- }
- /*let's slide it in from the left*/
- #menuToggle input:checked~ul {
- transform: translate(-50%, 0);
- ;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement