From b277f15e46cd69c456e46e47830f7d7ef8d14714 Mon Sep 17 00:00:00 2001 From: BurnyLlama Date: Tue, 10 Aug 2021 20:18:29 +0200 Subject: [PATCH] Added graphical profile. --- assets/css/graphical-profile.css | 47 ++ assets/css/landing.css | 2 +- assets/css/theme.css | 6 + assets/images/design-colors-showcase.svg | 109 ++++ assets/images/design-text-aligning.svg | 465 ++++++++++++++++++ content/components/color.njk | 17 + .../articles/graphical-profile/colours.njk | 59 +++ .../articles/graphical-profile/intro.njk | 72 +++ 8 files changed, 776 insertions(+), 1 deletion(-) create mode 100644 assets/css/graphical-profile.css create mode 100644 assets/images/design-colors-showcase.svg create mode 100644 assets/images/design-text-aligning.svg create mode 100644 content/components/color.njk create mode 100644 content/pages/articles/graphical-profile/colours.njk diff --git a/assets/css/graphical-profile.css b/assets/css/graphical-profile.css new file mode 100644 index 0000000..8d624ee --- /dev/null +++ b/assets/css/graphical-profile.css @@ -0,0 +1,47 @@ +.color-label { + display: inline-block; + width: 1em; + height: 1em; + margin: 0 -.15em -.11em .25em; + border-radius: .2em; +} + +.color-list { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.color-palette { + display: flex; + flex-direction: column; + flex: 1 1 0px; + align-items: center; + + min-width: max-content; + margin: 2rem; +} + +.color-palette > .color-name { + font-size: 1.25rem; +} + +.color-palette > .colors { + display: flex; + flex-direction: column; +} + +.color-container { + display: flex; + align-items: center; +} + +.color-box { + display: block; + width: 3rem; + height: 3rem; +} + +.color-code { + margin-left: .5rem; +} \ No newline at end of file diff --git a/assets/css/landing.css b/assets/css/landing.css index 85da208..dd8cc4f 100644 --- a/assets/css/landing.css +++ b/assets/css/landing.css @@ -54,7 +54,7 @@ nav > a:hover { grid-area: logo; width: min(20ch, 35vmin); - margin-right: 1rem; + margin: 1rem 0; box-shadow: none; } diff --git a/assets/css/theme.css b/assets/css/theme.css index 2264c53..2bd9f76 100644 --- a/assets/css/theme.css +++ b/assets/css/theme.css @@ -155,4 +155,10 @@ img { margin: 1rem 5%; border-radius: .5rem; box-shadow: 0 1rem 2rem var(--grey1); +} + +img.logo { + margin: 1rem auto; + width: 30%; + box-shadow: none; } \ No newline at end of file diff --git a/assets/images/design-colors-showcase.svg b/assets/images/design-colors-showcase.svg new file mode 100644 index 0000000..deb8832 --- /dev/null +++ b/assets/images/design-colors-showcase.svg @@ -0,0 +1,109 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/design-text-aligning.svg b/assets/images/design-text-aligning.svg new file mode 100644 index 0000000..a7f609e --- /dev/null +++ b/assets/images/design-text-aligning.svg @@ -0,0 +1,465 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/content/components/color.njk b/content/components/color.njk new file mode 100644 index 0000000..b5735fa --- /dev/null +++ b/content/components/color.njk @@ -0,0 +1,17 @@ +{% macro label(color, border) %} +{{ color }} +{% endmacro %} + +{% macro palette(colorName, colors) %} +
+

{{ colorName }}

+
+ {% for color in colors %} +
+
+

{{ color }}

+
+ {% endfor %} +
+
+{% endmacro %} \ No newline at end of file diff --git a/content/pages/articles/graphical-profile/colours.njk b/content/pages/articles/graphical-profile/colours.njk new file mode 100644 index 0000000..e7c3dc5 --- /dev/null +++ b/content/pages/articles/graphical-profile/colours.njk @@ -0,0 +1,59 @@ +{% extends "templates/article.njk" %} +{% import "components/toc.njk" as toc with context %} +{% import "components/color.njk" as color with context %} + +{% block head %} + + qwik - colours +{% endblock %} + +{% block header %} + A promotional image for our colour scheme. + Colours + Last updated 10th August 2021 +{% endblock %} + +{% block main %} + {{ toc.header("h1", "Basic colour rules") }} +

+ We use Sea Green ({{ color.label("#3DDF89") }}) as our primary colour, and Hacky Cyan ({{ color.label("#4CDCDF") }}) + and Sky Blue ({{ color.label("#4C9CEF") }}) as accents. We use Sea Green for things like titles, H1s, and buttons. + For all other HXs we use Hacky Cyan. We use Sky Blue for links. +

+ + {{ toc.header("h1", "Colour Scheme") }} +

+ We have a kind of large colour scheme, although most colours are usually unused. When creating official qwik material + only these colours should be used. The colour scheme is crafted by BurnyLlama, but is of course freely available to anyone + outside qwik (as we believe owning colours would be a stupid idea). +

+ {{ toc.header("h2", "Colours") }} +
+ {{ color.palette("Apple Red", ["#BF3638", "#D5484A", "#EF5255", "#FA7A7C", "#FA999A"]) }} + {{ color.palette("Fruity Orange", ["#AF6118", "#DA7516", "#EB801B", "#F99434", "#F9AE67"]) }} + {{ color.palette("Pineapple Yellow", ["#BD920F", "#DFAC11", "#F4C025", "#FFD147", "#FFE38F"]) }} + {{ color.palette("Pear Green", ["#7D9A37", "#96BB3E", "#AED651", "#C2E571", "#DBF1A7"]) }} + {{ color.palette("Parakeet Green", ["#53A545", "#61C350", "#72D661", "#93E684", "#BCF0B2"]) }} + {{ color.palette("Sea Green", ["#2AA764", "#2ACB75", "#3DDF89", "#5DEEA1", "#A9F4CC"]) }} + {{ color.palette("Hacky Cyan", ["#2CA3A5", "#2DCACD", "#4CDCDF", "#6BE8EB", "#B7EFF0"]) }} + {{ color.palette("Sky Blue", ["#1C67B5", "#2A83DF", "#4C9CEF", "#74B6FB", "#A3CEFA"]) }} + {{ color.palette("Vivid Indigo", ["#2143CA", "#3457E5", "#4C6DEF", "#748FFB", "#B1C0FC"]) }} + {{ color.palette("Royal Purple", ["#613FD9", "#7C5DE9", "#967CF4", "#BCAAFD", "#CFC2FE"]) }} + {{ color.palette("Popping Magenta", ["#B63AB0", "#D152CB", "#E175DB", "#EC9AEF", "#EFB1F1"]) }} + {{ color.palette("Flower Pink", ["#D0356D", "#E2407C", "#EE588F", "#FA80AC", "#FBA7C6"]) }} +
+ + {{ toc.header("h2", "Greyscale") }} +

+ Internally we call our greyscale Mighty Greyscale, although that's kinda arbitrary. + Our main background colour is {{ color.label("#10102F", "border: 1px solid var(--grey5);") }}. + You can use {{ color.label("#00001F", "border: 1px solid var(--grey5);") }} for drop-shadows, + and {{ color.label("#20203F", "border: 1px solid var(--grey5);") }} to "elevate" elements. +

+
+ {{ color.palette("", ["#00001F", "#10102F", "#20203F", "#30304F", "#40405F"]) }} + {{ color.palette("", ["#50506F", "#60607F", "#70708F", "#80809F", "#9090AF"]) }} + {{ color.palette("", ["#A0A0BF", "#B0B0CF", "#C0C0DF", "#D0D0EF", "#E0E0FF"]) }} +
+ +{% endblock %} \ No newline at end of file diff --git a/content/pages/articles/graphical-profile/intro.njk b/content/pages/articles/graphical-profile/intro.njk index e69de29..b94f5cc 100644 --- a/content/pages/articles/graphical-profile/intro.njk +++ b/content/pages/articles/graphical-profile/intro.njk @@ -0,0 +1,72 @@ +{% extends "templates/article.njk" %} +{% import "components/toc.njk" as toc with context %} + +{% block head %} + qwik - graphical resources +{% endblock %} + +{% block header %} + A promotional image for our graphical resources. + Graphical Resources + Last updated 10th August 2021 +{% endblock %} + +{% block main %} + {{ toc.header("h1", "Typography") }} +

+ We only use one font, Manrope, coming with 7 weights: +

+ +

+ We use Regular as the main font and for strong (bold) text we use Semibold. + We use a line height of 1.5 for better readability. We don't really have a specific size that + the font should be, but try to keep it readable (make sure the font is readble on all screens). + Also, try to keep a visual hierarchy (having headeings bigger than paragraphs, and so on). +

+

+ Other weights should only be used for other material than text, like posters, images, social media, + and so on, to "spice them up". +

+

+ We also justify wider text bodies, while we recommend using left-aligned text for less wide text bodies: +

+ An image showing how we align text. + + + + {{ toc.header("h1", "Logo") }} + +

+ You can download our logo here. It is made by BurnyLlama + and is available under the CC-BY-4.0 license + (tl;dr: give us credit). +

+ + + + {{ toc.header("h1", "Images") }} +

+ We recommend using SVGs instead of raster images like PNGs and JPGs. This is because they scale for all screens, and + are (typically) smaller in size (unless you're making something huge). +

+ + + + {{ toc.header("h1", "Colours") }} +

+ We provide a pretty big colour scheme that includes one greyscale (consisting of 15 tones) and 12 colours with five tones each. + Official material for qwik should only use these colours. +

+ An image showing all colours. +

+ Read more about our colours here. +

+{% endblock %} \ No newline at end of file