mirror of
https://github.com/canonical/canonical-design.git
synced 2025-07-20 16:42:15 +00:00
Merge branch 'flask-base' into WD-18647-refactor-open-design
This commit is contained in:
Madhur Jain
50
_data/icons.yaml
Normal file
50
_data/icons.yaml
Normal file
@ -0,0 +1,50 @@
|
||||
- name: highlight-off
|
||||
- name: highlight-on
|
||||
- name: home
|
||||
- name: import
|
||||
- name: in-progress
|
||||
- name: information
|
||||
- name: inspector-debug
|
||||
- name: warning-grey
|
||||
- name: spinner
|
||||
- name: controllers
|
||||
- name: change-version
|
||||
- name: loading-steps
|
||||
- name: lock-locked-active
|
||||
- name: lock-locked
|
||||
- name: lock-unlock
|
||||
- name: machines
|
||||
- name: maximise-bar
|
||||
- name: menu
|
||||
- name: minimise-bar
|
||||
- name: minus
|
||||
- name: models
|
||||
- name: mount-2
|
||||
- name: mount
|
||||
- name: open-terminal
|
||||
- name: pin
|
||||
- name: plans
|
||||
- name: plus
|
||||
- name: pods
|
||||
- name: power-error
|
||||
- name: power-off
|
||||
- name: power-on
|
||||
- name: profile
|
||||
- name: help
|
||||
- name: restart
|
||||
- name: revisions
|
||||
- name: search
|
||||
- name: security
|
||||
- name: settings
|
||||
- name: share
|
||||
- name: show
|
||||
- name: sort-both
|
||||
- name: sort-down
|
||||
- name: sort-up
|
||||
- name: starred
|
||||
- name: status-failed-small
|
||||
- name: error
|
||||
- name: status-in-progress-small
|
||||
- name: status-in-progress
|
||||
- name: status-queued-small
|
||||
- name: status-queued
|
||||
47
_data/resources.yaml
Normal file
47
_data/resources.yaml
Normal file
@ -0,0 +1,47 @@
|
||||
- svg_link_light: https://assets.ubuntu.com/v1/563c0d9b-Canonical.svg
|
||||
svg_link_dark: https://assets.ubuntu.com/v1/3cf74f71-Canonical%20Dark.svg
|
||||
name: Canonical Logo
|
||||
|
||||
- svg_link_light: https://assets.ubuntu.com/v1/a7e3c509-Canonical%20Ubuntu.svg
|
||||
svg_link_dark: https://assets.ubuntu.com/v1/594d0a0c-Canonical%20Ubuntu%20Dark.svg
|
||||
name: Canonical Ubuntu Logo
|
||||
|
||||
- svg_link_light: https://assets.ubuntu.com/v1/10140ab8-Canonical%20Snapcraft.svg
|
||||
svg_link_dark: https://assets.ubuntu.com/v1/6b7b9995-Canonical%20Snapcraft%20Dark.svg
|
||||
name: Canonical Snapcraft Logo
|
||||
|
||||
- svg_link_light: https://assets.ubuntu.com/v1/50cd3f20-Canonical%20Anbox.svg
|
||||
svg_link_dark: https://assets.ubuntu.com/v1/c65cea90-Canonical%20Anbox%20Dark.svg
|
||||
name: Canonical Anbox Logo
|
||||
|
||||
- svg_link_light: https://assets.ubuntu.com/v1/e45b7f3f-Canonical%20MAAS.svg
|
||||
svg_link_dark: https://assets.ubuntu.com/v1/2eee4c1c-Canonical%20MAAS%20Dark.svg
|
||||
name: Canonical MAAS Logo
|
||||
|
||||
- svg_link_light: https://assets.ubuntu.com/v1/7a3e288d-Canonical%20Landscape.svg
|
||||
svg_link_dark: https://assets.ubuntu.com/v1/1f81cf02-Canonical%20Landscape%20Dark.svg
|
||||
name: Canonical Landscape Logo
|
||||
|
||||
- svg_link_light: https://assets.ubuntu.com/v1/16a67f91-Canonical%20Juju.svg
|
||||
svg_link_dark: https://assets.ubuntu.com/v1/3998e1b9-Canonical%20Juju%20Dark.svg
|
||||
name: Canonical Juju Logo
|
||||
|
||||
- svg_link_light: https://assets.ubuntu.com/v1/f07eaf0c-Canonical%20OpenStack.svg
|
||||
svg_link_dark: https://assets.ubuntu.com/v1/8232828d-Canonical%20OpenStack%20Dark.svg
|
||||
name: Canonical Openstack Logo
|
||||
|
||||
- svg_link_light: https://assets.ubuntu.com/v1/e5279b88-Canonical%20Kubernetes.svg
|
||||
svg_link_dark: https://assets.ubuntu.com/v1/4bbaebaa-Canonical%20Kubernetes%20Dark.svg
|
||||
name: Canonical Kubernetes Logo
|
||||
|
||||
- svg_link_light: https://assets.ubuntu.com/v1/f53d0b97-Canonical%20Multipass.svg
|
||||
svg_link_dark: https://assets.ubuntu.com/v1/718b440a-Canonical%20Multipass%20Dark.svg
|
||||
name: Canonical Multipass Logo
|
||||
|
||||
- svg_link_light: https://assets.ubuntu.com/v1/096ad2c0-Canonical%20LXD.svg
|
||||
svg_link_dark: https://assets.ubuntu.com/v1/d124abfa-Canonical%20LXD%20Dark.svg
|
||||
name: Canonical LXD Logo
|
||||
|
||||
- svg_link_light: https://assets.ubuntu.com/v1/e195b28a-Canonical%20MicroCloud%20logo.svg
|
||||
svg_link_dark: https://assets.ubuntu.com/v1/419df08b-Canonical%20MicroCloud%20dark%20logo@4x.png
|
||||
name: Canonical Microcloud Logo
|
||||
19
static/js/font.js
Normal file
19
static/js/font.js
Normal file
@ -0,0 +1,19 @@
|
||||
function updateFontVariations() {
|
||||
const weight = document.querySelector("#weight").value;
|
||||
const size = document.querySelector("#size").value;
|
||||
const font = document.querySelector("#font-tester");
|
||||
const selects = document.getElementsByClassName("js-font-select");
|
||||
const size_tag = document.querySelector("#size_tag");
|
||||
const weight_tag = document.querySelector("#weight_tag");
|
||||
|
||||
font.style.fontWeight = weight;
|
||||
font.style.fontSize = `${size}px`;
|
||||
font.style.lineHeight = `${size * 1.5}px`;
|
||||
|
||||
size_tag.innerHTML = `${size}px`;
|
||||
weight_tag.innerHTML = weight;
|
||||
|
||||
for (let i = 0; i < selects.length; i++) {
|
||||
font.setAttribute("data-" + selects[i].name, selects[i].value);
|
||||
}
|
||||
}
|
||||
21
static/sass/_pattern-font-tester.scss
Normal file
21
static/sass/_pattern-font-tester.scss
Normal file
@ -0,0 +1,21 @@
|
||||
@mixin design-p-font-tester {
|
||||
.font-tester {
|
||||
&__demo {
|
||||
height: 300px;
|
||||
margin: $sp-xx-large 0;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
|
||||
&[data-style="normal"] { font-style: normal; }
|
||||
&[data-style="italic"] { font-style: italic; }
|
||||
|
||||
&[data-family="ubuntu"] { font-family: "Ubuntu variable", sans-serif; }
|
||||
&[data-family="monospace"] { font-family: "Ubuntu Mono variable", monospace;}
|
||||
|
||||
&[data-color="black"] { color: $color-dark; }
|
||||
&[data-color="red"] { color: $color-negative; }
|
||||
&[data-color="orange"] { color: $color-accent; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
44
static/sass/_pattern-resources.scss
Normal file
44
static/sass/_pattern-resources.scss
Normal file
@ -0,0 +1,44 @@
|
||||
@mixin design-p-resources {
|
||||
.resources__content-thumb {
|
||||
padding: 0.5rem;
|
||||
|
||||
&.typeface {
|
||||
background-color: $color-light;
|
||||
height: min-content;
|
||||
padding: 1.5rem 0.625rem 0.625rem;
|
||||
}
|
||||
|
||||
&.logo_thumb {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
&.icons_thumb {
|
||||
background-color: $color-light;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(10, minmax(0, 1fr));
|
||||
|
||||
.icon__item {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.resources__dark_mode {
|
||||
background-color: $color-dark !important;
|
||||
color: $color-x-light;
|
||||
}
|
||||
|
||||
.resources_logo {
|
||||
/* remove rounded corners from images to avoid distorting logos */
|
||||
border-radius: 0;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.email-signature-frame {
|
||||
background-color: white;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@ -7,6 +7,61 @@
|
||||
// import cookie policy
|
||||
@import "@canonical/cookie-policy/build/css/cookie-policy";
|
||||
|
||||
// Site patterns
|
||||
@import "pattern-resources";
|
||||
@include design-p-resources;
|
||||
@include vf-p-icons;
|
||||
@include vf-p-icon-highlight-off;
|
||||
@include vf-p-icon-highlight-on;
|
||||
@include vf-p-icon-home;
|
||||
@include vf-p-icon-import;
|
||||
@include vf-p-icon-in-progress;
|
||||
@include vf-p-icon-info;
|
||||
@include vf-p-icon-inspector-debug;
|
||||
@include vf-p-icon-warning-grey;
|
||||
@include vf-p-icon-spinner;
|
||||
@include vf-p-icon-controllers;
|
||||
@include vf-p-icon-change-version;
|
||||
@include vf-p-icon-loading-steps;
|
||||
@include vf-p-icon-lock-locked-active;
|
||||
@include vf-p-icon-lock-locked;
|
||||
@include vf-p-icon-lock-unlock;
|
||||
@include vf-p-icon-machines;
|
||||
@include vf-p-icon-maximise-bar;
|
||||
@include vf-p-icon-menu;
|
||||
@include vf-p-icon-minimise-bar;
|
||||
@include vf-p-icon-minus;
|
||||
@include vf-p-icon-models;
|
||||
@include vf-p-icon-mount-2;
|
||||
@include vf-p-icon-mount;
|
||||
@include vf-p-icon-open-terminal;
|
||||
@include vf-p-icon-pin;
|
||||
@include vf-p-icon-plans;
|
||||
@include vf-p-icon-plus;
|
||||
@include vf-p-icon-pods;
|
||||
@include vf-p-icon-power-error;
|
||||
@include vf-p-icon-power-off;
|
||||
@include vf-p-icon-power-on;
|
||||
@include vf-p-icon-profile;
|
||||
@include vf-p-icon-help;
|
||||
@include vf-p-icon-restart;
|
||||
@include vf-p-icon-revisions;
|
||||
@include vf-p-icon-search;
|
||||
@include vf-p-icon-security;
|
||||
@include vf-p-icon-settings;
|
||||
@include vf-p-icon-share;
|
||||
@include vf-p-icon-show;
|
||||
@include vf-p-icon-sort-both;
|
||||
@include vf-p-icon-sort-down;
|
||||
@include vf-p-icon-sort-up;
|
||||
@include vf-p-icon-starred;
|
||||
@include vf-p-icon-status-failed-small;
|
||||
@include vf-p-icon-error;
|
||||
@include vf-p-icon-status-in-progress-small;
|
||||
@include vf-p-icon-status-in-progress;
|
||||
@include vf-p-icon-status-queued-small;
|
||||
@include vf-p-icon-status-queued;
|
||||
|
||||
// Blockquote style override until officially in vanilla
|
||||
.p-pull-quote {
|
||||
border-left: 3px solid #e95420;
|
||||
@ -30,3 +85,14 @@
|
||||
.article-image a img {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.font-tester__demo {
|
||||
height: 300px;
|
||||
margin: 2.5rem 0;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.is-ubuntu-mono {
|
||||
font-family: "Ubuntu Mono variable", monospace;
|
||||
}
|
||||
|
||||
@ -9,104 +9,107 @@
|
||||
{% endblock meta_description %}
|
||||
|
||||
{% block meta_copydoc %}
|
||||
<!-- to be added -->
|
||||
https://docs.google.com/document/d/1wFqMxSex8Ns9_bh7tbdekUnLV80CrLg9LgYmeSdXK_4/edit?tab=t.0
|
||||
{% endblock meta_copydoc %}
|
||||
|
||||
{% block body_class %}
|
||||
is-paper
|
||||
{% endblock body_class %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="wrapper u-no-margin-top">
|
||||
<main id="main-content" class="inner-wrapper">
|
||||
<div class="p-suru--25-75">
|
||||
<div class="row--25-75">
|
||||
<div class="col">
|
||||
<h1>Ubuntu font</h1>
|
||||
<div class="p-suru--25-75">
|
||||
<div class="row">
|
||||
<div class="col-4 col-medium-2">
|
||||
<h1>Ubuntu font</h1>
|
||||
</div>
|
||||
<div class="col-8 col-medium-4">
|
||||
<p>The way typography is used says as much about our brand as the words themselves.</p>
|
||||
<p>
|
||||
The Ubuntu typeface has been specially created to complement the Ubuntu tone of voice. It has a contemporary style and contains characteristics unique to the Ubuntu brand that convey a precise, reliable and free attitude.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="p-section">
|
||||
<div class="row">
|
||||
<hr class="p-rule" />
|
||||
<div class="col-4 col-medium-2">
|
||||
<h2>Font Variants</h2>
|
||||
<p>We use the Ubuntu font family by default, but you can specify any other font family to better suit your project.</p>
|
||||
</div>
|
||||
<div class="col-8 col-medium-4">
|
||||
<div class="row u-equal-height">
|
||||
<div class="col-4 p-card is-light">
|
||||
<h3 class="p-card__title">Ubuntu</h3>
|
||||
<p>It's no use going back to yesterday, because I was a different person then.</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p>The way typography is used says as much about our brand as the words themselves.</p>
|
||||
<p>
|
||||
The Ubuntu typeface has been specially created to complement the Ubuntu tone of voice<i>.</i> It has a contemporary style and contains characteristics unique to the Ubuntu brand that convey a precise, reliable and free attitude.
|
||||
<div class="col-4 p-card is-light">
|
||||
<h3 class="p-card__title is-ubuntu-mono">Ubuntu Monospace</h3>
|
||||
<p class="is-ubuntu-mono">
|
||||
A: Would you tell me, please, which way I ought to go from here?
|
||||
<br />
|
||||
C: That depends a good deal on where you want to get to.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="p-section">
|
||||
<div class="row">
|
||||
<hr class="p-rule" />
|
||||
<div class="col-4 col-medium-2">
|
||||
<h2>Font Variants</h2>
|
||||
<p>We use the Ubuntu font family by default, but you can specify any other font family to better suit your project.</p>
|
||||
</div>
|
||||
<div class="col-8 col-medium-4">
|
||||
<div class="row u-equal-height">
|
||||
<div class="col-4 p-card p-media-container">
|
||||
<h3 class="p-card__title">Ubuntu</h3>
|
||||
<p>It's no use going back to yesterday, because I was a different person then.</p>
|
||||
</div>
|
||||
<div class="col-4 p-card p-media-container">
|
||||
<h3 class="p-card__title" style="font-family: 'Ubuntu Mono variable';">Ubuntu Monospace</h3>
|
||||
<p style="font-family: 'Ubuntu Mono variable';">
|
||||
A: Would you tell me, please, which way I ought to go from here?
|
||||
<br />
|
||||
C: That depends a good deal on where you want to get to.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="p-section">
|
||||
<div class="row">
|
||||
<hr class="p-rule" />
|
||||
<div class="col-8">
|
||||
<h2>Ubuntu font tester</h2>
|
||||
<p>
|
||||
The family supports the full Latin, Cyrillic and Greek alphabets, as well as Esperanto, with combining diacritical marks and a wide range of punctuation.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label for="family">Family</label>
|
||||
<select class="js-font-select"
|
||||
name="family"
|
||||
onchange="updateFontVariations()">
|
||||
<option value="ubuntu" selected>Ubuntu</option>
|
||||
<option value="monospace">Ubuntu Monospace</option>
|
||||
</select>
|
||||
|
||||
<label for="style">Style</label>
|
||||
<select class="js-font-select" name="style" onchange="updateFontVariations()">
|
||||
<option value="normal" selected>Normal</option>
|
||||
<option value="italic">Italic</option>
|
||||
</select>
|
||||
|
||||
<label for="size">
|
||||
Size (<span id="size_tag">16px</span>)
|
||||
</label>
|
||||
<input id="size"
|
||||
type="range"
|
||||
min="8"
|
||||
max="48"
|
||||
value="16"
|
||||
step="1"
|
||||
style="appearance: auto"
|
||||
oninput="updateFontVariations()" />
|
||||
|
||||
<label for="weight">
|
||||
Weight (<span id="weight_tag">400</span>)
|
||||
</label>
|
||||
<input id="weight"
|
||||
type="range"
|
||||
min="100"
|
||||
max="800"
|
||||
value="400"
|
||||
step="1"
|
||||
style="appearance: auto"
|
||||
oninput="updateFontVariations()" />
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<textarea id="font-tester" class="font-tester__demo js-font-demo" style="height:100%" data-family="ubuntu" data-style="normal" data-color="black">
|
||||
|
||||
<section class="p-section">
|
||||
<div class="row">
|
||||
<hr class="p-rule" />
|
||||
<div class="col-8">
|
||||
<h2>Ubuntu font tester</h2>
|
||||
<p>
|
||||
The family supports the full Latin, Cyrillic and Greek alphabets, as well as Esperanto, with combining diacritical marks and a wide range of punctuation.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="family">Family</label>
|
||||
<select class="js-font-select"
|
||||
name="family"
|
||||
onchange="updateFontVariations()">
|
||||
<option value="ubuntu" selected>Ubuntu</option>
|
||||
<option value="monospace">Ubuntu Monospace</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="style">Style</label>
|
||||
<select class="js-font-select" name="style" onchange="updateFontVariations()">
|
||||
<option value="normal" selected>Normal</option>
|
||||
<option value="italic">Italic</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="size">
|
||||
Size (<span id="size_tag">16px</span>)
|
||||
</label>
|
||||
<input id="size"
|
||||
type="range"
|
||||
min="8"
|
||||
max="48"
|
||||
value="16"
|
||||
step="1"
|
||||
style="appearance: auto"
|
||||
oninput="updateFontVariations()" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="weight">
|
||||
Weight (<span id="weight_tag">400</span>)
|
||||
</label>
|
||||
<input id="weight"
|
||||
type="range"
|
||||
min="100"
|
||||
max="800"
|
||||
value="400"
|
||||
step="1"
|
||||
style="appearance: auto"
|
||||
oninput="updateFontVariations()" />
|
||||
</div>
|
||||
<textarea id="font-tester" class="font-tester__demo js-font-demo" data-family="ubuntu" data-style="normal" data-color="black">
|
||||
Type your text here
|
||||
|
||||
Latin sample:
|
||||
@ -117,167 +120,143 @@ Cyrillic sample:
|
||||
|
||||
Greek sample:
|
||||
Λορεμ ιπσθμ δολορ σιτ αμετ, μεα νατθμ ηαβεμθσ νο σιτ.
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</textarea>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="p-strip is-dark is-deep">
|
||||
<div class="row--50-50">
|
||||
<div class="col">
|
||||
<h2>About the Ubuntu font family</h2>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p>
|
||||
The Ubuntu font family are a set of matching new libre/open fonts. The development is being funded by <a href="https://canonical.com/" class="p-link--inverted">Canonical</a> on behalf the wider Free Software community and the Ubuntu project.
|
||||
The technical font design work and implementation is being undertaken by <a href="https://daltonmaag.com/" class="p-link--inverted">Dalton Maag</a>.
|
||||
</p>
|
||||
<p>
|
||||
Both the final font Truetype/OpenType files and the design files used to produce the font family are distributed under an <a href="https://ubuntu.com/legal/terms-and-policies/font-licence" class="p-link--inverted">open licence</a> and you are
|
||||
expressly encouraged to experiment, modify, share and improve. The typeface is sans-serif, uses OpenType features and is manually hinted for clarity on desktop and mobile computing screens.
|
||||
</p>
|
||||
<p>
|
||||
The scope of the Ubuntu Font Family includes all the languages used by the various Ubuntu users around the world in tune with Ubuntu's philosophy which states that every user should be able to use their software in the language of their choice.
|
||||
So the Ubuntu Font Family project will be extended to cover many more written languages.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-strip is-dark is-deep">
|
||||
<div class="row--50-50">
|
||||
<div class="col">
|
||||
<h2>About the Ubuntu font family</h2>
|
||||
</div>
|
||||
|
||||
<div class="p-strip">
|
||||
<div class="p-section--shallow">
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<h2>Facts and figures</h2>
|
||||
<p>
|
||||
The Ubuntu font family is a sans-serif typeface family available in 22 styles plus a variable font with adjustable weight and width axes. Its fixed-width companion, Ubuntu Mono, comes in 8 styles and a variable font with an adjustable weight axis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-3 col-start-large-4 col-medium-2">
|
||||
<h3>Coverage</h3>
|
||||
</div>
|
||||
<div class="col-6 col-medium-4">
|
||||
<p>1,200 glyphs, 200-250 languages (native languages of 3 billion people!).</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-9 col-start-large-4">
|
||||
<hr class="p-rule" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-3 col-start-large-4 col-medium-2">
|
||||
<h3>Technology</h3>
|
||||
</div>
|
||||
<div class="col-6 col-medium-4">
|
||||
<p>
|
||||
The pixels-per-em 7-segment digits are driven by the hint engine (substituted from the DejaVu fonts), so if hinting is by default off (e.g. Firefox) then the output will show as a pair of “88” numerals.
|
||||
</p>
|
||||
<ul class="p-list">
|
||||
<li class="p-list__item is-ticked">OpenType-based TTF (TrueType)</li>
|
||||
<li class="p-list__item is-ticked">Variable fonts</li>
|
||||
<li class="p-list__item is-ticked">
|
||||
Alternative glyphs (e.g. proportional/non-proportional/superscript/subscript numerals)
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-9 col-start-large-4">
|
||||
<hr class="p-rule" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-3 col-start-large-4 col-medium-2">
|
||||
<h3>Design</h3>
|
||||
</div>
|
||||
<div class="col-6 col-medium-4">
|
||||
<p>
|
||||
The four Latin characters, 'n o H O' helped to define a guide for around 80-percent of the remaining characters.
|
||||
</p>
|
||||
<p>Software used:</p>
|
||||
<ul class="p-list">
|
||||
<li class="p-list__item is-ticked">
|
||||
Fontlab Studio,
|
||||
<a href="https://robofont.com" rel="noopener noreferrer">RoboFonts</a>,
|
||||
<a href="https://glyphsapp.com" rel="noopener noreferrer">Glyphs</a>
|
||||
</li>
|
||||
<li class="p-list__item is-ticked">
|
||||
Automated build process based on
|
||||
<a href="https://github.com/googlefonts/gftools"
|
||||
rel="noopener noreferrer">gftools</a>,
|
||||
<a href="https://github.com/googlefonts/fontmake"
|
||||
rel="noopener noreferrer">fontmake</a>,
|
||||
<a href="https://github.com/fonttools/fonttools"
|
||||
rel="noopener noreferrer">fontTools</a>
|
||||
</li>
|
||||
<li class="p-list__item is-ticked">In-house Python-based scripts</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p>
|
||||
The Ubuntu font family are a set of matching new libre/open fonts. The development is being funded by <a href="https://www.canonical.com/" class="p-link--inverted">Canonical</a> on behalf the wider Free Software community and the Ubuntu project.
|
||||
The technical font design work and implementation is being undertaken by <a href="https://www.daltonmaag.com/" class="p-link--inverted">Dalton Maag</a>.
|
||||
</p>
|
||||
<p>
|
||||
Both the final font Truetype/OpenType files and the design files used to produce the font family are distributed under an <a href="https://www.ubuntu.com/legal/terms-and-policies/font-licence"
|
||||
class="p-link--inverted">open licence</a> and you are
|
||||
expressly encouraged to experiment, modify, share and improve. The typeface is sans-serif, uses OpenType features and is manually hinted for clarity on desktop and mobile computing screens.
|
||||
</p>
|
||||
<p>
|
||||
The scope of the Ubuntu Font Family includes all the languages used by the various Ubuntu users around the world in tune with Ubuntu's philosophy which states that every user should be able to use their software in the language of their choice.
|
||||
So the Ubuntu Font Family project will be extended to cover many more written languages.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<section class="p-section--deep">
|
||||
<div class="row--25-75">
|
||||
<hr class="p-rule" />
|
||||
<div class="col">
|
||||
<h2>Resources</h2>
|
||||
</div>
|
||||
<div class="col">
|
||||
<ul class="p-list--divided">
|
||||
<li class="p-list__item">
|
||||
<a href="https://assets.ubuntu.com/v1/0cef8205-ubuntu-font-family-0.83.zip">Download the Ubuntu Font Family</a> (2.2MB)
|
||||
</li>
|
||||
<li class="p-list__item">
|
||||
<p>
|
||||
<a href="https://assets.ubuntu.com/v1/0f5898c1-ubuntu-font-family-sources_0.83.orig.tar.gz">Download the Ubuntu Font Family source code</a>
|
||||
</p>
|
||||
(For font designers with a copy of Font Lab Studio, 8.4MB)
|
||||
</li>
|
||||
<li class="p-list__item">
|
||||
<a href="https://fonts.google.com/?query=Ubuntu+Sans">Google Fonts</a>
|
||||
</li>
|
||||
<li class="p-list__item">
|
||||
<a href="https://launchpad.net/ubuntu-font-family">Launchpad</a>
|
||||
</li>
|
||||
<li class="p-list__item">
|
||||
<a href="https://wiki.ubuntu.com/Ubuntu_Font_Family">Wiki documentation</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
<a href="https://assets.ubuntu.com/v1/0cef8205-ubuntu-font-family-0.83.zip"
|
||||
class="p-button--positive">Download for free</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<script>
|
||||
//inlined
|
||||
function updateFontVariations() {
|
||||
const weight = document.querySelector("#weight").value;
|
||||
const size = document.querySelector("#size").value;
|
||||
const font = document.querySelector("#font-tester");
|
||||
const selects = document.getElementsByClassName("js-font-select");
|
||||
const size_tag = document.querySelector("#size_tag");
|
||||
const weight_tag = document.querySelector("#weight_tag");
|
||||
|
||||
font.style.fontWeight = weight;
|
||||
font.style.fontSize = `${size}px`;
|
||||
font.style.lineHeight = `${size * 1.5}px`;
|
||||
|
||||
size_tag.innerHTML = `${size}px`;
|
||||
weight_tag.innerHTML = weight;
|
||||
|
||||
for (let i = 0; i < selects.length; i++) {
|
||||
font.setAttribute("data-" + selects[i].name, selects[i].value);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</main>
|
||||
<!-- /.inner-wrapper -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-strip">
|
||||
<div class="p-section--shallow">
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<h2>Facts and figures</h2>
|
||||
<p>
|
||||
The Ubuntu font family is a sans-serif typeface family available in 22 styles plus a variable font with adjustable weight and width axes. Its fixed-width companion, Ubuntu Mono, comes in 8 styles and a variable font with an adjustable weight axis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-3 col-start-large-4 col-medium-2">
|
||||
<h3>Coverage</h3>
|
||||
</div>
|
||||
<div class="col-6 col-medium-4">
|
||||
<p>1,200 glyphs, 200-250 languages (native languages of 3 billion people!).</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-9 col-start-large-4">
|
||||
<hr class="p-rule" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-3 col-start-large-4 col-medium-2">
|
||||
<h3>Technology</h3>
|
||||
</div>
|
||||
<div class="col-6 col-medium-4">
|
||||
<p>
|
||||
The pixels-per-em 7-segment digits are driven by the hint engine (substituted from the DejaVu fonts), so if hinting is by default off (e.g. Firefox) then the output will show as a pair of “88” numerals.
|
||||
</p>
|
||||
<ul class="p-list">
|
||||
<li class="p-list__item is-ticked">OpenType-based TTF (TrueType)</li>
|
||||
<li class="p-list__item is-ticked">Variable fonts</li>
|
||||
<li class="p-list__item is-ticked">
|
||||
Alternative glyphs (e.g. proportional/non-proportional/superscript/subscript numerals)
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-9 col-start-large-4">
|
||||
<hr class="p-rule" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-3 col-start-large-4 col-medium-2">
|
||||
<h3>Design</h3>
|
||||
</div>
|
||||
<div class="col-6 col-medium-4">
|
||||
<p>
|
||||
The four Latin characters, 'n o H O' helped to define a guide for around 80-percent of the remaining characters.
|
||||
</p>
|
||||
<p>Software used:</p>
|
||||
<ul class="p-list">
|
||||
<li class="p-list__item is-ticked">
|
||||
Fontlab Studio,
|
||||
<a href="https://robofont.com" rel="noopener noreferrer">RoboFonts</a>,
|
||||
<a href="https://glyphsapp.com" rel="noopener noreferrer">Glyphs</a>
|
||||
</li>
|
||||
<li class="p-list__item is-ticked">
|
||||
Automated build process based on
|
||||
<a href="https://github.com/googlefonts/gftools"
|
||||
rel="noopener noreferrer">gftools</a>,
|
||||
<a href="https://github.com/googlefonts/fontmake"
|
||||
rel="noopener noreferrer">fontmake</a>,
|
||||
<a href="https://github.com/fonttools/fonttools"
|
||||
rel="noopener noreferrer">fontTools</a>
|
||||
</li>
|
||||
<li class="p-list__item is-ticked">In-house Python-based scripts</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="p-section--deep">
|
||||
<div class="row--50-50-on-large row--25-75-on-medium">
|
||||
<hr class="p-rule" />
|
||||
<div class="col">
|
||||
<h2>Resources</h2>
|
||||
</div>
|
||||
<div class="col">
|
||||
<ul class="p-list--divided">
|
||||
<li class="p-list__item">
|
||||
<a href="https://assets.ubuntu.com/v1/0cef8205-ubuntu-font-family-0.83.zip">Download the Ubuntu Font Family</a> (2.2MB)
|
||||
</li>
|
||||
<li class="p-list__item">
|
||||
<p>
|
||||
<a href="https://assets.ubuntu.com/v1/0f5898c1-ubuntu-font-family-sources_0.83.orig.tar.gz">Download the Ubuntu Font Family source code</a>
|
||||
</p>
|
||||
(For font designers with a copy of Font Lab Studio, 8.4MB)
|
||||
</li>
|
||||
<li class="p-list__item">
|
||||
<a href="https://fonts.google.com/?query=Ubuntu">Google Fonts</a>
|
||||
</li>
|
||||
<li class="p-list__item">
|
||||
<a href="https://launchpad.net/ubuntu-font-family">Launchpad</a>
|
||||
</li>
|
||||
<li class="p-list__item">
|
||||
<a href="https://wiki.ubuntu.com/Ubuntu_Font_Family">Wiki documentation</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
<a href="https://assets.ubuntu.com/v1/0cef8205-ubuntu-font-family-0.83.zip"
|
||||
class="p-button--positive">Download for free</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<script src="{{ versioned_static('js/font.js') }}"></script>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
242
templates/shared/_email-signature.html
Normal file
242
templates/shared/_email-signature.html
Normal file
@ -0,0 +1,242 @@
|
||||
<div style="font-family: Ubuntu,sans-serif; margin:0px;">
|
||||
<table style="border-spacing:0px;
|
||||
border-width:0px;
|
||||
font-family: Ubuntu, sans-serif;
|
||||
margin:0px;
|
||||
color: #000;
|
||||
border-color:white">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th style="vertical-align:top;
|
||||
padding:0px;
|
||||
font-size: 0px;
|
||||
text-align: left;
|
||||
padding-top: 4px;
|
||||
padding-left: 4px"
|
||||
colspan="2">
|
||||
<img height="40px"
|
||||
width="128px"
|
||||
style="margin-bottom: 17px"
|
||||
src="https://assets.ubuntu.com/v1/7620920d-Canonical-Logo-Light%201.png"
|
||||
alt="Canonical Logo"
|
||||
title="Canonical Logo" />
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="vertical-align: top;
|
||||
padding:0px;
|
||||
padding-left:5px;
|
||||
font-size: 0px"
|
||||
colspan="2">
|
||||
<p style="display:inline-block;
|
||||
font-size:13px;
|
||||
line-height:16px;
|
||||
padding-top:0.8px;
|
||||
margin-bottom: 0px;
|
||||
margin-top:0.8px;
|
||||
font-weight:600">Hadley Carlisle</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="vertical-align: top;
|
||||
padding:0px;
|
||||
padding-left:5px;
|
||||
font-size: 0px"
|
||||
colspan="2">
|
||||
<p style="display:inline-block;
|
||||
font-size:13px;
|
||||
line-height:16px;
|
||||
padding-top:0.8px;
|
||||
margin-bottom: 8px;
|
||||
margin-top:0.8px;
|
||||
color:#757575;
|
||||
font-weight:500">VP Engineering, Enterprise Solutions</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td style="vertical-align: top;
|
||||
padding:0px;
|
||||
padding-left:5px;
|
||||
font-size: 0px">
|
||||
<p style="display: inline-block;
|
||||
font-size:13px;
|
||||
line-height:17px;
|
||||
padding-top:0.8px;
|
||||
margin-bottom: 0px;
|
||||
margin-top:0.8px;
|
||||
color:#757575;
|
||||
font-weight:500">Email:</p>
|
||||
</td>
|
||||
<td style="vertical-align:top;
|
||||
padding:0px;
|
||||
padding-left:5px;
|
||||
padding-right:4px;
|
||||
font-size: 0px">
|
||||
<p style="display: inline-block;
|
||||
font-size:13px;
|
||||
line-height:17px;
|
||||
padding-top:0.8px;
|
||||
margin-bottom:0px;
|
||||
margin-top:0.8px;
|
||||
margin-left: 12px;
|
||||
font-weight:500">hadley.carlisle@canonical.com</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="vertical-align: top;
|
||||
padding:0px;
|
||||
padding-left:5px;
|
||||
font-size: 0px">
|
||||
<p style="display: inline-block;
|
||||
font-size:13px;
|
||||
line-height:17px;
|
||||
padding-top:0.8px;
|
||||
margin-bottom: 0px;
|
||||
margin-top:0.8px;
|
||||
color:#757575;
|
||||
font-weight:500">Mailing List:</p>
|
||||
</td>
|
||||
<td style="vertical-align:top;
|
||||
padding:0px;
|
||||
padding-left:5px;
|
||||
padding-right:4px;
|
||||
font-size: 0px">
|
||||
<p style="display: inline-block;
|
||||
font-size:13px;
|
||||
line-height:17px;
|
||||
padding-top:0.8px;
|
||||
margin-bottom:0px;
|
||||
margin-top:0.8px;
|
||||
margin-left: 12px;
|
||||
font-weight:500">design.ops@canonical.com</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td style="vertical-align: top;
|
||||
padding:0px;
|
||||
padding-left:5px;
|
||||
font-size: 0px">
|
||||
<p style="display: inline-block;
|
||||
font-size:13px;
|
||||
line-height:17px;
|
||||
padding-top:0.8px;
|
||||
margin-bottom: 0px;
|
||||
margin-top:0.8px;
|
||||
color:#757575;
|
||||
font-weight:500">Location:</p>
|
||||
</td>
|
||||
<td style="vertical-align: top;
|
||||
padding:0px;
|
||||
padding-left:5px;
|
||||
font-size: 0px">
|
||||
<p style="display: inline-block;
|
||||
font-size:13px;
|
||||
line-height:17px;
|
||||
padding-top:0.8px;
|
||||
margin-bottom: 0px;
|
||||
margin-top:0.8px;
|
||||
margin-left: 12px;
|
||||
font-weight:500">United Kingdom</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td style="vertical-align: top;
|
||||
padding:0px;
|
||||
padding-left:5px;
|
||||
font-size: 0px">
|
||||
<p style="display: inline-block;
|
||||
font-size:13px;
|
||||
line-height:17px;
|
||||
padding-top:0.8px;
|
||||
margin-bottom:0px;
|
||||
margin-top:0.8px;
|
||||
color:#757575;
|
||||
font-weight:500">Mobile:</p>
|
||||
</td>
|
||||
<td style="vertical-align: top;
|
||||
padding:0px;
|
||||
padding-left:5px;
|
||||
font-size: 0px">
|
||||
<p style="display: inline-block;
|
||||
font-size:13px;
|
||||
line-height:17px;
|
||||
padding-top:0.8px;
|
||||
margin-bottom:0px;
|
||||
margin-top:0.8px;
|
||||
margin-left: 12px;
|
||||
font-weight:500">+1 2345 6789</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="vertical-align: top;
|
||||
padding:0px;
|
||||
padding-left:5px;
|
||||
font-size: 0px">
|
||||
<p style="display: inline-block;
|
||||
font-size:13px;
|
||||
line-height:17px;
|
||||
padding-top:0.8px;
|
||||
margin-bottom:0px;
|
||||
margin-top:0.8px;
|
||||
color:#757575;
|
||||
font-weight:500">Mobile:</p>
|
||||
</td>
|
||||
<td style="vertical-align: top;
|
||||
padding:0px;
|
||||
padding-left:5px;
|
||||
font-size: 0px">
|
||||
<p style="display: inline-block;
|
||||
font-size:13px;
|
||||
line-height:17px;
|
||||
padding-top:0.8px;
|
||||
margin-bottom:0px;
|
||||
margin-top:0.8px;
|
||||
margin-left: 12px;
|
||||
font-weight:500">+1 2345 6789</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td style="vertical-align: top;
|
||||
padding:0px;
|
||||
padding-left:5px;
|
||||
font-size: 0px"
|
||||
colspan="2">
|
||||
<a href="https://canonical.com/"
|
||||
style="color:#0066cc;
|
||||
text-decoration: none">
|
||||
<p style="display: inline-block;
|
||||
font-size:13px;
|
||||
line-height:17px;
|
||||
padding-top:0.8px;
|
||||
margin-bottom: 0px;
|
||||
margin-top:8.8px;
|
||||
font-weight:500">canonical.com</p>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="vertical-align: top;
|
||||
padding:0px;
|
||||
padding-left:5px;
|
||||
font-size: 0px"
|
||||
colspan="2">
|
||||
<a href="https://ubuntu.com/"
|
||||
style="color:#0066cc;
|
||||
text-decoration: none">
|
||||
<p style="display: inline-block;
|
||||
font-size:13px;
|
||||
line-height:17px;
|
||||
padding-top:0.8px;
|
||||
margin-bottom: 0px;
|
||||
margin-top:0.8px;
|
||||
font-weight:500">ubuntu.com</p>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@ -1,5 +1,7 @@
|
||||
import requests
|
||||
import os
|
||||
import flask
|
||||
import yaml
|
||||
|
||||
from flask import render_template, request
|
||||
from urllib.parse import parse_qs, urlencode
|
||||
@ -18,6 +20,25 @@ app = FlaskBase(
|
||||
|
||||
session = requests.Session()
|
||||
|
||||
with open("_data/resources.yaml", "r") as stream:
|
||||
parsed_resources = yaml.safe_load(stream)
|
||||
|
||||
with open("_data/icons.yaml", "r") as stream:
|
||||
parsed_icons = yaml.safe_load(stream)
|
||||
|
||||
resources_data = {
|
||||
"logos": parsed_resources,
|
||||
"icons": parsed_icons,
|
||||
}
|
||||
|
||||
|
||||
@app.context_processor
|
||||
def global_template_context():
|
||||
return {
|
||||
"resources_data": resources_data,
|
||||
"path": flask.request.path,
|
||||
}
|
||||
|
||||
|
||||
@app.errorhandler(Exception)
|
||||
def render_error_page(error):
|
||||
|
||||
Reference in New Issue
Block a user