[airflow-site] branch aip-11 updated: Improve accordion spacings and arrow rotation (#90)

[kamilbregula]

This is an automated email from the ASF dual-hosted git repository.

kamilbregula pushed a commit to branch aip-11
in repository https://gitbox.apache.org/repos/asf/airflow-site.git


The following commit(s) were added to refs/heads/aip-11 by this push:
     new 8181f19  Improve accordion spacings and arrow rotation  (#90)
8181f19 is described below

commit 8181f199aa6fbb4ab4389a8258ab79b951207574
Author: Kamil Gabryjelski <kamil.gabryjel...@gmail.com>
AuthorDate: Tue Oct 29 21:40:11 2019 +0100

    Improve accordion spacings and arrow rotation  (#90)
---
 landing-pages/site/assets/scss/_accordion.scss      |  9 +++++++--
 .../site/layouts/shortcodes/accordion.html          | 21 +++++++++------------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/landing-pages/site/assets/scss/_accordion.scss 
b/landing-pages/site/assets/scss/_accordion.scss
index 392e3e5..c5410e7 100644
--- a/landing-pages/site/assets/scss/_accordion.scss
+++ b/landing-pages/site/assets/scss/_accordion.scss
@@ -37,8 +37,9 @@ details.accordion {
 
   .accordion__summary-content {
     display: flex;
+    max-width: 750px;
 
-    svg {
+    &--icon {
       width: 60px;
       margin-top: 28px;
       margin-right: 42px;
@@ -67,7 +68,7 @@ details.accordion {
   }
 
   &[open] {
-    .accordion__icon {
+    .accordion__arrow {
       svg {
         transform: rotate(180deg);
       }
@@ -76,5 +77,9 @@ details.accordion {
 
   .accordion__content {
     margin-top: 30px;
+
+    &.indented {
+      margin-left: 102px;
+    }
   }
 }
diff --git a/landing-pages/site/layouts/shortcodes/accordion.html 
b/landing-pages/site/layouts/shortcodes/accordion.html
index 2484392..78846ac 100644
--- a/landing-pages/site/layouts/shortcodes/accordion.html
+++ b/landing-pages/site/layouts/shortcodes/accordion.html
@@ -25,18 +25,15 @@
         </div>
         <div class="accordion__summary-content">
             {{ if $icon }}
-                {{ with resources.Get $icon }}{{ ( . | minify).Content | 
safeHTML }}{{ end }}
+                <div class="accordion__summary-content--icon">
+                    {{ with resources.Get $icon }}{{ ( . | minify).Content | 
safeHTML }}{{ end }}
+                </div>
             {{ end }}
-            <div>
-                <h4 class="accordion__summary-content--header
-                       {{ if $icon }}
-                           subtitle__large--greyish-brown
-                       {{ else }}
-                           subtitle__large--cerulean-blue
-                       {{ end }}">{{ .Get "title" }}</h4>
-                <span class="bodytext__medium--brownish-grey">{{ .Get 
"description" }}</span>
-            </div>
-        </div>
+<div>
+    <h4 class="accordion__summary-content--header {{ if $icon }} 
subtitle__large--greyish-brown {{ else }} subtitle__large--cerulean-blue {{ end 
}}">{{ .Get "title" }}</h4>
+    <span class="bodytext__medium--brownish-grey">{{ .Get "description" 
}}</span>
+    </div>
+</div>
     </summary>
-    <div class="accordion__content">{{ .Inner }}</div>
+    <div class="accordion__content {{if $icon }}indented{{ end }}">{{ .Inner 
}}</div>
 </details>