mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-20 22:42:53 -05:00
New page-content panel and base font-size refinements
This commit is contained in:
parent
770ff0d628
commit
593b6f0200
4 changed files with 39 additions and 3 deletions
|
@ -183,7 +183,7 @@
|
|||
.ghost-logo {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: inherit;
|
||||
font-size: 1.1rem;
|
||||
line-height: 44px;
|
||||
text-align: left;
|
||||
|
||||
|
|
|
@ -13,7 +13,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
// The header bar, only visible below 1025px
|
||||
//
|
||||
// The header bar - visible below 1025px
|
||||
// --------------------------------------------------
|
||||
|
||||
.page-header {
|
||||
position: relative;
|
||||
height: 44px;
|
||||
|
@ -59,4 +62,23 @@
|
|||
width: 44px;
|
||||
height: 44px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// The panel which wraps the main content area
|
||||
// --------------------------------------------------
|
||||
// We can't use position:fixed on .page-header because it would
|
||||
// break the mobile menu. So we create an overflow-auto content
|
||||
// area which scrolls just underneath the header, making it look
|
||||
// like the header is position:fixed.
|
||||
|
||||
.page-content {
|
||||
@include position(absolute, 60px 0px 0px 0px);
|
||||
background: #fff;
|
||||
overflow-y: auto;
|
||||
|
||||
@media (max-width: 1025px) {
|
||||
top: 44px;
|
||||
}
|
||||
}
|
|
@ -13,6 +13,8 @@ html {
|
|||
|
||||
body {
|
||||
width: 100%;
|
||||
color: lighten($darkgrey, 10%);
|
||||
font-size: 1.4rem;
|
||||
-webkit-font-feature-settings: 'kern' 1;
|
||||
-moz-font-feature-settings: 'kern' 1;
|
||||
font-feature-settings: 'kern' 1;
|
||||
|
|
|
@ -6,4 +6,16 @@ title: Ghost UI · Making publishing beautiful.
|
|||
<header class="page-header">
|
||||
<a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
|
||||
<h2>Home</h2>
|
||||
</header>
|
||||
</header>
|
||||
|
||||
<section class="page-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</section>
|
Loading…
Add table
Reference in a new issue