路傍の石の私性

行動記録帳

Twitterのモーメントをタイル表示するStylishのCSS

Twitterのモーメントをタイル表示するStylishCSSを作ってみた。

これでポートフォリオ鑑賞が進むぅ!か?

/* マージンやら必要ないもの非表示 */
.MomentsPage.MomentsPermalinkPage .AppContent, .MomentsPage.MomentMakerPage .AppContent {
padding: 0 0 0;
width: 100%;
}
.MomentsPage.MomentsPermalinkPage .MomentsPermalinkPage-content, .MomentsPage.MomentsGuidePage .MomentsGuidePage-content {
margin: 0 0;
padding-left: 0;
padding-right: 0;
width: 100%;
}
.MomentCapsuleSummaryGroup--1and3, .MomentCapsuleSummaryGroup--3and1, .MomentCapsuleSummaryGroup--2and2 .MomentCapsuleSummaryGroup-list {
display: none;
}
.MomentsPermalinkPage-related {
display: none;
}
.MomentsPage.MomentsGuidePage .Footer, .MomentsPage.MomentsPermalinkPage .Footer {
display: none;
}

/* タイル表示 */
.MomentsPermalinkPage-tweets {
margin: 0 auto;
width: 90%;
column-count: 3;
}
.MomentCapsuleItem {
margin-bottom: 80px;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
.MomentMediaItem-entity--image{
height:100% ! important;
}
@media (max-width: 1200px) {
.MomentsPermalinkPage-tweets {
column-count: 3;
}
}
@media (max-width: 1000px) {
.MomentsPermalinkPage-tweets {
column-count: 2;
}
}
@media (max-width: 800px) {
.MomentsPermalinkPage-tweets {
column-count: 1;
}
}

/* フロートを削除 */
.MomentFloatingMenu.is-fixed{
display: none;
}