Merge branch '987' into 'main'

fix(css): update selection of homepage css feedback

See merge request gitlab-org/gitlab-docs!1910

5 files changed, 12 insertions, 13 deletions

diff --git a/content/_data/landing.yaml b/content/_data/landing.yaml
index 2a50733e..e52462a2 100644
--- a/content/_data/landing.yaml
+++ b/content/_data/landing.yaml
@@ -22,7 +22,7 @@ heros:
       - title: Auto DevOps
         url: '/ee/topics/autodevops/'
   - title: Collaboration
-    description: Configure and develop your applications.
+    description: Configure and develop your software applications.
     img: /assets/images/collaberation.svg
     alt: collaboration
     links:
diff --git a/content/assets/javascripts/docs.js b/content/assets/javascripts/docs.js
index 9452e1bb..d68fc76b 100644
--- a/content/assets/javascripts/docs.js
+++ b/content/assets/javascripts/docs.js
@@ -1,9 +1,7 @@
 ---
-version: 4
+version: 5
 ---
 
-var NAV_INLINE_BREAKPOINT = 1100;
-
 var landingHeaderBar = document.getElementById('landing-header-bar');
 var headerLinks = document.getElementsByClassName('header-link');
 
diff --git a/content/assets/stylesheets/_landing.scss b/content/assets/stylesheets/_landing.scss
index 13a617c4..594a177e 100644
--- a/content/assets/stylesheets/_landing.scss
+++ b/content/assets/stylesheets/_landing.scss
@@ -1,5 +1,5 @@
 ---
-version: 5
+version: 6
 ---
 
 @import 'variables';
@@ -84,7 +84,7 @@ version: 5
 
     .search {
       background: $gds-white;
-      box-shadow: 0 0 0.125rem $landing-gl-black-50, 0 0.5rem 1.5rem $landing-gl-blue-950;
+      box-shadow: 0 0 0.125rem $landing-gl-black-50, 0 0.25rem 1.5rem $landing-gl-blue-950;
       border-radius: 0.25rem;
       width: 65%;
 
@@ -175,7 +175,7 @@ version: 5
       }
 
       li {
-        margin: 0.5rem 0 0;
+        margin: 0;
       }
 
       a {
@@ -211,7 +211,7 @@ version: 5
 
   .popular {
     background: $gds-white;
-    border: 1px solid $landing-gl-gray-50;
+    border: 1px solid $gray-50;
 
     h2 {
       font-weight: 500;
@@ -306,6 +306,7 @@ version: 5
         font-size: 1rem;
         line-height: 1.25rem;
         color: $landing-gl-purple-500;
+        white-space: nowrap;
       }
 
       .card-text {
@@ -441,8 +442,8 @@ version: 5
     }
 
     .dot {
-      height: 0.313rem;
-      width: 0.313rem;
+      height: 0.25rem;
+      width: 0.25rem;
       background-color: $gds-white;
       border-radius: 50%;
       display: inline-block;
diff --git a/content/index.erb b/content/index.erb
index da2c27b5..533de3a1 100644
--- a/content/index.erb
+++ b/content/index.erb
@@ -44,7 +44,7 @@ title: GitLab Documentation
       <div class="oval"></div>
       <div class="row text-left">
         <% @items['/_data/landing.yaml'][:heros].each do |hero| %>
-          <div class="col-md-4 col-12 pb-4">
+          <div class="col-lg-4 col-md-6 col-12 pt-0 pb-4 pr-0 pl-4">
             <div class="card topic h-100">
               <div class="card-body">
                 <img class="card-img-top" src="<%= hero[:img] %>" alt="<%= hero[:alt] %>" aria-hidden="true" role="img">
diff --git a/layouts/default.html b/layouts/default.html
index 9352a7d2..07e2ae86 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -47,7 +47,7 @@
           </div>
           <main>
             <div class="row">
-              <div class="col">     
+              <div class="col">
                 <div class="article-metadata">
                   <% if @item[:author] and @item[:author_gitlab] %>
                   Article written by <a href="https://gitlab.com/<%= @item[:author_gitlab] %>" target="_blank"><%= @item[:author] %></a>
@@ -110,7 +110,7 @@
     <script src="<%= @items['/assets/javascripts/docs.*'].path %>"></script>
     <script src="<%= @items['/assets/javascripts/global-nav.*'].path %>"></script>
     <script src="<%= @items['/assets/javascripts/tables.*'].path %>"></script>
-    <script src="<%= @items['/frontend/default/default.*'].path %>" data-cookieconsent="ignore"></script>  
+    <script src="<%= @items['/frontend/default/default.*'].path %>" data-cookieconsent="ignore"></script>
   </body>
 </html>