JS 및 CSS로 Transistor.fm 웹사이트를 사용자 정의하는 방법

동영상 사용법(3분)

암호

<script>
window.onload = function () {
  let el;
  if (document.location.pathname === "/episodes") {
    el = document.createElement("div");
    document
      .getElementsByClassName("site-content")[0]
      .parentNode.insertBefore(
        el,
        document.getElementsByClassName("site-content")[0]
      );
  } else {
    // assuming index page
    el = document.getElementsByClassName("site-first-episode")[0];
  }

  el.innerHTML = `
<iframe title="swyx mixtape embed" width="100%" height="390" frameborder="no" scrolling="no" seamless src="https://share.transistor.fm/e/learn-in-podcast/playlist/dark"></iframe>
`;
  el.id = "swyxembed";
};
function makeLive() {
  if (!document.getElementById("swyxembed")) window.onload();
  setTimeout(makeLive, 200);
}
setTimeout(makeLive, 200);
</script>

.site-intro {
  font-size: 1.25rem;
    width: 60ch;
    margin: 0 auto;
}

.site-credits {
    position: fixed;
    width: 100vw;
    bottom: 0;
}

#site-footer {
  display: hidden
}

#swyxembed {
  padding: 2rem;
}
.site-featured-episodes .site-episode,
.site-episode-detail .site-episode {
 display: block;
}
.site-episode {
  display: grid;
  grid-template-areas: "date title"
                       "date desc";
  grid-template-rows: minmax(1rem, auto) 1fr;
  grid-template-columns: 10ch 1fr;
  grid-column-gap: 1rem;
  margin-bottom: 1rem;
}
.site-episode time { grid-area: date }
.site-episode time span { text-transform: none }
.site-episode h2 { grid-area: title; font-size: 1.5rem }
.site-episode .site-episode-summary { grid-area: desc }
.site-episode nav {
   display: none;
}

기타 사용자 정의 아이디어