webug/templates/main.html

{% extends "layout/default.html" %}

{% block extend_head %}
<style>
    body {
        font-size: 5vw;
        color: #EAEAEA;
    }

    main {
        display: grid;
        grid-template-columns: 1fr 1fr;

        gap: 5%;
        padding: 5%;
    }

    main a {
        display: grid;
        place-content: center;
        place-items: center;

        border: 2px solid #333;

        color: #919191;
        text-decoration: none;

        background-color: transparent;

        transition: .2s ease background-color, .2s ease color;
    }

    main a:hover, main a:focus {
        background-color: #000;
        color: #EAEAEA;
    }

    main a:active {
        background-color: #333;
    }
</style>
{% endblock %}

{% block content %}
<a href="display">
    <i class="fas fa-desktop fa-2x"></i>
    <span>Open display</span>
</a>
<a href="edit">
    <i class="fas fa-edit fa-2x"></i>
    <span>Edit display</span>
</a>
{% endblock %}