summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--static/css/style.css202
-rw-r--r--static/fonts/raleway/raleway.css10
-rw-r--r--templates/base.html34
-rw-r--r--templates/identity/_identity_menu.html5
-rw-r--r--templates/identity/create.html1
-rw-r--r--templates/identity/select.html17
6 files changed, 162 insertions, 107 deletions
diff --git a/static/css/style.css b/static/css/style.css
index f5ebc52..56c68ee 100644
--- a/static/css/style.css
+++ b/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: block;
+ display: inline-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);
- color: white;
+ background-color: var(--color-bg-main);
+ 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;
- background: var(--color-fg2);
- padding: 10px 7px 7px 0;
+ font-weight: bold;
+ background: var(--color-highlight);
+ border-radius: 5px 0 0 0;
+ padding: 10px 11px 9px 10px;
+ height: 50px;
font-size: 130%;
- height: 2.2em;
- color: var(--color-fg1);
+ color: var(--color-text-main);
+ border-bottom: 3px solid rgba(0, 0, 0, 0);
+}
+
+header .logo:hover {
+ border-bottom: 3px solid rgba(255, 255, 255, 0.2);
}
-header h1 img {
+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 {
- padding: 10px 10px 7px 10px;
+header menu a {
+ 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 {
- width: 750px;
- margin: 20px auto;
+header menu a:hover {
+ border-bottom: 3px solid var(--color-highlight);
}
-/* "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;
+header menu a.identity {
+ border-right: 0;
+ text-align: right;
+ padding-right: 10px;
}
-.modal h1 {
- color: var(--color-fg1);
- background: var(--color-bg3);
- font-family: "Raleway";
- position: relative;
- padding: 5px 8px 4px 10px;
- font-size: 100%;
- letter-spacing: 0.05em;
- text-transform: uppercase;
- border-radius: 5px 5px 0 0;
+header menu a i {
+ margin-right: 10px;
}
-.modal .option {
+header menu a img {
+ display: inline-block;
+ vertical-align: middle;
+ margin: 0 0 2px 8px;
+ height: 30px;
+ width: auto;
+}
+
+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;
- padding: 15px 20px;
+ 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;
- border-left: 3px solid transparent;
- line-height: 32px;
+ padding: 0 20px;
+ border: 2px solid rgba(255, 255, 255, 0);
+ border-radius: 3px;
}
-.modal .option img {
- display: inline;
- vertical-align: middle;
- margin: 0 10px 3px 0;
+.icon-menu>a:hover {
+ border: 2px solid var(--color-highlight);
}
-.modal .option i {
- display: inline-block;
+.icon-menu>a img,
+.icon-menu>a i {
vertical-align: middle;
- width: 32px;
- height: 32px;
- text-align: center;
- line-height: 32px;
- font-size: 150%;
margin: 0 10px 3px 0;
+ height: 50px;
+ width: auto;
}
-.modal a.option:hover {
- border-left: 3px solid var(--color-text-dull);
+.icon-menu>a i {
+ display: inline-block;
+ text-align: center;
+ width: 50px;
+ line-height: 50px;
+ font-size: 200%;
}
-.modal .option.empty {
- text-align: center;
- color: var(--color-text-dull);
+.handle {
+ vertical-align: middle;
+ display: inline-block;
+ line-height: normal;
}
-.modal .option small {
- margin: 0 0 0 5px;
+.handle small {
+ display: block;
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;
diff --git a/static/fonts/raleway/raleway.css b/static/fonts/raleway/raleway.css
index 709403d..2ecfdc4 100644
--- a/static/fonts/raleway/raleway.css
+++ b/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;
+ src: url('Raleway-Light.woff2');
+ font-weight: lighter;
font-style: normal;
}
@font-face {
font-family: 'Raleway';
- src: url('Raleway-Light.woff2');
- font-weight: lighter;
+ src: url('Raleway-Regular.woff2');
+ font-weight: normal;
font-style: normal;
}
diff --git a/templates/base.html b/templates/base.html
index 2ff0f15..0f9edfb 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -12,36 +12,34 @@
</head>
<body class="{% block body_class %}{% endblock %}">
- <header>
- <h1>
- <a href="/">
+ <main>
+ <header>
+ <a class="logo" href="/">
<img src="{% static "img/icon-128.png" %}" width="32">
{{ config.site_name }}
</a>
- </h1>
- <menu>
- <li>
- <a href="#"><i class="fa-solid fa-gear"></i></a>
- </li>
- <li>
+ <menu>
{% 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>
- </header>
+ </menu>
+ </header>
- <main>
{% block content %}
{% endblock %}
</main>
diff --git a/templates/identity/_identity_menu.html b/templates/identity/_identity_menu.html
new file mode 100644
index 0000000..fff70cb
--- /dev/null
+++ b/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>
diff --git a/templates/identity/create.html b/templates/identity/create.html
index cbf0fb2..8e78e10 100644
--- a/templates/identity/create.html
+++ b/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 %}
diff --git a/templates/identity/select.html b/templates/identity/select.html
index ea4065c..d9959ab 100644
--- a/templates/identity/select.html
+++ b/templates/identity/select.html
@@ -4,17 +4,19 @@
{% block title %}Select Identity{% endblock %}
{% block content %}
- <section class="modal identities">
- <h1>Select Identity</h1>
+ {% include "identity/_identity_menu.html" %}
+ <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 }}
- <small>@{{ identity.handle }}</small>
+ <span class="handle">
+ {{ 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 %}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 07:03:56 +0000