index.rst: Display header according to logo.html

logo.html: Display header according to screen width Now bear-header is rendered according to screen-width. Closes coala/landing-frontend#299
coala · Feb 1, 2019 · e5597d8 · e5597d8
1 parent a247a76
commit e5597d8
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 3 deletions.
diff --git a/_static/logo.html b/_static/logo.html
@@ -0,0 +1,38 @@
+<meta charset="UTF-8" />
+<style>
+  .coala-logo-doc {
+    width: 632.5px;
+    height: 187.5px;
+  }
+
+  @media only screen and (max-device-width: 632px) {
+    .coala-logo-doc-header {
+      display: none;
+    }
+    .coala-logo-doc-low {
+      display: block;
+    }
+  }
+
+  @media only screen and (min-device-width: 633px) {
+    .coala-logo-doc-header {
+      display: block;
+    }
+    .coala-logo-doc-low {
+      display: none;
+      height: auto;
+    }
+  }
+</style>
+<body>
+  <div class="coala-logo-doc-header">
+    <img
+      width="632.5px"
+      height="187.5px"
+      src="_static/images/coala-header.png"
+    />
+  </div>
+  <div class="coala-logo-doc-low">
+    <img width="187.5px" height="187.5px" src="_static/images/coala_logo.svg" />
+  </div>
+</body>
diff --git a/index.rst b/index.rst
@@ -46,9 +46,8 @@ Welcome to the coala documentation!
 
 You might also want to look at `our website <http://coala.io/>`_.
 
-.. image:: _static/images/coala-header.png
-   :scale: 50
-   :align: center
+.. raw:: html
+   :file: _static/logo.html
 
 coala: Language Independent Code Analysis
 -----------------------------------------