diff --git a/assets/icons/home/api-first.svg b/assets/icons/home/api-first.svg new file mode 100644 index 000000000..c73ae46ba --- /dev/null +++ b/assets/icons/home/api-first.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/home/collaborate.svg b/assets/icons/home/collaborate.svg new file mode 100644 index 000000000..aec5a6321 --- /dev/null +++ b/assets/icons/home/collaborate.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/home/extend.svg b/assets/icons/home/extend.svg new file mode 100644 index 000000000..947e25277 --- /dev/null +++ b/assets/icons/home/extend.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/home/github-discussions.svg b/assets/icons/home/github-discussions.svg new file mode 100644 index 000000000..23638eaf8 --- /dev/null +++ b/assets/icons/home/github-discussions.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/home/install.svg b/assets/icons/home/install.svg new file mode 100644 index 000000000..38b488b4a --- /dev/null +++ b/assets/icons/home/install.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/home/integrate.svg b/assets/icons/home/integrate.svg new file mode 100644 index 000000000..fd74b3847 --- /dev/null +++ b/assets/icons/home/integrate.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/home/monitoring.svg b/assets/icons/home/monitoring.svg new file mode 100644 index 000000000..8dd82ee05 --- /dev/null +++ b/assets/icons/home/monitoring.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/home/performance.svg b/assets/icons/home/performance.svg new file mode 100644 index 000000000..8dd82ee05 --- /dev/null +++ b/assets/icons/home/performance.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/home/slack.svg b/assets/icons/home/slack.svg new file mode 100644 index 000000000..27ee2c09b --- /dev/null +++ b/assets/icons/home/slack.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/home/standardization.svg b/assets/icons/home/standardization.svg new file mode 100644 index 000000000..805913228 --- /dev/null +++ b/assets/icons/home/standardization.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/home/telegram.svg b/assets/icons/home/telegram.svg new file mode 100644 index 000000000..27ee2c09b --- /dev/null +++ b/assets/icons/home/telegram.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/home/ui.svg b/assets/icons/home/ui.svg new file mode 100644 index 000000000..d3c8f21bf --- /dev/null +++ b/assets/icons/home/ui.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/octicons/book.svg b/assets/icons/octicons/book.svg new file mode 100644 index 000000000..d25ccf7df --- /dev/null +++ b/assets/icons/octicons/book.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/octicons/mark-github.svg b/assets/icons/octicons/mark-github.svg new file mode 100644 index 000000000..5633f09cb --- /dev/null +++ b/assets/icons/octicons/mark-github.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/octicons/pencil.svg b/assets/icons/octicons/pencil.svg new file mode 100644 index 000000000..2d0a2f960 --- /dev/null +++ b/assets/icons/octicons/pencil.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/octicons/people.svg b/assets/icons/octicons/people.svg new file mode 100644 index 000000000..151d7b947 --- /dev/null +++ b/assets/icons/octicons/people.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/octicons/rss.svg b/assets/icons/octicons/rss.svg new file mode 100644 index 000000000..780c7384e --- /dev/null +++ b/assets/icons/octicons/rss.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/ui/arrow-left.svg b/assets/icons/ui/arrow-left.svg new file mode 100644 index 000000000..0bf0109b4 --- /dev/null +++ b/assets/icons/ui/arrow-left.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/ui/arrow-right.svg b/assets/icons/ui/arrow-right.svg new file mode 100644 index 000000000..c5dc67629 --- /dev/null +++ b/assets/icons/ui/arrow-right.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/ui/chevron-down.svg b/assets/icons/ui/chevron-down.svg new file mode 100644 index 000000000..348c769d0 --- /dev/null +++ b/assets/icons/ui/chevron-down.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/ui/play.svg b/assets/icons/ui/play.svg new file mode 100644 index 000000000..02ea3060e --- /dev/null +++ b/assets/icons/ui/play.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/ui/three-bars.svg b/assets/icons/ui/three-bars.svg new file mode 100644 index 000000000..ded6ddca0 --- /dev/null +++ b/assets/icons/ui/three-bars.svg @@ -0,0 +1 @@ + diff --git a/assets/scss/_fonts.scss b/assets/scss/_fonts.scss new file mode 100644 index 000000000..80e82f2a9 --- /dev/null +++ b/assets/scss/_fonts.scss @@ -0,0 +1,47 @@ +// Nunito Sans (variable, wght 200-1000), self-hosted. Source: @fontsource-variable/nunito-sans (OFL). +// Served from /fonts/nunito-sans/ so no request goes to Google Fonts. + +@font-face { + font-family: "Nunito Sans"; + font-style: normal; + font-display: swap; + font-weight: 200 1000; + src: url("/fonts/nunito-sans/nunito-sans-cyrillic-ext-wght-normal.woff2") format("woff2"); + unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; +} + +@font-face { + font-family: "Nunito Sans"; + font-style: normal; + font-display: swap; + font-weight: 200 1000; + src: url("/fonts/nunito-sans/nunito-sans-cyrillic-wght-normal.woff2") format("woff2"); + unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; +} + +@font-face { + font-family: "Nunito Sans"; + font-style: normal; + font-display: swap; + font-weight: 200 1000; + src: url("/fonts/nunito-sans/nunito-sans-latin-ext-wght-normal.woff2") format("woff2"); + unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; +} + +@font-face { + font-family: "Nunito Sans"; + font-style: normal; + font-display: swap; + font-weight: 200 1000; + src: url("/fonts/nunito-sans/nunito-sans-latin-wght-normal.woff2") format("woff2"); + unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; +} + +@font-face { + font-family: "Nunito Sans"; + font-style: italic; + font-display: swap; + font-weight: 200 1000; + src: url("/fonts/nunito-sans/nunito-sans-latin-wght-italic.woff2") format("woff2"); + unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; +} diff --git a/assets/scss/_index.scss b/assets/scss/_index.scss index d826c1961..3f3381f7c 100644 --- a/assets/scss/_index.scss +++ b/assets/scss/_index.scss @@ -231,188 +231,7 @@ main.td-main { } -// Live-demo band. Docsy's blocks/lead wraps everything it is given in -// `.h4 mb-0`, so without these rules the body copy inherits heading size and -// weight, the call to action sits inline at the end of the paragraph, and the -// band has no vertical rhythm of its own. Every declaration below undoes one -// of those inherited defaults rather than decorating. -.section-live-demo { - .td-box--primary { - // A gradient rather than the flat primary fill: the band sits between two - // white sections and a single flat slab reads as a coloured gap. The - // gradient gives it a top and a bottom, so it reads as its own surface. - background-image: linear-gradient(160deg, $cozy-dark-blue 0%, $cozy-darkest-blue 100%); - padding-top: 5.5rem; - padding-bottom: 5.5rem; - @include media-breakpoint-down(md) { - padding-top: 3.25rem; - padding-bottom: 3.25rem; - } - } - - // The band is a destination, not a step in a sequence: no scroll cue. - .td-arrow-down::before { - display: none; - } - - .section-label { - margin: 0 0 1.125rem 0; - font-size: clamp(1.625rem, 3.2vw, 2.375rem); - font-weight: 600; - line-height: 1.15; - letter-spacing: -0.015em; - text-wrap: balance; - color: $cozy-white; - } - - // Reset the inherited .h4 typography to body copy, and hold the line length - // to something readable -- centred text across a 1280px container is not. - .live-demo-lead { - // ~72 characters at this size; 46rem ran to ~84, past comfortable measure. - max-width: 40rem; - margin: 0 auto; - font-size: 1.0625rem; - font-weight: 400; - line-height: 1.65; - // Flat white, not white-with-alpha: at 0.92 over this band the ratio is - // 4.28:1, under the 4.5:1 AA needs for body copy. Do not dim this text. - color: $cozy-white; - } - - .live-demo-cta { - margin: 2.25rem 0 0 0; - - // Deliberately not @include flat-white-button: that mixin paints the label - // $cozy-mid-gray with !important, which on a saturated blue ground reads as - // a disabled control rather than the one thing on the band to click. - a.btn-primary { - display: inline-flex; - align-items: center; - gap: 0.5rem; - padding: 0.9375rem 2.25rem; - border: none; - border-radius: 6px; - background-color: $cozy-white !important; - color: $cozy-darkest-blue !important; - font-size: 1.0625rem; - font-weight: 600; - letter-spacing: 0.005em; - box-shadow: 0 2px 10px rgba(#000, 0.16) !important; - transition: transform 0.15s ease, box-shadow 0.15s ease; - - &:hover { - background-color: $cozy-white !important; - color: $cozy-darkest-blue !important; - transform: translateY(-1px); - box-shadow: 0 6px 18px rgba(#000, 0.22) !important; - text-shadow: none !important; - } - - &:active { - transform: translateY(0); - box-shadow: 0 2px 8px rgba(#000, 0.2) !important; - } - - // Bootstrap has no other focus affordance on .btn once the box-shadow is - // replaced, so the ring has to be drawn explicitly. - &:focus-visible { - outline: 3px solid $cozy-white; - outline-offset: 3px; - } - - @media (prefers-reduced-motion: reduce) { - transition: none; - - &:hover, - &:active { - transform: none; - } - } - } - } -} - -.section-community { - @include gray-background-a; - background-color: $cozy-gray; - - .td-box--dark { - background-color: $cozy-gray; - padding-top: 4rem; - - @include media-breakpoint-down(md) { - padding-top: 2rem; - } - } - - a { - text-decoration: underline; - } - - .section-label { - margin: 0 0 2rem 0; - color: $cozy-white !important; - } - - section.row.td-box { - padding-bottom: 1rem !important; - - .td-arrow-down::before { - display: none; - } - } - - .h3 { - font-weight: 600; - } - - .subsection-community-row { - section.row.td-box { - padding-bottom: 1rem; - } - - .community-row { - display: flex; - flex-wrap: wrap; - padding: 0 0 4rem 0; - margin: 0; - justify-content: center !important; - - @include media-breakpoint-down(md) { - padding-bottom: 2rem; - } - - .community-item { - flex: none; - - border: 1px solid $cozy-white; - padding: 0.5rem 1rem; - margin: 1rem; - width: 320px; - - .community-item-header { - display: flex; - justify-content: center; - - margin: 1rem 0; - - .h3 { - // flex-grow: 1; - font-size: 1.3rem; - margin-left: 1rem; - padding-top: 9px; - } - } - - a { - font-size: 1rem; - font-weight: 600; - } - } - } - } -} .container.contributors { padding-top: 1rem; @@ -425,14 +244,6 @@ main.td-main { } } -.cncf-footer { - @include white-background-a; - padding: 4rem 0; - - @include media-breakpoint-down(md) { - padding: 2rem 0; - } -} .td-navbar { @include media-breakpoint-down(md) { @@ -554,290 +365,5 @@ label.date { margin-top: 40px; } -.navbar-brand__name { - display: none; -} - -// Use-cases: who runs Cozystack and what it solves for them. -// -// One case per slide. Six cards side by side made every case a column of -// narrow text that gets skimmed; a case only works if it is read, so it gets -// the full width and the reader moves between them deliberately. -.use-cases { - padding: 4.5rem 0 5rem; - @include media-breakpoint-down(md) { - padding: 2.75rem 0 3rem; - } - &__heading { - margin: 0 0 0.75rem; - text-align: center; - } - - &__lead { - max-width: 40rem; - margin: 0 auto 3rem; - text-align: center; - color: $cozy-mid-gray; - } - - &__carousel { - position: relative; - // Not the full container width: a single case stretched across 1280px - // gives lines nobody wants to track back across. The cap also pulls the - // controls in to hug the panel instead of floating at the screen edges. - max-width: 62rem; - margin: 0 auto; - // Room for the controls either side of the case, so the arrows never sit - // on top of the text. - padding: 0 3.5rem; - - @include media-breakpoint-down(lg) { - padding: 0 2.5rem; - } - - @include media-breakpoint-down(md) { - padding: 0; - } - } - - // Slides are different lengths. Without a floor the whole section jumps - // height on every change, which reads as the page breaking. - // Bootstrap shows one slide and hides the rest with display:none, so the - // carousel sizes to whatever case is showing and the whole section jogs on - // every change -- by 44px between the shortest and longest English case, - // and more as the column narrows and the text wraps further. A fixed - // min-height only fixes that at one width and one locale. - // - // Stacking every slide in a single grid cell makes the container size to the - // tallest case instead, at any width and in any language. Hidden slides keep - // their box but leave the accessibility tree, so their links are not - // reachable by keyboard while off-screen. - .carousel-inner { - display: grid; - } - - .carousel-item { - grid-area: 1 / 1; - display: block; - float: none; - margin-right: 0; - visibility: hidden; - opacity: 0; - transition: opacity 0.35s ease, visibility 0s linear 0.35s; - } - - .carousel-item.active { - visibility: visible; - opacity: 1; - transition: opacity 0.35s ease, visibility 0s; - } - - &__case { - display: flex; - flex-direction: column; - // A floor for the short cases, so the panel keeps its presence instead of - // shrink-wrapping the text. The height of the tallest case is handled - // structurally -- see the grid stack on .carousel-inner below. - min-height: 19rem; - padding: 3rem 3.5rem; - border: 1px solid rgba($cozy-black, 0.1); - border-radius: 12px; - background: $cozy-white; - - @include media-breakpoint-down(md) { - min-height: 0; - padding: 2rem 1.5rem; - } - } - - // The audience names the whole case, so it heads the panel rather than - // sitting on top of one of the two columns. - &__title { - margin: 0 0 2rem; - text-align: center; - font-size: clamp(1.375rem, 2.2vw, 1.75rem); - font-weight: 600; - line-height: 1.2; - letter-spacing: -0.01em; - text-wrap: balance; - - @include media-breakpoint-down(md) { - margin-bottom: 1.25rem; - } - } - - &__body { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 2rem 4rem; - align-items: start; - // Centre the pair in whatever height the panel floor leaves over. - flex: 1; - align-content: center; - - @include media-breakpoint-down(md) { - grid-template-columns: 1fr; - gap: 1.25rem; - } - } - - &__col { - display: flex; - flex-direction: column; - } - - // The situation is the reader recognising themselves; the outcome is the - // answer. Different colour and weight so the pair reads as a question and - // its reply rather than as two paragraphs. - &__situation { - margin: 0; - font-size: 1.0625rem; - line-height: 1.65; - color: $cozy-mid-gray; - } - - &__outcome { - margin: 0; - font-size: 1.0625rem; - line-height: 1.65; - color: $cozy-black; - } - - &__link { - margin-top: 1.25rem; - align-self: flex-start; - font-size: 1rem; - font-weight: 600; - - &::after { - // Non-breaking space: the arrow stays with the last word, while the link - // text itself is still free to wrap. - content: "\00a0\2192"; - } - } - - // Bootstrap's default control icons and indicator bars are white, meant for - // a carousel over a photograph. On this white ground they are invisible. - .carousel-control-prev, - .carousel-control-next { - width: 3rem; - opacity: 1; - color: $cozy-mid-gray; - - @include media-breakpoint-down(md) { - display: none; - } - - &:hover .carousel-control-prev-icon, - &:hover .carousel-control-next-icon { - border-color: $primary; - color: $primary; - } - - &:focus-visible { - outline: 2px solid $primary; - outline-offset: 2px; - border-radius: 8px; - } - } - - .carousel-control-prev-icon, - .carousel-control-next-icon { - width: 2.5rem; - height: 2.5rem; - border: 1px solid rgba($cozy-black, 0.18); - border-radius: 50%; - background-color: $cozy-white; - // Bootstrap supplies a white chevron as a background image; recolour it by - // masking instead, so the arrow follows `color`. - background-image: none; - position: relative; - transition: border-color 0.15s ease, color 0.15s ease; - - &::before { - content: ""; - position: absolute; - inset: 0; - margin: auto; - width: 0.625rem; - height: 0.625rem; - border-top: 2px solid currentColor; - border-right: 2px solid currentColor; - } - } - - .carousel-control-prev-icon::before { - transform: translateX(2px) rotate(-135deg); - } - - .carousel-control-next-icon::before { - transform: translateX(-2px) rotate(45deg); - } - - .carousel-indicators { - position: static; - margin: 1.75rem 0 0; - - button { - width: 8px; - height: 8px; - border: none; - border-radius: 50%; - background-color: rgba($cozy-black, 0.22); - opacity: 1; - transition: background-color 0.15s ease; - - &.active { - background-color: $primary; - } - - &:focus-visible { - outline: 2px solid $primary; - outline-offset: 3px; - } - } - } - - @media (prefers-reduced-motion: reduce) { - .carousel-item, - .carousel-item.active { - transition: none; - } - - .carousel-control-prev-icon, - .carousel-control-next-icon, - .carousel-indicators button { - transition: none; - } - } -} - -// Same defence as .oss-card: Docsy can be put into dark mode, and this case -// panel would otherwise stay white on a dark page. -[data-bs-theme="dark"] .use-cases { - .use-cases__lead, - .use-cases__situation { - color: var(--bs-gray-400, #ced4da); - } - - .use-cases__case { - border-color: var(--bs-gray-700, #495057); - background: var(--bs-gray-900, #212529); - } - - .use-cases__outcome { - color: var(--bs-gray-100, #f8f9fa); - } - - .carousel-control-prev-icon, - .carousel-control-next-icon { - background-color: var(--bs-gray-900, #212529); - border-color: var(--bs-gray-700, #495057); - } - - .carousel-indicators button { - background-color: var(--bs-gray-600, #6c757d); - } -} diff --git a/assets/scss/_oss_health.scss b/assets/scss/_oss_health.scss index 4fae99dcb..ad9664a74 100644 --- a/assets/scss/_oss_health.scss +++ b/assets/scss/_oss_health.scss @@ -176,6 +176,20 @@ color: #fff; } } + + // Three 7rem buttons don't fit on phones and push the page sideways. + @include media-breakpoint-down(lg) { + display: flex; + max-width: 100%; + width: 100%; + + &__button { + flex: 1 1 0; + min-width: 0; + padding-left: 0.5rem; + padding-right: 0.5rem; + } + } } .oss-health-grid { diff --git a/assets/scss/_page.scss b/assets/scss/_page.scss index 3ad264318..6a6292568 100644 --- a/assets/scss/_page.scss +++ b/assets/scss/_page.scss @@ -86,3 +86,9 @@ } } } + +// Long URLs and inline-code links in docs and blog posts must wrap, +// otherwise they overflow the viewport on mobile. +.td-content a { + overflow-wrap: anywhere; +} diff --git a/assets/scss/_variables_project.scss b/assets/scss/_variables_project.scss index 4f2d4908f..06c103f6a 100644 --- a/assets/scss/_variables_project.scss +++ b/assets/scss/_variables_project.scss @@ -37,8 +37,11 @@ $info : #428bca; $warning: #ffa630; $danger: #d9534f; -$google_font_name: "Montserrat"; -$google_font_family: "Montserrat:300,300i,400,400i,600,600i,700,700i"; +// Self-hosted Nunito Sans (see _fonts.scss). No Google Fonts request. +$google_font_name: "Nunito Sans"; +$font-family-sans-serif: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; +$font-family-base: $font-family-sans-serif; +$headings-font-family: $font-family-sans-serif; $navbar-dark-color: rgba($cozy-white, 0.75) !default; $navbar-dark-hover-color: rgba($cozy-white, 0.5) !default; diff --git a/assets/scss/blocks/_features.scss b/assets/scss/blocks/_features.scss index 575c6be8d..6e4b7805a 100644 --- a/assets/scss/blocks/_features.scss +++ b/assets/scss/blocks/_features.scss @@ -1,66 +1 @@ -.features, .benefits { - .fas, .fab, .fa { - color: $cozy-dark-blue; - } -} - - -.features { - .feature-card { - padding: 20px; - border-radius: 0; - height: 100%; - border: 1px solid #E8E8E8; - background-color: #FFFFFF; - - p.section-text { - font-size: 15px; - } - - p:last-child { - margin-bottom: 0; - } - } - - .card-header-custom { - display: flex; - flex-direction: row; - align-items:center; - min-height: 58px; - - h4 { - font-size: 18px; - color: #3b3c4c; - } - - i { - margin-right: 16px; - } - } - - .card .section-text { - font-size: 14px; - color: #5a5b75; - } -} - - -.benefits { - .card-shadow { - padding: 35px 30px 30px; - border-radius: 6px; - box-shadow: 0 5px 10px rgba(41,26,204,.12); - border: none; - height: 100%; - text-align: center; - - i { - margin: 2px auto; - } - - h4 { - font-weight: 600; - line-height: 1.2; - } - } -} +// Home benefits/features now live in redesign/_home.scss (.cz-benefits, .cz-features). diff --git a/assets/scss/blocks/_hero.scss b/assets/scss/blocks/_hero.scss index 292033c53..214613cb9 100644 --- a/assets/scss/blocks/_hero.scss +++ b/assets/scss/blocks/_hero.scss @@ -1,165 +1 @@ -// A cover block is a full size cover with a fixed background for smaller screens. - -@include td-box-height-modifiers(".td-hero-block"); - -.hero-gitops { - margin-left: -15px; - margin-right: -15px; - - @include media-breakpoint-down(md) { - padding: 0 15px; - } - - background: #2f2f2f; - - .td-hero-block { - padding-bottom: 4rem; - background-color: #2f2f2f !important; - } - - // Remove overlay from td-overlay--dark - .td-overlay--dark::after { - background-color: transparent !important; - } - - section.row { - margin-left: 0; - margin-right: 0; - } - - .hero-details { - margin-top: 1.5rem; - - p { - color: $cozy-white; - font-weight: 500; - font-size: 1.2rem; - } - - p:first-child { - margin-bottom: 1.5rem; - } - - } - - p { - color: $cozy-white; - } - - h1 { - color: rgba($cozy-white, 0.95); - font-size: 2.8em; - padding-top: 50px; - - @include media-breakpoint-up(sm) { - font-size: 2.6em; - } - } - - .hero-taglines { - list-style: none; - padding: 0; - margin: 1rem 0 0; - display: flex; - flex-wrap: wrap; - gap: 0.6rem; - } - - .hero-tagline { - display: inline-block; - padding: 0.4rem 0.9rem; - border: 1px solid rgba($cozy-light-blue, 0.55); - border-radius: 999px; - color: $cozy-white; - background: rgba($cozy-dark-blue, 0.18); - font-size: 0.95rem; - font-weight: 600; - line-height: 1.2; - letter-spacing: 0.01em; - white-space: nowrap; - - @include media-breakpoint-down(sm) { - white-space: normal; - font-size: 0.9rem; - } - } - - // Align Kubernetes Certified logo with the title top - .row.align-items-start { - img[alt="Certified Kubernetes"] { - margin-top: 50px; - } - } - - h2 { - color: rgba($cozy-white, 0.95); - font-weight: 600; - font-size: 1.4em; - } - - a { - color: $cozy-light-blue !important; - font-weight: 400; - font-style: italic; - text-decoration: underline; - - &:hover { - color: $cozy-darkest-blue !important; - text-shadow: -1px 1px $cozy-lighter-blue; - } - } - - a.btn { - @include flat-white-button; - border: none; - text-decoration: none; - - margin-top: 1.5rem; - - font-style: normal; - font-weight: 600; - font-size: 1.5rem; - - .fa-arrow-right { - font-size: 1rem; - display: block; - float: right; - margin: 11px 0 0 14px; - } - } - - // Mobile video styles - .hero-video-mobile { - width: 100%; - margin-top: 2rem; - - .ratio { - border-radius: 8px; - overflow: hidden; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); - } - - iframe { - width: 100%; - height: 100%; - } - } -} - -.lead-flux section { - padding: 0rem 0 1rem 0 !important; - background: none; - - - a[aria-hidden="true"] { - display: none; - } - - .td-arrow-down { - &::before { - border: { - color: #{$cozy-gray} transparent transparent transparent; - } - } - } -} +// The home hero now lives in redesign/_home.scss (.cz-hero). diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 89999676f..a0791c84b 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -126,10 +126,9 @@ // Import Docsy styles_project (allows further customization) @import "docsy/styles_project"; -// Import Google Fonts (Montserrat) -@import url($web-font-path); +// Self-hosted Nunito Sans +@import "fonts"; -// Ensure Montserrat font is applied to body body { font-family: $font-family-base; } @@ -163,3 +162,6 @@ a { @import "tabs_alerts"; @import "override-docsy-tabs"; @import "telemetry"; + +// Site redesign (must stay last) +@import "redesign/redesign"; diff --git a/assets/scss/redesign/_base.scss b/assets/scss/redesign/_base.scss new file mode 100644 index 000000000..360f811bb --- /dev/null +++ b/assets/scss/redesign/_base.scss @@ -0,0 +1,149 @@ +// ---------- Tokens ---------- +:root { + --cz-ink: #111111; + --cz-text: #414750; + --cz-muted: #6b7280; + --cz-line: #e0e3e7; + --cz-surface: #f8f9fa; + --cz-surface-2: #f1f2f3; + --cz-dark: #171717; + --cz-dark-2: #111111; + --cz-radius: 6px; + --cz-container: 1240px; +} + +// ---------- Base ---------- +html { -webkit-text-size-adjust: 100%; } + +body { + font-family: $font-family-base; + color: var(--cz-text); + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; +} + +h1, h2, h3, h4, h5, h6, +.h1, .h2, .h3, .h4, .h5, .h6 { + font-family: $font-family-base; + color: var(--cz-ink); +} + +a { + color: var(--cz-ink); + text-decoration: none; + + &:hover { color: #000; text-decoration: none; } +} + +::selection { background: #111; color: #fff; } + +// ---------- Buttons ---------- +.cz-btn, +.btn.cz-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 14px; + height: 50px; + padding: 0 26px; + border: 1px solid transparent; + border-radius: var(--cz-radius); + font-size: 17px; + font-weight: 700; + line-height: 1; + white-space: nowrap; + cursor: pointer; + transition: background-color .15s, color .15s, border-color .15s; + + svg { flex: none; width: 24px; height: 24px; } + + &--dark { background: var(--cz-ink); color: #fff; &:hover { background: #000; color: #fff; } } + &--light { background: #fff; border-color: var(--cz-line); color: var(--cz-ink); &:hover { background: var(--cz-surface); color: var(--cz-ink); } } + &--white { background: #fff; color: var(--cz-ink); &:hover { background: #eee; color: var(--cz-ink); } } +} + +.cz-iconbtn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 44px; + height: 44px; + padding: 0; + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + background: #fff; + color: var(--cz-ink); + cursor: pointer; + transition: background-color .15s; + + svg { width: 24px; height: 24px; } + + &:hover { background: var(--cz-surface); } +} + +// Bootstrap buttons used across docs, support and resources follow the same look. +.btn { + border-radius: var(--cz-radius); + font-weight: 700; +} + +.btn-primary, +.btn-info { + background: var(--cz-ink); + border-color: var(--cz-ink); + color: #fff; + + &:hover, &:focus, &:active { background: #000 !important; border-color: #000 !important; color: #fff !important; } +} + +.btn-outline-primary, +.btn-secondary, +.btn-light { + background: #fff; + border-color: var(--cz-line); + color: var(--cz-ink); + + &:hover, &:focus, &:active { background: var(--cz-surface) !important; border-color: var(--cz-line) !important; color: var(--cz-ink) !important; } +} + +.cz-link { + font-weight: 700; + color: var(--cz-ink); + text-decoration: none; + + &:hover { text-decoration: underline; text-underline-offset: 3px; } +} + +// ---------- Shared section headings ---------- +.cz-section-title { + margin: 0; + font-size: clamp(30px, 3.2vw, 40px); + font-weight: 800; + line-height: 1.18; + letter-spacing: -0.035em; + color: var(--cz-ink); +} + +.cz-section-lead { + margin: 14px 0 36px; + font-size: 16px; + line-height: 1.7; + color: var(--cz-text); +} + +// ---------- Circuit artwork ---------- +// The artwork is a single asset ("circuits" in Figma), placed per section with +// the same transforms as the Figma instances. Right/bottom-anchored pieces +// start at left:100% / top:100% so they stay attached to the edge of a section +// that is wider or taller than the Figma frame. Always behind the content. +@mixin cz-art($img, $w, $h, $op) { + content: ""; + position: absolute; + z-index: 0; + width: #{$w}px; + height: #{$h}px; + background: url("/img/circuits/#{$img}") no-repeat 0 0 / 100% 100%; + transform-origin: 0 0; + opacity: $op; + pointer-events: none; +} diff --git a/assets/scss/redesign/_chrome.scss b/assets/scss/redesign/_chrome.scss new file mode 100644 index 000000000..0da06a3e8 --- /dev/null +++ b/assets/scss/redesign/_chrome.scss @@ -0,0 +1,258 @@ +// ---------- Navbar ---------- +nav.navbar.td-navbar, +nav.navbar.td-navbar.navbar-bg-onscroll, +nav.navbar.td-navbar.td-navbar-cover { + background: #fff !important; + min-height: 70px; + padding: 0 32px; + border-bottom: 1px solid var(--cz-line); + box-shadow: none; + + @include media-breakpoint-down(md) { padding: 8px 16px; } + + .navbar-brand { + padding: 0; + margin-right: 24px; + + svg { + height: 33.1px; // 24px in the kit, +20%, then +15% + width: auto; + margin: 0; + + path { fill: var(--cz-ink); } + } + } + + .navbar-nav { align-items: center; gap: 2px; } + + .nav-link, + .nav-link span { + color: var(--cz-ink) !important; + font-size: 14px; + font-weight: 600; + opacity: 1; + } + + .nav-link { padding: .5rem .75rem; } + .nav-link span { padding: 0; } + + .nav-link:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; } + + .nav-link.active, + .nav-link .active { + font-weight: 800; + text-decoration: underline; + text-underline-offset: 6px; + text-decoration-thickness: 2px; + } + + // ChevronDownIcon from the Figma kit instead of the Bootstrap triangle + .dropdown-toggle::after { + display: inline-block; + width: 16px; + height: 16px; + margin-left: .1em; + vertical-align: -.2em; + border: 0; + background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%23111111' d='M5.22 8.22C5.15 8.29 5.1 8.37 5.06 8.46C5.02 8.55 5 8.65 5 8.75C5 8.85 5.02 8.95 5.06 9.04C5.1 9.13 5.15 9.21 5.22 9.28L11.47 15.53C11.54 15.6 11.62 15.65 11.71 15.69C11.8 15.73 11.9 15.75 12 15.75C12.1 15.75 12.2 15.73 12.29 15.69C12.38 15.65 12.46 15.6 12.53 15.53L18.78 9.28C18.85 9.21 18.9 9.13 18.94 9.04C18.98 8.95 19 8.85 19 8.75C19 8.65 18.98 8.55 18.94 8.46C18.9 8.37 18.85 8.29 18.78 8.22C18.71 8.15 18.63 8.1 18.54 8.06C18.45 8.02 18.35 8 18.25 8C18.15 8 18.05 8.02 17.96 8.06C17.87 8.1 17.79 8.15 17.72 8.22L12 13.94L6.28 8.22C6.21 8.15 6.13 8.1 6.04 8.06C5.95 8.02 5.85 8 5.75 8C5.65 8 5.55 8.02 5.46 8.06C5.37 8.1 5.29 8.15 5.22 8.22Z'/%3e%3c/svg%3e") center / contain no-repeat; + } + + .dropdown-menu { + margin-top: 6px; + padding: 6px; + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + background: #fff; + box-shadow: 0 12px 32px rgba(17, 17, 17, .08); + } + + .dropdown-item { + padding: 8px 12px; + border-radius: 4px; + color: var(--cz-ink); + font-size: 14px; + font-weight: 600; + + &:hover, &:focus { background: var(--cz-surface); color: var(--cz-ink); } + } + + .navbar-toggler { + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + color: var(--cz-ink); + + .navbar-toggler-icon { + // ThreeBarsIcon from the Figma kit + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%23111111' d='M3.75 5.25C3.55 5.25 3.36 5.33 3.22 5.47C3.08 5.61 3 5.8 3 6C3 6.2 3.08 6.39 3.22 6.53C3.36 6.67 3.55 6.75 3.75 6.75H20.25C20.45 6.75 20.64 6.67 20.78 6.53C20.92 6.39 21 6.2 21 6C21 5.8 20.92 5.61 20.78 5.47C20.64 5.33 20.45 5.25 20.25 5.25H3.75ZM3.75 11.25C3.55 11.25 3.36 11.33 3.22 11.47C3.08 11.61 3 11.8 3 12C3 12.2 3.08 12.39 3.22 12.53C3.36 12.67 3.55 12.75 3.75 12.75H20.25C20.45 12.75 20.64 12.67 20.78 12.53C20.92 12.39 21 12.2 21 12C21 11.8 20.92 11.61 20.78 11.47C20.64 11.33 20.45 11.25 20.25 11.25H3.75ZM3.75 17.25C3.55 17.25 3.36 17.33 3.22 17.47C3.08 17.61 3 17.8 3 18C3 18.2 3.08 18.39 3.22 18.53C3.36 18.67 3.55 18.75 3.75 18.75H20.25C20.45 18.75 20.64 18.67 20.78 18.53C20.92 18.39 21 18.2 21 18C21 17.8 20.92 17.61 20.78 17.47C20.64 17.33 20.45 17.25 20.25 17.25H3.75Z'/%3e%3c/svg%3e"); + background-size: 24px 24px; + width: 24px; + height: 24px; + } + } + + @include media-breakpoint-down(sm) { + .navbar-collapse { background: #fff; } + .dropdown-menu { border-color: var(--cz-line) !important; } + } +} + +// Algolia DocSearch: the kit's "Search Ctrl K" field. +:root { + --docsearch-primary-color: #111111; + --docsearch-text-color: #111111; + --docsearch-muted-color: #6b7280; + --docsearch-highlight-color: #111111; + --docsearch-searchbox-background: #ffffff; + --docsearch-searchbox-focus-background: #ffffff; + --docsearch-key-gradient: none; + --docsearch-key-shadow: none; +} + +nav.navbar.td-navbar .nav-search-item #docsearch { + height: 40px; + max-width: none; + margin: 0; + padding: 0; + + .DocSearch-Button { + height: 40px; + min-width: 200px; + margin: 0; + padding: 0 10px 0 12px; + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + background: #fff; + color: var(--cz-muted); + box-shadow: none; + font-family: $font-family-base; + + &:hover { background: var(--cz-surface); box-shadow: none; color: var(--cz-muted); } + } + + .DocSearch-Button-Placeholder { font-size: 14px; font-weight: 400; color: var(--cz-muted); padding-left: 10px; } + .DocSearch-Search-Icon { color: var(--cz-muted); stroke-width: 2; } + + .DocSearch-Button-Key { + width: auto; + height: 20px; + padding: 0 6px; + border: 1px solid var(--cz-line); + border-radius: 4px; + background: #fff; + box-shadow: none; + color: var(--cz-muted); + font-size: 11px; + font-weight: 400; + } +} + +// ---------- Footer ---------- +.cz-footer { + border-top: 1px solid var(--cz-line); + background: #fff; + color: var(--cz-muted); + padding: 48px 32px 32px; + margin-top: 0; + + &__inner { max-width: 1376px; margin: 0 auto; } + + &__top { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 20px 32px; + padding-bottom: 28px; + border-bottom: 1px solid var(--cz-line); + } + + &__brand svg { height: 24px; width: auto; display: block; path { fill: var(--cz-ink); } } + + &__links { + display: flex; + flex-wrap: wrap; + gap: 8px 24px; + + a { font-size: 14px; font-weight: 600; color: var(--cz-text); &:hover { color: var(--cz-ink); text-decoration: underline; text-underline-offset: 3px; } } + } + + &__legal { + padding-top: 24px; + text-align: left !important; + font-size: 13px; + line-height: 1.7; + color: var(--cz-muted); + + a { color: var(--cz-text); text-decoration: underline; text-underline-offset: 3px; } + .td-footer__badge { margin-left: 12px !important; vertical-align: middle; text-decoration: none; } + .td-footer__policies { margin-top: 6px !important; } + } +} + +// Docsy's own footer styles must not leak into the new one. +.td-footer { display: none; } + +// Below the extra-large breakpoint (1200px) the menu collapses behind the hamburger. The +// older rules kept it open on tablets; with the larger logo and the English menu (which +// has the extra Blog item) it only fits on one line from 1200px up. +@include media-breakpoint-down(xl) { + nav.navbar.td-navbar { + flex-wrap: wrap; + padding-top: 8px; + padding-bottom: 8px; + + .navbar-toggler { + display: flex !important; + align-items: center; + justify-content: center; + margin-left: auto; + padding: .5rem; + } + + .navbar-collapse.collapse:not(.show) { display: none !important; } + + .navbar-collapse.collapse.show { + display: flex !important; + flex-basis: 100%; + flex-direction: column; + } + + .navbar-nav, + .navbar-collapse.collapse.show .navbar-nav { + flex-direction: column; + align-items: stretch; + width: 100%; + margin: 0 !important; + padding: 8px 0 12px; + } + + .nav-item { width: 100%; margin: 0 !important; } + .nav-link { padding: .75rem 0; } + + .dropdown-menu { + position: static !important; + float: none; + margin: 0 0 6px; + padding: 0 0 0 .75rem; + border: 0; + box-shadow: none; + } + + .nav-search-item { width: 100%; height: auto; margin: 8px 0 0 !important; } + .nav-search-item #docsearch { width: 100%; max-width: none; margin: 0; .DocSearch-Button { width: 100%; } } + } +} + +// DocSearch button: the search glyph of the kit (SearchIcon) instead of Algolia's own. +nav.navbar.td-navbar .nav-search-item #docsearch { + .DocSearch-Search-Icon { display: none; } + .DocSearch-Button-Container::before { + content: ""; + display: inline-block; + vertical-align: middle; + flex: none; + width: 20px; + height: 20px; + background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%236b7280' d='M10.25 2a8.25 8.25 0 0 1 6.34 13.53l5.69 5.69a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-5.69-5.69A8.25 8.25 0 1 1 10.25 2ZM3.5 10.25a6.75 6.75 0 1 0 13.5 0 6.75 6.75 0 0 0-13.5 0Z'/%3e%3c/svg%3e") center / contain no-repeat; + } +} diff --git a/assets/scss/redesign/_content.scss b/assets/scss/redesign/_content.scss new file mode 100644 index 000000000..48d0fb32b --- /dev/null +++ b/assets/scss/redesign/_content.scss @@ -0,0 +1,316 @@ +// ---------- Content pages: docs, blog, community, support, compliance ---------- + +// Page layout. The sidebars stay Docsy's; they only change colour and weight. +.td-main main { background: transparent; } + +.td-content { + font-size: 16px; + line-height: 1.7; + color: var(--cz-text); + + h1 { + margin: 0 0 .6em; + font-size: clamp(32px, 3.4vw, 48px); + font-weight: 900; + line-height: 1.08; + letter-spacing: -0.04em; + color: var(--cz-ink); + } + + h2 { margin: 2.2rem 0 .8rem; font-size: 28px; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; color: var(--cz-ink); } + h3 { margin: 1.8rem 0 .6rem; font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: var(--cz-ink); } + h4, h5 { margin: 1.5rem 0 .5rem; font-size: 18px; font-weight: 700; color: var(--cz-ink); } + + // Long identifiers in headings (e.g. NetworkAttachmentDefinition) must wrap, not widen the page. + h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; } + + @include media-breakpoint-down(md) { + h2 { font-size: 24px; } + h3 { font-size: 19px; } + } + + p, li { color: var(--cz-text); } + strong, b { color: var(--cz-ink); } + + a:not(.btn):not(.cz-link):not(.taxonomy-term) { + color: var(--cz-ink); + text-decoration: underline; + text-decoration-color: #b9bec6; + text-underline-offset: 3px; + + &:hover { text-decoration-color: var(--cz-ink); } + } + + hr { border-color: var(--cz-line); opacity: 1; } + + blockquote { + margin: 1.5rem 0; + padding: .25rem 0 .25rem 1.25rem; + border-left: 3px solid var(--cz-line); + color: var(--cz-text); + } + + img { max-width: 100%; height: auto; border-radius: var(--cz-radius); } +} + +// Breadcrumbs +.td-breadcrumbs, .breadcrumb { + font-size: 13px; + background: transparent; + padding-left: 0; + + .breadcrumb-item, .breadcrumb-item a { color: var(--cz-muted); text-decoration: none; } + .breadcrumb-item.active, .breadcrumb-item.active a { color: var(--cz-ink); font-weight: 600; } + .breadcrumb-item + .breadcrumb-item::before { color: #b9bec6; content: "/"; } +} + +// Tables +.td-content table:not(.lntable):not(.highlight) { + width: 100%; + margin: 1.5rem 0; + border-collapse: separate; + border-spacing: 0; + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + font-size: 15px; + line-height: 1.55; + overflow: hidden; + + thead th, thead td { + padding: 12px 14px; + border: 0; + border-bottom: 1px solid var(--cz-line); + background: var(--cz-surface); + color: var(--cz-ink); + font-weight: 700; + text-align: left; + } + + tbody td, tbody th { + padding: 12px 14px; + border: 0; + border-top: 1px solid var(--cz-line); + background: #fff; + color: var(--cz-text); + vertical-align: top; + } + + tbody tr:first-child td, tbody tr:first-child th { border-top: 0; } + tbody tr td, tbody tr th { background: #fff !important; box-shadow: none; } + tbody tr { background: #fff !important; } + tbody td:first-child { color: var(--cz-ink); font-weight: 600; } + + // Raw-HTML tables (no wrapper): scroll inside the column rather than widen the page. + display: block !important; + max-width: 100%; + overflow-x: auto; +} + +// Markdown tables arrive wrapped (render-table.html): the wrapper draws the frame and +// scrolls, the table keeps its natural layout and fills the width. +.cz-table-wrap { + margin: 1.5rem 0; + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + overflow-x: auto; + + > table:not(.lntable):not(.highlight) { + display: table !important; + width: 100%; + max-width: none; + margin: 0; + border: 0; + border-radius: 0; + overflow: visible; + } +} + +// Plain pages (community, support, compliance, resources): a readable column. +.page.td-content.container { max-width: 960px; } + +// Code +.td-content code, code { + padding: 1px 5px; + border: 1px solid var(--cz-line); + border-radius: 4px; + background: #f1f3f5; + color: var(--cz-ink); + font-size: .875em; +} + +.td-content pre, .highlight pre, pre.chroma { + padding: 16px 18px; + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + background: var(--cz-surface) !important; + color: var(--cz-ink); + font-size: 14px; + line-height: 1.65; + + code { padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font-size: inherit; } +} + +// Alerts and notes +.td-content .alert, .alert { + border: 1px solid var(--cz-line); + border-left: 3px solid var(--cz-ink); + border-radius: var(--cz-radius); + background: var(--cz-surface); + color: var(--cz-text); + + .alert-heading, h4 { color: var(--cz-ink); } +} + +// Tabs +.nav-tabs { + border-bottom: 1px solid var(--cz-line); + + .nav-link { + padding: .6rem 1rem; + border: 0; + border-bottom: 2px solid transparent; + background: transparent; + color: var(--cz-muted); + font-weight: 600; + + &:hover { color: var(--cz-ink); } + &.active { border-bottom-color: var(--cz-ink); background: transparent; color: var(--cz-ink); font-weight: 700; } + } +} + +// Docs sidebar +.td-sidebar { + background: transparent !important; + border-right: 1px solid var(--cz-line); +} + +.td-sidebar-nav { + .td-sidebar-link { + color: var(--cz-text); + font-size: 14px; + font-weight: 600; + + &:hover { color: var(--cz-ink); text-decoration: underline; text-underline-offset: 3px; } + &.tree-root { color: var(--cz-ink); font-weight: 800; } + } + + .active, .td-sidebar-nav-active-item { color: var(--cz-ink) !important; font-weight: 800; } + .td-sidebar-link__page { font-weight: 500; } +} + +.version-switcher__toggle { + border: 1px solid var(--cz-line) !important; + border-radius: var(--cz-radius) !important; + background: #fff !important; + color: var(--cz-ink) !important; + font-weight: 600; +} + +.version-switcher__menu { + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + box-shadow: 0 12px 32px rgba(17, 17, 17, .08); +} + +// Right column: page links and table of contents +.td-sidebar-toc { + .td-page-meta a, .td-page-meta { color: var(--cz-text); font-size: 13px; font-weight: 600; text-decoration: none; } + a { color: var(--cz-text); } + a.active, a:hover { color: var(--cz-ink); } + border-left: 1px solid var(--cz-line); +} + +#TableOfContents a { font-size: 13px; } +#TableOfContents a.active, #TableOfContents li.active > a { color: var(--cz-ink); font-weight: 700; } + +.td-page-meta a { color: var(--cz-text); } + +// Blog +.td-blog, .td-content .blog-post-card { + .blog-post-card h5 { margin: 0 0 .25rem; font-size: 24px; font-weight: 800; line-height: 1.25; letter-spacing: -0.025em; } +} + +.blog-post-card { + padding-bottom: 8px; + border-bottom: 1px solid var(--cz-line); + + h5 a { color: var(--cz-ink); text-decoration: none !important; &:hover { text-decoration: underline !important; text-underline-offset: 3px; } } + .media-body > p:last-child a, .media-body a.read-more { font-weight: 700; } +} + +.taxonomy-title, .td-content h5.taxonomy-title { display: inline; margin: 0 8px 0 0; font-size: 13px; font-weight: 700; color: var(--cz-muted); letter-spacing: .02em; } +.td-sidebar-toc h5, .td-sidebar-toc .taxonomy-title { color: var(--cz-ink); font-size: 14px; font-weight: 800; } + +.taxonomy-term, +.td-sidebar-toc .taxonomy-term, +a.taxonomy-term { + display: inline-block; + padding: 2px 10px; + border: 1px solid var(--cz-line); + border-radius: 4px; + background: #fff; + color: var(--cz-text) !important; + font-size: 13px; + font-weight: 600; + text-decoration: none !important; + + &::before, &::after { display: none !important; } + &:hover { background: var(--cz-surface); color: var(--cz-ink) !important; } +} + +.blog-filter, .filter-container { + border-radius: var(--cz-radius); + + select, .form-select { + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + background-color: #fff; + color: var(--cz-ink); + font-weight: 600; + } +} + +// Support, community and resource pages use plain tables and lists inside .td-content, +// so they pick up the table and link styles above. + +// Pagination +.pagination .page-link { + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + color: var(--cz-ink); + margin: 0 2px; + + &:hover { background: var(--cz-surface); } +} +.pagination .page-item.active .page-link { background: var(--cz-ink); border-color: var(--cz-ink); color: #fff; } + +// Page meta footer +.td-page-meta, .td-content .lastmod, .td-content > footer { color: var(--cz-muted); font-size: 13px; } + +// "Article types:" / "Topics:" labels in the blog list: small and muted, on the same line as the chips. +.td-content .taxonomy .taxonomy-title, +header.article-meta .taxonomy-title { + display: inline-block !important; + margin: 0 8px 0 0 !important; + font-size: 13px !important; + font-weight: 700 !important; + letter-spacing: .02em; + color: var(--cz-muted) !important; + vertical-align: middle; +} + +// Year headings in the blog list ("Posts in 2026"). +.blog-year-group > h2 { + margin: 2rem 0 .75rem; + font-size: 32px; + font-weight: 800; + letter-spacing: -0.03em; + color: var(--cz-ink); +} + +// Sidebar toggle (docs and blog, below md): ThreeBarsIcon from the kit. +.td-sidebar__toggle { color: var(--cz-ink); line-height: 1; svg { display: block; width: 24px; height: 24px; } } + +// Octicons used in the page links (right column) and the blog RSS button. +.cz-oct { display: inline-flex; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; svg { width: 16px; height: 16px; fill: currentColor; } } +.td-rss-button .cz-oct { width: 20px; height: 20px; margin: 0; vertical-align: middle; svg { width: 20px; height: 20px; } } diff --git a/assets/scss/redesign/_home.scss b/assets/scss/redesign/_home.scss new file mode 100644 index 000000000..88f8bc785 --- /dev/null +++ b/assets/scss/redesign/_home.scss @@ -0,0 +1,457 @@ +// ---------- Home ---------- +// Block order and sizes follow the Figma frame "Desktop / Homepage — Contrast & circuits". + +// The navbar is fixed (70px), and the home sections run edge to edge. +body.td-home .td-outer { padding-left: 0; padding-right: 0; } +body.td-home .td-main { margin-top: 0; } + +// Hero ------------------------------------------------------------------ +.cz-hero { + position: relative; + overflow: hidden; + background: #fff; + text-align: center; + + // Left and right artwork (light surface, gradient fade). + &::before { @include cz-art("circuits-on-light.svg", 660, 343.18, .25); left: 0; top: 0; transform: matrix(0, -1, 1, 0, -140, 660); } + &::after { @include cz-art("circuits-on-light.svg", 660, 343.18, .25); left: 100%; top: 0; transform: matrix(0, 1, -1, 0, 140.18, 0); } + + @include media-breakpoint-down(md) { + min-height: 0; + &::before { @include cz-art("circuits-on-light.svg", 530, 275.58, .13); left: 0; top: 0; transform: matrix(0, -1, 1, 0, -220, 560); } + &::after { @include cz-art("circuits-on-light.svg", 530, 275.58, .13); left: 100%; top: 0; transform: matrix(0, 1, -1, 0, 185.58, 30); } + } + + &__inner { + position: relative; + z-index: 1; + max-width: 1000px; + padding: 142px 32px 72px; // 70px fixed navbar + 72px + display: flex; + flex-direction: column; + align-items: center; + + @include media-breakpoint-down(md) { padding: 118px 20px 40px; } + } + + &__title { + margin: 14px 0 0; + font-size: clamp(48px, 7vw, 98px); + font-weight: 900; + line-height: 1.01; + letter-spacing: -0.055em; + color: var(--cz-ink); + + @include media-breakpoint-down(md) { font-size: clamp(38px, 11vw, 52px); letter-spacing: -0.045em; } + } + + &__lead { + max-width: 720px; + margin-top: 28px; + font-size: 21px; + line-height: 1.5; + letter-spacing: -0.015em; + color: var(--cz-text); + + p { margin: 0; } + @include media-breakpoint-down(md) { margin-top: 20px; font-size: 18px; } + } + + &__actions { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 18px; + margin-top: 32px; + + @include media-breakpoint-down(md) { gap: 12px; margin-top: 26px; } + } + + &__note { + margin: 32px 0 0; + font-size: 13px; + color: var(--cz-muted); + + a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } + } +} + +// Screenshots ----------------------------------------------------------- +.cz-shots { + padding: 0 0 64px; + background: #fff; + + .container { max-width: var(--cz-container); } + + &__frame { + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + overflow: hidden; + background: var(--cz-surface); + + .screenshot-img { display: block; width: 100%; height: auto; } + } + + &__bar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + margin-top: 22px; + + .carousel-indicators { + position: static; + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + gap: 6px; + margin: 0; + + [data-bs-target] { + flex: none; + box-sizing: content-box; + width: 10px; + height: 4px; + margin: 0; + padding: 0; + border: 0; + border-radius: 2px; + background: #d3d7dc; + opacity: 1; + text-indent: 0; + transition: width .15s, background-color .15s; + + &.active { width: 22px; background: var(--cz-ink); } + } + } + } + + &__nav { display: flex; gap: 8px; } +} + +// Introduction: description, badges, positioning ------------------------ +.cz-intro { + padding: 0 0 56px; + background: #fff; + + .container { max-width: var(--cz-container); } + + &__main { display: flex; flex-wrap: wrap; align-items: center; padding: 8px 0 36px; } + + &__text { + flex: 1 1 520px; + min-width: 0; + padding-right: 48px; + font-size: 19px; + line-height: 1.6; + letter-spacing: -0.01em; + color: var(--cz-text); + + p { margin: 0; } + } + + &__badges { + flex: 0 1 460px; + align-self: stretch; + display: flex; + align-items: center; + justify-content: center; + gap: 36px; + padding-left: 32px; + border-left: 1px solid var(--cz-line); + + img { display: block; width: auto; } + .cz-intro__k8s { height: 84px; } + .cz-intro__cncf { height: 34px; } + } + + &__taglines { + display: grid; + grid-template-columns: repeat(3, 1fr); + margin: 0; + padding: 0; + list-style: none; + border-top: 1px solid var(--cz-line); + border-bottom: 1px solid var(--cz-line); + font-size: 16px; + color: var(--cz-text); + + li { padding: 22px 0; } + li:nth-child(2) { text-align: center; border-left: 1px solid var(--cz-line); } + li:nth-child(3) { text-align: right; border-left: 1px solid var(--cz-line); } + } + + @include media-breakpoint-down(lg) { + &__text { flex-basis: 100%; padding-right: 0; } + &__badges { flex-basis: 100%; justify-content: flex-start; margin-top: 28px; padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--cz-line); } + } + + @include media-breakpoint-down(md) { + &__text { font-size: 17px; } + &__taglines { grid-template-columns: 1fr; li, li:nth-child(2), li:nth-child(3) { padding: 16px 0; text-align: left; border-left: 0; } li + li { border-top: 1px solid var(--cz-line); } } + } +} + +// Dark call to action (live demo) --------------------------------------- +.section-live-demo { + position: relative; + overflow: hidden; + background: var(--cz-dark); + color: #fff; + text-align: center; + + &::before { @include cz-art("circuits-on-dark.svg", 600, 311.98, .14); left: 0; top: 0; transform: matrix(1, 0, 0, 1, -350, -60); } + &::after { @include cz-art("circuits-on-dark.svg", 600, 311.98, .14); left: 100%; top: 100%; transform: matrix(-1, 0, 0, -1, 300, 61.98); } + + @include media-breakpoint-down(md) { + &::before { display: none; } + &::after { @include cz-art("circuits-on-dark.svg", 560, 291.18, .08); left: 100%; top: 100%; transform: matrix(-1, 0, 0, -1, 450, 81.18); } + } + + .td-box, + .td-box--primary { + position: relative; + z-index: 1; + margin: 0; + padding: 96px 0 90px; + background: transparent !important; + background-image: none !important; + color: #fff; + + @include media-breakpoint-down(md) { padding: 56px 0 52px; } + } + + .td-arrow-down::before { display: none; } + .container { max-width: 880px; } + + .section-label { + margin: 0; + font-size: clamp(30px, 3.2vw, 40px); + font-weight: 800; + line-height: 1.18; + letter-spacing: -0.035em; + color: #fff; + } + + .live-demo-lead { + max-width: 780px; + margin: 20px auto 0; + font-size: 16px; + line-height: 1.7; + color: #e0e0e0; + } + + .live-demo-cta { margin-top: 28px; } + + .live-demo-cta .btn { + display: inline-flex; + align-items: center; + height: 50px; + padding: 0 26px; + border: 0; + border-radius: var(--cz-radius); + background: #fff !important; + color: var(--cz-ink) !important; + font-size: 17px; + font-weight: 700; + + &:hover { background: #eee !important; } + } +} + +// Use cases accordion --------------------------------------------------- +.cz-usecases { + padding: 90px 0 80px; + background: #fff; + + .container { max-width: var(--cz-container); } + .cz-section-lead { max-width: 760px; } + + @include media-breakpoint-down(md) { padding: 56px 0 48px; } +} + +.cz-accordion { + border-top: 1px solid var(--cz-line); + + &__item { border-bottom: 1px solid var(--cz-line); } + + &__summary { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + padding: 22px 0; + list-style: none; + cursor: pointer; + + &::-webkit-details-marker { display: none; } + &:focus-visible { outline: 2px solid var(--cz-ink); outline-offset: 2px; } + } + + &__title { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: var(--cz-ink); } + &__chev { display: inline-flex; flex: none; width: 24px; height: 24px; color: var(--cz-ink); transition: transform .15s; svg { width: 24px; height: 24px; } } + &__item[open] &__chev { transform: rotate(180deg); } + + &__body { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px 48px; + padding: 0 0 28px; + + p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--cz-text); } + @include media-breakpoint-down(md) { grid-template-columns: 1fr; gap: 14px; } + } + + &__outcome .cz-link { display: inline-block; margin-top: 14px; } +} + +// Benefits and features ------------------------------------------------- +.cz-benefits, +.cz-features { + padding: 90px 0 80px; + + .container { max-width: var(--cz-container); } + + @include media-breakpoint-down(md) { padding: 56px 0 48px; } +} + +.cz-benefits { background: var(--cz-surface-2); } +.cz-features { background: #fff; } + +.cz-cols { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 48px; + margin-top: 36px; + + @include media-breakpoint-down(lg) { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; } + @include media-breakpoint-down(md) { grid-template-columns: 1fr; gap: 32px; } +} + +.cz-col { + &__icon { display: block; width: 28px; height: 28px; margin-bottom: 14px; color: var(--cz-ink); svg { display: block; width: 28px; height: 28px; } } + &__title { margin: 0 0 12px; font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: var(--cz-ink); } + &__text { font-size: 15px; line-height: 1.7; color: var(--cz-text); p { margin: 0; } a { color: var(--cz-ink); text-decoration: underline; text-underline-offset: 3px; } } +} + +// Community (dark) and the talk ------------------------------------------ +.section-community { + position: relative; + overflow: hidden; + background: var(--cz-dark-2); + color: #fff; + + &::before { @include cz-art("circuits-on-dark.svg", 660, 343.18, .10); left: 0; top: 100%; transform: matrix(0, -1, 1, 0, -111.59, 131.71); } + &::after { @include cz-art("circuits-on-dark.svg", 660, 343.18, .12); left: 100%; top: 100%; transform: matrix(-.5, .866, -.866, -.5, 313.6, -418.28); } + + @include media-breakpoint-down(md) { + &::before { display: none; } + &::after { @include cz-art("circuits-on-dark.svg", 560, 291.18, .08); left: 0; top: 100%; transform: matrix(1, 0, 0, 1, 260, -250.12); } + } + + .td-box, + .td-box--dark { + position: relative; + z-index: 1; + margin: 0; + padding: 0; + background: transparent !important; + color: #fff; + } + + .td-arrow-down::before { display: none; } + + // Heading block + > .td-box:first-of-type { padding-top: 90px; } + > .td-box:first-of-type .container { max-width: var(--cz-container); text-align: left !important; padding-bottom: 40px; } + + .section-label { + margin: 0; + font-size: clamp(30px, 3.2vw, 40px); + font-weight: 800; + line-height: 1.18; + letter-spacing: -0.035em; + color: #fff; + } + + p { color: #d4d4d4; } + > .td-box:first-of-type p { max-width: 760px; margin: 14px 0 0; font-size: 16px; line-height: 1.7; } + + // Three columns + .subsection-community-row { + position: relative; + z-index: 1; + max-width: var(--cz-container); + margin: 0 auto; + padding: 0 12px; + + .td-box { padding: 0; } + .td-box > .col { padding: 0; } + } + + .community-row { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 40px 48px; + + @include media-breakpoint-down(md) { grid-template-columns: 1fr; gap: 32px; } + } + + .community-item { + text-align: left !important; + + .h1 { margin: 0 0 12px; font-size: 24px; line-height: 1; color: #fff; } + .cz-icon { display: block; width: 28px; height: 28px; color: #fff; svg { display: block; width: 28px; height: 28px; } } + .h3, h4 { margin: 0 0 12px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: #fff; } + p { margin: 0; font-size: 15px; line-height: 1.7; color: #d4d4d4; } + a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } + i { color: #fff; } + } + + @include media-breakpoint-down(md) { + > .td-box:first-of-type { padding-top: 56px; } + > .td-box:first-of-type .container { padding-bottom: 28px; } + } +} + +// Video poster: black, play icon and the word YouTube, as in the Figma frame. +.cz-video__poster { + display: flex; + align-items: center; + justify-content: center; + gap: 18px; + background: #000; + border-radius: var(--cz-radius); + color: #fff; + text-decoration: none; + + &:hover, &:focus-visible { color: #fff; text-decoration: none; } + &:hover .cz-video__play { transform: scale(1.06); } +} +.cz-video__play { display: inline-flex; width: 52px; height: 52px; transition: transform .15s; svg { width: 52px; height: 52px; fill: currentColor; } } +.cz-video__label { font-size: 18px; font-weight: 700; } + +.cz-video { + position: relative; + z-index: 1; + max-width: 850px; + margin: 56px auto 0; + padding: 0 12px 90px; + + .ratio { overflow: hidden; border-radius: var(--cz-radius); background: #000; } + + @include media-breakpoint-down(md) { margin-top: 36px; padding-bottom: 56px; } +} + +// Longer translations of the headline need a smaller cap than the English one. +html[lang="ru"] .cz-hero__title { font-size: clamp(40px, 5.2vw, 76px); } +html[lang="de"] .cz-hero__title, +html[lang="hi"] .cz-hero__title { font-size: clamp(42px, 6.2vw, 88px); } +html[lang="zh-cn"] .cz-hero__title { font-size: clamp(40px, 5.6vw, 80px); } + +// Inline code on the dark Community band must not use the light chip. +.section-community code { + border-color: rgba(255, 255, 255, .25); + background: rgba(255, 255, 255, .1); + color: #fff; +} diff --git a/assets/scss/redesign/_oss.scss b/assets/scss/redesign/_oss.scss new file mode 100644 index 000000000..bd50d78b0 --- /dev/null +++ b/assets/scss/redesign/_oss.scss @@ -0,0 +1,141 @@ +// ---------- Resources: Telemetry, DevStats, OpenSSF, OSS Insight ---------- +// Same data and markup as before (rendered by oss-health-app.html); only the look moves +// to the kit: flat white page, hairline borders, 6px corners, dark segmented switcher. + +.oss-health-shell { + margin-top: 70px; // fixed navbar + padding-bottom: 5rem; + background: #fff; + + &__hero { padding: 3rem 0 1rem; } + + &__eyebrow { + margin-bottom: 18px; + color: var(--cz-muted); + font-size: 13px; + font-weight: 700; + letter-spacing: .1em; + } + + h1 { + margin: 0 0 18px; + font-size: clamp(44px, 6vw, 72px); + font-weight: 900; + line-height: 1.04; + letter-spacing: -0.045em; + color: var(--cz-ink); + } + + &__lede { max-width: 680px; margin: 0; font-size: 21px; line-height: 1.5; letter-spacing: -0.015em; color: var(--cz-text); } + + &__meta-item, &__meta-link { + padding: 0; + border: 0; + border-radius: 0; + background: none; + box-shadow: none; + color: var(--cz-muted); + font-size: 14px; + font-weight: 400; + } + + &__meta-link { color: var(--cz-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } + + &__aside { + padding: 20px 22px; + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + background: var(--cz-surface); + box-shadow: none; + color: var(--cz-text); + + p { margin: 10px 0 0; font-size: 15px; line-height: 1.7; color: var(--cz-text); } + } + + &__pulse { padding: 0; background: none; box-shadow: none; color: var(--cz-ink); font-size: 14px; font-weight: 700; } + &__pulse-dot { background: #44cc11; box-shadow: none; } +} + +.oss-health-app { padding-top: 1rem; } + +.oss-health-stage { + padding: 40px 0 0; + border: 0; + border-top: 1px solid var(--cz-line); + border-radius: 0; + background: transparent; + box-shadow: none; + + h2 { font-size: 36px; font-weight: 800; letter-spacing: -0.035em; color: var(--cz-ink); } + &__kicker { color: var(--cz-muted); font-size: 13px; font-weight: 700; letter-spacing: .1em; } +} + +.oss-health-switcher { + padding: 3px; + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + background: #fff; + box-shadow: none; + + &__button { + border-radius: 4px; + background: transparent; + color: var(--cz-ink); + font-weight: 700; + + &.is-active { background: var(--cz-ink); color: #fff; box-shadow: none; } + } +} + +.oss-health-stat, +.oss-health-panel, +.oss-health-mini__item, +.oss-health-state__panel, +.oss-health-state__badge { + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + background: #fff; + box-shadow: none; +} + +.oss-health-mini__item { background: var(--cz-surface); } + +.oss-health-stat { + &__label { color: var(--cz-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; } + &__value { color: var(--cz-ink); font-size: 44px; font-weight: 900; letter-spacing: -0.04em; } + &__hint { color: var(--cz-muted); } +} + +.oss-health-panel__header h2 { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: var(--cz-ink); } + +.oss-health-table { + th { color: var(--cz-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; } + td { color: var(--cz-text); font-size: 15px; } + td:last-child { color: var(--cz-ink); font-weight: 700; font-variant-numeric: tabular-nums; } + td a { color: var(--cz-ink); text-decoration: underline; text-decoration-color: #b9bec6; text-underline-offset: 3px; } +} + +.oss-health-language-pill { + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + background: #fff; + box-shadow: none; + color: var(--cz-text); +} + +.oss-health-note { border-left: 3px solid var(--cz-line); color: var(--cz-muted); } + +.oss-health-state { + &__badge { background: var(--cz-surface); } + &__pill, &__pill.is-passing, &__pill.is-in-progress, &__pill.is-unknown { border-radius: var(--cz-radius); background: var(--cz-ink); color: #fff; box-shadow: none; } +} + +.oss-health-actions .btn { border-radius: var(--cz-radius); } + +// Neutral text colours (the earlier palette used navy). +.oss-health-mini__item strong, +.oss-health-table td, +.oss-health-table td:first-child { color: var(--cz-text); } +.oss-health-mini__item strong { color: var(--cz-ink); } +.oss-health-table td:last-child { color: var(--cz-ink); } +.oss-health-mini__item span { color: var(--cz-muted); } diff --git a/assets/scss/redesign/_redesign.scss b/assets/scss/redesign/_redesign.scss new file mode 100644 index 000000000..b4017fb84 --- /dev/null +++ b/assets/scss/redesign/_redesign.scss @@ -0,0 +1,8 @@ +// Cozystack site redesign (monochrome, Nunito Sans, circuit artwork). +// Imported last from main.scss so it overrides Docsy and the older partials. +// Tokens and component names follow the "Cozystack website kit" in Figma. +@import "base"; +@import "chrome"; +@import "home"; +@import "content"; +@import "oss"; diff --git a/content/de/_index.md b/content/de/_index.md index fd2089fbe..92cf78e2d 100644 --- a/content/de/_index.md +++ b/content/de/_index.md @@ -1,5 +1,5 @@ --- -title: "Cozystack: Kostenlose Cloud-Plattform auf Basis von Kubernetes" +title: "Cozystack: Freie Cloud-Plattform auf Basis von Kubernetes" description: > Verwandeln Sie eine Reihe von Bare-Metal-Servern in ein intelligentes System mit einer einfachen REST API zum Bereitstellen von Kubernetes-Clustern, Databases-as-a-Service, virtuellen Maschinen, Load Balancern, HTTP-Caching-Diensten und weiteren Diensten. @@ -8,7 +8,7 @@ seo: title: "Cozystack — Open-Source Private Cloud auf Kubernetes" description: "Open-Source-Cloud-Plattform auf Kubernetes für Managed VMs, Datenbanken, S3-Storage und GPU-Workloads. CNCF-Sandbox-Projekt." keywords: ["private cloud", "managed kubernetes", "kubernetes plattform", "open source cloud"] -source_digest: "sha256:7b7c6ca6147cb877fc4d71cba375f8be099bfd8b83c05bf5f19dff5030b4ed4e" +source_digest: "sha256:75141670f2b71f7aea8c92bb724d027ebbc863ac8c7d3a588b4bedbc34a8b66c" translation_status: current l10n: transcreate taglines: @@ -73,72 +73,66 @@ use_cases: benefits: - title: API-first - icon: fas fa-code + icon: api-first description: > Cozystack basiert auf Kubernetes und setzt auf die enge Interaktion mit dessen API. Es versucht nicht, alle Elemente hinter einer hübschen UI oder diversen Anpassungen vollständig zu verbergen. Stattdessen bietet es eine standardisierte Schnittstelle und befähigt Nutzer, mit den grundlegenden Primitiven zu arbeiten. - title: Standardisierung und Vereinheitlichung - icon: fas fa-certificate + icon: standardization description: > Alle Komponenten der Plattform basieren auf bewährten Open-Source-Tools und -Technologien, die in der Branche weithin bekannt sind. Wir setzen auf die etabliertesten und erprobtesten Ansätze, halten die gesamte Plattform dadurch sehr einfach und vermeiden Vendor-Lock-in. - title: Zusammenarbeit statt Konkurrenz - icon: fas fa-handshake + icon: collaborate description: > Wir sind stolz auf unsere Community und arbeiten eng mit den Projekten in ihrem Umfeld zusammen. Wenn wir eine Plattformfunktion entwickeln, die in einem Upstream-Projekt nützlich sein kann, steuern wir sie lieber zu diesem Projekt bei, anstatt sie in der Plattform zu behalten. features: - title: Einfach zu installieren - icon: fas fa-wrench + icon: install description: > Mit [talos-bootstrap](https://github.com/cozystack/talos-bootstrap/) bieten wir die denkbar einfachste Installationsmethode, mit der Sie Cozystack per PXE oder ISO auf Servern in einem leeren Rechenzentrum bereitstellen können. Ein immutable Betriebssystem hilft, die Systemkonsistenz zu wahren und sicherzustellen, dass alles wie erwartet funktioniert. - title: Einfach zu integrieren - icon: fas fa-plug + icon: integrate description: > Wir stellen eine native RESTful API von Kubernetes bereit, die für ihre Deklarativität bekannt ist. Für die Integration mit Ihrem Billing genügt es daher, Ihr System anzuweisen, ein bestimmtes YAML-Manifest mit dem gewünschten Dienst an die Kubernetes API zu senden. Den Rest erledigt Cozystack für Sie. - title: Einfach zu erweitern - icon: fas fa-up-right-and-down-left-from-center + icon: extend description: > Jedes Paket der Plattform besteht aus einer Reihe von YAML-Dateien. Wer mit den Kubernetes-Primitiven vertraut ist, kann die Plattform daher anpassen oder erweitern. Die Paketauslieferung übernimmt zuverlässig FluxCD, ein bekanntes und weit verbreitetes Tool. - title: Hohe Performance, geringer Overhead - icon: fas fa-gauge-high + icon: performance description: > Performance ist uns wichtig. Deshalb setzen wir auf die performantesten Technologien und wägen dabei Stabilität und Funktionalität ab. Zudem ermöglicht unser einzigartiges Tenant-Modell eine effiziente Zuweisung von Cloud-Ressourcen für die Control Plane und sorgt so für Kosteneffizienz und das nötige Maß an Sicherheit. - title: Integriertes Monitoring & Alerts - icon: fas fa-area-chart + icon: monitoring description: > Jede Instanz jedes Dienstes wird von vorkonfigurierten Dashboards und Alerts begleitet. Sie können für jeden Tenant separate Monitoring-Hubs anlegen oder sie zu einem zusammenfassen. - title: Integrierte UI für die App-Verwaltung - icon: fas fa-window-maximize + icon: ui description: > Das primäre Ziel der Plattform ist eine schöne API, doch sie verfügt auch über ein Dashboard zum Bereitstellen von Anwendungen. Die Web-UI erleichtert den schnellen Einstieg in die Plattform und demonstriert ihre Möglichkeiten anschaulich. --- -
- {{% blocks/hero title="Cozystack: Kostenlose Cloud-Plattform auf Basis von Kubernetes" color="primary" - height="auto" link_title="Erste Schritte" link_url="/de/docs/v1.4/getting-started/" %}} - Verwandeln Sie eine Reihe von Bare-Metal-Servern in ein intelligentes System mit einer einfachen REST API zum Bereitstellen von Kubernetes-Clustern, Databases-as-a-Service, virtuellen Maschinen, Load Balancern, HTTP-Caching-Diensten und weiteren Diensten. - - Nutzen Sie Cozystack, um Ihre eigene Cloud aufzubauen oder kosteneffiziente Entwicklungsumgebungen bereitzustellen. - - {{% /blocks/hero %}} - -
- {{< blocks/lead >}} - {{< /blocks/lead >}} -
-
+{{< blocks/hero title="Cozystack: Freie Cloud-Plattform auf Basis von Kubernetes" link_title="Erste Schritte" link_url="/de/docs/v1.4/getting-started/" >}} +Nutzen Sie Cozystack, um Ihre eigene Cloud aufzubauen oder kosteneffiziente Entwicklungsumgebungen bereitzustellen. +{{< /blocks/hero >}} {{< home/screenshot-gallery >}} + +{{< home/intro >}} +Verwandeln Sie eine Reihe von Bare-Metal-Servern in ein intelligentes System mit einer einfachen REST API zum Bereitstellen von Kubernetes-Clustern, Databases-as-a-Service, virtuellen Maschinen, Load Balancern, HTTP-Caching-Diensten und weiteren Diensten. +{{< /home/intro >}} +
{{< blocks/lead color="primary" >}} @@ -172,25 +166,26 @@ features:
{{< blocks/section color="dark" type="community-row">}} - {{< home/community icon="fab fa-github" title="GitHub Discussions" >}} + {{< home/community icon="github-discussions" title="GitHub Discussions" >}} Beteiligen Sie sich an den GitHub Discussions. Alles rund um Cozystack – von Spezifikationen über Feature-Planung bis hin zu Show & Tell – findet hier statt. {{< /home/community >}} - {{< home/community icon="fab fa-slack" title="Slack" >}} + {{< home/community icon="slack" title="Slack" >}} Wenn Sie in Echtzeit mit dem Cozystack-Team und der Community sprechen möchten, kommen Sie zu uns auf Slack. So lernen Sie alle am besten kennen. Holen Sie sich eine Slack-Einladung oder gehen Sie in den Kanal #cozystack. {{< /home/community >}} - {{< home/community icon="fa fa-paper-plane" title="Telegram" >}} + {{< home/community icon="telegram" title="Telegram" >}} Wir haben außerdem eine große Community auf Telegram. Treten Sie der Gruppe @cozystack bei, um sich mit anderen Nutzern auszutauschen, Fragen zu stellen und über Neuigkeiten und Entwicklungen auf dem Laufenden zu bleiben. {{< /home/community >}} {{< /blocks/section >}}
-
+ + {{< home/video >}} -{{< home/cncf >}} + diff --git a/content/de/support.md b/content/de/support.md index 48c4705bb..f7ec7bd7b 100644 --- a/content/de/support.md +++ b/content/de/support.md @@ -4,7 +4,7 @@ date: 2025-03-02T15:45:07+04:00 draft: false type: "page" weight: 50 -source_digest: "sha256:2cacdfc9855cebb5b4df0c21de9b889985cba9754a72581f10f1cd5ea6a0c286" +source_digest: "sha256:de998fb26d73dc851cf18a0437e5f7d1397e551876c7d8742e14f7816ae57ac8" translation_status: current l10n: mt --- @@ -13,4 +13,4 @@ l10n: mt | Organisation | Kontakt | Leistungsbeschreibung | | ------------ | ------- | ------------------ | | Aenix logo | [Website](https://aenix.io/contact/) [LinkedIn](https://www.linkedin.com/company/aenix-io)| Wir bieten jede Art von Unterstützung: Beratung, Entwicklung fehlender Funktionen, Design sowie Hilfe bei Installation und Integration. | -| Hidora | [Website](https://hidora.io/en/contact/) [LinkedIn](https://www.linkedin.com/company/hidora)| Wir übernehmen die Installation, bieten laufenden Support und Managed Services rund um die Uhr (24/7). | +| Hidora | [Website](https://hidora.io/en/contact/) [LinkedIn](https://www.linkedin.com/company/hidora)| Wir übernehmen die Installation, bieten laufenden Support und Managed Services rund um die Uhr (24/7). | diff --git a/content/en/_index.md b/content/en/_index.md index 057c89043..582f76157 100644 --- a/content/en/_index.md +++ b/content/en/_index.md @@ -64,72 +64,66 @@ use_cases: benefits: - title: API-first - icon: fas fa-code + icon: api-first description: > Cozystack is based on Kubernetes and involves close interaction with its API. It does not aim to completely hide the all elements behind a pretty UI or any sort of customizations. Instead, it provides a standard interface and educates users to work with basic primitives. - title: Standardization and Unification - icon: fas fa-certificate + icon: standardization description: > All components of the platform are based on proven open source tools and technologies which are widely known in the industry. We strive to use the most well-established and proven approaches, making the whole platform very simple and avoiding vendor lock-in. - title: Collaborate, not Compete - icon: fas fa-handshake + icon: collaborate description: > We are proud of our community and closely interact with projects around it. If we build a platform feature that can be useful in an upstream project, we prefer to contribute it to that project, rather than keep it in the platform. features: - title: Easy to Install - icon: fas fa-wrench + icon: install description: > With [talos-bootstrap](https://github.com/cozystack/talos-bootstrap/), we provide the ultimate easy installation method, allowing you to bootstrap Cozystack using PXE or ISO methods on servers in a bare data center. Using immutable OS helps maintain system consistency and ensure that everything works as expected. - title: Easy to Integrate - icon: fas fa-plug + icon: integrate description: > We provide a native Kubernetes RESTful API, widely recognized for its declarativity. Therefore, to integrate with your billing, it's enough to instruct your system to submit a specific YAML manifest defining the desired service to the Kubernetes API. Cozystack will do the rest of the work for you. - title: Easy to Extend - icon: fas fa-up-right-and-down-left-from-center + icon: extend description: > Each package in the platform consists of a set of YAML files. Therefore, everyone having some familiarity with Kubernetes primitives can modify or expand the platform. Package delivery is reliably handled by FluxCD, a well-known and widely used tool. - title: High Performance, Low Overhead - icon: fas fa-gauge-high + icon: performance description: > We care about performance. That's why we adopt the most performant technologies balancing stability and functionality. Moreover, our unique tenant model enables efficient allocation of cloud resources for the control plane, ensuring cost-efficiency and the necessary level of security. - title: Built-in Monitoring & Alerts - icon: fas fa-area-chart + icon: monitoring description: > Each instance of each service is accompanied by a set of pre-configured dashboards and alerts. You can create separate monitoring hubs for every tenant or combine them into one. - title: Built-In UI for App Management - icon: fas fa-window-maximize + icon: ui description: > While the primary goal of the platform is to provide a beautiful API, it also has a dashboard for deploying applications. The Web UI facilitates a quick dive into the platform and provides a visual demonstration of its capabilities. --- -
- {{% blocks/hero title="Cozystack: Free Cloud Platform based on Kubernetes" color="primary" - height="auto" link_title="Get started" link_url="/docs/get-started/" %}} - Transform a set of bare metal servers into an intelligent system with a simple REST API for spawning Kubernetes clusters, Databases-as-a-Service, virtual machines, load balancers, HTTP caching services, and other services with ease. - - Use Cozystack to build your own cloud or provide cost-effective development environments. - - {{% /blocks/hero %}} - -
- {{< blocks/lead >}} - {{< /blocks/lead >}} -
-
+{{< blocks/hero title="Cozystack: Free Cloud Platform based on Kubernetes" link_title="Get started" link_url="/docs/get-started/" >}} +Use Cozystack to build your own cloud or provide cost-effective development environments. +{{< /blocks/hero >}} {{< home/screenshot-gallery >}} + +{{< home/intro >}} +Transform a set of bare metal servers into an intelligent system with a simple REST API for spawning Kubernetes clusters, Databases-as-a-Service, virtual machines, load balancers, HTTP caching services, and other services with ease. +{{< /home/intro >}} +
{{< blocks/lead color="primary" >}} @@ -165,25 +159,26 @@ features:
{{< blocks/section color="dark" type="community-row">}} - {{< home/community icon="fab fa-github" title="GitHub Discussions" >}} + {{< home/community icon="github-discussions" title="GitHub Discussions" >}} Join the conversation in GitHub Discussions. Everything Cozystack related ranging from specifications and feature planning to Show & Tell happens here. {{< /home/community >}} - {{< home/community icon="fab fa-slack" title="Slack" >}} + {{< home/community icon="slack" title="Slack" >}} If you want to talk to the Cozystack team and community in real-time, join us on Slack. This is a great way to get to know everyone. Get a Slack invite, or go to the #cozystack channel. {{< /home/community >}} - {{< home/community icon="fa fa-paper-plane" title="Telegram" >}} + {{< home/community icon="telegram" title="Telegram" >}} We also have a large community on Telegram. Join the @cozystack group chat to engage with fellow users, ask questions, and stay updated on the latest news and developments. {{< /home/community >}} {{< /blocks/section >}}
-
+ + {{< home/video >}} -{{< home/cncf >}} + diff --git a/content/en/blog/2025-12-17-talm-v0-17-built-in-age-encryption-for-secrets.md b/content/en/blog/2025-12-17-talm-v0-17-built-in-age-encryption-for-secrets.md index 9b39cae12..c4a196aaa 100644 --- a/content/en/blog/2025-12-17-talm-v0-17-built-in-age-encryption-for-secrets.md +++ b/content/en/blog/2025-12-17-talm-v0-17-built-in-age-encryption-for-secrets.md @@ -4,8 +4,6 @@ slug: talm-v0-17-built-in-age-encryption-for-secrets date: 2025-12-17 author: "Andrei Kvapil (Ænix)" description: "Talm v0.17 introduces built-in age encryption for secure secrets management, making it easier to store sensitive configuration files in Git repositories while maintaining security best practices." -images: - - "https://cdn-images-1.medium.com/max/800/0*encryption.png" article_types: - release topics: @@ -18,8 +16,6 @@ topics: The latest release of [Talm](https://github.com/cozystack/talm), the configuration manager for Talos Linux, introduces a powerful new feature: built-in encryption using the [age](https://age-encryption.org/) encryption tool. This enhancement allows you to securely store sensitive configuration files like `secrets.yaml`, `talosconfig`, and `kubeconfig` in Git repositories while following security best practices. -![](https://cdn-images-1.medium.com/max/800/0*encryption.png) - ### Why Age Encryption? Managing secrets in Git repositories has always been a challenge. While storing configuration files in version control is convenient for GitOps workflows, sensitive data like API keys, certificates, and cluster credentials should never be committed in plain text. Traditional solutions like `git-crypt` or external secret management systems add complexity and dependencies. diff --git a/content/en/docs/next/operations/oidc/identity_providers/google.md b/content/en/docs/next/operations/oidc/identity_providers/google.md index 324c1647b..0c091937e 100644 --- a/content/en/docs/next/operations/oidc/identity_providers/google.md +++ b/content/en/docs/next/operations/oidc/identity_providers/google.md @@ -10,19 +10,19 @@ aliases: ## Configure Google - Head over to [Google Console](https://console.cloud.google.com/apis/dashboard), login in to the console using Google account and you will see Google Developer Console. Once logged in, head over the top left drop-down to create new project. -![1](/img/oidc/identity_providers/google/1.jpeg) +![1](/img/OIDC/identity_providers/google/1.jpeg) - Click on "New Project" to proceed. -![2](/img/oidc/identity_providers/google/2.jpeg) +![2](/img/OIDC/identity_providers/google/2.jpeg) - Enter the project name of your choice and select the Organisation if you have multiple organisations. Once done click on "Create" -![3](/img/oidc/identity_providers/google/3.jpeg) +![3](/img/OIDC/identity_providers/google/3.jpeg) - Once the project is created you will get a pop-up suggesting to configure the consent screen. If not then head over to the Dashboard and head over to "Explore and enable APIs" options. Then Click on "Credentials" > "Configure Consent Screen" and head over to the next step. -![4](/img/oidc/identity_providers/google/4.jpeg) +![4](/img/OIDC/identity_providers/google/4.jpeg) - Click on "External" as we want to allow any Google account to be able to sign in to our application and hit "Create". -![5](/img/oidc/identity_providers/google/5.jpeg) +![5](/img/OIDC/identity_providers/google/5.jpeg) - After this, we will be redirected to pages where we will have to configure different things - Application type: Public @@ -32,16 +32,16 @@ aliases: - Application Privacy Policy link: Your application privacy policy link - Now head over to the Create Credentials option in the navbar and click on "OAuth Client ID". -![6](/img/oidc/identity_providers/google/6.jpeg) +![6](/img/OIDC/identity_providers/google/6.jpeg) - Select Application type as a "Web application" and name the application according to your choice. Next, Add the link provided in the Keycloak tab under "Authorized Redirect URIs" and click "Create". The link should look something like this ```bash https://YOUR_KEYCLOAK_DOMAIN/auth/realms/cozy/broker/google/endpoint ``` -![7](/img/oidc/identity_providers/google/7.jpeg) +![7](/img/OIDC/identity_providers/google/7.jpeg) - As it is done, you will see a pop up with the information required in the next step. You will need to "Client ID" and "Client secret" in next step so make sure you make a safe copy of it. -![8](/img/oidc/identity_providers/google/8.jpeg) +![8](/img/OIDC/identity_providers/google/8.jpeg) ## Configure Keycloak Identity Provider Create a `KeycloakRealmIdentityProvider` resource with the following configuration: diff --git a/content/en/docs/v0/operations/oidc/identity_providers/google.md b/content/en/docs/v0/operations/oidc/identity_providers/google.md index 5251b6e6b..3248c527a 100644 --- a/content/en/docs/v0/operations/oidc/identity_providers/google.md +++ b/content/en/docs/v0/operations/oidc/identity_providers/google.md @@ -12,19 +12,19 @@ aliases: ## Configure Google - Head over to [Google Console](https://console.cloud.google.com/apis/dashboard), login in to the console using Google account and you will see Google Developer Console. Once logged in, head over the top left drop-down to create new project. -![1](/img/oidc/identity_providers/google/1.jpeg) +![1](/img/OIDC/identity_providers/google/1.jpeg) - Click on "New Project" to proceed. -![2](/img/oidc/identity_providers/google/2.jpeg) +![2](/img/OIDC/identity_providers/google/2.jpeg) - Enter the project name of your choice and select the Organisation if you have multiple organisations. Once done click on "Create" -![3](/img/oidc/identity_providers/google/3.jpeg) +![3](/img/OIDC/identity_providers/google/3.jpeg) - Once the project is created you will get a pop-up suggesting to configure the consent screen. If not then head over to the Dashboard and head over to "Explore and enable APIs" options. Then Click on "Credentials" > "Configure Consent Screen" and head over to the next step. -![4](/img/oidc/identity_providers/google/4.jpeg) +![4](/img/OIDC/identity_providers/google/4.jpeg) - Click on "External" as we want to allow any Google account to be able to sign in to our application and hit "Create". -![5](/img/oidc/identity_providers/google/5.jpeg) +![5](/img/OIDC/identity_providers/google/5.jpeg) - After this, we will be redirected to pages where we will have to configure different things - Application type: Public @@ -34,16 +34,16 @@ aliases: - Application Privacy Policy link: Your application privacy policy link - Now head over to the Create Credentials option in the navbar and click on "OAuth Client ID". -![6](/img/oidc/identity_providers/google/6.jpeg) +![6](/img/OIDC/identity_providers/google/6.jpeg) - Select Application type as a "Web application" and name the application according to your choice. Next, Add the link provided in the Keycloak tab under "Authorized Redirect URIs" and click "Create". The link should look something like this ```bash https://YOUR_KEYCLOAK_DOMAIN/auth/realms/cozy/broker/google/endpoint ``` -![7](/img/oidc/identity_providers/google/7.jpeg) +![7](/img/OIDC/identity_providers/google/7.jpeg) - As it is done, you will see a pop up with the information required in the next step. You will need to "Client ID" and "Client secret" in next step so make sure you make a safe copy of it. -![8](/img/oidc/identity_providers/google/8.jpeg) +![8](/img/OIDC/identity_providers/google/8.jpeg) ## Configure Keycloak Identity Provider Create a `KeycloakRealmIdentityProvider` resource with the following configuration: diff --git a/content/en/docs/v1.0/operations/oidc/identity_providers/google.md b/content/en/docs/v1.0/operations/oidc/identity_providers/google.md index c152f341f..187b0a29b 100644 --- a/content/en/docs/v1.0/operations/oidc/identity_providers/google.md +++ b/content/en/docs/v1.0/operations/oidc/identity_providers/google.md @@ -10,19 +10,19 @@ aliases: ## Configure Google - Head over to [Google Console](https://console.cloud.google.com/apis/dashboard), login in to the console using Google account and you will see Google Developer Console. Once logged in, head over the top left drop-down to create new project. -![1](/img/oidc/identity_providers/google/1.jpeg) +![1](/img/OIDC/identity_providers/google/1.jpeg) - Click on "New Project" to proceed. -![2](/img/oidc/identity_providers/google/2.jpeg) +![2](/img/OIDC/identity_providers/google/2.jpeg) - Enter the project name of your choice and select the Organisation if you have multiple organisations. Once done click on "Create" -![3](/img/oidc/identity_providers/google/3.jpeg) +![3](/img/OIDC/identity_providers/google/3.jpeg) - Once the project is created you will get a pop-up suggesting to configure the consent screen. If not then head over to the Dashboard and head over to "Explore and enable APIs" options. Then Click on "Credentials" > "Configure Consent Screen" and head over to the next step. -![4](/img/oidc/identity_providers/google/4.jpeg) +![4](/img/OIDC/identity_providers/google/4.jpeg) - Click on "External" as we want to allow any Google account to be able to sign in to our application and hit "Create". -![5](/img/oidc/identity_providers/google/5.jpeg) +![5](/img/OIDC/identity_providers/google/5.jpeg) - After this, we will be redirected to pages where we will have to configure different things - Application type: Public @@ -32,16 +32,16 @@ aliases: - Application Privacy Policy link: Your application privacy policy link - Now head over to the Create Credentials option in the navbar and click on "OAuth Client ID". -![6](/img/oidc/identity_providers/google/6.jpeg) +![6](/img/OIDC/identity_providers/google/6.jpeg) - Select Application type as a "Web application" and name the application according to your choice. Next, Add the link provided in the Keycloak tab under "Authorized Redirect URIs" and click "Create". The link should look something like this ```bash https://YOUR_KEYCLOAK_DOMAIN/auth/realms/cozy/broker/google/endpoint ``` -![7](/img/oidc/identity_providers/google/7.jpeg) +![7](/img/OIDC/identity_providers/google/7.jpeg) - As it is done, you will see a pop up with the information required in the next step. You will need to "Client ID" and "Client secret" in next step so make sure you make a safe copy of it. -![8](/img/oidc/identity_providers/google/8.jpeg) +![8](/img/OIDC/identity_providers/google/8.jpeg) ## Configure Keycloak Identity Provider Create a `KeycloakRealmIdentityProvider` resource with the following configuration: diff --git a/content/en/docs/v1.1/operations/oidc/identity_providers/google.md b/content/en/docs/v1.1/operations/oidc/identity_providers/google.md index 9db96aceb..0c3e014cc 100644 --- a/content/en/docs/v1.1/operations/oidc/identity_providers/google.md +++ b/content/en/docs/v1.1/operations/oidc/identity_providers/google.md @@ -10,19 +10,19 @@ aliases: ## Configure Google - Head over to [Google Console](https://console.cloud.google.com/apis/dashboard), login in to the console using Google account and you will see Google Developer Console. Once logged in, head over the top left drop-down to create new project. -![1](/img/oidc/identity_providers/google/1.jpeg) +![1](/img/OIDC/identity_providers/google/1.jpeg) - Click on "New Project" to proceed. -![2](/img/oidc/identity_providers/google/2.jpeg) +![2](/img/OIDC/identity_providers/google/2.jpeg) - Enter the project name of your choice and select the Organisation if you have multiple organisations. Once done click on "Create" -![3](/img/oidc/identity_providers/google/3.jpeg) +![3](/img/OIDC/identity_providers/google/3.jpeg) - Once the project is created you will get a pop-up suggesting to configure the consent screen. If not then head over to the Dashboard and head over to "Explore and enable APIs" options. Then Click on "Credentials" > "Configure Consent Screen" and head over to the next step. -![4](/img/oidc/identity_providers/google/4.jpeg) +![4](/img/OIDC/identity_providers/google/4.jpeg) - Click on "External" as we want to allow any Google account to be able to sign in to our application and hit "Create". -![5](/img/oidc/identity_providers/google/5.jpeg) +![5](/img/OIDC/identity_providers/google/5.jpeg) - After this, we will be redirected to pages where we will have to configure different things - Application type: Public @@ -32,16 +32,16 @@ aliases: - Application Privacy Policy link: Your application privacy policy link - Now head over to the Create Credentials option in the navbar and click on "OAuth Client ID". -![6](/img/oidc/identity_providers/google/6.jpeg) +![6](/img/OIDC/identity_providers/google/6.jpeg) - Select Application type as a "Web application" and name the application according to your choice. Next, Add the link provided in the Keycloak tab under "Authorized Redirect URIs" and click "Create". The link should look something like this ```bash https://YOUR_KEYCLOAK_DOMAIN/auth/realms/cozy/broker/google/endpoint ``` -![7](/img/oidc/identity_providers/google/7.jpeg) +![7](/img/OIDC/identity_providers/google/7.jpeg) - As it is done, you will see a pop up with the information required in the next step. You will need to "Client ID" and "Client secret" in next step so make sure you make a safe copy of it. -![8](/img/oidc/identity_providers/google/8.jpeg) +![8](/img/OIDC/identity_providers/google/8.jpeg) ## Configure Keycloak Identity Provider Create a `KeycloakRealmIdentityProvider` resource with the following configuration: diff --git a/content/en/docs/v1.2/operations/oidc/identity_providers/google.md b/content/en/docs/v1.2/operations/oidc/identity_providers/google.md index 4ec804dc0..51f949c65 100644 --- a/content/en/docs/v1.2/operations/oidc/identity_providers/google.md +++ b/content/en/docs/v1.2/operations/oidc/identity_providers/google.md @@ -10,19 +10,19 @@ aliases: ## Configure Google - Head over to [Google Console](https://console.cloud.google.com/apis/dashboard), login in to the console using Google account and you will see Google Developer Console. Once logged in, head over the top left drop-down to create new project. -![1](/img/oidc/identity_providers/google/1.jpeg) +![1](/img/OIDC/identity_providers/google/1.jpeg) - Click on "New Project" to proceed. -![2](/img/oidc/identity_providers/google/2.jpeg) +![2](/img/OIDC/identity_providers/google/2.jpeg) - Enter the project name of your choice and select the Organisation if you have multiple organisations. Once done click on "Create" -![3](/img/oidc/identity_providers/google/3.jpeg) +![3](/img/OIDC/identity_providers/google/3.jpeg) - Once the project is created you will get a pop-up suggesting to configure the consent screen. If not then head over to the Dashboard and head over to "Explore and enable APIs" options. Then Click on "Credentials" > "Configure Consent Screen" and head over to the next step. -![4](/img/oidc/identity_providers/google/4.jpeg) +![4](/img/OIDC/identity_providers/google/4.jpeg) - Click on "External" as we want to allow any Google account to be able to sign in to our application and hit "Create". -![5](/img/oidc/identity_providers/google/5.jpeg) +![5](/img/OIDC/identity_providers/google/5.jpeg) - After this, we will be redirected to pages where we will have to configure different things - Application type: Public @@ -32,16 +32,16 @@ aliases: - Application Privacy Policy link: Your application privacy policy link - Now head over to the Create Credentials option in the navbar and click on "OAuth Client ID". -![6](/img/oidc/identity_providers/google/6.jpeg) +![6](/img/OIDC/identity_providers/google/6.jpeg) - Select Application type as a "Web application" and name the application according to your choice. Next, Add the link provided in the Keycloak tab under "Authorized Redirect URIs" and click "Create". The link should look something like this ```bash https://YOUR_KEYCLOAK_DOMAIN/auth/realms/cozy/broker/google/endpoint ``` -![7](/img/oidc/identity_providers/google/7.jpeg) +![7](/img/OIDC/identity_providers/google/7.jpeg) - As it is done, you will see a pop up with the information required in the next step. You will need to "Client ID" and "Client secret" in next step so make sure you make a safe copy of it. -![8](/img/oidc/identity_providers/google/8.jpeg) +![8](/img/OIDC/identity_providers/google/8.jpeg) ## Configure Keycloak Identity Provider Create a `KeycloakRealmIdentityProvider` resource with the following configuration: diff --git a/content/en/docs/v1.3/operations/oidc/identity_providers/google.md b/content/en/docs/v1.3/operations/oidc/identity_providers/google.md index 23ee6ff40..6414413ab 100644 --- a/content/en/docs/v1.3/operations/oidc/identity_providers/google.md +++ b/content/en/docs/v1.3/operations/oidc/identity_providers/google.md @@ -10,19 +10,19 @@ aliases: ## Configure Google - Head over to [Google Console](https://console.cloud.google.com/apis/dashboard), login in to the console using Google account and you will see Google Developer Console. Once logged in, head over the top left drop-down to create new project. -![1](/img/oidc/identity_providers/google/1.jpeg) +![1](/img/OIDC/identity_providers/google/1.jpeg) - Click on "New Project" to proceed. -![2](/img/oidc/identity_providers/google/2.jpeg) +![2](/img/OIDC/identity_providers/google/2.jpeg) - Enter the project name of your choice and select the Organisation if you have multiple organisations. Once done click on "Create" -![3](/img/oidc/identity_providers/google/3.jpeg) +![3](/img/OIDC/identity_providers/google/3.jpeg) - Once the project is created you will get a pop-up suggesting to configure the consent screen. If not then head over to the Dashboard and head over to "Explore and enable APIs" options. Then Click on "Credentials" > "Configure Consent Screen" and head over to the next step. -![4](/img/oidc/identity_providers/google/4.jpeg) +![4](/img/OIDC/identity_providers/google/4.jpeg) - Click on "External" as we want to allow any Google account to be able to sign in to our application and hit "Create". -![5](/img/oidc/identity_providers/google/5.jpeg) +![5](/img/OIDC/identity_providers/google/5.jpeg) - After this, we will be redirected to pages where we will have to configure different things - Application type: Public @@ -32,16 +32,16 @@ aliases: - Application Privacy Policy link: Your application privacy policy link - Now head over to the Create Credentials option in the navbar and click on "OAuth Client ID". -![6](/img/oidc/identity_providers/google/6.jpeg) +![6](/img/OIDC/identity_providers/google/6.jpeg) - Select Application type as a "Web application" and name the application according to your choice. Next, Add the link provided in the Keycloak tab under "Authorized Redirect URIs" and click "Create". The link should look something like this ```bash https://YOUR_KEYCLOAK_DOMAIN/auth/realms/cozy/broker/google/endpoint ``` -![7](/img/oidc/identity_providers/google/7.jpeg) +![7](/img/OIDC/identity_providers/google/7.jpeg) - As it is done, you will see a pop up with the information required in the next step. You will need to "Client ID" and "Client secret" in next step so make sure you make a safe copy of it. -![8](/img/oidc/identity_providers/google/8.jpeg) +![8](/img/OIDC/identity_providers/google/8.jpeg) ## Configure Keycloak Identity Provider Create a `KeycloakRealmIdentityProvider` resource with the following configuration: diff --git a/content/en/docs/v1.4/operations/oidc/identity_providers/google.md b/content/en/docs/v1.4/operations/oidc/identity_providers/google.md index 88a316634..367f9c7ab 100644 --- a/content/en/docs/v1.4/operations/oidc/identity_providers/google.md +++ b/content/en/docs/v1.4/operations/oidc/identity_providers/google.md @@ -10,19 +10,19 @@ aliases: ## Configure Google - Head over to [Google Console](https://console.cloud.google.com/apis/dashboard), login in to the console using Google account and you will see Google Developer Console. Once logged in, head over the top left drop-down to create new project. -![1](/img/oidc/identity_providers/google/1.jpeg) +![1](/img/OIDC/identity_providers/google/1.jpeg) - Click on "New Project" to proceed. -![2](/img/oidc/identity_providers/google/2.jpeg) +![2](/img/OIDC/identity_providers/google/2.jpeg) - Enter the project name of your choice and select the Organisation if you have multiple organisations. Once done click on "Create" -![3](/img/oidc/identity_providers/google/3.jpeg) +![3](/img/OIDC/identity_providers/google/3.jpeg) - Once the project is created you will get a pop-up suggesting to configure the consent screen. If not then head over to the Dashboard and head over to "Explore and enable APIs" options. Then Click on "Credentials" > "Configure Consent Screen" and head over to the next step. -![4](/img/oidc/identity_providers/google/4.jpeg) +![4](/img/OIDC/identity_providers/google/4.jpeg) - Click on "External" as we want to allow any Google account to be able to sign in to our application and hit "Create". -![5](/img/oidc/identity_providers/google/5.jpeg) +![5](/img/OIDC/identity_providers/google/5.jpeg) - After this, we will be redirected to pages where we will have to configure different things - Application type: Public @@ -32,16 +32,16 @@ aliases: - Application Privacy Policy link: Your application privacy policy link - Now head over to the Create Credentials option in the navbar and click on "OAuth Client ID". -![6](/img/oidc/identity_providers/google/6.jpeg) +![6](/img/OIDC/identity_providers/google/6.jpeg) - Select Application type as a "Web application" and name the application according to your choice. Next, Add the link provided in the Keycloak tab under "Authorized Redirect URIs" and click "Create". The link should look something like this ```bash https://YOUR_KEYCLOAK_DOMAIN/auth/realms/cozy/broker/google/endpoint ``` -![7](/img/oidc/identity_providers/google/7.jpeg) +![7](/img/OIDC/identity_providers/google/7.jpeg) - As it is done, you will see a pop up with the information required in the next step. You will need to "Client ID" and "Client secret" in next step so make sure you make a safe copy of it. -![8](/img/oidc/identity_providers/google/8.jpeg) +![8](/img/OIDC/identity_providers/google/8.jpeg) ## Configure Keycloak Identity Provider Create a `KeycloakRealmIdentityProvider` resource with the following configuration: diff --git a/content/en/docs/v1.5/operations/oidc/identity_providers/google.md b/content/en/docs/v1.5/operations/oidc/identity_providers/google.md index 3fb94effb..774b10545 100644 --- a/content/en/docs/v1.5/operations/oidc/identity_providers/google.md +++ b/content/en/docs/v1.5/operations/oidc/identity_providers/google.md @@ -10,19 +10,19 @@ aliases: ## Configure Google - Head over to [Google Console](https://console.cloud.google.com/apis/dashboard), login in to the console using Google account and you will see Google Developer Console. Once logged in, head over the top left drop-down to create new project. -![1](/img/oidc/identity_providers/google/1.jpeg) +![1](/img/OIDC/identity_providers/google/1.jpeg) - Click on "New Project" to proceed. -![2](/img/oidc/identity_providers/google/2.jpeg) +![2](/img/OIDC/identity_providers/google/2.jpeg) - Enter the project name of your choice and select the Organisation if you have multiple organisations. Once done click on "Create" -![3](/img/oidc/identity_providers/google/3.jpeg) +![3](/img/OIDC/identity_providers/google/3.jpeg) - Once the project is created you will get a pop-up suggesting to configure the consent screen. If not then head over to the Dashboard and head over to "Explore and enable APIs" options. Then Click on "Credentials" > "Configure Consent Screen" and head over to the next step. -![4](/img/oidc/identity_providers/google/4.jpeg) +![4](/img/OIDC/identity_providers/google/4.jpeg) - Click on "External" as we want to allow any Google account to be able to sign in to our application and hit "Create". -![5](/img/oidc/identity_providers/google/5.jpeg) +![5](/img/OIDC/identity_providers/google/5.jpeg) - After this, we will be redirected to pages where we will have to configure different things - Application type: Public @@ -32,16 +32,16 @@ aliases: - Application Privacy Policy link: Your application privacy policy link - Now head over to the Create Credentials option in the navbar and click on "OAuth Client ID". -![6](/img/oidc/identity_providers/google/6.jpeg) +![6](/img/OIDC/identity_providers/google/6.jpeg) - Select Application type as a "Web application" and name the application according to your choice. Next, Add the link provided in the Keycloak tab under "Authorized Redirect URIs" and click "Create". The link should look something like this ```bash https://YOUR_KEYCLOAK_DOMAIN/auth/realms/cozy/broker/google/endpoint ``` -![7](/img/oidc/identity_providers/google/7.jpeg) +![7](/img/OIDC/identity_providers/google/7.jpeg) - As it is done, you will see a pop up with the information required in the next step. You will need to "Client ID" and "Client secret" in next step so make sure you make a safe copy of it. -![8](/img/oidc/identity_providers/google/8.jpeg) +![8](/img/OIDC/identity_providers/google/8.jpeg) ## Configure Keycloak Identity Provider Create a `KeycloakRealmIdentityProvider` resource with the following configuration: diff --git a/content/en/docs/v1.6/operations/oidc/identity_providers/google.md b/content/en/docs/v1.6/operations/oidc/identity_providers/google.md index 9b9c135f1..9e64c222b 100644 --- a/content/en/docs/v1.6/operations/oidc/identity_providers/google.md +++ b/content/en/docs/v1.6/operations/oidc/identity_providers/google.md @@ -10,19 +10,19 @@ aliases: ## Configure Google - Head over to [Google Console](https://console.cloud.google.com/apis/dashboard), login in to the console using Google account and you will see Google Developer Console. Once logged in, head over the top left drop-down to create new project. -![1](/img/oidc/identity_providers/google/1.jpeg) +![1](/img/OIDC/identity_providers/google/1.jpeg) - Click on "New Project" to proceed. -![2](/img/oidc/identity_providers/google/2.jpeg) +![2](/img/OIDC/identity_providers/google/2.jpeg) - Enter the project name of your choice and select the Organisation if you have multiple organisations. Once done click on "Create" -![3](/img/oidc/identity_providers/google/3.jpeg) +![3](/img/OIDC/identity_providers/google/3.jpeg) - Once the project is created you will get a pop-up suggesting to configure the consent screen. If not then head over to the Dashboard and head over to "Explore and enable APIs" options. Then Click on "Credentials" > "Configure Consent Screen" and head over to the next step. -![4](/img/oidc/identity_providers/google/4.jpeg) +![4](/img/OIDC/identity_providers/google/4.jpeg) - Click on "External" as we want to allow any Google account to be able to sign in to our application and hit "Create". -![5](/img/oidc/identity_providers/google/5.jpeg) +![5](/img/OIDC/identity_providers/google/5.jpeg) - After this, we will be redirected to pages where we will have to configure different things - Application type: Public @@ -32,16 +32,16 @@ aliases: - Application Privacy Policy link: Your application privacy policy link - Now head over to the Create Credentials option in the navbar and click on "OAuth Client ID". -![6](/img/oidc/identity_providers/google/6.jpeg) +![6](/img/OIDC/identity_providers/google/6.jpeg) - Select Application type as a "Web application" and name the application according to your choice. Next, Add the link provided in the Keycloak tab under "Authorized Redirect URIs" and click "Create". The link should look something like this ```bash https://YOUR_KEYCLOAK_DOMAIN/auth/realms/cozy/broker/google/endpoint ``` -![7](/img/oidc/identity_providers/google/7.jpeg) +![7](/img/OIDC/identity_providers/google/7.jpeg) - As it is done, you will see a pop up with the information required in the next step. You will need to "Client ID" and "Client secret" in next step so make sure you make a safe copy of it. -![8](/img/oidc/identity_providers/google/8.jpeg) +![8](/img/OIDC/identity_providers/google/8.jpeg) ## Configure Keycloak Identity Provider Create a `KeycloakRealmIdentityProvider` resource with the following configuration: diff --git a/content/en/support.md b/content/en/support.md index 579241902..375668f31 100644 --- a/content/en/support.md +++ b/content/en/support.md @@ -10,4 +10,4 @@ weight: 50 | Organization | Contact | Description of Use | | ------------ | ------- | ------------------ | | Aenix logo | [Site](https://aenix.io/contact/) [LinkedIn](https://www.linkedin.com/company/aenix-io)| We provide all types of assistance, including consultations, development of missing features, design, assistance with installation, and integration. | -| Hidora | [Site](https://hidora.io/en/contact/) [LinkedIn](https://www.linkedin.com/company/hidora)| We handle installation, provide ongoing support, and offer 24/7 managed services. | +| Hidora | [Site](https://hidora.io/en/contact/) [LinkedIn](https://www.linkedin.com/company/hidora)| We handle installation, provide ongoing support, and offer 24/7 managed services. | diff --git a/content/hi/_index.md b/content/hi/_index.md index 2b805d792..c92de5d18 100644 --- a/content/hi/_index.md +++ b/content/hi/_index.md @@ -1,5 +1,5 @@ --- -title: "Cozystack: Kubernetes पर आधारित मुफ़्त क्लाउड प्लेटफ़ॉर्म" +title: "Cozystack: Kubernetes पर आधारित मुक्त क्लाउड प्लेटफ़ॉर्म" description: > bare-metal सर्वरों के एक समूह को एक बुद्धिमान सिस्टम में बदलें, जिसमें Kubernetes क्लस्टर, Databases-as-a-Service, वर्चुअल मशीनें, लोड बैलेंसर, HTTP कैशिंग सेवाएँ और अन्य सेवाएँ आसानी से बनाने के लिए एक सरल REST API हो। @@ -8,7 +8,7 @@ seo: title: "Cozystack — Kubernetes पर ओपन-सोर्स प्राइवेट क्लाउड" description: "Kubernetes पर ओपन-सोर्स क्लाउड प्लेटफ़ॉर्म: मैनेज्ड VMs, डेटाबेस, S3 स्टोरेज और GPU वर्कलोड। CNCF Sandbox प्रोजेक्ट।" keywords: ["private cloud", "managed kubernetes", "kubernetes platform", "cloud platform"] -source_digest: "sha256:7b7c6ca6147cb877fc4d71cba375f8be099bfd8b83c05bf5f19dff5030b4ed4e" +source_digest: "sha256:75141670f2b71f7aea8c92bb724d027ebbc863ac8c7d3a588b4bedbc34a8b66c" translation_status: current l10n: transcreate taglines: @@ -72,72 +72,66 @@ use_cases: benefits: - title: API-first - icon: fas fa-code + icon: api-first description: > Cozystack, Kubernetes पर आधारित है और इसके API के साथ घनिष्ठ अंतःक्रिया पर ज़ोर देता है। यह सभी तत्वों को किसी सुंदर UI या कस्टमाइज़ेशन के पीछे पूरी तरह छिपाने का लक्ष्य नहीं रखता। इसके बजाय यह एक मानक इंटरफ़ेस देता है और उपयोगकर्ताओं को बुनियादी प्रिमिटिव्स के साथ काम करना सिखाता है। - title: मानकीकरण और एकीकरण - icon: fas fa-certificate + icon: standardization description: > प्लेटफ़ॉर्म के सभी घटक उद्योग में व्यापक रूप से ज्ञात, सिद्ध ओपन-सोर्स टूल और तकनीकों पर आधारित हैं। हम सबसे स्थापित और परखे हुए तरीकों का उपयोग करने का प्रयास करते हैं, जिससे पूरा प्लेटफ़ॉर्म बहुत सरल बनता है और वेंडर लॉक-इन से बचा जा सकता है। - title: प्रतिस्पर्धा नहीं, सहयोग - icon: fas fa-handshake + icon: collaborate description: > हमें अपने समुदाय पर गर्व है और हम इसके आसपास के प्रोजेक्ट्स के साथ निकटता से काम करते हैं। अगर हम कोई ऐसी प्लेटफ़ॉर्म सुविधा बनाते हैं जो किसी upstream प्रोजेक्ट में उपयोगी हो सकती है, तो हम उसे प्लेटफ़ॉर्म में रखने के बजाय उस प्रोजेक्ट में योगदान देना पसंद करते हैं। features: - title: इंस्टॉल करना आसान - icon: fas fa-wrench + icon: install description: > [talos-bootstrap](https://github.com/cozystack/talos-bootstrap/) के साथ हम सबसे आसान इंस्टॉलेशन तरीका देते हैं, जिससे आप खाली डेटा सेंटर के सर्वरों पर PXE या ISO विधि से Cozystack बूटस्ट्रैप कर सकते हैं। immutable OS का उपयोग सिस्टम की संगति बनाए रखने और यह सुनिश्चित करने में मदद करता है कि सब कुछ अपेक्षा के अनुसार काम करे। - title: एकीकृत करना आसान - icon: fas fa-plug + icon: integrate description: > हम एक नेटिव Kubernetes RESTful API देते हैं, जो अपनी डिक्लेरेटिव प्रकृति के लिए व्यापक रूप से जाना जाता है। इसलिए अपने बिलिंग के साथ एकीकरण के लिए इतना ही पर्याप्त है कि आप अपने सिस्टम को इच्छित सेवा बताने वाला एक विशिष्ट YAML मैनिफ़ेस्ट Kubernetes API को भेजने का निर्देश दें। बाकी काम Cozystack आपके लिए कर देगा। - title: विस्तार करना आसान - icon: fas fa-up-right-and-down-left-from-center + icon: extend description: > प्लेटफ़ॉर्म का प्रत्येक पैकेज YAML फ़ाइलों के एक समूह से बना होता है। इसलिए Kubernetes प्रिमिटिव्स से परिचित कोई भी व्यक्ति प्लेटफ़ॉर्म को संशोधित या विस्तारित कर सकता है। पैकेज डिलीवरी को सुप्रसिद्ध और व्यापक रूप से उपयोग किया जाने वाला टूल FluxCD भरोसेमंद ढंग से संभालता है। - title: उच्च प्रदर्शन, कम ओवरहेड - icon: fas fa-gauge-high + icon: performance description: > हम प्रदर्शन की परवाह करते हैं। इसीलिए हम स्थिरता और कार्यक्षमता में संतुलन रखते हुए सबसे उच्च-प्रदर्शन वाली तकनीकें अपनाते हैं। इसके अलावा, हमारा अनूठा टेनेंट मॉडल Control Plane के लिए क्लाउड संसाधनों का कुशल आवंटन सक्षम करता है, जिससे लागत-दक्षता और आवश्यक स्तर की सुरक्षा सुनिश्चित होती है। - title: अंतर्निहित मॉनिटरिंग और अलर्ट - icon: fas fa-area-chart + icon: monitoring description: > प्रत्येक सेवा का प्रत्येक इंस्टेंस पूर्व-कॉन्फ़िगर किए गए डैशबोर्ड और अलर्ट के एक सेट के साथ आता है। आप प्रत्येक टेनेंट के लिए अलग मॉनिटरिंग हब बना सकते हैं या उन्हें एक में जोड़ सकते हैं। - title: ऐप प्रबंधन के लिए अंतर्निहित UI - icon: fas fa-window-maximize + icon: ui description: > हालाँकि प्लेटफ़ॉर्म का प्राथमिक लक्ष्य एक सुंदर API देना है, फिर भी इसमें एप्लिकेशन परिनियोजित करने के लिए एक डैशबोर्ड भी है। यह वेब UI प्लेटफ़ॉर्म में तेज़ी से उतरने में मदद करता है और इसकी क्षमताओं का दृश्य प्रदर्शन करता है। --- -
- {{% blocks/hero title="Cozystack: Kubernetes पर आधारित मुफ़्त क्लाउड प्लेटफ़ॉर्म" color="primary" - height="auto" link_title="शुरुआत करें" link_url="/hi/docs/v1.4/getting-started/" %}} - bare-metal सर्वरों के एक समूह को एक बुद्धिमान सिस्टम में बदलें, जिसमें Kubernetes क्लस्टर, Databases-as-a-Service, वर्चुअल मशीनें, लोड बैलेंसर, HTTP कैशिंग सेवाएँ और अन्य सेवाएँ आसानी से बनाने के लिए एक सरल REST API हो। - - अपना खुद का क्लाउड बनाने या किफ़ायती डेवलपमेंट एनवायरनमेंट उपलब्ध कराने के लिए Cozystack का उपयोग करें। - - {{% /blocks/hero %}} - -
- {{< blocks/lead >}} - {{< /blocks/lead >}} -
-
+{{< blocks/hero title="Cozystack: Kubernetes पर आधारित मुक्त क्लाउड प्लेटफ़ॉर्म" link_title="शुरुआत करें" link_url="/hi/docs/v1.4/getting-started/" >}} +अपना खुद का क्लाउड बनाने या किफ़ायती डेवलपमेंट एनवायरनमेंट उपलब्ध कराने के लिए Cozystack का उपयोग करें। +{{< /blocks/hero >}} {{< home/screenshot-gallery >}} + +{{< home/intro >}} +bare-metal सर्वरों के एक समूह को एक बुद्धिमान सिस्टम में बदलें, जिसमें Kubernetes क्लस्टर, Databases-as-a-Service, वर्चुअल मशीनें, लोड बैलेंसर, HTTP कैशिंग सेवाएँ और अन्य सेवाएँ आसानी से बनाने के लिए एक सरल REST API हो। +{{< /home/intro >}} +
{{< blocks/lead color="primary" >}} @@ -171,25 +165,26 @@ features:
{{< blocks/section color="dark" type="community-row">}} - {{< home/community icon="fab fa-github" title="GitHub Discussions" >}} + {{< home/community icon="github-discussions" title="GitHub Discussions" >}} GitHub Discussions में चर्चा में शामिल हों। Cozystack से जुड़ी हर बात — विनिर्देशों और फ़ीचर प्लानिंग से लेकर Show & Tell तक — यहीं होती है। {{< /home/community >}} - {{< home/community icon="fab fa-slack" title="Slack" >}} + {{< home/community icon="slack" title="Slack" >}} अगर आप Cozystack टीम और समुदाय से रीयल-टाइम में बात करना चाहते हैं, तो Slack पर हमसे जुड़ें। सबको जानने का यह एक बढ़िया तरीका है। एक Slack आमंत्रण प्राप्त करें, या #cozystack चैनल पर जाएँ। {{< /home/community >}} - {{< home/community icon="fa fa-paper-plane" title="Telegram" >}} + {{< home/community icon="telegram" title="Telegram" >}} हमारा Telegram पर भी एक बड़ा समुदाय है। साथी उपयोगकर्ताओं से जुड़ने, सवाल पूछने और नवीनतम समाचार व विकास से अपडेट रहने के लिए @cozystack ग्रुप चैट से जुड़ें। {{< /home/community >}} {{< /blocks/section >}}
-
+ + {{< home/video >}} -{{< home/cncf >}} + diff --git a/content/hi/support.md b/content/hi/support.md index 5b6ff2f8f..095b80161 100644 --- a/content/hi/support.md +++ b/content/hi/support.md @@ -4,7 +4,7 @@ date: 2025-03-02T15:45:07+04:00 draft: false type: "page" weight: 50 -source_digest: "sha256:2cacdfc9855cebb5b4df0c21de9b889985cba9754a72581f10f1cd5ea6a0c286" +source_digest: "sha256:de998fb26d73dc851cf18a0437e5f7d1397e551876c7d8742e14f7816ae57ac8" translation_status: current l10n: mt --- @@ -13,4 +13,4 @@ l10n: mt | संगठन | संपर्क | सेवा का विवरण | | ------------ | ------- | ------------------ | | Aenix logo | [साइट](https://aenix.io/contact/) [LinkedIn](https://www.linkedin.com/company/aenix-io)| हम हर प्रकार की सहायता प्रदान करते हैं, जिसमें परामर्श, अनुपलब्ध सुविधाओं का विकास, डिज़ाइन, तथा इंस्टॉलेशन और एकीकरण में सहायता शामिल है। | -| Hidora | [साइट](https://hidora.io/en/contact/) [LinkedIn](https://www.linkedin.com/company/hidora)| हम इंस्टॉलेशन संभालते हैं, निरंतर सहायता देते हैं, और 24/7 मैनेज्ड सेवाएँ प्रदान करते हैं। | +| Hidora | [साइट](https://hidora.io/en/contact/) [LinkedIn](https://www.linkedin.com/company/hidora)| हम इंस्टॉलेशन संभालते हैं, निरंतर सहायता देते हैं, और 24/7 मैनेज्ड सेवाएँ प्रदान करते हैं। | diff --git a/content/ru/_index.md b/content/ru/_index.md index b3e10e94a..3cb163240 100644 --- a/content/ru/_index.md +++ b/content/ru/_index.md @@ -1,5 +1,5 @@ --- -title: "Cozystack: бесплатная облачная платформа на базе Kubernetes" +title: "Cozystack: свободная облачная платформа на базе Kubernetes" description: > Превратите набор bare-metal серверов в интеллектуальную систему с простым REST API для создания кластеров Kubernetes, баз данных как сервиса, виртуальных машин, балансировщиков нагрузки, сервисов HTTP-кэширования и других сервисов. @@ -8,7 +8,7 @@ seo: title: "Cozystack — частное облако с открытым кодом на Kubernetes" description: "Open-source облачная платформа на Kubernetes: управляемые ВМ, базы данных, S3-хранилище и GPU. Проект CNCF Sandbox." keywords: ["частное облако", "managed kubernetes", "kubernetes платформа", "облачная платформа"] -source_digest: "sha256:7b7c6ca6147cb877fc4d71cba375f8be099bfd8b83c05bf5f19dff5030b4ed4e" +source_digest: "sha256:75141670f2b71f7aea8c92bb724d027ebbc863ac8c7d3a588b4bedbc34a8b66c" translation_status: current l10n: transcreate taglines: @@ -67,72 +67,66 @@ use_cases: benefits: - title: API-first - icon: fas fa-code + icon: api-first description: > Cozystack построен на Kubernetes и предполагает тесное взаимодействие с его API. Платформа не стремится полностью спрятать все элементы за красивым UI или какими-либо кастомизациями. Вместо этого она даёт стандартный интерфейс и учит пользователей работать с базовыми примитивами. - title: Стандартизация и унификация - icon: fas fa-certificate + icon: standardization description: > Все компоненты платформы построены на проверенных open-source инструментах и технологиях, широко известных в индустрии. Мы стремимся использовать самые устоявшиеся и проверенные подходы, делая платформу очень простой и избегая привязки к вендору. - title: Сотрудничество, а не конкуренция - icon: fas fa-handshake + icon: collaborate description: > Мы гордимся нашим сообществом и тесно взаимодействуем с проектами вокруг него. Если мы создаём функцию платформы, которая может быть полезна в upstream-проекте, мы предпочитаем отдать её в этот проект, а не держать в платформе. features: - title: Простая установка - icon: fas fa-wrench + icon: install description: > С [talos-bootstrap](https://github.com/cozystack/talos-bootstrap/) мы даём предельно простой способ установки, позволяя развернуть Cozystack методами PXE или ISO на серверах в «голом» дата-центре. Использование immutable-ОС помогает поддерживать консистентность системы и гарантировать, что всё работает как задумано. - title: Простая интеграция - icon: fas fa-plug + icon: integrate description: > Мы предоставляем нативный RESTful API Kubernetes, широко известный своей декларативностью. Поэтому для интеграции с вашим биллингом достаточно научить вашу систему отправлять в Kubernetes API конкретный YAML-манифест, описывающий нужный сервис. Остальное Cozystack сделает за вас. - title: Простое расширение - icon: fas fa-up-right-and-down-left-from-center + icon: extend description: > Каждый пакет платформы состоит из набора YAML-файлов. Поэтому любой, кто знаком с примитивами Kubernetes, может модифицировать или расширять платформу. Доставку пакетов надёжно обеспечивает FluxCD — хорошо известный и широко используемый инструмент. - title: Высокая производительность при низких накладных расходах - icon: fas fa-gauge-high + icon: performance description: > Мы заботимся о производительности. Поэтому применяем самые производительные технологии, балансируя стабильность и функциональность. Более того, наша уникальная модель тенантов позволяет эффективно выделять облачные ресурсы под control plane, обеспечивая экономичность и необходимый уровень безопасности. - title: Встроенный мониторинг и алерты - icon: fas fa-area-chart + icon: monitoring description: > Каждый экземпляр каждого сервиса сопровождается набором преднастроенных дашбордов и алертов. Вы можете создавать отдельные центры мониторинга для каждого тенанта или объединять их в один. - title: Встроенный UI для управления приложениями - icon: fas fa-window-maximize + icon: ui description: > Хотя основная цель платформы — предоставить красивый API, у неё также есть панель управления для развёртывания приложений. Веб-интерфейс облегчает быстрое погружение в платформу и наглядно демонстрирует её возможности. --- -
- {{% blocks/hero title="Cozystack: бесплатная облачная платформа на базе Kubernetes" color="primary" - height="auto" link_title="Начать" link_url="/ru/docs/v1.4/getting-started/" %}} - Превратите набор bare-metal серверов в интеллектуальную систему с простым REST API для создания кластеров Kubernetes, баз данных как сервиса, виртуальных машин, балансировщиков нагрузки, сервисов HTTP-кэширования и других сервисов. - - Используйте Cozystack, чтобы построить собственное облако или предоставлять экономичные среды разработки. - - {{% /blocks/hero %}} - -
- {{< blocks/lead >}} - {{< /blocks/lead >}} -
-
+{{< blocks/hero title="Cozystack: свободная облачная платформа на базе Kubernetes" link_title="Начать" link_url="/ru/docs/v1.4/getting-started/" >}} +Используйте Cozystack, чтобы построить собственное облако или предоставлять экономичные среды разработки. +{{< /blocks/hero >}} {{< home/screenshot-gallery >}} + +{{< home/intro >}} +Превратите набор bare-metal серверов в интеллектуальную систему с простым REST API для создания кластеров Kubernetes, баз данных как сервиса, виртуальных машин, балансировщиков нагрузки, сервисов HTTP-кэширования и других сервисов. +{{< /home/intro >}} +
{{< blocks/lead color="primary" >}} @@ -166,25 +160,26 @@ features:
{{< blocks/section color="dark" type="community-row">}} - {{< home/community icon="fab fa-github" title="GitHub Discussions" >}} + {{< home/community icon="github-discussions" title="GitHub Discussions" >}} Присоединяйтесь к обсуждению в GitHub Discussions. Здесь происходит всё, что связано с Cozystack — от спецификаций и планирования функций до Show & Tell. {{< /home/community >}} - {{< home/community icon="fab fa-slack" title="Slack" >}} + {{< home/community icon="slack" title="Slack" >}} Если хотите общаться с командой и сообществом Cozystack в реальном времени, присоединяйтесь к нам в Slack. Это отличный способ познакомиться со всеми. Получите приглашение в Slack или перейдите в канал #cozystack. {{< /home/community >}} - {{< home/community icon="fa fa-paper-plane" title="Telegram" >}} + {{< home/community icon="telegram" title="Telegram" >}} У нас также большое сообщество в Telegram. Присоединяйтесь к групповому чату @cozystack, чтобы общаться с другими пользователями, задавать вопросы и быть в курсе последних новостей и разработок. {{< /home/community >}} {{< /blocks/section >}}
-
+ + {{< home/video >}} -{{< home/cncf >}} + diff --git a/content/ru/support.md b/content/ru/support.md index 290810ed1..5034ea9d1 100644 --- a/content/ru/support.md +++ b/content/ru/support.md @@ -4,7 +4,7 @@ date: 2025-03-02T15:45:07+04:00 draft: false type: "page" weight: 50 -source_digest: "sha256:2cacdfc9855cebb5b4df0c21de9b889985cba9754a72581f10f1cd5ea6a0c286" +source_digest: "sha256:de998fb26d73dc851cf18a0437e5f7d1397e551876c7d8742e14f7816ae57ac8" translation_status: current l10n: mt --- @@ -13,4 +13,4 @@ l10n: mt | Организация | Контакт | Описание услуг | | ------------ | ------- | ------------------ | | Aenix logo | [Сайт](https://aenix.io/contact/) [LinkedIn](https://www.linkedin.com/company/aenix-io)| Мы оказываем все виды помощи: консультации, разработку недостающих функций, проектирование, помощь с установкой и интеграцией. | -| Hidora | [Сайт](https://hidora.io/en/contact/) [LinkedIn](https://www.linkedin.com/company/hidora)| Мы выполняем установку, обеспечиваем постоянную поддержку и предлагаем managed-сервисы в режиме 24/7. | +| Hidora | [Сайт](https://hidora.io/en/contact/) [LinkedIn](https://www.linkedin.com/company/hidora)| Мы выполняем установку, обеспечиваем постоянную поддержку и предлагаем managed-сервисы в режиме 24/7. | diff --git a/content/zh-cn/_index.md b/content/zh-cn/_index.md index 52cb932c9..ddd4c8e67 100644 --- a/content/zh-cn/_index.md +++ b/content/zh-cn/_index.md @@ -1,5 +1,5 @@ --- -title: "Cozystack:基于 Kubernetes 的免费云平台" +title: "Cozystack:基于 Kubernetes 的自由云平台" description: > 将一组裸金属服务器变成智能系统,通过简单的 REST API 轻松创建 Kubernetes 集群、数据库即服务、虚拟机、负载均衡器、HTTP 缓存服务以及其他服务。 @@ -8,7 +8,7 @@ seo: title: "Cozystack — 基于 Kubernetes 的开源私有云" description: "基于 Kubernetes 的开源云平台,提供托管虚拟机、数据库、S3 存储和 GPU 工作负载。CNCF Sandbox 项目。" keywords: ["私有云", "Kubernetes", "开源云平台", "托管 Kubernetes"] -source_digest: "sha256:7b7c6ca6147cb877fc4d71cba375f8be099bfd8b83c05bf5f19dff5030b4ed4e" +source_digest: "sha256:75141670f2b71f7aea8c92bb724d027ebbc863ac8c7d3a588b4bedbc34a8b66c" translation_status: current l10n: transcreate taglines: @@ -43,72 +43,66 @@ use_cases: benefits: - title: API-first - icon: fas fa-code + icon: api-first description: > Cozystack 基于 Kubernetes,强调与其 API 的紧密交互。它并不追求把所有元素都隐藏在华丽的 UI 或各种定制背后,而是提供标准接口,并引导用户使用基本原语进行操作。 - title: 标准化与统一 - icon: fas fa-certificate + icon: standardization description: > 平台的所有组件都构建在业界广泛认可的成熟开源工具和技术之上。 我们力求采用最成熟、最经过验证的方案,让整个平台保持简单,并避免厂商锁定。 - title: 协作而非竞争 - icon: fas fa-handshake + icon: collaborate description: > 我们为自己的社区感到自豪,并与周边项目紧密协作。 如果我们开发的某项平台功能对上游项目有用, 我们更愿意将其贡献给该项目,而不是留在平台内部。 features: - title: 易于安装 - icon: fas fa-wrench + icon: install description: > 借助 [talos-bootstrap](https://github.com/cozystack/talos-bootstrap/),我们提供了极其简单的安装方式, 让你能够在裸数据中心的服务器上通过 PXE 或 ISO 方式引导 Cozystack。 使用不可变操作系统有助于保持系统一致性,并确保一切按预期运行。 - title: 易于集成 - icon: fas fa-plug + icon: integrate description: > 我们提供原生的 Kubernetes RESTful API,它以声明式而广为人知。 因此,要与你的计费系统集成,只需让你的系统向 Kubernetes API 提交一份描述目标服务的特定 YAML 清单即可。 其余的工作交给 Cozystack 完成。 - title: 易于扩展 - icon: fas fa-up-right-and-down-left-from-center + icon: extend description: > 平台中的每个软件包都由一组 YAML 文件构成。因此,任何熟悉 Kubernetes 原语的人都可以修改或扩展平台。软件包的交付由广为人知、应用广泛的 FluxCD 可靠完成。 - title: 高性能、低开销 - icon: fas fa-gauge-high + icon: performance description: > 我们重视性能。因此我们在稳定性与功能之间权衡,采用性能最佳的技术。 此外,我们独特的租户模型能够为控制平面高效分配云资源,在保证必要安全级别的同时兼顾成本效益。 - title: 内置监控与告警 - icon: fas fa-area-chart + icon: monitoring description: > 每个服务的每个实例都配有一套预先配置的仪表盘和告警。 你可以为每个租户创建独立的监控中心,也可以将它们合并为一个。 - title: 内置应用管理 UI - icon: fas fa-window-maximize + icon: ui description: > 虽然平台的首要目标是提供优雅的 API,但它也提供了用于部署应用的仪表盘。 该 Web UI 便于快速上手平台,并直观展示其能力。 --- -
- {{% blocks/hero title="Cozystack:基于 Kubernetes 的免费云平台" color="primary" - height="auto" link_title="开始使用" link_url="/zh-cn/docs/v1.4/getting-started/" %}} - 将一组裸金属服务器变成智能系统,通过简单的 REST API 轻松创建 Kubernetes 集群、数据库即服务、虚拟机、负载均衡器、HTTP 缓存服务以及其他服务。 - - 使用 Cozystack 构建你自己的云,或提供高性价比的开发环境。 - - {{% /blocks/hero %}} - -
- {{< blocks/lead >}} - {{< /blocks/lead >}} -
-
+{{< blocks/hero title="Cozystack:基于 Kubernetes 的自由云平台" link_title="开始使用" link_url="/zh-cn/docs/v1.4/getting-started/" >}} +使用 Cozystack 构建你自己的云,或提供高性价比的开发环境。 +{{< /blocks/hero >}} {{< home/screenshot-gallery >}} + +{{< home/intro >}} +将一组裸金属服务器变成智能系统,通过简单的 REST API 轻松创建 Kubernetes 集群、数据库即服务、虚拟机、负载均衡器、HTTP 缓存服务以及其他服务。 +{{< /home/intro >}} +
{{< blocks/lead color="primary" >}} @@ -142,25 +136,26 @@ features:
{{< blocks/section color="dark" type="community-row">}} - {{< home/community icon="fab fa-github" title="GitHub Discussions" >}} + {{< home/community icon="github-discussions" title="GitHub Discussions" >}} 加入 GitHub Discussions 的讨论。与 Cozystack 相关的一切——从规范、功能规划到 Show & Tell——都在这里发生。 {{< /home/community >}} - {{< home/community icon="fab fa-slack" title="Slack" >}} + {{< home/community icon="slack" title="Slack" >}} 如果你想与 Cozystack 团队和社区实时交流,欢迎加入我们的 Slack。这是结识大家的好方式。 获取 Slack 邀请,或前往 #cozystack 频道。 {{< /home/community >}} - {{< home/community icon="fa fa-paper-plane" title="Telegram" >}} + {{< home/community icon="telegram" title="Telegram" >}} 我们在 Telegram 上也有一个庞大的社区。加入 @cozystack 群聊,与其他用户交流、提问,并及时了解最新动态与进展。 {{< /home/community >}} {{< /blocks/section >}}
-
+ + {{< home/video >}} -{{< home/cncf >}} + diff --git a/content/zh-cn/support.md b/content/zh-cn/support.md index ca2ae3cde..ab386e4a2 100644 --- a/content/zh-cn/support.md +++ b/content/zh-cn/support.md @@ -4,7 +4,7 @@ date: 2025-03-02T15:45:07+04:00 draft: false type: "page" weight: 50 -source_digest: "sha256:2cacdfc9855cebb5b4df0c21de9b889985cba9754a72581f10f1cd5ea6a0c286" +source_digest: "sha256:de998fb26d73dc851cf18a0437e5f7d1397e551876c7d8742e14f7816ae57ac8" translation_status: current l10n: mt --- @@ -13,4 +13,4 @@ l10n: mt | 组织 | 联系方式 | 服务说明 | | ------------ | ------- | ------------------ | | Aenix logo | [网站](https://aenix.io/contact/) [LinkedIn](https://www.linkedin.com/company/aenix-io)| 我们提供各类支持,包括咨询、缺失功能的开发、设计,以及安装与集成方面的协助。 | -| Hidora | [网站](https://hidora.io/en/contact/) [LinkedIn](https://www.linkedin.com/company/hidora)| 我们负责安装、提供持续支持,并提供 7×24 小时托管服务。 | +| Hidora | [网站](https://hidora.io/en/contact/) [LinkedIn](https://www.linkedin.com/company/hidora)| 我们负责安装、提供持续支持,并提供 7×24 小时托管服务。 | diff --git a/layouts/_default/_markup/render-table.html b/layouts/_default/_markup/render-table.html new file mode 100644 index 000000000..2c07aef0f --- /dev/null +++ b/layouts/_default/_markup/render-table.html @@ -0,0 +1,28 @@ +{{- /* + Markdown tables are wrapped in a scroll container so a wide table (parameter + references, API tables) scrolls inside the column instead of widening the page. + Tables written as raw HTML are not touched; the stylesheet gives them their own + horizontal scroll. +*/ -}} +
+ + + {{- range .THead }} + + {{- range . }} + {{ .Text }} + {{- end }} + + {{- end }} + + + {{- range .TBody }} + + {{- range . }} + {{ .Text }} + {{- end }} + + {{- end }} + + +
diff --git a/layouts/blog/baseof.html b/layouts/blog/baseof.html index 082fd6109..6d93c6275 100644 --- a/layouts/blog/baseof.html +++ b/layouts/blog/baseof.html @@ -23,7 +23,7 @@ {{ partial "version-banner.html" . }} {{ with .CurrentSection.OutputFormats.Get "rss" -}} - + {{ partial "octicon.html" "rss" }} {{ end -}} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 94c2d1e08..fe2aa3571 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,15 +1,23 @@ -