From e963596cb6036a0faed95607eba51bfeef6ee6a8 Mon Sep 17 00:00:00 2001 From: BurnyLlama Date: Mon, 26 Jul 2021 22:34:35 +0200 Subject: [PATCH] More on graphical profile. --- graphical-profil_colors.html | 31 ++++++++ graphical-profile.html | 25 ++++++ resources/design-colors-showcase.svg | 109 +++++++++++++++++++++++++++ styles/graphical-profile.css | 14 +++- styles/main.css | 25 +++--- 5 files changed, 194 insertions(+), 10 deletions(-) create mode 100644 graphical-profil_colors.html create mode 100644 resources/design-colors-showcase.svg diff --git a/graphical-profil_colors.html b/graphical-profil_colors.html new file mode 100644 index 0000000..65bb1cb --- /dev/null +++ b/graphical-profil_colors.html @@ -0,0 +1,31 @@ +> + + + + + + + + + + + + + + + + + + qwik resources - colours + + +
+
+ The qwik colour palette. +

qwik resources - colours

+ here you can find our entire colours scheme +
+ +

(( !! COMING SOON !! ))

+ + \ No newline at end of file diff --git a/graphical-profile.html b/graphical-profile.html index f48b5f5..6674b06 100644 --- a/graphical-profile.html +++ b/graphical-profile.html @@ -48,6 +48,31 @@ (See image below.)

An image showing how we align text. + + +

Logo

+ +

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

+ + +

Colors

+

+ We have a big colour scheme including 12 colours with five tones each. We also provide a greyscale with + 15 tones. Our official designs should only use these colours and tones. +

+ An image showing all colours in the qwik color scheme. +

+ Our primary color is called Sea Green (#3DDF89 ), + and then we have two accent colours: Hacky Cyan (#4CDCDF ) + and Sky Blue (#4C9CEF ). + We use Sea Green for H1s and buttons, Hacky Cyan for H2s, and Sky Blue for links. +
+ Here you can find all the hex-codes for the other colours. +

\ No newline at end of file diff --git a/resources/design-colors-showcase.svg b/resources/design-colors-showcase.svg new file mode 100644 index 0000000..deb8832 --- /dev/null +++ b/resources/design-colors-showcase.svg @@ -0,0 +1,109 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/styles/graphical-profile.css b/styles/graphical-profile.css index e28ccb8..e265443 100644 --- a/styles/graphical-profile.css +++ b/styles/graphical-profile.css @@ -6,15 +6,27 @@ header { display: flex; flex-direction: column; align-items: center; + + padding: 0 5%; margin-top: 5vh; } header > h1 { font-size: 4rem; - margin: 0; } header > i { display: block; color: var(--accent); + width: 100%; + text-align: center; +} + +span.color { + display: inline-block; + width: 1em; + height: 1em; + margin-bottom: -.1em; + background-color: attr(data-color color); + border-radius: .1em; } \ No newline at end of file diff --git a/styles/main.css b/styles/main.css index 4ed47e6..879eabb 100644 --- a/styles/main.css +++ b/styles/main.css @@ -117,7 +117,7 @@ header { color: var(--primary); font-size: 2rem; - margin-left: 1rem; + margin-left: 2rem; margin-bottom: 1rem; } @@ -131,14 +131,18 @@ header { -h1 { +h1, h2 { color: var(--primary); - font-size: 2.5rem; + font-size: 2.5rem; + text-align: center; + + width: 100%; margin-top: 1rem; } h2 { + margin: 0; color: var(--accent); font-size: 1.5rem; } @@ -152,14 +156,16 @@ b { } p { + padding: 0 5%; margin: 0 auto; - width: min(70ch, 90%); + + width: min(80ch, 100%); text-align: justify; } ul { - padding: .5rem 2rem; - width: min(70ch, 90%); + padding: .5rem calc(5% + 2rem); + width: min(80ch, 100%); } @@ -204,8 +210,7 @@ ul { margin-top: auto; margin-bottom: .5rem; - padding: .5rem; - width: 100%; + padding: .5rem 1.5rem; display: block; font-size: 1rem; @@ -288,12 +293,14 @@ footer { margin: 15vh 0; padding: 1rem 5rem; + + width: max-content; border-top: .1rem solid var(--accent); } footer > p, footer > p > a { font-size: .65rem; - width: auto; + width: max-content; } .love {