diff --git a/.gitmodules b/.gitmodules index 4a9058b790f..2ce0e24fb65 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,3 +1,3 @@ [submodule "website/themes/docsy"] path = website/themes/docsy - url = https://github.com/google/docsy.git + url = https://github.com/asmacdo/docsy.git diff --git a/website/assets/scss/_footer.scss b/website/assets/scss/_footer.scss new file mode 100644 index 00000000000..63d1583f54a --- /dev/null +++ b/website/assets/scss/_footer.scss @@ -0,0 +1,103 @@ +.of-footer-main { + background: var(--of--color-brand--300); + color: var(--of--color-white--100); + position: relative; + width: 100%; + @media (min-width: $ov--breakpoint--lg) { + display: grid; + grid-template-columns: minmax(50%, 600px) 1fr; + grid-gap: var(--of--spacer--xl); + grid-template-areas: + "meta social" + "copy copy " + ; + + } + &:before { + content:''; + height: 5px; + width: 100%; + position: absolute; + top: 0; + left: 0; + background: linear-gradient(to right, var(--of--color-brand--50) 25%, var(--of--color-brand--100) 25%, var(--of--color-brand--100) 50%, var(--of--color-brand--100) 50%, var(--of--color-brand--200) 50%, var(--of--color-brand--200) 75%, var(--of--color-brand--300) 75%); + } + padding-top: var(--of--spacer--2xl); + .of-heading { + margin-bottom: var(--of--spacer--sm); + } + &__meta { + grid-area: meta; + padding: 0 var(--of--spacer--lg) var(--of--spacer--lg) var(--of--spacer--lg); + & > *:not(:last-child){ + margin-bottom: var(--of--spacer--sm); + } + .of-link-list { + flex-direction: column; + @media (min-width: $ov--breakpoint--lg) { + flex-direction: row; + } + } + @media (min-width: $ov--breakpoint--lg) { + flex-direction: row; + padding: 0 0 0 var(--of--spacer--2xl); + .of-link-list__li { + + &:not(:last-of-type) { + margin-right: var(--of--spacer--sm); + border-right: 1px solid var(--of--color-brand--100); + padding-right: var(--of--spacer--sm); + } + } + .of-link-list__a { + text-decoration: underline; + } + } + img { + max-width: 200px; + } + } + &__social { + grid-area: social; + padding:var(--of--spacer--lg); + @media (min-width: $ov--breakpoint--lg){ + padding:0; + } + .of-link-list { + &__li { + margin-right: var(--of--spacer--md); + display: flex; + } + &__a { + display: flex; + align-items: center; + font-size: 2rem; + &:hover, &:active, &:focus { + text-decoration: none; + opacity: .8; + } + } + } + input { + margin-bottom: var(--of--spacer--lg); + border-radius: var(--of--BorderRadius--lg); + border: none; + text-indent: 1ch; + min-width: 250px; + } + } + &__copyright { + grid-area: copy; + display: flex; + color: var(--of--color-white--100); + padding: var(--of--spacer--xl); + background: var(--of--color-black--300); + .of-link-list__li { + margin-left: var(--of--spacer--sm); + } + } + .of-link-list { + display: flex; + flex-wrap: wrap; + } +} \ No newline at end of file diff --git a/website/assets/scss/_functions.scss b/website/assets/scss/_functions.scss new file mode 100644 index 00000000000..c9181bd94bd --- /dev/null +++ b/website/assets/scss/_functions.scss @@ -0,0 +1,4 @@ +$font_size: 16; +@function rem($pixels){ + @return $pixels / $font_size + rem; +} \ No newline at end of file diff --git a/website/assets/scss/_global.scss b/website/assets/scss/_global.scss new file mode 100644 index 00000000000..610d94473ba --- /dev/null +++ b/website/assets/scss/_global.scss @@ -0,0 +1,608 @@ +body { + margin-top: 100px; + @media (min-width: $ov--breakpoint--lg) { + margin-top: 72px; + } +} + +.of-link-list { + display: flex; + a { + color: var(--of--color-white--100); + } +} + +.of-link { + &--inline { + white-space: nowrap; + } +} + +.of-list { + list-style-type: disc; + margin-left: var(--of--spacer--lg); +} + +ol { + margin-left: var(--of--spacer--md); + list-style: none; + counter-reset: ordered-list-counter; + li { + counter-increment: ordered-list-counter; + position: relative; + padding-left: var(--of--spacer--lg); +} + li::before { + content: counter(ordered-list-counter) ". "; + position: absolute; + left: 0; + top: 0; +} +} +.of-section-separator { + border-bottom: 2px solid var(--of--color-white--150); +} + +.of-button { + border-radius: var(--of--BorderRadius--sm); + padding: var(--of--spacer--sm) var(--of--spacer--lg); + display: inline-flex; + border: var(--of--BorderWidth--sm) solid transparent; + transition: all .25s linear; + &:not(.of-button--tertiary){ + @media (min-width: $ov--breakpoint--lg) { + padding: var(--of--spacer--md) var(--of--spacer--xl); + } + } + &--primary { + background: var(--of--color-brand--200); + color: var(--of--color-white--100); + &:hover,&:active,&:focus { + + background: var(--of--color-brand--300); + } + } + &--secondary { + background: rgba(255, 255, 255, .12); + color: var(--of--color-white--100); + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + &:hover,&:active,&:focus { + color: var(--of--color-brand--200); + background: var(--of--color-white--100); + } + } + + &--tertiary { + padding-left: 0; + display: flex; + align-content: center; + max-width: max-content; + color: var(--of--color-brand--200); + .of-button__icon { + margin-left: var(--of--spacer--md); + width: 20px; + height: 20px; + path { + fill: var(--of--color-brand--200); + } + } + &:hover,&:active,&:focus { + opacity: .8; + color: var(--of--color-brand--100); + .of-button__icon { + path { + fill: var(--of--color-brand--100); + } + } + } + } + &:hover,&:active,&:focus { + text-decoration: none; + } +} + + +.of-section-page-develop { + & > .of-heading { + color: var(--of--color-brand--100); + padding: var(--of--spacer--lg); + @media (min-width: $ov--breakpoint--lg) { + padding:var(--of--spacer--2xl) var(--of--spacer--3xl) var(--of--spacer--md); + } + } + +} + +.of-section-whats-operator { + padding: var(--of--spacer--lg); + @media (min-width: $ov--breakpoint--lg) { + padding:var(--of--spacer--xl) var(--of--spacer--3xl); + display:grid; + grid-template-columns: 1fr 1fr; + grid-template-areas: 'content video'; + grid-gap: var(--of--spacer--sm); + } + .of-heading { + color: var(--of--color-brand--100); + } + &__content{ + grid-area: content; + & *:not(.of-button) { + margin-bottom: var(--of--spacer--md); + } + } + &__video { + grid-area: video; + } + +} + +.of-section__contribute { + padding: var(--of--spacer--lg); + display: grid; + gap: var(--of--spacer--xl); + @media (min-width: $ov--breakpoint--lg) { + grid-template-columns: 1fr 4fr; + align-items: start; + gap: var(--of--spacer--2xl); + padding: var(--of--spacer--3xl); + &__content { + max-width: 60vw; + } + } + background: linear-gradient(to bottom, rgba(240,240,240,1) 0%, rgba(255,255,255,1) 100%); + &__header { + justify-self: start ; + padding:var(--of--spacer--sm) var(--of--spacer--md); + display: inline-flex; + align-items: center; + border: 3px solid var(--of--color-brand--300); + .of-heading { + color: var(--of--color-brand--300); + text-transform: uppercase; + font-weight: 800; + margin: 0; + } + svg { + margin-left: var(--of--spacer--md); + } + } + +} + +.of-section--largetext { + margin: var(--of--spacer--lg); + @media (min-width: $ov--breakpoint--lg) { + margin: var(--of--spacer--2xl) var(--of--spacer--3xl); + } + .of-heading { + text-transform: uppercase; + color: var(--of--color-brand--200); + } + &__item { + display: grid; + grid-template-columns: 1fr; + grid-template-areas: + 'text' + 'title' + 'content' + 'action'; + margin-top: var(--of--spacer--md); + @media (min-width: $ov--breakpoint--lg) { + grid-template-columns: 1fr 1fr; + grid-template-rows: max-content max-content; + margin: calc(var(--of--spacer--2xl) * 2) 0 calc(var(--of--spacer--3xl) * 2); + column-gap: var(--of--spacer--xl); + grid-template-areas: + 'title text' + 'content text' + 'action text' + ; + &:nth-of-type(odd) { + & > *:not(.large-text) { + margin-right: var(--of--spacer--lg); + } + } + &:nth-of-type(even) { + grid-template-areas: + 'text title' + 'text content' + 'text action' + ; + & > *:not(.large-text) { + margin-left: var(--of--spacer--lg); + } + .large-text { + justify-self: end; + } + } + } + + &:nth-of-type(1){ + .of-heading { + color: var(--of--color-brand--100); + } + .large-text { + color: var(--of--color-brand--100); + } + } + &:nth-of-type(2){ + .of-heading { + color: var(--of--color-brand--200); + } + .large-text { + color: var(--of--color-brand--200); + } + } + &:nth-of-type(3){ + .of-heading { + color: var(--of--color-brand--300); + } + .large-text { + color: var(--of--color-brand--300); + } + } + .of-heading { + margin-bottom: var(--of--spacer--md); + grid-area: title; + } + .of-section--largetext__content { + grid-area: content; + max-width: 550px; + } + .of-button { + grid-area: action; + } + .large-text { + color: var(--of--color-brand--100); + + font-weight: 800; + @media (min-width: $ov--breakpoint--lg) { + text-transform: uppercase; + justify-self: start; + text-align: right; + grid-area: text; + font-size: 5rem; + margin-top: var(--of--spacer--md); + span { + width: 100%; + display: block; + line-height: 0; + margin-bottom: calc(var(--of--spacer--2xl) *2.25); + } + } + + } + } + +} + +.of-docs-list { + padding: var(--of--spacer--3xl); +} + +.of-masthead--subpage { + background: var(--of--color-black--100) url("/build/images/bg-masthead-green.svg") no-repeat; + background-size: 250px; + background-position: 115% 0; + min-height:135px; + display: flex; + align-items: center; + padding: 0 var(--of--spacer--lg); + @media (min-width: $ov--breakpoint--lg) { + background-size: 400px auto; + background-position: right -85px; + padding: 0 calc(var(--of--spacer--2xl) + var(--of--spacer--xl)); + } + + +} + +.of-masthead { + .of-heading { + color: var(--of--color-white--100); + } +} + +.of-capability-content, .of-capability-level__item { + width: 100%; + padding: 0 var(--of--spacer--xl); + + @media (min-width: $ov--breakpoint--lg) { + padding: 0 calc(var(--of--spacer--2xl) + var(--of--spacer--xl)) var(--of--spacer--2xl) calc(var(--of--spacer--2xl) + var(--of--spacer--xl)); + } + & > .of-heading { + margin-bottom: var(--of--spacer--md); + color: var(--of--color-brand--200); + } + &__model { + margin-bottom: var(--of--spacer--xl); + @media (min-width: $ov--breakpoint--lg) { + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + display: grid; + h4, p { + padding: 0 var(--of--spacer--sm); + } + } + width: 100%; + max-width: 1250px; + li { + position: relative; + margin-bottom: var(--of--spacer--md); + @media (min-width: $ov--breakpoint--lg) { + padding-top: calc(var(--of--spacer--3xl) + var(--of--spacer--sm)); + } + } + h3 { + color: var(--of--color-white--100); + background: var(--of--color-brand--300); + min-width: max-content; + padding: var(--of--spacer--sm); + display: flex; + overflow: hidden; + width: 100%; + text-transform: capitalize; + letter-spacing: -1px; + @media (min-width: $ov--breakpoint--lg) { + padding: 0 var(--of--spacer--2xl) 0 var(--of--spacer--2xl) ; + position: absolute; + top: 0; + span { + position: relative; + z-index: 10000; + width: 100%; + background: inherit; + padding: var(--of--spacer--md) 0; + } + &:before { + content:''; + position: absolute; + right: 15px; + z-index: 1000; + align-self: center; + border-right: 10px solid var(--of--color-white--100); + border-bottom: 10px solid var(--of--color-white--100); + background: inherit; + width: 70px; + height: 70px; + transform: rotate(-45deg); + } + &:after { + content:''; + z-index: 1; + height: 100%; + top: 0; + background: inherit; + position: absolute; + } + } + } + @media (min-width: $ov--breakpoint--lg) { + li:not(:first-child) { + h4, p { + margin-left: calc(var(--of--spacer--lg) * -1); + } + p{ + padding-right: var(--of--spacer--xl); + } + } + li:not(:last-child) { + h3:after { + left: 100px; + width: 150px; + } + } + } + li:first-child { + @media (min-width: $ov--breakpoint--lg) { + p { + padding-right: var(--of--spacer--2xl); + } + } + h3 { + background: #6cb1b6; + &:after { + background:#318c96; + } + } + } + li:nth-child(2) { + h3 { + background:#318c96; + &:after { + background:#0e6875; + } + } + } + li:nth-child(3) { + h3 { + background:#0e6875; + &:after { + background:#0a4b53; + } + } + } + li:nth-child(4) { + h3 { + background:#0a4b53; + &:after { + background:#052f35; + } + } + } + li:last-child { + h3 { + background: #052f35; + &:after { + right: -5px; + width: 40px; + background: var(--of--color-white--100); + } + } + } + } + h4 { + text-transform: capitalize; + margin: var(--of--spacer--md) 0; + } + +} + +.of-page--faq { + h3 { + color: var(--of--color-brand--200); + text-transform: uppercase; + font-weight: 800; + letter-spacing: 2px; + &:not(:first-of-type) { + margin-top: var(--of--spacer--xl); + padding-top: var(--of--spacer--xl); + border-top: 2px solid var(--of--color-white--200); + } + } + & > * { + margin-bottom: var(--of--spacer--md); + } +} + +.of-page--capabilities { + .of-capability-content, .of-capability-level__item { + margin: var(--of--spacer--2xl) 0 var(--of--spacer--sm) ; + padding-bottom: var(--of--spacer--2xl); + } +} + + .of-capability-level__table { + border: 1px solid var(--of--color-white--200); + border-collapse: collapse; + margin: var(--of--spacer--md) 0 var(--of--spacer--xl); + width: 100%; + table-layout: fixed; + &__level-1 { + th, td::before { + background: #6cb1b6; + } + } + &__level-2 { + th, td::before { + background: #318c96; + } + } + &__level-3 { + th, td::before { + background: #0e6875; + } + } + &__level-4 { + th, td::before { + background: #0a4b53; + } + } + &__level-5 { + th, td::before { + background: #052f35; + } + } + + @media (min-width: $ov--breakpoint--lg) { + tr { + border: 1px solid var(--of--color-white--200); + td:first-of-type { + border-right: 2px solid var(--of--color-white--200); + } + & > * { + padding: var(--of--spacer--md); + } + } + + th { + padding: var(--of--spacer--md) var(--of--spacer--lg); + color: var(--of--color-white--100); + text-transform: uppercase; + &:first-of-type { + border-right: 2px solid var(--of--color-white--200); + } + } + } + @media (max-width: $ov--breakpoint--lg) { + + border: 0; + + thead { + border: none; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + } + + tr { + display: block; + margin-bottom: .625em; + } + + td { + display: block; + margin-bottom: var(--of--spacer--md); + & > * { + padding: 0 var(--of--spacer--md); + vertical-align: top; + } + } + + td::before { + content: attr(data-label); + font-weight: bold; + text-transform: uppercase; + display: block; + margin-bottom: var(--of--spacer--md); + background: var(--of--color-brand--200); + color: var(--of--color-white--100); + padding: var(--of--spacer--sm) var(--of--spacer--md); + } + + } + a[aria-describedby="footnote-label"] { + counter-increment: footnotes; /* 1 */ + text-decoration: none; /* 2 */ + color: inherit; /* 2 */ + cursor: default; /* 2 */ + outline: none; /* 2 */ + } + + + a[aria-describedby="footnote-label"]::after { + content: '[' counter(footnotes) ']'; /* 1 */ + vertical-align: super; /* 2 */ + font-size: 0.5em; /* 3 */ + margin-left: 2px; /* 4 */ + color: var(--of--color-brand--100); /* 5 */ + text-decoration: underline; /* 5 */ + cursor: pointer; /* 5 */ + } + + + a[aria-describedby="footnote-label"]:focus::after { + outline: thin dotted; + outline-offset: 2px; + } + } + + + + .of-capability-level__table__footnotes { + counter-reset: footnotes; + } + +.of-table-footnotes { + margin-bottom: var(--of--spacer--lg); +} + +.td-search-result { + padding: var(--of--spacer--xl); + max-width: 100vw; +} diff --git a/website/assets/scss/_header.scss b/website/assets/scss/_header.scss new file mode 100644 index 00000000000..f110df5b4e1 --- /dev/null +++ b/website/assets/scss/_header.scss @@ -0,0 +1,363 @@ +.of-header-main { + position: fixed; + top: 0; + min-height: 72px; + z-index: 10000; + display: grid; + grid-template-columns: max-content 1fr max-content; + align-items: center; + grid-template-areas: + "brand search search" + "nav nav nav"; + + @media (min-width: $ov--breakpoint--lg) { + display: flex; + align-items: center; + } + + background: var(--of--color-black--300); + width: 100%; + .of-brand { + grid-area: brand; + display: flex; + margin: var(--of--spacer--sm); + + @media (min-width: $ov--breakpoint--lg) { + &__picture { + min-width: 177px; + } + margin: 0 var(--of--spacer--xl); + } + } + .of-header-main__search { + grid-area: search; + width: 80%; + display: flex; + align-items: center; + justify-self: center; + @media (min-width: $ov--breakpoint--lg) { + width: auto; + margin: 0 var(--of--spacer--lg) 0 auto; + } + &__input { + border-radius: var(--of--BorderRadius--lg); + border: none; + width: 100%; + // padding: 0 var(--of--spacer--sm); + background: var(--of--color-white--100); + } + } +} + +.of-nav-main { + grid-area: nav; + width: 100%; + @media (min-width: $ov--breakpoint--lg) { + width: auto; +} +&__items { + display: flex; + justify-content: space-around; + +} + .of-link-list { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: min-content min-content; + @media (min-width: $ov--breakpoint--lg) { + display: flex; + margin: 0; + } + + &__li { + @media (min-width: $ov--breakpoint--lg) { + border: none; + } + border: 1px solid var(--of--color-black--200); + &:nth-of-type(even),&:nth-of-type(odd) { + border-left: none; + } + &:nth-of-type(even) { + border-right: none; + } + &:not(:last-of-type):not(:nth-last-child(-n+2)){ + border-bottom: none; + } + + } + &__a { + width: 100%; + display: inline-block; + position: relative; + padding: var(--of--spacer--xs) var(--of--spacer--md); + transition: background .25s linear; + color: var(--of--color-white--100); + min-height: 45px; + @media (min-width: $ov--breakpoint--lg) { + width: auto; + padding: var(--of--spacer--lg) .9vw; + &.of-m-active, &:focus, &:hover { + text-decoration: none; + background: var(--of--color-brand--100); + } + } + // &.has-dropdown { + // grid-area: link; + // } + + } + } +} + +// .of-nav-main__items { +// width: 100%; +// } + +// .of-nav-main__sub-item { +// width: 100%; +// &--heading { +// display: none; +// visibility: hidden; +// @media (min-width: $ov--breakpoint--lg) { +// display: inline-block; +// font-weight: var( --of--FontWeight--200); +// visibility: visible; +// margin-bottom: var(--of--spacer--xs); +// } +// } +// &__link { +// color: var(--of--color-white--100); + +// display: block; +// padding: var(--of--spacer--xs) 0; +// @media (min-width: $ov--breakpoint--lg) { +// // color: var(--of--color-black--200); +// padding: 0 0 var(--of--spacer--xs); +// } +// } +// } + + +// .js .of-nav-main { +// clip: rect(0 0 0 0); +// max-height: 0; +// position: absolute; +// display: block; +// overflow: hidden; +// zoom: 1; +// } + +// .of-nav-main.opened { +// max-height: 9999px; +// } + +// .nav-toggle { +// -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +// -webkit-touch-callout: none; +// -webkit-user-select: none; +// -moz-user-select: none; +// -ms-user-select: none; +// -o-user-select: none; +// user-select: none; +// grid-area: toggle; +// justify-self: end; +// } + +// @media (min-width: $ov--breakpoint--lg) { +// .js .of-nav-main { +// position: relative; +// } +// .js .of-nav-main.closed { +// max-height: none; +// } +// .nav-toggle { +// display: none; +// } +// } + +// .screen-reader-text { +// clip: rect(1px, 1px, 1px, 1px); +// position: absolute !important; +// height: 1px; +// width: 1px; +// overflow: hidden; +// } + +// .screen-reader-text:focus { +// background-color: var(--of--color-white--200); +// box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); +// clip: auto !important; +// color: var(--of--color-brand--100); +// display: block; +// font-size: 14px; +// font-size: 0.875rem; +// font-weight: bold; +// height: auto; +// left: 5px; +// line-height: normal; +// padding: 15px 23px 14px; +// text-decoration: none; +// top: 5px; +// width: auto; +// z-index: 100000; +// } + +// .of-nav-main, +// .of-nav-main__items{ +// list-style: none; +// display:flex; +// flex-wrap:wrap; +// } + +// .of-nav-main__item { +// width: 100%; +// @media (min-width: $ov--breakpoint--lg) { +// width: auto; +// position: relative; +// } +// } + +// .of-nav-main__sub-items { +// width:100%; +// padding: 0 var(--of--spacer--md); +// } + +// /* ------------------------------------------ +// NAV TOGGLE STYLES +// --------------------------------------------- */ + +// .nav-toggle { +// background:black url('/images/sprite.svg') no-repeat 10px -23px; +// border: none; +// height: 45px; +// width: 45px; +// -webkit-font-smoothing: antialiased; +// -moz-osx-font-smoothing: grayscale; +// -webkit-touch-callout: none; +// -webkit-user-select: none; +// -moz-user-select: none; +// -ms-user-select: none; +// user-select: none; +// overflow: hidden; +// transition: none; + +// &[aria-expanded="true"] { +// background-position: 10px 15px; +// } +// } + + + +// /* ------------------------------------------ +// MULTIPLE LEVELS +// --------------------------------------------- */ + +// // .of-nav-main a:hover, +// // .of-nav-main li.focus > a { +// // background-color: var(--of--color-brand--100); +// // } + +// @media (max-width: $ov--breakpoint--lg) { +// .js .of-nav-main { +// visibility: hidden; +// } +// .js .of-nav-main.opened { +// visibility: visible; +// } +// /* Enable active class to let the navigation expand over the calculated max height. */ +// .js .of-nav-main.multiple-level-nav.opened.dropdown-active { +// max-height: 9999px !important; +// } +// .js .of-nav-main.multiple-level-nav .sub-menu { +// clip: rect(0 0 0 0); +// max-height: 0; +// position: absolute; +// display: none; +// /* This way you don't have focus on sub menu items unless you open the sub menu. */ +// overflow: hidden; +// zoom: 1; +// } +// .js .of-nav-main.multiple-level-nav .sub-menu.toggled { +// display: block; +// max-height: 9999px; +// position: relative; +// } +// .js .of-nav-main__item { +// position: relative; +// } +// .js .dropdown { +// display: grid; +// grid-template-columns: 1fr 1fr; +// grid-template-areas: +// "link action" +// "list list" +// ; +// } +// .js .of-nav-main .dropdown-toggle { +// color: #fff; +// content: ""; +// height: 45px; +// width: 45px; +// text-transform: lowercase; +// background: none; +// grid-area: action; +// justify-self: end; +// } +// .js .of-nav-main .dropdown-toggle:hover, +// .js .of-nav-main .dropdown-toggle:focus, +// .js .of-nav-main .dropdown-toggle:active { +// background-color: #fff; +// color:var(--of--color-brand--100); +// } +// .js .of-nav-main .dropdown-toggle:after { +// content: "+"; +// font-size: 20px; +// } +// .js .of-nav-main .dropdown-toggle.toggled:after { +// content: "-"; +// } +// } + +// @media (min-width: $ov--breakpoint--lg) { +// .dropdown-toggle { +// display: none; +// } +// } + +// @media (min-width: $ov--breakpoint--lg) { +// .of-nav-main { +// position: relative; +// } +// .js .of-nav-main, +// .of-nav-main__sub-items { +// max-height: none; +// overflow: visible; +// } + +// .has-dropdown:after { +// content: ""; +// margin-right: calc(var(--of--spacer--sm) * -1); +// margin-left: var(--of--spacer--sm); +// width: 12px; +// height: 10px; +// background: url('/images/sprite.svg') no-repeat 0 -67px; + +// } + +// .of-nav-main__sub-items { +// background: var(--of--color-black--200); +// padding: var(--of--spacer--md); +// min-width: 200px; +// position: absolute; +// top: 85px; +// left: -999em; +// z-index: 99999; +// } + +// .of-nav-main__item:hover > .of-nav-main__sub-items, +// .of-nav-main__item.focus > .of-nav-main__sub-items { +// top: 72px; +// left: 0; + +// } +// } \ No newline at end of file diff --git a/website/assets/scss/_homepage.scss b/website/assets/scss/_homepage.scss new file mode 100644 index 00000000000..dce41959d8e --- /dev/null +++ b/website/assets/scss/_homepage.scss @@ -0,0 +1,160 @@ +.of-masthead--home { + background: var(--of--color-black--100) url("/build/images/bg-masthead-green.svg") no-repeat; + background-position: -22vw -30vw ; + background-size: 70% auto; + padding: calc(2 * var(--of--spacer--2xl)) var(--of--spacer--md) var(--of--spacer--xl); + @media (min-width: $ov--breakpoint--sm) { + background-position:-35vw 50.5%; + background-size: 100% auto; + display: grid; + grid-template-columns: 2fr 1fr 1fr 1fr; + grid-template-areas: + ". title title title" + ". content content content" + ". action-1 action-2 ." + } + @media (min-width: $ov--breakpoint--lg) { + padding: var(--of--spacer--2xl) calc(var(--of--spacer--3xl) + var(--of--spacer--md)) var(--of--spacer--2xl); + } + .of-heading { + color: var(--of--color-white--100); + letter-spacing: normal; + } + &__title { + display: flex; + flex-direction: column; + line-height: 3rem; + font-weight: normal; + grid-area: title; + span { + &:first-of-type { + font-size: 2.625rem; + } + &:last-of-type { + font-size: 3.5625rem; + } + } + } + &__content { + @media (min-width: $ov--breakpoint--sm) { + max-width: 55vw; + margin: var(--of--spacer--xl) 0; + } + grid-area: content; + margin: var(--of--spacer--md) 0; + text-transform: none; + } + .of-button { + justify-self: start; + white-space: nowrap; + &:first-of-type { + grid-area: action-1; + // margin-bottom: var(--of--spacer--md); + } + &:last-of-type { + grid-area: action-2; + } + } +} + +.of-section-page-intro { + display: flex; + flex-wrap: wrap; + + &__header { + background: var(--of--color-white--200); + padding: var(--of--spacer--lg); + + @media (min-width: $ov--breakpoint--lg) { + padding: var(--of--spacer--2xl) 0 var(--of--spacer--2xl) calc(var(--of--spacer--2xl) + var(--of--spacer--xl)); + &--overlay { + padding-bottom: calc(var(--of--spacer--3xl) + var(--of--spacer--3xl)); + margin-bottom: calc(calc(var(--of--spacer--3xl) + var(--of--spacer--md) + 1px) * -1); + } + } + width: 100%; + & > * { + @media (min-width: $ov--breakpoint--lg) { + max-width: 55vw; + } + } + .of-heading { + color: var(--of--color-brand--200); + } + } + .of-heading { + margin-bottom: var(--of--spacer--sm); + } + &__content { + background: var(--of--color-white--100); + margin: var(--of--spacer--lg); + padding-bottom: var(--of--spacer--lg); + &:not(&--overlay){ + &__columns { + padding: var(--of--spacer--lg); + } + } + + @media (min-width: $ov--breakpoint--lg) { + margin: var(--of--spacer--xl) calc(var(--of--spacer--2xl) + var(--of--spacer--xl)) var(--of--spacer--2xl) calc(var(--of--spacer--2xl) + var(--of--spacer--xl)); + &--overlay { + border: 1px solid var(--of--color-white--200); + padding: var(--of--spacer--lg); + margin-top: 0; + } + &__columns { + column-count: 2; + column-gap: calc(var(--of--spacer--2xl) * 2); + margin-bottom: calc(var(--of--spacer--md) * -1); + padding-bottom: var(--of--spacer--xl); + > * { + margin-bottom: var(--of--spacer--md); + } + } + + } + } + &__footer { + padding: 0 var(--of--spacer--xl) var(--of--spacer--xl); + @media (min-width: $ov--breakpoint--lg) { + padding: 0 calc(var(--of--spacer--2xl) + var(--of--spacer--xl)) var(--of--spacer--2xl) calc(var(--of--spacer--2xl) + var(--of--spacer--xl)); + } + } + &__items { + @media (min-width: $ov--breakpoint--lg) { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + margin: 0 var(--of--spacer--2xl); + } + + } + + &__item { + background: var(--of--color-white--100); + &__build { + .of-heading { + background: var(--of--color-brand--100); + } + } + &__manage { + .of-heading { + background: var(--of--color-brand--200); + } + } + &__discover { + .of-heading { + background: var(--of--color-brand--300); + } + } + &__content { + padding: var(--of--spacer--lg); + display: flex; + flex-direction: column; + } + .of-heading { + color: var(--of--color-white--100); + padding:var(--of--spacer--lg) var(--of--spacer--md); + } + } + +} \ No newline at end of file diff --git a/website/assets/scss/_reset.scss b/website/assets/scss/_reset.scss new file mode 100644 index 00000000000..406e257eac6 --- /dev/null +++ b/website/assets/scss/_reset.scss @@ -0,0 +1,129 @@ +// Reset + html, + body, + p, + ol, + ul, + li, + dl, + dt, + dd, + blockquote, + figure, + fieldset, + legend, + textarea, + pre, + iframe, + hr, + h1, + h2, + h3, + h4, + h5, + h6 { + padding: 0; + margin: 0; + } + + html, + body { + height: 100%; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + font-size: 100%; + font-weight: normal; + } + + ul { + list-style: none; + } + + button, + input, + optgroup, + select, + textarea { + margin: 0; + font-family: inherit; + font-size: 100%; + line-height: 1.5; + } + + img, + embed, + iframe, + object, + audio, + video { + max-width: 100%; + height: auto; + } + + iframe { + border: 0; + } + + table { + border-spacing: 0; + border-collapse: collapse; + } + + td, + th { + padding: 0; + text-align: left; + } + + *, + *::before, + *::after { + box-sizing: border-box; + } + + + body { + font-family:var(--of--font-family); + font-size: var(--of--FontSize--sm); + font-weight: normal; + line-height: 1.5; + text-align: left; + color: var(--of--color-black--100); + } + + a{ + color: var(--of--color-brand--100); + text-decoration: none; + &:hover { + text-decoration: underline; + } + } + // a, a:before, a:after, button, button:before, button:after { + // transition: var(--of--animation); + // } + button, + a { + cursor: pointer; + } + + button, + [type="button"], + [type="reset"], + [type="submit"] { + // Remove the inner border and padding in Firefox. + &::-moz-focus-inner { + padding: 0; + border-style: none; + } + + // Restore the focus styles unset by the previous rule. + &:-moz-focusring { + outline: 1px dotted ButtonText; + } + } \ No newline at end of file diff --git a/website/assets/scss/_styles_project.scss b/website/assets/scss/_styles_project.scss new file mode 100644 index 00000000000..45537800489 --- /dev/null +++ b/website/assets/scss/_styles_project.scss @@ -0,0 +1,75 @@ +@import "../../themes/docsy/assets/scss/support/functions"; +@import "../../themes/docsy/assets/scss/variables"; +@import "../../themes/docsy/assets/scss/support/mixins"; + +@import "../../themes/docsy/assets/vendor/bootstrap/scss/bootstrap"; + +@import "../../themes/docsy/assets/vendor/Font-Awesome/scss/fontawesome.scss"; +@import "../../themes/docsy/assets/vendor/Font-Awesome/scss/solid.scss"; +@import "../../themes/docsy/assets/vendor/Font-Awesome/scss/brands.scss"; + +@import "../../themes/docsy/assets/scss/support/utilities"; +@import "../../themes/docsy/assets/scss/colors"; +@import "../../themes/docsy/assets/scss/boxes"; +@import "../../themes/docsy/assets/scss/blog"; +@import "../../themes/docsy/assets/scss/code"; +@import "../../themes/docsy/assets/scss/nav"; +@import "../../themes/docsy/assets/scss/sidebar-tree"; +@import "../../themes/docsy/assets/scss/sidebar-toc"; +@import "../../themes/docsy/assets/scss/buttons"; +@import "../../themes/docsy/assets/scss/breadcrumb"; +@import "../../themes/docsy/assets/scss/alerts"; +@import "../../themes/docsy/assets/scss/content"; +@import "../../themes/docsy/assets/scss/search"; +@import "../../themes/docsy/assets/scss/main-container"; +@import "../../themes/docsy/assets/scss/blocks/blocks"; +@import "../../themes/docsy/assets/scss/section-index"; +@import "../../themes/docsy/assets/scss/pageinfo"; + +@if $td-enable-google-fonts { + @import url($web-font-path); +} + +footer { + min-height: 150px; + + @include media-breakpoint-down(md) { + min-height: 200px; + } +} + +// Adjust anchors vs the fixed menu. +@include media-breakpoint-up(md) { + .td-offset-anchor:target { + display: block; + position: relative; + top: -4rem; + visibility: hidden; + } + + h2[id]:before, h3[id]:before, h4[id]:before, h5[id]:before { + display: block; + content: " "; + margin-top: -5rem; + height: 5rem; + visibility: hidden; + } +} + + +@import "functions"; +@import "variables"; +@import "reset"; +@import "type"; + +//components +@import "header"; +@import "footer"; + +//layout +@import "homepage"; + +//global +@import "global"; + + diff --git a/website/assets/scss/_type.scss b/website/assets/scss/_type.scss new file mode 100644 index 00000000000..2516be7e558 --- /dev/null +++ b/website/assets/scss/_type.scss @@ -0,0 +1,47 @@ +//type +.of-heading { + color: var(--of--Color--brand--200); + text-transform: uppercase; + font-weight: 800; + letter-spacing: 2px; +} +.of-heading--secondary { + color: var(--of--color-brand--200); + margin-bottom: var(--of--spacer--md); +} +.of-heading--xs, .of-heading--sm { + font-size: var(--of--FontSize--xs); +} +.of-heading--md { + font-size: var(--of--FontSize--sm); +} +.of-heading--lg { + font-size: var(--of--FontSize--md); +} +.of-heading--xl { + font-size: var(--of--FontSize--md); +} +.of-heading--2xl { + font-size: var(--of--FontSize--lg); +} + +@media (min-width: $ov--breakpoint--lg) { + .of-heading--xs { + font-size: var(--of--FontSize--xs); + } + .of-heading--sm { + font-size: var(--of--FontSize--sm); + } + .of-heading--md { + font-size: var(--of--FontSize--md); + } + .of-heading--lg { + font-size: var(--of--FontSize--lg); + } + .of-heading--xl { + font-size: var(--of--FontSize--xl); + } + .of-heading--2xl { + font-size: var(--of--FontSize--2xl); + } +} \ No newline at end of file diff --git a/website/assets/scss/_variables.scss b/website/assets/scss/_variables.scss new file mode 100644 index 00000000000..8e24b7dd4d0 --- /dev/null +++ b/website/assets/scss/_variables.scss @@ -0,0 +1,78 @@ +:root { + //type + --of--font-family: 'overpass', sans-serif; + --of--FontSize--xs: .875rem; //14 + --of--FontSize--sm: 1rem; //16 + --of--FontSize--md: 1.125rem; //18 + --of--FontSize--lg: 1.375rem; //22 + --of--FontSize--xl: 1.5rem;//24 + --of--FontSize--2xl: 2.625rem; //40 + + //spacers + --of--spacer--xs: .25rem; //4 purple + --of--spacer--sm: .5rem; //8 light blue + --of--spacer--md: 1rem; //16 green + --of--spacer--lg: 1.5rem; //24 yellow + --of--spacer--xl: 2rem; //32 pink + --of--spacer--2xl: 3rem; //48 blue + --of--spacer--3xl: 4rem; //64 purple + + //color + --of--color-brand--50: #019600; + --of--color-brand--100: #017f00; + --of--color-brand--200: #026c01; + --of--color-brand--300: #015000; + --of--color-brand--400: #012f00; + --of--color-white--100: #FFF; + --of--color-white--150: #F0F0F0; + --of--color-white--200: #EDEDED; + --of--color-blue--100: #dfe7f4; + --of--color-blue--200: #cad3e5; + --of--color-grey--100: #979797; + --of--color-grey--200: #666; + --of--color-black--100: #040404; + --of--color-black--200: #202020; + --of--color-black--300: #000; + + //transparencies + --of--color-transparent-background--100: rgba(32,32,32,.90); + + //borders + --of--BorderWidth--sm: 2px; + --of--BorderWidth--lg: 4px; + --of--BorderRadius--sm: .1875rem; + --of--BorderRadius--md: .75rem; + --of--BorderRadius--lg: 40rem; + + //text + --of--Color--100: var(--of--color-white--100); + --of--Color--200: var(--of--color-white--200); + --of--Color--300: var(--of--color-brand--100); + --of--Color--400: var(--of--color-black--200); + --of--Color--500: var(--of--color-brand--400); + --of--Color--600: var(--of--color-brand--300); + + + --of--LineHeight--sm: 1.3; + --of--LineHeight--lg: 1.5; + + --of--FontWeight--100: 400; + --of--FontWeight--200: 700; + + //animation + --of--animation: all .15s linear; + + //shadows + --of--BoxShadow--sm: 0px 1px 4px rgba(0,0,0,0.5); + + //misc + --of--menu-offset: 56px; + } + //media queries (no custom properties as MQs :( + $ov--breakpoint--xs: 0; + $ov--breakpoint--sm: 576px; + $ov--breakpoint--md: 768px; + $ov--breakpoint--lg: 992px; + $ov--breakpoint--xl: 1200px; + $ov--breakpoint--2xl: 1450px; + diff --git a/website/layouts/404.html b/website/layouts/404.html new file mode 100644 index 00000000000..378b7367502 --- /dev/null +++ b/website/layouts/404.html @@ -0,0 +1,10 @@ +{{ define "main"}} +
+
+

Not found

+

Oops! This page doesn't exist. Try going back to our home page.

+ +

You can learn how to make a 404 page like this in Custom 404 Pages.

+
+
+{{ end }} diff --git a/website/layouts/_default/baseof.html b/website/layouts/_default/baseof.html new file mode 100644 index 00000000000..e69de29bb2d diff --git a/website/layouts/build/baseof.html b/website/layouts/build/baseof.html new file mode 100644 index 00000000000..7b9fec3dbb8 --- /dev/null +++ b/website/layouts/build/baseof.html @@ -0,0 +1,26 @@ + + + + {{ partial "head.html" . }} + + + {{ partial "navbar.html" . }} + +
+

Building the Operator SDK

+
+
+
+

How can I build with Operator SDK?

+

There are many ways to build an Operator with SDK. To get started building today, follow the steps in this quick start guide.

+
+
+ +
+
+ {{ .Content }} +
+
+ {{ partial "footer.html" . }} + + \ No newline at end of file diff --git a/website/layouts/docs/baseof.html b/website/layouts/docs/baseof.html new file mode 100644 index 00000000000..e1ee1335da6 --- /dev/null +++ b/website/layouts/docs/baseof.html @@ -0,0 +1,30 @@ + + + + {{ partial "head.html" . }} + + +
+ {{ partial "navbar.html" . }} +
+
+
+
+
+ {{ partial "sidebar.html" . }} +
+ +
+ {{ partial "version-banner.html" . }} + {{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }} + {{ block "main" . }}{{ end }} +
+
+
+
+ {{ partial "footer.html" . }} +
+
+ {{ partial "scripts.html" . }} + + \ No newline at end of file diff --git a/website/layouts/docs/list.html b/website/layouts/docs/list.html new file mode 100644 index 00000000000..712247801a0 --- /dev/null +++ b/website/layouts/docs/list.html @@ -0,0 +1,17 @@ +{{ define "main" }} +
+

{{ .Title }}

+ {{ with .Params.description }}
{{ . | markdownify }}
{{ end }} + {{ .Content }} + {{ partial "section-index.html" . }} + {{ if (and (not .Params.hide_feedback) (.Site.Params.ui.feedback.enable) (.Site.GoogleAnalytics)) }} + {{ partial "feedback.html" .Site.Params.ui.feedback }} +
+ {{ end }} + {{ if (.Site.DisqusShortname) }} +
+ {{ partial "disqus-comment.html" . }} + {{ end }} +
{{ partial "page-meta-lastmod.html" . }}
+
+{{ end }} diff --git a/website/layouts/docs/single.html b/website/layouts/docs/single.html new file mode 100644 index 00000000000..00cb3ab911b --- /dev/null +++ b/website/layouts/docs/single.html @@ -0,0 +1,3 @@ +{{ define "main" }} +{{ .Render "content" }} +{{ end }} \ No newline at end of file diff --git a/website/layouts/faq/baseof.html b/website/layouts/faq/baseof.html new file mode 100644 index 00000000000..3d16dea8835 --- /dev/null +++ b/website/layouts/faq/baseof.html @@ -0,0 +1,25 @@ + + + + {{ partial "head.html" . }} + + + {{ partial "navbar.html" . }} +
+

Frequently asked questions

+
+
+
+

Frequently asked questions

+

If you are a community member, builder, consumer of applications, or a user of Kubernetes overall, the Operator SDK offers a number of benefits.

+
+
+ +
+
+ {{ .Content }} +
+
+ {{ partial "footer.html" . }} + + \ No newline at end of file diff --git a/website/layouts/index.html b/website/layouts/index.html new file mode 100644 index 00000000000..3e7555bb052 --- /dev/null +++ b/website/layouts/index.html @@ -0,0 +1,136 @@ + + + + {{ partial "head.html" . }} + + +
+ {{ partial "navbar.html" . }} +
+ +
+
+

OperatorSDK

+

The Operator SDK makes it easier to build Kubernetes native applications, a process that can require deep, application-specific operational knowledge.

+ Build an Operator + How can I build one? +
+ +
+
+

WHAT IS OPERATOR SDK?

+

This project is a component of the Operator Framework, an open source toolkit to manage Kubernetes native applications, called Operators, in an effective, automated, and scalable way.

+
+
+
+ +
+

WHAT CAN I DO WITH OPERATOR SDK?

+

The Operator SDK provides the tools to build, test, and package Operators. Initially, the SDK facilitates the marriage of an application’s business logic (for example, how to scale, upgrade, or backup) with the Kubernetes API to execute those operations. Over time, the SDK can allow engineers to make aplications smarter and have the user expereience of cloud services. Leading practices and code patterns that are shared across Operators are inclued in the SDK to help prevent reinventing the wheel.

+

The Operator SDK is a framework that uses the controller-runtime library to make writing operators easier by providing:

+
    +
  • High level APIs and abstractions to write the operational logic more intuitively
    • +
  • Tools for scaffolding and code generation to bootstrap a new project fast
    • +
  • Extensions to cover common Operator use cases
    • +
+ + Build an Operator + + + + +
+
+
+

Develop in Go, Ansible, or Helm

+
+
+

Go

+
+
    +
  1. Create a new operator project using the SDK Command Line Interface (CLI)
    2. +
  2. Define new resource APIs by adding Custom Resource Definitions (CRD)
    3. +
  3. Define Controllers to watch and reconcile resources
    4. +
  4. Write the reconciling logic for your Controller using the SDK and controller-runtime APIs
    5. +
  5. Use the SDK CLI to build and generate the operator deployment manifests
    6. +
+ + + Develop with Go + + + + +
+
+
+

Anisble

+
+
    +
  1. Create a new operator project using the SDK Command Line Interface (CLI)
    2. +
  2. Write the reconciling logic for your object using ansible playbooks and roles
    3. +
  3. Use the SDK CLI to build and generate the operator deployment manifests
    4. +
  4. Optionally add additional CRD's using the SDK CLI and repeat steps 2 and 3
    5. +
+ + Develop with Ansible + + + + +
+
+
+

Helm

+
+
    +
  1. Create a new operator project using the SDK Command Line Interface (CLI)
    2. +
  2. Create a new (or add your existing) Helm chart for use by the operator’s reconciling logic
    3. +
  3. Use the SDK CLI to build and generate the operator deployment manifests
    4. +
  4. Optionally add additional CRD’s using the SDK CLI and repeat steps 2 and 3
    5. +
+ + Develop with Helm + + + + +
+
+
+
+
+
+

Contribute!

+ + + + + + + + + +
+ +

The Operator SDK and its components are open source, so please feel encouraged to jump into each individually and learn what else you can do. If you want to discuss your experience, have questions, or want toget involved, join the Operator SDK forum and visit us on GitHub.

+
+
+ {{ partial "footer.html" . }} + {{ partialCached "scripts.html" . }} + + + diff --git a/website/layouts/partials/footer.html b/website/layouts/partials/footer.html new file mode 100644 index 00000000000..62fc87adaf8 --- /dev/null +++ b/website/layouts/partials/footer.html @@ -0,0 +1,41 @@ +{{ $links := .Site.Params.links }} + + + +{{ define "footer-links-block" }} + +{{ end }} \ No newline at end of file diff --git a/website/layouts/partials/navbar.html b/website/layouts/partials/navbar.html new file mode 100644 index 00000000000..bedccadd56e --- /dev/null +++ b/website/layouts/partials/navbar.html @@ -0,0 +1,21 @@ +
+ + + + + + + + +
+ {{ partial "search-input.html" . }} +
+
\ No newline at end of file