sproc 0.5.6

Simple service management
Documentation
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta
            http-equiv="content-security-policy"
            content="default-src 'self' blob:; img-src * data:; media-src *; font-src *; style-src 'unsafe-inline' 'self' blob: *; script-src 'self' 'unsafe-inline' blob: *; object-src 'self' blob: *; upgrade-insecure-requests; connect-src *; frame-src 'self' blob: data: *"
        />

        <title>{% block title %}{{ title }}{% endblock %}</title>
        {% block head %}{% endblock %}

        <style>
            * {
                box-sizing: border-box;
                padding: 0;
                margin: 0;
            }

            html,
            body {
                line-height: 1.5;
            }

            main {
                margin: auto;
                width: 100%;
                max-width: 100%;
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
            }

            @media (min-width: 768px) {
                main {
                    width: 80ch;
                    padding-left: 0.5rem;
                    padding-right: 0.5rem;
                }
            }

            ol,
            ul,
            menu {
                list-style: inside;
                margin: 0 0 1rem 0;
                padding: 0 0 0 40px;
            }

            hr {
                margin-top: 1rem;
                margin-bottom: 1rem;
            }

            p,
            pre,
            table,
            ul,
            ol {
                margin-bottom: 1rem;
            }

            .footernav {
                display: flex;
                gap: 0.75rem;
            }

            .footernav .item {
                position: relative;
                margin-left: 0.5rem;
            }

            .footernav .item:first-child {
                margin-left: 0;
            }

            .footernav .item::before {
                content: "ยท";
                position: absolute;
                left: -0.75rem;
            }

            .footernav .item:first-child:before {
                display: none;
            }

            pre {
                padding: 0.5rem;
                border: solid 1px gray;
                overflow: auto;
                max-width: 100%;
                background: white;
            }

            p,
            li,
            span,
            code {
                max-width: 100%;
                overflow-wrap: normal;
                text-wrap: pretty;
                word-wrap: break-word;
            }

            textarea {
                width: 100%;
                resize: vertical;
                min-height: 10rem;
                font-family: monospace;
            }

            form,
            fieldset {
                display: flex;
                flex-direction: column;
                gap: 0.2rem;
                padding: 0.2rem;
            }

            fieldset .row {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
            }

            fieldset:hover {
                background: rgba(0, 0, 0, 0.1);
            }

            legend,
            label {
                font-weight: bold;
            }

            form button {
                width: max-content;
            }

            button {
                height: max-content;
            }

            button:disabled {
                cursor: not-allowed;
                opacity: 75%;
            }
        </style>
    </head>

    <body>
        <main>
            <h1>{{ config.name }}</h1>
            <p>{{ config.description }}</p>
            <hr />

            {% block content %}{% endblock %}

            <hr />
            <div class="footernav">
                <div class="item">
                    <a href="?">๐ŸŒ Home</a>
                </div>

                <div class="item">
                    <a href="https://github.com/hkauso/sproc">๐Ÿ“– View Source</a>
                </div>

                <div class="item">
                    <a href="https://docs.rs/sproc">๐Ÿ“– Documentation</a>
                </div>
            </div>
        </main>
    </body>
</html>