diff --git a/package.json b/package.json
index 93dd19e..00b4906 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
"license": "MIT",
"private": true,
"devDependencies": {
+ "@parcel/transformer-sass": "2.13.2",
"parcel": "^2.13.2",
"posthtml-doctype": "^1.1.1",
"posthtml-include": "^2.0.1"
diff --git a/src/index.html b/src/index.html
index 4d76522..b374264 100644
--- a/src/index.html
+++ b/src/index.html
@@ -15,7 +15,7 @@
Katenary - Effortless Helm Chart Conversion
-
+
.container {
+ display: flex;
+ flex-direction: row;
+ }
}
-.get-started pre {
- background: var(--white);
- color: #333;
- padding: 10px;
- margin: 20px 0;
- border-radius: 5px;
-}
div.video {
padding-top: 25px;
@@ -275,21 +298,33 @@ iframe {
section {
width: 100%;
+
+ &:nth-child(even) .example {
+ text-align: right;
+ flex-direction: row-reverse !important;
+ }
+
+ &:nth-child(odd) .example {
+ text-align: left;
+ flex-direction: row;
+ }
+
+ &:nth-child(even) .example h3 {
+ text-align: right;
+ }
+
+ &.alternate:nth-child(odd) {
+ background: var(--light-color);
+ color: var(--dark-color);
+ }
+
+ &.alternate:nth-child(even) {
+ background: var(--dark-color);
+ color: var(--light-color);
+ }
+
}
-section:nth-child(even) .example {
- text-align: right;
- flex-direction: row-reverse !important;
-}
-
-section:nth-child(odd) .example {
- text-align: left;
- flex-direction: row;
-}
-
-section:nth-child(even) .example h3 {
- text-align: right;
-}
.example>div {
flex: 1 1 200px;
@@ -309,16 +344,6 @@ p code {
display: inline-block;
}
-section.alternate:nth-child(odd) {
- background: var(--light-color);
- color: var(--dark-color);
-}
-
-section.alternate:nth-child(even) {
- background: var(--dark-color);
- color: var(--light-color);
-}
-
#menu-toggle {
position: fixed;
z-index: 11;
@@ -340,11 +365,18 @@ section.alternate:nth-child(even) {
top: 0px;
z-index: 10;
width: 100%;
+
+ .container {
+ padding: 0;
+ }
+
+ li {
+ &.external {
+ border-left: 1px solid var(--secondary-color);
+ }
+ }
}
- .navbar .container {
- padding: 0;
- }
nav ul {
display: flex;
@@ -401,10 +433,11 @@ section.alternate:nth-child(even) {
border: 1px solid var(--dark-color);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
border-radius: 5px;
- }
- .navbar:has(a:active) {
- display: none;
+ &:has(a:active) {
+ display: none;
+ }
+
}
nav ul {
@@ -412,13 +445,21 @@ section.alternate:nth-child(even) {
list-style: none;
padding: 0;
margin: 0;
+
+ li {
+ margin: 0;
+
+ a {
+ color: var(--white);
+ text-decoration: none;
+ display: block;
+ padding: 10px;
+ }
+ }
}
- nav ul li {
- margin: 0;
- }
- nav ul li a {
+ a {
color: var(--white);
text-decoration: none;
display: block;
@@ -434,50 +475,53 @@ footer {
text-align: center;
padding: 20px 0;
font-size: 0.9rem;
+
+ section {
+ padding: 20px;
+ text-align: center;
+ flex: 1 1 250px !important;
+
+ p {
+ font-weight: bold;
+ }
+ }
+
+ ul {
+ list-style: none;
+ padding: 0;
+
+ li {
+ margin: 5px 0;
+ }
+ }
+
+
+ a {
+ color: var(--link-color);
+ }
+
+ .container {
+ display: flex;
+ flex: 1 1 auto;
+ justify-content: space-between;
+ align-items: start;
+ width: 100%;
+ flex-wrap: wrap;
+
+ >p {
+ flex: 1 1 auto;
+ text-align: center;
+ }
+ }
+
+
+ section {
+ flex: 1 1 auto;
+ align-self: normal;
+ position: relative;
+ }
}
-footer section {
- padding: 20px;
- text-align: center;
- flex: 1 1 250px !important;
-}
-
-footer section p {
- font-weight: bold;
-}
-
-footer ul {
- list-style: none;
- padding: 0;
-}
-
-footer ul li {
- margin: 5px 0;
-}
-
-footer a {
- color: var(--white);
-}
-
-footer .container {
- display: flex;
- flex: 1 1 auto;
- justify-content: space-between;
- align-items: start;
- width: 100%;
- flex-wrap: wrap;
-}
-
-footer .container>p {
- flex: 1 1 auto;
- text-align: center;
-}
-
-footer section {
- flex: 1 1 auto;
- align-self: normal;
- position: relative;
-}
@media (min-width: 768px) {
footer section:after {
diff --git a/src/partials/features.html b/src/partials/features.html
index a6d8330..6cfd870 100644
--- a/src/partials/features.html
+++ b/src/partials/features.html
@@ -31,7 +31,6 @@