_layouts/package.html: cleanup package page with a sidemenu.

_layouts/package.html

@@ -5,9 +5,13 @@ layout: default
 {% assign base_url = repo | append: '/' | append: page.distribution | relative_url %}
 <h2>Package: {{ page.name }} ({{ page.versions.first.version }}) [<a href="{{ repo | relative_url }}">{{ repo }}</a>/<a href="{{ base_url }}">{{ page.distribution }}</a>:<a href="{{ base_url }}#{{ page.component }}">{{ page.component }}</a>]</h2>
 
+<div class="package">
+
+    <div class="package-main">
+
 {% assign desc = page.description | newline_to_br | split: '<br />' %}
 
-<h3>{{ desc | first | capitalize }}</h3>
+<p><strong>{{ desc | first | capitalize }}</strong></p>
 
 {% if desc.size > 1 %}
 <p>
@@ -46,13 +50,26 @@ layout: default
 	{% endfor %}
 </table>
 
-<h4>External resources</h4>
+    </div>
+
+    <div class="package-sidebar">
+
+        <h3>Additional information</h3>
 
-<ul>
     	{% if page.homepage.size > 0 %}
-	<li>Homepage: <a target="_blank" href="{{ page.homepage }}" rel="noopener noreferrer">{{ page.homepage }}</a></li>
+        <h4>External resources</h4>
+        <ul>
+            <li><a target="_blank" href="{{ page.homepage }}" rel="noopener noreferrer">Homepage</a></li>
+        </ul>
     	{% endif %}
+
     	{% if page.maintainer.size > 0 %}
-	<li>Maintainer: {{ page.maintainer | escape }}</li>
+    	<h4>Maintainer</h4>
+        <ul>
+            <li>{{ page.maintainer | escape }}</li>
+        </ul>
     	{% endif %}
-</ul>
+
+    </div>
+
+</div>

_sass/layout/_package.scss

@@ -0,0 +1,17 @@
+
+.package {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 2em;
+
+    //&-main {
+    //}
+
+    &-sidebar {
+        min-width: 400px;
+        padding: 0 2em;
+        background: $bg-gray-light;
+        border: solid 1px $border-gray-light;
+    }
+}

_sass/main.scss

@@ -6,6 +6,7 @@
 @import "typography";
 
 @import "layout/header";
+@import "layout/package";
 @import "layout/footer";
 
 @import "component/button";