Init

aenix-io · Feb 12, 2024 · 0b44037 · 0b44037
commit 0b44037
Showing 23 changed files with 1,732 additions and 0 deletions.
diff --git a/assets/.DS_Store b/assets/.DS_Store
diff --git a/assets/icons/logo.svg b/assets/icons/logo.svg
diff --git a/assets/scss/_adopters.scss b/assets/scss/_adopters.scss
@@ -0,0 +1,290 @@
+
+@mixin carousel-controls-hover {
+  .carousel-control-next, .carousel-control-prev {
+    &:focus {
+      opacity: 0.5;
+    }
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+
+  .carousel-control-prev-icon {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%233d6ddd' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
+   }
+
+   .carousel-control-next-icon {
+     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%233d6ddd' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
+   }
+}
+
+
+#adopters-wall {
+  margin-left: -15px;
+  margin-right: -15px;
+
+
+  .adopters-label {
+    margin-top: 3rem;
+    margin-bottom: 1rem;
+
+    text-align: center;
+    font-size: 2rem;
+    font-weight: 600;
+  }
+
+  #logos {
+    display: flex;
+    align-items: center;
+    margin-bottom: 3rem;
+
+    .col {
+      position: static;
+      width: 100%;
+      display: flex; 
+      flex-wrap: wrap;
+      justify-content: center;
+      padding: 0;
+
+
+      img {
+        height: 48px;
+        width: 100px;
+        margin: 18px 6px;
+
+        @media (min-width: 992px) {
+          height: 64px;
+          width: 150px;
+          margin: 24px 8px;
+        }
+
+
+        @media (min-width: 1800px) {
+          height: 96px;
+          width: 200px;
+          margin: 36px 12px;
+        }
+
+        object-fit: contain;
+      }
+    }
+  }
+}
+
+.adopters-carousel {
+  margin-bottom: 2rem;
+  justify-content: center;
+
+
+  #adopters {
+    .section-label {
+      margin-bottom: 2rem;
+    }
+
+    .carousel-item {
+      height: 620px;
+
+      @media (max-width: 560px) {
+        height: 800px;
+      }
+
+      @media (max-width: 460px) {
+        height: 900px;
+      }
+
+      @media (max-width: 390px) {
+        height: auto;
+      }
+
+      width: 100vw;
+      padding: 0 15px;
+
+      .item {
+        height: 620px;
+
+        @media (max-width: 560px) {
+          height: 800px;
+        }
+
+        @media (max-width: 460px) {
+          height: 900px;
+        }
+
+        @media (max-width: 390px) {
+          height: auto;
+          margin-top: 50px;
+        }
+
+        max-width: 600px;
+        position: relative;
+        left: 0;
+        right: 0;
+        margin: 0rem auto;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .logo {
+        height: 120px;
+        display: flex;
+        background-color: $flux-white;
+        opacity: 1;
+        img {
+          max-width: 552px;
+          max-height: 120px;
+          object-fit: contain;
+
+          @include media-breakpoint-down(sm) {
+            max-width: 75vw;
+          }
+        }
+      }
+
+      .case-study {
+        display: flex;
+        padding: 1rem 12px 0 24px;
+
+        max-width: 600px;
+        flex-wrap: wrap;
+        .summary {
+          flex: 2 0 0;
+          min-width: 280px;
+          padding-right: 1rem;
+
+          .business ul {
+            list-style-type: none;
+            margin: 0 0 0px 2px;
+            padding-left: 0;
+
+            font-size: 1.1rem;
+
+            li {
+              padding-bottom: 6px;
+            }
+          }
+
+          .details {
+            padding-top: 8px;
+            ul {
+              padding-left: 1.5rem;
+            }
+
+            h3 {
+              font-variant-caps: all-small-caps;
+              font-weight: 700;
+              color: $flux-lighter-blue;
+            }
+          }
+        }
+
+        .description {
+          flex: 1 0 0;
+          min-width: 220px;
+        }
+      }
+    }
+  }
+
+
+  .carousel {
+    &:hover {
+      @include carousel-controls-hover();
+    }
+
+    // touchscreen
+    @media (hover: none) {
+      @include carousel-controls-hover();
+    }
+
+    .carousel-control-prev, .carousel-control-next {
+      width: 20px;
+      margin: 0 auto;
+      left: 0;
+      right: 0;
+    }
+    .carousel-control-prev span {
+      position: absolute;
+      left: -320px;
+    }
+
+    .carousel-control-next span {
+      position: absolute;
+      left: 320px;
+    }
+
+    @include media-breakpoint-down(sm) {
+      .carousel-control-prev {
+        left: 10px;
+        right: auto;
+      }
+
+      .carousel-control-next {
+        left: auto;
+        right: 10px;
+      }
+
+      .carousel-control-prev, .carousel-control-next {
+        span {
+          position: static;
+        }
+      }
+    }
+
+    .carousel-inner {
+      .carousel-item {
+        padding: 1rem;
+
+        #carousel-caption {
+          color: $flux-darkest-blue;
+        }
+      }
+    }
+  }
+}
+
+/* /adopters page */
+.adopters {
+  .card-deck {
+    max-width: 83%;
+    @include media-breakpoint-down(sm) {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+    }
+    @include media-breakpoint-only(lg) {
+      column-count: 4;
+    }
+    @include media-breakpoint-only(xl) {
+      column-count: 5;
+    }
+
+    .card {
+      min-width: 48%;
+      max-width: 48%;
+      @include media-breakpoint-up(sm) {
+        min-width: 150px;
+        max-width: 150px;
+      }
+    }
+
+    .card-header {
+      overflow-wrap: anywhere;
+      hyphens: auto;
+    }
+
+    .card-body {
+      align-items: center;
+      display: flex;
+      min-height: 147px;
+    }
+
+    .card-text {
+      width: 100%;
+      vertical-align: middle
+    }
+  }
+
+}
diff --git a/assets/scss/_buttons.scss b/assets/scss/_buttons.scss
@@ -0,0 +1,55 @@
+@if $enable-rounded {
+    .btn {
+        border-radius: $btn-border-radius;
+
+        &-lg {
+            border-radius: $btn-border-radius-lg;
+        }
+
+        &-sm {
+            border-radius: $btn-border-radius-sm;
+        }
+    }
+}
+
+@mixin flat-white-button {
+  color: $flux-mid-gray !important;
+  background-color: $flux-white !important;
+  border: none;
+
+  &:hover {
+    color: $flux-gray !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  &:active {
+    box-shadow: none !important;
+  }
+
+  &:focus {
+    box-shadow: none !important;
+  }
+}
+
+@mixin projects-btn-primary {
+  a.btn-primary {
+    @include flat-white-button;
+
+    margin-right: 1rem;
+    padding-left: 1rem;
+
+    font-weight: 600 !important;
+  }
+}
+
+@mixin projects-btn-secondary {
+  a.btn-secondary {
+    @include flat-white-button;
+    background-color: $flux-light-blue !important;
+    color: $flux-gray !important;
+
+    margin-right: 1rem;
+    padding-left: 1rem;
+  }
+}
diff --git a/assets/scss/_ecosystem.scss b/assets/scss/_ecosystem.scss
@@ -0,0 +1,96 @@
+/* ecosystem page */
+.ecosystem {
+  margin-right: -15px;
+  .card-deck {
+    max-width: 83%;
+    @include media-breakpoint-down(sm) {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+    }
+
+    .card {
+      min-width: 48%;
+      max-width: 48%;
+      @include media-breakpoint-up(lg) {
+        min-width: auto;
+        max-width: initial;
+      }
+    }
+
+    .card-header {
+      overflow-wrap: anywhere;
+      hyphens: auto;
+    }
+
+    .card-body {
+      align-items: center;
+      display: flex;
+      min-height: 190px;
+    }
+
+    .card-text {
+      width: 100%;
+      vertical-align: middle;
+      text-align: center;
+    }
+  }
+
+  img {
+    @include media-breakpoint-up(lg) {
+      max-width: 158px;
+    }
+  }
+
+}
+
+.ecosystem-page {
+  table {
+    margin-bottom: 1rem;
+    color: #222;
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    @include media-breakpoint-up(lg) {
+      display: table;
+    }
+  }
+
+  .card-deck {
+    max-width: 100%;
+  }
+
+  th {
+    vertical-align: bottom;
+    border-bottom: 2px solid #dee2e6;
+    padding: 0.75rem;
+    border-top: 1px solid #dee2e6;
+  }
+
+  td {
+    padding: 0.75rem;
+    vertical-align: top;
+    border-top: 1px solid #dee2e6;
+  }
+
+  tbody tr:nth-of-type(odd) {
+    background-color: #f2f2f2;
+  }
+
+  h2 {
+    margin-bottom: 1rem;
+    &:not(:first-child) {
+      margin-top: 3rem;
+    }
+  }
+
+  h3 {
+    margin-bottom: 1rem;
+    margin-top: 2rem;
+  }
+
+  .gallery-wrapper {
+    max-width: 100%;
+  }
+}
diff --git a/assets/scss/_gallery.scss b/assets/scss/_gallery.scss
@@ -0,0 +1,7 @@
+.gallery-wrapper {
+    margin-bottom: 20px;
+    margin-top: 20px;
+    @include media-breakpoint-up(lg) {
+        max-width: 80%;
+    }
+}
diff --git a/assets/scss/_highlight.scss b/assets/scss/_highlight.scss
@@ -0,0 +1,5 @@
+.td-content .highlight {
+  @include media-breakpoint-down(md) {
+    max-width: 100%;
+  }
+}
diff --git a/assets/scss/_index.scss b/assets/scss/_index.scss
diff --git a/assets/scss/_page.scss b/assets/scss/_page.scss
@@ -0,0 +1,59 @@
+.works-well-with {
+  @extend .adopters;
+}
+
+.page {
+  margin-top: 6rem;
+  @include media-breakpoint-down(sm) {
+    margin-top: 2rem;
+  }
+
+  a {
+    @include media-breakpoint-down(sm) {
+      word-break: break-word;
+    }
+  }
+}
+
+.td-404 .td-main {
+  margin-bottom: 450px;
+
+  @include media-breakpoint-down(md) {
+    margin-top: 50px;
+  }
+}
+
+.page404 {
+  .DocSearch-Button {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  h1 {
+    font-size: 2rem;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+  }
+
+  h3 {
+    margin-top: 1rem;
+    margin-bottom: 2px;
+    font-size: 1.1rem;
+    font-weight: 600;
+  }
+
+  .links404 {
+    a {
+      display: block;
+      font-weight: 600;
+      margin: 4px 0;
+    }
+  }
+
+  .search404 {
+    margin-top: 1.5rem;
+    input.search-404-input {
+      margin-top: 4px;
+    }
+  }
+}
diff --git a/assets/scss/_responsive-video.scss b/assets/scss/_responsive-video.scss
@@ -0,0 +1,20 @@
+.responsive-video {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  padding-top: 56.25%;
+
+  @include media-breakpoint-up(lg) {
+    max-width: 80%;
+  }
+
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/assets/scss/_support.scss b/assets/scss/_support.scss
@@ -0,0 +1,23 @@
+/* support page */
+
+.support {
+    .td-card-deck {
+        .card-body {
+            align-items: center;
+            display: flex;
+            justify-content: center;
+        }
+
+        img {
+            min-height: 80px;
+            margin: auto;
+            display: inline-block;
+        }
+
+    }
+
+    table td:nth-child(n+2) {
+        text-align: center;
+    }
+}
+
diff --git a/assets/scss/_variables_project.scss b/assets/scss/_variables_project.scss
@@ -0,0 +1,46 @@
+// See https://getbootstrap.com/docs/4.0/getting-started/theming/#color
+
+$enable-gradients: false;
+$enable-rounded: true;
+$enable-shadows: true;
+
+// Border radius
+$border-radius: .25rem;
+$border-radius-lg: .3rem;
+$border-radius-sm: .2rem;
+
+// Other colors
+$slack-green: #74cdb0;
+$twitter-blue: #1da1f2;
+$linkedin-blue: #0e76a8;
+
+// Flux color palette
+$flux-darkest-blue: #243f80;
+$flux-dark-blue: #3d6ddd;
+$flux-lighter-blue: #5f86e3;
+$flux-light-blue: #c3d2f4;
+
+$flux-green: #3eaf7c;
+
+$flux-black: #1a1a1a;
+$flux-white: #ffffff;
+$flux-gray: #2f2f2f;
+$flux-mid-gray: #555555;
+$flux-light-gray: #5f5f5f;
+
+$primary: $flux-dark-blue;
+$secondary: $flux-light-blue;
+$dark: $flux-black;
+$blue: $flux-dark-blue;
+
+$info : #428bca;
+$warning: #ffa630; 
+$danger: #d9534f;
+
+$google_font_name: "Montserrat";
+$google_font_family: "Montserrat:300,300i,400,400i,600,600i,700,700i";
+
+$navbar-dark-color: rgba($flux-white, 0.75) !default;
+$navbar-dark-hover-color: rgba($flux-white, 0.5) !default;
+$navbar-dark-active-color: $flux-white !default;
+$navbar-dark-disabled-color: rgba($flux-white, 0.25) !default;
diff --git a/assets/scss/adopters_wall.scss b/assets/scss/adopters_wall.scss
@@ -0,0 +1,60 @@
+@keyframes move {
+  0% {
+    margin-left: -9200px;
+  }
+  100% {
+    margin-left: 800px;
+  }
+}
+
+@media screen and (min-width: 900px) {
+  @keyframes move {
+    0% {
+      margin-left: -9100px;
+    }
+    100% {
+      margin-left: 800px;
+    }
+  }
+}
+
+
+.scrollmenu:hover {
+  animation-play-state: paused;
+}
+
+.scrollmenu {
+  height: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  animation-name: move;
+  animation-iteration-count: infinite;
+  animation-duration: 450s;
+  animation-direction: right;
+  animation-timing-function: linear;
+}
+
+.scrollmenu img {
+  display: inline-block;
+  color: white;
+  text-align: center;
+  height: 100%;
+  padding-right: 30px;
+  text-decoration: none;
+}
+
+.carousel-inner {
+  height: 100%;
+}
+
+.carousel-item .active {
+  height: 100%;
+}
+
+.scrollmenu img {
+  transition: 0.3s all ease-in-out;
+}
+
+.scrollmenu img:hover {
+  transform: scale(1.5);
+}
diff --git a/assets/scss/blocks/_blocks.scss b/assets/scss/blocks/_blocks.scss
@@ -0,0 +1,5 @@
+@import "nav";
+@import "cncf";
+@import "hero";
+@import "blog";
+@import "features";
diff --git a/assets/scss/blocks/_blog.scss b/assets/scss/blocks/_blog.scss
@@ -0,0 +1,32 @@
+.deprecation-warning, .pageinfo.deprecation-warning {
+    padding: clamp(10px, 2vmin, 20px);
+    margin: clamp(10px, 1vh, 20px) 0;
+    background-color: #faf5b6;
+    color: #000;
+}
+
+.deprecation-warning.outdated-blog, .pageinfo.deprecation-warning.outdated-blog {
+    background-color: $blue;
+    color: $white;
+}
+
+.pageinfo {
+    @include media-breakpoint-up(lg) {
+        max-width: 80%;
+    }
+}
+
+body.td-home .deprecation-warning, body.td-blog .deprecation-warning, body.td-documentation .deprecation-warning {
+    border-radius: 3px;
+}
+
+.deprecation-warning p:only-child {
+  margin-bottom: 0;
+}
+
+#deprecation-warning > .deprecation-warning a {
+    background: transparent;
+    color: inherit;
+    text-decoration: underline;
+}
+
diff --git a/assets/scss/blocks/_cncf.scss b/assets/scss/blocks/_cncf.scss
@@ -0,0 +1,25 @@
+.td-cncf-block {
+  padding: 0 !important;
+  .container {
+    padding-top: 80px !important;
+    padding-bottom: 8px !important;
+
+    @media (max-width: 991px) {
+      padding-top: 136px !important;
+    }
+
+    @include media-breakpoint-down(sm) {
+      padding-top: 16px !important;
+    }
+  }
+
+  a {
+    color: $flux-darkest-blue;
+  }
+}
+
+.is-cncf-logo {
+  width: 50%;
+  height: auto;
+  padding-bottom: 16px !important;
+}
diff --git a/assets/scss/blocks/_features.scss b/assets/scss/blocks/_features.scss
@@ -0,0 +1,66 @@
+.features, .benefits {
+  .fas, .fab, .fa {
+    color: $flux-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;
+    }
+  }
+}
diff --git a/assets/scss/blocks/_hero.scss b/assets/scss/blocks/_hero.scss
@@ -0,0 +1,116 @@
+// 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: $flux-dark-blue;
+
+  background: radial-gradient(circle at bottom left, $flux-darkest-blue, rgba($flux-dark-blue, 0.5) 30vw, transparent 80vw),
+              linear-gradient(0deg, $flux-dark-blue, rgba($flux-darkest-blue, 0.3) 30px, rgba($flux-darkest-blue, 0.3) 150px, transparent 400px),
+              linear-gradient(0deg, $flux-dark-blue, transparent 200px),
+              radial-gradient(circle at top right, rgba($flux-light-blue, 0.8), rgba($flux-lighter-blue, 0.5) 40%, rgba($flux-dark-blue, 0.8) 50%, transparent),
+              repeating-linear-gradient(15deg, rgba($flux-darkest-blue, 0.3), rgba($flux-darkest-blue, 0.3) 2px,  rgba($flux-dark-blue, 0.3) 2px, rgba($flux-dark-blue, 0.3) 4px),
+              $flux-dark-blue;
+
+
+  .td-hero-block {
+    padding-bottom: 4rem;
+
+  }
+
+  section.row {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .hero-details {
+    margin-top: 1.5rem;
+
+    p {
+      color: $flux-white;
+      font-weight: 500;
+      font-size: 1.4rem;
+    }
+
+    p:first-child {
+      margin-bottom: 1.5rem;
+    }
+
+  }
+
+  p {
+    color: $flux-white;
+  }
+
+  h1 {
+    color: rgba($flux-white, 0.95);
+    font-size: 2.8em;
+    padding-left: 14px;
+
+    @include media-breakpoint-up(sm) {
+      font-size: 3.8em;
+    }
+  }
+
+  h2 {
+    color: rgba($flux-white, 0.95);
+    font-weight: 600;
+    font-size: 1.4em;
+  }
+
+  a {
+    color: $flux-light-blue !important;
+    font-weight: 400;
+    font-style: italic;
+    text-decoration: underline;
+
+    &:hover {
+      color: $flux-darkest-blue !important;
+      text-shadow: -1px 1px $flux-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;
+    }
+  }
+}
+
+.lead-flux section {
+  padding: 0rem 0 1rem 0 !important;
+  background: none;
+
+
+  a[aria-hidden="true"] {
+    display: none;
+  }
+
+  .td-arrow-down {
+    &::before {
+      border: {
+        color: #{$flux-dark-blue} transparent transparent transparent;
+      }
+    }
+  }
+}
diff --git a/assets/scss/blocks/_nav.scss b/assets/scss/blocks/_nav.scss
@@ -0,0 +1,86 @@
+// // override docsy styles
+nav.navbar {
+  background: $flux-black;
+
+  padding: 0;
+  @include media-breakpoint-down(md) {
+    padding: 10px;
+  }
+
+  .navbar-brand {
+    flex-grow: 1;
+    padding-bottom: 2px;
+
+    svg {
+      display: inline-block;
+      margin: 0 10px 0 -6px;
+      height: 30px;
+      @include media-breakpoint-up(lg) {
+        margin: 0 10px;
+      }
+    }
+  }
+
+  .navbar-nav {
+    margin-top: 0 !important;
+    overflow: visible !important;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    .nav-link {
+      font-size: 1rem;
+      text-transform: none;
+      font-weight: 700;
+
+      margin-top: 3px;
+    }
+  }
+
+  .nav-search-item {
+    height: 40px;
+
+    #docsearch {
+      height: 28px;
+      border: none;
+      max-width: 11rem;
+      padding-left: 9px;
+      margin-top: 4px;
+      @include media-breakpoint-down(md) {
+        max-width: 100%;
+        margin-right: 0;
+        padding-left: 0;
+        .DocSearch-Button {
+          margin-left: 0;
+          width: 100%;
+          .DocSearch-Button-Keys,
+          .DocSearch-Button-Placeholder {
+            display: block;
+            .DocSearch-Button-Key {
+              display: none;
+            }
+          }
+        }
+      }
+
+      margin-right: 1rem;
+    }
+  }
+}
+
+
+.td-sidebar-nav {
+  .td-sidebar-link.tree-root {
+    @include media-breakpoint-up(md) {
+      // https://github.com/fluxcd/website/pull/365#issuecomment-870876960
+      // maybe report upstream docsy and fix there?
+
+      margin-top: 1rem;
+    }
+  }
+
+  // some of the links looked "disabled" - maybe also report upstream?
+  .td-sidebar-link__page {
+    color: $gray-900;
+    font-weight: unset;
+  }
+}
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -0,0 +1,14 @@
+@import "variables_project";
+@import "docsy/main.scss";
+@import "buttons";
+@import "blocks/blocks";
+@import "adopters";
+@import "page";
+@import "index";
+@import "buttons";
+@import "responsive-video";
+@import "highlight";
+@import "gallery";
+@import "support";
+@import "ecosystem";
+@import "adopters_wall";
diff --git a/go.mod b/go.mod
@@ -0,0 +1,9 @@
+module github.com/aenix-io/cozystack-website
+
+go 1.18
+
+require (
+	github.com/google/docsy v0.6.0 // indirect
+	github.com/google/docsy/dependencies v0.6.0 // indirect
+	github.com/mfg92/hugo-shortcode-gallery v0.0.0-20230213173546-50e99e854f92 // indirect
+)
diff --git a/go.sum b/go.sum
@@ -0,0 +1,8 @@
+github.com/FortAwesome/Font-Awesome v0.0.0-20220831210243-d3a7818c253f/go.mod h1:IUgezN/MFpCDIlFezw3L8j83oeiIuYoj28Miwr/KUYo=
+github.com/google/docsy v0.6.0 h1:43bVF18t2JihAamelQjjGzx1vO2ljCilVrBgetCA8oI=
+github.com/google/docsy v0.6.0/go.mod h1:VKKLqD8PQ7AglJc98yBorATfW7GrNVsn0kGXVYF6G+M=
+github.com/google/docsy/dependencies v0.6.0 h1:BFXDCINbp8ZuUGl/mrHjMfhCg+b1YX+hVLAA5fGW7Pc=
+github.com/google/docsy/dependencies v0.6.0/go.mod h1:EDGc2znMbGUw0RW5kWwy2oGgLt0iVXBmoq4UOqstuNE=
+github.com/mfg92/hugo-shortcode-gallery v0.0.0-20230213173546-50e99e854f92 h1:uQSat8EsvCDjt9ztbhel+yBOp/7fEID4BNkn7hNmQpc=
+github.com/mfg92/hugo-shortcode-gallery v0.0.0-20230213173546-50e99e854f92/go.mod h1:uP48acoDrLxll/agXBGFRWEv5F237K3XKWyAeVZ+Mm8=
+github.com/twbs/bootstrap v4.6.2+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0=
diff --git a/hugo.yaml b/hugo.yaml
@@ -0,0 +1,228 @@
+baseURL: /
+title: Flux
+enableRobotsTXT: true
+enableEmoji: true
+
+# Language configuration
+defaultContentLanguage: en
+defaultContentLanguageInSubdir: false
+enableMissingTranslationPlaceholders: true
+
+# Provide .LastMod values
+enableGitInfo: true
+
+module:
+  proxy: direct
+  hugoVersion:
+    extended: true
+  imports:
+    - path: github.com/google/docsy
+      disable: false
+      mounts:
+      # The following entry is the one we actually need, to be able to
+      # refer to it in our own assets/scss files.
+      - source: assets/scss
+        target: assets/scss/docsy
+      # Unfortunately that means we need to redefine all of Docsy's
+      # module mounts here...
+      # https://github.com/google/docsy/commit/215f68033bbc7bddf8dbec2bbabf8749d1998a17 (lines 24f)
+      #
+      # I hope this use-case will be simplified one day.
+      - source: content
+        target: content
+      - source: static
+        target: static
+      - source: layouts
+        target: layouts
+      - source: data
+        target: data
+      - source: assets
+        target: assets
+      - source: i18n
+        target: i18n
+      - source: archetypes
+        target: archetypes
+      - source: node_modules/bootstrap
+        target: assets/vendor/bootstrap
+      - source: node_modules/@fortawesome/fontawesome-free
+        target: assets/vendor/Font-Awesome
+      - source: node_modules/@fortawesome/fontawesome-free/webfonts
+        target: static/webfonts
+    - path: github.com/google/docsy/dependencies
+      disable: false
+    - path: github.com/mfg92/hugo-shortcode-gallery
+      disable: false
+  mounts:
+    - source: content/en
+      target: content
+
+# Markup settings
+# Ref: https://gohugo.io/getting-started/configuration-markup#goldmark
+markup:
+  goldmark:
+    renderer:
+      unsafe: true
+  highlight:
+    # See a complete list of available styles at https://xyproto.github.io/splash/docs/all.html
+    style: friendly
+  parser:
+    autoHeadingID: true
+    autoHeadingIDType: github
+
+languages:
+  en:
+    params:
+      languageName: English
+      languageCode: en
+      time_format_default: 2006-01-02
+      time_format_blog: 2006-01-02
+
+permalinks:
+  blog: /:section/:year/:month/:slug/
+
+outputFormats:
+  SearchIndex:
+    baseName: index
+    mediaType: application/json
+
+outputs:
+  home: [HTML, SearchIndex]
+  page: [HTML, SearchIndex]
+
+params:
+  description: Open and extensible continuous delivery solution for Kubernetes.
+  copyright: The Flux authors
+  github_repo: https://github.com/fluxcd/website
+  github_branch: main
+  github_project_repo: https://github.com/fluxcd/flux2
+  slack: https://cloud-native.slack.com/messages/flux
+  support: /support
+  images: [img/flux-social.png]
+  # Enable Algolia DocSearch
+  algolia_docsearch: true
+  offlineSearch: false
+  version_menu: "Versions"
+  version: "2.2"
+  archived_version: false
+  version_menu_pagelinks: true
+  url_latest_version: https://fluxcd.io/flux/
+  versions:
+    - version: "v2.2"
+      url: https://fluxcd.io
+    - version: "v2.1"
+      url: https://v2-1.docs.fluxcd.io
+    - version: "v2.0"
+      url: https://v2-0.docs.fluxcd.io
+  logos:
+    navbar: flux-horizontal-white.png
+    hero: flux-horizontal-color.png
+    footer: flux-stacked-white.png
+    cncf: cncf-color.png
+  ui:
+    # Enable to show the side bar menu in its compact state.
+    sidebar_menu_compact: true
+    sidebar_menu_foldable: true
+    sidebar_menu_truncate: 1000
+    # Set to true to disable breadcrumb navigation.
+    breadcrumb_disable: false
+    # Set to true to hide the sidebar search box (the top nav search box will still be displayed if search is enabled)
+    sidebar_search_disable: true
+    # Set to false if you don't want to display a logo (/assets/icons/logo.svg) in the top nav bar
+    navbar_logo: true
+    # Set to true to disable the About link in the site footer
+    footer_about_disable: false
+    readingtime:
+      enable: false
+  markmap:
+    enable: true
+  links:
+    # End user relevant links. These will show up on left side of footer and in the community page if you have one.
+    user:
+      - name: Twitter
+        url: https://twitter.com/fluxcd
+        icon: fab fa-twitter
+        desc: Follow us on Twitter to get the latest news!
+      - name: LinkedIn
+        url: https://linkedin.com/groups/8985374
+        icon: fab fa-linkedin
+        desc: Join the Flux Community group on LinkedIn!
+      - name: RSS Feed
+        url: /blog/index.xml
+        icon: fa fa-rss
+        desc: Subscribe to the RSS feed of our blog!
+      - name: Support
+        url: /support
+        icon: fas fa-comments
+        desc: Subscribe to the RSS feed of our blog!
+    # Developer relevant links. These will show up on right side of footer and in the community page if you have one.
+    developer:
+      - name: Flux project on GitHub
+        url: https://github.com/fluxcd
+        icon: fab fa-github
+        desc: Development takes place here!
+      - name: Slack
+        url: https://cloud-native.slack.com/messages/flux
+        icon: fab fa-slack
+        desc: Chat with other project developers
+      - name: Developer mailing list
+        url: https://lists.cncf.io/g/cncf-flux-dev
+        icon: fa fa-envelope
+        desc: Discuss development issues around the project
+      - name: Flux YouTube channel
+        url: https://youtube.com/@fluxcd
+        icon: fab fa-youtube
+        desc: Watch videos about Using Flux and Flux Development
+
+menus:
+  main:
+  - name: Documentation
+    url: /flux
+    weight: 10
+  - name: Code of Conduct
+    parent: Project
+    url: https://github.com/fluxcd/community/blob/main/CODE_OF_CONDUCT.md
+    weight: 1
+  - name: Resources
+    parent: Project
+    url: /resources
+    weight: 5
+  - name: Support
+    parent: Project
+    url: /support
+    weight: 10
+  - name: Community
+    parent: Project
+    url: /community
+    weight: 20
+  - name: Contributing
+    parent: Project
+    url: /contributing
+    weight: 30
+  - name: Governance
+    parent: Project
+    url: /governance
+    weight: 40
+  - name: Roadmap
+    parent: Project
+    url: /roadmap
+    weight: 50
+  - name: Security
+    parent: Project
+    url: /security
+    weight: 60
+  - name: Branding
+    parent: Project
+    url: https://github.com/cncf/artwork/blob/master/examples/graduated.md#flux-logos
+    weight: 9999
+  - name: Adopters
+    url: /adopters
+    weight: 80
+  - name: Ecosystem
+    url: /ecosystem
+    weight: 90
+  - name: Flagger
+    url: https://flagger.app
+    weight: 100
+  - identifier: Project
+    name: Project
+    weight: 110