Whakerexa Code

A minimalist and lightweight web kit for accessible contents

Brought to you by: brigittebigi
[575efe]: / docs / index.html Maximize Restore History
270 lines (231 with data), 8.6 kB

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="keywords" content="framework, html, css, javascript" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <title>Whakerexa</title>
    <link rel="stylesheet" href="../wexa_statics/css/wexa.css" type="text/css" />
    <link rel="stylesheet" href="../wexa_statics/css/dialog.css" type="text/css" />
    <link rel="stylesheet" href="../wexa_statics/css/layout.css" type="text/css" />
    <link rel="stylesheet" href="../wexa_statics/css/menu.css" type="text/css" />

    <script type="module" src="../wexa_statics/js/wexa.js"></script>

    <style>
        :root:not([data-theme=dark]), [data-theme=light] {
            --nav-bg-color: rgba(255, 255, 255, 0.8);
            --nav-fg-color: rgb(10, 15, 25);
            --nav-min-height: 3rem;
            --nav-item-min-height: 2.5rem;
            --nav-item-height: 2.5rem;
            --nav-item-max-height: 2.5rem;
            --header-height: 26rem;
            --header-bg-color: linear-gradient(90deg, rgb(97,33,140) 0%, rgb(11,4,97) 50%, rgb(28,133,136) 100%);
        }
        /* Light mode: subtle blue-violet gradient */
        :root:not([data-theme=dark]), [data-theme=light] {
            --card-bg-color: linear-gradient(
                    145deg,
                    rgba(215,245,225,0.9) 0%,
                    rgba(225,235,230,0.9) 50%,
                    rgba(255,255,235,0.9) 100%
            );
        }

        /* Dark mode: violet-magenta gradient matching the header */
        .dark {
            --card-bg-color: linear-gradient(
                    145deg,
                    rgba(100,30,50,0.85) 0%,
                    rgba(140,70,120,0.85) 40%,
                    rgba(160,90,190,0.85) 100%
            );
        }

        nav {
            justify-content: center;
        }
        header {
            border-radius: 1rem;
        }

        [role='menuitem'] {
            background: rgb(255, 255, 255);
            border-radius: 0.5rem;
            transition: background 0.25s ease, transform 0.15s ease, color 0.25s ease;
            box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.15);
        }

        .card main {
            background: var(--card-bg-color);
        }

        .card main * {
            background: transparent;
        }

        /* Card footer link styling */
        .card footer a {
            display: inline-block;
            padding: 0.3rem 1rem;
            border-radius: 0.5rem;
            font-weight: 600;
            text-decoration: underline;
            text-underline-offset: 0.2rem;
            transition: color 0.25s ease, transform 0.15s ease;
            background: none;
            border: none;
        }

        .card footer a:hover {
            transform: translateY(-2px);
        }

    </style>
</head>

<body>

<header id="header-content">
    <a role="button" class="skip" href="#main-content" aria-label="skip to main content">
        Skip to main content
    </a>
    <nav class="nav-wexa top">
        <ul>
            <li><a class="external-link" role="menuitem"
                   href="https://sourceforge.net/projects/whakerexa/">Whakerexa</a></li>
        </ul>
        <button id="btn-contrast" class="accessibility" role="menuitem"
                aria-pressed="false" onclick="AccessibilityManager.switch_contrast_scheme()"></button>
        <button id="btn-theme" class="accessibility" role="menuitem"
                aria-pressed="false" onclick="AccessibilityManager.switch_color_scheme()"></button>
    </nav>
    <h1>Whakerexa</h1>
    <h2>Build accessible, elegant web pages with one lightweight toolkit</h2>
    <p class="center" style="margin-top:1rem;">
        <img src="../wexa_statics/logos/whakerexa.png" alt="Whakerexa logo" style="height:5rem;">
    </p>

</header>

<main id="main-content" class="panel">

    <h1> Overview </h1>

    <p>
        Whakerexa offers CSS frameworks and JavaScript for any HTML content.
        It is intended to be as simple as possible to make <b>accessible web content</b>,
        and to minimize the use of CSS classes for enhancing the readability of HTML code.
    </p>
    <p>
        It was designed to be easily customizable, allowing users to adjust properties such as fonts,
        colors, borders, etc., effortlessly. Most of the properties are stored into variables
        which makes possible to re-define them, then to obtain a custom different style,
        enabling users to achieve a unique style easily.
    </p>
    <p>
        It can be combined with the use of `WhakerPy`, an open source library to create dynamic HTML content;
        it's a light web application framework.
    </p>

    <h2>Get it</h2>

    <p>Download Whakerexa:
        <a href="https://sourceforge.net/projects/whakerexa/">https://sourceforge.net/projects/whakerexa/</a>
    </p>

    <h1>Whakerexa in action</h1>

    <section style="text-align:center;margin-bottom:2rem;">
        <p>Explore the components below to see Whakerexa in action.</p>
        <p><strong>Click a card</strong> to open the live example.</p>
    </section>

    <section class="cards-panel">

        <article class="card">
            <main>
                <h2>wexa.css</h2>
                <p>A CSS framework to make the web easy and accessible</p>
            </main>
            <footer>
                <a href="wexa.html">wexa</a>
            </footer>
        </article>

        <article class="card">
            <main>
                <h2>menu.css</h2>
                <p>A CSS framework to make accessible and modern menus</p>
            </main>
            <footer>
                <a href="menu.html">menu</a>
            </footer>
        </article>

        <article class="card">
            <main>
                <h2>wexa.css & book.css</h2>
                <p>Two CSS frameworks to make books easy and accessible</p>
            </main>
            <footer>
                <a href="book.html">book</a>
            </footer>
        </article>

        <article class="card">
            <main>
                <h2>book with ToC</h2>
                <p>A CSS/JS framework to create automatically the ToC of a book</p>
            </main>
            <footer>
                <a href="autotoc.html">auto toc</a>
            </footer>
        </article>

        <article class="card">
            <main>
                <h2>layout.css</h2>
                <p>A minimalistic CSS framework to organize HTML elements</p>
            </main>
            <footer>
                <a href="layout.html">layout</a>
            </footer>
        </article>

        <article class="card">
            <main>
                <h2>dialog css/js</h2>
                <p>A framework to easily open a modal 'dialog'</p>
            </main>
            <footer>
                <a href="dialog.html">dialog</a>
            </footer>
        </article>

        <article class="card">
            <main>
                <h2>code.css</h2>
                <p>Custom colors for pygments code</p>
            </main>
            <footer>
                <a href="code.html">code</a>
            </footer>
        </article>

        <article class="card">
            <main>
                <h2>progress.js</h2>
                <p>A JS to deal with progress bars</p>
            </main>
            <footer>
                <a href="progress.html">progress</a>
            </footer>
        </article>

        <article class="card">
            <main>
                <h2>sortatable css/js</h2>
                <p>Sort rows of a table by clicking its columns</p>
            </main>
            <footer>
                <a href="sortatable.html">sortatable</a>
            </footer>
        </article>

        <article class="card">
            <main>
                <h2>button.css</h2>
                <p>Customized buttons</p>
            </main>
            <footer>
                <a href="button.html">button</a>
            </footer>
        </article>
    </section>

</main>


<footer id="footer-content">

    <section>
        <p class="center">This site respects your privacy.</p>
        <p class="center">We do not collect any information and do not use cookies.</p>
        <p class="copyright">
        Copyright @ 2023-2025 <a href="https://sppas.org/bigi/" class="external-link">Brigitte Bigi</a>,
            CNRS - Laboratoire Parole et Langage, Aix-en-Provence, France
        </p>
    </section>

</footer>

<script>
</script>

</body>
</html>
Whakerexa Code

A minimalist and lightweight web kit for accessible contents

Branches

Tags

[575efe]: / docs / index.html Maximize Restore History

270 lines (231 with data), 8.6 kB
