shiori/docs/Screenshots.md

Desktop
---

<table style="width:100%">
    <tr align="center">
        <td colspan="2">
            <b>Login screen</b>
        </td>
    </tr>
    <tr valign="top" align="center">
        <td width="50%">
            <a href="./screenshots/01-login.png">
                <img src="./screenshots/01-login.png">
            </a>
        </td>
        <td width="50%">
            <a href="./screenshots/05-dark-login.png">
                <img src="./screenshots/05-dark-login.png">
            </a>
        </td>
    </tr>
    <tr align="center">
        <td colspan="2">
            <b>Grid mode</b>
        </td>
    </tr>
    <tr valign="top" align="center">
        <td width="50%">
            <a href="./screenshots/02-home.png">
                <img src="./screenshots/02-home.png">
            </a>
        </td>
        <td width="50%">
            <a href="./screenshots/06-dark-home.png">
                <img src="./screenshots/06-dark-home.png">
            </a>
        </td>
    </tr>
    <tr align="center">
        <td colspan="2">
            <b>List mode</b>
        </td>
    </tr>
    <tr valign="top" align="center">
        <td width="50%">
            <a href="./screenshots/03-home-list.png">
                <img src="./screenshots/03-home-list.png">
            </a>
        </td>
        <td width="50%">
            <a href="./screenshots/07-dark-home-list.png">
                <img src="./screenshots/07-dark-home-list.png">
            </a>
        </td>
    </tr>
    <tr align="center">
        <td colspan="2">
            <b>Options page</b>
        </td>
    </tr>
    <tr valign="top" align="center">
        <td width="50%">
            <a href="./screenshots/04-options.png">
                <img src="./screenshots/04-options.png">
            </a>
        </td>
        <td width="50%">
            <a href="./screenshots/08-dark-options.png">
                <img src="./screenshots/08-dark-options.png">
            </a>
        </td>
    </tr>
</table>

Mobile
------

<table style="width:100%">
    <tr align="center">
        <td colspan="2">
            <b>Login screen</b>
        </td>
        <td colspan="2">
            <b>Grid mode</b>
        </td>
    </tr>
    <tr valign="top" align="center">
        <td width="25%">
            <a href="./screenshots/09-mobile-login.png">
                <img src="./screenshots/09-mobile-login.png">
            </a>
        </td>
        <td width="25%">
            <a href="./screenshots/13-mobile-dark-login.png">
                <img src="./screenshots/13-mobile-dark-login.png">
            </a>
        </td>
        <td width="25%">
            <a href="./screenshots/10-mobile-home.png">
                <img src="./screenshots/10-mobile-home.png">
            </a>
        </td>
        <td width="25%">
            <a href="./screenshots/14-mobile-dark-home.png">
                <img src="./screenshots/14-mobile-dark-home.png">
            </a>
        </td>
    </tr>
    <tr align="center">
        <td colspan="2">
            <b>List mode</b>
        </td>
        <td colspan="2">
            <b>Options page</b>
        </td>
    </tr>
    <tr valign="top" align="center">
        <td width="25%">
            <a href="./screenshots/11-mobile-home-list.png">
                <img src="./screenshots/11-mobile-home-list.png">
            </a>
        </td>
        <td width="25%">
            <a href="./screenshots/15-mobile-dark-home-list.png">
                <img src="./screenshots/15-mobile-dark-home-list.png">
            </a>
        </td>
        <td width="25%">
            <a href="./screenshots/12-mobile-options.png">
                <img src="./screenshots/12-mobile-options.png">
            </a>
        </td>
        <td width="25%">
            <a href="./screenshots/16-mobile-dark-options.png">
                <img src="./screenshots/16-mobile-dark-options.png">
            </a>
        </td>
    </tr>
</table>