HTML, CSS optimalization

This commit is contained in:
Marcel Petráň 2019-04-24 19:31:34 +02:00
parent 3a5eadb765
commit 461b19d210
13 changed files with 107 additions and 4132 deletions

View File

@ -3,8 +3,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="../css/master.css"> <link rel="stylesheet" href="../css/master.css">
<link rel="stylesheet" href="../css/bootstrap.min.css"> <link rel="stylesheet" href="../css/bootstrap.css">
<link rel="shortcut icon" src="../favicon.ico" type="image/vnd.microsoft.icon" /> <link rel="shortcut icon" href="../favicon.ico" type="image/vnd.microsoft.icon" />
<title>Sincoolka</title> <title>Sincoolka</title>
</head> </head>
<body> <body>
@ -13,10 +13,10 @@
<div class="navbar-container"> <div class="navbar-container">
<div class="navbar-grid"> <div class="navbar-grid">
<div class="navbar-grid-col -left"> <div class="navbar-grid-col -left">
<h1 class="title nav">Sincoolka</h1> <h1 class="nav">Sincoolka</h1>
</div> </div>
<div class="navbar-grid-col -right"> <div class="navbar-grid-col -right">
<img src="../img/close-menu.svg" class="close-btn" id="close-menu"> <img src="../img/close-menu.svg" alt="close-menu" class="close-btn" id="close-menu">
</div> </div>
</div> </div>
</div> </div>
@ -48,21 +48,21 @@
<div class="navbar-container"> <div class="navbar-container">
<div class="navbar-grid"> <div class="navbar-grid">
<div class="navbar-grid-col -left"> <div class="navbar-grid-col -left">
<h1 class="title nav">Sincoolka</h1> <h2 class="nav">Sincoolka</h2>
</div> </div>
<div class="navbar-grid-col -right"> <div class="navbar-grid-col -right">
<img src="../img/nav-menu.svg" class="menu-btn" id="open-menu"> <img src="../img/nav-menu.svg" alt="open-menu" class="menu-btn" id="open-menu">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</header> </header>
<main> <main>
<section class="home"> <div class="home">
<a href="#About-us"> <img src="../img/arrow-down.svg" class="arrow-down" alt="arrow down"></a> <a href="#About-us"><img src="../img/arrow-down.svg" alt="arrow down" class="arrow-down"></a>
</section> </div>
<section class="about" id="About-us"> <section class="about" id="About-us">
<h1 class="title">O nás</h1> <h2 class="title">O nás</h2>
<article class="about-us-1"> <article class="about-us-1">
<h3 class="title">Kdo jsme</h3> <h3 class="title">Kdo jsme</h3>
<p class="article">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.</p> <p class="article">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.</p>
@ -73,14 +73,14 @@
</article> </article>
</section> </section>
<section class="gallery-in"> <section class="gallery-in">
<h1 class="title">Galerie</h1> <h2 class="title">Galerie</h2>
<div class="gallery"> <div class="gallery">
<img src="../img/sunset.jpg" alt="Sunset"> <img src="../img/sunset.jpg" alt="Sunset">
</div> </div>
</section> </section>
<section class="team"> <section class="team">
<h1 class="title">Tým klubu</h1> <h2 class="title">Tým klubu</h2>
<section class="people"> <div class="people">
<section class="member"> <section class="member">
<img src="../img/Photo.svg" alt="Photo" class="member-photo"> <img src="../img/Photo.svg" alt="Photo" class="member-photo">
<h3 class="title">Kateřina Němcová</h3> <h3 class="title">Kateřina Němcová</h3>
@ -101,7 +101,7 @@
<h3 class="title">Pavel Valach</h3> <h3 class="title">Pavel Valach</h3>
<p class="article">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.</p> <p class="article">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.</p>
</section> </section>
</section> </div>
<section class="member-last"> <section class="member-last">
<img src="../img/Photo.svg" alt="Photo" class="member-photo"> <img src="../img/Photo.svg" alt="Photo" class="member-photo">
<h3 class="title">Marcel Petráň</h3> <h3 class="title">Marcel Petráň</h3>
@ -109,7 +109,7 @@
</section> </section>
</section> </section>
<section class="contact-us"> <section class="contact-us">
<h1 class="title">Kontaktuj nás</h1> <h2 class="title">Kontaktuj nás</h2>
<form class="contact-form" action="#" method="post"> <form class="contact-form" action="#" method="post">
<input type="text" name="e-mail" placeholder="Tvůj e-mail *"> <input type="text" name="e-mail" placeholder="Tvůj e-mail *">
<input type="text" name="full-name" class="name-surname" placeholder="Tvé jméno a přijmení *"> <input type="text" name="full-name" class="name-surname" placeholder="Tvé jméno a přijmení *">
@ -119,36 +119,35 @@
</section> </section>
</main> </main>
<footer> <footer>
<section class="footer-top"> <div class="footer-top">
<div class="footer-buttons-left-row-grid"> <div class="footer-buttons-left-row-grid">
<div class="footer-button"> <a href="#">
<button type="button" name="button" href="#">Členské příspěvky</button> <div class="footer-button">Členské příspěvky</div>
</div> </a>
<div class="footer-button"> <a href="#">
<button type="button" name="button" href="#">Sinis</button> <div class="footer-button">Sinis</div>
</div> </a>
<div class="footer-button"> <a href="#">
<button type="button" name="button" href="#">Wiki</button> <div class="footer-button">Wiki</div>
</div> </a>
<div class="footer-button"> <a href="#">
<button type="button" name="button" href="#">Cloud</button> <div class="footer-button">Cloud</div>
</div> </a>
</div> </div>
<div class="footer-logo-right-col-grid"> <div class="footer-logo-right-col-grid">
<img src="../img/sin-logo-col.png" alt="Club" href="#" class="opacity-decrease footer-img-logo"> <img src="../img/sin-logo-col.png" alt="Club" class="opacity-decrease footer-img-logo">
<a href="https://su.cvut.cz/" target="_blank"><img src="../img/su-logo-col.svg" alt="Club" href="#" class="footer-img-logo"></a> <a href="https://su.cvut.cz/" target="_blank"><img src="../img/su-logo-col.svg" alt="Club" class="footer-img-logo"></a>
</div>
</div> </div>
</section>
<section class="footer-bottom"> <section class="footer-bottom">
<div class="footer-contacts-row-grid"> <div class="footer-contacts-row-grid">
<div class="footer-heading-col-grid"> <div class="footer-heading-col-grid">
<div class="footer-heading-left"> <div class="footer-heading-left">
<h2 class="title">Kontakty</h2> <h3 class="title">Kontakty</h3>
</div> </div>
<div class="footer-heading-social-col-grid -right"> <div class="footer-heading-social-col-grid -right">
<a href="https://www.facebook.com/" target="_blank"><img src="../img/facebook.png" alt="Social" class="footer-img-social"></a> <a href="https://www.facebook.com/" target="_blank"><img src="../img/facebook.png" alt="Social" class="footer-img-social"></a>
@ -174,7 +173,7 @@
</div> </div>
</div> </div>
<div class="footer-visit-row-grid"> <div class="footer-visit-row-grid">
<h2 class="title">Úřední hodiny</h2> <h3 class="title">Úřední hodiny</h3>
<div class="footer-visit-col-grid"> <div class="footer-visit-col-grid">
<p class="article">Administrátoři:</p> <p class="article">Administrátoři:</p>
<p class="article">Po & St 20:00 - 21:00</p> <p class="article">Po & St 20:00 - 21:00</p>
@ -187,9 +186,9 @@
</section> </section>
</footer> </footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.bundle.js"></script> <script src="../js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="../js/auto_height.js"></script> <script src="../js/auto_height.js"></script>
<script type="text/javascript" src="../js/navbar.js"></script> <script src="../js/navbar.js"></script>
<script type="text/javascript" src="../js/smooth-scroll.js"></script> <script src="../js/smooth-scroll.js"></script>
</body> </body>
</html> </html>

3719
css/bootstrap-grid.css vendored

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,331 +0,0 @@
/*!
* Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
display: block;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}
[tabindex="-1"]:focus {
outline: 0 !important;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
abbr[title],
abbr[data-original-title] {
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
cursor: help;
border-bottom: 0;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
}
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}
dt {
font-weight: 700;
}
dd {
margin-bottom: .5rem;
margin-left: 0;
}
blockquote {
margin: 0 0 1rem;
}
b,
strong {
font-weight: bolder;
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -.25em;
}
sup {
top: -.5em;
}
a {
color: #007bff;
text-decoration: none;
background-color: transparent;
}
a:hover {
color: #0056b3;
text-decoration: underline;
}
a:not([href]):not([tabindex]) {
color: inherit;
text-decoration: none;
}
a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
color: inherit;
text-decoration: none;
}
a:not([href]):not([tabindex]):focus {
outline: 0;
}
pre,
code,
kbd,
samp {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 1em;
}
pre {
margin-top: 0;
margin-bottom: 1rem;
overflow: auto;
}
figure {
margin: 0 0 1rem;
}
img {
vertical-align: middle;
border-style: none;
}
svg {
overflow: hidden;
vertical-align: middle;
}
table {
border-collapse: collapse;
}
caption {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
color: #6c757d;
text-align: left;
caption-side: bottom;
}
th {
text-align: inherit;
}
label {
display: inline-block;
margin-bottom: 0.5rem;
}
button {
border-radius: 0;
}
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
input,
button,
select,
optgroup,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
select {
word-wrap: normal;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
cursor: pointer;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
padding: 0;
border-style: none;
}
input[type="radio"],
input[type="checkbox"] {
box-sizing: border-box;
padding: 0;
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
-webkit-appearance: listbox;
}
textarea {
overflow: auto;
resize: vertical;
}
fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}
legend {
display: block;
width: 100%;
max-width: 100%;
padding: 0;
margin-bottom: .5rem;
font-size: 1.5rem;
line-height: inherit;
color: inherit;
white-space: normal;
}
progress {
vertical-align: baseline;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
outline-offset: -2px;
-webkit-appearance: none;
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button;
}
output {
display: inline-block;
}
summary {
display: list-item;
cursor: pointer;
}
template {
display: none;
}
[hidden] {
display: none !important;
}
/*# sourceMappingURL=bootstrap-reboot.css.map */

File diff suppressed because one or more lines are too long

View File

@ -1,8 +0,0 @@
/*!
* Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
*/*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}
/*# sourceMappingURL=bootstrap-reboot.min.css.map */

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700'); @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
body, html { body, html {
font-family: 'Open Sans', sans-serif !important; font-family: 'Open Sans', sans-serif !important;
color: #4A4A4A !important; color: #4A4A4A !important;
@ -8,8 +8,8 @@ body a, html a {
margin: 0; margin: 0;
text-decoration: none; text-decoration: none;
} }
section.gallery-in, section.home{ section.gallery-in, div.home{
background: #EEEEEE; background-color: #EEEEEE;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding: 3em 5em; padding: 3em 5em;
@ -22,17 +22,20 @@ section.team, section.contact-us, section.about{
h1.title{ h1.title{
font-weight: 700; font-weight: 700;
font-size: 5em; font-size: 5em;
margin-bottom: .4rem margin-bottom: .4rem;
} }
h1.nav{ h2.nav, h1.nav{
text-align: left; text-align: left;
padding-top: .25em; padding-top: .25em;
margin-bottom: .4rem;
font-size: 4em; font-size: 4em;
font-weight: 600; font-weight: 600;
} }
h2.title{ h2.title{
font-size: 3.5em; font-weight: 700;
font-weight: 400; font-size: 5em;
margin-bottom: .4rem;
text-align: center;
} }
h3.title{ h3.title{
font-size: 3em; font-size: 3em;
@ -42,8 +45,8 @@ p.article{
padding-top: .3em; padding-top: .3em;
font-size: 2.5em; font-size: 2.5em;
} }
section.home { .home {
min-height: calc(100vh); /* Bude problem v safari, kde to musim odjebat od nav baru */ min-height: calc(100vh - 14.3em); /* Bude problem v safari, kde to musim odjebat od nav baru */
background-image: url('../img/logo.png'); background-image: url('../img/logo.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
@ -52,9 +55,10 @@ section.home {
img.arrow-down{ img.arrow-down{
width: 3.5em; width: 3.5em;
position: absolute; position: absolute;
top: calc(100vh - 5em); /* Bude problem v safari, kde to musim odjebat od nav baru */ top: calc(100vh - 18em); /* Bude problem v safari, kde to musim odjebat od nav baru */
left: calc(50% - 1.75em); left: calc(50% - 1.75em);
animation: arrow 3s infinite; animation: arrow 3s infinite;
-webkit-animation: arrow 3s infinite;
} }
section h1{ section h1{
text-align: center; text-align: center;
@ -74,7 +78,7 @@ div.gallery{
div.gallery img{ div.gallery img{
width: 100%; width: 100%;
} }
section.people{ .people{
padding-top: 2em; padding-top: 2em;
display: grid; display: grid;
grid-template-columns: repeat(2, 23.05em); grid-template-columns: repeat(2, 23.05em);
@ -158,28 +162,34 @@ footer p.article{
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
footer h2.title{ footer h3.title{
font-size: 3em; font-size: 3em;
} }
section.footer-top{ .footer-top{
display: grid; display: grid;
grid-template-columns: repeat(2,auto); grid-template-columns: repeat(2,auto);
} }
footer .footer-buttons-left-row-grid{ footer .footer-buttons-left-row-grid{
display: grid; display: grid;
grid-template-rows: repeat(5,auto); grid-template-rows: repeat(5,auto);
grid-row-gap: .7em;
justify-content: left; justify-content: left;
} }
footer .footer-button{ footer .footer-button{
font-size: 1.8em;
}
footer button{
background-color: #5D5D5D; background-color: #5D5D5D;
color: #FCFCFC; color: #FCFCFC;
font-size: 1.8em;
text-align: center;
width: 15em;
height: 1.7em;
}
footer div.footer-top div.footer-buttons-left-row-grid a{
text-decoration: none !important;
} }
footer .footer-logo-right-col-grid{ footer .footer-logo-right-col-grid{
display: grid; display: grid;
grid-template-rows: repeat(2,auto); grid-template-rows: repeat(2,auto);
grid-row-gap: 1.5em;
justify-content: center; justify-content: center;
} }
footer .footer-img-logo{ footer .footer-img-logo{
@ -257,6 +267,7 @@ nav ul a{
nav ul li { nav ul li {
opacity: 0; opacity: 0;
animation: show-x .7s 1s forwards; animation: show-x .7s 1s forwards;
-webkit-animation: show-x .7s 1s forwards;
} }
nav ul a:hover{ nav ul a:hover{
color:#0E404D; color:#0E404D;
@ -298,31 +309,40 @@ div.-right{
} }
.inactive{ .inactive{
animation: r-slide-menu .3s ease-out forwards; animation: r-slide-menu .3s ease-out forwards;
-webkit-animation: r-slide-menu .3s ease-out forwards;
} }
.active{ .active{
display: block; display: block;
animation: slide-menu .3s ease-in forwards; animation: slide-menu .3s ease-in forwards;
-webkit-animation: slide-menu .3s ease-in forwards;
} }
.active .close-btn, .active h1.title{ .active .close-btn, .active h1.title{
animation: show-x .3s .5s forwards; animation: show-x .3s .5s forwards;
-webkit-animation: show-x .3s .5s forwards;
} }
.active li:nth-of-type(1){ .active li:nth-of-type(1){
animation: menu-item .25s forwards .35s ease-in-out; animation: menu-item .25s forwards .35s ease-in-out;
-webkit-animation: menu-item .25s forwards .35s ease-in-out;
} }
.active li:nth-of-type(2){ .active li:nth-of-type(2){
animation: menu-item .25s forwards .40s ease-in-out; animation: menu-item .25s forwards .40s ease-in-out;
-webkit-animation: menu-item .25s forwards .40s ease-in-out;
} }
.active li:nth-of-type(3){ .active li:nth-of-type(3){
animation: menu-item .25s forwards .45s ease-in-out; animation: menu-item .25s forwards .45s ease-in-out;
-webkit-animation: menu-item .25s forwards .45s ease-in-out;
} }
.active li:nth-of-type(4){ .active li:nth-of-type(4){
animation: menu-item .25s forwards .50s ease-in-out; animation: menu-item .25s forwards .50s ease-in-out;
-webkit-animation: menu-item .25s forwards .50s ease-in-out;
} }
.active li:nth-of-type(5){ .active li:nth-of-type(5){
animation: menu-item .25s forwards .55s ease-in-out; animation: menu-item .25s forwards .55s ease-in-out;
-webkit-animation: menu-item .25s forwards .55s ease-in-out;
} }
.active li:nth-of-type(6){ .active li:nth-of-type(6){
animation: menu-item .25s forwards .60s ease-in-out; animation: menu-item .25s forwards .60s ease-in-out;
-webkit-animation: menu-item .25s forwards .60s ease-in-out;
} }
/* <--- ANIMATIONS ---> */ /* <--- ANIMATIONS ---> */
@ -334,6 +354,14 @@ div.-right{
transform: scaleX(1); transform: scaleX(1);
} }
} }
@-webkit-keyframes slide-menu {
from{
transform: scaleX(0);
}
to{
transform: scaleX(1);
}
}
@keyframes r-slide-menu { @keyframes r-slide-menu {
from{ from{
transform: scaleX(1); transform: scaleX(1);
@ -342,6 +370,14 @@ div.-right{
transform: scaleX(0); transform: scaleX(0);
} }
} }
@-webkit-keyframes r-slide-menu {
from{
transform: scaleX(1);
}
to{
transform: scaleX(0);
}
}
@keyframes show-x { @keyframes show-x {
from { from {
opacity: 0; opacity: 0;
@ -350,6 +386,14 @@ div.-right{
opacity: 1; opacity: 1;
} }
} }
@-webkit-keyframes show-x {
from {
opacity: 0;
}
to{
opacity: 1;
}
}
@keyframes menu-item { @keyframes menu-item {
from{ from{
transform: translateY(60%); transform: translateY(60%);
@ -360,6 +404,16 @@ div.-right{
opacity: 1; opacity: 1;
} }
} }
@-webkit-keyframes menu-item {
from{
transform: translateY(60%);
opacity: 0;
}
to{
transform: translateY(0);
opacity: 1;
}
}
@keyframes arrow { @keyframes arrow {
0% {opacity: .2} 0% {opacity: .2}
50% {opacity: .8} 50% {opacity: .8}