data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

tweak themes

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

25
routes/settings/instances/[instanceName].html
View file

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

13
scss/global.scss
View file

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