mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-08-20 05:13:18 -07:00
First commit to new site
This commit is contained in:
louis-lau
parent
637547a51c
commit
d570b3ff1a
22 changed files with 645 additions and 0 deletions
403
css/style.css
Normal file
403
css/style.css
Normal file
|
|
@ -0,0 +1,403 @@
|
|||
@-webkit-keyframes bounce {
|
||||
25% {
|
||||
-webkit-transform: translateY(-2.5px);
|
||||
transform: translateY(-2.5px);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translateY(2.5px);
|
||||
transform: translateY(2.5px);
|
||||
}
|
||||
|
||||
75% {
|
||||
-webkit-transform: translateY(-2.5px);
|
||||
transform: translateY(-2.5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
25% {
|
||||
-webkit-transform: translateY(-2.5px);
|
||||
transform: translateY(-2.5px);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translateY(2.5px);
|
||||
transform: translateY(2.5px);
|
||||
}
|
||||
|
||||
75% {
|
||||
-webkit-transform: translateY(-2.5px);
|
||||
transform: translateY(-2.5px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop only shit */
|
||||
@media screen and (min-width: 760px) {
|
||||
.triangle-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.float-container {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.screenshots a {
|
||||
display: table-cell;
|
||||
padding: 0 .5%;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Roboto, sans-serif;
|
||||
}
|
||||
|
||||
main {
|
||||
margin-top: 75px;
|
||||
}
|
||||
|
||||
main:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
b {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 600;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-transition: .2s linear border-bottom;
|
||||
transition: .2s linear border-bottom;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: "Krona One", sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ol {
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.clearfloats {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right,
|
||||
.center {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.left p,
|
||||
.right p {
|
||||
max-width: 550px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.button-black,
|
||||
.button-white {
|
||||
font-family: "Krona One", sans-serif;
|
||||
display: inline-block;
|
||||
margin: 5px;
|
||||
padding: 15px 60px;
|
||||
-webkit-transition: all .3s ease-in-out;
|
||||
transition: all .3s ease-in-out;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
border: 0 solid #000;
|
||||
border-radius: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.button-white {
|
||||
color: #000;
|
||||
border: 0 solid #fff;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.button-black:hover,
|
||||
.button-white:hover {
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.intro-container {
|
||||
width: 100vw;
|
||||
max-width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.triangle-bottom,
|
||||
.triangle-top {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100vw;
|
||||
max-width: 100%;
|
||||
height: 110vh;
|
||||
-webkit-transition: 1s ease-in-out height;
|
||||
transition: 1s ease-in-out height;
|
||||
}
|
||||
|
||||
.triangle-top {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.triangle-bottom {
|
||||
bottom: -1px; /* fucking 1px bar on chrome mobile without this */
|
||||
}
|
||||
|
||||
.load-done .triangle-bottom,
|
||||
.load-done .triangle-top {
|
||||
height: 25vh;
|
||||
}
|
||||
|
||||
.intro-read-more {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.intro-read-more p {
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
|
||||
.intro-read-more svg {
|
||||
display: block;
|
||||
width: 35px;
|
||||
margin: auto;
|
||||
-webkit-transform: translateY(-2.5px);
|
||||
transform: translateY(-2.5px);
|
||||
-webkit-animation: bounce 2s ease-in-out infinite;
|
||||
animation: bounce 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.intro {
|
||||
font-size: 23px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.intro img {
|
||||
max-width: 90vw;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.intro p {
|
||||
margin: 20px 0 55px;
|
||||
}
|
||||
|
||||
.intro-bg {
|
||||
position: absolute; /* for mobile chrome and ios compatibility */
|
||||
bottom: 0; /* for mobile chrome and ios compatibility */
|
||||
width: 100vw;
|
||||
max-width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
[data-slides] {
|
||||
-webkit-transition: background-image 1s linear;
|
||||
transition: background-image 1s linear;
|
||||
background-image: url("/img/fanart/3.jpg"); /* Default image. */
|
||||
background-repeat: no-repeat;
|
||||
background-position: center top;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.what-container {
|
||||
width: 100%;
|
||||
padding-bottom: 150px;
|
||||
}
|
||||
|
||||
.screenshots-container {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.screenshots {
|
||||
display: table;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto 75px;
|
||||
}
|
||||
|
||||
.sl-overlay {
|
||||
opacity: .8;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.sl-wrapper .sl-navigation button,
|
||||
.sl-wrapper .sl-close,
|
||||
.sl-wrapper .sl-counter {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.screenshots img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.install-container {
|
||||
padding: 150px 0;
|
||||
color: #fff;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.madeby-container {
|
||||
padding: 150px 0;
|
||||
color: #000;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* Fancy css loader */
|
||||
.loader {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: 40px;
|
||||
-webkit-transition: .3s ease-in-out opacity;
|
||||
transition: .3s ease-in-out opacity;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.load-done .loader {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.sk-folding-cube {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 25px auto 0;
|
||||
-webkit-transform: rotateZ(45deg);
|
||||
transform: rotateZ(45deg);
|
||||
}
|
||||
|
||||
.sk-folding-cube .sk-cube {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.sk-folding-cube .sk-cube:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
-webkit-transform-origin: 100% 100%;
|
||||
transform-origin: 100% 100%;
|
||||
-webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
|
||||
animation: sk-foldCubeAngle 2.4s infinite linear both;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.sk-folding-cube .sk-cube2 {
|
||||
-webkit-transform: scale(1.1) rotateZ(90deg);
|
||||
transform: scale(1.1) rotateZ(90deg);
|
||||
}
|
||||
|
||||
.sk-folding-cube .sk-cube3 {
|
||||
-webkit-transform: scale(1.1) rotateZ(180deg);
|
||||
transform: scale(1.1) rotateZ(180deg);
|
||||
}
|
||||
|
||||
.sk-folding-cube .sk-cube4 {
|
||||
-webkit-transform: scale(1.1) rotateZ(270deg);
|
||||
transform: scale(1.1) rotateZ(270deg);
|
||||
}
|
||||
|
||||
.sk-folding-cube .sk-cube2:before {
|
||||
-webkit-animation-delay: .3s;
|
||||
animation-delay: .3s;
|
||||
}
|
||||
|
||||
.sk-folding-cube .sk-cube3:before {
|
||||
-webkit-animation-delay: .6s;
|
||||
animation-delay: .6s;
|
||||
}
|
||||
|
||||
.sk-folding-cube .sk-cube4:before {
|
||||
-webkit-animation-delay: .9s;
|
||||
animation-delay: .9s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sk-foldCubeAngle {
|
||||
0%,
|
||||
10% {
|
||||
-webkit-transform: perspective(140px) rotateX(-180deg);
|
||||
transform: perspective(140px) rotateX(-180deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
25%,
|
||||
75% {
|
||||
-webkit-transform: perspective(140px) rotateX(0deg);
|
||||
transform: perspective(140px) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
90%,
|
||||
100% {
|
||||
-webkit-transform: perspective(140px) rotateY(180deg);
|
||||
transform: perspective(140px) rotateY(180deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sk-foldCubeAngle {
|
||||
0%,
|
||||
10% {
|
||||
-webkit-transform: perspective(140px) rotateX(-180deg);
|
||||
transform: perspective(140px) rotateX(-180deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
25%,
|
||||
75% {
|
||||
-webkit-transform: perspective(140px) rotateX(0deg);
|
||||
transform: perspective(140px) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
90%,
|
||||
100% {
|
||||
-webkit-transform: perspective(140px) rotateY(180deg);
|
||||
transform: perspective(140px) rotateY(180deg);
|
||||
opacity: 0;
|
||||
}
|
||||
} /* END Fancy css loader */
|
||||
Loading…
Add table
Add a link
Reference in a new issue