From 17da74dab5faad9a27a65c9cf4709f577bd9d5ef Mon Sep 17 00:00:00 2001
From: Inga Mai <inga.mai@outlook.de>
Date: Thu, 9 Jul 2020 10:46:39 +0200
Subject: [PATCH 1/3] Add spacings to headings and style code boxes

---
 .../layouts/styleguide/styleguide.layout.html.erb | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/app/views/layouts/styleguide/styleguide.layout.html.erb b/app/views/layouts/styleguide/styleguide.layout.html.erb
index 739fd3fb52..3edb8c2af1 100644
--- a/app/views/layouts/styleguide/styleguide.layout.html.erb
+++ b/app/views/layouts/styleguide/styleguide.layout.html.erb
@@ -21,9 +21,20 @@
         background-color: white;
       }
 
+      .lsg-headline {
+        margin-top: 3rem
+      }
+
+      .lsg-code-block {
+        margin: 1rem 0 2rem 0;
+        border: 1px solid #e2e2e2;
+      }
+
       .lsg-code {
-        display: block;
-        margin: 10px 0;
+        display: inline-block;
+        min-width: 100%;
+        padding: 1rem;
+        border: none;
       }
 
       .styleguide-banner {

From 6aee5c5fbc44eadaf620412835ce19abdfe2c418 Mon Sep 17 00:00:00 2001
From: Inga Mai <inga.mai@outlook.de>
Date: Thu, 9 Jul 2020 13:38:18 +0200
Subject: [PATCH 2/3] Style header and navigation

---
 .../styleguide/styleguide.layout.html.erb     | 41 +++++++++++++++++--
 1 file changed, 38 insertions(+), 3 deletions(-)

diff --git a/app/views/layouts/styleguide/styleguide.layout.html.erb b/app/views/layouts/styleguide/styleguide.layout.html.erb
index 3edb8c2af1..4ae90130fe 100644
--- a/app/views/layouts/styleguide/styleguide.layout.html.erb
+++ b/app/views/layouts/styleguide/styleguide.layout.html.erb
@@ -21,13 +21,46 @@
         background-color: white;
       }
 
+      .styleguide-nav--menu-items {
+        margin: 0;
+        background: var(--primary-color);
+        flex-wrap: wrap;
+      }
+
+      .styleguide-nav li {
+        padding: 0.5rem 1rem;
+        flex: 1;
+        text-align: center;
+      }
+
+      .styleguide-nav li:hover {
+        background: var(--header-item-bg-hover-color);
+      }
+
+      .styleguide-nav a {
+        color: var(--header-item-font-color);
+      }
+
+      .styleguide-nav a:hover {
+        color: var(--header-item-font-hover-color);
+        text-decoration: none;
+      }
+
       .lsg-headline {
         margin-top: 3rem
       }
 
+      .lsg-headline:first-child {
+        margin: 0;
+      }
+
+      .lsg-sub-headline {
+        margin-top: 2rem;
+      }
+
       .lsg-code-block {
-        margin: 1rem 0 2rem 0;
-        border: 1px solid #e2e2e2;
+        margin: 1rem 0;
+        border: 1px solid var(--toolbar-item--border-color);
       }
 
       .lsg-code {
@@ -38,11 +71,13 @@
       }
 
       .styleguide-banner {
-        height: 280px;
         padding: 200px 0 0;
         background: url('/assets/styleguide/logo_openproject.png');
         background-position: top center;
         background-repeat: no-repeat;
+        background-size: contain;
+        max-width: 700px;
+        margin: 1rem auto 3rem auto;
       }
 
       .styleguide-banner--text {

From 31057f3b7d7f4a4c55c286f35840261145cf844d Mon Sep 17 00:00:00 2001
From: Inga Mai <inga.mai@outlook.de>
Date: Thu, 9 Jul 2020 13:39:57 +0200
Subject: [PATCH 3/3] Add mobile styles

---
 .../styleguide/styleguide.layout.html.erb        | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/app/views/layouts/styleguide/styleguide.layout.html.erb b/app/views/layouts/styleguide/styleguide.layout.html.erb
index 4ae90130fe..1b9c148673 100644
--- a/app/views/layouts/styleguide/styleguide.layout.html.erb
+++ b/app/views/layouts/styleguide/styleguide.layout.html.erb
@@ -123,6 +123,22 @@
         display: block;
         font-size: 30px;
       }
+
+      /* Tablet screen size */
+      @media only screen and (max-width: 1210px) {
+        body {
+          max-width: unset;
+          margin: 0 1rem;
+          transition: all 0.4s;
+        }
+      }
+
+      /* Mobile screen size */
+      @media only screen and (max-width: 679px) {
+        .styleguide-banner {
+          padding: 25% 0 0;
+        }
+      }
     </style>
   </head>
 <body class="lsg">