Website fixes (#3201)

* fix typo Signed-off-by: Mehdi Nassim KHODJA <18899702+naskio@users.noreply.github.com> * fix large li tags Signed-off-by: Mehdi Nassim KHODJA <18899702+naskio@users.noreply.github.com> * fix page-header-image Signed-off-by: Mehdi Nassim KHODJA <18899702+naskio@users.noreply.github.com> * fix youtube iframe responsiveness Signed-off-by: Mehdi Nassim KHODJA <18899702+naskio@users.noreply.github.com> * fix broken links Signed-off-by: Mehdi Nassim KHODJA <18899702+naskio@users.noreply.github.com> --------- Signed-off-by: Mehdi Nassim KHODJA <18899702+naskio@users.noreply.github.com>
armadaproject · Jan 4, 2024 · 6c12062 · 6c12062
1 parent 81af560
commit 6c12062
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 10 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,11 +1,11 @@
 {% if page.url != "/" and page.featured_image and site.data.settings.header_settings.allow_transparent == "yes" %}
-<nav id="navbar-main" class="navbar navbar-main navbar-expand-lg navbar-transparent headroom">
+<nav id="navbar-main" class="navbar navbar-main navbar-expand-lg navbar-transparent headroom headroom--pinned">
   {% elsif site.data.settings.header_settings.theme == "blue" %}
-  <nav id="navbar-main" class="navbar navbar-main navbar-expand-lg bg-primary navbar-dark headroom">
+  <nav id="navbar-main" class="navbar navbar-main navbar-expand-lg bg-primary navbar-dark headroom headroom--pinned">
     {% elsif site.data.settings.header_settings.theme == "dark" %}
-    <nav id="navbar-main" class="navbar navbar-main navbar-expand-lg bg-default navbar-dark headroom">
+    <nav id="navbar-main" class="navbar navbar-main navbar-expand-lg bg-default navbar-dark headroom headroom--pinned">
       {% else %}
-      <nav id="navbar-main" class="navbar navbar-main navbar-expand-lg bg-white headroom">
+      <nav id="navbar-main" class="navbar navbar-main navbar-expand-lg bg-white headroom headroom--pinned">
         {% endif %}
 
         <div class="container">

diff --git a/assets/styles/custom/_styles.scss b/assets/styles/custom/_styles.scss
@@ -21,6 +21,29 @@
     min-width: unset !important;
 }
 
+/* PAGE CONTENT */
+
+.page li {
+    word-wrap: break-word;
+}
+
+/* RESPONSIVE VIDEO IFRAME */
+
+.responsive-video {
+    overflow:hidden;
+    padding-bottom:56.25%;
+    position:relative;
+    height:0;
+}
+
+.responsive-video iframe {
+    left:0;
+    top:0;
+    height:100%;
+    width:100%;
+    position:absolute;
+}
+
 /* FOOTER */
 
 .btn-twitter i {
@@ -73,11 +96,11 @@
     background-color: #172b4d !important;
 }
 
-/* PAGE HEADER OVERROIDES */
+/* PAGE HEADER OVERRIDES */
 
 .page-header.page-header-small {
     min-height: 36vh !important;
-    margin-bottom: 0px !important;
+    margin-bottom: 0 !important;
 }
 
 .page-header-image.card-background {
@@ -169,7 +192,7 @@ ul li {
 
     .page-header-image.card-background {
         background-repeat: no-repeat !important;
-        max-height: 250px !important;
+        background-size: cover !important;
     }
 
     img.mobile-armada {

diff --git a/demo.md b/demo.md
@@ -1,6 +1,8 @@
 # Armada Demo
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/l76yh1VjhaY" title="Armada demo video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+<div class="responsive-video">
+<iframe width="560" height="315" src="https://www.youtube.com/embed/l76yh1VjhaY" title="Armada demo video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+</div>
 
 > <small><i>This video demonstrates the use of Armadactl, Armada Lookout UI, and Apache Airflow.</i></small>
 

diff --git a/design.md b/design.md
@@ -14,7 +14,7 @@ Armada consists of two main components:
 
 All state relating to the Armada server is stored in [Redis](https://redis.io/), which may use replication combined with failover for redundancy. Hence, the Armada server is itself stateless and is easily replicated by running multiple independent instances. Both the server and the executors are intended to be run in Kubernetes pods. We show a diagram of the architecture below.
 
-![How Armada works](./batch-api.svg)
+![How Armada works](./assets/img/batch-api.svg)
 
 ### Job leasing
 

diff --git a/design/index.md b/design/index.md
@@ -18,7 +18,7 @@ Armada consists of two main components:
 
 All state relating to the Armada server is stored in [Redis](https://redis.io/), which may use replication combined with failover for redundancy. Hence, the Armada server is itself stateless and is easily replicated by running multiple independent instances. Both the server and the executors are intended to be run in Kubernetes pods. We show a diagram of the architecture below.
 
-![How Armada works](./batch-api.svg)
+![How Armada works](../assets/img/batch-api.svg)
 
 ### Job leasing