sectionの幅を修正

vivliostyle · Mar 16, 2020 · 4a2a3ce · 4a2a3ce
1 parent d77987c
commit 4a2a3ce
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 23 deletions.
diff --git a/_sass/_markdown_contents.scss b/_sass/_markdown_contents.scss
@@ -30,10 +30,6 @@
   }
 
   // 要素間の隙間
-  *:first-child {
-    margin-top: 0;
-  }
-
   > p,
   > ul,
   > ol,
@@ -52,6 +48,10 @@
     }
   }
 
+  > *:first-child {
+    margin-top: 0;
+  }
+
   @include media_large {
     // 画像を大きく表示
     img {

diff --git a/_sass/_section.scss b/_sass/_section.scss
@@ -2,26 +2,22 @@
   margin: $section_top_bottom auto;
   width: $section_width;
 
-  &:first-child {
-    margin-top: $section_first_top_bottom;
-  }
-
-  &:last-child {
-    margin-bottom: $section_first_top_bottom;
-  }
-
   @include media_large {
     // 幅を広げる
     width: $section_width_large;
+  }
+}
 
-    // 一番上と一番下の余白を縮める
-    &:first-child {
-      margin-top: $section_first_top_bottom_large;
-    }
+@mixin section_color($background_color) {
+  width: 100%;
+  margin: 0;
+  padding: $section_top_bottom calc((100% - #{$section_width}) / 2);
+  background-color: $background_color;
 
-    &:last-child {
-      margin-bottom: $section_first_top_bottom_large;
-    }
+  @include media_large {
+    // 幅を広げる
+    width: 100%;
+    padding: $section_top_bottom calc((100% - #{$section_width_large}) / 2);
   }
 }
 
@@ -41,16 +37,18 @@
   @include section;
 }
 
+.section--gray {
+  @include section;
+  @include section_color($gray_lighter);
+}
+
 .section--center {
   @include section;
   @include center;
 }
 
 .section--center--gray {
   @include section;
+  @include section_color($gray_lighter);
   @include center;
-
-  margin: 0;
-  padding: $section_top_bottom calc((100% - #{$section_width}) / 2);
-  background-color: $gray_lighter;
 }