Start having some sort of visual style

This commit is contained in:
Andrew Godwin 2022-11-12 23:21:52 -07:00
parent 143a4a6e8c
commit 30c208226e
6 changed files with 173 additions and 118 deletions

View file

@ -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 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 {
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 */
.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 .gap {
flex-grow: 1;
}
.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.identity {
border-right: 0;
text-align: right;
padding-right: 10px;
}
.modal .option {
display: block;
padding: 15px 20px;
color: var(--color-text-main);
text-decoration: none;
border-left: 3px solid transparent;
line-height: 32px;
header menu a i {
margin-right: 10px;
}
.modal .option img {
display: inline;
vertical-align: middle;
margin: 0 10px 3px 0;
}
.modal .option i {
header menu a img {
display: inline-block;
vertical-align: middle;
width: 32px;
height: 32px;
text-align: center;
line-height: 32px;
font-size: 150%;
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;
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 {
border-left: 3px solid var(--color-text-dull);
}
.modal .option.empty {
.icon-menu>a i {
display: inline-block;
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;

View file

@ -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;
}

View file

@ -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>

View file

@ -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>

View file

@ -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 %}

View file

@ -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 %}