Add images and work more on the layout

There's a  long way to go, but we're on a roll!
This commit is contained in:
Starbeamrainbowlabs 2020-05-09 01:54:19 +01:00
parent 879df94094
commit 3f1548201b
Signed by: sbrl
GPG Key ID: 1BE5172E637709C2
5 changed files with 298 additions and 3 deletions

View File

@ -5,7 +5,10 @@
<title>{{ title }}</title>
</head>
<body>
<h1>{{ title }}</h1>
<h1>
<img src="static/images/logo.svg" alt="logo" class="logo large" aria-hidden="true" />
{{ title }}
</h1>
{{ content }}

View File

@ -3,8 +3,8 @@ layout: layouts/main
title: Pepperminty Wiki
---
<div class="double lean-right">
<div class="left">
<div class="double">
<div class="left centre padding-wide">
<p>Pepperminty Wiki is a complete wiki engine contained in a single file, inspired by @am2064's <a href="https://github.com/am2064/Minty-Wiki">Minty Wiki</a>. It's open source too (under MPL-2.0), so contributions are welcome!</p>
</div>
<div class="right">

View File

@ -28,6 +28,10 @@ body {
font-family: sans-serif;
}
h1 {
text-align: center;
}
/* A small tweak to things more responsive */
iframe, object, embed, img, table { max-width: 100%; }
/* Turn the user's cursor into a hand when over things they can click */
@ -93,6 +97,19 @@ button, summary { cursor: pointer; }
.double {
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
}
.double.lean-right { grid-template-columns: 2fr 3fr; }
.double.lean-left { grid-template-columns: 3fr 2fr; }
.centre-horizontal { align-self: center; }
.centre-vertical { justify-self: center; }
.centre { align-self: center; justify-self: center; }
.padding-wide { padding: 3em; }
.logo { vertical-align: middle; }
.logo.large { max-width: 2em; }
.logo.medium { max-width: 1.5em; }
.logo.small { max-width: 1em; }

275
src/static/images/logo.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 174 KiB