style.scssに設定をまとめる
parent
7747b52bd2
commit
97f298aec9
|
@ -26,9 +26,11 @@ $selection-font-color: #fff;
|
|||
|
||||
// コンテナ
|
||||
$container-box-shadow: 0 0 10px 0 #ddd;
|
||||
$container-width: 80vw;
|
||||
|
||||
// ヘッダ
|
||||
$header-background: #f2f2f2;
|
||||
$header-height: 3em;
|
||||
$header-link-color: #694;
|
||||
$header-mobile-box-shadow: 0 0 5px 2px rgba(0,0,0,0.3);
|
||||
$header-img-vertical-adjustment: -.4em;
|
||||
|
@ -57,9 +59,15 @@ $footer-text-color: #fff;
|
|||
// モバイルメニュー
|
||||
$mobile-menu-background: #555;
|
||||
$mobile-menu-text-color: #fff;
|
||||
$mobile-menu-width: 70vw;
|
||||
|
||||
// トップに戻るボタン
|
||||
$top-button-opacity: 0.75;
|
||||
|
||||
// Modなどのスクリーンショット
|
||||
$screenshot-background: #eee;
|
||||
$screenshot-max-height: 250px;
|
||||
$screenshot-max-width: 500px;
|
||||
|
||||
// ----- インポート ----- //
|
||||
|
||||
|
|
|
@ -4,10 +4,7 @@
|
|||
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);
|
||||
$top-padding: calc($header-height - $font-size-mobile);
|
||||
|
||||
padding-top: $top-padding;
|
||||
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
// ~ IE11
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
width: 80vw;
|
||||
width: $container-width;
|
||||
|
||||
header {
|
||||
border-bottom: $border-default;
|
||||
|
|
|
@ -3,8 +3,8 @@ header {
|
|||
background: $header-background;
|
||||
box-sizing: border-box;
|
||||
font-weight: bold;
|
||||
height: 3em;
|
||||
line-height: 3em;
|
||||
height: $header-height;
|
||||
line-height: $header-height;
|
||||
|
||||
@include media-desktop {
|
||||
padding: 0 1em;
|
||||
|
|
|
@ -4,7 +4,7 @@ amp-sidebar {
|
|||
color: $mobile-menu-text-color;
|
||||
padding: 1em;
|
||||
text-align: center;
|
||||
width: 75vw;
|
||||
width: $mobile-menu-width;
|
||||
|
||||
a {
|
||||
&:link,
|
||||
|
@ -38,7 +38,7 @@ amp-sidebar {
|
|||
}
|
||||
|
||||
.top-button {
|
||||
opacity: 0.75;
|
||||
opacity: $top-button-opacity;
|
||||
position: fixed;
|
||||
right: 1em;
|
||||
bottom: 1em;
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
// スクリーンショット
|
||||
.screenshot {
|
||||
background: $screenshot-background;
|
||||
max-height: 250px;
|
||||
max-width: 500px;
|
||||
max-height: $screenshot-max-height;
|
||||
max-width: $screenshot-max-width;
|
||||
|
||||
img {
|
||||
object-fit: contain;
|
||||
|
|
Loading…
Reference in New Issue