Improve header composition and fix the link

src/paths/index/components/IndexDescription.js

@@ -11,11 +11,39 @@ export default class IndexDescription extends LitElement {
             :host {
             }
           }
-          
+
           /** Component styling **/
           :host {
             line-height: 22px;
           }
+
+          :host .header-description {
+            display: flex;
+            align-items: flex-end;
+            color: var(--dimmed-font-color);
+          }
+
+          :host .header-description-column {
+            flex: 2;
+          }
+          :host .header-description-column.header-extra-links {
+            flex: 1;
+            text-align: right;
+          }
+
+          :host .header-description a {
+            color: var(--link-font-color);
+            text-decoration: none;
+          }
+          :host .header-description a:hover {
+            color: var(--link-font-color-hover);
+          }
+
+          :host hr {
+            border: none;
+            border-top: 1px solid var(--g-background-extra-color);
+            width: 30%;
+          }
         `;
     }
 
@@ -23,16 +51,21 @@ export default class IndexDescription extends LitElement {
 
     render() {
         return html`
-            <p>
-                This page lists all open pull-requests (PRs) assigned to every core maintenance team.
-                <br/>
-                Contributors are encouraged to collaborate and clear the backlog by giving these PRs a proper look
-                and either accepting or rejecting them.
-                <br/>
-                Positively reviewed PRs are open to be merged by responsible maintainers.
-                <br/>
-                See also https://godot-proposals-viewer.github.io/.
-            </p>
+            <div class="header-description">
+                <div class="header-description-column">
+                    This page lists all open pull-requests (PRs) assigned to every Godot engine maintenance team.
+                    <hr>
+                    Contributors are encouraged to collaborate and clear the backlog by giving these PRs a proper look
+                    and either approving or declining them.
+                    <br/>
+                    Positively reviewed PRs are open to be merged by responsible maintainers.
+                </div>
+                <div class="header-description-column header-extra-links">
+                    See also:
+                    <br />
+                    <a href="https://godot-proposals-viewer.github.io/" target="_blank">Godot Proposal Viewer</a>
+                </div>
+            </div>
         `;
     }
 }

src/paths/index/components/IndexHeader.js

@@ -13,19 +13,20 @@ export default class IndexHeader extends LitElement {
               --header-meta-color: #515c6c;
             }
           }
-          
+
           /** Component styling **/
           :host {
           }
-          
+
           :host .header {
             display: flex;
             justify-content: space-between;
             align-items: center;
           }
-          
+
           :host .header-metadata {
             color: var(--header-meta-color);
+            text-align: right;
           }
           :host .header-metadata a {
             color: var(--link-font-color);

src/shared/styles/global.css

@@ -1,6 +1,7 @@
 /** Colors and variables **/
 :root {
   --g-background-color: #fcfcfa;
+  --g-background-extra-color: #98a5b8;
   --g-font-color: #121314;
   --g-font-size: 15px;
   --g-font-weight: 400;
@@ -17,6 +18,7 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --g-background-color: #0d1117;
+    --g-background-extra-color: #515c6c;
     --g-font-color: rgba(228, 228, 232, 0.9);
 
     --link-font-color: #367df7;