Make layout more like original

public/stylesheets/_header.scss

@@ -4,19 +4,66 @@ header[data-organization-name] {
   right: 0;
   background: #444444;
   height: 10rem;
+  color: #fff;
 
-  .header__container {
+  &::before,
+  &::after {
+    position: absolute;
     width: 100rem;
+    min-width: 100rem;
     margin: 0 auto;
+    right: 0;
+    left: 18rem;
   }
 
-  h1 {
-    color: #ffffff;
-    font-weight: normal;
-    float: left;
+  &::before {
+    top: 1.5rem;
+    text-transform: uppercase;
+    content: attr(data-organization-name);
+  }
+
+  &::after {
+    content: attr(data-application-name);
+    top: 3.1rem;
+    color: #aaa;
+    font-size: 1.3rem;
+  }
+
+  & > a {
+    width: 100rem;
+    min-width: 100rem;
+    display: block;
+    margin: 0 auto;
+
+    &::before {
+      position: absolute;
+      display: block;
+      content: "";
+      width: 40px;
+      height: 40px;
+      top: 10px;
+      margin-left: 30px;
+      filter: invert(100%);
+      background: url(https://avatars3.githubusercontent.com/u/27146352?s=40)
+    }
+
+    h1 {
+      background: #d32f2f;
+      position: absolute;
+      bottom: 0;
+      margin: 0;
+      font-size: 2.5rem;
+      padding: 0.5rem 1rem;
+      color: #ffffff;
+      font-weight: normal;
+      float: left;
+    }
   }
 
   nav {
+    width: 100rem;
+    margin: 0 auto;
+    position: relative;
 
     ul {
       margin: 0;
@@ -26,6 +73,9 @@ header[data-organization-name] {
       list-style: none;
       padding: 0;
       float: right;
+      position: absolute;
+      top: 0;
+      right: 0;
 
       li {
         display: inline-block;

public/stylesheets/_nav.scss

@@ -3,7 +3,7 @@ main.mainContainer {
 }
 
 nav#menuGlowne {
-  margin-top: 12rem;
+  margin-top: 10rem;
   width: 20rem;
   float: left;
   border: 1px solid #d32f2f;
@@ -56,8 +56,8 @@ nav#menuGlowne {
 }
 
 #idSection {
-  margin-left: 22rem;
-  margin-top: 12rem;
+  margin-left: 20rem;
+  margin-top: 10rem;
   list-style: none;
   display: flex;
   background: #cccccc;

src/routes/uonetplus-opiekun.js

@@ -3,8 +3,12 @@ const router = express.Router();
 const converter = require('../utils/converter');
 const dictMap = require('../utils/dictMap');
 
+const userInfo = require('../../data/api/ListaUczniow')[0];
+
 global.opiekunRoot = "/Default/123456";
 
+global.dataOrganizationName = userInfo.JednostkaNazwa;
+
 router.get("/", (req, res) => {
     res.json({
         "name": "uonetplus-opiekun",

src/views/opiekun/layout.pug

@@ -9,20 +9,19 @@ append extraFooter
         | });
 
 prepend content
-    header(data-organization-name="School")
-
-        .header__container
+    header(data-organization-name=dataOrganizationName data-application-name="Uczniowie Optivum NET+")
 
+        a
             h1 Witryna ucznia i rodzica
 
-            nav
-                ul
-                ul
-                    li admin
-                    li
-                        a(href=opiekunRoot + "/LoginEndpoint.aspx?logout=true") Wyloguj
-                    li
-                        a(href=uonetplusUrl + "/Default") Start
+        nav
+            ul
+            ul
+                li admin
+                li
+                    a(href=opiekunRoot + "/LoginEndpoint.aspx?logout=true") Wyloguj
+                li
+                    a(href=uonetplusUrl + "/Default") Start
 
     nav#menuGlowne
         ul