Skip to content

Commit

Permalink
Rebrand Ubuntu Raspberry Pi
Browse files Browse the repository at this point in the history
  • Loading branch information
Carlos Wu Fei authored and Carlos Wu Fei committed Apr 3, 2024
1 parent 3171a2f commit ba4a323
Show file tree
Hide file tree
Showing 2 changed files with 126 additions and 171 deletions.
21 changes: 21 additions & 0 deletions static/sass/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -473,6 +473,15 @@ summary {
}
}

// Align blog thumbnails
.u-blog-thumbnails {
// Images are populated by JS
img {
aspect-ratio: 16 / 9;
object-fit: cover;
}
}

// Styling for ubuntu navigation logo for engage pages
.navigation-logo-engage {
margin-top: -2.2rem;
Expand Down Expand Up @@ -1563,3 +1572,15 @@ ol.p-list--divided .p-list__item::before {
flex-wrap: wrap;
row-gap: 0.5rem;
}

@media screen and (max-width: $breakpoint-small - 1) {
.u-table-horizontal-scroll {
overflow-x: hidden;
.u-table-horizontal-scroll__table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
}

276 changes: 105 additions & 171 deletions templates/download/raspberry-pi/thank-you.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,212 +8,146 @@

{% block meta_copydoc %}https://docs.google.com/document/d/1RXsLbMB-LJVwiG0gAi0HgVEJvZ9_GIU3ESLJ6KmBb54{% endblock meta_copydoc %}

{% block head_extra%}<meta name="robots" content="noindex" />{% endblock %}
{% block head_extra %}<meta name="robots" content="noindex" />{% endblock %}

{% block body_class %}is-paper{% endblock %}

{% block content %}

{% if version %}
<meta http-equiv="refresh" content="3;url={% if version==releases.latest.core_version %}https://cdimage.ubuntu.com/ubuntu-core/{{ version }}/stable/current/ubuntu-{{ architecture }}.img.xz{% else %}https://cdimage.ubuntu.com/releases/{{ version }}/release/ubuntu-{{ version }}-preinstalled-{{ architecture }}.img.xz{% endif %}">


{% endif %}

<section class="p-strip--suru-topped" style="overflow: visible;">
<div class="row u-vertically-center">
<div class="col-7">
<section class="p-strip is-shallow u-no-padding--bottom">
<div class="row--50-50">
<div class="col">
{% if version %}
<h1>Thank you for downloading<br />
<h1>Thank you for downloading<br class="u-hide--small" />
Ubuntu {% if version==releases.latest.core_version %}Core {% endif %}{{ version }}<br />
for Raspberry Pi</h1>
<p>Your download should start automatically. If it doesn't, <a href="{% if version==releases.latest.core_version %}https://cdimage.ubuntu.com/ubuntu-core/{{ version }}/stable/current/ubuntu-{{ architecture }}.img.xz{% else %}https://cdimage.ubuntu.com/releases/{{ version }}/release/ubuntu-{{ version }}-preinstalled-{{ architecture }}.img.xz{% endif %}">download now</a>.</p>
<p>Your download should start automatically. If it doesn't,
<a href="{% if version==releases.latest.core_version %}https://cdimage.ubuntu.com/ubuntu-core/{{ version }}/stable/current/ubuntu-{{ architecture }}.img.xz{% else %}https://cdimage.ubuntu.com/releases/{{ version }}/release/ubuntu-{{ version }}-preinstalled-{{ architecture }}.img.xz{% endif %}">download now</a>.<br />
{% with version=version, system=architecture, architecture=architecture %}
{% include "download/shared/_verify-checksums.html" %}
{% include "download/shared/_verify-checksums.html" %}
{% endwith %}
{% else %}
</p>
{% else %}
<h1>Thank you</h1>
<h4>However, you have not selected an image to download.</h4>
<p>Go to the <a href="/download/raspberry-pi">download page</a> to select an image.</p>
{% endif %}
</div>
<div class="col-5 u-hide--medium u-hide--small u-align--center">
{{
image(
url="https://assets.ubuntu.com/v1/9f09965f-1+-+Download+and+install+Ubuntu+Server+on+Raspberry+Pi.svg",
alt="",
height="227",
width="350",
hi_def=True,
loading="auto"
) | safe
}}
</div>
<p>However, you have not selected an image to download. Go to the <a href="/download/raspberry-pi">download page</a> to select an image.</p>
{% endif %}
</div>
</section>
<div class="col">
{% include 'shared/_server-download-newsletter.html' %}
</div>
</div>
</section>

<section class="p-strip--light">
<div class="row">
<div class="col-8">
<h2>Installation instructions</h2>
<p>The simplest way to install Ubuntu is to use the <a href="https://www.raspberrypi.com/software/">Raspberry Pi Imager</a> which enables you to select an Ubuntu image during installation. Follow our tutorials below to learn how.</p>
</div>
<section class="p-section">
<hr class="p-rule is-fixed-width" />
<div class="row--50-50 p-section--shallow">
<div class="col">
<h2>Installation instructions</h2>
</div>
<div class="col">
<p>The simplest way to install Ubuntu is to use the <a href="https://www.raspberrypi.com/software/">Raspberry Pi Imager</a> which enables you to select an Ubuntu image during installation. Follow our tutorials below to learn how.</p>
</div>
<div class="row p-divider">
{% if version == releases.latest.core_version %}
<div class="col-4 blog-p-card--post">
<header class="blog-p-card__header--tutorial">
<p class="p-muted-heading u-no-margin--bottom">
core, UC20
</p>
</header>
<div class="blog-p-card__content">
<h3 class="p-heading--3 u-no-margin--top u-no-margin--bottom">
<a class="p-link--soft" href="/core/docs/uc20/install-raspberry-pi">Installing Ubuntu Core 20 on a Raspberry Pi</a>
</div>
<div class="row">
<div class="col-12 col-medium-6 col-start-large-4">
<hr class="p-rule is-fixed-width" />
<div class="row">
{% if version == releases.latest.core_version %}
<div class="col-4 col-medium-2">
<h3 class="p-heading--5">
<a href="/core/docs/uc20/install-raspberry-pi">Installing Ubuntu Core 20 on a Raspberry Pi</a>
</h3>
<p class="u-sv3">A complete guide to installing Ubuntu Core on a Raspberry Pi 4 (4GB or 8GB).</p>
<p>A complete guide to installing Ubuntu Core on a Raspberry Pi 4 (4GB or 8GB).</p>
</div>
<footer class="blog-p-card__footer">
Difficulty: <span class="l-tutorials-meter l-tutorials-meter--2">2 out of 5</span>
</footer>
</div>
{% else %}
<div class="col-4 blog-p-card--post">
<header class="blog-p-card__header--tutorial">
<p class="p-muted-heading u-no-margin--bottom">
iot, desktop
</p>
</header>
<div class="blog-p-card__content">
<h3 class="p-heading--3 u-no-margin--top u-no-margin--bottom">
<a class="p-link--soft" href="/tutorials/how-to-install-ubuntu-desktop-on-raspberry-pi-4">How to install Ubuntu Desktop on Raspberry Pi 4</a>
{% else %}
<div class="col-4 col-medium-2">
<h3 class="p-heading--5">
<a href="/tutorials/how-to-install-ubuntu-desktop-on-raspberry-pi-4">How to install Ubuntu Desktop on Raspberry Pi 4</a>
</h3>
<p class="u-sv3">A complete guide to installing Ubuntu Desktop on a Raspberry Pi 4 (2GB or above).</p>
<p>A complete guide to installing Ubuntu Desktop on a Raspberry Pi 4 (2GB or above).</p>
</div>
<footer class="blog-p-card__footer">
Difficulty: <span class="l-tutorials-meter l-tutorials-meter--1">1 out of 5</span>
</footer>
</div>
{% endif %}
<div class="col-4 blog-p-card--post p-divider__block">
<header class="blog-p-card__header--tutorial">
<h5 class="p-muted-heading u-no-margin--bottom">
iot, server
</h5>
</header>
<div class="blog-p-card__content">
<h3 class="p-heading--3 u-no-margin--top u-no-margin--bottom">
<a class="p-link--soft" href="/tutorials/how-to-install-ubuntu-on-your-raspberry-pi">How to install Ubuntu Server on your Raspberry Pi</a>
{% endif %}
<div class="col-4 col-medium-2">
<h3 class="p-heading--5">
<a href="/tutorials/how-to-install-ubuntu-on-your-raspberry-pi">How to install Ubuntu Server on your Raspberry Pi</a>
</h3>
<p class="u-sv3">A complete guide to installing Ubuntu Server on your Raspberry Pi 4, 3 or 2 in a couple minutes. In a headless setup or with a screen and with a Wi-Fi or ethernet connection.</p>
<p>A complete guide to installing Ubuntu Server on your Raspberry Pi 4, 3 or 2 in a couple minutes. In a headless setup or with a screen and with a Wi-Fi or ethernet connection.</p>
</div>
<footer class="blog-p-card__footer">
Difficulty: <span class="l-tutorials-meter l-tutorials-meter--2">2 out of 5</span>
</footer>
</div>
<div class="col-4 blog-p-card--post p-divider__block">
<header class="blog-p-card__header--tutorial">
<h5 class="p-muted-heading u-no-margin--bottom">
iot, core
</h5>
</header>
<div class="blog-p-card__content">
<h3 class="p-heading--3 u-no-margin--top u-no-margin--bottom">
<a class="p-link--soft" href="/download/raspberry-pi-core">Install Ubuntu Core on a Raspberry Pi</a>
<div class="col-4 col-medium-2">
<h3 class="p-heading--5">
<a href="/download/raspberry-pi-core">Install Ubuntu Core on a Raspberry Pi</a>
</h3>
<p class="u-sv3">Walk through the steps of flashing Ubuntu Core on a Raspberry Pi 2, 3, 4 or CM4. At the end of this process, you will have a board ready for production or testing snaps.</p>
<p>Walk through the steps of flashing Ubuntu Core on a Raspberry Pi 4, 3, 2 or CM4. At the end of this process, you will have a board ready for production or testing snaps.</p>
</div>
<footer class="blog-p-card__footer">
Difficulty: <span class="l-tutorials-meter l-tutorials-meter--3">3 out of 5</span>
</footer>
</div>
</div>
</section>

<section class="p-strip">
<div class="u-fixed-width">
<h2>Make something great today</h2>
<p>Check out these project ideas to help you get started.</p>
</div>
<div class="row p-divider">
<div class="col-3 p-divider__block">
<div class="p-heading-icon--muted">
<div class="p-heading-icon__header">
{{ image (
url="https://assets.ubuntu.com/v1/e2315503-tutorial.svg",
alt="",
width="231",
height="150",
hi_def=True,
loading="lazy",
attrs={"class": "p-heading-icon__img p-heading-icon__img--small"}
) | safe
}}
<h4 class="p-heading-icon__title">Tutorial</h4>
</div>
<h3 class="p-heading--4"><a href="/blog/linux-gaming-tutorial-raspberry-pi-minecraft-server-on-ubuntu-desktop">Raspberry Pi Tutorial: Host a Minecraft
server on Ubuntu Desktop</a></h3>
</div>
</section>

<section class="p-section">
<hr class="p-rule is-fixed-width" />
<div class="row">
<div class="col-6">
<h2>Make something great today</h2>
</div>
<div class="col-3 p-divider__block">
<div class="p-heading-icon--muted">
<div class="p-heading-icon__header">
{{ image (
url="https://assets.ubuntu.com/v1/e2315503-tutorial.svg",
alt="",
width="231",
height="150",
hi_def=True,
loading="lazy",
attrs={"class": "p-heading-icon__img p-heading-icon__img--small"}
) | safe
}}
<h4 class="p-heading-icon__title">Tutorial</h4>
</div>
<h3 class="p-heading--4"><a href="/blog/common-sense-using-the-raspberry-pi-sense-hat-on-ubuntu-impish-indri">Common Sense &mdash; using the Raspberry
Pi Sense HAT on Ubuntu Impish Indri</a></h3>
</div>
<div class="col-6">
<ul class="p-list--divided">
<li class="p-list__item">
<a href="/blog/linux-gaming-tutorial-raspberry-pi-minecraft-server-on-ubuntu-desktop">Raspberry Pi Tutorial: Host a Minecraft server on Ubuntu Desktop</a>
</li>
<li class="p-list__item">
<a href="/blog/common-sense-using-the-raspberry-pi-sense-hat-on-ubuntu-impish-indri">Common Sense &mdash; using the Raspberry Pi Sense HAT on Ubuntu Impish Indri</a>
</li>
<li class="p-list__item">
<a href="/blog/homelab-clusters-lxd-micro-cloud-on-raspberry-pi">Homelab clusters: LXD micro cloud on Raspberry Pi</a>
</li>
<li class="p-list__item">
<a href="https://maas.io/tutorials/build-your-own-bare-metal-cloud-using-a-raspberry-pi-cluster-with-maas#1-overview">Build your own bare metal cloud using a Raspberry Pi cluster with MAAS</a>
</li>
</ul>
</div>
<div class="col-3 p-divider__block">
<div class="p-heading-icon--muted">
<div class="p-heading-icon__header">
{{ image (
url="https://assets.ubuntu.com/v1/e2315503-tutorial.svg",
alt="",
width="231",
height="150",
hi_def=True,
loading="lazy",
attrs={"class": "p-heading-icon__img p-heading-icon__img--small"}
) | safe
}}
<h4 class="p-heading-icon__title">Tutorial</h4>
</div>
<h3 class="p-heading--4"><a href="/blog/homelab-clusters-lxd-micro-cloud-on-raspberry-pi">Homelab clusters: LXD micro cloud on Raspberry Pi</a></h3>
</div>
</section>

<section class="p-section--deep">
<div class="row">
<hr class="p-rule"/>
<div class="col-3 col-medium-6">
<div class="p-section--shallow">
<h2 class="p-text--small-caps"><a href="/blog/tag/raspberry-pi">Latest from&nbsp;our&nbsp;blog&nbsp;&rsaquo;</a></h2>
</div>
</div>
<div class="col-3 p-divider__block">
<div class="p-heading-icon--muted">
<div class="p-heading-icon__header">
{{ image (
url="https://assets.ubuntu.com/v1/e2315503-tutorial.svg",
alt="",
width="231",
height="150",
hi_def=True,
loading="lazy",
attrs={"class": "p-heading-icon__img p-heading-icon__img--small"}
) | safe
}}
<h4 class="p-heading-icon__title">Tutorial</h4>
</div>
<h3 class="p-heading--4"><a href="https://maas.io/tutorials/build-your-own-bare-metal-cloud-using-a-raspberry-pi-cluster-with-maas#1-overview">Build
your own bare metal cloud using a Raspberry Pi cluster with MAAS</a></h3>
<div class="col-9 col-medium-6">
<div class="row p-section--shallow" id="blog-latest">
</div>
</div>
</div>

<template style="display:none" id="blog-template">
<div class="col-3 col-medium-2">
<div class="article-image u-blog-thumbnails p-image-wrapper"></div>
<h3 class="p-heading--5"><a class="article-link article-title"></a></h3>
<p class="article-excerpt"></p>
</div>
</template>
</section>

{% with section_classes='p-strip--light is-bordered', heading_topic='Raspberry Pi', tag_name='raspberry-pi', tag_id='1672', limit='4' %}
{% include "shared/_latest_news_strip.html" %}
{% endwith %}
<script src="{{ versioned_static('js/dist/latest-news.js') }}"></script>
<script>
canonicalLatestNews.fetchLatestNews(
{
articlesContainerSelector: "#blog-latest",
articleTemplateSelector: "#blog-template",
excerptLength: 200,
tagId: 1672,
limit: 3,
linkImage: true,
}
)
</script>

{% endblock %}

0 comments on commit ba4a323

Please sign in to comment.