tweak themes

This commit is contained in:
Nolan Lawson 2018-01-14 11:34:53 -08:00
parent ee1251467a
commit 39b7481da3
2 changed files with 21 additions and 17 deletions

View file

@ -8,10 +8,12 @@
{{#if instanceUserAccount}}
<h2>Logged in as:</h2>
<div class="current-user">
<img src="{{instanceUserAccount.avatar}}" />
<a rel="noopener" target="_blank" href="{{instanceUserAccount.url}}">@{{instanceUserAccount.acct}}</a>
<span class="acct-name">{{instanceUserAccount.display_name}}</span>
<div class="acct-current-user">
<img alt="Avatar for {{instanceUserAccount.acct}}"
class="acct-avatar" src="{{instanceUserAccount.avatar}}" />
<a class="acct-handle" rel="noopener" target="_blank"
href="{{instanceUserAccount.url}}">@{{instanceUserAccount.acct}}</a>
<span class="acct-display-name">{{instanceUserAccount.display_name}}</span>
</div>
<h2>Theme:</h2>
<form class="theme-chooser">
@ -36,19 +38,24 @@
</SettingsLayout>
</Layout>
<style>
.current-user {
.acct-current-user {
padding: 20px;
display: flex;
display: grid;
align-items: center;
font-size: 1.3em;
grid-template-areas:
"avatar handle"
"avatar display-name";
grid-gap: 20px;
}
.current-user img {
.acct-avatar {
width: 64px;
height: 64px;
border-radius: 4px;
grid-area: avatar;
}
.current-user img, .current-user a, .current-user span {
margin-right: 20px;
.acct-handle {
grid-area: handle;
}
.theme-chooser {
display: block;

View file

@ -20,10 +20,14 @@ main {
max-width: 800px;
padding: 15px 15px;
box-sizing: border-box;
margin: 85px auto;
margin: 85px auto 15px;
background: var(--main-bg);
border: 1px solid var(--main-border);
border-radius: 1px;
@media (max-width: 767px) {
padding: 5px 5px;
margin: 75px auto 15px;
}
}
h1, h2, h3, h4, h5, h6 {
@ -106,10 +110,3 @@ ul, li, p {
.hidden {
opacity: 0;
}
@media (max-width: 767px) {
main {
padding: 5px 5px;
margin: 75px auto;
}
}