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

tweak design a heck of a lot

Browse source
This commit is contained in:
Nolan Lawson 2018-01-15 21:58:31 -08:00
parent cd2be627e2
commit 91390bcba0
7 changed files with 19 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
routes/_components/NotLoggedInHome.html
View file

@ -14,6 +14,9 @@
</div> </div>
</FreeTextLayout> </FreeTextLayout>
<style> <style>
.not-logged-in-home {
margin: 10px;
}
.banner { .banner {
display: flex; display: flex;
align-items: center; align-items: center;

17
routes/_components/Status.html
View file

@ -52,9 +52,9 @@
<style> <style>
article { article {
width: 570px; width: 580px;
max-width: calc(100vw - 30px); max-width: calc(100vw);
margin: 0 auto; margin: 0 10px;
padding: 10px 0; padding: 10px 0;
display: grid; display: grid;
grid-template-areas: grid-template-areas:
@ -62,18 +62,19 @@
"sidebar author" "sidebar author"
"sidebar content" "sidebar content"
"....... toolbar"; "....... toolbar";
grid-template-columns: 60px 1fr; grid-template-columns: 68px 1fr;
} }
.sidebar { .sidebar {
grid-area: sidebar; grid-area: sidebar;
display: flex; display: flex;
justify-content: center;
} }
.author { .author {
grid-area: author; grid-area: author;
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 5px; margin: 0 10px 0 5px;
font-size: 1.1em; font-size: 1.1em;
min-width: 0; min-width: 0;
} }
@ -113,7 +114,7 @@
} }
.content { .content {
margin: 10px 5px 20px; margin: 10px 10px 20px 5px;
grid-area: content; grid-area: content;
word-wrap: break-word; word-wrap: break-word;
overflow: hidden; overflow: hidden;
@ -143,7 +144,7 @@
.boosted { .boosted {
grid-area: boosted; grid-area: boosted;
margin: 5px 5px; margin: 5px 10px 5px 5px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -157,7 +158,7 @@
.toolbar { .toolbar {
grid-area: toolbar; grid-area: toolbar;
display: flex; display: flex;
margin: 5px; margin: 5px 10px 5px 5px;
justify-content: space-between; justify-content: space-between;
} }

2
routes/settings/_components/SettingsLayout.html
View file

@ -7,7 +7,7 @@
</div> </div>
<style> <style>
.settings { .settings {
margin-top: 20px; margin: 20px;
} }
:global(.settings .free-text h1) { :global(.settings .free-text h1) {
margin-bottom: 30px; margin-bottom: 30px;

2
routes/settings/_components/SettingsNav.html
View file

@ -13,7 +13,7 @@
<style> <style>
ul { ul {
margin: 5px 10px; margin: 5px 20px;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }

3
routes/settings/instances/add.html
View file

@ -33,7 +33,8 @@
} }
input { input {
max-width: 250px; min-width: 50%;
max-width: 100%;
} }
form.add-new-instance { form.add-new-instance {

4
scss/global.scss
View file

@ -31,7 +31,8 @@ body {
main { main {
position: relative; position: relative;
max-width: 600px; width: 602px;
max-width: 100vw;
padding: 15px 0; padding: 15px 0;
box-sizing: border-box; box-sizing: border-box;
margin: 15px auto 15px; margin: 15px auto 15px;
@ -39,7 +40,6 @@ main {
border: 1px solid var(--main-border); border: 1px solid var(--main-border);
border-radius: 1px; border-radius: 1px;
@media (max-width: 767px) { @media (max-width: 767px) {
padding: 5px 0;
margin: 5px auto 15px; margin: 5px auto 15px;
} }
} }

2
templates/2xx.html
View file

@ -17,7 +17,7 @@
<style> <style>
/* auto-generated w/ build-sass.js */ /* auto-generated w/ build-sass.js */
:root{--button-primary-bg:#6081e6;--button-primary-text:#fff;--button-primary-border:#132c76;--button-primary-bg-active:#456ce2;--button-primary-bg-hover:#6988e7;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#4169e1;--main-bg:#fff;--body-bg:#e8edfb;--body-text-color:#333;--main-border:#dadada;--svg-fill:#4169e1;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#4169e1;--nav-border:#214cce;--nav-a-border:#4169e1;--nav-a-selected-border:#fff;--nav-a-selected-bg:#6d8ce8;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#839deb;--nav-a-bg-hover:#577ae4;--nav-a-border-hover:#4169e1;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#839deb;--action-button-fill-color-hover:#99afef;--action-button-fill-color-active:#577ae4;--settings-list-item-bg:#fff;--settings-list-item-text:#4169e1;--settings-list-item-text-hover:#4169e1;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--deemphasized-text-color:#666} :root{--button-primary-bg:#6081e6;--button-primary-text:#fff;--button-primary-border:#132c76;--button-primary-bg-active:#456ce2;--button-primary-bg-hover:#6988e7;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#4169e1;--main-bg:#fff;--body-bg:#e8edfb;--body-text-color:#333;--main-border:#dadada;--svg-fill:#4169e1;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#4169e1;--nav-border:#214cce;--nav-a-border:#4169e1;--nav-a-selected-border:#fff;--nav-a-selected-bg:#6d8ce8;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#839deb;--nav-a-bg-hover:#577ae4;--nav-a-border-hover:#4169e1;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#839deb;--action-button-fill-color-hover:#99afef;--action-button-fill-color-active:#577ae4;--settings-list-item-bg:#fff;--settings-list-item-text:#4169e1;--settings-list-item-text-hover:#4169e1;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--deemphasized-text-color:#666}
body{margin:0;font-family:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;font-size:14px;line-height:1.3;color:var(--body-text-color);background:var(--body-bg);position:fixed;left:0;right:0;bottom:0;top:0}#svelte{display:flex;flex-direction:column}.container{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:absolute;top:72px;left:0;right:0;bottom:0;will-change:transform}main{position:relative;max-width:600px;padding:15px 0;box-sizing:border-box;margin:15px auto 15px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:1px}@media (max-width: 767px){main{padding:5px 0;margin:5px auto 15px}}h1,h2,h3,h4,h5,h6{margin:0 0 0.5em 0;font-weight:400;line-height:1.2}h1{font-size:2em}a{color:var(--anchor-text);text-decoration:none}a:visited{color:var(--anchor-text)}a:hover{text-decoration:underline}input{border:1px solid var(--input-border);padding:5px}button{font-size:1.2em;background:var(--button-bg);border-radius:2px;padding:10px 15px;border:1px solid var(--button-border);cursor:pointer;color:var(--button-text)}button:hover{background:var(--button-bg-hover)}button:active{background:var(--button-bg-active)}button[disabled]{opacity:0.35;pointer-events:none;cursor:not-allowed}button.primary{border:1px solid var(--button-primary-border);background:var(--button-primary-bg);color:var(--button-primary-text)}button.primary:hover{background:var(--button-primary-bg-hover)}button.primary:active{background:var(--button-primary-bg-active)}p,label,input{font-size:1.3em}ul,li,p{padding:0;margin:0}.hidden{opacity:0} body{margin:0;font-family:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;font-size:14px;line-height:1.3;color:var(--body-text-color);background:var(--body-bg);position:fixed;left:0;right:0;bottom:0;top:0}#svelte{display:flex;flex-direction:column}.container{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:absolute;top:72px;left:0;right:0;bottom:0;will-change:transform}main{position:relative;width:602px;max-width:100vw;padding:15px 0;box-sizing:border-box;margin:15px auto 15px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:1px}@media (max-width: 767px){main{margin:5px auto 15px}}h1,h2,h3,h4,h5,h6{margin:0 0 0.5em 0;font-weight:400;line-height:1.2}h1{font-size:2em}a{color:var(--anchor-text);text-decoration:none}a:visited{color:var(--anchor-text)}a:hover{text-decoration:underline}input{border:1px solid var(--input-border);padding:5px}button{font-size:1.2em;background:var(--button-bg);border-radius:2px;padding:10px 15px;border:1px solid var(--button-border);cursor:pointer;color:var(--button-text)}button:hover{background:var(--button-bg-hover)}button:active{background:var(--button-bg-active)}button[disabled]{opacity:0.35;pointer-events:none;cursor:not-allowed}button.primary{border:1px solid var(--button-primary-border);background:var(--button-primary-bg);color:var(--button-primary-text)}button.primary:hover{background:var(--button-primary-bg-hover)}button.primary:active{background:var(--button-primary-bg-active)}p,label,input{font-size:1.3em}ul,li,p{padding:0;margin:0}.hidden{opacity:0}
</style> </style>