mirror of
https://github.com/micku7zu/vanilla-tilt.js
synced 2024-06-03 14:22:13 +02:00
539 lines
22 KiB
CSS
539 lines
22 KiB
CSS
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
font-family: 'Quicksand', sans-serif;
|
|
font-size: 22px;
|
|
color: #333333;
|
|
}
|
|
|
|
body {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: #333;
|
|
}
|
|
|
|
.link {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
aside {
|
|
flex-grow: 1;
|
|
flex-basis: 300px;
|
|
text-align: center;
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
padding: 50px;
|
|
}
|
|
|
|
main {
|
|
flex-grow: 2;
|
|
border-left: 1px solid #ededed;
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
section {
|
|
padding: 5vw;
|
|
border-bottom: 1px solid #ededed;
|
|
}
|
|
|
|
p, ul, li {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
p {
|
|
margin: 10px 0px;
|
|
}
|
|
|
|
li {
|
|
margin-left: 20px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
h3:first-child {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.logo {
|
|
display: block;
|
|
|
|
width: 100%;
|
|
max-width: 200px;
|
|
height: 200px;
|
|
|
|
margin: 0px auto;
|
|
|
|
line-height: 200px;
|
|
text-align: center;
|
|
|
|
color: white;
|
|
font-size: 36px;
|
|
|
|
background: #0099F7; /* fallback for old browsers */
|
|
background: -webkit-linear-gradient(135deg, #0099F7 , #F11712); /* Chrome 10-25, Safari 5.1-6 */
|
|
background: linear-gradient(135deg, #0099F7 , #F11712); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
|
|
-webkit-transform-style: preserve-3d;
|
|
transform-style: preserve-3d;
|
|
-webkit-transform: perspective(500px);
|
|
transform: perspective(500px);
|
|
margin-bottom: 75px;
|
|
}
|
|
|
|
.mobileLogo {
|
|
display: none;
|
|
margin: 50px auto;
|
|
}
|
|
|
|
.mobileCredits {
|
|
display: none !important;
|
|
}
|
|
|
|
.logo > span {
|
|
position: relative;
|
|
display: block;
|
|
-webkit-transform: translateZ(50px) scale(0.7);
|
|
transform: translateZ(50px) scale(0.7);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.logo > span:after {
|
|
content: "GitHub";
|
|
position: absolute;
|
|
color: white;
|
|
font-size: 18px;
|
|
top: 36px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
opacity: 0.8;
|
|
|
|
transition: 0.3s ease all;
|
|
}
|
|
|
|
.logo > span:before {
|
|
content: "View source";
|
|
position: absolute;
|
|
color: white;
|
|
font-size: 18px;
|
|
top: 36px;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-10px);
|
|
|
|
opacity: 0;
|
|
|
|
display: inline-block;
|
|
width: 100%;
|
|
|
|
transition: 0.3s ease all;
|
|
}
|
|
|
|
.logo:hover > span:after {
|
|
opacity: 0;
|
|
transform: translateX(-50%) translateY(10px);
|
|
}
|
|
|
|
.logo:hover > span:before {
|
|
opacity: 0.8;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.logo > span > span {
|
|
display: block;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.logo:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: #333;
|
|
box-shadow: 0 20px 70px -10px rgba(51, 51, 51, 0.7), 0 50px 100px 0 rgba(51, 51, 51, 0.2);
|
|
z-index: -1;
|
|
-webkit-transform: translateZ(-50px);
|
|
transform: translateZ(-50px);
|
|
-webkit-transition: .3s;
|
|
transition: .3s;
|
|
}
|
|
|
|
#logoJquery {
|
|
margin-top: 0px;
|
|
max-width: 150px;
|
|
max-height: 150px;
|
|
margin: 0px auto;
|
|
line-height: 150px;
|
|
|
|
background-color: #7e56ff;
|
|
background-image: -webkit-linear-gradient(300deg, #5a00ff 0%, #ff1ff7 100%, #ff1ff7 100%);
|
|
background-image: linear-gradient(150deg, #5a00ff 0%, #ff1ff7 100%, #ff1ff7 100%);
|
|
}
|
|
|
|
aside h6 {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
#logoJquery span:before {
|
|
content: "Gijs Rogé"
|
|
}
|
|
|
|
#logoJquery span:after {
|
|
content: "jQuery";
|
|
}
|
|
|
|
#quickcursor {
|
|
display: block;
|
|
|
|
width: 100%;
|
|
max-width: 150px;
|
|
height: 150px;
|
|
|
|
margin: 0px auto;
|
|
|
|
line-height: 150px;
|
|
text-align: center;
|
|
|
|
color: white;
|
|
font-size: 24px;
|
|
|
|
background: #FD746CFF; /* fallback for old browsers */
|
|
background: -webkit-linear-gradient(90deg, rgba(44,62,80,1) 0%, rgba(253,116,108,1) 100%); /* Chrome 10-25, Safari 5.1-6 */
|
|
background: linear-gradient(90deg, rgba(44,62,80,1) 0%, rgba(253,116,108,1) 100%); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
|
|
-webkit-transform-style: preserve-3d;
|
|
transform-style: preserve-3d;
|
|
-webkit-transform: perspective(500px);
|
|
transform: perspective(500px);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#quickcursor:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: #333;
|
|
box-shadow: 0 20px 70px -10px rgba(51, 51, 51, 0.7), 0 50px 100px 0 rgba(51, 51, 51, 0.2);
|
|
z-index: -1;
|
|
-webkit-transform: translateZ(-50px);
|
|
transform: translateZ(-50px);
|
|
-webkit-transition: .3s;
|
|
transition: .3s;
|
|
}
|
|
|
|
#quickcursor-logo {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-image: url("data:image/svg+xml,%3Csvg id='Vector' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='512' height='512' viewBox='0 0 512 512'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: url(%23linear-gradient); %7D .cls-2 %7B fill: %23f7f7f7; fill-rule: evenodd; %7D %3C/style%3E%3ClinearGradient id='linear-gradient' y1='256' x2='512' y2='256' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%232c3e50'/%3E%3Cstop offset='1' stop-color='%23fd746c'/%3E%3C/linearGradient%3E%3Cfilter id='shadow' x='-20%25' y='-20%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur in='SourceAlpha' result='blur-out' stdDeviation='5'/%3E%3CfeOffset in='blur-out' result='the-shadow' dx='7' dy='10'/%3E%3CfeColorMatrix in='the-shadow' result='color-out' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .18 0'/%3E%3CfeBlend in='SourceGraphic' in2='color-out' mode='normal'/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter='url(%23shadow)' id='TextCursor' class='cls-2' d='M128.734,370.467a80.931,80.931,0,0,1,18.647,1.858c0.824,2.47.2,9.656,0.187,12.815h-0.187v0.186c-5.322-2.116-18.081-4.477-23.868-1.115-3.072,1.785-4.212,4.226-5.221,8.173a19.717,19.717,0,0,0-.373,6.686,22.025,22.025,0,0,0,1.119,5.015c2,4.64,9.2,8.025,16.782,6.314l5.221-.371c0.943-.261,6.013-2.069,6.34-1.857,0.429,0.681.187,2.507,0.187,3.528v9.1h-0.187v0.186L142.16,422.1c-4.606,1.08-13.639,1.323-18.088,0-9.647-2.867-15.017-8.514-17.9-18.2-1.148-3.858-1.435-10.537-.186-14.673a30.219,30.219,0,0,1,2.8-6.872,25.556,25.556,0,0,1,11.934-10.029l5.221-1.486C126.906,370.6,128.012,370.916,128.734,370.467Zm166.519,1.858v11.886l-8.951-1.3-6.153-.185a13.453,13.453,0,0,0-3.916,0c-3.737.81-7.835-.961-7.832,3.528a2.183,2.183,0,0,1,.373.929,18.835,18.835,0,0,0,2.424,1.857c9.376,4.137,21.555,3.3,25.174,13.187,1.326,3.627.524,8.539-.933,11.33-2.335,4.472-6.143,6.608-11.375,8.172-1.351.4-2.867,0.457-4.1,0.743h-2.8a33.6,33.6,0,0,1-9.137.186c-1.323-.294-2.965-0.028-4.475-0.372a42.515,42.515,0,0,0-7.273-1.114V409.1h0.373c1.252,0.818,3.357.379,5.035,0.743,3.44,0.747,12.311,1.409,16.223.557,2.747-.6,5.853.323,6.713-2.043,0.422-.627-0.02-1.418-0.187-2.043a41.5,41.5,0,0,0-4.848-2.786c-2.2-.9-4.532-0.958-6.9-1.671-7.262-2.189-13.492-4.305-15.85-11.33A16.337,16.337,0,0,1,257.4,380.5c1.964-4.843,5.766-7.611,11-9.1,2.223-.633,4.292-0.228,6.713-0.743a28.408,28.408,0,0,1,7.832-.186c1.782,0.388,3.847.111,5.78,0.558Zm30.394-1.858c13.573-.158,21.279,4.025,26.293,12.259a29.1,29.1,0,0,1,2.61,7.057,18.871,18.871,0,0,1,.56,7.8V400c-0.548,2.433-.77,5.082-1.678,7.244-3.493,8.309-9.791,12.735-19.393,15.044-4.429,1.065-10.313.2-13.8-.929-9.408-3.038-14.449-8.09-17.155-17.83-0.639-2.3-1.654-6.364-.933-9.658,0.484-2.207.569-4.491,1.305-6.5a24.831,24.831,0,0,1,14.172-15.044l5.408-1.486C323.922,370.618,324.981,370.882,325.647,370.467Zm-158.873.558v23.959c0,5.522-.135,10.169,2.238,13.187,1.1,1.4,5.782,3.5,8.951,2.786,2.936-.667,5.352-1.7,6.713-3.9,1.657-2.681,1.305-7.407,1.305-11.7v-24.33h12.68v23.587c0,4.922.3,10.215-.933,13.93-1.986,6.009-5.886,9.688-11.561,12.073-2.311.971-7.566,2.869-11.374,2.043l-4.849-.743c-6.24-1.969-10.42-4.9-13.426-10.03-2.416-4.125-2.424-10.175-2.424-16.716V371.025C158.387,371.031,162.187,371.027,166.774,371.025Zm53.331,51.261H207.611c0-17.193,0-34.071,0-51.261,1.954-.642,5.326-0.186,7.646-0.186h16.6c0.883,0.525,2.571-.128,3.729.186a26.078,26.078,0,0,1,8.764,4.457c3.912,2.948,7.16,11.477,4.476,18.016a18.633,18.633,0,0,1-9.324,9.844v0.371c1.848,1.333,3.134,4.084,4.475,5.943,3.041,4.214,6.788,8.14,9.51,12.63H238.006c-3.518-6.119-8.59-11.422-12.68-17.087-0.973-1.348-4.023-6.3-5.221-6.872v23.959Zm155.517,0h-12.68V371.025c2.1-.691,5.726-0.186,8.2-0.186h17.529c0.493,0.3,1.332.007,2.051,0.186a22.021,22.021,0,0,1,5.78,2.043c5.15,3.169,10.99,10.265,8.205,19.316a19.151,19.151,0,0,1-1.865,4.271,18.61,18.61,0,0,1-4.1,4.458c-1.125.813-3.093,1.342-3.729,2.6,1.254,0.9,2.07,2.646,2.983,3.9,2.126,2.921,4.4,5.721,6.527,8.73,1.318,1.865,3.679,3.7,4.475,5.943H393.523c-0.962-1.932-2.686-3.5-3.916-5.2-2.824-3.9-5.8-7.669-8.578-11.516-1.355-1.873-3.673-6.037-5.407-7.243v23.959Zm-48.856-40.118c-1.273.768-3.341,0.554-4.661,1.115a12.752,12.752,0,0,0-6.34,6.872c-0.575,1.417-.373,2.743-0.746,4.457a14.269,14.269,0,0,0,.373,6.129c1.469,5.243,3.486,7.857,8.577,9.473,1.521,0.482,4.379,1.275,6.713.743,5.052-1.153,8.775-2.987,10.629-7.244a26.232,26.232,0,0,0,1.119-4.457,16.059,16.059,0,0,0-.56-7.43C339.782,384.992,335.84,382.069,326.766,382.168Zm48.856,12.816c7.549,0.115,16.385,1.53,17.9-4.644a7.571,7.571,0,0,0-.187-2.971c-0.445-1.6-.857-2.924-2.051-3.715-2.68-1.776-11.206-.993-15.477-0.928C375.016,385.1,375.608,391.946,375.622,394.984ZM220.105,382.726v12.258c7.01,0.106,15.5,1.411,17.528-3.715a5.834,5.834,0,0,0,.56-2.972c-0.39-1.859-1.083-3.746-2.424-4.643C233.256,381.974,224.333,382.662,220.105,382.726Z'/%3E%3Cpath filter='url(%23shadow)' id='TextQuick' class='cls-2' d='M136.38,269.616c20.826-.267,31.63,7.163,37.107,22.1,2.111,5.756,3.169,15.274,1.119,22.1a39.831,39.831,0,0,1-5.035,11.329c-0.993,1.416-3.329,2.83-3.729,4.643,1.82,1.435,4.137,5.41,5.594,7.43,2.81,3.894,6.931,7.761,9.137,12.072H160.061v-0.186c-1.445-.515-1.976-2.183-2.8-3.343-1.293-1.829-2.972-3.565-4.289-5.386-0.761-1.053-1.107-2.657-2.8-2.786-1.081.732-2.8,0.413-4.288,0.743-5.22,1.16-12.325.191-16.41-1.114-1.031-.33-1.8-0.191-2.8-0.558-10.693-3.926-16.754-11.329-20.139-22.659-1.03-3.447-2.186-10.61-1.119-15.23,3.086-13.36,8.1-21.435,19.58-26.373a53.45,53.45,0,0,1,7.459-2.229C133.685,269.854,135.4,270.228,136.38,269.616Zm202.507,2.414V289.3c-2.749-.414-5.69-1.858-8.391-2.6-2.609-.716-5.047-0.152-7.832-0.743a22.688,22.688,0,0,0-7.459,0c-2.173.483-3.863,0.306-5.78,0.929a13.673,13.673,0,0,0-8.951,9.286c-0.561,1.737-.533,3.722-0.932,5.572-0.54,2.5.082,5.958,0.559,7.8,1.393,5.38,2.5,8.455,6.713,10.958,7.763,4.61,24.986,1.987,32.073-1.3v17.273a53.566,53.566,0,0,0-8.018,1.671c-2.318.543-4.888,0.273-7.086,0.743H320.24a29.642,29.642,0,0,1-8.018-.371c-1.879-.418-3.339-0.2-5.035-0.743-8.18-2.617-15.061-7.123-19.207-13.744-2.225-3.554-3.467-7.884-4.661-12.444-1.358-5.182-.574-12.867.745-17.273,3.577-11.944,10.342-19.432,22-23.216,2.345-.761,4.937-0.94,7.459-1.486h5.78c4.185,0,8.314-.161,11.935.743A49.215,49.215,0,0,0,338.887,272.03Zm-153.839-1.857h16.783v33.246c0,6.787-.2,12.983,3.17,16.344,1.811,1.808,7.13,4.534,11.561,3.529,4.153-.942,7.212-2.277,9.137-5.386,2.165-3.5,1.679-9.787,1.678-15.416V270.173H244.16v31.388c0,6.29.45,13.2-1.119,18.016a25.442,25.442,0,0,1-15.291,16.53,46.206,46.206,0,0,1-7.272,2.229l-3.543.186a15.774,15.774,0,0,1-5.221.185l-5.967-.928c-7.76-2.3-13.351-6.4-17.156-12.63-3.5-5.726-3.543-13.608-3.543-23.03V270.173Zm70.673,0H272.5v68.163h-16.6C255.958,316.64,255.723,292.773,255.721,270.173Zm92.862,0h16.783v31.388h0.186q10.815-15.691,21.631-31.388h20.885v0.186c-2.341,2.3-3.873,5.647-5.781,8.358-3.832,5.445-7.91,10.9-11.748,16.344-1.45,2.057-2.92,4.1-4.288,6.129-0.662.98-1.13,2.262-2.052,2.972v0.185h0.187c1.768,3.064,4.326,5.7,6.34,8.544,3.629,5.121,7.192,10.1,10.815,15.23,1.615,2.284,3.363,4.548,5.035,6.872,0.76,1.057,1.952,2.022,2.424,3.343H388.675a0.679,0.679,0,0,0-.373-0.186c-1.236-2.535-3.448-4.628-5.035-6.872-3.507-4.957-7.16-9.767-10.629-14.672-1.739-2.46-3.52-4.839-5.221-7.244-0.734-1.038-1.183-2.266-2.238-2.972v31.946h-16.6V270.173ZM138.617,285.031c-1.029.62-3.8,0.485-5.035,0.929a16.978,16.978,0,0,0-9.137,7.244,24.553,24.553,0,0,0-2.237,6.686,22.7,22.7,0,0,0,.373,9.286c2.432,9.147,6.893,13.624,17.714,14.3v-0.372c-1.633-1.286-2.7-3.67-3.915-5.386-1.736-2.455-3.949-4.688-5.595-7.244H151.3c0.559,1.133,3.559,5.188,4.662,5.572,0.665-2.455,1.938-4.852,2.611-7.615a22.19,22.19,0,0,0-.56-10.4C155.372,289.212,150.115,285,138.617,285.031Z'/%3E%3Cpath filter='url(%23shadow)' id='HandShape' class='cls-2' d='M247.953,93c10.273,0.052,11.8,6.108,14.918,13.187,3.631,8.248,7.228,17.1,11.375,25.073,1.159,2.231,1.769,6.089,3.356,7.8v-0.186c1.441-1.152,2.21-3.175,3.73-4.271,1.785-1.289,3.309-1.455,5.967-2.043a7.282,7.282,0,0,1,2.8-.186c2.528,0.684,4.258,2.584,6.526,3.343v-0.186c0.716-.777.889-1.874,1.492-2.786,1.86-2.813,4.965-4.459,9.7-4.457a8.531,8.531,0,0,1,2.8.185c2.216,0.892,3.855,2.961,5.967,3.715,2.461-7.565,14.545-9.866,19.58-2.972,1.527,2.091,2.261,4.731,3.356,7.244,1.891,4.336,3.831,8.71,5.781,13.187,4.29,9.847,9.661,19.236,12.494,30.274a31.706,31.706,0,0,1,0,13c-0.392,1.6-.27,2.8-0.746,4.272-2.474,7.626-6.823,14.291-12.68,18.573-4.124,3.014-8.726,4.865-13.8,7.057-6.275,2.712-15.176,7.6-25.174,5.2l-3.17-.372c-12.411-3.448-20.964-11.28-30.767-17.458-8.042-5.068-15.9-10.394-23.869-15.416-4.263-2.686-8.825-4.992-12.866-7.986-3.015-2.234-5.3-7.982-3.17-13a13.285,13.285,0,0,1,6.9-6.872c5.06-2.1,8.085.49,11.188,2.414,4.562,2.828,8.892,5.548,13.426,8.358,1.684,1.044,3.437,2.679,5.408,3.343,0.829-.617,1.432-0.391,1.492-1.857a16.221,16.221,0,0,1-.933-2.6c-0.976-2.228-1.94-4.515-2.983-6.872-3.3-7.465-6.526-15.053-9.883-22.66q-6.224-14.1-12.494-28.416c-1.681-3.827-4.107-7.858-5.221-12.073-1.422-5.383,3-10.712,5.594-12.258C245.175,93.622,246.818,93.736,247.953,93ZM232.1,96.9h0.373a32.644,32.644,0,0,0-1.492,5.015c-1.387,5.967,3.226,14.27,5.035,18.387,0.638,1.452,1.75,2.882,2.051,4.644a61.247,61.247,0,0,0-7.645,2.414c-5,1.682-10.083,2.855-14.918,4.458-2.284.757-4.281,0.921-6.526,1.671-10.837,3.622-22.34,6.582-33.192,10.215-5.122,1.716-10.066,3.132-15.291,4.458-2.514.638-4.408-1.634-4.848-3.158a6.158,6.158,0,0,1,.373-3.157c0.614-.385.931-1.1,1.492-1.486,0.952-.658,1.984-0.875,2.983-1.486,4.131-2.524,8.455-4.847,12.68-7.429,11.7-7.15,23.925-13.83,35.616-20.987,5.5-3.369,11.192-6.311,16.6-9.658C227.538,99.47,230.332,98.626,232.1,96.9Z'/%3E%3C/svg%3E%0A");
|
|
|
|
-webkit-transform: translateZ(50px) scale(0.8);
|
|
transform: translateZ(50px) scale(0.8);
|
|
}
|
|
|
|
.downloadBox {
|
|
display: inline-block;
|
|
width: 200px;
|
|
height: 90px;
|
|
|
|
padding: 2px;
|
|
margin-right: 15px;
|
|
margin-bottom: 25px;
|
|
|
|
color: #333333;
|
|
text-decoration: none;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|
|
|
|
.downloadBox:nth-child(1) {
|
|
background: #136a8a; /* fallback for old browsers */
|
|
background: -webkit-linear-gradient(135deg, #136a8a, #267871); /* Chrome 10-25, Safari 5.1-6 */
|
|
background: linear-gradient(135deg, #136a8a, #267871); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
}
|
|
|
|
.downloadBox:nth-child(2) {
|
|
background: #7b4397; /* fallback for old browsers */
|
|
background: -webkit-linear-gradient(135deg, #7b4397, #dc2430); /* Chrome 10-25, Safari 5.1-6 */
|
|
background: linear-gradient(135deg, #7b4397, #dc2430); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
}
|
|
|
|
.downloadBox:nth-child(3) {
|
|
background: #00bf8f; /* fallback for old browsers */
|
|
background: -webkit-linear-gradient(135deg, #00bf8f, #001510); /* Chrome 10-25, Safari 5.1-6 */
|
|
background: linear-gradient(135deg, #00bf8f, #001510); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
}
|
|
|
|
.downloadBox:nth-child(4) {
|
|
background: #24C6DC; /* fallback for old browsers */
|
|
background: -webkit-linear-gradient(135deg, #24C6DC, #514A9D); /* Chrome 10-25, Safari 5.1-6 */
|
|
background: linear-gradient(135deg, #24C6DC, #514A9D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
}
|
|
|
|
.downloadBox .content {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
text-align: center;
|
|
font-size: 18px;
|
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
|
|
transition: 0.3s ease;
|
|
transition-property: color, background;
|
|
}
|
|
|
|
.downloadBox:hover .content {
|
|
background-color: rgba(255, 255, 255, 0);
|
|
color: white;
|
|
}
|
|
|
|
.downloadBox:hover:after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.downloadBox .content span {
|
|
font-size: 14px;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.use {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.example {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
-webkit-box-align: start;
|
|
-ms-flex-align: start;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.example .box {
|
|
height: 150px;
|
|
background-color: red;
|
|
width: 200px;
|
|
}
|
|
|
|
.example .info {
|
|
font-size: 18px;
|
|
width: 70%;
|
|
}
|
|
|
|
.example li {
|
|
margin: 10px;
|
|
}
|
|
|
|
.example .info h3 {
|
|
margin: 0px;
|
|
}
|
|
|
|
.example:nth-child(2) .box {
|
|
background-image: -webkit-linear-gradient(315deg, #ff008a 0%, #101c25 100%);
|
|
background-image: linear-gradient(135deg, #ff008a 0%, #101c25 100%);
|
|
}
|
|
|
|
.example .info pre.inline {
|
|
display: inline-block;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
font-size: 15px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.example:nth-child(3) .box {
|
|
background-image: -webkit-linear-gradient(315deg, #ff00ba 0%, #fae713 100%);
|
|
background-image: linear-gradient(135deg, #ff00ba 0%, #fae713 100%);
|
|
transform-style: preserve-3d;
|
|
transform: perspective(1000px);
|
|
}
|
|
|
|
.example .box .inner {
|
|
position: absolute;
|
|
width: 50%;
|
|
height: 50%;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translateZ(30px) translateX(-50%) translateY(-50%);
|
|
box-shadow: 0 0 50px 0 rgba(51, 51, 51, 0.3);
|
|
background-color: white;
|
|
}
|
|
|
|
.example:nth-child(4) .box {
|
|
background: #fc00ff; /* fallback for old browsers */
|
|
background: -webkit-linear-gradient(135deg, #fc00ff , #00dbde); /* Chrome 10-25, Safari 5.1-6 */
|
|
background: linear-gradient(135deg, #fc00ff , #00dbde); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
}
|
|
|
|
.example:nth-child(5) .box {
|
|
background: #34e89e; /* fallback for old browsers */
|
|
background: -webkit-linear-gradient(135deg, #34e89e, #0f3443); /* Chrome 10-25, Safari 5.1-6 */
|
|
background: linear-gradient(135deg, #34e89e, #0f3443); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
}
|
|
|
|
.example:nth-child(6) .box {
|
|
background: #4568DC; /* fallback for old browsers */
|
|
background: -webkit-linear-gradient(135deg, #4568DC, #B06AB3); /* Chrome 10-25, Safari 5.1-6 */
|
|
background: linear-gradient(135deg, #4568DC, #B06AB3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
}
|
|
|
|
.example:nth-child(7) .box {
|
|
background: #DCE35B; /* fallback for old browsers */
|
|
background: -webkit-linear-gradient(135deg, #DCE35B, #45B649); /* Chrome 10-25, Safari 5.1-6 */
|
|
background: linear-gradient(135deg, #DCE35B, #45B649); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
}
|
|
|
|
.example:nth-child(8) .box {
|
|
background: #00c3ff; /* fallback for old browsers */
|
|
background: -webkit-linear-gradient(135deg, #00c3ff, #ffff1c); /* Chrome 10-25, Safari 5.1-6 */
|
|
background: linear-gradient(135deg, #00c3ff, #ffff1c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
}
|
|
|
|
.example:nth-child(9) .box {
|
|
background: #00bf8f; /* fallback for old browsers */
|
|
background: -webkit-linear-gradient(135deg, #00bf8f, #001510); /* Chrome 10-25, Safari 5.1-6 */
|
|
background: linear-gradient(135deg, #00bf8f, #001510); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
}
|
|
|
|
.example:nth-child(10) .box {
|
|
background: #314755; /* fallback for old browsers */
|
|
background: -webkit-linear-gradient(135deg, #314755 , #26a0da); /* Chrome 10-25, Safari 5.1-6 */
|
|
background: linear-gradient(135deg, #314755 , #26a0da); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
}
|
|
|
|
.example:nth-child(11) .box {
|
|
background: #00d2ff; /* fallback for old browsers */
|
|
background: -webkit-linear-gradient(to right, #3a7bd5, #00d2ff); /* Chrome 10-25, Safari 5.1-6 */
|
|
background: linear-gradient(to right, #3a7bd5, #00d2ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
}
|
|
|
|
.example:nth-child(12) .box {
|
|
background: #3a7bd5; /* fallback for old browsers */
|
|
background: -webkit-linear-gradient(to left, #3a6073, #3a7bd5); /* Chrome 10-25, Safari 5.1-6 */
|
|
background: linear-gradient(to left, #3a6073, #3a7bd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
}
|
|
|
|
.example:nth-child(13) .box {
|
|
background: #833ab4; /* fallback for old browsers */
|
|
background: -webkit-linear-gradient(to left, #fcb045, #fd1d1d, #833ab4); /* Chrome 10-25, Safari 5.1-6 */
|
|
background: linear-gradient(to left, #fcb045, #fd1d1d, #833ab4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
}
|
|
|
|
button {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
font: inherit;
|
|
text-align: center;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
overflow: visible;
|
|
padding: 9px 36px;
|
|
margin-bottom: 9px;
|
|
border: none;
|
|
}
|
|
|
|
.output {
|
|
height: 200px;
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
margin: 0;
|
|
padding: 1em 2em;
|
|
background-color: #f8f8f8;
|
|
list-style: none;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.output li {
|
|
font-size: 14px;
|
|
}
|
|
|
|
pre {
|
|
background-color: #f8f8f8 !important;
|
|
font-size: 16px !important;
|
|
}
|
|
|
|
aside ul {
|
|
text-align: left;
|
|
}
|
|
|
|
aside ul a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
@media only screen and (max-width: 1670px) {
|
|
.logo span {
|
|
font-size: 2vw;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 1070px) {
|
|
.logo {
|
|
max-height: 200px;
|
|
line-height: 200px;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 800px) {
|
|
aside {
|
|
display: none;
|
|
}
|
|
.logo span {
|
|
font-size: 35px;
|
|
}
|
|
.mobileLogo {
|
|
display: block;
|
|
}
|
|
.example {
|
|
flex-wrap: wrap;
|
|
}
|
|
.example .box {
|
|
margin-bottom: 20px;
|
|
}
|
|
.example .info {
|
|
width: 90%;
|
|
}
|
|
.downloadBox {
|
|
margin: 15px 0;
|
|
width: 100%;
|
|
}
|
|
.downloadBox:last-child {
|
|
margin-bottom: 30px;
|
|
}
|
|
.mobileCredits {
|
|
display: -webkit-box !important;
|
|
display: -ms-flexbox !important;
|
|
display: flex !important;
|
|
}
|
|
.example {
|
|
overflow-x: hidden
|
|
}
|
|
.example ol {
|
|
padding-left: 0px;
|
|
}
|
|
}
|
|
|