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

View File

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

View File

@ -430,7 +430,7 @@ module.exports.empty = function(state, emit) {
`;
return html`
<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 => {
if (e.target.tagName !== 'LABEL') {
document.getElementById('file-upload').click();

View File

@ -4,7 +4,7 @@ module.exports = function() {
return html`
<main class="main">
<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:w-1/2 mt-6 md:mt-0 w-full"></div>

View File

@ -76,7 +76,9 @@ module.exports = function(state, emit) {
return html`
<main class="main">
${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}
</section>
</main>

View File

@ -7,7 +7,7 @@ module.exports = function(state, emit) {
<main class="main">
${state.modal && modal(state, emit)}
<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">
${state.translate('errorPageHeader')}

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}`;
return html`
<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
class="mozilla-logo pb-10 md:pb-0 m-2"

View File

@ -28,7 +28,7 @@ class Header extends Component {
`;
return html`
<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()}
</header>

View File

@ -30,9 +30,9 @@ module.exports = function(state, emit) {
<main class="main">
${state.modal && modal(state, emit)}
<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>
</section>
</main>

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"
>
<div class="mt-12 flex flex-col h-full">
<h1 class="font-bold">
<h1 class="font-bold md:pb-2">
${state.translate('introTitle')}
</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')}
</p>
<img class="intro" src="${assets.get('intro.svg')}" />

View File

@ -3,7 +3,7 @@ const html = require('choo/html');
module.exports = function(state, emit) {
return html`
<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}"
>
<div

View File

@ -7,7 +7,7 @@ module.exports = function(state, emit) {
<main class="main">
${state.modal && modal(state, emit)}
<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">
${state.translate('expiredTitle')}

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 8.1 KiB

View File

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