Added responsiveness to app header

veraPDF · May 22, 2024 · f8ab453 · f8ab453
1 parent fdfec5c
commit f8ab453
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 7 deletions.
diff --git a/src/main/resources/assets/css/verapdf.css b/src/main/resources/assets/css/verapdf.css
@@ -16,10 +16,10 @@ body {
 }
 
 .jumbotron img {
-  padding: 0px;
+  padding: 0;
   float: left;
   width: 200px;
-  margin: 20px 10px 0 0;
+  margin: 0 10px 0 0;
 }
 
 .shadowed {
@@ -157,4 +157,75 @@ table {
   overflow-wrap: anywhere;
   font-weight: 600;
   font-size: 0.95em;
+}
+
+.header-for-name {
+  display: flex;
+  align-items: flex-start;
+}
+
+.header-for-name h1{
+  margin-top: 0;
+  margin-bottom: 8px;
+}
+
+@media screen and (max-width: 1200px) {
+  .header-for-name {
+    position: relative;
+  }
+
+  .header-for-name h1 {
+    margin-bottom: 40px;
+  }
+
+  .header-for-name p {
+    position: absolute;
+    left: 0;
+    bottom: -20px;
+  }
+}
+
+@media screen and (max-width: 1000px) {
+  .header-for-name {
+    margin-bottom: 10px;
+  }
+
+  .header-for-name p {
+    bottom: -35px;
+  }
+  .header-for-name h1 {
+    margin-bottom: 50px;
+  }
+}
+
+@media screen and (max-width: 760px) {
+  .header-for-name h1 {
+    margin-bottom: 80px;
+  }
+
+  .header-for-name p {
+    bottom: -35px;
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .jumbotron .container {
+    padding-left: 20px;
+  }
+}
+
+@media screen and (max-width: 450px) {
+  .header-for-name {
+    flex-direction: column;
+  }
+
+  .header-for-name h1 {
+    margin-top: 10px;
+  }
+}
+
+@media screen and (max-width: 300px) {
+  .header-for-name h1 {
+    margin-bottom: 100px;
+  }
 }
diff --git a/src/main/resources/org/verapdf/rest/views/restclient.mustache b/src/main/resources/org/verapdf/rest/views/restclient.mustache
@@ -27,11 +27,16 @@
   <div class="container theme-showcase" role="main">
     <div class="jumbotron" role="header">
       <div class="container theme-showcase radialmask" role="header">
-        <img class="shadowed" src="/img/veraPDF-logo-400.png">
-        <h1>PDF/A and PDF/UA Validation</h1>
-        <p>
-          Prototype PDF/A and PDF/UA validation REST service with web client
-        </p>
+        <div class="header-for-name" role="header">
+          <img class="shadowed" src="/img/veraPDF-logo-400.png">
+          <div>
+            <h1>PDF/A and PDF/UA Validation</h1>
+            <p>
+              Prototype PDF/A and PDF/UA validation REST service with web client
+            </p>
+          </div>
+        </div>
+
       </div>
     </div>
     <div class="stepwizard">