Add even moar screenshots and a download section
This commit is contained in:
parent
667c798da7
commit
33649a1d62
GPG Key ID:
1BE5172E637709C2
|
|
@ -3,6 +3,8 @@
|
|||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<title>{{ title }}</title>
|
||||
|
||||
<link rel="icon" href="static/images/logo.svg" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ title: Pepperminty Wiki
|
|||
<div class="double lean-right panel">
|
||||
<div class="left centre padding-wide">
|
||||
<p>Welcome to Pepperminty Wiki!</p>
|
||||
<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>
|
||||
<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 <a href="https://github.com/sbrl/Pepperminty-Wiki">open source</a> too (under MPL-2.0), so contributions are welcome!</p>
|
||||
<p class="centre-text">
|
||||
<a href="https://github.com/sbrl/Pepperminty-Wiki/releases/latest"><img src="https://img.shields.io/github/release/sbrl/Pepperminty-Wiki.svg?color=brightgreen&label=stable" alt="stable version badge" /></a>
|
||||
<a href="https://github.com/sbrl/Pepperminty-Wiki/releases"><img src="https://img.shields.io/github/v/release/sbrl/Pepperminty-Wiki?color=yellow&include_prereleases&label=pre-release" alt="pre-release version badge" /></a>
|
||||
|
|
@ -14,9 +14,6 @@ title: Pepperminty Wiki
|
|||
<!-- ([Changelog](https://github.com/sbrl/Pepperminty-Wiki/blob/master/Changelog.md)) -->
|
||||
</p>
|
||||
<p class="centre-text">
|
||||
<!-- TODO: Move the commented ones here down to the download section -->
|
||||
<!-- <a href="https://travis-ci.org/sbrl/Pepperminty-Wiki"><img src="https://travis-ci.org/sbrl/Pepperminty-Wiki.svg?branch=master" alt="Travis CI Build status" /></a>
|
||||
<a href="https://gitter.im/Pepperminty-Wiki/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge"><img src="https://badges.gitter.im/Pepperminty-Wiki/Lobby.svg" alt="Join the chat at https://gitter.im/Pepperminty-Wiki/Lobby" /></a> -->
|
||||
<a href="https://raw.githubusercontent.com/sbrl/Pepperminty-Wiki/master/LICENSE"><img src="https://img.shields.io/badge/License-MPL--2.0-blue.svg" alt="License: MPL-2.0" /></a>
|
||||
<a href="https://hub.docker.com/r/sqlatenwiki/peppermintywiki"><img src="https://img.shields.io/badge/dynamic/json.svg?color=blue&label=Docker%20Pulls&query=%24.pull_count&url=https%3A%2F%2Fhub.docker.com%2Fv2%2Frepositories%2Fsqlatenwiki%2Fpeppermintywiki%2F" alt="Docker pulls count" /></a>
|
||||
</p>
|
||||
|
|
@ -29,7 +26,7 @@ title: Pepperminty Wiki
|
|||
</div>
|
||||
|
||||
|
||||
<!-- Screenshot here opposite above text - insert badge(s) below above text -->
|
||||
<!-- Feature list -->
|
||||
|
||||
<div class="feature-list">
|
||||
<figure class="feature">
|
||||
|
|
@ -60,7 +57,7 @@ title: Pepperminty Wiki
|
|||
<img alt="placeholder" src="https://starbeamrainbowlabs.com/images/placeholder/?width=256&height=256" />
|
||||
<figcaption>
|
||||
<strong>Full-text search</strong>
|
||||
Find that obscure nugget of information easily with a performant full-text search engine <sup><a href="#footnote-fulltext-search">1</a></sup>! Ninjas can use the advanced query syntax to find even the most stubborn of pages.
|
||||
Find that obscure nugget of information easily with a performant full-text search engine <sup><a href="#footnote-fulltext-search">1</a></sup>!
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
|
|
@ -111,7 +108,10 @@ title: Pepperminty Wiki
|
|||
<p>Don't see a feature you need? <a href="https://github.com/sbrl/Pepperminty-Wiki/issues/new">Open an issue</a>!</p>
|
||||
</div>
|
||||
|
||||
<div class="double lean-left margin-vertical">
|
||||
|
||||
<!-- Screenshots -->
|
||||
|
||||
<div class="double lean-left margin-top">
|
||||
<img class="left margin-medium lift-from-page" src="static/images/page-dark.png" alt="Screenshot showing the dark theme and the menu off" />
|
||||
<!-- <div class="left">
|
||||
</div> -->
|
||||
|
|
@ -128,9 +128,55 @@ title: Pepperminty Wiki
|
|||
<img class="right margin-medium lift-from-page" src="static/images/page-photo-usertable.jpeg" alt="Screenshot showing the user management page with the photo theme" />
|
||||
</div>
|
||||
|
||||
<div class="double lean-left margin-vertical ">
|
||||
<img class="left margin-medium lift-from-page" src="static/images/page-dark-recent-changes.png" alt="Screenshot showing the recent changes page" />
|
||||
<div class="right centre padding-wide">
|
||||
<p>Stay up-to-date with the latest changes to your wiki with the recent changes page. Know exactly who changed what and when.</p>
|
||||
<p>File uploads are shown too - along with the size of the file that was uploaded.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="double lean-right panel">
|
||||
<div class="left centre padding-wide">
|
||||
<p>The full-text search engine helps you to find what you're looking for - be it part of a page, or a tag.</p>
|
||||
<p>Ninjas can use the advanced query syntax to find even the most stubborn of pages.</p>
|
||||
</div>
|
||||
<img class="right margin-medium lift-from-page" src="static/images/page-search.png" alt="Screenshot showing the search page with the default theme in light mode" />
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Download -->
|
||||
|
||||
<div class="feature-small margin-vertical">
|
||||
<h2>Download</h2>
|
||||
<div class="padding-horizontal centre-text">
|
||||
<p>Download Pepperminty Wiki in the way that's best for you. Simply upload the <code>index.php</code> file you download to an empty directory on your PHP-enabled web server, and you're away!</p>
|
||||
<p>If you encounter difficulties, try reading the <a href="https://starbeamrainbowlabs.com/labs/peppermint/__nightdocs/01-Welcome.html">documentation</a>. Still having issues? <a href="https://github.com/sbrl/Pepperminty-Wiki/issues/new">Open an issue</a> and we'll try and help you out.</p>
|
||||
<p>
|
||||
<a href="https://travis-ci.org/sbrl/Pepperminty-Wiki"><img src="https://travis-ci.org/sbrl/Pepperminty-Wiki.svg?branch=master" alt="Travis CI Build status" /></a>
|
||||
<a href="https://gitter.im/Pepperminty-Wiki/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge"><img src="https://badges.gitter.im/Pepperminty-Wiki/Lobby.svg" alt="Join the chat at https://gitter.im/Pepperminty-Wiki/Lobby" /></a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-list">
|
||||
<div class="feature vertical centre-text panel-small padding-medium">
|
||||
<p>Get a prebuilt version with all the latest features.</p>
|
||||
<p><a class="action-button" href="https://github.com/sbrl/Pepperminty-Wiki/releases/latest">Latest Release</a></p>
|
||||
</div>
|
||||
<div class="feature vertical centre-text panel-small padding-medium">
|
||||
<p>Pick and choose features to include.</p>
|
||||
<p><a class="action-button" href="https://starbeamrainbowlabs.com/labs/peppermint/download.php">Online Downloader</a></p>
|
||||
</div>
|
||||
<div class="feature vertical centre-text panel-small padding-medium">
|
||||
<p>Advanced users: Get the ultimate control over the build.</p>
|
||||
<p><a class="action-button" href="https://starbeamrainbowlabs.com/labs/peppermint/__nightdocs/05-Getting-A-Copy.html#method-25-using-the-downloader-offline">From Source</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!--
|
||||
Things to add:
|
||||
- We're open-source
|
||||
- Download section: latest release, online downloader, docs for from source
|
||||
- Demo
|
||||
- Link to docs (at the top and further down?)
|
||||
|
|
|
|||
|
|
@ -3,8 +3,10 @@
|
|||
:root {
|
||||
--bg-back: #eee8f2;
|
||||
--bg-panel: #faf8fb;
|
||||
--bg-panel-alpha: hsla(270, 19%, 98%, 0.75);
|
||||
|
||||
--text-main: #111111;
|
||||
--text-alt: hsl(0, 0%, 96%);
|
||||
--highlight: #ffa74d;
|
||||
--highlight-minor: #fb701a;
|
||||
|
||||
|
|
@ -16,10 +18,12 @@
|
|||
:root {
|
||||
--bg-back: hsl(270, 29%, 28%);
|
||||
--bg-panel: hsl(273, 15%, 16%);
|
||||
--bg-panel-alpha: hsla(270, 14%, 16%, 0.75);
|
||||
|
||||
--text-main: hsl(277, 38%, 89%);
|
||||
|
||||
--shadow: rgba(20, 20, 20, 0.5);
|
||||
/* --shadow: rgba(20, 20, 20, 0.5); */
|
||||
--shadow: rgba(5, 5, 5, 0.5);
|
||||
}
|
||||
|
||||
a { color: hsl(208, 67%, 67%); }
|
||||
|
|
@ -39,9 +43,7 @@ body {
|
|||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
h1, h2 { text-align: center; }
|
||||
|
||||
/* A small tweak to things more responsive */
|
||||
iframe, object, embed, img, table { max-width: 100%; }
|
||||
|
|
@ -103,6 +105,11 @@ button, summary { cursor: pointer; }
|
|||
.feature-tilted {
|
||||
margin: 2em;
|
||||
transform: rotateY(-10deg);
|
||||
|
||||
transition: transform 0.25s;
|
||||
}
|
||||
.feature-tilted:hover {
|
||||
transform: rotateY(0deg) scale(1.1);
|
||||
}
|
||||
|
||||
.spin-in {
|
||||
|
|
@ -121,6 +128,10 @@ button, summary { cursor: pointer; }
|
|||
border-bottom: 0.25em solid var(--highlight-minor);
|
||||
border-top: 0.25em solid var(--highlight-minor);
|
||||
}
|
||||
.panel-small {
|
||||
background: var(--bg-panel-alpha);
|
||||
box-shadow: 0 0.25em 0.5em var(--shadow);
|
||||
}
|
||||
|
||||
.lift-from-page {
|
||||
position: relative;
|
||||
|
|
@ -140,7 +151,33 @@ button, summary { cursor: pointer; }
|
|||
/* top: -0.5em;
|
||||
left: -0.5em; */
|
||||
transform: translate(-0.5em, -0.5em);
|
||||
box-shadow: var(--shadow-amount) var(--shadow-amount) var(--blur) var(--shadow);
|
||||
box-shadow: var(--shadow-amount) var(--shadow-amount) calc(var(--blur) * 2) var(--shadow);
|
||||
}
|
||||
|
||||
.action-button {
|
||||
display: inline-block;
|
||||
|
||||
padding: 0.35em 0.45em;
|
||||
border-radius: 0.25em;
|
||||
|
||||
background: var(--highlight);
|
||||
|
||||
color: var(--text-alt) !important;
|
||||
font-size: 1.25em;
|
||||
text-decoration: none;
|
||||
|
||||
box-shadow: 0 0 0.5em var(--shadow);
|
||||
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.25s, transform 0.25s;
|
||||
}
|
||||
.action-button:hover {
|
||||
box-shadow: 0 0.25em 0.65em var(--shadow);
|
||||
transform: translateY(-0.25em);
|
||||
}
|
||||
.action-button:active {
|
||||
box-shadow: 0 0 0.25em var(--shadow);
|
||||
transform: translateY(0.1em);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -170,10 +207,12 @@ button, summary { cursor: pointer; }
|
|||
.margin-wide { margin: 3em; }
|
||||
.margin-medium { margin: 2em; }
|
||||
.margin-vertical { margin: 2em 0 2em 0; }
|
||||
.margin-top { margin-top: 2em; }
|
||||
|
||||
.padding-wide { padding: 3em; }
|
||||
.padding-wide { padding: 3em; }
|
||||
.padding-wide-ntop { padding: 1em 3em 3em 3em; }
|
||||
.padding-medium { padding: 2em; }
|
||||
.padding-medium { padding: 2em; }
|
||||
.padding-horizontal { padding: 0 2em 0 2em; }
|
||||
|
||||
.list-thin { padding-left: 1em; }
|
||||
|
||||
|
|
@ -186,7 +225,7 @@ button, summary { cursor: pointer; }
|
|||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
|
||||
grid-gap: 2em;
|
||||
margin: 2em;
|
||||
margin: 4em 2em 4em 2em;
|
||||
}
|
||||
.feature {
|
||||
display: grid;
|
||||
|
|
@ -196,6 +235,9 @@ button, summary { cursor: pointer; }
|
|||
|
||||
margin: 0; /* We add the spacing with grid-gap in feature-list*/
|
||||
}
|
||||
.feature.vertical {
|
||||
grid: auto auto / auto;
|
||||
}
|
||||
.feature figcaption > strong {
|
||||
display: block;
|
||||
margin-bottom: 0.5em;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
Loading…
Reference in New Issue