-
${file.name}
-+
${file.name}
+-
${archive.name}
-${archive.name}
++
-
${archive.name}
-${archive.name}
+
+
- ${archive.name}
- ${archive.name}
+
diff --git a/app/main.css b/app/main.css index 773ddd68..28d8ec51 100644 --- a/app/main.css +++ b/app/main.css @@ -32,18 +32,42 @@ progress::-webkit-progress-value { } .main { - min-height: calc(100vh - 6rem); + display: flex; + max-width: 1024px; + width: 100%; +} + +.main > section { + @apply bg-white; + @apply shadow; } .header-logo { background-image: url('../assets/send_logo.svg'); background-position: left; background-repeat: no-repeat; - background-size: 2rem; - padding-left: 2.5rem; + background-size: 1.8rem; + padding-left: 2.4rem; text-decoration: none; } +.header-logo h1 { + font-size: 1.5rem; +} + +.mozilla-logo { + background-image: url('../assets/mozilla-logo.svg'); + background-repeat: no-repeat; + background-size: 100px, 32px; + overflow: hidden; + text-indent: 120%; + white-space: nowrap; + display: inline-block; + height: 32px; + width: 100px; + flex-shrink: 0; +} + .feedback-link { background-color: #000; background-image: url('../assets/feedback.svg'); @@ -59,6 +83,14 @@ progress::-webkit-progress-value { white-space: nowrap; } +.bg-shades { + background-color: rgba(255, 255, 255, 0.8); +} + +.border-modal { + box-shadow: 0 0 5rem 5rem white; +} + .checkbox { @apply leading-normal; @apply select-none; @@ -116,15 +148,23 @@ progress::-webkit-progress-value { content: '\200b'; } +.max-h-half { + max-height: 50vh; +} + @screen md { .main { @apply flex-1; @apply self-center; - @apply bg-white; - @apply shadow-md; - @apply m-auto; + @apply items-center; + @apply my-10; + width: calc(100% - 48px); min-height: 30rem; max-height: 40rem; } + + .main > section { + @apply shadow-md; + } } diff --git a/app/routes.js b/app/routes.js index cb616c42..b2619599 100644 --- a/app/routes.js +++ b/app/routes.js @@ -16,7 +16,7 @@ function banner(state, emit) { function body(main) { return function(state, emit) { - const b = html`
+ const b = html` ${banner(state, emit)} ${header(state, emit)} ${main(state, emit)} diff --git a/app/ui/account.js b/app/ui/account.js index 5908144a..d9f92ff6 100644 --- a/app/ui/account.js +++ b/app/ui/account.js @@ -1,6 +1,6 @@ const html = require('choo/html'); const itemClass = - 'block p-2 text-grey-darkest hover:bg-blue hover:text-white cursor-pointer'; + 'block px-4 py-2 text-grey-darkest hover:bg-blue hover:text-white cursor-pointer'; module.exports = function(state, emit) { if (!state.capabilities.account) { @@ -22,7 +22,7 @@ module.exports = function(state, emit) { )}` ); } - return html`-
+
-
-
+
- ${archive.name}
- ${archive.name}
+