diff options
| author | Matthias Andreas Benkard <code@mail.matthias.benkard.de> | 2020-02-09 06:46:33 +0100 |
|---|---|---|
| committer | Matthias Andreas Benkard <code@mail.matthias.benkard.de> | 2020-02-09 06:46:33 +0100 |
| commit | c275812ffa1382f350c24cf3967aa3fc5cdebcdb (patch) | |
| tree | 09e5967a31e1c5908fa00b0630b499b0379d7ad2 | |
| parent | 6fea813b3d7a8f2acd163ef737bb3ebfce2bb961 (diff) | |
Create a base design.
Change-Id: Idf90f0e4b1c411edb72d468d9b4c10daac6c67a3
4 files changed, 138 insertions, 5 deletions
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> |