зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1774015 - Adjust layout for fxview. r=Gijs
* Set root element font-size to 15px to align with the size we set on body (in common-shared.css), allowing predictability when scaling and zoom-friendly (rem) widths * Remove the <main> grid column-gap and manage padding/gutter around/between content areas with the --content-area-gutter variable * Use a consistent 32px between content areas * Simplify <main> grid to 2 columns with 2/3, 1/3 width respectively. * Add a max-width to the page content to correspond to 1440px and horizontally center it in larger viewports * Move the colorways content inside right-most column (grid slot) rather than *be* the column. Differential Revision: https://phabricator.services.mozilla.com/D149457
This commit is contained in:
Sam Foster
Родитель
411e5386db
Коммит
975b2d48ad
|
|
@ -4,21 +4,27 @@
|
|||
|
||||
:host,
|
||||
:root {
|
||||
--content-area-padding: 16px;
|
||||
--sidebar-width: var(--in-content-sidebar-width);
|
||||
--content-area-gutter: 24px;
|
||||
--sidebar-width: 200px;
|
||||
--header-spacing: 40px;
|
||||
--footer-spacing: 80px;
|
||||
|
||||
--card-border-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%);
|
||||
}
|
||||
|
||||
:root {
|
||||
/* align the base font-size on root element with that of <body>
|
||||
so rem-based layout widths and break-points behave predictably */
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
padding-block: var(--header-spacing) var(--footer-spacing);
|
||||
padding-inline: var(--content-area-padding);
|
||||
max-width: 90rem;
|
||||
padding-inline: var(--content-area-gutter);
|
||||
max-width: 96rem;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -27,34 +33,34 @@ h1 {
|
|||
}
|
||||
|
||||
.content-container {
|
||||
padding-inline: var(--content-area-padding);
|
||||
padding-inline: var(--content-area-gutter);
|
||||
padding-block: 16px;
|
||||
}
|
||||
|
||||
body > nav {
|
||||
border-inline-end-width: 1px;
|
||||
flex: 0 1 content;
|
||||
min-width: calc(var(--content-area-padding) * 2 + var(--sidebar-width));
|
||||
flex: 0 0 var(--sidebar-width);
|
||||
}
|
||||
|
||||
body > main {
|
||||
flex: 1 1 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
column-gap: 16px;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
}
|
||||
|
||||
body > main > section {
|
||||
grid-column: 1 / 5;
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
body > main > aside {
|
||||
grid-column: 5 / -1;
|
||||
grid-column: 2;
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
|
||||
@media (max-width: 76rem) {
|
||||
:host,
|
||||
:root {
|
||||
--sidebar-width: 40px;
|
||||
--content-area-gutter: 12px;
|
||||
}
|
||||
.brand-logo > .brand-feature-name {
|
||||
display: none;
|
||||
|
|
@ -65,6 +71,7 @@ body > main > aside {
|
|||
body > main > section,
|
||||
body > main > aside {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -73,7 +80,6 @@ body > main > aside {
|
|||
:root {
|
||||
--header-spacing: 16px;
|
||||
--footer-spacing: 16px;
|
||||
--content-area-padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -264,10 +270,6 @@ body > main > aside {
|
|||
margin-block: 0 8px;
|
||||
}
|
||||
|
||||
#recently-closed-tabs-container {
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
#recently-closed-tabs-container > p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<div class="content-container brand-logo">
|
||||
<nav class="content-container">
|
||||
<div class="brand-logo">
|
||||
<span class="brand-icon"></span>
|
||||
<span class="brand-feature-name" data-l10n-id="firefoxview-page-title"></span>
|
||||
</div>
|
||||
|
|
@ -112,7 +112,9 @@
|
|||
<button class="primary" id="colorways-button"></button>
|
||||
<img id="colorways-collection-graphic">
|
||||
</template>
|
||||
<aside id="colorways"></aside>
|
||||
<aside class="content-container">
|
||||
<section id="colorways"></section>
|
||||
</aside>
|
||||
|
||||
<section class="content-container" is="recently-closed-tabs-container" id="recently-closed-tabs-container">
|
||||
<header class="page-section-header">
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче