The design system that powers the latest redesign of the Mojavesoft website (July 2026-present), modified to work for any website.
  • CSS 65%
  • HTML 35%
Find a file
Repository files (latest commit first)
Filename Latest commit message Latest commit date
2026-08-08 13:23:49 -04:00
common Add shell theme 2026-08-07 18:22:32 -04:00
example Add shell example 2026-08-07 18:22:03 -04:00
LICENSE-CC0.txt Create LICENSE-CC0.txt 2026-08-07 15:52:20 -04:00
README.md Rebrand to Sandstone, licensing info changes 2026-08-08 13:23:49 -04:00

sandstone

Sandstone is a design system that's used for the latest redesign of the Mojavesoft website (July 2026-present).

Installation

In order to install Sandstone for your website, download the source code from the Releases tab and adapt your pages to use the styling and layout found under example/ (see section below for more info on examples).

Theming

Sandstone includes a few different default themes:

  • Lapis Lazuli (common/css/lapis.css) has white text, orange links, and a blue-colored stone background, resembling Minecraft's Lapis Lazuli blocks
  • Amethyst (common/css/amethyst.css) has white text, orange links, and a purple-colored stone background, resembling Minecraft's Amethyst blocks
  • Nether (common/css/nether.css) has white text, orange links, and a brick-red stone background, resembling something from Minecraft's Nether dimension
  • White Fur (common/css/fur.css) has black text, normal links, and a white background derived from an image of cat fur
  • Shell (common/css/shell.css) has white text, deep orange links, and a background derived from an image of a turtle shell

Writing custom themes

Tip

When creating a custom theme that uses a texture, consider using an image processing program to make the texture tile seamlessly.

In GIMP 3.x, this can be accomplished using the Filter > Map > Tile Seamless... tool.

You can create a custom theme by writing a CSS stylesheet in this format:

/* mytheme.css - Stylesheet for the MyTheme theme. */
:root {
    --background-theme-color: white; /* This is the color used as a fallback whenever an image is not available or is currently loading; make sure that it contrasts well with your other theme colors! */
    --background-theme-texture: url("mytexture.jpg"); /* Change this to match your texture image path, or omit it to fall back to the background theme color. */
    --background-theme-tilesize: 200px; /* This determines the tile size of the texture, if used. */
    --theme-link-color: sandybrown; /* The color of links. Omit to use the default color scheme. */
    --theme-text-color: white; /* The color of text. Omit to use the default color scheme. */
}

Applying themes

In order to apply a theme, put this boilerplate code into your HTML document's <head>, substituting common/css/mytheme.css for the path to the theme's CSS file:

<link rel="stylesheet" href="common/css/mytheme.css"> <!-- When using subpages, make these paths absolute with /common/... or relative with ../common/... as needed -->
<link rel="stylesheet" href="common/css/style.css"> <!-- If you don't load style.css, then theming won't be applied. -->

Theme demos

See example/ for some theme examples:

  • example/lapis.html is an example of the Lapis Lazuli theme (live demo)
  • example/amethyst.html is an example of the Amethyst theme (live demo)
  • example/nether.html is an example of the Nether theme (live demo)
  • example/fur.html is an example of the White Fur theme (live demo)
  • example/shell.html is an example of the Shell theme (live demo)

Licensing

Images

All of the images included in the Sandstone repository are provided under the CC0 license; see LICENSE-CC0.txt for more information.

CSS stylesheets & Markdown documentation

The CSS stylesheets & Markdown documentation for the Sandstone repository (this README file included) are provided under the MIT license:

MIT License

Copyright (c) 2026 Mojavesoft Group

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

This license notice is included in the CSS files in the form of comment blocks, so unless you strip the comments, you shouldn't need to do anything special to achieve licensing compliance. (I am not a lawyer and this is not legal advice.)

Examples

The examples for Sandstone (found under example/) are made available under the 0BSD license:

BSD Zero Clause License

Copyright (c) 2026 Mojavesoft Group

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.

Note that these examples rely upon non-0BSD resources to work properly.