From ea64ae5ecdb3dc62e0f816264736dff3ce148ba8 Mon Sep 17 00:00:00 2001 From: Markus Schlichting Date: Wed, 20 Sep 2023 21:37:40 +0200 Subject: [PATCH] replace mastodon widget with new script also remove twitter --- css/mastodon-timeline.min.css | 1 + css/mastodon.widget.css | 264 ------------ index.html | 28 +- scripts/mastodon-timeline.js | 787 ++++++++++++++++++++++++++++++++++ scripts/mastodon.widget.js | 382 ----------------- 5 files changed, 795 insertions(+), 667 deletions(-) create mode 100644 css/mastodon-timeline.min.css delete mode 100644 css/mastodon.widget.css create mode 100644 scripts/mastodon-timeline.js delete mode 100644 scripts/mastodon.widget.js diff --git a/css/mastodon-timeline.min.css b/css/mastodon-timeline.min.css new file mode 100644 index 0000000..c3fcc84 --- /dev/null +++ b/css/mastodon-timeline.min.css @@ -0,0 +1 @@ +:root{--text-max-lines:none}:root,html[data-theme=light]{--bg-color:#fff;--bg-hover-color:#d9e1e8;--line-gray-color:#c0cdd9;--content-text:#000;--link-color:#2a6496;--error-text-color:#8b0000}html[data-theme=dark]{--bg-color:#282c37;--bg-hover-color:#313543;--line-gray-color:#393f4f;--content-text:#fff;--link-color:#8c8dff;--error-text-color:#fe6c6c}.mt-timeline{height:100%;overflow-y:auto;position:relative;background:var(--bg-color);scrollbar-color:var(--bg-hover-color) rgba(0,0,0,.1)}.mt-timeline a,.mt-timeline a:active,.mt-timeline a:link{text-decoration:none;color:var(--link-color)}.mt-timeline a:not(.toot-preview-link):hover{text-decoration:underline}.mt-timeline::-webkit-scrollbar{width:.75rem;height:.75rem}.mt-timeline::-webkit-scrollbar-corner{background:0 0}.mt-timeline::-webkit-scrollbar-thumb{border:0 var(--content-text);border-radius:2rem;background:var(--bg-hover-color)}.mt-timeline::-webkit-scrollbar-track{border:0 var(--content-text);border-radius:0;background:rgba(0,0,0,.1)}.mt-body{padding:1rem 1.5rem;white-space:pre-wrap;word-wrap:break-word}.mt-body .invisible{font-size:0;line-height:0;display:inline-block;width:0;height:0;position:absolute}.mt-toot{margin:.25rem;padding:1rem .5rem 1.5rem 4rem;position:relative;min-height:3.75rem;background-color:transparent;border-bottom:1px solid var(--line-gray-color)}.mt-toot:focus,.mt-toot:hover{cursor:pointer;background-color:var(--bg-hover-color)}.mt-toot p:last-child{margin-bottom:0}.mt-avatar{width:3rem;height:3rem;position:absolute;top:1rem;left:.25rem;border-radius:.25rem;overflow:hidden}.mt-avatar-image img{width:100%;height:auto}.mt-avatar-image .mt-avatar-boosted{width:2.25rem;height:2.25rem;border-radius:.25rem;overflow:hidden}.mt-avatar-image .mt-avatar-account{width:1.5rem;height:1.5rem;top:1.5rem;left:1.5rem;position:absolute;border-radius:.25rem;overflow:hidden}.mt-user{display:table;font-weight:600;margin-bottom:1rem}.mt-user>a{color:var(--content-text)!important}.toot-text{margin-bottom:.25rem;color:var(--content-text)}.toot-text .spoiler-link{display:inline-block}.toot-text .spoiler-text-hidden{display:none}.toot-text.truncate{display:-webkit-box;overflow:hidden;-webkit-line-clamp:var(--text-max-lines);-webkit-box-orient:vertical}.toot-text:not(.truncate) .ellipsis::after{content:"..."}.toot-text blockquote{border-left:.25rem solid var(--line-gray-color);margin-left:0;padding-left:.5rem}.toot-text .custom-emoji{height:1.5rem;min-width:1.5rem;margin-bottom:-.25rem;width:auto}.toot-poll{margin-bottom:.25rem;color:var(--content-text)}.toot-poll ul{list-style:none;padding:0;margin:0}.toot-poll ul li{font-size:.9rem;margin-bottom:.5rem}.toot-poll ul li:not(:last-child){margin-bottom:.25rem}.toot-poll ul li:before{content:"◯";padding-right:.5rem}.toot-media{overflow:hidden;margin-bottom:.5rem}.toot-media-preview{position:relative;margin-top:.25rem;height:auto;text-align:center;width:100%}.toot-media>.spoiler-link{position:absolute;top:50%;left:50%;z-index:1;transform:translate(-50%,-50%)}.toot-media-spoiler>img{filter:blur(2rem)}.toot-media-preview a{display:block;position:absolute;top:0;right:0;bottom:0;left:0}.img-ratio14_7{position:relative;padding-top:56.95%;width:100%}.img-ratio14_7>img{width:100%;height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.toot-preview-link{min-height:4rem;display:flex;flex-direction:row;border:1px solid var(--line-gray-color);border-radius:.5rem;color:var(--link-color);font-size:.8rem;margin:1rem 0 .5rem 0;overflow:hidden}.toot-preview-image{width:40%;align-self:stretch}.toot-preview-image img{display:block;width:100%;height:100%;object-fit:cover}.toot-preview-noImage{width:40%;font-size:1.5rem;align-self:center;text-align:center}.toot-preview-content{width:60%;display:flex;align-self:center;flex-direction:column;padding:.5rem 1rem;gap:.5rem}.toot-preview-title{font-weight:600}.spoiler-link{border-radius:2px;background-color:var(--line-gray-color);border:0;color:var(--content-text);font-weight:700;font-size:.7rem;padding:0 .35rem;text-transform:uppercase;line-height:1.25rem;cursor:pointer;vertical-align:top}.toot-date{float:right;text-decoration: none;}.mt-error{position:absolute;display:flex;flex-direction:column;height:calc(100% - 3.5rem);width:calc(100% - 4.5rem);justify-content:center;align-items:center;color:var(--error-text-color);padding:.75rem;text-align:center}.mt-error-icon{font-size:2rem}.mt-error-message{padding:1rem 0}.mt-error-message hr{color:var(--line-gray-color)}.mt-body>.loading-spinner{position:absolute;width:3rem;height:3rem;margin:auto;top:calc(50% - 1.5rem);right:calc(50% - 1.5rem)}.loading-spinner{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.0' viewBox='0 0 128 128' %3E%3Cg%3E%3Cpath d='M64 128A64 64 0 0 1 18.34 19.16L21.16 22a60 60 0 1 0 52.8-17.17l.62-3.95A64 64 0 0 1 64 128z' fill='%23404040'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='1000ms' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;background-color:transparent;background-size:min(2.5rem,calc(100% - .5rem))}.mt-footer{margin:1rem auto 2rem auto;padding:0 2rem;text-align:center}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} \ No newline at end of file diff --git a/css/mastodon.widget.css b/css/mastodon.widget.css deleted file mode 100644 index dad88a4..0000000 --- a/css/mastodon.widget.css +++ /dev/null @@ -1,264 +0,0 @@ -/** - * Mastodon User Timeline Widget - * Copyright (c) 2017 有限会社アゼット - * ライセンスに関して、LICENSEファイルを参照下さい。 - * see license file for details: https://github.com/AzetJP/mastodon-timeline-widget/blob/master/LICENSE.txt - * - * @author Azet - * @version 1.05 - */ - -/* main container >>> */ - -.mt-header, -.mt-footer { - padding: 10px 10px; -} - -.mastodon-timeline a:link, -.mastodon-timeline a:active, -.mastodon-timeline a { - text-decoration: none; - font-weight: normal; -} - -.mt-header { - font-weight: bold; - border-bottom: 1px solid purple; -} - -.mt-header h4 { - display: inline-block; -} - -.mt-body { - height: 500px; - overflow-y: auto; - -webkit-overflow-scrolling: touch; - - /* force wrap */ - white-space: pre-wrap; /* css-3 */ - white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ - white-space: -pre-wrap; /* Opera 4-6 */ - white-space: -o-pre-wrap; /* Opera 7 */ - word-wrap: break-word; /* Internet Explorer 5.5+ */ -} - -.mt-body .invisible { - display: none; -} - -.mt-loading { - padding: 10px; - text-align: center; -} - -.mt-footer { - text-align: center; -} - -/* toots -messages */ -.mt-toot { - margin: 5px; - padding: 5px 5px 5px 65px; - position: relative; - min-height: 60px; -} - -.mt-footer, -.mt-toot:nth-child(n+2) { - border-top: 1px solid purple; -} - -.mt-toot p:last-child { - margin-bottom: 0; -} - -.mt-date { - text-align: right; -} - -.mt-date .nsfw { - background: purple; - color: white; - margin-right: 1em; - padding: 0 3px; - border-radius: 2px; -} - - -.mt-avatar { - position: absolute; - top: 5px; - left: 5px; - /*margin: 0 10px 5px 0;*/ - width: 50px; - height: 50px; - border-radius: 5px; - box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); -} - -.mt-avatar-boosted { - width: 40px; - height: 40px; -} - -.mt-avatar-booster { - width: 25px; - height: 25px; - top: 25px; - left: 25px; -} - -.mt-error { - color: darkred; - background: lightpink; - margin: 5px; - padding: 10px; -} - -/* spoiler === */ -a.btn-spoiler { - margin-left: 5px; - padding: 3px; - background: purple; - color: white; - border-radius: 3px; - font-size: 80%; -} -.spoiler-body { - display: none; -} - -/* medias === */ -.toot-media-preview { - position: relative; - margin-top: 5px; - height: 100px; - background-size: cover; - background-position: center center; - box-sizing: border-box; - color: white; - text-align: center; - padding-top: 40px; -} - -.toot-media-preview a { - display: block; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; -} - -/* toots status === */ -.toot-status { - font-weight: bold; - margin-top: 5px; -} - -.toot-status .toot-status-boosts, -.toot-status .toot-status-favourites { - display: inline-block; - white-space: nowrap; - margin-right: 10px; -} - -/* medias display === */ -.toot-media-filter { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: rgba(0, 0, 0, 0.9); -} - -.toot-media-zoom { - position: fixed; - top: 5%; - right: 5%; - bottom: 5%; - left: 5%; -} - -/* <<< */ - -/* light theme >>> */ -.mastodon-timeline-light { - background: #fafafa; - color: #555; -} - -.mastodon-timeline-light .mt-footer, -.mastodon-timeline-light .mt-header { - background: #eee; -} - -.mastodon-timeline-light a:link, -.mastodon-timeline-light a:active, -.mastodon-timeline-light a { - color: #26afff; -} - -.mastodon-timeline-light .mt-header { - border-bottom-color: lightgrey; -} - -.mastodon-timeline-light .mt-footer, -.mastodon-timeline-light .mt-toot:nth-child(n+2) { - border-top-color: lightgrey; -} - -.mastodon-timeline-light .toot-status, -.mastodon-timeline-light .mt-date a { - color: #aaa; -} - -/* spoiler === */ -.mastodon-timeline-light a.btn-spoiler { - background: #26afff; - color: white; -} -/* <<< */ - -/* dark theme >>> */ -.mastodon-timeline-dark { - background: #393f4f; - color: white; -} - -.mastodon-timeline-dark .mt-footer, -.mastodon-timeline-dark .mt-header { - background: #313543; -} - -.mastodon-timeline-dark a:link, -.mastodon-timeline-dark a:active, -.mastodon-timeline-dark a { - color: #2b90d9; -} - -.mastodon-timeline-dark .mt-header { - border-bottom-color: #606984; -} - -.mastodon-timeline-dark .mt-footer, -.mastodon-timeline-dark .mt-toot:nth-child(n+2) { - border-top-color: #606984; -} - -.mastodon-timeline-dark .toot-status, -.mastodon-timeline-dark .mt-date a { - color: #606984; -} - -/* spoiler === */ -.mastodon-timeline-dark a.btn-spoiler { - background: #687390; - color: #393F4F; -} -/* <<< */ - -/* vim set foldmethod=marker foldlevel=0 */ diff --git a/index.html b/index.html index 2f5a7ab..1cab5f0 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@ - +