docs website: Add bigbutton

This commit is contained in:
Starbeamrainbowlabs 2021-06-07 01:28:11 +01:00
parent 66234cdeae
commit 85e5eb3971
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
2 changed files with 39 additions and 3 deletions

View file

@ -23,6 +23,8 @@
--text-bright: #efefef;
--text-alt: #38871e;
--shadow: hsla(0, 0%, 25%, 0.25);
--highlight: hsl(353, 100%, 36%);
}
@ -121,7 +123,7 @@ a { font-weight: bold; }
/* a:not(.nav) { color: hsl(208, 67%, 40%); }
a:not(.nav):hover { color: hsl(214, 67%, 50%); }
a:not(.nav):active, a:focus { color: hsl(214, 87%, 60%); } */
a:not(.nav):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, code {
@ -208,7 +210,6 @@ footer {
font-size: 3em;
color: var(--text-alt);
}
.bigbox :last-child { margin-bottom: 7em; }
.features-large {
margin: 3em 0;
@ -230,3 +231,37 @@ footer {
.cssbox-gallery {
display: flex;
}
.bigbutton {
display: inline-block;
margin: 0;
padding: 0.35em 0.45em;
border: 0;
border-radius: 0.25em;
background: var(--bg-alt);
color: var(--text-bright);
font-size: 1.25em;
text-decoration: none;
text-align: center;
box-shadow: 0 0 0.5em var(--shadow);
cursor: pointer;
transition: box-shadow 0.25s, transform 0.25s;
}
.bigbutton:hover {
box-shadow: 0 0.25em 0.65em var(--shadow);
transform: translateY(-0.25em);
}
.bigbutton:active {
box-shadow: 0 0 0.25em var(--shadow);
transform: translateY(0.1em);
}
.bigbutton.disabled {
filter: saturate(25%);
opacity: 0.75;
cursor: default;
}

View file

@ -9,6 +9,7 @@ date: 2000-01-01
<h1>WorldEditAdditions</h1>
<p><em>Extra tools and commands to extend <a href="https://github.com/Uberi/Minetest-WorldEdit">WorldEdit</a> for <a href="https://www.minetest.net/">Minetest</a></em></p>
<p>If you can dream of it, it probably belongs here!</p>
<p><a href="#get-started" class="bigbutton">Get Started</a></p>
</section>
<section class="features-large">
@ -49,7 +50,7 @@ date: 2000-01-01
</section>
<!-- Potentially we might want some inspiration from https://codepen.io/emared/pen/gWGBLR here -->
<section class="cssbox-gallery">
<section class="cssbox">
{% cssbox "images/gallery-a.jpeg" %}
A scene demonstrating <code>//replacemix</code>, <code>//ellipsoid</code>, <code>//layers</code>, <code>smoothadv</code> (aka <code>convolve</code> and <code>conv</code>), and <code>//floodfill</code> - all of which are provided by WorldEditAdditions.
{% endcssbox %}