index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="libdebug is a Python library to debug binary executables, your own way">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>libdebug</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            background-color: #feffef;
            font-family: 'Nunito', sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        p {
            font-size: 1.5em;
        }
        .container {
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            flex: 1;
            padding: 2em;
        }
        .logo-container {
            margin-top: 7em;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .logo {
            max-width: 15em;
            max-height: 15em;
        }
        .logo-text {
            font-weight: bold;
            font-size: 5.5em;
            color: #032f30;
        }
        .bottom-container {
            text-align: center;
            margin-bottom: 7em; /* Adjust margin as needed */
        }
        .btn-container {
            margin-bottom: 1em;
        }
        .btn img {
            width: 50px;
            height: 50px;
        }
        @media (min-aspect-ratio: 4/3) {
            .logo-container {
                flex-direction: row;
            }
            .logo-text {
                margin-top: 0;
                margin-left: 0.3em; /* Reduced margin */
            }
        }
        @media (max-aspect-ratio: 4/3) {
            .logo-container {
                flex-direction: column;
            }
            .logo-text {
                margin-left: 0;
            }
            .top-container {
                margin-top: 3em; /* Adjust margin as needed */
            }
            .bottom-container {
                margin-bottom: 3em; /* Adjust margin as needed */
            }
        }
        @media (max-width: 480px) {
            p {
                font-size: 1.2em;
            } 
            .logo-text {
                font-size: 4em;
            }
            .logo {
                max-width: 10em;
                max-height: 10em;
            }
            .btn img {
                width: 40px;
                height: 40px;
            }
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="logo-container">
            <img src="images/libdebug_logo.webp" alt="libdebug logo" class="logo">
            <div class="logo-text">libdebug</div>
        </div>
    </div>

    <div class="bottom-container">
        <div class="btn-container">
            <a href="https://github.com/libdebug/libdebug" class="btn">
                <img src="images/github-mark.webp" alt="GitHub Repository">
            </a>
            <a href="https://docs.libdebug.org" class="btn">
                <img src="images/docs-logo-dark.webp" alt="libdebug Documentation">
            </a>
            <a href="https://pypi.org/project/libdebug/" class="btn">
                <img src="images/pypi.webp" alt="PyPI Website">
            </a>
        </div>

        <p>
            A Python library to debug binary executables, your own way.
        </p>
    </div>
</body>
</html>