Katenary/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixes links and installation

Browse Source 
- add package links
- change some url
- use SCSS
- remove frameborder (deprecated)
This commit is contained in:
Patrice Ferlet
2025-08-29 18:31:21 +02:00
parent b5eb53ef78
commit 609fa9a0b6
8 changed files with 301 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.html
+1 -1
View File
@@ -15,7 +15,7 @@
<meta name="author" content="Patrice Ferlet (aka metal3d)" />
<link rel="icon" href="icon.ico" />
<title>Katenary - Effortless Helm Chart Conversion</title>
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="main.scss" />
<link
rel="stylesheet"
src/main.css → src/main.scss
+145 -101
View File
@@ -7,6 +7,7 @@
--white: #fff;
--danger-color: #dc3545;
--covered: 50%;
--link-color: #668be2;
}
html {
@@ -22,6 +23,26 @@ body {
overflow-x: hidden;
}
a {
color: var(--link-color);
text-decoration: none;
text-shadow: 0 0;
}
main,
footer {
a {
transition: text-shadow 0.3s ease;
}
a:hover {
/*glow effect */
text-shadow: 0 0 5px var(--link-color), 0 0 10px var(--link-color), 0 0 20px var(--link-color);
}
}
img {
max-width: 100%;
}
@@ -183,16 +204,8 @@ img {
}
}
.how-it-works {
padding: 50px 20px;
text-align: center;
}
.how-to-use {
padding: 50px 20px;
text-align: center;
}
.how-it-works,
.how-to-use,
.tutorials {
padding: 50px 20px;
text-align: center;
@@ -214,22 +227,24 @@ h2 {
.image-placeholder {
margin: 30px auto;
height: 200px;
height: 275px;
width: 100%;
max-width: 800px;
max-width: 1280px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
border-radius: 8px;
}
padding: 2em 0;
img {
margin: 10px;
width: 100%;
height: 100%;
object-fit: fill;
border-radius: 8px;
}
.image-placeholder img {
margin: 10px;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.get-started {
@@ -237,15 +252,23 @@ h2 {
color: var(--white);
padding: 50px 20px;
text-align: center;
display: flex;
flex-direction: column;
pre {
background: var(--white);
color: #333;
padding: 10px;
margin: 20px 0;
border-radius: 5px;
}
>.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 {
src/partials/features.html
-1
View File
@@ -31,7 +31,6 @@
<iframe
src="https://www.youtube.com/embed/RrX5jNxS9IA?si=i0kRVFXOwT3ZqZdB"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
src/partials/get-started.html
+19 -4
View File
@@ -1,12 +1,27 @@
<section class="get-started" id="get-started">
<div class="container">
<h2>Get Started</h2>
<p>Download Katenary's binary and start using it today.</p>
<pre><code>sh &lt;(curl -sSL https://raw.githubusercontent.com/Katenary/katenary/master/install.sh)</code></pre>
<div class="container">
<section class="alternate">
<div class="container">
<h3>Linux users</h3>
<p>
Go to <a href="https://repo.katenary.io/Katenary/katenary/packages"
>Katenary's repository</a> and select your preferred distrubution.
</p>
</div>
</section>
<section class="alternate">
<div class="container">
<h3>Other OS users</h3>
<p>Windows users can use the "setup" executable in the "generic" section.</p>
<p>macOS userss may use the "Darwin" binary.</p>
</div>
</section>
</div>
<p>
<a href="https://repo.katenary.io/Katenary/katenary" class="btn-primary"
>Go to the source repository</a
>
</p>
</div>
</section>
src/partials/header.html
+1 -1
View File
@@ -1,4 +1,4 @@
<header class="header">
<header class="header" id="top">
<div class="container">
<h1>Katenary</h1>
<p>Effortless Helm Chart Conversion for Kubernetes Deployments</p>
src/partials/navbar.html
+3 -3
View File
@@ -6,14 +6,14 @@
<nav>
<ul>
<li>
<a href="#"><i class="fa fa-house"></i> Katenary</a>
<a href="#top"><i class="fa fa-house"></i> Katenary</a>
</li>
<li><a href="#features"><i class="fa fa-gears"></i> Why Katenary?</a></li>
<li><a href="#how-it-works"><i class="fa fa-flash"></i> How It Works</a></li>
<li><a href="#how-to-use"><i class="fa fa-lightbulb-o"></i> How to use</a></li>
<li><a href="#tutorials"><i class="fa fa-university"></i>Tutorials</a></li>
<li><a href="#tutorials"><i class="fa fa-university"></i> Tutorials</a></li>
<li><a href="#get-started"><i class="fa fa-spin fa-gear"></i> Get Started</a></li>
<li>
<li class="external">
<a href="https://repo.katenary.io/Katenary/katenary" target="_blank"
><i class="fa fa-gitea"></i> Katenary repository</a
>