natty
/
fox-send
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tweak some styles for trailhead

This commit is contained in:
John Gruen 2019-05-03 18:26:10 +02:00
parent f603f40f43
commit 51296d5489
14 changed files with 35 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/main.css
View File

@ -31,6 +31,7 @@ body {
@apply cursor-pointer; @apply cursor-pointer;
@apply py-4; @apply py-4;
@apply px-6; @apply px-6;
@apply font-semibold;
} }
.btn:hover { .btn:hover {
@ -139,6 +140,11 @@ footer li:hover {
white-space: nowrap; white-space: nowrap;
} }
.main-header img {
height: 32px;
width: 170px;
}
.intro { .intro {
max-width: 100%; max-width: 100%;
height: unset; height: unset;
@ -159,7 +165,7 @@ footer li:hover {
.mozilla-logo { .mozilla-logo {
background-image: url('../assets/mozilla-logo.svg'); background-image: url('../assets/mozilla-logo.svg');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100px, 32px; background-size: 100px, 48px;
overflow: hidden; overflow: hidden;
text-indent: 120%; text-indent: 120%;
white-space: nowrap; white-space: nowrap;
@ -246,6 +252,11 @@ select {
} }
@screen md { @screen md {
.main-header img {
height: 48px;
width: auto;
}
.intro { .intro {
max-width: unset; max-width: unset;
height: unset; height: unset;
@ -261,7 +272,7 @@ select {
@apply py-8; @apply py-8;
min-height: 36rem; min-height: 36rem;
max-height: 40rem; max-height: 42rem;
width: calc(100% - 3rem); width: calc(100% - 3rem);
} }
} }
@ -274,8 +285,9 @@ select {
} }
.shadow-big { .shadow-big {
box-shadow: 0 0 32px 0 rgba(12, 12, 13, 0.1), box-shadow: 0 12px 18px 2px rgba(34, 0, 51, 0.04),
0 2px 16px 0 rgba(12, 12, 13, 0.05); 0 6px 22px 4px rgba(7, 48, 114, 0.12),
0 6px 10px -4px rgba(14, 13, 26, 0.12);
} }
} }

2
app/ui/archiveTile.js
View File

@ -430,7 +430,7 @@ module.exports.empty = function(state, emit) {
`; `;
return html` return html`
<send-upload-area <send-upload-area
class="flex flex-col items-center justify-center border-2 border-dashed border-grey rounded px-6 py-16 h-full w-full" class="flex flex-col items-center justify-center border-2 border-dashed border-grey-transparent rounded px-6 py-16 h-full w-full"
onclick="${e => { onclick="${e => {
if (e.target.tagName !== 'LABEL') { if (e.target.tagName !== 'LABEL') {
document.getElementById('file-upload').click(); document.getElementById('file-upload').click();

2
app/ui/blank.js
View File

@ -4,7 +4,7 @@ module.exports = function() {
return html` return html`
<main class="main"> <main class="main">
<section <section
class="h-full w-full p-6 md:flex md:flex-row md:rounded-lg md:shadow-big" class="h-full w-full p-6 md:p-8 md:flex md:flex-row md:rounded-xl md:shadow-big"
> >
<div class="md:mr-6 md:w-1/2 w-full"></div> <div class="md:mr-6 md:w-1/2 w-full"></div>
<div class="md:w-1/2 mt-6 md:mt-0 w-full"></div> <div class="md:w-1/2 mt-6 md:mt-0 w-full"></div>

4
app/ui/download.js
View File

@ -76,7 +76,9 @@ module.exports = function(state, emit) {
return html` return html`
<main class="main"> <main class="main">
${state.modal && modal(state, emit)} ${state.modal && modal(state, emit)}
<section class="relative h-full w-full p-6 md:rounded-lg md:shadow-big"> <section
class="relative h-full w-full p-6 md:p-8 md:rounded-xl md:shadow-big"
>
${content} ${content}
</section> </section>
</main> </main>

2
app/ui/error.js
View File

@ -7,7 +7,7 @@ module.exports = function(state, emit) {
<main class="main"> <main class="main">
${state.modal && modal(state, emit)} ${state.modal && modal(state, emit)}
<section <section
class="flex flex-col items-center justify-center h-full w-full p-6 overflow-hidden md:rounded-lg md:shadow-big" class="flex flex-col items-center justify-center h-full w-full p-6 md:p-8 overflow-hidden md:rounded-xl md:shadow-big"
> >
<h1 class="text-center font-bold my-2"> <h1 class="text-center font-bold my-2">
${state.translate('errorPageHeader')} ${state.translate('errorPageHeader')}

2
app/ui/footer.js
View File

@ -19,7 +19,7 @@ class Footer extends Component {
const feedbackUrl = `https://qsurvey.mozilla.com/s3/Firefox-Send-Product-Feedback?ver=${version}&browser=${browser}`; const feedbackUrl = `https://qsurvey.mozilla.com/s3/Firefox-Send-Product-Feedback?ver=${version}&browser=${browser}`;
return html` return html`
<footer <footer
class="flex flex-col md:flex-row items-start w-full flex-none self-start p-6 font-medium text-xs text-grey-dark md:items-center justify-between" class="flex flex-col md:flex-row items-start w-full flex-none self-start p-6 md:p-8 font-medium text-xs text-grey-dark md:items-center justify-between"
> >
<a <a
class="mozilla-logo pb-10 md:pb-0 m-2" class="mozilla-logo pb-10 md:pb-0 m-2"

2
app/ui/header.js
View File

@ -28,7 +28,7 @@ class Header extends Component {
`; `;
return html` return html`
<header <header
class="relative flex-none flex flex-row items-center justify-between w-full px-6 h-16 md:h-24 z-20 bg-transparent" class="main-header relative flex-none flex flex-row items-center justify-between w-full px-6 md:px-8 h-16 md:h-24 z-20 bg-transparent"
> >
${title} ${this.account.render()} ${title} ${this.account.render()}
</header> </header>

4
app/ui/home.js
View File

@ -30,9 +30,9 @@ module.exports = function(state, emit) {
<main class="main"> <main class="main">
${state.modal && modal(state, emit)} ${state.modal && modal(state, emit)}
<section <section
class="h-full w-full p-6 overflow-hidden md:flex md:flex-row md:rounded-lg md:shadow-big" class="h-full w-full p-6 md:p-8 overflow-hidden md:flex md:flex-row md:rounded-xl md:shadow-big"
> >
<div class="px-2 w-full md:px-0 md:mr-6 md:w-1/2">${left}</div> <div class="px-2 w-full md:px-0 md:mr-8 md:w-1/2">${left}</div>
<div class="mt-6 w-full md:w-1/2 md:-m-2">${right}</div> <div class="mt-6 w-full md:w-1/2 md:-m-2">${right}</div>
</section> </section>
</main> </main>

4
app/ui/intro.js
View File

@ -7,10 +7,10 @@ module.exports = function intro(state) {
class="flex flex-col items-center justify-center bg-white px-6 md:py-0 py-6 mb-0 h-full w-full" class="flex flex-col items-center justify-center bg-white px-6 md:py-0 py-6 mb-0 h-full w-full"
> >
<div class="mt-12 flex flex-col h-full"> <div class="mt-12 flex flex-col h-full">
<h1 class="font-bold"> <h1 class="font-bold md:pb-2">
${state.translate('introTitle')} ${state.translate('introTitle')}
</h1> </h1>
<p class="max-w-sm leading-normal mt-6 md:mt-2 md:pr-16"> <p class="max-w-sm leading-loose mt-6 md:mt-2 md:pr-14">
${state.translate('introDescription')} ${state.translate('introDescription')}
</p> </p>
<img class="intro" src="${assets.get('intro.svg')}" /> <img class="intro" src="${assets.get('intro.svg')}" />

2
app/ui/modal.js
View File

@ -3,7 +3,7 @@ const html = require('choo/html');
module.exports = function(state, emit) { module.exports = function(state, emit) {
return html` return html`
<send-modal <send-modal
class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-white md:rounded-lg md:my-8" class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-white md:rounded-xl md:my-8"
onclick="${close}" onclick="${close}"
> >
<div <div

2
app/ui/notFound.js
View File

@ -7,7 +7,7 @@ module.exports = function(state, emit) {
<main class="main"> <main class="main">
${state.modal && modal(state, emit)} ${state.modal && modal(state, emit)}
<section <section
class="flex flex-col items-center justify-center h-full w-full p-6 overflow-hidden md:rounded-lg md:shadow-big" class="flex flex-col items-center justify-center h-full w-full p-6 md:p-8 overflow-hidden md:rounded-xl md:shadow-big"
> >
<h1 class="text-center font-bold my-2"> <h1 class="text-center font-bold my-2">
${state.translate('expiredTitle')} ${state.translate('expiredTitle')}

75
assets/logo.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 8.1 KiB

4
tailwind.js
View File

@ -51,6 +51,7 @@ const colors = {
'grey-dark': '#8795a1', 'grey-dark': '#8795a1',
grey: '#B1B1B3', grey: '#B1B1B3',
'grey-light': '#dae1e7', 'grey-light': '#dae1e7',
'grey-transparent': 'hsla(250, 13%, 9%, .2)',
'grey-lighter': '#f1f5f8', 'grey-lighter': '#f1f5f8',
'grey-lightest': '#F9F9FA', 'grey-lightest': '#F9F9FA',
white: '#ffffff', white: '#ffffff',
@ -300,7 +301,7 @@ module.exports = {
none: 1, none: 1,
tight: 1.25, tight: 1.25,
normal: 1.5, normal: 1.5,
loose: 2 loose: 1.75
}, },
/* /*
@ -431,6 +432,7 @@ module.exports = {
sm: '.125rem', sm: '.125rem',
default: '.25rem', default: '.25rem',
lg: '.5rem', lg: '.5rem',
xl: '1rem',
full: '9999px' full: '9999px'
}, },