// Place all the styles related to the home controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

@import 'library';

section.home-page {
  margin-top: 1em;
  margin-bottom: 1em;
  text-align: center;
  
  h1, h2 {
    padding: 0.25em;
    
    // When in edit mode, the border around the text area will grow/shrink
    // to fit the content, but we limit how narrow it will shrink to; this 
    // seems to give a better user experience.
    margin: auto;
    min-width: 10em;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    
    &.visible {
      display: block-inline;
    }
    
    &.hidden {
      display: none;
    }
  }
  
  h2 {
    font-size: 1.2rem;
  }
  
  nav {
    margin-top: 2em;
    
    a {
      margin-left: 1em;
      margin-right: 1em;
    }
  }
}

.view-mode {
  // Specify a hidden border so that the element does not change size
  // when we make the border visible in edit mode.
  border: 1px solid white;
}

.edit-mode {
  // Place an unobtrusive border around items that the user can edit
  // when they are in edit mode.
  border: 1px solid #eee;
}

// Place all the styles related to the home controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

@import 'library';

section.home-page {
  margin-top: 3em;
  margin-bottom: 3em;
  text-align: center;
  
  h1, h2 {
    padding: 0.25em;
    
    // When in edit mode, the border around the text area will grow/shrink
    // to fit the content, but we limit how narrow it will shrink to; this 
    // seems to give a better user experience.
    margin: auto;
    min-width: 10em;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    
    &.visible {
      display: block-inline;
    }
    
    &.hidden {
      display: none;
    }
  }
  
  h2 {
    font-size: 1.2rem;
  }
  
  nav {
    margin-top: 2em;
    
    a {
      margin-left: 1em;
      margin-right: 1em;
    }
  }
}

.view-mode {
  // Specify a hidden border so that the element does not change size
  // when we make the border visible in edit mode.
  border: 1px solid white;
}

.edit-mode {
  // Place an unobtrusive border around items that the user can edit
  // when they are in edit mode.
  border: 1px solid #eee;
}

Increase top and bottom margins of home page body
Increase top and bottom margins of home page body
