centering portrait in banner

Kiefersv · Nov 18, 2023 · 6a40ded · 6a40ded
1 parent 30b0501
commit 6a40ded
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 22 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -9,7 +9,7 @@ Adapted by xebobytes
  * @Date:   Thursday, April 28th 2022, 4:26:16 pm
  * @Filename: main.css
  * @Last modified by:
- * @Last modified time: Friday, November 17th 2023, 4:35:12 pm
+ * @Last modified time: Saturday, November 18th 2023, 3:08:23 pm
  */
 
 
@@ -2290,9 +2290,9 @@ nav {
     flex-shrink: 0;
     display: block;
     margin: -6em 0 2em 4em;
-    padding: 0px 2%;    /* TODO kein padding*/
+    padding: 0px;
     width: 40%;}
-    #banner .image img /*added video*/ {
+    #banner .image img  {
       height: 100%;
       /*max-height: 65vh;*/
       /*max-height: 28rem;*/
@@ -2305,24 +2305,26 @@ nav {
       -ms-object-position: 40% 25%; /* center */
       object-position: 40% 25%; /* center */
       margin: auto;/*width: 100%;*/ }
-    #banner .image video{
-        height: 100%;
+    #banner .image video /*new*/{
+        /*height: 100%;*/
+        width: 100%;
         /*max-height: 65vh;*/
         /*max-height: 28rem;*/
-        -moz-object-fit: cover;
-        -webkit-object-fit: cover;
-        -ms-object-fit: cover;
-        object-fit: cover;
-        -moz-object-position: 40% 22%; /* center */
-        -webkit-object-position: 40% 22%; /* center */
-        -ms-object-position: 40% 22%; /* center */
-        object-position: 40% 22%; /* center */
-        margin: auto;/*width: 100%;*/ }
+        -moz-object-fit: none;
+        -webkit-object-fit: none;
+        -ms-object-fit: none;
+        object-fit: none;
+        -moz-object-position: center; /* 40% 22% */
+        -webkit-object-position: center; /* center */
+        -ms-object-position: center; /* center */
+        object-position: center; /* center */
+        /*margin: auto;*/
+        /*width: 100%;*/ }
     }
 
   @media screen and (max-width: 2150px){
     #banner .image {
-        max-height: 29rem; } }
+        /*max-height: 29rem;*/ } }
 
   @media screen and (max-width: 1050px) /*(orientation: portrait)*/ {
     #banner {
@@ -2352,19 +2354,22 @@ nav {
         -webkit-flex-shrink: 0;
         -ms-flex-shrink: 0;
         flex-shrink: 0;
-        margin: -4em 0 4em 0;
-        height: 25em;
+        margin: -4em 0 3em 0;
+        height: auto; /*25em;*/
         /*max-height: 50vh;*/
         min-height: 18em;
         width: 100%;
-        padding: 0px 15%;}
+    /*padding: 0px 15%;*/}
     }
   @media screen and (orientation: portrait) and (max-width: 480px) {
     #banner .image {
-      max-height: 39vh; }
+    /*max-height: 39vh;*/ }
     #banner .image video{ /*new*/
         margin-top: 2em;
-        margin-left: -4em;
+        height: auto;
+        width: 100%;
+        object-fit: fill;
+        /*margin-left: -4em;*/
     }
     /*#banner .image {
       margin-top: -4em;

diff --git a/index.html b/index.html
@@ -76,14 +76,15 @@ <h1>Hi, I'm Sven Kiefer, a&nbsp;PhD candidate in astrophysics.</h1>
 							<!--
                             <p>Welcome to the fascinating field of exoplanets! While I focused more on the observational aspect of exoplanet science during my Bachelor and Masters – using a 0.5m telescope or testing the performance of differential imaging techniques by implementing IFS to <a href=" https://pynpoint.readthedocs.io/en/latest/">PynPoint</a> – I am now implementing models to study cloud formation in 3D exoplanet atmospheres. I want to deepen our under&shy;standing of how clouds form on exoplanets and how they affect the planets' chemistry and climate. To this end, I implement kinetic cloud formation in general circulation models (GCMs) and analyse their feed&shy;back to the chemistry and the climate.</p>
 							-->
-							<p> Welcome to the fascinating field of exoplanets! While I focused more on the observational aspect of exoplanet science during my Bachelor and Masters, I am now implementing models to study cloud formation in 3D exoplanet atmospheres. I want to deepen our under&shy;standing of how clouds form on exoplanets and how they affect the planets' chemistry and climate. </p>
+							<p> Welcome to the fascinating field of exoplanets! While I focused more on the observational aspect of exoplanet science during my Bachelor and Master, I am now implementing models to study cloud formation in 3D exoplanet atmospheres. I want to deepen our under&shy;standing of how clouds form on exoplanets and how they affect the planets' chemistry and climate. </p>
                         </div>
 						<span class="image object">
              	 			<!--<img src="IMG/home/kiefer-sven_portrait.gif" alt="AI drawn portrait of Sven Kiefer" /> -->
 							 <video width="384" height="512" autoplay muted playsinline>
 								<source src="IMG/home/kiefer-sven_portrait.mpeg" type="video/mpeg">
 								<source src="IMG/home/kiefer-sven_portrait.mp4" type="video/mp4">
-								Your browser does not support the video tag.
+								<!-- Your browser does not support the video tag.-->
+								<!-- add poster="IMG/home/kiefer-sven_portrait.jpg" -> flashes at the beginning -->
 							</video>
             			</span>
                     </section>