mirror of
https://github.com/aquasecurity/trivy.git
synced 2025-12-24 03:58:12 -08:00
411 lines
7.2 KiB
SCSS
411 lines
7.2 KiB
SCSS
/* trivy homepage */
|
|
.trivy_v1_homepage_wrap {
|
|
position: relative;
|
|
z-index: 3;
|
|
|
|
* {
|
|
transition: all 0.2s ease !important;
|
|
}
|
|
|
|
|
|
|
|
.hero_wrap {
|
|
background-color: $aq-trivy-dark;
|
|
background-image: radial-gradient(1600px at 70% 120%, #031145 10%, $aq-trivy-dark 100%);
|
|
min-height: 1050px;
|
|
position: relative;
|
|
z-index: 10;
|
|
|
|
|
|
.homepage_background_image_wrap {
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
|
|
|
|
.stars_wrap {
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
|
|
.stars_bg {
|
|
position: absolute;
|
|
width: 400vw;
|
|
height: 400vh;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-top: -200vh;
|
|
margin-left: -200vw;
|
|
animation: stars_ani 240s linear infinite;
|
|
background-size: 240px;
|
|
backface-visibility: visible;
|
|
background-image:url(../images/homepage_hero_stars_02.svg);
|
|
background-repeat: repeat;
|
|
|
|
}
|
|
|
|
|
|
@keyframes stars_ani {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
} //stars_wrap
|
|
|
|
.terrain_wrap {
|
|
position: absolute;
|
|
left: 0px;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
height: 680px;
|
|
background-image:url(../images/homepage_hero_terrain_08.svg);
|
|
background-repeat: no-repeat;
|
|
background-position: center top;
|
|
background-size: cover;
|
|
z-index: 2;
|
|
} // terrain_wrap
|
|
|
|
|
|
.beams_wrap {
|
|
position: absolute;
|
|
left: 0px;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 3;
|
|
overflow: hidden;
|
|
|
|
.beam {
|
|
position: absolute;
|
|
right: 200px;
|
|
top: 270px;
|
|
width: 3px;
|
|
height: 350%;
|
|
background: rgba(#3eabff,0.6);
|
|
box-shadow: 0px 0px 55px 0px rgba(#3eabff,1);
|
|
transform-origin: 0 0;
|
|
animation: beam_ani 10s infinite;
|
|
|
|
&.num2 {animation: beam_ani 11s infinite;}
|
|
&.num3 {animation: beam_ani 12s infinite;}
|
|
&.num4 {animation: beam_ani 13s infinite;}
|
|
} //beam
|
|
|
|
@keyframes beam_ani {
|
|
0% { transform: rotate(75deg); }
|
|
50% { transform: rotate(-15deg); }
|
|
100% { transform: rotate(75deg); }
|
|
}
|
|
|
|
.sphere {
|
|
z-index:999;
|
|
position: absolute;
|
|
top: 60px;
|
|
right: 50px;
|
|
width: 280px;
|
|
height: 280px;
|
|
background-image:url(../images/homepage_hero_orb_03.png);
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
} //beams_wrap
|
|
|
|
|
|
.person_wrap {
|
|
position: absolute;
|
|
left: 0px;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
height: 595px;
|
|
background-image:url(../images/homepage_v1_hero_person_01.png);
|
|
background-repeat: no-repeat;
|
|
background-position: center bottom;
|
|
z-index: 4;
|
|
|
|
} // person_wrap
|
|
|
|
|
|
|
|
} //hero_background_image_wrap
|
|
}
|
|
|
|
|
|
|
|
.hero {
|
|
|
|
|
|
.hero-body {
|
|
padding: 80px 0px;
|
|
// border: 1px solid red;
|
|
|
|
.header_title_wrap {
|
|
.header_title_content_wrap {
|
|
|
|
width: 50%;
|
|
position: relative;
|
|
z-index: 3;
|
|
|
|
.page_title {
|
|
color: #ffffff;
|
|
font-weight: $weight-bold;
|
|
font-size: 48px; //3rem
|
|
line-height: 1.3;
|
|
}//page_title
|
|
|
|
.page_subtitle {
|
|
color: #ffffff;
|
|
font-weight: $weight-normal;
|
|
font-size: 24px; //1.5rem
|
|
line-height: 1.3;
|
|
margin-bottom: 30px;
|
|
} //page_subtitle
|
|
|
|
|
|
@media screen and (max-width: $widescreen), print {
|
|
width: 70%;
|
|
} //until widescreen
|
|
|
|
@media screen and (max-width: $tablet), print { //769
|
|
|
|
width: 100%;
|
|
|
|
.page_title {
|
|
font-size: 32px; //2rem
|
|
}//page_title
|
|
|
|
.page_subtitle {
|
|
font-size: 18px; //1.125rem
|
|
}//page_subtitle
|
|
|
|
} //until tablet
|
|
|
|
|
|
} //header_title_content_wrap
|
|
|
|
} //header_title_wrap
|
|
|
|
@media screen and (min-width: $tablet), print { //769
|
|
padding: 48px 24px; //3rem 1.5rem
|
|
}
|
|
}
|
|
|
|
} //hero
|
|
|
|
|
|
|
|
|
|
|
|
// } //page-trivy_homepage
|
|
|
|
|
|
|
|
|
|
/* homepage_community */
|
|
.homepage_community_wrap {
|
|
position: relative;
|
|
background-color: $aq-trivy-dark;
|
|
color: #ffffff;
|
|
z-index: 5;
|
|
padding-top: 60px;
|
|
padding-bottom: 20px;
|
|
|
|
|
|
.container.wide_container {
|
|
max-width: 1640px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
|
|
.community_titles_column {
|
|
width: 33.3333%;
|
|
padding-right: 32px;
|
|
|
|
@media screen and (max-width: $desktop), print {
|
|
width: 41.6666666667%;
|
|
} //until desktop
|
|
|
|
@media screen and (max-width: $tablet), print {
|
|
width: 100%;
|
|
} //until tablet
|
|
}
|
|
|
|
.community_slider_column {
|
|
width: 66.6666%;
|
|
|
|
@media screen and (max-width: $desktop), print {
|
|
width: 58.3333333333%;
|
|
} //until desktop
|
|
|
|
@media screen and (max-width: $tablet), print {
|
|
width: 100%;
|
|
} //until tablet
|
|
}
|
|
|
|
|
|
.community_title {
|
|
color: $aq-neon-blue;
|
|
font-size: 60px; //3.75rem
|
|
font-weight: $weight-bold;
|
|
margin-bottom: 24px; //1.5rem
|
|
line-height: 1.2;
|
|
|
|
|
|
}
|
|
|
|
.community_subtitle {
|
|
color: #ffffff;
|
|
font-size: 26px; //1.625rem
|
|
margin-bottom: 24px; //1.5rem
|
|
|
|
|
|
}
|
|
|
|
.community_cta_wrap {
|
|
|
|
.button {
|
|
font-weight: $weight-bold;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
}
|
|
|
|
.community_quotes_wrap {
|
|
position: relative;
|
|
|
|
|
|
.community_quotes {
|
|
column-count: 3;
|
|
column-gap: 20px;
|
|
|
|
@media screen and (max-width: $widescreen), print { //1216
|
|
column-count: 2;
|
|
}
|
|
|
|
@media screen and (max-width: $tablet), print { //769
|
|
column-count: 1;
|
|
}
|
|
|
|
.quote_item_wrap {
|
|
display: inline-block;
|
|
margin: 0px 0px 20px 0px;
|
|
width: 100%;
|
|
}
|
|
|
|
.quote_item {
|
|
|
|
display: block;
|
|
position: relative;
|
|
color: #ffffff;
|
|
border: 1px solid rgba($aq-neon-blue,0.2);
|
|
background-color: rgba($aq-neon-blue,0.05);
|
|
border-radius: 4px;
|
|
padding: 25px;
|
|
|
|
.quote_name {
|
|
font-size: 16px; //1rem
|
|
font-weight: $weight-semibold;
|
|
}
|
|
|
|
.quote_twitter_handle {
|
|
opacity: 0.6;
|
|
font-size: 13px; //0.8125rem
|
|
}
|
|
|
|
.quote_company {
|
|
opacity: 0.6;
|
|
font-size: 13px; //0.8125rem
|
|
}
|
|
|
|
.quote_text {
|
|
font-size: 16px; //1rem
|
|
font-weight: $weight-normal;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.quote_avatar {
|
|
display: block;
|
|
position: absolute;
|
|
top: 25px;
|
|
left: 25px;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
background-size: cover;
|
|
|
|
}
|
|
|
|
&.is_tweet {
|
|
|
|
.quote_text {
|
|
padding-top: 10px;
|
|
}
|
|
|
|
|
|
&.has_avatar {
|
|
.quote_name,
|
|
.quote_twitter_handle {
|
|
padding-left: 50px;
|
|
}
|
|
} //has_avatar
|
|
|
|
} //&is_tweet
|
|
|
|
&.is_quote {
|
|
|
|
.quote_text {
|
|
position: relative;
|
|
padding-top: 40px;
|
|
padding-bottom: 10px;
|
|
|
|
&:before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: -10px;
|
|
left: 0px;
|
|
width: 56px;
|
|
height: 42px;
|
|
background-image: url(../images/community_quote.png);
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
} //quote_text
|
|
|
|
} //&is_quote
|
|
|
|
} //quote_item
|
|
|
|
}
|
|
|
|
} //community_quotes_wrap
|
|
|
|
@media screen and (max-width: $tablet), print { //tablet
|
|
|
|
.community_title {
|
|
font-size: 32px; //2rem
|
|
}
|
|
.community_subtitle {
|
|
font-size: 18px; //1.125rem
|
|
}
|
|
|
|
} //until
|
|
|
|
|
|
} //homepage_community_wrap
|
|
|
|
} //trivy_homepage_wrap |