index.rst: display header according to logo.html

logo.html: display header according to screen width
coala · Jan 26, 2019 · e6b6466 · e6b6466
1 parent a247a76
commit e6b6466
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 3 deletions.
diff --git a/_static/logo.html b/_static/logo.html
@@ -0,0 +1,34 @@
+<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:https://coala.io/>`_.
 
-.. image:: _static/images/coala-header.png
- :scale: 50
- :align: center
+.. raw:: html
+ :file: _static/logo.html
 
 coala: Language Independent Code Analysis
 -----------------------------------------