sbrl/pepperminty-wiki-website
sbrl/pepperminty-wiki-website
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add quick links sections

Browse source
This commit is contained in:
Starbeamrainbowlabs 2020-05-09 19:34:03 +01:00
parent fb58beb350
commit abbf42f5af
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
2 changed files with 27 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/index.html
View file

@ -25,10 +25,23 @@ title: Pepperminty Wiki
</div>
</div>
<section class="panel-small margin-top padding-medium">
<h2 id="quick-links">Quick Links</h2>
<div class="display-items">
<a class="action-button margin-narrow major" href="#features">Features</a>
<a class="action-button margin-narrow major" href="#screenshots">Screenshots</a>
<a class="action-button margin-narrow major" href="#download">Download</a>
</div>
<div class="display-items">
<a class="action-button margin-narrow major" href="https://starbeamrainbowlabs.com/labs/peppermint/__nightdocs/01-Welcome.html">Documentation</a>
<a class="action-button margin-narrow major" href="https://github.com/sbrl/Pepperminty-Wiki">Repository</a>
<a class="action-button margin-narrow major" href="https://starbeamrainbowlabs.com/labs/peppermint/build/">Read-Only Demo</a>
</div>
</section>
<!-- Feature list -->
<h2 class="margin-top">Features</h2>
<h2 class="margin-top" id="features">Features</h2>
<div class="feature-list">
<figure class="feature">
@ -113,7 +126,7 @@ title: Pepperminty Wiki
<!-- Screenshots -->
<h2 class="margin-top">Screenshots</h2>
<h2 class="margin-top" id="screenshots">Screenshots</h2>
<div class="double lean-left">
<img class="left margin-medium lift-from-page" src="static/images/page-dark.png" alt="Screenshot showing the dark theme and the menu off" />
@ -121,6 +134,7 @@ title: Pepperminty Wiki
</div> -->
<div class="right centre padding-wide">
<p>A dark-theme comes built-in. By using the new <a href="https://caniuse.com/#feat=prefers-color-scheme"><code>prefers-color-scheme</code></a> CSS feature, it's enabled automatically based on your browser preference.</p>
<p>Pepperminty Wiki is accessible for users of assistive technologies too. It should be pretty great already, but any accessibility issues should be reported by <a href="https://github.com/sbrl/Pepperminty-Wiki/issues/new">opening an issue</a>.</p>
</div>
</div>
@ -152,7 +166,7 @@ title: Pepperminty Wiki
<!-- Download -->
<div class="feature-small">
<h2 class="margin-top">Download</h2>
<h2 class="margin-top" id="download">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>
@ -182,13 +196,7 @@ title: Pepperminty Wiki
<!--
Things to add:
- Download section: latest release, online downloader, docs for from source
- Demo
- Link to docs (at the top and further down?)
- Link to repo
- Latest version badges (probably near the top)
- Screenshots (don't forget to demo the dark mode too)
- A mention that we (should) be fully accessible - open an issue if there's something that could be improved
-->
<footer class="panel padding-wide-ntop">

13
src/static/css/main.css
View file

@ -35,6 +35,7 @@
html, body {
margin: 0; padding: 0;
font-size: 100%;
scroll-behavior: smooth;
}
body {
background: var(--bg-back);
@ -209,6 +210,7 @@ button, summary { cursor: pointer; }
.margin-medium { margin: 2em; }
.margin-vertical { margin: 2em 0 2em 0; }
.margin-top { margin-top: 2em; }
.margin-narrow { margin: 1em; }
.padding-wide { padding: 3em; }
.padding-wide-ntop { padding: 1em 3em 3em 3em; }
@ -228,13 +230,12 @@ button, summary { cursor: pointer; }
grid-gap: 2em;
margin: 4em 2em 4em 2em;
}
.feature {
.feature { margin: 0; /* We add the spacing with grid-gap in feature-list*/ }
.feature:not(.mini) {
display: grid;
grid: auto / 1fr 3fr;
grid-gap: 0.5em;
align-items: center;
margin: 0; /* We add the spacing with grid-gap in feature-list*/
}
.feature.vertical {
grid: auto auto / auto;
@ -243,5 +244,11 @@ button, summary { cursor: pointer; }
display: block;
margin-bottom: 0.5em;
}
.display-items {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
/* .feature img { float: left; } */
/* .feature figcaption { flex: 1; } */