Better spacing and do not select text
This commit is contained in:
parent
0de7bd35a9
commit
c0f418672d
|
@ -30,10 +30,12 @@
|
||||||
-webkit-transform: translateY(4px);
|
-webkit-transform: translateY(4px);
|
||||||
transform: translateY(4px);
|
transform: translateY(4px);
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
50% {
|
||||||
-webkit-transform: translateY(-4px);
|
-webkit-transform: translateY(-4px);
|
||||||
transform: translateY(-4px);
|
transform: translateY(-4px);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
-webkit-transform: translateY(4px);
|
-webkit-transform: translateY(4px);
|
||||||
transform: translateY(4px);
|
transform: translateY(4px);
|
||||||
|
@ -45,10 +47,12 @@
|
||||||
-webkit-transform: translateY(4px);
|
-webkit-transform: translateY(4px);
|
||||||
transform: translateY(4px);
|
transform: translateY(4px);
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
50% {
|
||||||
-webkit-transform: translateY(-4px);
|
-webkit-transform: translateY(-4px);
|
||||||
transform: translateY(-4px);
|
transform: translateY(-4px);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
-webkit-transform: translateY(4px);
|
-webkit-transform: translateY(4px);
|
||||||
transform: translateY(4px);
|
transform: translateY(4px);
|
||||||
|
@ -61,6 +65,7 @@
|
||||||
-webkit-transform: translateX(-30px);
|
-webkit-transform: translateX(-30px);
|
||||||
transform: translateX(-30px);
|
transform: translateX(-30px);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
-webkit-transform: translateX(0);
|
-webkit-transform: translateX(0);
|
||||||
|
@ -74,6 +79,7 @@
|
||||||
-webkit-transform: translateX(-30px);
|
-webkit-transform: translateX(-30px);
|
||||||
transform: translateX(-30px);
|
transform: translateX(-30px);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
-webkit-transform: translateX(0);
|
-webkit-transform: translateX(0);
|
||||||
|
@ -87,6 +93,7 @@
|
||||||
-webkit-transform: translateY(-30px);
|
-webkit-transform: translateY(-30px);
|
||||||
transform: translateY(-30px);
|
transform: translateY(-30px);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
-webkit-transform: translateY(0);
|
-webkit-transform: translateY(0);
|
||||||
|
@ -100,6 +107,7 @@
|
||||||
-webkit-transform: translateY(-30px);
|
-webkit-transform: translateY(-30px);
|
||||||
transform: translateY(-30px);
|
transform: translateY(-30px);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
-webkit-transform: translateY(0);
|
-webkit-transform: translateY(0);
|
||||||
|
|
|
@ -4,6 +4,14 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-family: "Oswald", sans-serif;
|
font-family: "Oswald", sans-serif;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
/* Safari */
|
||||||
|
-moz-user-select: none;
|
||||||
|
/* Firefox */
|
||||||
|
-ms-user-select: none;
|
||||||
|
/* IE10+/Edge */
|
||||||
|
user-select: none;
|
||||||
|
/* Standard */
|
||||||
}
|
}
|
||||||
|
|
||||||
.unsupported,
|
.unsupported,
|
||||||
|
|
|
@ -11,6 +11,7 @@
|
||||||
.logo img {
|
.logo img {
|
||||||
height: 200px;
|
height: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand h1 {
|
.brand h1 {
|
||||||
font-size: 96px;
|
font-size: 96px;
|
||||||
width: 700px;
|
width: 700px;
|
||||||
|
@ -24,6 +25,7 @@
|
||||||
-ms-flex-direction: column;
|
-ms-flex-direction: column;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
-webkit-box-ordinal-group: 3;
|
-webkit-box-ordinal-group: 3;
|
||||||
-ms-flex-order: 2;
|
-ms-flex-order: 2;
|
||||||
|
@ -33,10 +35,12 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo,
|
.logo,
|
||||||
.logo img {
|
.logo img {
|
||||||
height: 100px;
|
height: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand {
|
.brand {
|
||||||
-webkit-box-ordinal-group: 5;
|
-webkit-box-ordinal-group: 5;
|
||||||
-ms-flex-order: 4;
|
-ms-flex-order: 4;
|
||||||
|
@ -44,30 +48,38 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
min-width: 250px;
|
min-width: 250px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand h1 {
|
.brand h1 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 48px;
|
font-size: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.links {
|
.links {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about {
|
.about {
|
||||||
margin: 20px auto 0 auto;
|
margin: 20px auto 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-content a {
|
.tab-content a {
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabs {
|
.tabs {
|
||||||
padding: 2px 10px 0 10px;
|
padding: 2px 10px 0 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabs a {
|
.tabs a {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
border-radius: 5px 5px 0 0;
|
border-radius: 5px 5px 0 0;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-content h2 {
|
.tab-content h2 {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-content p {
|
.tab-content p {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
@ -83,76 +95,97 @@
|
||||||
.brand {
|
.brand {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand h1 {
|
.brand h1 {
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand p {
|
.brand p {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand a {
|
.brand a {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.links {
|
.links {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
-ms-flex-flow: wrap;
|
-ms-flex-flow: wrap;
|
||||||
flex-flow: wrap;
|
flex-flow: wrap;
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.links a {
|
.links a {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about {
|
.about {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabs {
|
.tabs {
|
||||||
padding: 2px 10px 0 10px;
|
padding: 2px 10px 0 10px;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabs a {
|
.tabs a {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
border-radius: 5px 5px 0 0;
|
border-radius: 5px 5px 0 0;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-content h2 {
|
.tab-content h2 {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-content p {
|
.tab-content p {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 330px) {
|
@media screen and (max-width: 330px) {
|
||||||
|
|
||||||
.logo,
|
.logo,
|
||||||
.logo img {
|
.logo img {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand h1 {
|
.brand h1 {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand p {
|
.brand p {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.links a {
|
.links a {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabs a {
|
.tabs a {
|
||||||
padding: 0 4px;
|
padding: 0 4px;
|
||||||
margin: 0 2px;
|
margin: 0 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-content h2 {
|
.tab-content h2 {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-content p {
|
.tab-content p {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-height: 450px) {
|
@media screen and (max-height: 450px) {
|
||||||
.h-on, .logo, h1 {
|
|
||||||
|
.h-on,
|
||||||
|
.logo,
|
||||||
|
h1 {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about {
|
.about {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
@ -191,6 +224,7 @@ screen and (max-height: 120px) {
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page {
|
.page {
|
||||||
-webkit-filter: blur(12px);
|
-webkit-filter: blur(12px);
|
||||||
filter: blur(12px);
|
filter: blur(12px);
|
||||||
|
|
|
@ -56,14 +56,17 @@
|
||||||
<p>Please resize your window to a supported resolution.</p>
|
<p>Please resize your window to a supported resolution.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<noscript><link rel="stylesheet" href="css/rules.css"></noscript>
|
<noscript>
|
||||||
|
<link rel="stylesheet" href="css/rules.css"></noscript>
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js" defer></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js" defer></script>
|
||||||
<script src="js/main.js" defer></script>
|
<script src="js/main.js" defer></script>
|
||||||
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
|
||||||
<link rel="manifest" href="/manifest.json">
|
<link rel="manifest" href="/manifest.json">
|
||||||
<noscript><link rel="stylesheet" href="css/responsive.css"></noscript>
|
<noscript>
|
||||||
<noscript><link rel="stylesheet" href="css/animations.css"></noscript>
|
<link rel="stylesheet" href="css/responsive.css"></noscript>
|
||||||
|
<noscript>
|
||||||
|
<link rel="stylesheet" href="css/animations.css"></noscript>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in New Issue