Homepage enrichment #630
Homepage enrichment #630
Conversation
|
Demo starting at https://microk8s-io-630.demos.haus |
Codecov Report
@@ Coverage Diff @@
## main #630 +/- ##
=======================================
Coverage 83.78% 83.78%
=======================================
Files 2 2
Lines 74 74
=======================================
Hits 62 62
Misses 12 12
Flags with carried forward coverage won't be shown. Click here to find out more. |
|
@lyubomir-popov is this expected on medium screen, to have 1/5 columns split, with OS logo in 1 column and instructions in 5? 
|
|
The embedded ascinema seems very large of desktop screen, takes over whole view: 
|
|
thanks @bartaz well spotted. I fixed the 1 col thing on medium. Ascii cinema is fine I think, also out of scope on this pr. |
static/sass/styles.scss
Outdated
| .p-image-wrapper { | ||
| margin-top: $spv--medium; | ||
|
|
||
| &.is-partner { |
There was a problem hiding this comment.
This is-partner doesn't seem used anywhere.
static/sass/styles.scss
Outdated
| @@ -108,7 +108,7 @@ | |||
| } | |||
| } | |||
|
|
|||
| .p-stepped-list__item:first-child { | |||
| .p-list__item:first-child { | |||
There was a problem hiding this comment.
Why was this changed? Doesn't it break something that this style was doing? I think it was supposed to hide the line before first element in stepped list? Is this needed on p-list__item but not p-stepped-list__item?
|
@akbarkz these still needs a final review |
|
@akbarkz pinging again here, can someone please review? very small enrichment pr that is getting stale |
| <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=""> |
There was a problem hiding this comment.
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
| <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=""/> |
There was a problem hiding this comment.
Image template please. Unless you have very specific styling, it should work.
| <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"> |
There was a problem hiding this comment.
Image template if possible.
| <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"> |
There was a problem hiding this comment.
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.
Done
enrich homepage - phoot, isometric illustration
driveby responsive fixes
QA
./run serveIssue / Card
Fixes #
Screenshots
[if relevant, include a screenshot]