From 27248bd3e3bf3c62bebb1da428a3c989824d9891 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?D=C3=A1vid=20Danyi?= <david.danyi@ericsson.com>
Date: Fri, 4 May 2018 16:33:50 +0200
Subject: [PATCH] * grid adjustments for the layout

---
 public/styles/main.css | 57 +++++++++++++++++++++++++-----------------
 1 file changed, 34 insertions(+), 23 deletions(-)

diff --git a/public/styles/main.css b/public/styles/main.css
index fa9ba94..a6649b6 100644
--- a/public/styles/main.css
+++ b/public/styles/main.css
@@ -2,13 +2,14 @@ html,
 body {
     height: 100%;
     color: #003b70;
+    --header-size: 22pt;
 }
 
 .app-container {
     margin: auto;
     display: grid;
-    grid-column-gap: 10px;
-    grid-row-gap: 10px;
+    grid-column-gap: 20px;
+    grid-row-gap: 0;
     min-height: 100%;
 }
 
@@ -34,6 +35,7 @@ body {
 
 h1 {
     font-family: 'PT Serif', serif;
+    font-size: var(--header-size);
 }
 
 a:link,
@@ -41,6 +43,7 @@ a:visited,
 a:hover,
 a:active {
     color: #003b70;
+    text-decoration: none;
 }
 
 a:hover {
@@ -51,34 +54,41 @@ a:hover {
 article,
 section {
     font-family: 'Raleway', sans-serif;
+    font-size: 16pt;
 }
 
 /* mobile */
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 779px) {
     .app-container {
         grid-template-columns: auto;
-        grid-template-rows: 100px auto auto auto 70px;
+        grid-template-rows: 170px auto auto auto 70px;
         grid-template-areas: "header" "nav" "content" "sidebar" "footer";
     }
 }
 
 /* tablet */
-@media only screen and (min-width: 768px) and (max-width: 991px) {
+@media only screen and (min-width: 780px) and (max-width: 1179px) {
     .app-container {
-        grid-template-columns: 200px auto 400px;
-        grid-template-rows: 100px auto 70px;
+        grid-template-columns: auto 180px 580px auto;
+        grid-template-rows: 170px auto auto 70px;
         grid-template-areas:
-                "header header  header"
-                "nav    content sidebar"
-                "footer footer  footer";
+                ". header header ."
+                ". nav content ."
+                ". nav sidebar ."
+                "footer footer footer footer";
+    }
+
+    .footer-content {
+        margin: auto;
+        width: 780px;
     }
 }
 
 /* monitor */
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 1180px) {
     .app-container {
-        grid-template-columns: auto 200px 600px 400px auto;
-        grid-template-rows: 100px auto 70px;
+        grid-template-columns: auto 180px 580px 380px auto;
+        grid-template-rows: 170px auto 70px;
         grid-template-areas:
                 ". header header  header  ."
                 ". nav    content sidebar ."
@@ -87,7 +97,7 @@ section {
 
     .footer-content {
         margin: auto;
-        width: 1220px;
+        width: 1180px;
     }
 }
 
@@ -96,12 +106,13 @@ header.main-header {
 }
 
 header .title {
-    font-size: 14pt;
+    margin-top: 30px;
+    font-size: 40pt;
 }
 
 header .description {
-    font-size: 10pt;
-    letter-spacing: 1.5pt;
+    font-size: 12pt;
+    letter-spacing: 1.75pt;
 }
 
 header .logo {
@@ -149,6 +160,9 @@ nav li > ul {
 
 nav > ul > li {
     padding-left: 5px;
+    font-weight: 700;
+    font-size: 22pt;
+    line-height: 28pt;
 }
 
 nav > ul > li.current {
@@ -160,20 +174,17 @@ nav li.current_ancestor > ul {
     display: block;
 }
 
-nav > ul > li {
-    font-weight: 700;
-    font-size: 18pt;
-}
 
 nav ul.menu_level_1 {
     padding-left: 5px;
 }
 
 nav ul.menu_level_1 > li {
-    font-size: 12pt;
-    line-height: 20pt;
+    font-size: 14pt;
+    line-height: 18pt;
     display: block;
     padding-left: 15px;
+    margin-bottom: 10px;
 }
 
 nav ul.menu_level_1 > li.current {