Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Homepage enrichment #630

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Homepage enrichment #630

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
96047de
enrichment, responsive fixes
lyubomir-popov Nov 7, 2023
5d06cac
fix link alignment and brea kline properly
lyubomir-popov Nov 7, 2023
bb1420c
fix feedback
lyubomir-popov Nov 7, 2023
eb86053
remove irrelevant part of utility
lyubomir-popov Nov 7, 2023
2fae598
address feedback
lyubomir-popov Nov 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions static/sass/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,3 +153,7 @@
padding-left: 0.5rem;
}
}

.p-image-wrapper {
margin-top: $spv--medium;
}
55 changes: 31 additions & 24 deletions templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ <h1 class="u-no-margin--bottom">The lightweight Kubernetes</h1>
<hr class="p-rule">
<div class="p-stection is-landing">
<div>
<a class="p-button--positive" href="#install-microk8s">Get started</a>
<a class="p-button--positive" href="#install-microk8s">Get started</a>
<a href="https://www.brighttalk.com/webcast/6793/378029?utm_source=brighttalk-portal&utm_medium=web&utm_content=microk8s&utm_campaign=webcasts-search-results-feed">Watch an intro to MicroK8s &nbsp;&rsaquo;</a>
</div>
<div>
Expand Down Expand Up @@ -49,28 +49,35 @@ <h2 class="p-text--small-caps">What is MicroK8s</h2>
</section>

<section class="p-section">
<div class="row--25-75 p-section">
<div class="row--25-75 p-section--shallow">
<hr class="p-rule">
<div class="col">
<h2 class="p-text--small-caps">Why MicroK8s</h2>
</div>
<div class="col">
<p class="p-heading--2">The best Kubernetes experience for developers, DevOps, cloud and edge</p>
</div>
</div>
</div>
<div class="row">
<hr class="p-rule col-start-large-4 col-9">
<div class="col-start-large-4 col-3">
<h3 class="p-heading--5">For Developers</h3>
<p>MicroK8s is the easiest and fastest way to get Kubernetes up and running. Experiment with the latest upstream features and toggle services on and off. Seamlessly move your work from dev to production.</p>
</div>
<div class="col-3">
<h3 class="p-heading--5">For DevOps</h3>
<p>With self-healing high availability, transactional OTA updates and secure sandboxed kubelet environments, MicroK8s is the go-to platform for mission-critical workloads. Quickly spin nodes up in your CI/CD and reduce your production maintenance costs.</p>
</div>
<div class="col-3">
<h3 class="p-heading--5">For software vendors</h3>
<p>Leverage the simplicity, robustness and security of MicroK8s as a full embedded Kubernetes platform. Build containerised solutions with a system that doesn't require your attention. Focus on your customers, not the infrastructure.</p>
<div class="col-9 col-start-large-4 col-medium-6">
<div class="p-section--shallow">
<img src="https://assets.ubuntu.com/v1/6bb2f8e7-stocksy-woman-working-ar2-1.jpg" alt="">
Copy link
Contributor

@carkod carkod Nov 27, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you use image template whenever possible? This should improve page loading times especially for large images


{{ image (
  url="https://assets.ubuntu.com/v1/6bb2f8e7-stocksy-woman-working-ar2-1.jpg",
  alt="",
  width="2048",
  height="1024",
  hi_def=True,
  loading="auto"
  ) | safe
}}

You can generate one clicking
Screenshot 2023-11-27 at 14 48 48

</div>
<hr class="p-rule">
<div class="row">
<div class="col-3 col-medium-2">
<h3 class="p-heading--5">For Developers</h3>
<p>MicroK8s is the easiest and fastest way to get Kubernetes up and running. Experiment with the latest upstream features and toggle services on and off. Seamlessly move your work from dev to production.</p>
</div>
<div class="col-3 col-medium-2">
<h3 class="p-heading--5">For DevOps</h3>
<p>With self-healing high availability, transactional OTA updates and secure sandboxed kubelet environments, MicroK8s is the go-to platform for mission-critical workloads. Quickly spin nodes up in your CI/CD and reduce your production maintenance costs.</p>
</div>
<div class="col-3 col-medium-2">
<h3 class="p-heading--5">For software vendors</h3>
<p>Leverage the simplicity, robustness and security of MicroK8s as a full embedded Kubernetes platform. Build containerised solutions with a system that doesn't require your attention. Focus on your customers, not the infrastructure.</p>
</div>
</div>
</div>
</div>
</section>
Expand All @@ -79,12 +86,12 @@ <h3 class="p-heading--5">For software vendors</h3>
<div class="row--50-50">
<hr class="p-rule">
<div class="col p-section">
<h2 class="p-text--small-caps">Hassle-free Kubernetes</h2>
<h2 class="p-text--small-caps u-no-margin--bottom">Hassle-free Kubernetes</h2>
<p class="p-heading--2">The simplest way to get K8s anywhere</p>
</div>
<div class="col">
<p>ARM or Intel. Under the cell tower. On Raspberry Pis. On clouds or everyday appliances. MicroK8s delivers the full Kubernetes experience with a single command.</p>
<p class="p-heading--5 u-no-padding--top">Install. Cluster. Enable the services you need. No hassle.</p>
<p>ARM or Intel. Under the cell tower. On Raspberry Pis. On clouds or everyday appliances. MicroK8s delivers the full Kubernetes experience with a single command.</p>
<p class="p-heading--5">Install. Cluster. Enable the services you need. No hassle.</p>
<p>A fully isolated deployment package protects your underlying system. Self-healing high-availability and over-the-air updates for ultra-reliable operations.</p>
<p>MicroK8s architecture and OS compatibility allows you to deploy on COTS hardware and develop on any workstation.</p>
<p>
Expand All @@ -101,7 +108,7 @@ <h2 id="install-microk8s">Install MicroK8s</h2>
</div>
<div class="u-fixed-width">
<div class="p-tabs">
<div class="p-tabs__list js-tabbed-content u-no-margin--bottom" role="tablist" aria-label="Install MicroK8s">
<div class="p-tabs__list u-no-margin--bottom js-tabbed-content" role="tablist" aria-label="Install MicroK8s">
<div class="p-tabs__item">
<button class="p-tabs__link" role="tab" aria-selected="true" aria-controls="linux-tab" id="linux">Linux</button>
</div>
Expand Down Expand Up @@ -130,7 +137,7 @@ <h2 id="install-microk8s">Install MicroK8s</h2>
<div class="row--50-50">
<hr class="p-rule">
<div class="col p-section">
<h2>Enterprise support option, no licence fees</h2>
<h2>Enterprise support option, <br class="u-hide--small">no licence fees</h2>
</div>
<div class="col">
<p class="p-heading--5">99.9% uptime SLA and 10-year security maintenance</p>
Expand All @@ -153,8 +160,8 @@ <h2>Zero-ops infrastructure</h2>
</div>
</div>
<div class="u-fixed-width u-hide--small">
<div class="p-strip is-deep u-align--center u-vertically-center" style="background: rgba(0, 0, 0, 0.03);">
<img src="https://assets.ubuntu.com/v1/e51438b1-Kubernetes-dedicated+platforms%201.svg" alt="" style="height: 276px;"/>
<div class="" style="background: rgba(0, 0, 0, 0.03);">
<img src="https://assets.ubuntu.com/v1/4a0c1d6d-Artboard%20150.svg" alt=""/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image template please. Unless you have very specific styling, it should work.

</div>
</div>
</section>
Expand Down Expand Up @@ -285,7 +292,7 @@ <h3 class="p-text--small-caps">Whitepaper</h3>
<div class="row">
<div class="col-start-large-7 col-6 col-start-medium-4 col-medium-3">
<hr class="p-rule">
<p><a href="/resources">Find more resources &nbsp;&rsaquo;</a></p>
<p class="u-align-text--right"><a href="/resources">Find more resources &nbsp;&rsaquo;</a></p>
</div>
</div>
</section>
Expand All @@ -302,7 +309,7 @@ <h2>Looking for a more composable Kubernetes?</h2>
<a href="https://ubuntu.com/kubernetes/install#cluster">Get started with Charmed Kubernetes&nbsp;&rsaquo;</a>
</p>
</div>
</div>
</div>
</section>

<section class="p-strip--white">
Expand Down
24 changes: 12 additions & 12 deletions templates/partial/_get-started-linux.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<div class="row--25-75">
<div class="col usv-2">
<img src="https://assets.ubuntu.com/v1/6d9cf05a-Linux-var-width.svg" height="144" alt="Linux">
<div class="row">
<div class="col-3 u-hide--medium u-hide--small p-image-wrapper">
<img src="https://assets.ubuntu.com/v1/310eaa18-Linux-var-width%201.svg" height="48" alt="Linux">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image template if possible.

</div>
<div class="col">
<div class="col-medium-6 col-9">
<ol class="p-stepped-list--detailed">
<li class="p-stepped-list__item">
<div class="row">
Expand All @@ -15,11 +15,11 @@
<pre class="p-code-snippet__block"><code>sudo snap install microk8s --classic</code></pre>
</div>
<p>Don't have the <code>snap</code> command? <a href="https://docs.snapcraft.io/installing-snapd" >Get set up for snaps</a></p>
</div>
</div>
</div>
</div>
</li>

<li class="p-stepped-list__item">
<div class="row">
<div class="col-3">
Expand All @@ -30,11 +30,11 @@
<div class="p-code-snippet">
<pre class="p-code-snippet__block"><code>microk8s status --wait-ready</code></pre>
</div>
</div>
</div>
</div>
</div>
</li>

<li class="p-stepped-list__item">
<div class="row">
<div class="col-3">
Expand All @@ -49,11 +49,11 @@
<pre class="p-code-snippet__block"><code>microk8s enable istio</code></pre>
</div>
<p>Try <code>microk8s enable --help</code> for a list of available services and optional features. <code>microk8s disable &lt;name&gt;</code> turns off a service.</p>
</div>
</div>
</div>
</div>
</li>

<li class="p-stepped-list__item">
<div class="row">
<div class="col-3">
Expand All @@ -65,7 +65,7 @@
<pre class="p-code-snippet__block"><code>microk8s kubectl get all --all-namespaces</code></pre>
</div>
<p>If you mainly use MicroK8s you can make our kubectl the default one on your command-line with <code>alias mkctl="microk8s kubectl"</code>. Since it is a standard upstream kubectl, you can also drive other Kubernetes clusters with it by pointing to the respective kubeconfig file via the <code>--kubeconfig</code> argument.</p>
</div>
</div>
</div>
</div>
</li>
Expand All @@ -80,7 +80,7 @@
<div class="p-code-snippet">
<pre class="p-code-snippet__block"><code>microk8s dashboard-proxy</code></pre>
</div>
</div>
</div>
</div>
</div>
</li>
Expand Down
20 changes: 10 additions & 10 deletions templates/partial/_get-started-macos.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<div class="row--25-75">
<div class="col">
<img src="https://assets.ubuntu.com/v1/236f314d-macos.svg" style="height: 145px;" alt="macOS">
<div class="row">
<div class="col-3 u-hide--medium u-hide--small p-image-wrapper">
<img src="https://assets.ubuntu.com/v1/f96ecd45-macos-logo.svg" style="height: 48px;" alt="macOS">
</div>
<div class="col">
<ol class="p-stepped-list--detailed">
<div class="col-medium-6 col-9">
<ol class="p-list--divided">
<li class="p-stepped-list__item">
<div class="row">
<div class="col-3">
Expand All @@ -25,7 +25,7 @@
</div>
</div>
</li>

<li class="p-stepped-list__item">
<div class="row">
<div class="col-3">
Expand All @@ -40,7 +40,7 @@
</div>
</div>
</li>

<li class="p-stepped-list__item">
<div class="row">
<div class="col-3">
Expand All @@ -61,7 +61,7 @@
</div>
</div>
</li>

<li class="p-stepped-list__item">
<div class="row">
<div class="col-3">
Expand All @@ -80,7 +80,7 @@
</div>
</div>
</li>

<li class="p-stepped-list__item">
<div class="row">
<div class="col-3">
Expand All @@ -95,7 +95,7 @@
</div>
</div>
</li>

<li class="p-stepped-list__item">
<div class="row">
<div class="col-3">
Expand Down
22 changes: 11 additions & 11 deletions templates/partial/_get-started-windows.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<div class="row--25-75">
<div class="col">
<img src="https://assets.ubuntu.com/v1/11ecbd2d-2018-logo-windows.svg" style="height: 145px;" alt="Windows">
<div class="row">
<div class="col-3 u-hide--medium u-hide--small p-image-wrapper">
<img src="https://assets.ubuntu.com/v1/2c5b3fa9-windows-logo.svg" style="height: 48px;" alt="Windows">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image template. For styling attribute you could do:


{{ image (
  url="https://assets.ubuntu.com/v1/2c5b3fa9-windows-logo.svg",
  alt="Windows",
  width="316",
  height="72",
  hi_def=True,
  loading="auto",
  attrs={"style": "height: 48px;"}
  ) | safe
}}

Or of course you could use a classname and add styles to a stylesheet the same way.

</div>
<div class="col">
<div class="col-medium-7 col-9">
<ol class="p-stepped-list--detailed">
<li class="p-stepped-list__item">
<div class="row">
Expand All @@ -18,7 +18,7 @@
</div>
</div>
</li>

<li class="p-stepped-list__item">
<div class="row">
<div class="col-3">
Expand All @@ -33,7 +33,7 @@
</div>
</div>
</li>

<li class="p-stepped-list__item">
<div class="row">
<div class="col-3">
Expand All @@ -48,7 +48,7 @@
</div>
</div>
</li>

<li class="p-stepped-list__item">
<div class="row">
<div class="col-3">
Expand All @@ -63,7 +63,7 @@
</div>
</div>
</li>

<li class="p-stepped-list__item">
<div class="row">
<div class="col-3">
Expand All @@ -84,7 +84,7 @@
</div>
</div>
</li>

<li class="p-stepped-list__item">
<div class="row">
<div class="col-3">
Expand All @@ -103,7 +103,7 @@
</div>
</div>
</li>

<li class="p-stepped-list__item">
<div class="row">
<div class="col-3">
Expand All @@ -118,7 +118,7 @@
</div>
</div>
</li>

<li class="p-stepped-list__item">
<div class="row">
<div class="col-3">
Expand Down