simplicity.scss

%simplicity_theme {
  box-sizing: border-box;
  background-color: #fff;
  margin-bottom: 30px;
  font-size: 16px;
  line-height: 170%;

  img {
    max-width: 100%;
    height: auto !important;
  }

  // 見出し
  h1, h2, h3, h4, h5, h6 {
    line-height: 130%;
    color: #333;
    position: relative;
    margin-top: 35px;
    margin-bottom: 20px;
  }

  h1 {
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 30px;
    line-height: 117%;
  }

  h2 {
    margin: 40px 0 20px;
    padding: 25px 0;
    font-size: 26px;
  }

  h3 {
    font-size: 23px;
    border-bottom: 5px solid #e7e7e7;
    padding: 10px 0;
  }

  h4 { border-bottom: 5px dashed #eee; }

  h4, h5, h6 {
    font-size: 20px;
    padding: 8px 0;
  }

  // アンカー
  a {
    color: #2098A8;
    word-wrap: break-word;
  }

  a:hover { color: #C03; }

  // 引用
  blockquote {
    background: none repeat scroll 0 0 rgba(245, 245, 245, 0.8);
    border: 1px solid #FFFFFF;
    margin: 1em 0;
    padding: 20px 55px;
    position: relative;
  }

  blockquote:before {
    color: #C8C8C8;
    content: """;
    font-family: serif;
    font-size: 600%;
    left: 0;
    line-height: 1em;
    position: absolute;
    top: 0;
  }

  blockquote:after {
    color: #C8C8C8;
    content: """;
    font-family: serif;
    font-size: 600%;
    line-height: 0;
    position: absolute;
    right: 0;
    bottom: -16px;
  }

  /* Internet Explorer11のみに適用したい設定 */
  @media screen and (min-width: 0 \0
  ) {
    *::-ms-backdrop, blockquote:before { left: -55px; }
    *::-ms-backdrop, blockquote:after { right: -55px; }
  }

  // リスト
  ul, ol { margin-left: 1em !important; }

  dl { margin: 30px 0; }

  dt { font-weight: bold; }

  dd {
    margin-left: 40px;
    margin-bottom: 5px;
  }

  // テーブル
  table {
    border-collapse: collapse;
    margin: 15px 0;
  }

  th {
    border: solid 1px #ccc;
    background-color: #eee;
  }

  td { border: solid 1px #ccc; }

  th, td { padding: 3px 5px; }

  ol, ul, dl {
    line-height: 150%;
    margin: 30px 0;
  }

  ol ol, ul ul, dl dl { margin: 0; }

  li { line-height: 170% !important; }

  // その他
  pre {
    background-color: #eee;
    border: 1px solid #ccc;
    padding: 7px;
    overflow: auto;
  }

  hr {
    color: #ddd;
    margin: 30px 0;
    width: 98%;
    border: 1px solid #ddd;
  }
}


%simplicity_mobile_theme {
  @extend %simplicity_theme;
  padding: 0;
  margin-left: 0;
  margin-right: 0;

  br { display: none; }

  img {
    padding: 0 !important;
    margin: 0 auto !important;
  }

  h1, h2, h3, h4, h5, h6 { font-size: 20px }

  h1 { margin-top: 20px; }

  h2 {
    margin:30px 0 !important;
    padding: 15px 0;
  }

  h4, h5, h6 { padding: 8px 0; }

  blockquote {
    padding: 10px;
    clear: both;
  }

  blockquote:before, blockquote:after {
    display:none;
  }

  th, td {
    padding: 1px 2px;
    font-size: 85%;
  }

  ul, ol { padding-left: 2em; }

  ol, ul, dl {
    line-height: 1.8em !important;
  }

  ol ol, ul ul, dl dl{ margin:0; }
}