docs: Add next (final?) section of website

Next up: fine tuning
This commit is contained in:
Starbeamrainbowlabs 2021-06-13 23:34:38 +01:00
parent dcc66f2bd0
commit 4fff388656
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
2 changed files with 54 additions and 16 deletions

View file

@ -14,16 +14,20 @@
:root { :root {
--bg-main: #8ABEF6; --bg-main: #8ABEF6;
--bg-bright: #38871e; /* --bg-bright: #57b43f; */
--bg-bright: #7ac767;
--bg-alt: #3F57B4; --bg-alt: #3F57B4;
--bg-transcluscent-slight: rgba(255, 255, 255, 0.1); --bg-transcluscent-slight: rgba(255, 255, 255, 0.1);
--bg-transcluscent: rgba(255, 255, 255, 0.8); --bg-transcluscent: rgba(255, 255, 255, 0.85);
--bg-transcluscent-alt: hsla(226, 59%, 38%, 0.8);
--text-main: #3F57B4; /* --text-main: #3F57B4; */
--text-main: hsl(227, 70%, 35%);
--text-bright: #efefef; --text-bright: #efefef;
--text-alt: #38871e; --text-alt: #38871e;
--shadow: hsla(0, 0%, 25%, 0.25); --shadow: hsla(0, 0%, 25%, 0.25);
--shadow-dark: hsla(0, 0%, 25%, 0.5);
--highlight: hsl(353, 100%, 36%); --highlight: hsl(353, 100%, 36%);
} }
@ -66,6 +70,9 @@ title { string-set: page-title content(text); }
opacity: 0.6; opacity: 0.6;
} }
} }
h1, h2, h3, h4, h5, h6 {
text-align: center;
}
nav { nav {
background: var(--bg-bright); background: var(--bg-bright);
@ -96,7 +103,7 @@ nav a {
padding: 1.2em 3em; padding: 1.2em 3em;
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
color: var(--text-bright); color: var(--text-main);
} }
@ -125,8 +132,19 @@ a:not(.nav):hover { color: hsl(214, 67%, 50%); }
a:not(.nav):active, a:focus { color: hsl(214, 87%, 60%); } */ a:not(.nav):active, a:focus { color: hsl(214, 87%, 60%); } */
a:not(.nav):not(.bigbutton):visited { color: hsl(240, 77%, 60%); } a:not(.nav):not(.bigbutton):visited { color: hsl(240, 77%, 60%); }
pre { page-break-inside: avoid; break-inside: avoid; } pre {
page-break-inside: avoid;
break-inside: avoid;
padding: 0.5em 0.6em;
border: 0.2em solid var(--bg-transcluscent-alt);
background: var(--bg-transcluscent-alt);
box-shadow: inset 0 0 0.5em 0.1em var(--shadow-dark);
line-height: 1.75em;
color: var(--text-bright);
}
pre, code { pre, code {
text-align: left;
font-size: 1rem;
white-space: pre-wrap; white-space: pre-wrap;
-moz-tab-size: 4; -moz-tab-size: 4;
tab-size: 4; tab-size: 4;
@ -149,7 +167,7 @@ footer {
padding: 1em; padding: 1em;
text-align: center; text-align: center;
background: var(--bg-bright); background: var(--bg-bright);
color: var(--text-bright); /* color: var(--text-bright); */
} }
@ -218,15 +236,27 @@ footer {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-evenly; justify-content: space-evenly;
} }
.features-large figure { .features-large > :where(figure, .features-item) {
background: var(--bg-transcluscent); background: var(--bg-transcluscent);
margin: 0.1em; margin: 0.1em;
padding: 1em; padding: 1em;
max-width: 15em; max-width: 15em;
} }
/* .features-large figure img { .features-item.wide {
max-width: 12em; flex: 1;
} */ max-width: initial;
margin: 0.1em 2em;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.features-item.wide > :last-child {
flex: 1;
display: flex;
justify-content: flex-end;
flex-direction: column;
align-items: center;
}
.cssbox-gallery { .cssbox-gallery {
display: flex; display: flex;

View file

@ -72,14 +72,22 @@ date: 2000-01-01
<section> <section>
<h2>Download</h2> <h2>Download</h2>
<div class="features-large"> <div class="features-large">
<div> <div class="features-item wide text-centre">
<h3>ContentDB</h3> <h3>ContentDB</h3>
</div>
<div>
<h3>Git</h3>
</div>
<div>
<p>Download from ContentDB, or from the <em>Content</em> tab in Minetest.</p>
<p><a class="bigbutton" href="https://content.minetest.net/packages/Starbeamrainbowlabs/worldeditadditions/">WorldEditAdditions on ContentDB</a></p>
</div>
<div class="features-item wide text-centre">
<h3>Git</h3>
<p>Clone using Git:</p>
<pre><code>cd path/to/worldmods;
git clone https://github.com/sbrl/Minetest-WorldEditAdditions.git;</code></pre>
<p><a class="bigbutton" href="https://github.com/sbrl/Minetest-WorldEditAdditions">Source code on GitHub</a></p>
</div> </div>
</div> </div>
</section> </section>