modifications to he website added

Author: zeineb-mellouli

blog_P3/.DS_Store

@@ -5,15 +5,6 @@ GIT
   specs:
     eventmachine (1.2.7)
 
-GIT
-  remote: https://github.com/jekyll/minima
-  revision: 6b9b78dad3e5c9f733c901e10287465735b36169
-  specs:
-    minima (3.0.0.dev)
-      jekyll (>= 3.5, < 5.0)
-      jekyll-feed (~> 0.9)
-      jekyll-seo-tag (~> 2.1)
-
 GEM
   remote: https://rubygems.org/
   specs:
@@ -50,17 +41,10 @@ GEM
       webrick (~> 1.7)
     jekyll-feed (0.17.0)
       jekyll (>= 3.7, < 5.0)
-    jekyll-remote-theme (0.4.3)
-      addressable (~> 2.0)
-      jekyll (>= 3.5, < 5.0)
-      jekyll-sass-converter (>= 1.0, <= 3.0.0, != 2.0.0)
-      rubyzip (>= 1.3.0, < 3.0)
     jekyll-sass-converter (3.0.0)
       sass-embedded (~> 1.54)
     jekyll-seo-tag (2.8.0)
       jekyll (>= 3.8, < 5.0)
-    jekyll-sitemap (1.4.0)
-      jekyll (>= 3.7, < 5.0)
     jekyll-watch (2.2.1)
       listen (~> 3.0)
     kramdown (2.5.1)
@@ -72,6 +56,10 @@ GEM
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
     mercenary (0.4.0)
+    minima (2.5.2)
+      jekyll (>= 3.5, < 5.0)
+      jekyll-feed (~> 0.9)
+      jekyll-seo-tag (~> 2.1)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
     public_suffix (6.0.1)
@@ -80,7 +68,6 @@ GEM
       ffi (~> 1.0)
     rexml (3.3.9)
     rouge (4.5.1)
-    rubyzip (2.3.2)
     safe_yaml (1.0.5)
     sass-embedded (1.69.5-arm64-darwin)
       google-protobuf (~> 3.23)
@@ -95,7 +82,6 @@ GEM
     tzinfo-data (1.2024.2)
       tzinfo (>= 1.0.0)
     unicode-display_width (2.6.0)
-    wdm (0.2.0)
     webrick (1.9.0)
 
 PLATFORMS
@@ -107,14 +93,10 @@ DEPENDENCIES
   http_parser.rb (~> 0.6.0)
   jekyll (~> 4.3.4)
   jekyll-feed (~> 0.12)
-  jekyll-remote-theme
-  jekyll-seo-tag
-  jekyll-sitemap
-  minima!
+  minima (~> 2.5)
   sassc
   tzinfo (>= 1, < 3)
   tzinfo-data
-  wdm (>= 0.1.0)
 
 BUNDLED WITH
    2.5.23

blog_P3/Gemfile.lock

@@ -86,3 +86,4 @@ include:
   - assets
   - regions
   - visualizations
+  - _pages

blog_P3/_config.yml

@@ -9,10 +9,10 @@
 
   <!-- Three.js from official CDN -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-  <script src="assets_perso/js/mapdata.js"></script>		
-  <script src="assets_perso/js/worldmap.js"></script>
-  <script src="assets_perso/js/pip-map.js"></script>
-  <script src="assets_perso/js/intro.js"></script>
+  <script src="/assets_perso/js/mapdata.js"></script>		
+  <script src="/assets_perso/js/worldmap.js"></script>
+  <script src="/assets_perso/js/pip-map.js"></script>
+  <script src="/assets_perso/js/intro.js"></script>
   <script src="assets_perso/js/dynamic_load.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <noscript><img src="/assets_perso/js/flourish/img_1.jpg" width="100%" alt="chart visualization" /></noscript>

blog_P3/_includes/head.html

@@ -1,6 +1,6 @@
 <header class="site-header" role="banner">
   <div class="wrapper">
-    <a class="site-title" rel="author" href="{{ "/" | relative_url }}">AdvancedDestroyersofAll</a>
+    <span class="site-title">AdvancedDestroyersofAll</span>
     <nav class="site-nav">
       <input type="checkbox" id="nav-trigger" class="nav-trigger" />
       <label for="nav-trigger">
@@ -11,19 +11,35 @@
         </span>
       </label>
       <div class="trigger">
-        <a class="page-link" href="/home/">Home</a>
-        <a class="page-link" href="/synopsis/">Synopsis</a>
-        <a class="page-link" href="/introduction/">Introduction</a>
-        <a class="page-link" href="/research-questions/">Research Questions</a>
-        <a class="page-link" href="/team/">Team</a>
+        <a class="page-link" href="{{ "/" | relative_url }}">Home</a>
+        <a class="page-link" href="#synopsis">Synopsis</a>
+        <a class="page-link" href="/#research-questions">Research Questions</a>
+        <a class="page-link" href="/#team">Team</a>
       </div>
     </nav>
   </div>
 </header>
 
 <section class="hero">
   <h1 id="typewriter-title">
-    <span class="line1"></span>
+    <span class="line1">Main Title Here</span>
     <span class="line2"></span>
   </h1>
-</section>
+</section>
+
+<section class="synopsis-hero" id="synopsis" >
+  <p id="typewriter-synopsis">
+    <span class="synopsis-line">
+      <br> Earth, 2013 <br>
+      <i> In hope of connecting with extraterrestrial life, a group of humans launched a capsule into space containing a projector loaded with every movie made up until 2012. Their wish was simple: one day, the capsule would reach an inhabited planet and encourage its beings to communicate with Earth. They knew the capsule might drift through space for centuries, but the dream of proving aliens were real was worth the wait. </i><br>
+      <br>
+      <br> Polystar, 2024 <br>
+      <i> Ada, a master’s student from the advanced planet Polystar, found herself in a predicament. It was the day before her project proposal deadline and she was desperately searching for a topic for her data analysis course.  While taking a walk to clear her head, she spotted a small meteor falling into the nearby forest. Curious, she decided to investigate the meteor and was surprised when instead of rock, she found a capsule! <br>
+      <br>
+      Back home, Ada used her planet’s cutting-edge technology to open the capsule and power the machine inside. What she found left her speechless: tons of movies from a foreign civilization. Turning on her automatic language translator, she began watching the first film. Fascinated, Ada spent the entire night engrossed in the unfamiliar stories and didn’t get a wink of rest… But by morning, she knew exactly what her project would be! <br>
+      <br>
+      Rushing to class, Ada pitched her idea to her teacher: She would travel to earth and collect real-world data to compare to the movies she had seen. Her teacher, impressed with her proposal, approved it and gave her a budget to fund a week-long trip to the mysterious planet. Excited to discover a whole new world, Ada boarded her lightspeed vessel and set off on her adventure. <br>
+        With only enough funding for a week, Ada knew she had to plan her trip wisely. Using the movie dataset extracted from the capsule, she analyzed the film production patterns and identified five major movie industry clusters on Earth. Based on this, she divided her trip into five destinations. The United States of America, which produced the largest number of films, seemed to hold the best potential for discovery. Therefore, she allocated 3 days of her journey to explore this region. The remaining four destinations—India, Europe, East-Asia —would each get one day. </i>
+      </span>
+  </p>
+</section>

blog_P3/_includes/header.html

@@ -9,7 +9,7 @@
 .site-header {
   border-top: 0;
   border-bottom: 0;
-  background: rgb(183, 164, 198);
+  background: rgba(242, 240, 235, 0.95);
   position: fixed;
   width: 100%;
   z-index: 2500;
@@ -47,7 +47,7 @@
 }
 
 .site-title, .site-nav .page-link {
-  color: #333 !important;
+  color: #2c3e50 !important;
   text-shadow: none;
 }
 /* END OF THE NAVIGATION BAR/HEADER */
@@ -76,9 +76,15 @@ body {
 
 .home {
   min-height: 100vh;
-  background-color: white;
+  background-color: rgb(242, 240, 235);
+  ;
   padding: 0 2rem;
   opacity: 1;
+  border: 1px solid white;
+  border-radius: 10px;
+  overflow: hidden; 
+  margin: 0 5%;
+  padding: 0 5%;
 }
 
 
@@ -120,7 +126,7 @@ body {
     max-width: 90%;
     margin: 0 auto;
     padding: 0 20px;
-    color: white;
+    color: rgba(242, 240, 235, 0.95);
     text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
     word-wrap: break-word;
   }
@@ -134,44 +140,6 @@ body {
 
 /* END OF THE BACKGROUND */
 
-/*
-.hero {
-  margin: 50px auto; // Top/bottom margins and center horizontally 
-  max-width: 1200px; // Match content-wrapper
-  background-image: url("/assets/images/background.gif");
-  background-size: cover;
-  background-position: center;
-  padding: 50px 20px; // Spacing inside the hero 
-  color: white;
-  text-align: center;
-  border-radius: 8px;
-}
-
-// RESPONSIVE MARGINS FOR SMALLER SCREENS 
-@media (max-width: 768px) {
-  .content-wrapper, .hero {
-    margin: 20px auto;
-    padding: 20px;
-  }
-}
-*/
-
-/* START OF THE BACKGROUND TRANSITION */
-/*#background-transition {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100vh;
-  background-image: url("/assets/images/background.gif");
-  background-size: cover;
-  background-position: center;
-  background-attachment: fixed;
-  z-index: -2;
-  opacity: 1; 
-  transition: opacity 0.8s ease-in-out;
-}
-  */
 
 @media (max-width: 600px) {
   #background-transition {
@@ -197,13 +165,12 @@ body {
 /* START OF THE CONTENT BELOW BACKGROUND */
 
 .content {
-  //padding: 0 10px;
-  background-color: white; // White content container
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); // Subtle shadow
-  margin: 0 5%;
-  //max-width: 1200px; // Centered container
+  padding: 40px; 
+  background-color: white;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  margin: 0 5%; 
   position: relative;
-  z-index: 2; // Ensure content is above the background
+  z-index: 2;
 }
 
 .content::before {
@@ -268,16 +235,16 @@ body {
   position: relative;
   width: 100%;
   //height: 500px; //Normal map size´
-  transition: all 0.3s ease-in-out; // Smooth transition for PiP mode
+  transition: all 0.5s ease-in-out; // Smooth transition for PiP mode
   overflow: hidden
 }
 
 #map-container.pip {
   position: fixed;
   bottom: 16px;
   right: 16px;
-  width: 300px;
-  height: auto;
+  width: 300px; // Adjusted width
+  height: 200px; // Adjusted height
   max-height: 600px; // Making sure PiP map doesn’t grow too large 
   overflow: hidden; // No spill
   //display: none; 
@@ -286,7 +253,7 @@ body {
   background: white; // Fallback background
   border-radius: 12px; // Rounded corners 
   cursor: grab; // Show the grab cursor 
-  transition: all 0.3s ease-in-out; // Disable transitions for smooth dragging
+  transition: all 0.8s ease-in-out; // Disable transitions for smooth dragging
 }
 /* END OF PIP*/
 
@@ -416,7 +383,30 @@ body {
 }
 /* END OF TYPE TOTALLY SPIES */
 
+.synopsis-hero {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-color: transparent; // Ensure transparency
+  background-size: cover;
+  background-position: center;
+  background-attachment: scroll;
+  opacity: 1;
+  z-index: 1000;
+  padding: 2rem;
+}
 
-
-
-
+#typewriter-synopsis {
+  font-size: clamp(0.5rem, 2vw, 1.5rem);
+  font-weight: bold;
+  display: inline-block;
+  overflow-wrap: break-word;
+  white-space: normal;
+  text-align: center;
+  margin: 1rem auto;
+  max-width: 80%;
+  color: rgba(242, 240, 235, 0.95);
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
+}