From 89bf9d6b835e6e9edc1da09ff75a6ed07360dc59 Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Wed, 19 Feb 2025 09:47:56 +0100 Subject: [PATCH 1/4] Align with live site and apply minor fixes --- static/js/font.js | 19 ++ static/sass/styles.scss | 11 + templates/brand/font.html | 473 ++++++++++++++++++-------------------- 3 files changed, 256 insertions(+), 247 deletions(-) create mode 100644 static/js/font.js diff --git a/static/js/font.js b/static/js/font.js new file mode 100644 index 0000000..6b8cb0e --- /dev/null +++ b/static/js/font.js @@ -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); + } + } \ No newline at end of file diff --git a/static/sass/styles.scss b/static/sass/styles.scss index 92c24bf..84cd6ef 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -30,3 +30,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'; +} \ No newline at end of file diff --git a/templates/brand/font.html b/templates/brand/font.html index c82bb45..e0837d2 100644 --- a/templates/brand/font.html +++ b/templates/brand/font.html @@ -9,104 +9,107 @@ {% endblock meta_description %} {% block meta_copydoc %} - + 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 %} -
-
-
-
-
-

Ubuntu font

+
+
+
+

Ubuntu font

+
+
+

The way typography is used says as much about our brand as the words themselves.

+

+ 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. +

+
+
+
+ +
+
+
+
+

Font Variants

+

We use the Ubuntu font family by default, but you can specify any other font family to better suit your project.

+
+
+
+
+

Ubuntu

+

It's no use going back to yesterday, because I was a different person then.

-
-

The way typography is used says as much about our brand as the words themselves.

-

- 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. +

+

Ubuntu Monospace

+

+ A: Would you tell me, please, which way I ought to go from here? +
+ C: That depends a good deal on where you want to get to.

+
+
-
-
-
-
-

Font Variants

-

We use the Ubuntu font family by default, but you can specify any other font family to better suit your project.

-
-
-
-
-

Ubuntu

-

It's no use going back to yesterday, because I was a different person then.

-
-
-

Ubuntu Monospace

-

- A: Would you tell me, please, which way I ought to go from here? -
- C: That depends a good deal on where you want to get to. -

-
-
-
-
-
- -
-
-
-
-

Ubuntu font tester

-

- The family supports the full Latin, Cyrillic and Greek alphabets, as well as Esperanto, with combining diacritical marks and a wide range of punctuation. -

-
-
- - - - - - - - - - - -
-
- -
-
-
+ +
+ -
-
-
-

About the Ubuntu font family

-
-
-

- The Ubuntu font family are a set of matching new libre/open fonts. The development is being funded by Canonical on behalf the wider Free Software community and the Ubuntu project. - The technical font design work and implementation is being undertaken by Dalton Maag. -

-

- Both the final font Truetype/OpenType files and the design files used to produce the font family are distributed under an open licence 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. -

-

- 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. -

-
-
+
+
+
+

About the Ubuntu font family

- -
-
-
-
-

Facts and figures

-

- 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. -

-
-
-
-
-
-

Coverage

-
-
-

1,200 glyphs, 200-250 languages (native languages of 3 billion people!).

-
-
-
-
-
-
-
-
-
-

Technology

-
-
-

- 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. -

-
    -
  • OpenType-based TTF (TrueType)
    • -
  • Variable fonts
    • -
  • - Alternative glyphs (e.g. proportional/non-proportional/superscript/subscript numerals) -
    • -
-
-
-
-
-
-
-
-
-
-

Design

-
-
-

- The four Latin characters, 'n o H O' helped to define a guide for around 80-percent of the remaining characters. -

-

Software used:

- -
-
+
+

+ The Ubuntu font family are a set of matching new libre/open fonts. The development is being funded by Canonical on behalf the wider Free Software community and the Ubuntu project. + The technical font design work and implementation is being undertaken by Dalton Maag. +

+

+ Both the final font Truetype/OpenType files and the design files used to produce the font family are distributed under an open licence 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. +

+

+ 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. +

- -
-
-
-
-

Resources

-
-
- -

- Download for free -

-
-
-
- - -
- +
+ +
+
+
+
+

Facts and figures

+

+ 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. +

+
+
+
+
+
+

Coverage

+
+
+

1,200 glyphs, 200-250 languages (native languages of 3 billion people!).

+
+
+
+
+
+
+
+
+
+

Technology

+
+
+

+ 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. +

+
    +
  • OpenType-based TTF (TrueType)
    • +
  • Variable fonts
    • +
  • + Alternative glyphs (e.g. proportional/non-proportional/superscript/subscript numerals) +
    • +
+
+
+
+
+
+
+
+
+
+

Design

+
+
+

+ The four Latin characters, 'n o H O' helped to define a guide for around 80-percent of the remaining characters. +

+

Software used:

+ +
+
+
+ +
+
+
+
+

Resources

+
+
+ +

+ Download for free +

+
+
+
+ + {% endblock content %} From aab6901443704f7cbdc5986739bcaf998bcd3212 Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Wed, 19 Feb 2025 10:01:11 +0100 Subject: [PATCH 2/4] Fix linting errors --- static/js/font.js | 36 ++++++++++++++++++------------------ static/sass/styles.scss | 4 ++-- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/static/js/font.js b/static/js/font.js index 6b8cb0e..e9862a1 100644 --- a/static/js/font.js +++ b/static/js/font.js @@ -1,19 +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); - } - } \ No newline at end of file + 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); + } +} diff --git a/static/sass/styles.scss b/static/sass/styles.scss index 84cd6ef..74fc249 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -39,5 +39,5 @@ } .is-ubuntu-mono { - font-family: 'Ubuntu Mono variable'; -} \ No newline at end of file + font-family: "Ubuntu Mono variable", monospace; +} From 37702ca40c4b2253eb842f3ac4de52b07f8a31be Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Wed, 19 Feb 2025 17:41:21 +0100 Subject: [PATCH 3/4] Apply design suggestions and fix font tester --- static/sass/_pattern-font-tester.scss | 21 +++++++++++++++++++++ static/sass/styles.scss | 4 ++++ templates/brand/font.html | 4 ++-- 3 files changed, 27 insertions(+), 2 deletions(-) create mode 100644 static/sass/_pattern-font-tester.scss diff --git a/static/sass/_pattern-font-tester.scss b/static/sass/_pattern-font-tester.scss new file mode 100644 index 0000000..03f326f --- /dev/null +++ b/static/sass/_pattern-font-tester.scss @@ -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; } + } + } + } + \ No newline at end of file diff --git a/static/sass/styles.scss b/static/sass/styles.scss index 74fc249..56d55ee 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -7,6 +7,10 @@ // import cookie policy @import "@canonical/cookie-policy/build/css/cookie-policy"; +// Site patterns +@import "pattern-font-tester"; +@include design-p-font-tester; + // Blockquote style override until officially in vanilla .p-pull-quote { border-left: 3px solid #e95420; diff --git a/templates/brand/font.html b/templates/brand/font.html index e0837d2..b125756 100644 --- a/templates/brand/font.html +++ b/templates/brand/font.html @@ -42,7 +42,7 @@
-

Ubuntu

+

Ubuntu

It's no use going back to yesterday, because I was a different person then.

@@ -224,7 +224,7 @@ Greek sample:
-
+

Resources

From ba3b5b7835416260e39053e0832a2a939b6c4d4c Mon Sep 17 00:00:00 2001 From: MariaPaula Trujillo Date: Tue, 25 Feb 2025 09:35:49 +0100 Subject: [PATCH 4/4] Apply paper background and add functionality for yaml files --- _data/icons.yaml | 50 + _data/resources.yaml | 47 + static/sass/_pattern-resources.scss | 44 + static/sass/styles.scss | 55 +- templates/brand/resources.html | 1243 +++++------------------- templates/shared/_email-signature.html | 242 +++++ webapp/app.py | 21 + 7 files changed, 720 insertions(+), 982 deletions(-) create mode 100644 _data/icons.yaml create mode 100644 _data/resources.yaml create mode 100644 static/sass/_pattern-resources.scss create mode 100644 templates/shared/_email-signature.html diff --git a/_data/icons.yaml b/_data/icons.yaml new file mode 100644 index 0000000..c9bbb11 --- /dev/null +++ b/_data/icons.yaml @@ -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 diff --git a/_data/resources.yaml b/_data/resources.yaml new file mode 100644 index 0000000..5b4cb6e --- /dev/null +++ b/_data/resources.yaml @@ -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 diff --git a/static/sass/_pattern-resources.scss b/static/sass/_pattern-resources.scss new file mode 100644 index 0000000..7bb893a --- /dev/null +++ b/static/sass/_pattern-resources.scss @@ -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%; + } +} diff --git a/static/sass/styles.scss b/static/sass/styles.scss index 56d55ee..add86ad 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -8,8 +8,59 @@ @import "@canonical/cookie-policy/build/css/cookie-policy"; // Site patterns -@import "pattern-font-tester"; -@include design-p-font-tester; +@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 { diff --git a/templates/brand/resources.html b/templates/brand/resources.html index fbce5b4..9784a69 100644 --- a/templates/brand/resources.html +++ b/templates/brand/resources.html @@ -13,998 +13,281 @@ {% endblock meta_copydoc %} +{% block body_class %} + is-paper +{% endblock body_class %} + {% block content %} -
-
-
-
-
-

Design resources

-
-
-

- On this page you will find everything you need to design and build with our design system, including our Figma component library, our icon library and the Ubuntu font. -

+
+
+
+

Design resources

+
+
+

+ On this page you will find everything you need to design and build with our design system, including our Figma component library, our icon library and the Ubuntu font. +

+
+
+
+ +
+
+
+
+

Design system library

+
+
+

In this Figma library you will find our most up-to-date responsive components to build your designs.

+

+ + View our Figma library + +

+
+
+
+ +
+
+

Brand resources

+
+ + +
+
+
+

Ubuntu typefaces

+
+
+
+ + ssh_ written with Ubuntu typeface +
+ +

The Ubuntu font has contemporary style that conveys a precise, reliable and free attitude.

+ +
+
+ + +
+
+
+

Icon set

+
+
+
+
+ {% for item in resources_data.icons %} +
+ +
+ {% endfor %}
-
-
-
-
-
-

Design system library

-
-
-

In this Figma library you will find our most up-to-date responsive components to build your designs.

-

- - View our Figma library + +

Our icon library includes our generic UI iconography as well as some bespoke concepts.

+

+ Use the icons in Vanilla +

+
+
+ + +
+
+
+

Wallpapers

+
+
+
+ + +
+ +

Ubuntu wallpapers and the mascot are important parts of our brand identity.

+

+ Browse the mascot wallpapers +

+
+
+ + +
+
+
+

Slide template

+
+
+
+ + +
+ +

Use this template to create presentations with the Canonical branding style.

+

+ Use the slide template (internal) +

+
+
+ + +
+
+
+

Logos

+
+
+ + +
+ {% for item in resources_data.logos %} +
+ + -

-
-
-
- -
-
-

Brand resources

-
- - -
-
-
-

Ubuntu typefaces

-
-
-
- - ssh_ written with Ubuntu typeface
- -

The Ubuntu font has contemporary style that conveys a precise, reliable and free attitude.

- -
-
- - -
-
-
-

Icon set

-
-
-
-
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
+
+ + +
- - -

Our icon library includes our generic UI iconography as well as some bespoke concepts.

-

- Use the icons in Vanilla -

-
-
- - -
-
-
-

Wallpapers

-
-
-
- - -
- -

Ubuntu wallpapers and the mascot are important parts of our brand identity.

-

- Browse the mascot wallpapers -

-
-
- - -
-
-
-

Slide template

-
-
-
- - -
- -

Use this template to create presentations with the Canonical branding style.

-

- Use the slide template (internal) -

-
-
- - -
-
-
-

Logos

-
-
- - -
- -
- - - -
-
- - - -
- -
- -
- - - -
-
- - - -
- -
- -
- - - -
-
- - - -
- -
- -
- - - -
-
- - - -
- -
- -
- - - -
-
- - - -
- -
- -
- - - -
-
- - - -
- -
- -
- - - -
-
- - - -
- -
- -
- - - -
-
- - - -
- -
- -
- - - -
-
- - - -
- -
- -
- - - -
-
- - - -
- -
- -
- - - -
-
- - - -
- -
-
-
- - -
-
-
-

Email signature

-
-
-
- -
- - -
+ {% if loop.index < resources_data.logos|length %}
{% endif %} + {% endfor %}
+
- - -
- + +
+
+ + + {% endblock content %} diff --git a/templates/shared/_email-signature.html b/templates/shared/_email-signature.html new file mode 100644 index 0000000..7bfd38e --- /dev/null +++ b/templates/shared/_email-signature.html @@ -0,0 +1,242 @@ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Canonical Logo +
+

Hadley Carlisle

+
+

VP Engineering, Enterprise Solutions

+
+

Email:

+ 		+

hadley.carlisle@canonical.com

+
+

Mailing List:

+ 		+

design.ops@canonical.com

+
+

Location:

+ 		+

United Kingdom

+
+

Mobile:

+ 		+

+1 2345 6789

+
+

Mobile:

+ 		+

+1 2345 6789

+
+ +

canonical.com

+ +
+ +

ubuntu.com

+ +
+
diff --git a/webapp/app.py b/webapp/app.py index 2242e02..c26359f 100644 --- a/webapp/app.py +++ b/webapp/app.py @@ -1,4 +1,6 @@ import requests +import flask +import yaml from flask import render_template, request from urllib.parse import parse_qs, urlencode @@ -17,6 +19,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):