mirror of https://github.com/helm/helm-www.git
[v3 theme] restyle theme menus and scrolly funky states
Signed-off-by: flynnduism <flynnduism@gmail.com> Signed-off-by: flynnduism <dev@ronan.design>
This commit is contained in:
flynnduism
flynnduism
parent
186a7136b5
commit
b1a0e300b6
|
|
@ -19,4 +19,4 @@
|
|||
"Firefox ESR",
|
||||
"not dead"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -7,8 +7,10 @@ $(document).ready(function() {
|
|||
// close all accordions, besides that of the page that is currently active
|
||||
var doclocation = window.location.pathname;
|
||||
var docpath = doclocation.substring(0, doclocation.lastIndexOf("/"));
|
||||
var directoryName = docpath.substring(docpath.lastIndexOf("/")+1);
|
||||
$(".toctree-l1 > a[href='" + directoryName + "']").addClass('active').attr({state: "open"});
|
||||
var parentName = docpath.replace(/\/[^\/]+$/, '')
|
||||
var pageName = docpath.substring(docpath.lastIndexOf("/")+1);
|
||||
$(".toctree-l1 > a[href*='" + parentName + "']").addClass("active");
|
||||
$(".toctree-12 > a[href$='" + pageName + "/']").addClass("active");
|
||||
|
||||
if (allClosed === true) { }
|
||||
|
||||
|
|
@ -50,6 +52,17 @@ $(".navbar-burger").click(function() {
|
|||
$(".sidebar-wrapper").toggleClass("is-active");
|
||||
});
|
||||
|
||||
// adjust docs sidebar after scroll
|
||||
if ($('.page-docs').length) {
|
||||
$(window).scroll(function() { // this will work when your window scrolled.
|
||||
var height = $(window).scrollTop(); //getting the scrolling height of window
|
||||
if(height > 50) {
|
||||
$(".sidebar-main").addClass('is-scrolled');
|
||||
} else{
|
||||
$(".sidebar-main").removeClass('is-scrolled');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// add permalinks to titles
|
||||
$(function() {
|
||||
|
|
|
|||
|
|
@ -38,7 +38,16 @@
|
|||
h3 {
|
||||
color: $grey4;
|
||||
@include klinicBold;
|
||||
margin: 1.825em 0 1.825em;
|
||||
margin: 3em 0 1.825em;
|
||||
|
||||
pre,
|
||||
code {
|
||||
padding: 0 0.2em;
|
||||
background: lighten($light2, 1%);
|
||||
font-weight: bold;
|
||||
font-size: 1.35rem;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
|
|
@ -129,6 +138,7 @@
|
|||
padding: 0.75em 1em;
|
||||
margin: 0.25em 0 2.5em;
|
||||
font-size: 1rem;
|
||||
line-height: 1.636;
|
||||
border-left: 2px solid $yellow;
|
||||
|
||||
code {
|
||||
|
|
@ -175,6 +185,25 @@
|
|||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: disc;
|
||||
color: $navy;
|
||||
font-size: $scalex5;
|
||||
|
||||
li {
|
||||
padding-bottom: 0.25em;
|
||||
color: $grey4;
|
||||
line-height: 1.85;
|
||||
font-size: $scalex5;
|
||||
}
|
||||
|
||||
li::before {
|
||||
// content: "\2022";
|
||||
// color: $navy;
|
||||
// padding-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 1.5rem 0;
|
||||
border: none;
|
||||
|
|
|
|||
|
|
@ -1,172 +1,61 @@
|
|||
.main {
|
||||
|
||||
&.footer-expanded {
|
||||
margin-bottom: -11em;
|
||||
}
|
||||
}
|
||||
|
||||
.styleguide-footer {
|
||||
min-height: 5rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 500;
|
||||
padding-top: 1.25em;
|
||||
background-color: $grey4;
|
||||
border-bottom: 6px solid $grey4;
|
||||
min-width: 100%;
|
||||
@include transition;
|
||||
.footer-links {
|
||||
margin-left: $sidebarWidth;
|
||||
background:
|
||||
url('/img/topography.png') repeat top left,
|
||||
linear-gradient(180deg, darken($navy, 3.5%) 0%, $navy 100%);
|
||||
background-blend-mode: color-burn;
|
||||
background-attachment: fixed;
|
||||
padding: 2rem 3.5vw 3rem;
|
||||
max-width: 100%;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
float: left;
|
||||
margin-bottom: 0;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
margin: 0;
|
||||
dl {
|
||||
font-family: 'Space Mono';
|
||||
|
||||
dt,
|
||||
dd {
|
||||
color: lighten($blue3, 12.5%);
|
||||
@include klinicReg;
|
||||
font-family: 'Space Mono';
|
||||
}
|
||||
dt {
|
||||
@include klinicBold;
|
||||
margin: 1.2rem 0;
|
||||
color: black;
|
||||
|
||||
a {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p,
|
||||
li {
|
||||
color: $grey2;
|
||||
line-height: 1.7;
|
||||
font-size: 0.667rem;
|
||||
@include klinicReg;
|
||||
}
|
||||
|
||||
li a {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
strong {
|
||||
@include upperCase;
|
||||
margin: 0.75rem 0 0.25rem;
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
|
||||
a {
|
||||
color: $grey2;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $blue1;
|
||||
|
||||
&:hover {
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.fa.footer-reveal {
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: -0.65em;
|
||||
top: 0.35rem;
|
||||
@include border-radius(50%, 50%);
|
||||
@include transition;
|
||||
|
||||
&:hover {
|
||||
background: darken($grey4, 5%);
|
||||
color: $grey2;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0.75rem;
|
||||
color: $grey4;
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-top: 2.67rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.5;
|
||||
|
||||
a {
|
||||
color: $blue1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0;
|
||||
float: right;
|
||||
opacity: 0.7;
|
||||
@include transition;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-nav-social {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
bottom: 2em;
|
||||
text-align: right;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 1rem 0.25em;
|
||||
text-align: right;
|
||||
|
||||
a {
|
||||
font-size: 1.5em;
|
||||
color: $grey3;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
text-align: center;
|
||||
background: darken($grey4, 5%);
|
||||
@include border-radius(50%, 50%);
|
||||
@include transition;
|
||||
color: lighten($blue3, 12.5%);
|
||||
@include ripple;
|
||||
|
||||
&:hover {
|
||||
background: $blue4;
|
||||
color: white;
|
||||
color: lighten($blue3, 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-extra {
|
||||
div {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
@include transition(all, 0.3s, ease-in-out);
|
||||
}
|
||||
}
|
||||
|
||||
&.footer-expanded {
|
||||
margin-top: -11rem;
|
||||
min-height: 11rem;
|
||||
|
||||
.footer-extra div {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
min-height: 8em;
|
||||
}
|
||||
|
||||
a.fa.footer-reveal {
|
||||
-ms-transform: rotate(180deg);
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
|
||||
dd {
|
||||
margin: 0 0 0.5rem;
|
||||
|
||||
a {
|
||||
color: white;
|
||||
line-height: 1.5;
|
||||
display: inline-block;
|
||||
background-color: transparent !important;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
em {
|
||||
color: darken($light2, 25%);
|
||||
font-style: normal;
|
||||
font-size: 0.7rem;
|
||||
padding-left: 0.333sem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#contrib {
|
||||
background: $blue1;
|
||||
padding-bottom: 4rem;
|
||||
|
|
@ -210,41 +99,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
dl {
|
||||
font-family: 'Space Mono';
|
||||
|
||||
dt,
|
||||
dd {
|
||||
color: $blue3;
|
||||
@include klinicReg;
|
||||
font-family: 'Space Mono';
|
||||
}
|
||||
dt {
|
||||
@include klinicBold;
|
||||
margin: 1.2rem 0;
|
||||
color: black;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0 0 0.5rem;
|
||||
|
||||
a {
|
||||
color: $navyl !important;
|
||||
line-height: 1.5;
|
||||
display: inline-block;
|
||||
background-color: transparent !important;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
em {
|
||||
color: darken($light2, 25%);
|
||||
font-style: normal;
|
||||
font-size: 0.7rem;
|
||||
padding-left: 0.333sem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-social {
|
||||
list-style: none;
|
||||
text-align: right;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
.home {
|
||||
box-sizing: border-box;
|
||||
min-height: 100%;
|
||||
// .home {
|
||||
// box-sizing: border-box;
|
||||
// min-height: 100%;
|
||||
|
||||
h3 {
|
||||
color: #f6fbfe;
|
||||
font-size: 1.125rem;
|
||||
@include klinicBold;
|
||||
}
|
||||
}
|
||||
// h3 {
|
||||
// color: #f6fbfe;
|
||||
// font-size: 1.125rem;
|
||||
// @include klinicBold;
|
||||
// }
|
||||
// }
|
||||
|
|
@ -28,7 +28,13 @@
|
|||
ul {
|
||||
margin: 0 auto 0.5em;
|
||||
padding: 12rem 0 10rem;
|
||||
// background: $light2;
|
||||
@include transition;
|
||||
|
||||
&.sidebar-main {
|
||||
&.is-scrolled {
|
||||
padding-top: 6.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
a {
|
||||
|
|
@ -43,7 +49,7 @@
|
|||
|
||||
&.active,
|
||||
&[state="open"] {
|
||||
color: $navyd;
|
||||
color: $navyl;
|
||||
background: white;
|
||||
|
||||
.ripple span {
|
||||
|
|
@ -66,25 +72,29 @@
|
|||
padding: 0.75em 0 1.25em;
|
||||
display: none;
|
||||
|
||||
li {
|
||||
li.toctree-12 {
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
padding: 0.25em 0 0.25em 17.5%;
|
||||
color: $blue2;
|
||||
@include transition;
|
||||
padding: 0.25em 6.67% 0.25em 13.5%;
|
||||
line-height: 1.4;
|
||||
color: $navyl;
|
||||
font-family: $base;
|
||||
font-size: $scalex3;
|
||||
border-right: 3px solid white;
|
||||
@include transition;
|
||||
|
||||
&:hover {
|
||||
color: $blue4;
|
||||
background: lighten($blue3, 37.5%);
|
||||
color: $navy;
|
||||
background: lighten($blue3, 50%);
|
||||
border-right: 3px solid lighten($blue2, 12.5%);
|
||||
}
|
||||
}
|
||||
|
||||
&.active a {
|
||||
color: $blue4;
|
||||
border-right: 4px solid $blue4;
|
||||
background: desaturate(lighten($blue1, 39.5%), 20%);
|
||||
> a.active {
|
||||
border-right: 3px solid $navy;
|
||||
background: rgba(255,255,255,0.67);
|
||||
color: $navy;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
top: -120px;
|
||||
padding-top: 0;
|
||||
min-height: 5.25rem;
|
||||
background: url('/img/topography.png') left top repeat;
|
||||
background: white url('/img/topography.png') left top repeat;
|
||||
background-attachment: fixed;
|
||||
z-index: 1140;
|
||||
|
||||
|
|
@ -59,10 +59,10 @@
|
|||
font-size: 1.125rem;
|
||||
@include ripple;
|
||||
@include klinicBold;
|
||||
padding: 1.75rem 2vw;
|
||||
padding: 1.75rem 1.75vw;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($salmon, 12.5%);
|
||||
@include opacity(rgba($salmon, 0.5), white);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -77,8 +77,8 @@
|
|||
font-size: 1.125rem;
|
||||
position: absolute;
|
||||
height: 3rem !important;
|
||||
right: 1rem;
|
||||
padding: 1rem 2.25vw;
|
||||
right: 1.25vw;
|
||||
padding: 1rem 1.925vw;
|
||||
border-color: $navy;
|
||||
color: $navy;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,21 @@
|
|||
// overwrites global styles on homepage
|
||||
.page-home {
|
||||
|
||||
.navbar-top {
|
||||
padding-top: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.page-home + .footer-links {
|
||||
margin-left: 0;
|
||||
|
||||
dl {
|
||||
dt {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// unique homepage layouts
|
||||
.home-intro {
|
||||
min-height: 90vh;
|
||||
background: url('/img/topography.png') left top repeat;
|
||||
|
|
@ -9,21 +23,368 @@
|
|||
|
||||
.logo img {
|
||||
position: absolute;
|
||||
top: 15vw;
|
||||
left: 20vw;
|
||||
width: 15vw;
|
||||
top: 22vw;
|
||||
right: 60vw;
|
||||
width: 10vw;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.5vw;
|
||||
font-size: 2.775vw;
|
||||
position: absolute;
|
||||
top: 15vw;
|
||||
left: 45vw;
|
||||
top: 20.5vw;
|
||||
left: 44vw;
|
||||
max-width: 40vw;
|
||||
letter-spacing: 0.2rem;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.015rem;
|
||||
|
||||
em {
|
||||
margin-bottom: -0.25vw;
|
||||
display: block;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// v2 era layout
|
||||
|
||||
.home-overview {
|
||||
background: url('../img/features-bg.png') no-repeat center 0;
|
||||
background-size: cover;
|
||||
text-align: center;
|
||||
margin-top: 5em;
|
||||
margin-bottom: 2em;
|
||||
padding-bottom: 4rem;
|
||||
|
||||
.large-3 {
|
||||
min-height: 280px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include klinicBold;
|
||||
color: $darkblue;
|
||||
border-bottom: 4px solid lighten($blue, 25%);
|
||||
margin: 1.5rem 0 2.5rem;
|
||||
display: inline-block;
|
||||
|
||||
.fa {
|
||||
color: $pink;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $darkblue;
|
||||
margin: 0.25em 0 0.5em;
|
||||
font-size: 1.5rem;
|
||||
padding-top: 90px;
|
||||
position: relative;
|
||||
@include klinicBold;
|
||||
|
||||
small {
|
||||
position: absolute;
|
||||
top: 8.667em;
|
||||
color: red;
|
||||
width: 10em;
|
||||
left: 50%;
|
||||
font-size: 0.6em;
|
||||
margin-left: -5em;
|
||||
}
|
||||
}
|
||||
|
||||
.columns {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -29px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.925rem;
|
||||
padding: 0 5%;
|
||||
line-height: 1.5;
|
||||
|
||||
code {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
background-color: white;
|
||||
|
||||
&:first-child {
|
||||
border-radius: 0.5em 0.5em 0 0;
|
||||
}
|
||||
&:last-child {
|
||||
padding-bottom: 0.5em;
|
||||
border-radius: 0 0 0.5em 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.get-helm {
|
||||
padding-bottom: 50px;
|
||||
border: 2px dashed $lightblue;
|
||||
padding: 2em;
|
||||
margin-bottom: 4em;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: " ";
|
||||
top: 0.667em;
|
||||
left: -0.25em;
|
||||
width: 100%;
|
||||
height: 375px;
|
||||
z-index: -5;
|
||||
background-color: $darkblue;
|
||||
transform: rotateX(12deg);
|
||||
opacity: 0.425;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 0.5em;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0.333em 0;
|
||||
}
|
||||
}
|
||||
|
||||
.get-charts {
|
||||
padding-left: 3.5rem;
|
||||
|
||||
h2 {
|
||||
margin: 2.5rem 0 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.helm-community {
|
||||
background-color: white;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 100px;
|
||||
color: $darkblue;
|
||||
background: linear-gradient( 0deg, #fff, #F7F7F7);
|
||||
|
||||
h2, p {
|
||||
color: $darkblue;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
& + p {
|
||||
margin-bottom: 4.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.helm-community-links {
|
||||
ul {
|
||||
background-color: white;
|
||||
padding: 1.5em 2.25em;
|
||||
border-radius: 1em;
|
||||
|
||||
li {
|
||||
font-size: 1.5rem;
|
||||
list-style: none;
|
||||
color: $darkblue;
|
||||
line-height: 2.5;
|
||||
padding-left: 2.25em;
|
||||
position: relative;
|
||||
@include klinicReg;
|
||||
|
||||
a {
|
||||
color: $darkblue;
|
||||
border-bottom: 3px solid $blue;
|
||||
|
||||
&:hover {
|
||||
color: $blue;
|
||||
border-color: $lightblue;
|
||||
}
|
||||
}
|
||||
|
||||
.fa {
|
||||
color: $blue;
|
||||
font-size: 2rem;
|
||||
width: 1.25em;
|
||||
padding-right: 0em;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0.525em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.helm-community-blocks {
|
||||
section {
|
||||
border: 1px solid $darkblue;
|
||||
border-radius: 1rem;
|
||||
margin: 0 0 2em;
|
||||
padding: 1.25rem 1.5rem;
|
||||
min-height: 125px;
|
||||
position: relative;
|
||||
|
||||
&:first-child {
|
||||
min-height: 175px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: $darkblue;
|
||||
font-size: 1.5em;
|
||||
@include klinicBold;
|
||||
margin: -0.25em 0 0.667em;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $darkblue;
|
||||
font-size: 1rem;
|
||||
float: left;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $darkblue;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 35%;
|
||||
display: inline-block;
|
||||
min-width: 200px;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 1em;
|
||||
}
|
||||
|
||||
.right {
|
||||
background-color: lighten($light1, 1.5%);
|
||||
text-align: center;
|
||||
padding: 1.25em 2em 1em;
|
||||
width: 33.3%;
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
right: 1em;
|
||||
|
||||
.fa {
|
||||
font-size: 2.75rem;
|
||||
float: left;
|
||||
display: inline-block;
|
||||
padding-right: 0.333em;
|
||||
color: $blue;
|
||||
}
|
||||
em {
|
||||
font-style: normal;
|
||||
font-size: 1.125em;
|
||||
display: inline-block;
|
||||
min-width: 50%;
|
||||
color: $blue;
|
||||
font-weight: bold;
|
||||
}
|
||||
small {
|
||||
display: inline-block;
|
||||
font-size: 0.667rem;
|
||||
min-width: 50%;
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.helm-contrib-logos {
|
||||
text-align: center;
|
||||
padding-bottom: 50px;
|
||||
|
||||
.helm-contrib-logos {
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
img {
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
max-width: 15%;
|
||||
}
|
||||
|
||||
.helm-logo {
|
||||
margin: 0 auto;
|
||||
margin-bottom: 2.25em;
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 3.5em 0 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: $lightblue;
|
||||
height: 2px;
|
||||
opacity: 0.25;
|
||||
width: 50%;
|
||||
margin: 1rem 25%;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $dark1;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
font-size: 1.333em;
|
||||
line-height: 2;
|
||||
letter-spacing: 0.025em;
|
||||
color: #9B9B9B;
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
color: $darkblue;
|
||||
border-bottom: 2px solid transparent;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 2px solid $blue;
|
||||
}
|
||||
}
|
||||
|
||||
small {
|
||||
padding-top: 1rem;
|
||||
font-size: 0.925em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.full-width {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.cncf {
|
||||
background: RGBA(246, 246, 246, 1.00);
|
||||
min-height: 5rem;
|
||||
margin-top: 4rem;
|
||||
text-align: center;
|
||||
padding-left: 0 !important;
|
||||
|
||||
img {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
max-width: 14rem;
|
||||
margin: 3rem 5%;
|
||||
}
|
||||
|
||||
p {
|
||||
float: right;
|
||||
margin: 3.5rem 5%;
|
||||
display: inline-block;
|
||||
font-family: helvetica;
|
||||
color: #777;
|
||||
|
||||
&:hover {
|
||||
color: $lightblue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -55,7 +55,6 @@ $sidebarWidth: 18.5rem;
|
|||
background-attachment: fixed;
|
||||
|
||||
&:after {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
|
@ -63,6 +62,7 @@ $sidebarWidth: 18.5rem;
|
|||
content: " ";
|
||||
background-color: lighten($blue1, 40%);
|
||||
left: $sidebarWidth;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -90,12 +90,12 @@ $sidebarWidth: 18.5rem;
|
|||
content: "Docs";
|
||||
@include klinicBold;
|
||||
position: absolute;
|
||||
top: 1.7rem;
|
||||
top: 1.75rem;
|
||||
left: 6rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $salmon;
|
||||
@include opacity(rgba($salmon, 0.5), white);
|
||||
|
||||
img, svg {
|
||||
transform: rotate(180deg);
|
||||
|
|
@ -106,8 +106,9 @@ $sidebarWidth: 18.5rem;
|
|||
|
||||
.navbar-menu {
|
||||
position: absolute;
|
||||
margin: 0 0 0 -2rem !important;
|
||||
left: $sidebarWidth;
|
||||
// margin: 0 0 0 -12.5rem !important;
|
||||
left: 50%;
|
||||
margin: 0 0 0 ( -$sidebarWidth );
|
||||
}
|
||||
|
||||
.content-docs {
|
||||
|
|
|
|||
|
|
@ -61,6 +61,7 @@ $light1: lighten($light2, 2.5%);
|
|||
$darkgreen : #44A653;
|
||||
|
||||
$salmon : #F99EAC;
|
||||
$salmonl : #F8DCDF;
|
||||
|
||||
$lightpink : #FF7590;
|
||||
$lightblue : #7FCCF0;
|
||||
|
|
@ -180,6 +181,14 @@ $mono: "Space Mono", "Courier New", monaco, monospace;
|
|||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
@mixin opacity($color, $background) {
|
||||
$percent: alpha($color) * 100%;
|
||||
$opaque: opacify($color, 1);
|
||||
$solid-color: mix($opaque, $background, $percent);
|
||||
background-color: $solid-color;
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
/**
|
||||
* Media query breakpoints
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -12,39 +12,39 @@ Helm
|
|||
{{ partial "nav-fixed.html" . }}
|
||||
</header>
|
||||
|
||||
<div id="helm" class="home">
|
||||
<section class="home-intro hero">
|
||||
<article>
|
||||
<a href="/" class="logo">
|
||||
<img src="/img/helm.svg" alt="Helm" />
|
||||
</a>
|
||||
<h1>
|
||||
{{ T "main_title" }}
|
||||
</h1>
|
||||
<h2>
|
||||
{{ T "main_subtitle" | markdownify }}
|
||||
</h2>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="billboard">
|
||||
<div class="container">
|
||||
<h1>
|
||||
{{ T "main_title" }}
|
||||
</h1>
|
||||
<section class="home-overview">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<h2>
|
||||
{{ T "main_subtitle" | markdownify }}
|
||||
{{ T "main_what_is_helm_title" }}
|
||||
</h2>
|
||||
</div>
|
||||
<div id="boat"></div>
|
||||
</section>
|
||||
|
||||
<div class="container content">
|
||||
<div class="row">
|
||||
<div class="small-12 medium-6 columns">
|
||||
<h2>
|
||||
{{ T "main_what_is_helm_title" }}
|
||||
</h2>
|
||||
<p>
|
||||
{{ T "main_what_is_helm_description" | markdownify }}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
{{ T "main_what_is_helm_description" | markdownify }}
|
||||
</p>
|
||||
<p class="github-stats">
|
||||
<a class="github-button" href="https://github.com/helm/helm" data-size="large" data-show-count="true" aria-label="Star helm/helm on GitHub">Star</a>
|
||||
|
||||
<a class="github-button" href="https://github.com/helm/helm/subscription" data-size="large" data-show-count="true" aria-label="Watch helm/helm on GitHub">Watch</a>
|
||||
|
||||
<a class="github-button" href="https://github.com/helm/helm/fork" data-size="large" data-show-count="true" aria-label="Fork helm/helm on GitHub">Fork</a>
|
||||
</p>
|
||||
|
||||
<p class="github-stats">
|
||||
<a class="github-button" href="https://github.com/helm/helm" data-size="large" data-show-count="true" aria-label="Star helm/helm on GitHub">Star</a>
|
||||
|
||||
<a class="github-button" href="https://github.com/helm/helm/subscription" data-size="large" data-show-count="true" aria-label="Watch helm/helm on GitHub">Watch</a>
|
||||
|
||||
<a class="github-button" href="https://github.com/helm/helm/fork" data-size="large" data-show-count="true" aria-label="Fork helm/helm on GitHub">Fork</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
|
|
@ -148,8 +148,9 @@ Helm
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{{ partial "footer-links.html" . }}
|
||||
{{ partial "footer.html" . }}
|
||||
|
||||
{{ partial "footer-links.html" . }}
|
||||
</div> <!-- / #helm .page-home -->
|
||||
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<section class="container">
|
||||
</div>
|
||||
<section class="container footer-links">
|
||||
<div class="columns clearfix">
|
||||
<dl class="column">
|
||||
<dt><a href="https://helm.sh">Helm Project</a></dt>
|
||||
|
|
@ -18,18 +19,17 @@
|
|||
|
||||
<dl class="column">
|
||||
<dt><a href="https://github.com/helm/community/blob/master/communication.md">Development</a></dt>
|
||||
<dd><a href="https://kubernetes.slack.com/messages/C51E88VDG">#helm-dev</a> <em>(K8s)</em></dd>
|
||||
<dd><a href="https://kubernetes.slack.com/messages/C51E88VDG">#helm-dev</a> <em>(slack)</em></dd>
|
||||
<dd><a href="https://github.com/helm/helm/blob/master/CONTRIBUTING.md">Contributing Guide</a></dd>
|
||||
<dd><a href="https://github.com/helm/helm/blob/master/OWNERS">Maintainers</a></dd>
|
||||
<dd><a href="https://github.com/helm/community/blob/master/communication.md#meetings">Weekly Meetings</a></dd>
|
||||
</dl>
|
||||
|
||||
|
||||
<dl class="column">
|
||||
<dt><a href="https://github.com/helm/community">Community Resources</a></dt>
|
||||
<dd><a href="https://cloud-native.slack.com/messages/CGF207RB5" title="#helm-users on Slack">#helm</a> <em>(CNCF)</em></dd>
|
||||
<dd><a href="https://kubernetes.slack.com/messages/C0NH30761" title="#helm-users on Slack">#helm-users</a> <em>(K8s)</em></dd>
|
||||
<dd><a href="https://github.com/cncf/artwork/tree/master/projects/helm">Logo & Branding</a></dd>
|
||||
<dd><a href="https://kubernetes.slack.com/messages/C0NH30761" title="#helm-users on Slack">#helm-users</a> <em>(slack)</em></dd>
|
||||
<dd><a href="https://lists.cncf.io/g/cncf-helm/topics">Mailing List</a></dd>
|
||||
<dd><a href="https://github.com/cncf/artwork/tree/master/projects/helm">Logos</a> & <a href="https://github.com/helm/community/tree/master/art">Art</a></dd>
|
||||
<dd><a href="https://twitter.com/helmpack">Twitter</a></dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -21,10 +21,10 @@
|
|||
{{ end }}
|
||||
|
||||
{{ if $isDoc }}
|
||||
<script async src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js" onload="docsearch({
|
||||
<!-- <script async src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js" onload="docsearch({
|
||||
apiKey: '8bca76b0664b04581dc9f9854e844a90',
|
||||
indexName: 'helm',
|
||||
inputSelector: '#q',
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
})"></script>
|
||||
})"></script> -->
|
||||
{{ end }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue