qwik/qwik-website
Archived
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

More on graphical profile.

Browse Source
This commit is contained in:
BurnyLlama 2021-07-26 22:34:35 +02:00
parent 2d5559ad32
commit e963596cb6
5 changed files with 194 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
graphical-profil_colors.html Normal file
View File

@ -0,0 +1,31 @@
>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
<link rel="manifest" href="/favicons/site.webmanifest">
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#3ddf89">
<link rel="shortcut icon" href="/favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#181833">
<meta name="msapplication-config" content="/favicons/browserconfig.xml">
<meta name="theme-color" content="#3ddf89">
<link rel="stylesheet" type="text/css" href="./styles/main.css">
<link rel="stylesheet" type="text/css" href="./styles/graphical-profile.css">
<title>qwik resources - colours</title>
</head>
<body>
<div class="grid-container">
<header>
<img src="./resources/design-colors-showcase.svg" alt="The qwik colour palette." class="image">
<h1>qwik resources - colours</h1>
<i>here you can find our entire colours scheme</i>
</header>
<h1>(( !! COMING SOON !! ))</h1>
</body>
</html>

25
graphical-profile.html
View File

@ -48,6 +48,31 @@
(See image below.)
</p>
<img src="./resources/design-text-aligning.svg" alt="An image showing how we align text." class="image">
<h1>Logo</h1>
<img src="./resources/logo.svg" alt="qwik's logo" class="logo" style="margin: 1rem 0;">
<p>
You can download our logo as an svg <a href="./resources/logo.svg" download>here</a>.
It is made by BurnyLlama and is available under the <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>
license (tl;dr: give us credit).
</p>
<h1>Colors</h1>
<p>
We have a big colour scheme including 12 colours with five tones each. We also provide a greyscale with
15 tones. Our official designs <i>should</i> only use these colours and tones.
</p>
<img src="./resources/design-colors-showcase.svg" alt="An image showing all colours in the qwik color scheme." class="image">
<p>
Our primary color is called Sea Green (#3DDF89 <span class="color" style="background-color: #3DDF89;"></span>),
and then we have two accent colours: Hacky Cyan (#4CDCDF <span class="color" style="background-color: #4CDCDF;"></span>)
and Sky Blue (#4C9CEF <span class="color" style="background-color: #4C9CEF;"></span>).
We use Sea Green for H1s and buttons, Hacky Cyan for H2s, and Sky Blue for links.
<br>
<a href="./graphical-profil_colors.html">Here you can find all the hex-codes for the other colours.</a>
</p>
</div>
</body>
</html>

109
resources/design-colors-showcase.svg Normal file
View File

@ -0,0 +1,109 @@
<svg viewBox="0 0 550 350" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<rect width="550" height="350" fill="#20203F"/>
<g filter="url(#filter0_d)">
<rect x="41" y="241" width="50.7" height="46.8" transform="rotate(-90 41 241)" fill="#BF3638"/>
<rect x="187.25" y="241" width="50.7" height="56.55" transform="rotate(-90 187.25 241)" fill="#53A545"/>
<rect x="347.15" y="241" width="50.7" height="48.75" transform="rotate(-90 347.15 241)" fill="#2143CA"/>
<rect x="109.25" y="241" width="50.7" height="56.55" transform="rotate(-90 109.25 241)" fill="#BD920F"/>
<rect x="271.1" y="241" width="50.7" height="50.7" transform="rotate(-90 271.1 241)" fill="#2CA3A5"/>
<rect x="425.15" y="241" width="50.7" height="50.7" transform="rotate(-90 425.15 241)" fill="#B63AB0"/>
<rect x="80" y="241" width="50.7" height="39" transform="rotate(-90 80 241)" fill="#AF6118"/>
<rect x="236" y="241" width="50.7" height="39" transform="rotate(-90 236 241)" fill="#2AA764"/>
<rect x="392" y="241" width="50.7" height="39" transform="rotate(-90 392 241)" fill="#613FD9"/>
<rect x="158" y="241" width="50.7" height="39" transform="rotate(-90 158 241)" fill="#7D9A37"/>
<rect x="314" y="241" width="50.7" height="39" transform="rotate(-90 314 241)" fill="#1C67B5"/>
<rect x="470" y="241" width="50.7" height="39" transform="rotate(-90 470 241)" fill="#D0356D"/>
<rect x="41" y="98.65" width="52.65" height="42.9" transform="rotate(-90 41 98.65)" fill="#FA999A"/>
<rect x="181.4" y="98.65" width="52.65" height="74.1" transform="rotate(-90 181.4 98.65)" fill="#BCF0B2"/>
<rect x="341.3" y="98.65" width="52.65" height="66.3" transform="rotate(-90 341.3 98.65)" fill="#B1C0FC"/>
<rect x="109.25" y="98.65" width="52.65" height="62.4" transform="rotate(-90 109.25 98.65)" fill="#FFE38F"/>
<rect x="255.5" y="98.65" width="52.65" height="78" transform="rotate(-90 255.5 98.65)" fill="#B7EFF0"/>
<rect x="413.45" y="98.65" width="52.65" height="72.15" transform="rotate(-90 413.45 98.65)" fill="#EFB1F1"/>
<rect x="80" y="98.65" width="52.65" height="39" transform="rotate(-90 80 98.65)" fill="#F9AE67"/>
<rect x="236" y="98.65" width="52.65" height="39" transform="rotate(-90 236 98.65)" fill="#A9F4CC"/>
<rect x="392" y="98.65" width="52.65" height="39" transform="rotate(-90 392 98.65)" fill="#CFC2FE"/>
<rect x="158" y="98.65" width="52.65" height="39" transform="rotate(-90 158 98.65)" fill="#BCF0B2"/>
<rect x="314" y="98.65" width="52.65" height="39" transform="rotate(-90 314 98.65)" fill="#A3CEFA"/>
<rect x="470" y="98.65" width="52.65" height="39" transform="rotate(-90 470 98.65)" fill="#FBA7C6"/>
<rect x="41" y="176.65" width="72.15" height="46.8" transform="rotate(-90 41 176.65)" fill="#EF5255"/>
<rect x="187.25" y="176.65" width="72.15" height="56.55" transform="rotate(-90 187.25 176.65)" fill="#72D661"/>
<rect x="347.15" y="176.65" width="72.15" height="48.75" transform="rotate(-90 347.15 176.65)" fill="#4C6DEF"/>
<rect x="109.25" y="176.65" width="72.15" height="56.55" transform="rotate(-90 109.25 176.65)" fill="#F4C025"/>
<rect x="271.1" y="176.65" width="72.15" height="50.7" transform="rotate(-90 271.1 176.65)" fill="#4CDCDF"/>
<rect x="425.15" y="176.65" width="72.15" height="50.7" transform="rotate(-90 425.15 176.65)" fill="#E175DB"/>
<rect x="80" y="176.65" width="72.15" height="39" transform="rotate(-90 80 176.65)" fill="#EB801B"/>
<rect x="236" y="176.65" width="72.15" height="39" transform="rotate(-90 236 176.65)" fill="#3DDF89"/>
<rect x="392" y="176.65" width="72.15" height="39" transform="rotate(-90 392 176.65)" fill="#967CF4"/>
<rect x="158" y="176.65" width="72.15" height="39" transform="rotate(-90 158 176.65)" fill="#AED651"/>
<rect x="314" y="176.65" width="72.15" height="39" transform="rotate(-90 314 176.65)" fill="#4C9CEF"/>
<rect x="470" y="176.65" width="72.15" height="39" transform="rotate(-90 470 176.65)" fill="#EE588F"/>
<rect x="41" y="202" width="39" height="46.8" transform="rotate(-90 41 202)" fill="#D5484A"/>
<rect x="187.25" y="202" width="39" height="56.55" transform="rotate(-90 187.25 202)" fill="#61C350"/>
<rect x="347.15" y="202" width="39" height="48.75" transform="rotate(-90 347.15 202)" fill="#3457E5"/>
<rect x="109.25" y="202" width="39" height="56.55" transform="rotate(-90 109.25 202)" fill="#DFAC11"/>
<rect x="271.1" y="202" width="39" height="50.7" transform="rotate(-90 271.1 202)" fill="#2DCACD"/>
<rect x="425.15" y="202" width="39" height="50.7" transform="rotate(-90 425.15 202)" fill="#D152CB"/>
<rect x="80" y="202" width="39" height="39" transform="rotate(-90 80 202)" fill="#DA7516"/>
<rect x="236" y="202" width="39" height="39" transform="rotate(-90 236 202)" fill="#2ACB75"/>
<rect x="392" y="202" width="39" height="39" transform="rotate(-90 392 202)" fill="#7C5DE9"/>
<rect x="158" y="202" width="39" height="39" transform="rotate(-90 158 202)" fill="#96BB3E"/>
<rect x="314" y="202" width="39" height="39" transform="rotate(-90 314 202)" fill="#2A83DF"/>
<rect x="470" y="202" width="39" height="39" transform="rotate(-90 470 202)" fill="#E2407C"/>
<rect x="41" y="124" width="39" height="46.8" transform="rotate(-90 41 124)" fill="#FA7A7C"/>
<rect x="187.25" y="124" width="39" height="56.55" transform="rotate(-90 187.25 124)" fill="#93E684"/>
<rect x="347.15" y="124" width="39" height="48.75" transform="rotate(-90 347.15 124)" fill="#748FFB"/>
<rect x="109.25" y="124" width="39" height="56.55" transform="rotate(-90 109.25 124)" fill="#FFD147"/>
<rect x="271.1" y="124" width="39" height="50.7" transform="rotate(-90 271.1 124)" fill="#6BE8EB"/>
<rect x="425.15" y="124" width="39" height="50.7" transform="rotate(-90 425.15 124)" fill="#EC9AEF"/>
<rect x="80" y="124" width="39" height="39" transform="rotate(-90 80 124)" fill="#F99434"/>
<rect x="236" y="124" width="39" height="39" transform="rotate(-90 236 124)" fill="#5DEEA1"/>
<rect x="392" y="124" width="39" height="39" transform="rotate(-90 392 124)" fill="#BCAAFC"/>
<rect x="158" y="124" width="39" height="39" transform="rotate(-90 158 124)" fill="#C2E571"/>
<rect x="314" y="124" width="39" height="39" transform="rotate(-90 314 124)" fill="#74B6FB"/>
<rect x="470" y="124" width="39" height="39" transform="rotate(-90 470 124)" fill="#FA80AC"/>
</g>
<g filter="url(#filter1_d)">
<rect x="35" y="272" width="38" height="32" fill="#00001F"/>
<rect x="156" y="272" width="45" height="32" fill="#40405F"/>
<rect x="285" y="272" width="51" height="32" fill="#80809F"/>
<rect x="415" y="272" width="42" height="32" fill="#C0C0DF"/>
<rect x="93" y="272" width="46" height="32" fill="#20203F"/>
<rect x="219" y="272" width="50" height="32" fill="#60607F"/>
<rect x="349" y="272" width="42" height="32" fill="#A0A0BF"/>
<rect x="475" y="272" width="40" height="32" fill="#E0E0FF"/>
<rect x="67" y="272" width="32" height="32" fill="#10102F"/>
<rect x="195" y="272" width="32" height="32" fill="#50506F"/>
<rect x="323" y="272" width="32" height="32" fill="#9090AF"/>
<rect x="451" y="272" width="32" height="32" fill="#D0D0EF"/>
<rect x="131" y="272" width="32" height="32" fill="#30304F"/>
<rect x="259" y="272" width="32" height="32" fill="#70708F"/>
<rect x="387" y="272" width="32" height="32" fill="#B0B0CF"/>
</g>
</g>
<defs>
<filter id="filter0_d" x="5" y="16" width="540" height="267" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="6"/>
<feGaussianBlur stdDeviation="18"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.121569 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter1_d" x="-1" y="242" width="552" height="104" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="6"/>
<feGaussianBlur stdDeviation="18"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.121569 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<clipPath id="clip0">
<rect width="550" height="350" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

14
styles/graphical-profile.css
View File

@ -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;
}

25
styles/main.css
View File

@ -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 {