UI: Tweak header and footer display, text size, switch to rem

This commit is contained in:
fr33domlover 2022-06-26 08:32:53 +00:00
parent 84565b7c54
commit dcdba0e553
2 changed files with 102 additions and 72 deletions

View file

@ -1,6 +1,6 @@
/* This file is part of Vervis.
*
* Written in 2016 by fr33domlover <fr33domlover@riseup.net>.
* Written in 2016, 2022 by fr33domlover <fr33domlover@riseup.net>.
*
* ♡ Copying is an act of love. Please copy, reuse and share.
*
@ -13,14 +13,42 @@
* <http://creativecommons.org/publicdomain/zero/1.0/>.
*/
html
font-size: 62.5%
body
font-size: 1.8rem
font-family: sans-serif
line-height: 1.4
color: #{plain}
background: #{black}
max-width: 1000px
padding: 1em
text-align: justify
margin: 0
header
padding: 1.2rem 1.8rem
margin: 0 0 3rem
background-color: #{dark blue}
footer
margin-top: 3rem
padding: 1.4rem 1.8rem
font-size: 1.4rem
background-color: #{dark blue}
line-height: 1.5
main
max-width: 116rem
padding-left: 8rem
padding-right: 8rem
margin-left: auto
margin-right: auto
p
line-height: 1.5
margin-bottom: 2.5rem
margin-top: 2.5rem
ul
line-height: 1.3
a
color: #{light blue}
@ -71,10 +99,10 @@ input:not[type="submit"], select, textarea
input[type="submit"]
display: inline-grid
width: 50%
padding: 0.618em
padding: 1rem
grid-column-start: 2
border: none
border-radius: 0.618em
border-radius: 1rem
input:hover[type="submit"]
background: #{dark gray}

View file

@ -1,6 +1,6 @@
$# This file is part of Vervis.
$#
$# Written in 2016, 2019 by fr33domlover <fr33domlover@riseup.net>.
$# Written in 2016, 2019, 2022 by fr33domlover <fr33domlover@riseup.net>.
$#
$# ♡ Copying is an act of love. Please copy, reuse and share.
$#
@ -12,80 +12,82 @@ $# You should have received a copy of the CC0 Public Domain Dedication along
$# with this software. If not, see
$# <http://creativecommons.org/publicdomain/zero/1.0/>.
$maybe (Entity _pid person, verified, sharer, unread) <- mperson
<div>
$if verified
<span>
[You are logged in as
<span .username>#{personLogin person}</span>]
$if unread > 0
<header>
$maybe (Entity _pid person, verified, sharer, unread) <- mperson
<div>
$if verified
<span>
<a href=@{NotificationsR $ sharerIdent sharer}>
🔔#{unread}
[You are logged in as
<span .username>#{personLogin person}</span>]
$if unread > 0
<span>
<a href=@{NotificationsR $ sharerIdent sharer}>
🔔#{unread}
<span>
<a href=@{SharerInboxR $ sharerIdent sharer}>
[📥 Inbox]
<span>
<a href=@{SharerOutboxR $ sharerIdent sharer}>
[📤 Outbox]
<span>
<a href=@{SharerFollowersR $ sharerIdent sharer}>
[🐤 Followers]
<span>
<a href=@{SharerFollowingR $ sharerIdent sharer}>
[🐔 Following]
<span>
<a href=@{BrowseR}>
[📚 Browse projects]
<span>
<a href=@{PublishR}>
[📣 Publish an activity]
<span>
<a href=@{AuthR LogoutR}>
[🚪 Log out]
$else
<span>
You are logged in as #{personLogin person} (unverified). If you haven't
received a verification link by email, you can ask to
<a href=@{ResendVerifyEmailR}>resend
it. Or <a href=@{AuthR LogoutR}>Log out.
$if unread > 0
<span>
<a href=@{NotificationsR $ sharerIdent sharer}>
🔔#{unread}
$nothing
<div>
You are not logged in.
<a href=@{AuthR LoginR}>Log in.
Or
<a href=@{AuthR newAccountR}>Sign up.
$if federationDisabled
<p>
<span>
<a href=@{SharerInboxR $ sharerIdent sharer}>
[📥 Inbox]
NOTE: Federation is disabled on this instance!
$if null federatedServers
<span>
<a href=@{SharerOutboxR $ sharerIdent sharer}>
[📤 Outbox]
<span>
<a href=@{SharerFollowersR $ sharerIdent sharer}>
[🐤 Followers]
<span>
<a href=@{SharerFollowingR $ sharerIdent sharer}>
[🐔 Following]
<span>
<a href=@{BrowseR}>
[📚 Browse projects]
<span>
<a href=@{PublishR}>
[📣 Publish an activity]
<span>
<a href=@{AuthR LogoutR}>
[🚪 Log out]
You can test federation between other instances.
$else
<span>
You are logged in as #{personLogin person} (unverified). If you haven't
received a verification link by email, you can ask to
<a href=@{ResendVerifyEmailR}>resend
it. Or <a href=@{AuthR LogoutR}>Log out.
$if unread > 0
<span>
<a href=@{NotificationsR $ sharerIdent sharer}>
🔔#{unread}
$nothing
<div>
You are not logged in.
<a href=@{AuthR LoginR}>Log in.
Or
<a href=@{AuthR newAccountR}>Sign up.
You can test federation between the following instances:
<ul>
$forall h <- federatedServers
<li>
<code>
#{h}
$if federationDisabled
<p>
<span>
NOTE: Federation is disabled on this instance!
$if null federatedServers
<span>
You can test federation between other instances.
$else
<span>
You can test federation between the following instances:
<ul>
$forall h <- federatedServers
<li>
<code>
#{h}
<.instance>
Vervis @ #{renderAuthority instanceHost}
<.instance>
Vervis @ #{renderAuthority instanceHost}
^{breadcrumbsW}
^{breadcrumbsW}
<div #messages>
$forall (_status, msg) <- msgs
<div .message>#{msg}
<div #messages>
$forall (_status, msg) <- msgs
<div .message>#{msg}
^{widget}
<main role="main">
^{widget}
<footer>
^{revisionW}