,,

Viz.html

@@ -327,6 +327,7 @@ <h1>Explore Gadda's literary world by browsing through his bookshelves.</h1>
       <div class="row">
 
         <div class="col-sm-12 col-md-7">
+          <div id="observablehq-image-73bb894e" ></div>
              </div>
         <div class="col-sm-12 col-md-5">
          <p>Delving into <span class="highlight">Gadda's personal library </span>offers a unique insight into the preferences and habits that shaped him as an author. The data extracted from his library allows us to explore the mind of the engineer through a careful analysis. This page presents the data with the goal of providing a straightforward <span class="highlight">visualization </span>of key aspects:
@@ -564,9 +565,31 @@ <h1>Explore Gadda's literary world by browsing through his bookshelves.</h1>
   <script src="assets/js/main.js"></script>
   <script src="assets/js/library.js"></script>
 
+  <!-- Template Observable  -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@observablehq/inspector@5/dist/inspector.css">
+
+  <script type="module">
+
+  import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@5/dist/runtime.js";
+  import define from "https://api.observablehq.com/d/[email protected]?v=4";
+
+  const runtime = new Runtime();
+const main = runtime.module(define, name => {
+  if (name === "image") {
+    return new Inspector(document.querySelector("#observablehq-image-73bb894e"));
+  }
+});
 
 
 
+// Redefine the cell “width” to have a fixed value of 640; this masks the value
+// provided by the Observable standard library.
+main.redefine("width", 700);
+
+
+  </script>
+
+
 
   <script> 
 
@@ -1474,7 +1497,7 @@ <h1>Explore Gadda's literary world by browsing through his bookshelves.</h1>
     name: "Carlo Emilio Gadda ",
     steps: 49,
     pictureSettings: {
-      src: "http://www.sba.unisi.it/wp-content/uploads/2014/11/GADDA-214x300.jpg"
+      src: "https://upload.wikimedia.org/wikipedia/commons/1/13/Gadda_1921.jpg"
     }
   },
   {

assets/css/style.css

@@ -368,36 +368,40 @@ h6 {
 # Hero Section
 --------------------------------------------------------------*/
 #hero {
+  display: flex;
   width: 100%;
   height: 80vh;
-  margin: 0;
-  padding: 0;
-  background: url("../img/gaddabanner.png") center bottom;
-  background-position: center center;
-  background-size: cover;
+  background-color: #b7491d;
   position: relative;
-  background-attachment: fixed; /* Fixed background */
+  padding-bottom: 0px;
 }
 
-/* Chrome specific styles */
-@media screen and (min-resolution: 192dpi) {
-  #hero {
-    width: 100%;
-    height: 600px;
-    margin: 0;
-    padding: 0;
-    background: url("../img/gaddabanner.png") center bottom;
-    background-position: center top; /* Adjust as needed */
-    background-size: cover;
-    position: relative;
-    background-attachment: fixed; /* Fixed background */
-  }
+#texthero {
+  color: #f7f2df;
+  margin: 15px 0 0 0;
+    font-size: 32px;
+    font-weight: 700;
+    font-family: "Nunito", sans-serif;
 }
 
+.hero-container {
+  display: flex;
+  height: 100%;
+}
 
+.hero-column {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  z-index: 200;
+}
 
-
-
+#hero img {
+  max-width: 100%;
+  height: 370px;
+}
 
 #hero:before {
   content: "";
@@ -409,20 +413,11 @@ h6 {
   right: 0;
 }
 
-#hero .hero-container {
-  position: absolute;
-  bottom: 0;
-  top: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  text-align: center;
-  padding: 0 15px;
+#hero .btn-get-started {
+  margin-top: 20px; /* Adjust as needed */
 }
 
+
 #hero h3 {
   background: rgba(255, 255, 255, 0.1);
   color: #f7f2df;

index.html

@@ -77,12 +77,28 @@ <h1 class="logo">
     </div>
   </header><!-- End Header -->
 
-  <!-- ======= Hero Section ======= -->
-  <section id="hero">
-    <div class="hero-container">
-      <a href="#about" class="btn-get-started scrollto">Get Started</a>
+ <!-- ======= Hero Section ======= -->
+<section id="hero">
+    <div class="hero-column">
+      <img src="assets/img/chart.png" alt="Image 1">
     </div>
-  </section><!-- End Hero -->
+    <div class="hero-column">
+      <p id="texthero"><span style="font-size: xxx-large; font-weight: 900; color: #f7f2df;">OpenGadda</span>: {
+        <br>
+          author: "Carlo Emilio Gadda";
+          <br>
+          birth: "14th November 1873";
+          <br>
+          death: "21th May 1973"
+          <br>
+          }
+      </p>
+      <div id="observablehq-image-a626f5c8" style="margin-top: 190px;"></div>   
+     </div>
+  <!--  <a href="#about" class="btn-get-started scrollto">Get Started</a>-->
+  </div>
+</section><!-- End Hero -->
+
 
   <main id="main">
 
@@ -305,27 +321,39 @@ <h4>Eleonora Pasquale</h4>
   <script src="assets/js/main.js"></script>
    <!-- Template Observable  -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@observablehq/inspector@5/dist/inspector.css">
-  
+
    <script type="module">
-
-   import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@5/dist/runtime.js";
-   import define from "https://api.observablehq.com/d/[email protected]?v=4";
-
-   const runtime = new Runtime();
- const main = runtime.module(define, name => {
-   if (name === "image") {
-     return new Inspector(document.querySelector("#observablehq-image-a0b948ab"));
-   }
- });
-
-
-
- // Redefine the cell “width” to have a fixed value of 640; this masks the value
- // provided by the Observable standard library.
- main.redefine("width", 270);
-
-
-   </script>
+    import { Runtime, Inspector } from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@5/dist/runtime.js";
+    import define1 from "https://api.observablehq.com/d/[email protected]?v=4";
+
+    const runtime1 = new Runtime();
+    const main1 = runtime1.module(define1, name => {
+      if (name === "image") {
+        return new Inspector(document.querySelector("#observablehq-image-a626f5c8"));
+      }
+    });
+
+    // Redefine the cell “width” to have a fixed value of 270; this masks the value
+    // provided by the Observable standard library.
+    main1.redefine("width", 270);
+  </script>
+
+  <script type="module">
+    import { Runtime, Inspector } from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@5/dist/runtime.js";
+    import define2 from "https://api.observablehq.com/d/[email protected]?v=4";
+
+    const runtime2 = new Runtime();
+    const main2 = runtime2.module(define2, name => {
+      if (name === "image") {
+        return new Inspector(document.querySelector("#observablehq-image-a0b948ab"));
+      }
+    });
+
+    // Redefine the cell “width” to have a fixed value of 270; this masks the value
+    // provided by the Observable standard library.
+    main2.redefine("width", 270);
+  </script>
+
 
 
 

library.html

@@ -203,7 +203,6 @@ <h3>Filter through the Catalog</h3>
 
     <ul class="filter-annotation">
     <button class="btn" id="show-annotations">Show annotated texts</button>
-    <!--<button class="btn" id="revert-show-annotations">Show All</button>-->
     </ul>
 
 
@@ -240,10 +239,7 @@ <h3>Filter through the Catalog</h3>
 
   <main id="main" >
 
-    <!--<button type="button" id="sidebarCollapse" class="btn btn-info">
-      <i class="fas fa-align-left"></i>
-      <span>Toggle Sidebar</span>
-  </button>-->
+
     <h1><a href="library.html">Library Catalog</a></h1>
     <div id="matchingItems2"><p>match</p></div>