3ae507d6 by root

インタビューページのスタイル修正

1 parent e6f1a889
......@@ -3449,7 +3449,6 @@ body.itemid-132 table {
.interview .items-leading div .page-header {
display: block;
width: 100%;
max-width: 800px;
padding: 0;
margin: 32px 0;
}
......@@ -3462,23 +3461,29 @@ body.itemid-132 table {
padding: 0;
}
/* 記事情報(公開日など)にデフォルトでかかっているスタイルを取り消し */
.interview .items-leading div .article-info > * {
margin-bottom: 0;
}
.interview .items-leading div .article-info {
/* 記事情報が一つ以上表示された場合に横並びにする */
display: flex;
display: block;
/* 記事情報のpositionを右下に指定 */
position: absolute;
bottom: -45px;
margin: 0;
bottom: 8px;
right: 0;
}
.interview .items-leading div .item-image {
display: flex;
/* 配下のimage要素a要素を縦方向にセンタリング */
/* flexによる圧縮をさせない */
flex-shrink: 0;
/* 配下のimage要素とa要素を縦方向にセンタリング */
align-items: center;
width: 100px;
/* 横並びしている隣のdivに潰されないようにmin-widthを指定。 */
min-width: 100px;
height: 100px;
width: 120px;
height: 90px;
/* デフォルトでかかっているfloatプロパティの解除 */
float: none;
/* 配下の画像のはみ出した部分は非表示にし、トリミングする */
......@@ -3507,10 +3512,9 @@ body.itemid-132 table {
}
.interview .items-leading div .item-image {
max-width: 500px;
width: 100%;
/*max-height = 画面幅 - 両サイドのpaddingとしてwidthと揃え、正方形にトリミングする */
max-height: calc(100vw - 30px);
/*max-height = 画面幅 - 両サイドのpadding * 0.75として4(幅):3(高さ)とする*/
max-height: calc((100vw - 30px) * 0.75);
height: auto;
margin: 20px 0 0;
}
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!