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. --- -
#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 >}}
| [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. |
-|
| [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). |
+| #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 >}}
| [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. |
-|
| [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. |
+| #cozystack चैनल पर जाएँ।
{{< /home/community >}}
- {{< home/community icon="fa fa-paper-plane" title="Telegram" >}}
+ {{< home/community icon="telegram" title="Telegram" >}}
हमारा Telegram पर भी एक बड़ा समुदाय है। साथी उपयोगकर्ताओं से जुड़ने, सवाल पूछने और नवीनतम समाचार व विकास से अपडेट रहने के लिए @cozystack ग्रुप चैट से जुड़ें।
{{< /home/community >}}
{{< /blocks/section >}}
| [साइट](https://aenix.io/contact/) [LinkedIn](https://www.linkedin.com/company/aenix-io)| हम हर प्रकार की सहायता प्रदान करते हैं, जिसमें परामर्श, अनुपलब्ध सुविधाओं का विकास, डिज़ाइन, तथा इंस्टॉलेशन और एकीकरण में सहायता शामिल है। |
-|
| [साइट](https://hidora.io/en/contact/) [LinkedIn](https://www.linkedin.com/company/hidora)| हम इंस्टॉलेशन संभालते हैं, निरंतर सहायता देते हैं, और 24/7 मैनेज्ड सेवाएँ प्रदान करते हैं। |
+| #cozystack.
{{< /home/community >}}
- {{< home/community icon="fa fa-paper-plane" title="Telegram" >}}
+ {{< home/community icon="telegram" title="Telegram" >}}
У нас также большое сообщество в Telegram. Присоединяйтесь к групповому чату @cozystack, чтобы общаться с другими пользователями, задавать вопросы и быть в курсе последних новостей и разработок.
{{< /home/community >}}
{{< /blocks/section >}}
| [Сайт](https://aenix.io/contact/) [LinkedIn](https://www.linkedin.com/company/aenix-io)| Мы оказываем все виды помощи: консультации, разработку недостающих функций, проектирование, помощь с установкой и интеграцией. |
-|
| [Сайт](https://hidora.io/en/contact/) [LinkedIn](https://www.linkedin.com/company/hidora)| Мы выполняем установку, обеспечиваем постоянную поддержку и предлагаем managed-сервисы в режиме 24/7. |
+| #cozystack 频道。
{{< /home/community >}}
- {{< home/community icon="fa fa-paper-plane" title="Telegram" >}}
+ {{< home/community icon="telegram" title="Telegram" >}}
我们在 Telegram 上也有一个庞大的社区。加入 @cozystack 群聊,与其他用户交流、提问,并及时了解最新动态与进展。
{{< /home/community >}}
{{< /blocks/section >}}
| [网站](https://aenix.io/contact/) [LinkedIn](https://www.linkedin.com/company/aenix-io)| 我们提供各类支持,包括咨询、缺失功能的开发、设计,以及安装与集成方面的协助。 |
-|
| [网站](https://hidora.io/en/contact/) [LinkedIn](https://www.linkedin.com/company/hidora)| 我们负责安装、提供持续支持,并提供 7×24 小时托管服务。 |
+| | {{ .Text }} | + {{- end }} +
|---|
| {{ .Text }} | + {{- end }} +