diff --git a/_includes/footer.html b/_includes/footer.html
index e488f32d0..a1d4ed3f1 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -20,13 +20,14 @@
Community
Slack
Twitter
- Forum
+ Discussions
Blog
Top Contributors
diff --git a/_includes/navigation.html b/_includes/navigation.html
index d829adc6f..aab354dd3 100644
--- a/_includes/navigation.html
+++ b/_includes/navigation.html
@@ -3,9 +3,9 @@
-
+ onclick="if (document.getElementById('navigation').classList.contains('menu-open')) { document.getElementById('navigation').classList.remove('menu-open') } else { document.getElementById('navigation').classList.add('menu-open') }; return false;">
diff --git a/_includes/values.inc b/_includes/values.inc
index e79d2d6b3..a87bb3d1a 100644
--- a/_includes/values.inc
+++ b/_includes/values.inc
@@ -1,17 +1,18 @@
{% assign blogLink = '//blog.rook.io/' %}
-{% assign cloudicalLink = '//cloudical.io/' %}
-{% assign cncfLink = '//www.cncf.io' %}
{% assign communityMeetingLink = '//github.com/rook/rook#community-meeting' %}
{% assign contributeLink = '//github.com/rook/rook/blob/master/CONTRIBUTING.md#how-to-contribute' %}
{% assign discussionLink = '//github.com/rook/rook/discussions' %}
{% assign featureRequestLink = '//github.com/rook/rook/issues' %}
-{% assign forumLink = '//groups.google.com/forum/#!forum/rook-dev' %}
+{% assign newIssueLink = '//github.com/rook/rook/issues/new/choose' %}
{% assign gettingStartedLink = '/docs/rook/latest-release/Getting-Started/quickstart/' %}
{% assign githubLink = '//github.com/rook/rook' %}
{% assign latestDocs = '/docs/rook/latest-release/' %}
-{% assign cybozuLink = '//cybozu.com' %}
-{% assign redHatLink = '//www.redhat.com/en/technologies/cloud-computing/openshift-data-foundation' %}
{% assign slackLink = '//slack.rook.io/' %}
{% assign twitterLink = '//twitter.com/rook_io' %}
-{% assign upboundLink = '//upbound.io' %}
+
+{% assign cloudicalLink = '//cloudical.io/' %}
+{% assign cncfLink = '//www.cncf.io' %}
+{% assign cybozuLink = '//cybozu.com' %}
{% assign koorLink = '//koor.tech' %}
+{% assign redHatLink = '//www.redhat.com/en/technologies/cloud-computing/openshift-data-foundation' %}
+{% assign upboundLink = '//upbound.io' %}
diff --git a/css/docs.scss b/css/docs.scss
deleted file mode 100644
index 9015d1511..000000000
--- a/css/docs.scss
+++ /dev/null
@@ -1,432 +0,0 @@
----
----
-@import 'vars';
-@import 'minima';
-
-#content {
- display: -ms-flexbox;
- display: flex;
- -ms-flex-align: center;
- align-items: center;
-
- #holder {
- margin: 90px 0 25px;
-
- @media (max-width: $smWidth) {
- margin: 45px 0 25px;
- }
- }
-
- h1 {
- margin: 0 0 36px;
- font-size: 25px;
- line-height: normal;
- color: $black;
- }
-
- h2 {
- margin: 60px 0 20px;
- font-size: 25px;
- line-height: normal;
- color: $black;
- }
-
- a {
- font-family: $fontHeader;
- font-size: 16px;
- font-weight: 500;
- color: $blue;
- text-decoration: none;
- transition: all $timingFast ease-in-out;
-
- &:visited {
- color: $blue;
- }
-
- &:hover,
- &:focus,
- &:active {
- color: $blueDark;
- }
- }
-
- p {
- font-size: 16px;
- font-weight: 300;
- line-height: normal;
- }
-
- img {
- width: 100%;
- height: auto;
- }
-
- code {
- font-family: monospace;
- font-size: 14px;
- color: $textMuted;
- background-color: $codeBackground;
- border-radius: 0;
- border: none;
- }
-
- .highlight {
- &,
- code,
- .go {
- background-color: $codeBackground;
- font-size: 14px;
- color: $textDark;
- }
- }
-
- .highlighter-rouge {
- .highlight {
- background-color: $codeBackground;
- font-size: 14px;
- border: none;
- padding: 12px;
- margin-bottom: 15px;
- }
-
- pre.highlight {
- margin-bottom: 0;
- }
- }
-
- pre > code {
- background-color: $codeBackground;
- }
-
- .docs-header {
- display: -ms-flexbox;
- display: flex;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -ms-flex-align: center;
- align-items: center;
- max-width: $pageWidth;
- padding: 37px 0 38px;
-
- @media (max-width: $smWidth) {
- -ms-flex-align: start;
- align-items: flex-start;
- -ms-flex-direction: column;
- flex-direction: column;
- }
-
- h1 {
- margin: 0;
- display: -ms-inline-flexbox;
- display: inline-flex;
-
- @media (max-width: $smWidth) {
- margin-bottom: 15px;
- }
- }
-
- .versions {
- display: -ms-flexbox;
- display: flex;
- position: relative;
- -ms-flex-direction: column;
- flex-direction: column;
- -ms-flex-align: center;
- align-items: center;
- -ms-flex-pack: center;
- justify-content: center;
-
- &:before {
- content: '';
- position: absolute;
- bottom: -4px;
- height: 4px;
- width: 100%;
- border-radius: 3px;
- background-color: $blue;
- }
-
- &:hover {
- .versions-dropdown-content {
- display: -ms-flexbox;
- display: flex;
-
- @media (max-width: $smWidth) {
- margin-left: 10px;
- }
- }
- }
-
- a[role='button'] {
- color: $textDark;
- padding: 0 25px 0 3px;
- }
-
- .versions-dropdown-content {
- display: none;
- -ms-flex-direction: column;
- flex-direction: column;
- -ms-flex-align: start;
- align-items: flex-start;
- position: absolute;
- top: 24px;
- background-color: $white;
- padding: 15px;
- border-radius: 10px;
- box-shadow: -2px 5px 8px 0 rgba($black, 0.1);
- z-index: 1;
- white-space: nowrap;
-
- a {
- font-size: 17px;
- position: relative;
- color: $textDark;
-
- &:before {
- content: '';
- position: absolute;
- bottom: -4px;
- height: 4px;
- width: 0;
- border-radius: 3px;
- background-color: transparent;
- transition: all $timingFastest ease-in-out;
- }
-
- + a {
- margin-top: 10px;
- }
-
- &:hover,
- &:focus,
- &:active {
- color: $textDark;
-
- &:before {
- width: 100%;
- background-color: $blue;
- }
- }
- }
- }
-
- img {
- position: absolute;
- right: 3px;
- width: 16px;
- height: auto;
- z-index: 0;
- }
- }
-
- select {
- height: 24px;
- border: none;
- background-color: transparent;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- color: $textDark;
- font-family: $fontHeader;
- font-weight: 500;
- font-size: 18px;
- padding: 0 22px 0 0px;
- cursor: pointer;
- z-index: 1;
-
- &::-ms-expand {
- display: none; /* hide the default arrow in ie10 and ie11 */
- }
-
- &:focus,
- &:-moz-focusring {
- outline: 0;
- color: transparent;
- text-shadow: 0 0 0 $black;
- }
-
- option {
- font-size: 16px;
- }
- }
- }
-
- .page {
- max-width: $pageWidth;
- display: -ms-flexbox;
- display: flex;
-
- @media (max-width: $smWidth) {
- -ms-flex-direction: column;
- flex-direction: column;
- }
- }
-
- .docs-menu {
- min-width: 260px;
- padding-right: 30px;
-
- @media (max-width: $mdWidth) {
- padding-right: 0;
- }
-
- & > ul {
- top: 0;
- position: -webkit-sticky;
- position: sticky;
- padding-top: 30px;
- margin-bottom: 20px;
-
- & > li {
- transition: height 0.3s ease-in-out;
- overflow: hidden;
- margin-bottom: 40px;
-
- &.open {
- height: auto;
- margin-bottom: 30px;
- }
- }
- }
-
- ul {
- margin-left: 0;
- list-style: none;
- min-width: 0;
-
- &:first-of-type {
- li.children {
- padding-right: 24px;
- }
- }
-
- li {
- padding-left: 0;
- position: relative;
-
- &.current {
- color: $blue;
- opacity: 0.76;
- }
-
- &.childCurrent > a {
- color: $blue;
- }
-
- &,
- a {
- font-family: $fontHeader;
- font-weight: 500;
- font-size: 16px;
- color: $textDark;
- }
-
- ul {
- margin: 20px 0 0 20px;
-
- li:not(:last-of-type) {
- margin-bottom: 16px;
- }
-
- li,
- a {
- font-family: $fontBody;
- font-weight: normal;
- color: $textDark;
- font-size: 12px;
- }
-
- ul {
- margin: 0 0 0 10px;
- }
- }
-
- .arrow {
- position: absolute;
- top: 0;
- right: 0;
- height: 24px;
- width: 24px;
- cursor: pointer;
- z-index: 1;
-
- img {
- position: absolute;
- top: 9px;
- right: 6px;
- width: 12px;
- height: auto;
- }
- }
-
- &.open .arrow img {
- -webkit-transform: rotateX(180deg);
- transform: rotateX(180deg);
- transition: -webkit-transform $timingFast ease-in-out;
- transition: transform $timingFast ease-in-out;
- transition: transform $timingFast ease-in-out, -webkit-transform $timingFast ease-in-out;
- }
- }
- }
- }
-
- .docs-content {
- -ms-flex: 1;
- flex: 1;
- min-width: 0;
- position: relative;
-
- a {
- font-family: $fontBody;
- font-size: 16px;
- font-weight: 300;
- }
-
- .docs-actions {
- position: absolute;
- line-height: 30px;
- right: 0;
-
- a {
- font-family: $fontHeader;
- font-weight: 500;
- font-size: 16px;
- }
- }
-
- table {
- text-align: left;
-
- th {
- white-space: nowrap;
- }
-
- th:not(:last-of-type),
- td:not(:last-of-type) {
- padding: 0 15px 5px 0;
- }
- }
- }
-
- .alert {
- padding: 20px;
- margin-bottom: 15px;
- margin-top: 41px;
- border-radius: 4px;
- border: 1px solid #000;
-
- &.master {
- border-color: #f44336;
- background-color: #f44336;
- color: #ffffff;
- p {
- color: #ffffff;
- }
- }
-
- &.old {
- border-color: #2196f3;
- color: #2196f3;
- }
- }
-}
\ No newline at end of file
diff --git a/css/index.scss b/css/index.scss
index bd50b9e64..32916668f 100644
--- a/css/index.scss
+++ b/css/index.scss
@@ -9,7 +9,7 @@
align-items: center;
#holder {
- margin: 120px 0 60px;
+ margin: 60px 0 60px;
@media (max-width: $smWidth) {
margin: 45px 0 25px;
@@ -49,13 +49,23 @@
}
}
+ ul {
+ li {
+ font-size: 18px;
+ font-weight: 300;
+ line-height: 1.67;
+ color: #4a4a4a;
+ color: $textDark;
+ }
+ }
+
img {
width: 100%;
max-width: 660px;
}
.hero {
- margin-bottom: 140px;
+ margin-bottom: 100px;
@media (max-width: $smWidth) {
margin-bottom: 50px;
@@ -127,39 +137,13 @@
}
}
- .storage {
- margin: 120px 0 140px;
-
- @media (max-width: $smWidth) {
- margin: 40px 0 70px;
- }
- }
-
- .providers {
- margin-top: 50px;
-
- span {
- font-family: $fontHeader;
- font-size: 18px;
- font-weight: 500;
- color: $textLight;
- position: relative;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -ms-flex-align: center;
- align-items: center;
- padding-left: 15px;
- margin-bottom: 15px;
+ .header-section {
+ margin-top: 20px;
+ width: 100%;
- &:before {
- content: '';
- position: absolute;
- left: 0;
- height: 12px;
- width: 12px;
- background-color: $blue;
- border-radius: 50%;
- }
+ h1 {
+ text-align: center;
+ margin-bottom: 20px;
}
}
@@ -203,54 +187,10 @@
color: $white !important;
}
}
-
- .terminal-buttons {
- margin-bottom: -15px;
-
- button {
- border-radius: 5px;
- background-color: $purpleLight;
- color: $white;
- border: none;
- box-shadow: none;
- cursor: pointer;
- display: -ms-flexbox;
- display: flex;
- width: 100%;
- height: 32px;
- -ms-flex-align: center;
- align-items: center;
- -ms-flex-pack: center;
- justify-content: center;
- font-family: $fontHeader;
- font-size: 13px;
- font-weight: 500;
- transition: all $timingFast ease-in-out;
-
- &:focus,
- &:active,
- &:visited {
- outline: 0;
- background-color: $purpleLight;
- }
-
- &:hover {
- background-color: $purpleDark;
- }
-
- &.active {
- background-color: $blue;
- }
- }
- }
}
.affiliates {
- margin: 60px 0 140px;
-
- @media (max-width: $smWidth) {
- margin: 40px 0 70px;
- }
+ margin: 30px 0 30px;
[class*='col-'] {
text-align: center;
@@ -485,4 +425,24 @@
}
}
}
+
+ a:not(.button) {
+ color: $blue;
+ &:visited {
+ text-decoration: none;
+ }
+
+ &:hover,
+ &:focus,
+ &:active {
+ color: $blueDarker;
+ text-decoration: underline;
+ }
+ }
+
+ .providers {
+ h2 {
+ text-align: center;
+ }
+ }
}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index da70638b2..c40685e0b 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -150,6 +150,7 @@ p {
-ms-flex-negative: 0;
flex-shrink: 0;
overflow: visible;
+ border-bottom: 1px solid $footerDelimiter;
& > div {
display: -ms-flexbox;
@@ -173,24 +174,20 @@ p {
display: none;
cursor: pointer;
- width: 16px;
- height: 16px;
+ height: 24px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
- transition: 0.5s ease-in-out;
+ transition: all $timingFast ease-in-out;
span {
display: block;
- position: absolute;
+ position: relative;
height: 2px;
- width: 14px;
+ width: 32px;
background: $textDark;
border-radius: 1px;
opacity: 1;
left: 0;
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- transition: 0.25s ease-in-out;
margin: 0 1px;
}
@@ -211,26 +208,17 @@ p {
-webkit-transform-origin: left center;
transform-origin: left center;
}
+ }
- body.menu-open & {
- span:nth-child(1) {
- -webkit-transform: rotate(45deg);
- transform: rotate(45deg);
- top: 2px;
- left: 2px;
- }
-
- span:nth-child(2) {
- width: 0%;
- opacity: 0;
- }
+ &.menu-open {
+ .hamburger-controls {
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+ transition: all $timingFast ease-in-out;
+ }
- span:nth-child(3) {
- -webkit-transform: rotate(-45deg);
- transform: rotate(-45deg);
- top: 12px;
- left: 2px;
- }
+ .links {
+ display: block;
}
}
@@ -246,6 +234,7 @@ p {
justify-content: flex-end;
-ms-flex-align: center;
align-items: center;
+ background-color: $white;
li {
display: -ms-inline-flexbox;
@@ -261,6 +250,7 @@ p {
}
a:not(.button) {
+ position: relative;
text-decoration: none;
color: $textDark;
font-family: $fontHeader;
@@ -277,6 +267,28 @@ p {
&:active {
color: $black;
}
+
+ &:before {
+ content: '';
+ position: absolute;
+ bottom: -4px;
+ height: 4px;
+ width: 0;
+ border-radius: 3px;
+ background-color: transparent;
+ transition: all $timingFastest ease-in-out;
+ }
+
+ &:hover,
+ &:focus,
+ &:active {
+ color: $textDark;
+
+ &:before {
+ width: 100%;
+ background-color: $blue;
+ }
+ }
}
.dropdown {
@@ -314,31 +326,9 @@ p {
font-size: 17px;
position: relative;
- &:before {
- content: '';
- position: absolute;
- bottom: -4px;
- height: 4px;
- width: 0;
- border-radius: 3px;
- background-color: transparent;
- transition: all $timingFastest ease-in-out;
- }
-
+ a {
margin-top: 24px;
}
-
- &:hover,
- &:focus,
- &:active {
- color: $textDark;
-
- &:before {
- width: 100%;
- background-color: $blue;
- }
- }
}
}
}
@@ -358,10 +348,10 @@ p {
bottom: 0;
padding-left: $pagePadding;
text-align: left;
-
- .menu-open & {
- display: block;
- }
+ margin-top: 24px;
+ padding-bottom: 20px;
+ border-bottom: 1px solid $footerDelimiter;
+ height: fit-content;
li {
display: -ms-flexbox;
@@ -409,13 +399,14 @@ p {
#content {
-ms-flex: 1 0 auto;
flex: 1 0 auto;
- margin-bottom: 50px;
+ margin-bottom: 10;
}
#footer {
-ms-flex-negative: 0;
flex-shrink: 0;
- padding: 0 0 50px;
+ padding: 0 0 40px;
+ border-top: 1px solid $footerDelimiter;
.top,
.middle,
@@ -437,8 +428,12 @@ p {
height: 39px;
}
+ .top {
+ margin: 20px auto 30px;
+ }
+
.middle {
- margin: 104px auto 30px;
+ margin: 20px auto 10px;
[class*='col'] {
-ms-flex-positive: 0;
diff --git a/index.html b/index.html
index dc4012801..8ff569485 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,11 @@ Open-Source,
Cloud-Native Storage for Kubernetes
- What is Rook?
+
@@ -39,13 +43,10 @@
Storage Operators for Kubernetes
-
+
Ceph Storage Provider
Rook orchestrates the Ceph storage solution, with a specialized Kubernetes Operator to automate management. Rook ensures that Ceph will run well on Kubernetes and simplify the deployment and management experience.
-
-
- Who loves Rook?
- With hundreds of contributors and millions of downloads of the Rook software, this true community-driven effort is putting dynamic orchestration, high performance, and solid reliability in the hands of a global user base.
The Rook operator is deployed in production across multiple industries, enabling them to store, deliver & protect the data that powers their businesses.
+
- Features of Rook
+
diff --git a/support.html b/support.html
new file mode 100644
index 000000000..c94b48784
--- /dev/null
+++ b/support.html
@@ -0,0 +1,70 @@
+---
+stylesheet: index
+---
+
+{% include values.inc %}
+
+
+
+
+
Support
+
+ The Rook community is here to support you:
+
+
+
+
+
+
+
+
Commercial Support and Services
+
+
+
+
+
+
+
+
+ Koor Technologies offers a variety of services and products to help you with Ceph data storage. Choose stand-alone Ceph or use Rook to connect your storage to Kubernetes. Get help from Koor experts at every step.
+
+
+ Services include:
+
+ - Managed Ceph and Rook service, consulting and support.
+ - Hosted Rook Ceph clusters.
+ - Data Control Center application for insights into Rook Ceph clusters.
+
+
+
+
+
+
+
+ Red Hat® OpenShift® Data Foundation is software-defined storage for containers. Red Hat OpenShift Data Foundation helps teams develop and deploy applications with storage quickly and efficiently across clouds.
+
+ Red Hat OpenShift Data Foundation is included with Red Hat OpenShift Platform Plus, a complete set of powerful, optimized tools to secure, protect, and manage your apps.
+
+
+ - Based on Rook, Ceph, and other open source projects
+ - Fully supported Enterprise solution
+
+
+
+
+
+
+
+
+ To add your company to the list of support providers, please open a pull request against the rook.github.io repository.
+
+
+