Update application frame styles for content + editor

This commit is contained in:
John O'Nolan 2014-08-07 15:11:01 +03:00
parent 7ade967733
commit c0d51817a9
3 changed files with 6 additions and 81 deletions

View File

@ -15,15 +15,14 @@
}
.content-list {
width: 35%;
width: 33%;
padding: 15px;
position: absolute;
bottom: 0;
top: 0;
left: 0;
border-right: $lightbrown 2px solid;
border-right: $lightbrown 1px solid;
background: #fff;
box-shadow: $shadow;
@media (max-width: 800px) {
width: auto;
@ -170,15 +169,13 @@
// --------------------------------------------------
.content-preview {
width: 65%;
width: 67%;
padding: 15px;
position: absolute;
bottom:0;
top:0;
right:0;
border-left:$lightbrown 2px solid;
background: #fff;
box-shadow: $shadow;
@media (max-width: 800px) {
width: auto;
left: 100%;

View File

@ -6,16 +6,11 @@
// The main post title
.entry-container .entry-title {
@extend .box;
height: 57px;
padding: 2px 15px;
margin-bottom: 5px;
position: relative;
@media (max-width: 400px) {
box-shadow: none;
}
input {
border: 0;
margin: 0;
@ -45,8 +40,8 @@
}
// The two content panel wrappers, positioned left/right
.entry-markdown { left: 0; border-right: $lightbrown 2px solid; }
.entry-preview { right: 0; border-left: $lightbrown 2px solid; }
.entry-markdown { left: 0; }
.entry-preview { right: 0; border-left: $lightbrown 1px solid; }
// The visual styles for both panels
.entry-markdown,
@ -56,12 +51,8 @@
position: absolute;
bottom: 40px; // height of the publish bar
top: 61px; // height of the post title + margin
border-top: $lightbrown 1px solid;
background: #fff;
box-shadow: $shadow;
@media (max-width: 400px) {
box-shadow: none;
}
// Convert all content areas to small boxes
@media (max-width: 1000px) {

View File

@ -28,69 +28,6 @@
}
//
// Box
// --------------------------------------------------
.box {
padding: 15px;
margin-bottom: 15px;
background: #fff;
position: relative;
box-shadow: $shadow;
header {
height:14px;
border-bottom: 1px solid $lightbrown;
padding-bottom: 15px;
margin-bottom: 15px;
text-transform: uppercase;
font-size:0.85em;
color: $brown;
}
footer {
height:14px;
border-top: 1px solid $lightbrown;
padding-top: 10px;
margin-top:15px;
text-transform: uppercase;
font-size:0.85em;
color: $brown;
}
header a,
footer a {
color:$brown;
&:hover {
color:$darkgrey;
text-decoration: none;
}
}
}
//
// Main
// --------------------------------------------------
main {
position: absolute;
top: 55px;
right: 15px;
bottom: 0;
left: 15px;
padding: 0;
@media (max-width: 400px) {
top: 40px;
left: 0;
right: 0;
}
}
//
// Floating Header
// --------------------------------------------------