[gtk-web/new-website: 135/180] changed the landing structure

From: Emmanuele Bassi <ebassi src gnome org>
To: commits-list gnome org
Cc:
Subject: [gtk-web/new-website: 135/180] changed the landing structure
Date: Mon, 11 Nov 2019 14:55:46 +0000 (UTC)
commit 2bcc8c2879fd66d6f2d01f76ac415f17aa0988f9
Author: ravgeetdhillon <ravgeetdhillon gmail com>
Date:   Mon Aug 12 22:09:35 2019 +0530

    changed the landing structure

 collections/_pages/about.html     |   5 +-
 collections/_pages/community.html | 173 ++++++++++++++++++++------------------
 collections/_pages/docs.html      |   8 +-
 collections/_pages/features.html  |   9 +-
 collections/_pages/index.html     |  89 ++++++++++----------
 5 files changed, 150 insertions(+), 134 deletions(-)
---
diff --git a/collections/_pages/about.html b/collections/_pages/about.html
index 14ac6d9..5f1cb64 100644
--- a/collections/_pages/about.html
+++ b/collections/_pages/about.html
@@ -1,5 +1,7 @@
 ---
+navbar_type: light
 permalink: /about/
+
 timeline:
   - date: August 2007
     description: Alexander Larsson releases Glick, his first app bundling framework
@@ -19,11 +21,12 @@ timeline:
 
 {% include header.html %}
 
+{% include navbar.html %}
+
 <section class="py-4">
   <div class="container">
     <div class="row justify-content-center">
       <div class="col-12">
-
         <div class="row align-items-start py-4">
           <div class="col-5 border-bottom pb-3">
             <h1 class="font-weight-light mb-3">Creation</h1>
diff --git a/collections/_pages/community.html b/collections/_pages/community.html
index 2625af6..c0d3e37 100644
--- a/collections/_pages/community.html
+++ b/collections/_pages/community.html
@@ -1,16 +1,30 @@
 ---
-navbar_type: dark
+navbar_type: light
 permalink: /community/
+
+page_main_heading: GTK Community
+page_main_heading_description: A place to find all the resources used by the people working on GTK.
+
+blog_main_heading: Blog
+blog_main_heading_description: Catch up with all the things happening with GTK through the [GTK Development 
Blog](https://blog.gtk.org/).
+
+issues_main_heading: Issues Tracker
+issues_main_heading_description: Contribute to GTK by solving the issues related to GTK. Get started with 
first issues.
+
+team_main_heading: GTK Team
+team_main_heading_description: These are the people who apply their best of skills to make GTK as the 
developers go to tool. To see your yourself as a GTK Team Member or Contributor, start by solving some 
[issues](https://gitlab.gnome.org/GNOME/gtk/issues) for the GTK.
 ---
 
-{%- include header.html -%}
+{% include header.html %}
+
+{% include navbar.html %}
 
-<section class="pb-4 d-flex flex-column align-items-center" id="landing">
+<section class="py-4 d-flex flex-column align-items-center">
   <div class="container">
     <div class="row">
       <div class="col-md-5 d-flex justify-content-end flex-column main-heading">
-        <h1 class="display-3 pb-3">GTK Community</h1>
-        <span class="text-muted lead">A place to find all the resources used by the people working on 
GTK.</span>
+        <h1 class="display-3 pb-3">{{ page.page_main_heading }}</h1>
+        <span class="text-muted lead">{{ page.page_main_heading_description | markdownify }}</span>
       </div>
       <div class="col-md-7 d-none d-md-flex justify-content-center flex-column">
         <img src="{{ '/assets/img/wall-community.svg' | prepend: site.url }}" class="img-fluid" />
@@ -21,86 +35,82 @@ permalink: /community/
 <section class="py-4" id="blog">
   <div class="container border rounded py-4 px-4 bg-light">
     <div class="row">
-      <div class="col">
-        <h2 class="font-weight-light mb-3">Blog</h2>
-        <p class="text-muted w-75">Catch up with all the things happening with GTK through the GTK 
Development Blog.</p>
+      <div class="col px-0 px-md-3">
+        <h2 class="font-weight-light mb-3">{{ page.blog_main_heading }}</h2>
+        <span class="text-muted w-100 w-sm-75">{{ page.blog_main_heading_description | markdownify }}</span>
       </div>
     </div>
     <div class="row py-4">
-      <div class="col-lg-4 col-md-6 pb-4">
-        <div class="h-100 rounded shadow-sm overflow-hidden">
-          <div class="overflow-hidden" style="max-height:200px;">
-            <img src="{{ '/assets/img/blog-blog1.png' | prepend: site.url }}" class="img-fluid w-100">
-          </div>
-          <div class="py-3 px-3 h-100 bg-white d-flex flex-column">
-            <h6>GTK 3.96.0</h6>
-            <p class="text-muted small">This week, we released GTK 3.96.0. Again, it has been a while since 
the last
-              release, so it is worth summarizing whats new in this release. There is really too much here 
to cover it
-              all...</p>
-            <a href="#" class="btn btn-sm btn-primary align-self-end">Read More</a>
-          </div>
-        </div>
-      </div>
-      <div class="col-lg-4 col-md-6 pb-4">
-        <div class="h-100 rounded shadow-sm overflow-hidden">
-          <div class="overflow-hidden" style="max-height:200px;">
-            <img src="{{ '/assets/img/blog-blog2.png' | prepend: site.url }}" class="img-fluid w-100">
-          </div>
-          <div class="py-3 px-3 h-100 bg-white d-flex flex-column">
-            <h6>Layout managers in GTK 4</h6>
-            <p class="text-muted small">Containers and layout policies have been a staple of GTK’s design 
since the
-              very beginning. If you wanted your widget to lay out its children according to a specific 
policy...</p>
-            <a href="#" class="btn btn-sm btn-primary align-self-end">Read More</a>
-          </div>
-        </div>
-      </div>
-      <div class="col-lg-4 col-md-6 pb-4">
-        <div class="h-100 rounded shadow-sm overflow-hidden">
-          <div class="overflow-hidden" style="max-height:200px;">
-            <img src="{{ '/assets/img/blog-blog3.png' | prepend: site.url }}" class="img-fluid w-100">
-          </div>
-          <div class="py-3 px-3 h-100 bg-white d-flex flex-column">
-            <h6>Entries in GTK 4</h6>
-            <p class="text-muted small">One of the larger refactorings that recently landed in GTK master is 
re-doing
-              the entry hierarchy. This post is summarizing what has changed, and why we think things are 
better this
-              way...</p>
-            <a href="#" class="btn btn-sm btn-primary align-self-end">Read More</a>
+      {% assign blogs = site.data.api_fetch.gtk-blog-feed.items %}
+      {% for blog in blogs limit: 3 %}
+        <div class="col-lg-4 col-md-6 pb-4 px-0 px-md-3">
+          <div class="h-100 rounded shadow-sm overflow-hidden">
+            <div class="overflow-hidden" style="max-height:200px;">
+              {% capture imgname %}
+                {% cycle 'blog-blog1.png', 'blog-blog2.png', 'blog-blog3.png' %}
+              {% endcapture %}
+              {% assign imgname = imgname | strip %}
+              <img src="{{ '/assets/img/' | append: imgname | prepend: site.url }}" class="img-fluid w-100">
+            </div>
+            <div class="py-3 px-3 h-100 bg-white d-flex flex-column">
+              <h6>{{ blog.title }}</h6>
+              <span class="text-muted small mb-3">{{ blog.description | truncate: 160 }}</span>
+              <a href="{{ blog.link }}" class="btn btn-sm btn-primary align-self-end">Read More</a>
+            </div>
           </div>
         </div>
-      </div>
+      {% endfor %}
     </div>
   </div>
 </section>
 
-<section class="py-4" id="issue-tracker">
+<section class="py-4" id="issues-tracker">
   <div class="container border rounded py-4 px-4 bg-light">
     <div class="row">
-      <div class="col">
-        <h2 class="font-weight-light mb-3">Issue Tracker</h2>
-        <p class="text-muted w-75">Contribute to GTK by solving the issues related to GTK. Get started with 
first issues.</p>
-      </div>`
+      <div class="col px-0 px-md-3">
+        {% assign issue_stats = site.data.api_fetch.issues_stats.statistics.counts %}
+        <div class="d-flex flex-column flex-sm-row align-items-baseline">
+          <h2 class="font-weight-light mb-3">
+            {{ page.issues_main_heading }}
+          </h2>
+          <div class="pl-sm-3 pl-0 pb-3 mt-n2 mt-sm-0">
+            <a href="https://gitlab.gnome.org/GNOME/gtk/issues?scope=all&utf8=%E2%9C%93&state=opened"; 
class="text-muted"><span class="pr-2 mt-n2" style="font-size:0.8rem;" title="{{ issue_stats.opened }} issues 
are open."><i class="fas fa-exclamation-circle fa-fw text-secondary pr-2"></i>{{ issue_stats.opened }} 
Opened</span></a>
+            <a href="https://gitlab.gnome.org/GNOME/gtk/issues?scope=all&state=closed&utf8=%E2%9C%93"; 
class="text-muted"><span class="pr-2 mt-n2" style="font-size:0.8rem;" title="{{ issue_stats.closed }} issues 
have been closed."><i class="fas fa-check-circle fa-fw text-tertiary pr-2"></i>{{ issue_stats.closed }} 
Closed</span></a>
+          </div>
+        </div>
+        <span class="text-muted w-100 w-sm-75">{{ page.issues_main_heading_description | markdownify 
}}</span>
+      </div>
     </div>
-    <div class="row py-4">
-      {% assign issues = site.data.api_fetch.issues-opened %}
-      {% for issue in issues %}
-        <div class="col-lg-3 col-md-4 col-sm-6 py-3">
-          <div class="d-flex flex-column justify-content-between rounded bg-white shadow-sm pt-3 pb-2 px-3 
h-100 shadow-hover">
-            <div class="pb-2">
-              <div class="d-flex justify-content-between align-items-start">
-                <h6 class="m-0 pr-2 text-break">{{ issue.title }}</h6>
-                <a class="btn btn-primary btn-sm" href="{{ issue.web_url }}" data-toggle="tooltip" 
data-html="true" title="<small>View on Gitlab</small>"><i
-                    class="fab fa-gitlab"></i></a>
+    <div class="row py-4 align-items-start">
+      {% assign issues = site.data.api_fetch.issues_opened %}
+      {% for i in (0..3) %}
+        <div class="col-lg-3 col-sm-6 px-0 px-sm-3">
+          {% assign start = i | times: 4 %}
+          {% assign end = start | plus: 4 | minus: 1 %}
+          {% for j in (start..end) %}
+            <div class="d-flex flex-column justify-content-between rounded bg-white shadow-sm px-3 my-3 
shadow-hover">
+              <div class="py-3">
+                <div class="d-flex justify-content-between align-items-start">
+                  <h6 class="m-0 pr-2 text-break">{{ issues[j].title }}</h6>
+                  <a class="btn btn-primary btn-sm" href="{{ issues[j].web_url }}" data-toggle="tooltip" 
data-html="true" title="<small>View on Gitlab</small>"><i
+                      class="fab fa-gitlab"></i></a>
+                </div>
+                <div class="py-2">
+                  {% assign all_labels = site.data.api_fetch.labels %}
+                  {% for label in issues[j].labels %}
+                    {% assign current_label = all_labels | where: 'name', label %}
+                    {% assign label_style = 'style=background:' | append: current_label[0].color | append: 
';color:' | append: current_label[0].text_color %}
+                    <span class="badge badge-pill" {{ label_style }}>{{ current_label[0].name }}</span>
+                  {% endfor %}
+                </div>
               </div>
-              <div class="py-2">
-                {% for label in issue.labels %}
-                  <span class="badge badge-pill badge-{% cycle 'secondary', 'tertiary', 'danger', 'warning' 
%}">{{ label }}</span>
-                {% endfor %}
+              <div class="border-top text-muted py-2" style="line-height: 1.3;">
+                <span class="small" id="time" data-time="{{ issues[j].created_at }}"></span>
+                <br>
+                <span class="small">by <a href="{{ issues[j].author.web_url }}">{{ issues[j].author.name 
}}</a></span>
               </div>
             </div>
-            <div class="border-top text-muted">
-              <span class="small">Opened <span id="time" data-time="{{ issue.created_at }}"></span> by <a 
href="{{ issue.author.web_url }}">{{ issue.author.name }}</a></p>
-            </div>
-          </div>
+            {% endfor %}
         </div>
       {% endfor %}
     </div>
@@ -128,30 +138,29 @@ permalink: /community/
   </div>
 </section>
 
-{% assign members = site.data.api_fetch.members-all %}
+{% assign members = site.data.api_fetch.members_all %}
 <section class="py-4" id="contributors">
   <div class="container border rounded py-4 px-4 bg-light">
     <div class="row">
-      <div class="col">
-        <h2 class="font-weight-light mb-3">Contributors</h2>
-        <p class="text-muted w-75">These are the people who apply their best of skills to make GTK as the 
developers
-          go-to tool. To see your yourself as a GTK Contributor, start by solving some <a 
href="https://gitlab.gnome.org/GNOME/gtk/issues";>issues</a>
-          for the GTK.</p>
+      <div class="col px-0 px-md-3">
+        <h2 class="font-weight-light mb-3">{{ page.team_main_heading }}</h2>
+        <span class="text-muted w-100 w-sm-75">{{ page.team_main_heading_description | markdownify }}</span>
       </div>
     </div>
     <div class="row pt-4">
       {% for member in members %}
-      <div class="col-2 py-3">
+      <div class="col-lg-2 col-md-3 col-sm-4 col-2 py-3">
         <div class="d-flex justify-content-center align-items-center py-2">
-          <img src="{{ member.avatar_url }}" class="img-fluid rounded-circle w-75 border img-thumbnail">
+          <!-- <img src="{{ member.avatar_url }}" class="img-fluid rounded-circle w-75 border 
img-thumbnail"> -->
+          <img src="{{ '/assets/img/avatar.png' | prepend: site.url }}" class="img-fluid rounded-circle w-75 
border img-thumbnail">
         </div>
         <div class="d-flex flex-column align-items-center">
           <span class="text-primary text-center text-secondary">{{ member.name }}</span>
           <ul class="list-unstyled d-flex small mb-0">
             <li>
-              <a href="{{ member.web_url }}" target="_blank">Gitlab</a>
+              <a href="{{ member.web_url }}" target="_blank"><i class="fab fa-gitlab"></i></a>
             </li>
-            <li class="px-1">·</li>
+            <li class="px-1 text-info">&bull;</li>
             <li>
               <span class="text-muted">Developer</span>
             </li>
@@ -163,14 +172,14 @@ permalink: /community/
   </div>
 </section>
 
-{%- include footer.html -%}
+{% include footer.html %}
 
 <script>
   // calculates how much time ago an issue was opened. uses moment.js
   var times = document.querySelectorAll("#time");
   times.forEach(item => {
     time = item.getAttribute('data-time');
-    item.innerHTML = moment(time, moment.HTML5_FMT.DATETIME_LOCAL_MS).fromNow();
+    item.innerHTML = 'Opened ' + moment(time, moment.HTML5_FMT.DATETIME_LOCAL_MS).fromNow();
   });
 
   // used to display tooltip over gitlab icon in issue tracker.
diff --git a/collections/_pages/docs.html b/collections/_pages/docs.html
index b1db9d3..05ac7bd 100644
--- a/collections/_pages/docs.html
+++ b/collections/_pages/docs.html
@@ -6,9 +6,11 @@ page_main_heading: GTK Docs
 page_main_heading_description: Find out all the things you need to work with GTK as a Developer.
 ---
 
-{%- include header.html -%}
+{% include header.html %}
 
-<section class="py-4 d-flex flex-column align-items-center bg-dark text-white" id="landing">
+{% include navbar.html %}
+
+<section class="py-4 d-flex flex-column align-items-center bg-dark text-white">
   <div class="container">
     <div class="row">
       <div class="col-md-5 d-flex justify-content-end flex-column main-heading">
@@ -158,6 +160,4 @@ page_main_heading_description: Find out all the things you need to work with GTK
   </div>
 </section>
 
-<script>
-</script>
 {%- include footer.html -%}
\ No newline at end of file
diff --git a/collections/_pages/features.html b/collections/_pages/features.html
index 283a0b9..ca97e81 100644
--- a/collections/_pages/features.html
+++ b/collections/_pages/features.html
@@ -6,7 +6,10 @@ page_main_heading: Why GTK?
 page_main_heading_description: Thanks to all the hardwork by the community, new features have been 
introduced to GTK, which make v4 even better.
 ---
 
-{%- include header.html -%}
+{% include header.html %}
+
+{% include navbar.html %}
+
 <body>
 <section class="d-flex flex-column align-items-center bg-no-repeat bg-center" style="background: url('{{ 
'/assets/img/wall-gtk-features.png' | prepend: site.url }}')">
   <div class="container">
@@ -70,6 +73,4 @@ page_main_heading_description: Thanks to all the hardwork by the community, new
   </div>
 </section>
 
-<script>
-</script>
-{%- include footer.html -%}
\ No newline at end of file
+{% include footer.html %}
\ No newline at end of file
diff --git a/collections/_pages/index.html b/collections/_pages/index.html
index 337b129..76dd82f 100644
--- a/collections/_pages/index.html
+++ b/collections/_pages/index.html
@@ -1,10 +1,21 @@
 ---
-navbar_type: light
+navbar_type: transparent
 permalink: ''
 
 page_main_heading: Create interfaces, that users just love
 page_main_heading_description: Offering a complete set of widgets, GTK is suitable for projects ranging from 
small one-off tools to complete application suites.
 
+downloads:
+  - os: Linux
+    link: /docs/installations/linux/
+    icon: fab fa-linux
+  - os: Windows
+    link: /docs/installations/windows/
+    icon: fab fa-windows
+  - os: MacOS
+    link: /docs/installations/macos/
+    icon: fab fa-apple
+
 usecase_main_heading: Overcome Complex Challenges
 usecase_main_heading_description: GTK is cross-platform and boasts an easy to use API, speeding up your 
development time and helping you tackle challenges whether you are GTK Developer or developing using GTK.
 
@@ -19,6 +30,7 @@ integrations_main_heading_description: |-
   Glade is a RAD tool which enables quick & easy development of user interfaces for the GTK toolkit and the 
GNOME desktop environment.
 
   Check out this easy tutorial on [how to create a 
toolbar](https://developer.gnome.org/gnome-devel-demos/stable/toolbar_builder.py.html.en) using Glade.
+integrations_image: /assets/img/wall-glade.png
 
 tutorials_main_heading: Quick Tutorials
 tutorials_main_heading_description: Creating an application using GTK 4 is super easy. Check out this short 
tutorial on how the things are done from Setup till the deployment.
@@ -69,41 +81,36 @@ news_and_events_list:
   - title: Meet the community
     description: As regularly as possible, GTK team meetings take place at conferences and 
[hackfests](https://wiki.gnome.org/Hackfests) to discuss the future of GTK and define a 
[roadmap](https://wiki.gnome.org/Projects/GTK/Roadmap).
   - title: Help evolve GTK
-    description: If you are a developer and want to contribute towards GTK, you are more than welcome to do 
so. [Get started now](/docs/) to get some familarity to GTK.
+    description: If you are a developer and want to contribute towards GTK, you are more than welcome to do 
so. [Get started now](/docs/getting-started/) to get some familarity to GTK.
 ---
 
-{%- include header.html -%}
+{% include header.html %}
 
-<section class="pt-5 pb-4 d-flex flex-column align-items-center" id="landing">
-  <div class="container landing-sm d-flex align-items-center">
-    <div class="row d-flex justify-content-center">
-      <div class="col-md-5 d-flex justify-content-center flex-column main-heading">
-        <h1 class="display-4 pb-3">{{ page.page_main_heading }}</h1>
-        <span class="text-muted pb-3">{{ page.page_main_heading_description | markdownify }}</span>
+{% assign back_img = '/assets/img/wall-gtk-main.png' | prepend: site.url %}
+<section class="d-flex flex-column" id="landing" style="background: url('{{ back_img }}');">
+  {% include navbar.html %}
+  <div class="container d-flex align-items-center" style="height: var(--breakpoint-sm)">
+    <div class="row">
+      <div class="col-md-6 d-flex justify-content-center flex-column main-heading text-white">
+        <h1 class="display-3 pb-3 text-shadow">{{ page.page_main_heading }}</h1>
+        <span class="text-light mb-4 text-shadow">{{ page.page_main_heading_description | markdownify 
}}</span>
         <div class="pb-3 d-flex">
           <a href="{{ '/docs/' | prepend: site.url }}" class="btn btn-md btn-primary" role="button">Learn 
GTK</a>
           <div class="dropdown">
             <a class="btn btn-md btn-outline-secondary dropdown-toggle ml-2" href="#" role="button" 
id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Downloads</a>
             <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
-              <a href="{{ '/downloads/linux/' | prepend: site.url }}" class="dropdown-item"><i class="fab 
fa-linux pr-2 fa-fw"></i>Linux</a>
-              <a href="{{ '/downloads/windows/' | prepend: site.url }}" class="dropdown-item"><i class="fab 
fa-windows pr-2 fa-fw"></i>Windows</a>
-              <a href="{{ '/downloads/macos/' | prepend: site.url }}" class="dropdown-item"><i class="fab 
fa-apple pr-2 fa-fw"></i>MacOS</a>
+              {% for download in page.downloads %}
+                <a href="{{ download.link | prepend: site.url }}" class="dropdown-item"><i class="{{ 
download.icon }} pr-2 fa-fw"></i>{{ download.os }}</a>
+              {% endfor %}
             </div>
           </div>
         </div>
-        <p class="small text-muted">Currently v{{ site.data.stuff.gtkVersion }}</p>
-      </div>
-      <div class="col-md-7 d-none d-md-flex justify-content-center flex-column">
-        <div class="col img-grp">
-          <img src="{{ '/assets/img/wall-editor.png' | prepend: site.url }}" class="img-fluid editor 
shadow-lg" />
-          <img src="{{ '/assets/img/wall-calendar.png' | prepend: site.url }}" class="img-fluid calendar 
shadow-lg" />
-          <img src="{{ '/assets/img/wall-music.png' | prepend: site.url }}" class="img-fluid music 
shadow-lg" />
-        </div>
+        <p class="small text-info">Currently v{{ site.data.api_fetch.tags[0].name }}</p>
       </div>
     </div>
   </div>
-  <button class="btn btn-light shadow-sm rounded-circle mt-4" onclick="slideDown()"><i class="fas 
fa-chevron-down"></i></button>
 </section>
+</div>
 
 <section class="py-4" id="usecases">
   <div class="container d-flex flex-column align-items-center">
@@ -113,7 +120,7 @@ news_and_events_list:
         <span class="text-muted">{{ page.usecase_main_heading_description | markdownify }}</span>
       </div>
     </div>
-    <div class="row">
+    <div class="row mt-4">
       <div class="col-8 mx-auto">
         <img src="{{ '/assets/img/wall-usecases.svg' | prepend: site.url }}" class="w-100 img-fluid" 
style="height:100%;" />
       </div>
@@ -124,13 +131,12 @@ news_and_events_list:
       {% for case in cases %}
       <div class="col-md-4 pb-4 pb-md-0">
         <h6>{{ case.title }}</h6>
-        <span class="text-muted small">{{ case.description }}</span>
-        <br>
+        <span class="text-muted small">{{ case.description | markdownify }}</span>
         <a href="{{'/usecases/' | prepend: site.url | append: case.title }}/" class="small border-bottom 
text-decoration-none border-primary">Read More</a>
       </div>
       {% endfor %}
       <div class="col-12 text-center pt-3 pt-md-4">
-        <a href="{{'/usecases/' | prepend: site.url }}" class="btn btn-md btn-outline-primary" 
role="button">Discover Usecases</a>
+        <a href="{{'/usecases/' | prepend: site.url }}" class="btn btn-md btn-primary" 
role="button">Discover Usecases</a>
       </div>
     </div>
   </div>
@@ -157,15 +163,15 @@ news_and_events_list:
         {% endfor %}
         </div>
       </div>
-      <div class="col-lg-8 p-0 bg-light rounded-bottom border border-info border-top-0 pl-3 overflow-auto">
+      <div class="col-lg-8 p-0 bg-light border border-info border-top-0 pl-3 overflow-auto">
         <div class="tab-content" id="nav-tabContent">
         {% for code in codes %}
           {% if forloop.first == true %}
-            <div class="tab-pane overflow-y-auto fade small active show" id="list-{{ code.ext }}" 
role="tabpanel" aria-labelledby="list-{{ code.ext }}-list">
+            <div class="tab-pane overflow-y-auto fade small pt-3 active show" id="list-{{ code.ext }}" 
role="tabpanel" aria-labelledby="list-{{ code.ext }}-list">
             {{ code.snippet | markdownify }}
             </div>
           {% else %}
-            <div class="tab-pane overflow-auto fade small" id="list-{{ code.ext }}" role="tabpanel" 
aria-labelledby="list-{{ code.ext }}-list">
+            <div class="tab-pane overflow-auto fade small pt-3" id="list-{{ code.ext }}" role="tabpanel" 
aria-labelledby="list-{{ code.ext }}-list">
             {{ code.snippet | markdownify }}
             </div>
           {% endif %}
@@ -201,7 +207,7 @@ news_and_events_list:
         <span class="text-muted">{{ page.integrations_main_heading_description | markdownify }}</span>
       </div>
       <div class="col-lg-7 d-flex justify-content-center align-items-center py-4 py-lg-0">
-        <img src="{{ '/assets/img/wall-glade.png' | prepend: site.url }}" class="img-fluid w-100 shadow-lg" 
alt="Integration of Glade and GTK" />
+        <img src="{{ page.integrations_image | prepend: site.url }}" class="img-fluid w-100 shadow-lg" 
alt="Integration of Glade and GTK" />
       </div>
     </div>
   </div>
@@ -221,7 +227,7 @@ news_and_events_list:
       {% for feature in features %}
         <div class="col-md-6 px-3">
           <div class="col d-flex px-0 px-sm-3 pb-4">
-            <div class="px-2">
+            <div class="pr-2">
               <span class="fa-stack fa-1x fa-fw d-flex justify-content-center align-items-center">
                 <i class="fas fa-circle fa-stack-2x fa-fw text-secondary text-center"></i>
                 <i class="{{ feature.icon }} fa-stack-1x fa-inverse fa-fw text-center"></i>
@@ -262,7 +268,7 @@ news_and_events_list:
   <div class="container">
     <div class="row">
       <div class="embed-responsive embed-responsive-16by9 col-12 col-md-6 rounded">
-        <iframe class="embed-responsive-item py-3 px-3" src="{{ site.data.stuff.tutorial_video_link }}" 
allowfullscreen></iframe>
+        <!-- <iframe class="embed-responsive-item py-3 px-3" src="{{ site.tutorial_video_link }}" 
allowfullscreen></iframe> -->
       </div>
       <div class="col-12 col-md-6 px-3 py-3 px-md-4 d-flex flex-column justify-content-center">
         <h2 class="font-weight-light mb-3">{{ page.tutorials_main_heading }}</h2>
@@ -277,7 +283,7 @@ news_and_events_list:
 
 {% assign news_and_events = page.news_and_events_list %}
 {% assign back_img = '/assets/img/wall-events-pattern.svg' | prepend: site.url %}
-<section class="py-4" id="events" style="background: url('{{ img_back }}')">
+<section class="py-4" id="events" style="background: url('{{ back_img }}')">
   <div class="container">
     <h2 class="text-center font-weight-light mb-3">News and Events</h2>
     <div class="row py-4">
@@ -294,15 +300,10 @@ news_and_events_list:
 </section>
 
 <script>
-  // implementing the functionality for "see more" button
-  function slideDown() {
-    location.assign("#usecases");
-  }
-
   // controls the appearance of code container for language bindings
   var tabs = document.querySelectorAll(".tab-pane");
   var i, l = tabs.length;
-  var max = 400;
+  var max = 360;
   for (i = 0; i < l; i++) {
     tabs[i].style.height = max + "px";
   }
@@ -313,7 +314,7 @@ news_and_events_list:
       slidesToShow: 6,
       swipeToSlide: true,
       autoplay: true,
-      autoplaySpeed: 2500,
+      autoplaySpeed: 2000,
       arrows: false,
       dots: false,
       pauseOnHover: false,
@@ -321,20 +322,22 @@ news_and_events_list:
       {
         breakpoint: 992,
         settings: {
-          slidesToShow: 4
+          slidesToShow: 4,
+          autoplaySpeed: 1500
         }
       },
       {
         breakpoint: 768,
         settings: {
-          slidesToShow: 3
+          slidesToShow: 2,
+          autoplaySpeed: 1000
         }
       }]
     });
   });
 
-  // used to implement the dropdown for the downloads
+  // used to implement the bootstrap dropdown
   $(".dropdown-toggle").dropdown();
 </script>
 
-{%- include footer.html -%}
\ No newline at end of file
+{% include footer.html %}
\ No newline at end of file
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]