Refactoring homepage to be mobile friendly

assets/static/beeware.css

@@ -50,6 +50,9 @@
 
 /* Small devices (landscape phones, less than 48em) */
 @media (max-width: 768px) {
+  .content {
+    margin-bottom: 5em;
+  }
   .display-1 {
     font-size: 400%;
   }
@@ -68,17 +71,58 @@
 }
 /* Extra small devices (portrait phones, less than 34em) */
 @media (max-width: 544px) {
+
+  .beeware-logo {
+    display: block;
+    margin: 15px auto 35px;
+    width: 50%;
+  }
+
+  .content {
+    margin-top: 3em;
+    margin-bottom: 7em;
+  }
+
   .display-1 {
     font-size: 270%;
+    /* TODO: Once Bootstrap is upgraded, instead use class text-xs-center */
+    text-align: center;
   }
   .display-2 {
-    font-size: 125%;
+    font-size: 105%;
+    /* TODO: Once Bootstrap is upgraded, instead use class text-xs-center */
+    text-align: center;
+  }
+
+  .footer .copyright {
+    margin-bottom: 0.5rem;
+    text-align: center;
+  }
+
+  .footer-social {
+    margin-bottom: 0.5rem;
+  }
+
+  .footer-social, .footer-sitemap {
+    text-align: center;
+  }
+
+  .jumbotron {
+    margin-bottom: 0;
   }
 
   .jumbotron .btn-lg {
     font-size: 1rem;
   }
 
+  .jumbotron p {
+    margin: 1.5rem 0;
+  }
+
+  .jumbotron-buttons a {
+    width: 100%;
+  }
+
   .video {
     width: 300px;
     height: 225px;
@@ -101,11 +145,6 @@
   Main styles
  --------------------------------------------------- */
 
-.content {
-  margin-top: 3em;
-  margin-bottom: 5em;
-}
-
 h1 {
   font-family: 'Cutive', serif;
   margin-top: 1em;
@@ -177,6 +216,9 @@ h6:first-child {
   margin-top: 0.8rem;
 }
 
+a i {
+  padding-right: 0.25em;
+}
 nav {
   font-family: 'Cutive', serif;
 }
@@ -289,6 +331,10 @@ body {
   background-color: #f5f5f5;
 }
 
+.footer a {
+  margin: 0 0.75em;
+}
+
 
 /*----------------------------------------------------
   Carousels in gutter

templates/home.html

@@ -19,12 +19,14 @@
 <div class="jumbotron">
   <div class="container">
     <div class="row">
-      <div class="hidden-xl-down"><img class="float-left" src="{{ '/static/images/brutus-270.png'|asseturl }}"></div>
+      <div class="hidden-xl-down col-xl-4">
-      <div class="col-8">
+        <img class="beeware-logo float-sm-left" src="{{ '/static/images/brutus-270.png'|asseturl }}">
+      </div>
+      <div class="col-sm-12 col-md-8">
         <h1 class="display-1">BeeWare</h1>
         <h2 class="display-2">{{ this.title }}</h2>
         <p>{{ this.description }}</p>
-        <p>
+        <p class="jumbotron-buttons">
           {% for blk in this.header.blocks %}
           {{ blk }}
           {% endfor %}
@@ -36,6 +38,8 @@
 {% endblock %}
 
 {% block body %}
+
+<!-- MD and Larger Project List -->
 <div class="row">
   <div class="col-sm-7 mr-auto">
     {% for blk in this.body.blocks %}
@@ -54,7 +58,7 @@
   </div><!-- / main content -->
 
 
-  <div class="col-sm-4">
+  <div class="d-none d-sm-block col-sm-4">
     <div class="sidebar-module sidebar-module-inset gutter">
 
       {{ this.gutter_top }}
@@ -126,4 +130,76 @@
     </div>
   </div>
 </div>
+
+<!-- SM Project List -->
+<div class="row" style="background-color: #e9ecef;">
+  <div class="col-sm-12 d-block d-sm-none gutter">
+    {{ this.gutter_top }}
+    <div id="carousel-members" class="carousel slide" data-ride="carousel">
+      <ol class="carousel-indicators">
+        <li data-target="#carousel-members" data-slide-to="0" class="active"></li>
+      </ol>
+      <div class="carousel-inner" role="listbox">
+        <div class="carousel-item active">
+          <p><a href="{{ '/community/members/revsys/'|url(alt=this.alt) }}"><img class="img-fluid" src="/community/members/revsys/revsys-large.png"></a></p>
+          <p>{{ t_ad_hoc_sponsor }}</p>
+        </div>
+      </div>
+    </div>
+
+    <hr/>
+
+    <h3><a href="{{ '/news/buzz/'|url(alt=this.alt) }}">{{ t_latest_news }}</a></h3>
+    {% set blog = site.query('/news/buzz', alt=this.alt).all() %}
+    <p><a href="{{ blog[0]|url(alt=this.alt) }}">{{ blog[0].pub_date.strftime("%d %b")}}: {{ blog[0].title }}</a></p>
+
+    <hr/>
+
+    {% set events = site.query('/news/events', alt=this.alt).filter(F.upcoming==True) %}
+    {% if events %}
+    <h3><a href="{{ '/news/events/'|url(alt=this.alt) }}">{{ t_meet_team }}</a></h3>
+
+    <div id="carousel-events" class="carousel slide" data-ride="carousel">
+      <ol class="carousel-indicators">
+        {% for event in events %}
+        <li data-target="#carousel-events" data-slide-to="{{ loop.index0 }} "{% if loop.index0 == 0 %} class="active"{% endif %}></li>
+        {% endfor %}
+      </ol>
+      <div class="carousel-inner" role="listbox">
+        {% for event in events %}
+        <div class="carousel-item{% if loop.index0 == 0 %} active{% endif %}">
+          <h4><a href="{{ event|url(alt=this.alt) }}">{{ event.title }}</a></h4>
+          {% if event.event_type == "keynote" %}
+          {{ event.speaker[0] }} {{ t_keynoting }}
+          {% elif event.event_type == "talk" %}
+          {{ event.speaker[0] }} {{ t_speaking }}
+          {% elif event.event_type == "tutorial" %}
+          {{ event.speaker[0] }} {{ t_tutorial }}
+          {% elif event.event_type == "booth" %}
+          {{ t_come_see_us }}
+          {% elif event.event_type == "sprint" %}
+          {{ t_sprinting }}
+          {% else %} <br>
+          {% endif %}
+          <p>{{ event.date.strftime("%d %B %Y") }}</p>
+        </div>
+        {% endfor %}
+      </div>
+    </div>
+
+    <hr/>
+    {% endif %}
+    <h2><a href="{{ '/project/projects/'|url(alt=this.alt) }}">{{ t_projects }}</a></h2>
+    {% set project_types = site.query('/project/projects', alt=this.alt) %}
+    {% for project_type in project_types %}
+    {%   for project in site.query(project_type.path, alt=this.alt).filter(F.showcase==True) %}
+    <div>
+      <h4><a href="{{ project|url(alt=this.alt) }}"><img src="{{ site.get(project.path)|url }}{{ project.image }}" height="32px" alt="{{ project.name }}"> {{ project.name }}</h4></a>
+      {{ project.short_description|string|wordwrap(width=40, wrapstring='<br>')|safe }}
+    </div>
+    {%   endfor %}
+    {% endfor %}
+    {{ this.gutter_bottom }}
+  </div>
+</div>
 {% endblock %}

templates/layout.html

@@ -180,12 +180,22 @@ ga('send', 'pageview');
 
     <footer class="footer">
       <div class="container text-muted">
-        <div class="float-right clearfix">&copy; Russell Keith-Magee 2017</div>
+        <div class="d-block d-sm-none copyright">&copy; Russell Keith-Magee 2018</div>
-        <p><a href="https://github.com/pybee/"><i class="fa fa-github fa-lg" aria-hidden="true"></i> GitHub</a> |
+        <div class="float-right clearfix d-sm-block d-none">&copy; Russell Keith-Magee 2018</div>
+        <p class="d-sm-block d-none">
+          <a href="https://github.com/pybee/"><i class="fa fa-github fa-lg" aria-hidden="true"></i> GitHub</a> |
           <a href="https://gitter.im/pybee/general/"><i class="fa fa-comments-o fa-lg" aria-hidden="true"></i> Gitter</a> |
           <a href="https://twitter.com/PyBeeWare/"><i class="fa fa-twitter fa-lg" aria-hidden="true"></i> Twitter</a> |
           <a href="{{ '/sitemap'|url(alt=this.alt) }}"><i class="fa fa-sitemap fa-lg" aria-hidden="true"></i> {{ t_sitemap }}</a>
         </p>
+        <p class="d-block d-sm-none footer-social">
+          <a href="https://github.com/pybee/"><i class="fa fa-github fa-lg" aria-hidden="true"></i> GitHub</a> |
+          <a href="https://gitter.im/pybee/general/"><i class="fa fa-comments-o fa-lg" aria-hidden="true"></i> Gitter</a> |
+          <a href="https://twitter.com/PyBeeWare/"><i class="fa fa-twitter fa-lg" aria-hidden="true"></i> Twitter</a>
+        </p>
+        <p class="d-block d-sm-none footer-sitemap"> 
+          <a href="{{ '/sitemap'|url(alt=this.alt) }}"><i class="fa fa-sitemap fa-lg" aria-hidden="true"></i> {{ t_sitemap }}</a>
+        </p>
       </div>
     </footer>