Merge pull request 'change HEADER background' (#11) from bg into master

Reviewed-on: https://git.vebit.xyz/muli/wtf-public-website/pulls/11

assets/css/style.css

@@ -28,6 +28,7 @@
      --wtf-mid-grey: #acacac; /* Nicht im swag-Repo */
      /*--wtf-light-grey: #f2f2f2;*/
      --wtf-light-grey: #edefeb;
+     --wtf-lila: #6600ff;_
 
      --column-count: 3;
 }
@@ -251,7 +252,7 @@ header {
 .bg_box__top_bar_left {
     grid-row: 2 / span 1;
     grid-column: 1 / span 3;
-    background-color: var(--wtf-light-blue);
+    background-color: var(--wtf-dark-blue);
     z-index: 5;
 }
 
@@ -266,7 +267,7 @@ header {
 .bg_box__top_bar_right {
     grid-row: 1 / span 2;
     grid-column: 5 / span 1;
-    background-color: var(--wtf-light-orange);
+    background-color: var(--wtf-light-blue);
     z-index: 5;
 }
 
@@ -283,14 +284,16 @@ header {
 .bg_box__big_bg {
     grid-row: 3 / span 2;
     grid-column: 1 / span 5;
-    background-color: var(--wtf-light-orange);
+    background-color: var(--wtf-light-blue);
+    background-image: url("../images/header_background.svg");
+    background-repeat: repeat;
     z-index: 5;
 }
 
 .bg_box__bottom_bar_left {
     grid-row: 5 / span 1;
     grid-column: 1 / span 3;
-    background-color: var(--wtf-light-orange);
+    background-color: var(--wtf-lila);
     z-index: 5;
 }
 
@@ -350,6 +353,7 @@ header {
     font-size: 1.2rem;
     line-height: 1.3em;
     margin: 0.5em 0 0 1em;
+    color: white;
 }
 
 .header__sub_claim {

assets/images/header_background.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1200" height="368" version="1.1" viewBox="0 0 317.5 97.367" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>L3D</title>
+ <defs>
+  <linearGradient id="linearGradient1420" x1="150.56" x2="155.79" y1="93.414" y2="7.0784" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#60f" offset="0"/>
+   <stop stop-color="#2a7fff" stop-opacity="0" offset="1"/>
+  </linearGradient>
+ </defs>
+ <metadata>
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title>L3D</dc:title>
+    <cc:license rdf:resource="MIT License"/>
+    <dc:creator>
+     <cc:Agent>
+      <dc:title>l3d@c3woc.de</dc:title>
+     </cc:Agent>
+    </dc:creator>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <g stroke-linecap="round">
+  <rect y="-3.4694e-18" width="317.5" height="97.367" rx="0" ry="0" fill="url(#linearGradient1420)" stop-color="#000000" stroke-width="1.1552" style="paint-order:markers fill stroke"/>
+  <rect x="396.6" y="30.857" width=".94234" height=".62388" fill="#2a7fff" stop-color="#000000" stroke-width=".52917" style="paint-order:markers fill stroke"/>
+ </g>
+</svg>

assets/images/header_bottom_triangles.svg

@@ -1,15 +1,14 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" version="1.1" viewBox="0 0 82 55" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:serif="http://www.serif.com/"><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF></metadata>
-<svg width="100%" height="100%" viewBox="0 0 82 55" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="translate(-218 -477)">
-    <g transform="matrix(1,0,0,1,-218,-477)">
+        <g transform="translate(-251 -106)">
-        <g transform="matrix(1,0,0,1,-251,-106)">
+            <g id="bottom-left-corner" transform="translate(93 106)" serif:id="bottom left corner">
-            <g id="bottom-left-corner" serif:id="bottom left corner" transform="matrix(1,0,0,1,93,106)">
+                <path d="m458 477h-82v55l82-55z" fill="#60f"/>
-                <path d="M458,477L376,477L376,532L458,477Z" style="fill:rgb(255,203,169);"/>
             </g>
-        </g>
+        
-        <g transform="matrix(1,0,0,1,-251,-106)">
+        
-            <g id="bottom-left-corner1" serif:id="bottom left corner" transform="matrix(1,0,0,1,93,106)">
+            <g transform="translate(93 106)" serif:id="bottom left corner">
-                <path d="M458,532L458,477L376,532L458,532Z" style="fill:rgb(0,51,128);"/>
+                <path d="m458 532v-55l-82 55h82z" fill="#003380"/>
             </g>
         </g>
     </g>

assets/images/header_top_triangles.svg

@@ -3,9 +3,9 @@
     <g transform="translate(-979)">
         <g transform="translate(-158)">
             <g id="blue-corner" transform="translate(-93 -106)" serif:id="blue corner">
-                <path d="m1257.2 152-27.17 18v-18h27.17z" fill="#2a7fff"/>
+                <path d="m1257.2 152-27.17 18v-18h27.17z" fill="#003380"/>
             </g>
-            <path id="top-right-triangle" d="m1233 0v64h-96" fill="#ffcba9" serif:id="top right triangle"/>
+            <path id="top-right-triangle" d="m1233 0v64h-96" fill="#2a7fff" serif:id="top right triangle"/>
         </g>
     </g>
 </svg>