mirror of
https://github.com/inspec/inspec
synced 2024-12-26 04:53:24 +00:00
4641978716
* New styles * Fundamental styles for home page * Legal pages * Community page, downloads page, tutorials page * Docs page * Content toggle and github badge * Add code - highlighter * Copy button * Sliding content animation * fix particle animatino on downloads page * Scroll-to-top button * docs sidebar links * innocent comments on resources * Fancy code animation * Small update to diamond * whatever slider * Slider styles * initial selection if no sliders are there * add netifly config Signed-off-by: Christoph Hartmann <chris@lollyrock.com> * inspec for provisioners * fix incorrect text on aws ssm * fix layout javascript post-rebase * resource grouping in docs * introduce groups in docs/resources * fix minor spelling issues and move download button in new features section Signed-off-by: Christoph Hartmann <chris@lollyrock.com> * pass linting Signed-off-by: Christoph Hartmann <chris@lollyrock.com>
420 lines
7.6 KiB
SCSS
420 lines
7.6 KiB
SCSS
// Hero Banner - Home Page
|
|
|
|
header {
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
.short-bg {
|
|
background-size: 100% 60%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
//number Box
|
|
|
|
.num-container {
|
|
width: $percent_sm;
|
|
height: $percent_sm;
|
|
min-width: $percent_sm;
|
|
background-image: url('/images/octagon.svg');
|
|
background-size: cover;
|
|
text-align: center;
|
|
}
|
|
|
|
.num-container h3 {
|
|
line-height: $percent_sm;
|
|
}
|
|
|
|
//particle art
|
|
|
|
#particles-js, #particles-second, #particles-third { // Animated line particles
|
|
position: absolute;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
overflow: hidden;
|
|
background-color: transparent;
|
|
}
|
|
|
|
img.diamond {
|
|
margin: auto;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 28px;
|
|
right: 0;
|
|
width: 14rem;
|
|
}
|
|
|
|
.octagons {
|
|
margin: auto;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.blue-grid {
|
|
position: absolute;
|
|
top: $percent_sm;
|
|
right: 0;
|
|
z-index: -1;
|
|
}
|
|
|
|
|
|
//icons and SUCH
|
|
|
|
.scrollToTop {
|
|
width: $percent_sm;
|
|
height: $percent_sm;
|
|
border-radius: 50%;
|
|
position: fixed;
|
|
background-color: white;
|
|
right: $percent_xs;
|
|
bottom: $percent_xs;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
}
|
|
|
|
img#scrollup {
|
|
width: 20px;
|
|
height: auto;
|
|
margin-top: 11px;
|
|
}
|
|
|
|
img.icon-art {
|
|
height: 6rem;
|
|
}
|
|
|
|
img.icon-logos {
|
|
height: 20px;
|
|
}
|
|
|
|
.copy {
|
|
@extend %transition;
|
|
width: 20px;
|
|
height: auto;
|
|
cursor: pointer;
|
|
margin-right: $percent_xs;
|
|
|
|
&:hover {
|
|
-webkit-transform: scale(1.2);
|
|
-ms-transform: scale(1.2);
|
|
-moz-transform: scale(1.2);
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
|
|
.text-focus { //for copied element
|
|
@extend %transition;
|
|
background-color: rgba(146, 107, 231, 0.2);
|
|
}
|
|
|
|
// Hero illustration for Community
|
|
|
|
img.grid {
|
|
z-index: -1;
|
|
margin-top: -80px;
|
|
}
|
|
|
|
img.ball {
|
|
position: absolute;
|
|
width: 35px;
|
|
margin-top: 6rem;
|
|
margin-left: 12rem;
|
|
-moz-animation: spin 2s linear infinite both;
|
|
-webkit-animation: spin 2s linear infinite both;
|
|
animation: spin 2s linear infinite both;
|
|
}
|
|
|
|
img.ball:nth-child(2) {
|
|
width: 55px;
|
|
margin-top: 14rem;
|
|
margin-left: 8.5rem;
|
|
}
|
|
|
|
img.ball:nth-child(3) {
|
|
width: 75px;
|
|
margin-top: 10rem;
|
|
margin-left: 15rem;
|
|
}
|
|
|
|
|
|
// Animation for Home Page
|
|
|
|
.grid-animate { // Warping Grid Animation//
|
|
-moz-animation: g-animate 8s linear infinite both;
|
|
-webkit-animation: g-animate 8s linear infinite both;
|
|
animation: g-animate 8s linear infinite both;
|
|
}
|
|
|
|
@-webkit-keyframes g-animate {
|
|
25% {
|
|
-webkit-transform: rotateZ(10deg) scale3d(0.7, 1, 1.2);
|
|
transform: rotateZ(10deg) scale3d(0.7, 1, 1.2);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: scale3d(1.2, 0.7, 1);
|
|
transform: scale3d(1.2, 0.7, 1);
|
|
}
|
|
|
|
75% {
|
|
-webkit-transform: rotateZ(10deg) scale3d(0.7, 1.2, 0.5);
|
|
transform: rotateZ(10deg) scale3d(0.7, 1.2, 0.5);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes g-animate {
|
|
25% {
|
|
-moz-transform: rotateZ(10deg) scale3d(0.7, 1, 1.2);
|
|
transform: rotateZ(10deg) scale3d(0.7, 1, 1.2);
|
|
}
|
|
|
|
50% {
|
|
-moz-transform: scale3d(1.2, 0.7, 1);
|
|
transform: scale3d(1.2, 0.7, 1);
|
|
}
|
|
|
|
75% {
|
|
-moz-transform: rotateZ(10deg) scale3d(0.7, 1.2, 0.5);
|
|
transform: rotateZ(10deg) scale3d(0.7, 1.2, 0.5);
|
|
}
|
|
}
|
|
|
|
@keyframes g-animate {
|
|
25% {
|
|
-moz-transform: rotateZ(10deg) scale3d(0.7, 1, 1.2);
|
|
transform: rotateZ(10deg) scale3d(0.7, 1, 1.2);
|
|
}
|
|
|
|
50% {
|
|
-moz-transform: scale3d(1.2, 0.7, 1);
|
|
transform: scale3d(1.2, 0.7, 1);
|
|
}
|
|
|
|
75% {
|
|
-moz-transform: rotateZ(10deg) scale3d(0.7, 1.2, 0.5);
|
|
transform: rotateZ(10deg) scale3d(0.7, 1.2, 0.5);
|
|
}
|
|
}
|
|
|
|
// Spin Animation Keyframes
|
|
|
|
@-moz-keyframes spin {
|
|
from {
|
|
-moz-transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
-moz-transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes spin {
|
|
from {
|
|
-webkit-transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
//Rotate 90 degrees for nav-small
|
|
|
|
.turn {
|
|
-webkit-transform: rotate(90deg);
|
|
-moz-transform: rotate(90deg);
|
|
-o-transform: rotate(90deg);
|
|
-ms-transform: rotate(90deg);
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
//slide-left
|
|
|
|
.slide-left {
|
|
opacity: 0;
|
|
-moz-transition: all 500ms linear;
|
|
-webkit-transition: all 500ms linear;
|
|
-o-transition: all 500ms linear;
|
|
transition: all 500ms linear;
|
|
-moz-transform: translate3d(-100px, 0px, 0px);
|
|
-webkit-transform: translate3d(-100px, 0px, 0px);
|
|
-o-transform: translate(-100px, 0px);
|
|
-ms-transform: translate(-100px, 0px);
|
|
transform: translate3d(-100px, 0px, 0px);
|
|
}
|
|
|
|
.slide-left.in-view {
|
|
opacity: 1;
|
|
-moz-transform: translate3d(0px, 0px, 0px);
|
|
-webkit-transform: translate3d(0px, 0px, 0px);
|
|
-o-transform: translate(0px, 0px);
|
|
-ms-transform: translate(0px, 0px);
|
|
transform: translate3d(0px, 0px, 0px);
|
|
}
|
|
|
|
//slide-right
|
|
|
|
.slide-right {
|
|
opacity: 0;
|
|
-moz-transition: all 500ms linear;
|
|
-webkit-transition: all 500ms linear;
|
|
-o-transition: all 500ms linear;
|
|
transition: all 500ms linear;
|
|
-moz-transform: translate3d(100px, 0px, 0px);
|
|
-webkit-transform: translate3d(100px, 0px, 0px);
|
|
-o-transform: translate(100px, 0px);
|
|
-ms-transform: translate(100px, 0px);
|
|
transform: translate3d(100px, 0px, 0px);
|
|
}
|
|
|
|
.slide-right.in-view {
|
|
opacity: 1;
|
|
-moz-transform: translate3d(0px, 0px, 0px);
|
|
-webkit-transform: translate3d(0px, 0px, 0px);
|
|
-o-transform: translate(0px, 0px);
|
|
-ms-transform: translate(0px, 0px);
|
|
transform: translate3d(0px, 0px, 0px);
|
|
}
|
|
|
|
//slide-up
|
|
|
|
.slide-up {
|
|
opacity: 0;
|
|
-moz-transition: all 500ms linear;
|
|
-webkit-transition: all 500ms linear;
|
|
-o-transition: all 500ms linear;
|
|
transition: all 500ms linear;
|
|
-moz-transform: translate3d(0px, 100px, 0px);
|
|
-webkit-transform: translate3d(0px, 100px, 0px);
|
|
-o-transform: translate(0px, 100px);
|
|
-ms-transform: translate(0px, 100px);
|
|
transform: translate3d(0px, 100px, 0px);
|
|
}
|
|
|
|
.slide-up.in-view {
|
|
opacity: 1;
|
|
-moz-transform: translate3d(0px, 0px, 0px);
|
|
-webkit-transform: translate3d(0px, 0px, 0px);
|
|
-o-transform: translate(0px, 0px);
|
|
-ms-transform: translate(0px, 0px);
|
|
transform: translate3d(0px, 0px, 0px);
|
|
}
|
|
|
|
//slide-up-slow
|
|
|
|
.slide-up-slow {
|
|
opacity: 1;
|
|
-moz-transform: translate3d(0px, 0px, 0px);
|
|
-webkit-transform: translate3d(0px, 0px, 0px);
|
|
-o-transform: translate(0px, 0px);
|
|
-ms-transform: translate(0px, 0px);
|
|
transform: translate3d(0px, 0px, 0px);
|
|
}
|
|
|
|
.slide-up-slow.in-view {
|
|
-moz-animation: scrollUp 10s normal forwards ease-in-out;
|
|
-webkit-animation: scrollUp 10s normal forwards ease-in-out;
|
|
animation: scrollUp 10s normal forwards ease-in-out;
|
|
}
|
|
|
|
@-moz-keyframes scrollUp {
|
|
0% {
|
|
-moz-transform: translate3d(0px, 0px, 0px);
|
|
}
|
|
|
|
75% {
|
|
-moz-transform: translate3d(0px, -100%, 0px);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: translate3d(0px, 0px, 0px);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes scrollUp {
|
|
0% {
|
|
-webkit-transform: translate3d(0px, 0px, 0px);
|
|
}
|
|
|
|
75% {
|
|
-webkit-transform: translate3d(0px, -100%, 0px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translate3d(0px, 0px, 0px);
|
|
}
|
|
}
|
|
|
|
@keyframes scrollUp {
|
|
0% {
|
|
transform: translate3d(0px, 0px, 0px);
|
|
}
|
|
|
|
75% {
|
|
transform: translate3d(0px, -100%, 0px);
|
|
}
|
|
|
|
100% {
|
|
transform: translate3d(0px, 0px, 0px);
|
|
}
|
|
}
|
|
|
|
.animate-delay-10 {
|
|
animation-delay: 1000ms;
|
|
-webkit-animation-delay: 1000ms;
|
|
-moz-animation-delay: 1000ms;
|
|
-o-animation-delay: 1000ms;
|
|
}
|
|
|
|
.animate-delay-20 {
|
|
animation-delay: 2000ms;
|
|
-webkit-animation-delay: 2000ms;
|
|
-moz-animation-delay: 2000ms;
|
|
-o-animation-delay: 2000ms;
|
|
}
|
|
|
|
//slider
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.slide-in {
|
|
animation: slide-in 0.5s forwards;
|
|
-webkit-animation: slide-in 0.5s forwards;
|
|
-moz-animation: slide-in 0.5s forwards;
|
|
}
|
|
|
|
.slide-out {
|
|
display: none;
|
|
}
|
|
|
|
@keyframes slide-in {
|
|
0% { transform: translateX(100%); }
|
|
100% { transform: translateX(0%); }
|
|
}
|
|
|
|
@-webkit-keyframes slide-in {
|
|
0% { -webkit-transform: translateX(100%); }
|
|
100% { -webkit-transform: translateX(0%); }
|
|
}
|
|
|
|
@-moz-keyframes slide-in {
|
|
0% { -moz-transform: translateX(100%); }
|
|
100% { -moz-transform: translateX(0%); }
|
|
}
|