shared components for redesigned layout

This commit is contained in:
Zachary Chai
2016-10-25 10:10:27 -04:00
parent 3529e97a08
commit 551b64bb59
10 changed files with 46 additions and 150 deletions

View File

@ -1,15 +1,3 @@
// Place all the styles related to the landing controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
// Bootstrap
@import "bootstrap-sprockets";
@import "bootstrap";
@import "bootstrap-social";
@import "font-awesome";
.room {
.room-link {
margin: 0 auto;
}
}

View File

@ -1,79 +0,0 @@
/* Space out content a bit */
body {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
padding-right: 1rem;
padding-left: 1rem;
}
/* Custom page header */
.header {
padding-bottom: 1rem;
border-bottom: .05rem solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 3rem;
}
/* Custom page footer */
.footer {
padding-top: 1.5rem;
color: #777;
border-top: .05rem solid #e5e5e5;
}
/* Customize container */
@media (min-width: 48em) {
.container {
max-width: 72rem;
}
}
.container-narrow > hr {
margin: 2rem 0;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
border-bottom: .05rem solid #e5e5e5;
}
.jumbotron .btn {
padding: .75rem 1.5rem;
font-size: 1.5rem;
}
/* Supporting marketing content */
.marketing {
margin: 3rem 0;
}
.marketing p + h4 {
margin-top: 1.5rem;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 48em) {
/* Remove the padding we set earlier */
.header,
.marketing,
.footer {
padding-right: 0;
padding-left: 0;
}
/* Space out the masthead */
.header {
margin-bottom: 2rem;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
}
}

View File

@ -10,7 +10,7 @@ html, body {
}
.header {
margin: 20px 40px;
padding: 20px 40px;
.logo {
max-width: 150px;
@ -19,20 +19,14 @@ html, body {
}
.footer {
margin: 20px;
padding: 20px;
}
.page-header {
margin-top: 60px;
margin-top: 100px;
border: 0;
}
.vertical-center {
display: inline-block;
vertical-align: middle;
float: none;
}
.content-box {
.center-block {
float: none;