Create a base design.
Change-Id: Idf90f0e4b1c411edb72d468d9b4c10daac6c67a3
diff --git a/src/main/resources/META-INF/resources/cms2/base.css b/src/main/resources/META-INF/resources/cms2/base.css
index e525a23..6e3b1b6 100644
--- a/src/main/resources/META-INF/resources/cms2/base.css
+++ b/src/main/resources/META-INF/resources/cms2/base.css
@@ -11,5 +11,116 @@
/* Sanitize.css */
@import "../web_modules/sanitize.css/sanitize.css";
@import "../web_modules/sanitize.css/forms.css";
-@import "../web_modules/sanitize.css/page.css";
@import "../web_modules/sanitize.css/typography.css";
+/* */
+
+html {
+ --main-bg-color: #f8f8f8;
+ --header-bg-color: #ffffff;
+ --nav-bg-color: #ffffff;
+ --footer-bg-color: #ffffff;
+}
+
+body {
+ display: grid;
+}
+
+body {
+ grid-template-columns: 1fr;
+ grid-gap: 0;
+
+ grid-template-areas:
+ "header"
+ "navbar"
+ "main"
+ "footer";
+}
+
+@media (max-width: 30em) {
+ body > main {
+ border-top: 1px solid lightgray
+ }
+}
+
+@media (min-width: 30em) {
+ body {
+ grid-template-columns: 1fr 3fr;
+ grid-template-rows: auto 1fr auto;
+ grid-gap: 0;
+
+ grid-template-areas:
+ "header main"
+ "navbar main"
+ "footer footer";
+ }
+
+ body > nav > ol > li.this-page {
+ width: calc(100% + 1px);
+ }
+}
+
+body > header {
+ grid-area: header;
+ flex: min-content;
+
+ text-align: center;
+ horiz-align: center;
+ background-color: var(--main-bg-color);
+ border-bottom: 1px solid lightgray;
+}
+
+body > header a {
+ text-decoration: none;
+}
+
+body > header h1 {
+ font-size: 1em;
+}
+
+body > nav {
+ grid-area: navbar;
+
+ background-color: var(--nav-bg-color);
+}
+
+body > nav > ol {
+ display: flex;
+ flex-direction: column;
+}
+
+body > nav > ol > li {
+ flex: auto;
+
+ padding: 5px;
+ padding-left: 1em;
+}
+
+body > nav > ol > li.this-page {
+ background-color: var(--main-bg-color);
+ border: 1px solid lightgray;
+ border-right: 1px solid var(--main-bg-color);
+ z-index: 1;
+}
+
+body > nav > ol > li > a {
+ text-decoration: none;
+}
+
+body > main {
+ grid-area: main;
+
+ background-color: var(--main-bg-color);
+ padding: 10px;
+ border-left: 1px solid lightgray;
+}
+
+body > footer {
+ grid-area: footer;
+
+ background-color: var(--footer-bg-color);
+ horiz-align: right;
+ text-align: right;
+
+ padding: 0.5em 0.5em;
+ border-top: lightgray solid 1px;
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/base.html b/src/main/resources/templates/base.html
index 6b1ad42..8619f3e 100644
--- a/src/main/resources/templates/base.html
+++ b/src/main/resources/templates/base.html
@@ -13,6 +13,24 @@
</head>
<body>
-{#insert body}{/}
+ <header>
+ <h1><a href="/">Benki</a> → {#insert siteSection}{/}</h1>
+ </header>
+
+ <nav>
+ <ol>
+ <li><a href="/bookmarx">Bookmarks</a></li>
+ <li><a href="/lafargue">Remarks</a></li>
+ <li class="this-page"><a href="/wiki">Wiki</a></li>
+ </ol>
+ </nav>
+
+ <main>
+ {#insert body}{/}
+ </main>
+
+ <footer>
+ <a href="/imprint">Imprint</a>
+ </footer>
</body>
</html>
diff --git a/src/main/resources/templates/benki/wiki/wikiPage.html b/src/main/resources/templates/benki/wiki/wikiPage.html
index e4a7d58..6ebf7c2 100644
--- a/src/main/resources/templates/benki/wiki/wikiPage.html
+++ b/src/main/resources/templates/benki/wiki/wikiPage.html
@@ -4,6 +4,8 @@
{#title}{page.title} — Benki Wiki{/title}
+{#siteSection}Wiki{/siteSection}
+
{#head}
<link rel="stylesheet" type="text/css" href="/web_modules/ContentTools/build/content-tools.min.css" />
<script type="module" src="/web_modules/elix/define/ExpandablePanel.js" defer></script>
@@ -75,14 +77,14 @@
<h1>{page.title}</h1>
</div>
- <elix-expandable-panel id="warning-panel"><div id="warning-text"></div></elix-expandable-panel>
+ <elix-expandable-panel id="warning-panel" role="alert"><div id="warning-text"></div></elix-expandable-panel>
</header>
- <main>
+ <section id="wiki-page-content">
<div data-editable data-name="wiki-content" id="wiki-content">
{#with page}{enrichedContent.raw}{/}
</div>
- </main>
+ </section>
<hr>
diff --git a/src/main/resources/templates/benki/wiki/wikiPageRevisionList.html b/src/main/resources/templates/benki/wiki/wikiPageRevisionList.html
index f4a3d95..eb64ff9 100644
--- a/src/main/resources/templates/benki/wiki/wikiPageRevisionList.html
+++ b/src/main/resources/templates/benki/wiki/wikiPageRevisionList.html
@@ -5,6 +5,8 @@
{#title}Revisions — {title} — Benki Wiki{/title}
+{#siteSection}Wiki{/siteSection}
+
{#body}
<header>
<h1>Revisions — <a href="/wiki/{title}">{title}</a></h1>