From 30c208226e8eedeb6879f0b771ae9d5987d06aec Mon Sep 17 00:00:00 2001 From: Andrew Godwin Date: Sat, 12 Nov 2022 23:21:52 -0700 Subject: [PATCH] Start having some sort of visual style --- static/css/style.css | 218 +++++++++++++++---------- static/fonts/raleway/raleway.css | 16 +- templates/base.html | 34 ++-- templates/identity/_identity_menu.html | 5 + templates/identity/create.html | 1 + templates/identity/select.html | 17 +- 6 files changed, 173 insertions(+), 118 deletions(-) create mode 100644 templates/identity/_identity_menu.html 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 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; 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; - 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; +} 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 @@ -
-

- +
+
+ -

- -
  • - -
    • -
  • + {% if user.is_authenticated %} - + Settings +
    + {% if not request.identity %} - + No Identity + {% elif request.identity.icon_uri %} - + {{ request.identity.username }} @{{ request.identity.domain_id }} + {% else %} - + {{ request.identity.username }} @{{ request.identity.domain_id }} + {% endif %} {% else %} - Login + Login {% endif %} -
    • -     -
    + + -
    {% block content %} {% endblock %}
    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 @@ + 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" %}

    Create Identity

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

    Select Identity

    + {% include "identity/_identity_menu.html" %} +
    {% for identity in identities %} {% if identity.icon_uri %} - + {% else %} - + {% endif %} - {{ identity }} - @{{ identity.handle }} + + {{ identity.name_or_handle }} + @{{ identity.handle }} + {% empty %}

    You have no identities.

    @@ -22,8 +24,5 @@ Create a new identity - - Logout -
    {% endblock %}