From 609fa9a0b62ad4478a0a9431f17f965b95299969 Mon Sep 17 00:00:00 2001 From: Patrice Ferlet Date: Fri, 29 Aug 2025 18:31:21 +0200 Subject: [PATCH] Fixes links and installation - add package links - change some url - use SCSS - remove frameborder (deprecated) --- package.json | 1 + src/index.html | 2 +- src/{main.css => main.scss} | 246 ++++++++++++++++++++-------------- src/partials/features.html | 1 - src/partials/get-started.html | 23 +++- src/partials/header.html | 2 +- src/partials/navbar.html | 6 +- yarn.lock | 131 ++++++++++++++++++ 8 files changed, 301 insertions(+), 111 deletions(-) rename src/{main.css => main.scss} (77%) 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 @@