Fix mobile layout. Add QA blog link. Add OG properties.

Signed-off-by: DKL <dkl@zurich.ibm.com>
DS4SD · Mar 11, 2024 · 9562e75 · 9562e75
1 parent 5a44acf
commit 9562e75
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 78 deletions.
diff --git a/src/_includes/layout.njk b/src/_includes/layout.njk
@@ -10,35 +10,46 @@
             gtag('js', new Date());
             gtag('config', 'G-8WR82RYJQL');
         </script>
+
+        <title>{{ title }}</title>
+        <link rel="icon" href="/icons/logo.svg" type="image/svg+xml">
+
+        <meta property="og:title" content="{{ title }}" >
+        <meta property="og:description" content="Deep Search leverages state-of-the-art AI methods to continuously collect, convert, enrich, and link large document collections. You can use it for both public and proprietary PDF documents. Deep Search is offered commercially as-a-service." />
+        <meta property="og:image" content="https://ds4sd.github.io/icons/logo.svg" />
+
         <meta charset="UTF-8">
         <meta name="HandheldFriendly" content="true"/>
         <meta name="MobileOptimized" content="320"/>
         <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no"/>
+
+
         <link rel="stylesheet" href="/styles/main.css">
-        <link rel="icon" href="/icons/logo.svg" type="image/svg+xml">
-        <title>{{ title }}</title>
     </head>
     <body>
         <nav>
             <div class="logo">
-                <img src="/icons/logo.svg"/> IBM
-                <b>Deep Search</b>
+                <img src="/icons/logo.svg"/>
+                <span>IBM <b>Deep Search</b></span>
+            </div>
+
+            <div class="sections">
+                <a href="#overview">
+                    Overview
+                </a>
+                <a href="#toolkit">
+                    Toolkit
+                </a>
+                <a href="#use-cases">
+                    Cases
+                </a>
+                <a href="#publications">
+                    Publications
+                </a>
+                <a href="#people">
+                    People
+                </a>
             </div>
-            <a href="#overview">
-                Overview
-            </a>
-            <a href="#toolkit">
-                Toolkit
-            </a>
-            <a href="#use-cases">
-                Cases
-            </a>
-            <a href="#publications">
-                Publications
-            </a>
-            <a href="#people">
-                People
-            </a>
 
             <div class="actions">
                 <a href="mailto:deepsearch-core@zurich.ibm.com">

diff --git a/src/icons/location.svg b/src/icons/location.svg
diff --git a/src/index.njk b/src/index.njk
@@ -19,10 +19,10 @@ title: IBM Deep Search
         documents have been converted by our open access system. Try it yourself for free or request access to an enterprise system.
         <div class="button-group">
             <a class="button" href="https://deepsearch-experience.res.ibm.com">
-                Try for free <img src="/icons/arrow-right.svg"/>
+                Free access <img src="/icons/arrow-right.svg"/>
             </a>
             <a class="button inverse-ghost" href="https://airtable.com/appFvft8QiHQbGa9d/shr3aE6NX74XTWnaG">
-                Get enterprise access
+                Enterprise access
                 <img src="/icons/arrow-right.svg"/>
             </a>
         </div>
@@ -235,8 +235,8 @@ title: IBM Deep Search
         several technologies from different AI disciplines consisting of document
         conversion to machine-readable format (via computer vision), finding relevant data (via natural language processing),
         and formulating an eloquent response (via large language models). A research paper describing this application is published
-        at the AAAI 2024 conference.
-        <a href="mailto:deepsearch-core@zurich.ibm.com">Contact us</a>
+        at the AAAI 2024 conference. Read more about it <a href="https://research.ibm.com/blog/ai-deep-search-docqa">here</a> and
+        <a href="mailto:deepsearch-core@zurich.ibm.com">contact us</a>
         for early access.
     </p>
     <div>
@@ -247,7 +247,7 @@ title: IBM Deep Search
     <h2>Publications</h2>
     {% for batch in publications %}
         <h3>{{ batch.year }}</h3>
-        <div class="publications filling">
+        <div class="publications">
             {% for publication in batch.publications %}
                 <a href="{{ publication.url }}">
                     <div class="venue">{{ publication.venue }}</div>
@@ -267,7 +267,7 @@ title: IBM Deep Search
         with your résumé and interests.
     </p>
     <h3>Team</h3>
-    <div class="team filling">
+    <div class="team">
         {% for person in team %}
             <a {% if person.code %} href="https://research.ibm.com/people/{{ person.code }}" {% endif %}>
                 {% if person.imageCode %}
@@ -284,21 +284,21 @@ title: IBM Deep Search
         {% endfor %}
     </div>
     <h3>Locations</h3>
-    <div class="locations filling">
+    <div class="locations">
         <div>
-            <img class="zurich" src="/images/zurich.jpg"/>
+            <img src="/images/zurich.jpg"/>
             <div>
                 Zürich
                 <b>Switzerland</b>
-                <a href="https://goo.gl/maps/CDB5oSPWdiEnExFu9"><img src="/icons/location.svg"/>
+                <a class="pin" href="https://goo.gl/maps/CDB5oSPWdiEnExFu9"><img src="/icons/location.svg"/>
                 </a>
             </div>
         </div>
         <div>
-            <img class="paris" src="/images/paris.jpg"/>
+            <img src="/images/paris.jpg"/>
             <div>Paris
                 <b>France</b>
-                <a href="https://goo.gl/maps/QP86noMQSm8rP75r7"><img src="/icons/location.svg"/>
+                <a class="pin" href="https://goo.gl/maps/QP86noMQSm8rP75r7"><img src="/icons/location.svg"/>
                 </a>
             </div>
         </div>

diff --git a/src/styles/main.css b/src/styles/main.css
@@ -21,7 +21,7 @@ html {
 }
 
 body {
-  --content-width: 35rem;
+  --content-width: 40rem;
 
   background-color: var(--cds-background);
 
@@ -47,54 +47,66 @@ nav {
 
 nav div,
 nav a {
-  padding: 0 1rem;
-
   font-size: 0.875rem;
   color: var(--cds-text);
   text-decoration: none;
 
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.25rem;
 }
 
-nav > a {
+nav a {
   flex: 1;
-  max-width: 6rem;
+  min-width: 0;
+  padding: 0 1rem;
+  overflow-x: hidden;
 }
 
-nav > a:hover {
+nav a:hover {
   background-color: var(--cds-layer-hover);
 }
 
-nav div:first-child {
-  padding: 0 3rem 0 0;
-  gap: 0.25rem;
+nav .logo {
+  padding: 1rem;
+  margin-right: auto;
+  gap: 1rem;
 }
 
 nav .logo > img {
-  margin: 0 0.5rem 0 0.75rem;
   width: 1.5rem;
   height: 1.5rem;
 }
 
-.actions {
+nav .sections {
+  flex: 1;
+  min-width: 0;
+  max-width: var(--content-width);
+  align-items: stretch;
+  justify-content: flex-start;
+}
+
+nav .actions {
   margin-left: auto;
+  align-items: stretch;
 }
 
-.actions img {
+nav .actions img {
   margin-right: 0.25rem;
 }
 
-@media screen and (max-width: 75rem) {
+@media (max-width: 50rem) {
   nav .logo {
     display: none;
   }
 
-  nav a {
+  nav .sections > a {
+    flex: 1 1 auto;
     min-width: 0;
-    padding: 1rem;
+    overflow-x: hidden;
+    padding: 0 0.5rem;
+    justify-content: flex-start;
+    mask-image: linear-gradient(90deg, var(--cds-layer) 75%, transparent);
   }
 
   nav a span {
@@ -127,6 +139,7 @@ footer {
   letter-spacing: var(--cds-body-short-01-letter-spacing);
 
   display: flex;
+  flex-wrap: wrap;
   gap: 3rem;
 }
 
@@ -157,19 +170,11 @@ section {
 header > *,
 section > * {
   max-width: var(--content-width);
-  margin-left: calc(50vw - 0.5 * var(--content-width));
 }
 
-@media screen and (min-width: 70rem) {
-  header > *,
-  section > * {
-    max-width: var(--content-width);
-    margin-left: calc(50vw - var(--content-width));
-  }
-
-  section > .filling {
-    max-width: calc(2 * var(--content-width));
-  }
+header > *,
+section > * {
+  margin: 0 auto;
 }
 
 header {
@@ -252,10 +257,6 @@ blockquote {
   font-style: italic;
 }
 
-.secondary {
-  color: var(--cds-);
-}
-
 /* Controls. */
 button,
 a.button {
@@ -298,7 +299,7 @@ a.button.inverse-ghost:hover {
 .button-group {
   display: flex;
   flex-direction: row;
-  gap: 3rem;
+  gap: 1rem;
 }
 
 .button-group .button {
@@ -309,7 +310,6 @@ a.button.inverse-ghost:hover {
 table {
   width: 100%;
   border-collapse: collapse;
-  line-height: 1rem;
 }
 
 table th {
@@ -329,6 +329,7 @@ table td {
   margin-bottom: 2rem;
   display: flex;
   flex-wrap: wrap;
+  justify-content: center;
   gap: 3rem;
 }
 
@@ -358,7 +359,7 @@ table td {
 .publications > a {
   position: relative;
   width: var(--card-size);
-  height: var(0.75 * --card-size);
+  min-height: var(0.75 * --card-size);
   padding: 1rem;
   overflow: hidden;
 
@@ -380,6 +381,12 @@ table td {
   gap: 1rem;
 }
 
+@media (max-width: 50rem) {
+  .publications > a {
+    width: 100%;
+  }
+}
+
 .publications > a:hover {
   background-color: var(--cds-layer-hover);
 }
@@ -445,19 +452,18 @@ table td {
   margin-bottom: 1rem;
 
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
   align-items: stretch;
   gap: 1rem;
 }
 
 .locations > div {
-  max-width: 27rem;
-
   background-color: var(--cds-background-inverse);
   color: var(--cds-text-inverse);
 
   display: flex;
   flex-direction: column;
+  align-items: stretch;
 }
 
 .locations > div > div {
@@ -469,18 +475,15 @@ table td {
   gap: 1rem;
 }
 
-.locations > div > div > a {
-  width: 3rem;
-  height: 3rem;
+.locations .pin {
   margin-left: auto;
-  background-color: var(--cds-layer);
 }
 
-.locations > div > div > a > img {
-  width: 100%;
-  height: 100%;
+.locations .pin:hover {
+  background-color: var(--cds-background-inverse-hover);
 }
 
-.locations > div > div > a:hover {
-  background-color: var(--cds-layer-hover);
+.locations .pin > img {
+  width: 3rem;
+  height: 3rem;
 }