6 files changed, 108 insertions(+), 2 deletions(-)

M docs/index.html
M docs/static/stylesheet.css
A docs/static/yc.js
M site/theme/index.html
M site/theme/static/stylesheet.css
A site/theme/static/yc.js

@@ 85,6 85,16 @@
         frameborder="0"
       />
     </div>
+
+    <div class="main-iframe" id="music">
+      <img src="" alt="playlist" class="playlist" id="playlist" />
+      <div id="right">
+        <h2 id="title"></h2>
+        <h3 id="artist"></h3>
+      </div>
+
+      <script src="/yc.js"></script>
+    </div>
      
   </body>
 </html>=
\ No newline at end of file

@@ 1,1 1,1 @@
-:root { --border-color: #002b36; --border-acent-color: #2aa198; --shadow-color: #657b83; --background-color: #fdf6e3; --main-background-color: #fff; --text-color: black; --code-color: #eee8d5; scrollbar-color: var(--border-acent-color) var(--background-color); } ::-webkit-scrollbar { color: var(--border-acent-color); background: var(--background-color); } ::selection { background-color: var(--border-acent-color); color: var(--code-color); } body { background-color: var(--background-color); font-family: serif; } main { margin: auto; width: 50%; background-color: var(--main-background-color); color: var(--text-color); border: 2px solid var(--border-color); padding: 0; box-shadow: 5px 5px 0px 0px var(--shadow-color); margin-bottom: 3rem; position: relative; } main h1 { font-size: 230%; } main { font-size: 115%; } main iframe { position: absolute; bottom: 0; left: 0; } main hr { border: 1px solid var(--border-acent-color); } main blockquote { border-left-width: 2px; border-left-style: solid; border-left-color: var(--border-acent-color); padding-left: 20px; margin-left: 20px; } main pre { padding: 3px; border-radius: 3px; background-color: var(--code-color); } .imgcontainer { border: 2px solid var(--border-acent-color); box-shadow: 5px 5px 0px 0px var(--shadow-color); padding-top: 15px; margin-left: 10px; float: right; text-align: center; margin-bottom: 10px; } main h2 { text-align: center; } .imgcontainer img { border-top: 2px solid var(--border-acent-color); max-width: 100%; } main .imgcontainer p { color: #1f6161; /* a11y */ } .titlebar { padding: 0; padding-left: 10px; padding-right: 10px; /* border on bottom */ border-bottom: 2px solid var(--border-color); line-height: 80%; font-size: x-small; } .titlebar a { text-decoration: none; color: var(--text-color); } .titlebar h2 { text-align: left; } .titlebar { align-self: left; } .ai { float: right; } .content { padding: 0px 10px 10px 10px; } .main-iframe { margin: auto; width: 50%; background-color: var(--main-background-color); color: var(--text-color); border: 2px solid var(--border-color); padding: 0; height: 100px; box-shadow: 5px 5px 0px 0px var(--shadow-color); margin-bottom: 3rem; position: relative; } .widgets { margin: auto; width: 50%; background-color: var(--main-background-color); color: var(--text-color); border: 2px solid var(--border-color); padding: 0; box-shadow: 5px 5px 0px 0px var(--shadow-color); margin-bottom: 1rem; margin-top: -2rem; position: relative; } @media screen and (max-width: 800px) { main { width: 95%; min-height: 95vh; } .main-iframe { width: 95%; } .widgets { width: 95%; max-height: calc(31 * 3); } .imgcontainer { width: 90%; width: 50%; margin-left: 0; margin: 0 auto; } :root { scrollbar-width: 5px; } } @media screen and (min-width: 800px) and (max-width: 1000px) { main { width: 80%; min-height: 95vh; } .main-iframe { width: 80%; } .widgets { width: 80%; max-height: calc(31 * 3); } .imgcontainer { width: 80%; width: 50%; margin-left: 0; margin: 0 auto; } } @media screen and (min-width: 800px) { .widgets { max-height: 31px; } .imgcontainer { max-width: 25%; } } >
\ No newline at end of file
+:root { --border-color: #002b36; --border-acent-color: #2aa198; --shadow-color: #657b83; --background-color: #fdf6e3; --main-background-color: #fff; --text-color: black; --code-color: #eee8d5; scrollbar-color: var(--border-acent-color) var(--background-color); } ::-webkit-scrollbar { color: var(--border-acent-color); background: var(--background-color); } ::selection { background-color: var(--border-acent-color); color: var(--code-color); } body { background-color: var(--background-color); font-family: serif; } main { margin: auto; width: 50%; background-color: var(--main-background-color); color: var(--text-color); border: 2px solid var(--border-color); padding: 0; box-shadow: 5px 5px 0px 0px var(--shadow-color); margin-bottom: 3rem; position: relative; } main h1 { font-size: 230%; } main { font-size: 115%; } main iframe { position: absolute; bottom: 0; left: 0; } main hr { border: 1px solid var(--border-acent-color); } main blockquote { border-left-width: 2px; border-left-style: solid; border-left-color: var(--border-acent-color); padding-left: 20px; margin-left: 20px; } main pre { padding: 3px; border-radius: 3px; background-color: var(--code-color); } .imgcontainer { border: 2px solid var(--border-acent-color); box-shadow: 5px 5px 0px 0px var(--shadow-color); padding-top: 15px; margin-left: 10px; float: right; text-align: center; margin-bottom: 10px; } main h2 { text-align: center; } .imgcontainer img { border-top: 2px solid var(--border-acent-color); max-width: 100%; } main .imgcontainer p { color: #1f6161; /* a11y */ } .titlebar { padding: 0; padding-left: 10px; padding-right: 10px; /* border on bottom */ border-bottom: 2px solid var(--border-color); line-height: 80%; font-size: x-small; } .titlebar a { text-decoration: none; color: var(--text-color); } .titlebar h2 { text-align: left; } .titlebar { align-self: left; } .ai { float: right; } .content { padding: 0px 10px 10px 10px; } .main-iframe { margin: auto; width: 50%; background-color: var(--main-background-color); color: var(--text-color); border: 2px solid var(--border-color); padding: 0; height: 100px; box-shadow: 5px 5px 0px 0px var(--shadow-color); margin-bottom: 3rem; position: relative; } .widgets { margin: auto; width: 50%; background-color: var(--main-background-color); color: var(--text-color); border: 2px solid var(--border-color); padding: 0; box-shadow: 5px 5px 0px 0px var(--shadow-color); margin-bottom: 1rem; margin-top: -2rem; position: relative; } .music img { max-height: 100px; } .playlist { max-height: 100px; float: right; } #right { float: left; margin-left: 0.5rem; margin-bottom: 0.2rem; } #right h2 { font-size: x-large; } #right h3 { font-size: larger; color: gray; } @media screen and (max-width: 800px) { main { width: 95%; min-height: 95vh; } .main-iframe { width: 95%; } .widgets { width: 95%; max-height: calc(31 * 3); } .imgcontainer { width: 90%; width: 50%; margin-left: 0; margin: 0 auto; } :root { scrollbar-width: 5px; } } @media screen and (min-width: 800px) and (max-width: 1000px) { main { width: 80%; min-height: 95vh; } .main-iframe { width: 80%; } .widgets { width: 80%; max-height: calc(31 * 3); } .imgcontainer { width: 80%; width: 50%; margin-left: 0; margin: 0 auto; } } @media screen and (min-width: 800px) { .widgets { max-height: 31px; } .imgcontainer { max-width: 25%; } } <
\ No newline at end of file

@@ 0,0 1,31 @@
+// Thanks a lot Aria! https://tacohitbox.com!
+
+const title = document.getElementById("title");
+const artist = document.getElementById("artist");
+const playlist = document.getElementById("playlist");
+
+const getData = () => {
+  fetch("https://yc.tacohitbox.com/api/last/l3gacyb3ta").then((response) => {
+    response.json().then((data) => {
+      const track = data.response.track;
+      const cover = data.response.cover;
+
+      title.innerHTML = track.name;
+      artist.innerHTML =
+        data.response.artist.name +
+        " - " +
+        (data.response["est-timestamp"] == "live"
+          ? "listening now"
+          : data.response["est-timestamp"]);
+
+      playlist.setAttribute("src", cover);
+
+      return;
+    });
+  });
+};
+
+getData();
+
+// run getData every 10 seconds
+setInterval(getData, 1000);

@@ 64,6 64,16 @@
         frameborder="0"
       />
     </div>
+
+    <div class="main-iframe" id="music">
+      <img src="" alt="playlist" class="playlist" id="playlist" />
+      <div id="right">
+        <h2 id="title"></h2>
+        <h3 id="artist"></h3>
+      </div>
+
+      <script src="/yc.js"></script>
+    </div>
     {% endif %} {% if code == 'true' %}
     <script src="/static/highlight.min.js"></script>
     <script>

@@ 21,7 21,7 @@
 
 body {
   background-color: var(--background-color);
-  font-family: serif; 
+  font-family: serif;
 }
 
 main {


@@ 151,6 151,30 @@ main .imgcontainer p {
   position: relative;
 }
 
+.music img {
+  max-height: 100px;
+}
+
+.playlist {
+  max-height: 100px;
+  float: right;
+}
+
+#right {
+  float: left;
+  margin-left: 0.5rem;
+  margin-bottom: 0.2rem;
+}
+
+#right h2 {
+  font-size: x-large;
+}
+
+#right h3 {
+  font-size: larger;
+  color: gray;
+}
+
 @media screen and (max-width: 800px) {
   main {
     width: 95%;

@@ 0,0 1,31 @@
+// Thanks a lot Aria! https://tacohitbox.com!
+
+const title = document.getElementById("title");
+const artist = document.getElementById("artist");
+const playlist = document.getElementById("playlist");
+
+const getData = () => {
+  fetch("https://yc.tacohitbox.com/api/last/l3gacyb3ta").then((response) => {
+    response.json().then((data) => {
+      const track = data.response.track;
+      const cover = data.response.cover;
+
+      title.innerHTML = track.name;
+      artist.innerHTML =
+        data.response.artist.name +
+        " - " +
+        (data.response["est-timestamp"] == "live"
+          ? "listening now"
+          : data.response["est-timestamp"]);
+
+      playlist.setAttribute("src", cover);
+
+      return;
+    });
+  });
+};
+
+getData();
+
+// run getData every 10 seconds
+setInterval(getData, 1000);