embed

content/games/trainyard-trouble.md

@@ -9,7 +9,7 @@ description: "cargo management game"
 
 [tess](/links/buddies#tess) and i also made this game for a game jam!
 you manage a cargo train terminal with three trains and your goal is to survive as long as you can without the storage area overflowing
-{{<youtube vBq0aBTBh8s>}}
+{{<youtube class="embed" id="vBq0aBTBh8s">}}
 
 we made this for a [godot wildjam](https://godotwildjam.com/) and it was a bit messy!
 the plan was to try out godot 4, which was in alpha 4 at that point, and most of the things worked fine until we tried to export the game... the macos version had sound, but no video, the windows version had video but no sound, but the linux version worked fine so that's great!

content/links/nice_things.md

@@ -13,4 +13,4 @@ description: "this is a list of very good things"
 ## videos
 ### a whole tray of peas
 she just eats the entire tray of peas!!! impressive!
-the raw energy of this is just amazing {{<youtube HWcKcUn7e-8>}}
+the raw energy of this is just amazing {{<youtube id="HWcKcUn7e-8" class="embed">}}

public/games/trainyard-trouble/index.html

@@ -20,8 +20,8 @@
 <p><a href="/links/buddies#tess">tess</a> and i also made this game for a game jam!
 you manage a cargo train terminal with three trains and your goal is to survive as long as you can without the storage area overflowing
 
-<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
-  <iframe src="https://www.youtube.com/embed/vBq0aBTBh8s" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen title="YouTube Video"></iframe>
+<div class="embed">
+  <iframe src="https://www.youtube.com/embed/vBq0aBTBh8s" allowfullscreen title="YouTube Video"></iframe>
 </div>
 </p>
 <p>we made this for a <a href="https://godotwildjam.com/">godot wildjam</a> and it was a bit messy!

public/links/nice_things/index.html

@@ -34,8 +34,8 @@
 </h3>
 <p>she just eats the entire tray of peas!!! impressive!
 the raw energy of this is just amazing 
-<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
-  <iframe src="https://www.youtube.com/embed/HWcKcUn7e-8" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen title="YouTube Video"></iframe>
+<div class="embed">
+  <iframe src="https://www.youtube.com/embed/HWcKcUn7e-8" allowfullscreen title="YouTube Video"></iframe>
 </div>
 </p>
 

public/scss/main.css

@@ -265,7 +265,7 @@ footer {
 #content ul,
 #content ol,
 #content table,
-#content iframe,
+.embed,
 code,
 .postdescription,
 hr,
@@ -273,12 +273,20 @@ hr,
   margin-right: 24%;
   margin-left: 24%; }
 
-#content img,
-#content iframe {
+#content img {
   display: block;
   overflow: hidden;
   max-width: 52%;
-  max-height: 100%; }
+  height: 100%; }
+
+#content .embed {
+  display: block;
+  overflow: hidden;
+  padding: 0; }
+  #content .embed iframe {
+    width: 100%;
+    aspect-ratio: 16/9;
+    margin: 0; }
 
 p code {
   margin-left: 0;
@@ -459,7 +467,7 @@ input[type="checkbox"] {
   align-items: center;
   display: flex; }
 
-img {
+img, iframe {
   border-style: solid; }
 
 .togglelabel::after {
@@ -478,7 +486,8 @@ img {
   align-items: center;
   justify-content: center;
   content: "";
-  border-style: solid; }
+  border-style: solid;
+  padding: 0; }
 
 input:checked + label:after {
   left: calc(100% - 49pt); }

resources/_gen/assets/scss/scss/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content

@@ -265,7 +265,7 @@ footer {
 #content ul,
 #content ol,
 #content table,
-#content iframe,
+.embed,
 code,
 .postdescription,
 hr,
@@ -273,12 +273,20 @@ hr,
   margin-right: 24%;
   margin-left: 24%; }
 
-#content img,
-#content iframe {
+#content img {
   display: block;
   overflow: hidden;
   max-width: 52%;
-  max-height: 100%; }
+  height: 100%; }
+
+#content .embed {
+  display: block;
+  overflow: hidden;
+  padding: 0; }
+  #content .embed iframe {
+    width: 100%;
+    aspect-ratio: 16/9;
+    margin: 0; }
 
 p code {
   margin-left: 0;
@@ -459,7 +467,7 @@ input[type="checkbox"] {
   align-items: center;
   display: flex; }
 
-img {
+img, iframe {
   border-style: solid; }
 
 .togglelabel::after {
@@ -478,7 +486,8 @@ img {
   align-items: center;
   justify-content: center;
   content: "";
-  border-style: solid; }
+  border-style: solid;
+  padding: 0; }
 
 input:checked + label:after {
   left: calc(100% - 49pt); }

themes/battheme

@@ -1 +1 @@
-Subproject commit 1e0860239be372c6a2acb55334b5b64a19aba726
+Subproject commit 87e50d911af1263b31136cc37954e4a0f619a1d1