test layout

mfischer-ucl · May 16, 2024 · a005cf5 · a005cf5
1 parent 0945d25
commit a005cf5
Show file tree

Hide file tree

Showing 9 changed files with 240 additions and 190 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/_includes/stylefile.md b/_includes/stylefile.md
@@ -90,10 +90,10 @@ sup {
 }
 
 .videos-flex-container {
-display: flex;
-justify-content: center; /* Adjust this to change the alignment of videos */
-flex-wrap: wrap; /* Allows the items to wrap to the next line */
-margin-bottom: 10px;
+    display: flex;
+    justify-content: center; /* Adjust this to change the alignment of videos */
+    flex-wrap: wrap; /* Allows the items to wrap to the next line */
+    margin-bottom: 10px;
 }
 
 #NAvideoForm {
@@ -123,18 +123,20 @@ margin-bottom: 10px;
     justify-content: flex-start;
 }
 
+.NAvideo-container video {
+    max-width: 100%;
+    max-height: 100%;
+    height: auto;
+    object-fit: contain;
+}
+
 .caption {
     text-align: center;
     margin-top: 5px;
-    max-width: 100%; /* Ensure the caption does not exceed the container width */
+    max-width: 100%;
     word-wrap: break-word; /* Ensure long captions wrap within the container */
 }
 
-.NAvideo-container video {
-    max-width: 100%;
-    height: auto;
-    box-sizing: border-box; /* Ensure padding and borders are included */
-}
 
 .media-flex-container {
     flex-basis: calc(48.0% - 20px);
@@ -153,23 +155,6 @@ margin-bottom: 10px;
     gap: 50px;
 }
 
-@media (max-width: 768px) {
-    .media-flex-container {
-        flex-basis: 100%;
-    }
-}
-
-.media-item {
-    margin: 0 10px;
-    text-align: center;
-    flex-basis: 33%;
-}
-
-.media-item img, .media-item video {
-    max-width: 100%;
-    height: auto;
-}
-
 video {
     max-width: 100%;
     height: auto;
@@ -233,18 +218,36 @@ display: inline-block;
     width: auto; /* Maintain aspect ratio */
 }
 
+
+.media-item {
+    margin: 0 10px;
+    text-align: center;
+    flex-basis: 33%;
+}
+
+.media-item img, .media-item video {
+    max-width: 100%;
+    height: auto;
+}
+
 /* Media query for tablets */
 @media (max-width: 768px) {
     .teaserbutton {
         height: 60px; /* Smaller height for tablets */
     }
+  .media-flex-container {
+        flex-basis: 100%;
+    }
 }
 
 /* Media query for mobile devices */
 @media (max-width: 480px) {
     .teaserbutton {
         height: 40px; /* Even smaller height for mobile devices */
     }
+  .media-flex-container {
+        flex-basis: 100%;
+    }
 }
 
 .globaldiv {
@@ -266,6 +269,10 @@ display: inline-block;
         max-width: 100%;
     }
 
+    .caption {
+        max-width: 80%;
+    }
+
     .globaldiv {
         max-width: 100%;
         margin-left: 0%;

diff --git a/_site/feed.xml b/_site/feed.xml
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.9.2">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2024-05-16T09:30:21+01:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">Michael Fischer</title><subtitle>Michael Fischer, PhD Student in AI and Computer Graphics at University College London (UCL).</subtitle><author><name>Michael Fischer</name></author><entry><title type="html">Welcome to Jekyll!</title><link href="http://localhost:4000/blog/welcome-to-jekyll/" rel="alternate" type="text/html" title="Welcome to Jekyll!" /><published>2019-04-18T20:34:30+01:00</published><updated>2019-04-18T20:34:30+01:00</updated><id>http://localhost:4000/blog/welcome-to-jekyll</id><content type="html" xml:base="http://localhost:4000/blog/welcome-to-jekyll/">&lt;p&gt;You’ll find this post in your &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;_posts&lt;/code&gt; directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;jekyll serve&lt;/code&gt;, which launches a web server and auto-regenerates your site when a file is updated.&lt;/p&gt;
+<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.9.2">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2024-05-16T09:54:39+01:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">Michael Fischer</title><subtitle>Michael Fischer, PhD Student in AI and Computer Graphics at University College London (UCL).</subtitle><author><name>Michael Fischer</name></author><entry><title type="html">Welcome to Jekyll!</title><link href="http://localhost:4000/blog/welcome-to-jekyll/" rel="alternate" type="text/html" title="Welcome to Jekyll!" /><published>2019-04-18T20:34:30+01:00</published><updated>2019-04-18T20:34:30+01:00</updated><id>http://localhost:4000/blog/welcome-to-jekyll</id><content type="html" xml:base="http://localhost:4000/blog/welcome-to-jekyll/">&lt;p&gt;You’ll find this post in your &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;_posts&lt;/code&gt; directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;jekyll serve&lt;/code&gt;, which launches a web server and auto-regenerates your site when a file is updated.&lt;/p&gt;
 
 &lt;p&gt;To add new posts, simply add a file in the &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;_posts&lt;/code&gt; directory that follows the convention &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;YYYY-MM-DD-name-of-post.ext&lt;/code&gt; and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.&lt;/p&gt;
 

diff --git a/_site/index.html b/_site/index.html
@@ -428,10 +428,10 @@ <h1 id="page-title" class="page__title" itemprop="headline">
 }
 
 .videos-flex-container {
-display: flex;
-justify-content: center; /* Adjust this to change the alignment of videos */
-flex-wrap: wrap; /* Allows the items to wrap to the next line */
-margin-bottom: 10px;
+    display: flex;
+    justify-content: center; /* Adjust this to change the alignment of videos */
+    flex-wrap: wrap; /* Allows the items to wrap to the next line */
+    margin-bottom: 10px;
 }
 
 #NAvideoForm {
@@ -461,18 +461,20 @@ <h1 id="page-title" class="page__title" itemprop="headline">
     justify-content: flex-start;
 }
 
+.NAvideo-container video {
+    max-width: 100%;
+    max-height: 100%;
+    height: auto;
+    object-fit: contain;
+}
+
 .caption {
     text-align: center;
     margin-top: 5px;
-    max-width: 100%; /* Ensure the caption does not exceed the container width */
+    max-width: 100%;
     word-wrap: break-word; /* Ensure long captions wrap within the container */
 }
 
-.NAvideo-container video {
-    max-width: 100%;
-    height: auto;
-    box-sizing: border-box; /* Ensure padding and borders are included */
-}
 
 .media-flex-container {
     flex-basis: calc(48.0% - 20px);
@@ -491,23 +493,6 @@ <h1 id="page-title" class="page__title" itemprop="headline">
     gap: 50px;
 }
 
-@media (max-width: 768px) {
-    .media-flex-container {
-        flex-basis: 100%;
-    }
-}
-
-.media-item {
-    margin: 0 10px;
-    text-align: center;
-    flex-basis: 33%;
-}
-
-.media-item img, .media-item video {
-    max-width: 100%;
-    height: auto;
-}
-
 video {
     max-width: 100%;
     height: auto;
@@ -571,18 +556,36 @@ <h1 id="page-title" class="page__title" itemprop="headline">
     width: auto; /* Maintain aspect ratio */
 }
 
+
+.media-item {
+    margin: 0 10px;
+    text-align: center;
+    flex-basis: 33%;
+}
+
+.media-item img, .media-item video {
+    max-width: 100%;
+    height: auto;
+}
+
 /* Media query for tablets */
 @media (max-width: 768px) {
     .teaserbutton {
         height: 60px; /* Smaller height for tablets */
     }
+  .media-flex-container {
+        flex-basis: 100%;
+    }
 }
 
 /* Media query for mobile devices */
 @media (max-width: 480px) {
     .teaserbutton {
         height: 40px; /* Even smaller height for mobile devices */
     }
+  .media-flex-container {
+        flex-basis: 100%;
+    }
 }
 
 .globaldiv {
@@ -604,6 +607,10 @@ <h1 id="page-title" class="page__title" itemprop="headline">
         max-width: 100%;
     }
 
+    .caption {
+        max-width: 80%;
+    }
+
     .globaldiv {
         max-width: 100%;
         margin-left: 0%;

diff --git a/_site/metappearance/index.html b/_site/metappearance/index.html
@@ -275,10 +275,10 @@
 }
 
 .videos-flex-container {
-display: flex;
-justify-content: center; /* Adjust this to change the alignment of videos */
-flex-wrap: wrap; /* Allows the items to wrap to the next line */
-margin-bottom: 10px;
+    display: flex;
+    justify-content: center; /* Adjust this to change the alignment of videos */
+    flex-wrap: wrap; /* Allows the items to wrap to the next line */
+    margin-bottom: 10px;
 }
 
 #NAvideoForm {
@@ -308,18 +308,20 @@
     justify-content: flex-start;
 }
 
+.NAvideo-container video {
+    max-width: 100%;
+    max-height: 100%;
+    height: auto;
+    object-fit: contain;
+}
+
 .caption {
     text-align: center;
     margin-top: 5px;
-    max-width: 100%; /* Ensure the caption does not exceed the container width */
+    max-width: 100%;
     word-wrap: break-word; /* Ensure long captions wrap within the container */
 }
 
-.NAvideo-container video {
-    max-width: 100%;
-    height: auto;
-    box-sizing: border-box; /* Ensure padding and borders are included */
-}
 
 .media-flex-container {
     flex-basis: calc(48.0% - 20px);
@@ -338,23 +340,6 @@
     gap: 50px;
 }
 
-@media (max-width: 768px) {
-    .media-flex-container {
-        flex-basis: 100%;
-    }
-}
-
-.media-item {
-    margin: 0 10px;
-    text-align: center;
-    flex-basis: 33%;
-}
-
-.media-item img, .media-item video {
-    max-width: 100%;
-    height: auto;
-}
-
 video {
     max-width: 100%;
     height: auto;
@@ -418,18 +403,36 @@
     width: auto; /* Maintain aspect ratio */
 }
 
+
+.media-item {
+    margin: 0 10px;
+    text-align: center;
+    flex-basis: 33%;
+}
+
+.media-item img, .media-item video {
+    max-width: 100%;
+    height: auto;
+}
+
 /* Media query for tablets */
 @media (max-width: 768px) {
     .teaserbutton {
         height: 60px; /* Smaller height for tablets */
     }
+  .media-flex-container {
+        flex-basis: 100%;
+    }
 }
 
 /* Media query for mobile devices */
 @media (max-width: 480px) {
     .teaserbutton {
         height: 40px; /* Even smaller height for mobile devices */
     }
+  .media-flex-container {
+        flex-basis: 100%;
+    }
 }
 
 .globaldiv {
@@ -451,6 +454,10 @@
         max-width: 100%;
     }
 
+    .caption {
+        max-width: 80%;
+    }
+
     .globaldiv {
         max-width: 100%;
         margin-left: 0%;