Start having some sort of visual style

static/css/style.css

@@ -18,6 +18,7 @@ dl,
 dd,
 menu {
     margin: 0;
+    padding: 0;
 }
 
 ul[role='list'],
@@ -42,8 +43,7 @@ a:not([class]) {
 
 img,
 picture {
-    max-width: 100%;
+    display: inline-block;
-    display: block;
 }
 
 input,
@@ -53,6 +53,11 @@ select {
     font: inherit;
 }
 
+a {
+    color: inherit;
+    text-decoration: none;
+}
+
 @media (prefers-reduced-motion: reduce) {
     html:focus-within {
         scroll-behavior: auto;
@@ -71,135 +76,182 @@ select {
 /* Base template styling */
 
 :root {
+    --color-bg-main: #26323c;
+    --color-bg-menu: #2e3e4c;
+    --color-bg-box: #1a2631;
+    --color-highlight: #449c8c;
+
+    --color-text-duller: #5f6983;
+    --color-text-dull: #99a;
+    --color-text-main: #fff;
+
     --color-input-border: #000;
     --color-input-border-active: #444b5d;
     --color-button-main: #444b5d;
     --color-button-main-hover: #515d7c;
-    --color-bg1: #191b22;
-    --color-bg2: #282c37;
     --color-bg3: #444b5d;
-    --color-text-duller: #5f6983;
-    --color-text-dull: #99a;
     --color-text-error: rgb(155, 111, 111);
-    --color-text-main: #DDDDDD;
 }
 
 body {
-    background-color: var(--color-bg1);
+    background-color: var(--color-bg-main);
-    color: white;
+    color: var(--color-text-main);
+    font-family: "Raleway", sans-serif;
+}
+
+main {
+    width: 850px;
+    margin: 20px auto;
+    box-shadow: 0 0 50px rgba(0, 0, 0, 0.6);
+    border-radius: 5px;
 }
 
 header {
-    width: 750px;
-    margin: 0 auto;
     display: flex;
-    padding: 0 0 20px 0;
 }
 
-header h1 {
+header .logo {
     font-family: "Raleway";
-    font-weight: normal;
+    font-weight: bold;
-    background: var(--color-fg2);
+    background: var(--color-highlight);
-    padding: 10px 7px 7px 0;
+    border-radius: 5px 0 0 0;
+    padding: 10px 11px 9px 10px;
+    height: 50px;
     font-size: 130%;
-    height: 2.2em;
+    color: var(--color-text-main);
-    color: var(--color-fg1);
+    border-bottom: 3px solid rgba(0, 0, 0, 0);
 }
 
-header h1 img {
+header .logo:hover {
+    border-bottom: 3px solid rgba(255, 255, 255, 0.2);
+}
+
+header .logo img {
     display: inline;
     vertical-align: top;
     margin: 0 3px 0 0;
 }
 
-header a {
-    color: inherit;
-    text-decoration: none;
-}
-
 header menu {
     flex-grow: 1;
     display: flex;
     list-style-type: none;
-    justify-content: flex-end;
+    justify-content: flex-start;
 }
 
-header menu li {
+header menu a {
-    padding: 10px 10px 7px 10px;
+    padding: 10px 20px 4px 20px;
     color: #eee;
-    line-height: 32px;
+    line-height: 30px;
+    border-bottom: 3px solid rgba(0, 0, 0, 0);
+    border-right: 1px solid var(--color-bg-menu);
 }
 
-main {
+header menu a:hover {
-    width: 750px;
+    border-bottom: 3px solid var(--color-highlight);
-    margin: 20px auto;
 }
 
-/* "Modal" boxes */
+header menu .gap {
-
+    flex-grow: 1;
-.modal {
-    background: var(--color-bg2);
-    max-width: 500px;
-    margin: 0 auto;
-    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
-    border-radius: 5px;
 }
 
-.modal h1 {
+header menu a.identity {
-    color: var(--color-fg1);
+    border-right: 0;
-    background: var(--color-bg3);
+    text-align: right;
-    font-family: "Raleway";
+    padding-right: 10px;
-    position: relative;
-    padding: 5px 8px 4px 10px;
-    font-size: 100%;
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-    border-radius: 5px 5px 0 0;
 }
 
-.modal .option {
+header menu a i {
-    display: block;
+    margin-right: 10px;
-    padding: 15px 20px;
-    color: var(--color-text-main);
-    text-decoration: none;
-    border-left: 3px solid transparent;
-    line-height: 32px;
 }
 
-.modal .option img {
+header menu a img {
-    display: inline;
-    vertical-align: middle;
-    margin: 0 10px 3px 0;
-}
-
-.modal .option i {
     display: inline-block;
     vertical-align: middle;
-    width: 32px;
+    margin: 0 0 2px 8px;
-    height: 32px;
+    height: 30px;
-    text-align: center;
+    width: auto;
-    line-height: 32px;
+}
-    font-size: 150%;
+
+header menu a small {
+    color: var(--color-text-dull);
+    font-size: 70%;
+}
+
+nav {
+    display: flex;
+    height: 40px;
+    background: var(--color-bg-menu);
+}
+
+nav a {
+    display: block;
+    color: var(--color-text-dull);
+    text-transform: uppercase;
+    font-weight: bold;
+    padding: 9px 18px 9px 18px;
+}
+
+nav a.selected {
+    color: var(--color-text-main);
+    border-bottom: 3px solid var(--color-highlight);
+}
+
+nav a:hover {
+    color: var(--color-text-main);
+}
+
+.icon-menu {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 30px 0 0 30px;
+}
+
+.icon-menu>a {
+    margin: 0px 40px 40px 0;
+    background: var(--color-bg-box);
+    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
+    width: 370px;
+    height: 100px;
+    line-height: 100px;
+    color: inherit;
+    text-decoration: none;
+    padding: 0 20px;
+    border: 2px solid rgba(255, 255, 255, 0);
+    border-radius: 3px;
+}
+
+.icon-menu>a:hover {
+    border: 2px solid var(--color-highlight);
+}
+
+.icon-menu>a img,
+.icon-menu>a i {
+    vertical-align: middle;
     margin: 0 10px 3px 0;
+    height: 50px;
+    width: auto;
 }
 
-.modal a.option:hover {
+.icon-menu>a i {
-    border-left: 3px solid var(--color-text-dull);
+    display: inline-block;
-}
-
-.modal .option.empty {
     text-align: center;
+    width: 50px;
+    line-height: 50px;
+    font-size: 200%;
+}
+
+.handle {
+    vertical-align: middle;
+    display: inline-block;
+    line-height: normal;
+}
+
+.handle small {
+    display: block;
     color: var(--color-text-dull);
 }
 
-.modal .option small {
-    margin: 0 0 0 5px;
-    color: var(--color-text-dull);
-}
-
-.modal form {
-    padding: 10px 10px 1px 10px;
-}
 
 /* Forms */
 
@@ -233,7 +285,7 @@ form input,
 form select {
     width: 100%;
     padding: 4px 6px;
-    background: var(--color-bg1);
+    background: var(--color-bg-main);
     border: 1px solid var(--color-input-border);
     border-radius: 3px;
     color: var(--color-text-main);
@@ -281,7 +333,7 @@ h1.identity small {
 }
 
 .system-note {
-    background: var(--color-bg2);
+    background: var(--color-bg-menu);
     color: var(--color-text-dull);
     border-radius: 3px;
     padding: 5px 8px;

static/fonts/raleway/raleway.css

@@ -1,20 +1,20 @@
 @font-face {
     font-family: 'Raleway';
-    src: url('Raleway-Bold.woff2');
+    src: url('Raleway-SemiBold.woff2');
     font-weight: bold;
     font-style: normal;
 }
 
-@font-face {
-    font-family: 'Raleway';
-    src: url('Raleway-Regular.woff2');
-    font-weight: normal;
-    font-style: normal;
-}
-
 @font-face {
     font-family: 'Raleway';
     src: url('Raleway-Light.woff2');
     font-weight: lighter;
     font-style: normal;
 }
+
+@font-face {
+    font-family: 'Raleway';
+    src: url('Raleway-Regular.woff2');
+    font-weight: normal;
+    font-style: normal;
+}

templates/base.html

@@ -12,36 +12,34 @@
 </head>
 <body class="{% block body_class %}{% endblock %}">
 
-    <header>
+    <main>
-        <h1>
+        <header>
-            <a href="/">
+            <a class="logo" href="/">
                 <img src="{% static "img/icon-128.png" %}" width="32">
                 {{ config.site_name }}
             </a>
-        </h1>
+            <menu>
-        <menu>
-            <li>
-                <a href="#"><i class="fa-solid fa-gear"></i></a>
-            </li>
-            <li>
                 {% if user.is_authenticated %}
-                    <a href="/identity/select/">
+                    <a href="#"><i class="fa-solid fa-gear"></i> Settings</a>
+                    <div class="gap"></div>
+                    <a href="/identity/select/" class="identity">
                         {% if not request.identity %}
-                            <img src="{% static "img/unknown-icon-128.png" %}" width="32" title="No identity selected">
+                            No Identity
+                            <img src="{% static "img/unknown-icon-128.png" %}" title="No identity selected">
                         {% elif request.identity.icon_uri %}
-                            <img src="{{ request.identity.icon_uri }}" width="32" title="{{ request.identity.handle }}">
+                            {{ request.identity.username }} <small>@{{ request.identity.domain_id }}</small>
+                            <img src="{{ request.identity.icon_uri }}" title="{{ request.identity.handle }}">
                         {% else %}
-                            <img src="{% static "img/unknown-icon-128.png" %}" width="32" title="{{ request.identity.handle }}">
+                            {{ request.identity.username }} <small>@{{ request.identity.domain_id }}</small>
+                            <img src="{% static "img/unknown-icon-128.png" %}" title="{{ request.identity.handle }}">
                         {% endif %}
                     </a>
                 {% else %}
-                    <a href="/auth/login/">Login</a>
+                    <a href="/auth/login/"><i class="fa-solid fa-right-to-bracket"></i> Login</a>
                 {% endif %}
-            </li>
+            </menu>
-        </menu>
+        </header>
-    </header>
 
-    <main>
         {% block content %}
         {% endblock %}
     </main>

templates/identity/_identity_menu.html

@@ -0,0 +1,5 @@
+<nav>
+    <a href="/identity/select/" {% if identities %}class="selected"{% endif %}>Select Identity</a>
+    <a href="/identity/create/" {% if form %}class="selected"{% endif %}>Create Identity</a>
+    <a href="/auth/logout/">Logout</a>
+</nav>

templates/identity/create.html

@@ -5,6 +5,7 @@
 {% block title %}Create Identity{% endblock %}
 
 {% block content %}
+    {% include "identity/_identity_menu.html" %}
     <section class="modal identities">
         <h1>Create Identity</h1>
         {% crispy form form.helper %}

templates/identity/select.html

@@ -4,17 +4,19 @@
 {% block title %}Select Identity{% endblock %}
 
 {% block content %}
-    <section class="modal identities">
+    {% include "identity/_identity_menu.html" %}
-        <h1>Select Identity</h1>
+    <section class="icon-menu">
         {% for identity in identities %}
             <a class="option" href="{{ identity.urls.activate }}">
                 {% if identity.icon_uri %}
-                    <img src="{{ identity.icon_uri }}" width="32">
+                    <img src="{{ identity.icon_uri }}">
                 {% else %}
-                    <img src="{% static "img/unknown-icon-128.png" %}" width="32">
+                    <img src="{% static "img/unknown-icon-128.png" %}">
                 {% endif %}
-                {{ identity }}
+                <span class="handle">
-                <small>@{{ identity.handle }}</small>
+                    {{ identity.name_or_handle }}
+                    <small>@{{ identity.handle }}</small>
+                </span>
             </a>
         {% empty %}
             <p class="option empty">You have no identities.</p>
@@ -22,8 +24,5 @@
         <a href="/identity/create/" class="option new">
             <i class="fa-solid fa-plus"></i> Create a new identity
         </a>
-        <a href="/auth/logout/" class="option new">
-            <i class="fa-solid fa-right-from-bracket"></i> Logout
-        </a>
     </section>
 {% endblock %}