Greenlight landing page layout adjustments, general cleanup and responsive styles (#271)

app/assets/stylesheets/main.scss

@@ -28,8 +28,15 @@
   height: 40%;
 }
 
+.lead {
+  font-size:18px;
+}
+
 .feature-stamp {
-  border-radius: 6px;
+  .stamp {
+    padding:1em 1.5em;
+    height:auto;
+  }
 }
 
 .or-line {
@@ -47,25 +54,6 @@
   }
 }
 
-.img-cycle img {
+.display-4 {
-  display: none;
+  font-weight: normal;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.img-cycle img:first-child {
-  display:block;
-}
-
-.green-grad {
-  background: linear-gradient(to right, rgba(164,179,87,1) 0%, rgba(117,137,12,1) 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.blue-grad {
-  background: linear-gradient(to right, rgba(65,105,225,1) 0%,  rgba(0,0,225,1) 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
 }

app/views/main/index.html.erb

@@ -21,25 +21,24 @@
   <% end %>
 <% end %>
 
-<div class="container pt-9 pb-4">
+<div class="background">
-  <div class="row pb-8">
+  <div class="container pt-9 pb-8">
-    <div class="col-md-8 col-sm-12">
+    <div class="row">
-      <p id="main-text" class="font-weight-400 display-4"><%= t("landing.welcome").html_safe %></p>
+      <div class="col-md-12 col-sm-12 text-center">
-      <p class="text-muted h4" style="line-height: 22px;"><%= t("landing.about", href: link_to(t("greenlight"), "https://bigbluebutton.org/2018/07/09/greenlight-2-0/", target: "_blank", class: "text-green")).html_safe %></p>
+        <h1 id="main-text" class="display-4 mb-4"> <%= t("landing.welcome").html_safe %></h1>
-      <br>
+        <p class="lead offset-lg-2 col-lg-8 col-sm-12 "><%= t("landing.about", href: link_to(t("greenlight"), "https://bigbluebutton.org/2018/07/09/greenlight-2-0/", target: "_blank")).html_safe %></p>
-      <%= link_to "https://youtu.be/Hso8yLzkqj8", target: "_blank" do %>
+        <%= link_to "https://youtu.be/Hso8yLzkqj8", target: "_blank" do %>
-        <h4><%= t("landing.video") %> <i class="far fa-play-circle"></i></h4>
+          <h4><%= t("landing.video") %> <i class="far fa-play-circle ml-1"></i></h4>
-      <% end %>
+        <% end %>
-    </div>
+      </div>
-    <div class="col-md-4 col-sm-12 img-cycle text-center">
+
-      <%= image_tag("landing/world.png", class: "active") %>
-      <%= image_tag("landing/bbb.png") %>
-      <%= image_tag("landing/mobile.png") %>
     </div>
   </div>
-  <%= render "shared/features" %>
 </div>
 
+<%= render "shared/features" %>
+
+
 <script>
 var cycleImages = function(){
   var images = $('.img-cycle img');

app/views/shared/_error_banner.html.erb

@@ -13,6 +13,6 @@
 # with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
 %>
 
-<div class="pt-2 text-center text-danger error-section pb-1">
+<div class="alert alert-icon alert-danger text-center mb-0">
   <%= yield %>
 </div>

app/views/shared/_features.html.erb

@@ -13,27 +13,29 @@
 # with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
 %>
 
-<h1 class="text-center mt-8"><%= t("features.title") %></h1>
 
-<div class="container text-center">
+<div class="container mt-8 mb-6 text-center">
-  <div class="col-12 mt-6">
+
-    <div class="background row feature-stamp">
+  <h2 class="mb-6">Greenlight <%= t("features.title") %></h2>
-      <div class="col-3 my-5">
+
-        <i class="fas fa-chalkboard-teacher fa-3x"></i>
+  <div class="row feature-stamp">
-        <h4 class="mt-5"><%= t("features.rooms") %></h4>
+    <div class="col-lg-3 col-md-6">
-      </div>
+      <div class="feature-item">
-      <div class="col-3 my-5">
+        <div class="stamp bg-primary"><i class="fas fa-chalkboard-teacher fa-2x"></i></div>
-        <i class="fas fa-film fa-3x"></i>
+        <h4 class="mt-4"><%= t("features.rooms") %></h4>
-        <h4 class="mt-5"><%= t("features.recordings") %></h4>
-      </div>
-      <div class="col-3 my-5">
-        <i class="fas fa-pencil-alt fa-3x"></i>
-        <h4 class="mt-5"><%= t("features.designs") %></h4>
-      </div>
-      <div class="col-3 my-5">
-        <i class="fas fa-door-open fa-3x"></i>
-        <h4 class="mt-5"><%= t("features.authentication") %></h4>
       </div>
     </div>
+    <div class="col-lg-3 col-md-6">
+      <span class="stamp bg-primary"><i class="fas fa-film fa-2x"></i></span>
+      <h4 class="mt-4"><%= t("features.recordings") %></h4>
+    </div>
+    <div class="col-lg-3 col-md-6">
+      <span class="stamp bg-primary"><i class="fas fa-pencil-alt fa-2x"></i></span>
+      <h4 class="mt-4"><%= t("features.designs") %></h4>
+    </div>
+    <div class="col-lg-3 col-md-6">
+      <span class="stamp bg-primary"><i class="fas fa-door-open fa-2x"></i></span>
+      <h4 class="mt-4"><%= t("features.authentication") %></h4>
+    </div>
   </div>
 </div>

app/views/shared/_footer.html.erb

@@ -14,6 +14,5 @@
 %>
 
 <footer class="footer pt-3">
-  <h5 class="text-center mb-1"><%= t("footer.powered_by", href: link_to(t("greenlight"), "https://bigbluebutton.org/2018/07/09/greenlight-2-0/", target: "_blank", class: "text-green")).html_safe %></h5>
+  <p class="text-center mb-1"><%= t("footer.powered_by", href: link_to(t("greenlight"), "https://bigbluebutton.org/2018/07/09/greenlight-2-0/", target: "_blank")).html_safe %> v <%= Greenlight::Application::VERSION %></p>
-  <p class="text-center pb-0">v <%= Greenlight::Application::VERSION %></p>
 </footer>

config/locales/en.yml

@@ -70,7 +70,7 @@ en:
   invite_message: "To invite someone to the meeting, send them this link:"
   landing:
     about: "%{href} is a simple front-end for your BigBlueButton open-source web conferencing server. You can create your own rooms to host sessions, or join others using a short and convenient link."
-    welcome: Welcome to <span class="blue-grad">BigBlueButton</span>.
+    welcome: Welcome to BigBlueButton.
     video: Watch our tutorial on using Greenlight
     upgrade: Show me how to upgrade to 2.0!
     version: We've released a new version of Greenlight, but your database isn't compatible.