diff options
Diffstat (limited to 'src/client/components')
| -rw-r--r-- | src/client/components/date-separated-list.vue | 2 | ||||
| -rw-r--r-- | src/client/components/global/ad.vue | 28 |
2 files changed, 20 insertions, 10 deletions
diff --git a/src/client/components/date-separated-list.vue b/src/client/components/date-separated-list.vue index c7ca67582a..9636ee053c 100644 --- a/src/client/components/date-separated-list.vue +++ b/src/client/components/date-separated-list.vue @@ -90,7 +90,7 @@ export default defineComponent({ } else { if (this.ad && item._shouldInsertAd_) { return [h(MkAd, { - class: 'ad', + class: 'a', // advertiseの意(ブロッカー対策) key: item.id + ':ad', prefer: 'horizontal', }), el]; diff --git a/src/client/components/global/ad.vue b/src/client/components/global/ad.vue index 53e6e8b8bb..ee2a7ebe92 100644 --- a/src/client/components/global/ad.vue +++ b/src/client/components/global/ad.vue @@ -85,16 +85,23 @@ export default defineComponent({ background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--ad) 8px, var(--ad) 14px ); > .main { + text-align: center; + > a { - display: block; + display: inline-block; position: relative; - margin: 0 auto; + vertical-align: bottom; + + &:hover { + > img { + filter: contrast(120%); + } + } > img { display: block; - width: 100%; - height: 100%; object-fit: contain; + margin: auto; } > .menu { @@ -106,23 +113,26 @@ export default defineComponent({ } &.square { - > a { + > a , + > a > img { max-width: min(300px, 100%); - max-height: min(300px, 100%); + max-height: 300px; } } &.horizontal { padding: 8px; - > a { + > a , + > a > img { max-width: min(600px, 100%); - max-height: min(100px, 100%); + max-height: 80px; } } &.vertical { - > a { + > a , + > a > img { max-width: min(100px, 100%); } } |