home videos responsive

.gitignore

@@ -1,2 +1,10 @@
-/_site/
-/.idea/
+_site/
+.sass-cache/
+.jekyll-cache/
+.jekyll-metadata
+# Ignore folders generated by Bundler
+.bundle/
+vendor/
+
+.idea/
+.vscode/

_includes/contact.html

@@ -6,7 +6,7 @@ <h1 class="mb-4"><a name="contact" />contact us</h1>
         12053 Berlin<br>
         <br>  
         <a href="https://instagram.com/prachtsaal_">
-          <img src="/assets/img/Instagram_Glyph_Gradient_RGB_logo.svg.png" class="size-6">
+          <img src="/assets/img/Instagram_Glyph_white_logo.svg.png" class="size-6">
         </a>
     </div>
 

_layouts/default.html

@@ -10,7 +10,7 @@
   {% endif %}
   <meta name="viewport" content="width=device-width, initial-scale=1">
   {% if page.add-js %}
-  <script src="/js/{{ page.add-js }}"></script>
+  <script src="/assets/js/{{ page.add-js }}"></script>
   {% endif %}
 </head>
 
@@ -30,7 +30,7 @@
     </div>
   </div>
 
-<script src="/js/menu.js"></script>
+<script src="/assets/js/menu.js"></script>
 </body>
 
 </html>

_layouts/home.html

@@ -8,18 +8,19 @@ <h2 class="text-left mt-2">{{ page.subtitle }}</h2>
   </div>
 </header>
 
-<div class="flex flex-row justify-center">
+<div class="flex flex-col items-center">
 
   <div class="m-8 md:w-[650px] text-lg">
     {{ content | markdownify }}
+  </div>
 
-    <div class="m-8 flex flex-row justify-around gap-4">
+  <div class="m-8 flex flex-col lg:flex-row items-center justify-around gap-4 w-full">
 
-      <iframe width="300" src="https://www.youtube.com/embed/MpDpfBIY1_M" title="George Adje &amp; Dan Gorelick @ Prachtsaal Studio" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+    <iframe class="w-3/4 lg:w-1/2 aspect-video" src="https://www.youtube.com/embed/MpDpfBIY1_M" title="George Adje &amp; Dan Gorelick @ Prachtsaal Studio" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+    <iframe class="w-3/4 lg:w-1/2 aspect-video" src="https://www.youtube.com/embed/mwsOSaVNXks" title="Luminiferous Aether, an installation for 48h Neukölln 2021 festival in Berlin" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
-      <iframe width="300" src="https://www.youtube.com/embed/mwsOSaVNXks" title="Luminiferous Aether, an installation for 48h Neukölln 2021 festival in Berlin" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-
-    </div>
+  </div>
 
   </div>
 

assets/css/styles.css

@@ -572,6 +572,10 @@ video {
   margin: 2rem;
 }
 
+.m-14{
+  margin: 3.5rem;
+}
+
 .mx-12{
   margin-left: 3rem;
   margin-right: 3rem;
@@ -623,6 +627,10 @@ video {
   display: none;
 }
 
+.aspect-video{
+  aspect-ratio: 16 / 9;
+}
+
 .size-32{
   width: 8rem;
   height: 8rem;
@@ -646,6 +654,14 @@ video {
   height: 24rem;
 }
 
+.h-72{
+  height: 18rem;
+}
+
+.h-auto{
+  height: auto;
+}
+
 .w-6{
   width: 1.5rem;
 }
@@ -658,6 +674,18 @@ video {
   width: 100%;
 }
 
+.w-96{
+  width: 24rem;
+}
+
+.w-1\/2{
+  width: 50%;
+}
+
+.w-3\/4{
+  width: 75%;
+}
+
 .max-w-32{
   max-width: 8rem;
 }
@@ -670,6 +698,11 @@ video {
   cursor: pointer;
 }
 
+.columns-2{
+  -moz-columns: 2;
+       columns: 2;
+}
+
 .grid-flow-row{
   grid-auto-flow: row;
 }
@@ -865,9 +898,17 @@ h2{
     width: 650px;
   }
 
+  .md\:w-1\/2{
+    width: 50%;
+  }
+
   .md\:grid-cols-2{
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+
+  .md\:flex-row{
+    flex-direction: row;
+  }
 }
 
 @media (min-width: 1024px){
@@ -879,6 +920,10 @@ h2{
     width: 16rem;
   }
 
+  .lg\:w-1\/2{
+    width: 50%;
+  }
+
   .lg\:max-w-6xl{
     max-width: 72rem;
   }
@@ -890,4 +935,8 @@ h2{
   .lg\:grid-cols-4{
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
+
+  .lg\:flex-row{
+    flex-direction: row;
+  }
 }