diff --git a/_includes/style.scss b/_includes/style.scss index 595f35e..a971967 100644 --- a/_includes/style.scss +++ b/_includes/style.scss @@ -26,6 +26,7 @@ $selection-font-color: #fff; // コンテナ $container-box-shadow: 0 0 10px 0 #ddd; +$container-padding-top-mobile: 1em; $container-width: 80vw; // ヘッダ diff --git a/_sass/_article.scss b/_sass/_article.scss index 7c58dc9..60fb225 100644 --- a/_sass/_article.scss +++ b/_sass/_article.scss @@ -4,11 +4,8 @@ padding: 0 1em 1em 1em; @include media-mobile { - $line-height: ($font-size * 20 / 14); - $line-height-mobile: ($line-height * 1.1); - $top-padding: ($line-height-mobile * 3 - $font-size-mobile); - - padding-top: $top-padding; + $top-padding: calc(#{$header-height} - #{$font-size-mobile}); + $top-padding-minus: calc(#{$top-padding} * -1); h1[id]::before, h2[id]::before, @@ -19,7 +16,7 @@ content: ""; display: block; height: $top-padding; - margin: -$top-padding 0 0; + margin-top: $top-padding-minus; } } diff --git a/_sass/_container.scss b/_sass/_container.scss index bc41bb4..27d9aaa 100644 --- a/_sass/_container.scss +++ b/_sass/_container.scss @@ -67,5 +67,9 @@ #menu { display: none; } + + #content { + padding-top: calc(#{$header-height} - #{$font-size-mobile} + #{$container-padding-top-mobile}); + } } }