You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@ignite.apache.org by dm...@apache.org on 2020/12/28 16:45:44 UTC

[ignite-website] branch ignite-13779 updated: More fixes for small screens (#59)

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

dmagda pushed a commit to branch ignite-13779
in repository https://gitbox.apache.org/repos/asf/ignite-website.git


The following commit(s) were added to refs/heads/ignite-13779 by this push:
     new 52b32c2  More fixes for small screens (#59)
52b32c2 is described below

commit 52b32c2ce3003ba5031dc8addfb7f5d60e25f002
Author: Mauricio Stekl <ma...@stekl.org>
AuthorDate: Mon Dec 28 13:45:36 2020 -0300

    More fixes for small screens (#59)
    
    * initial rework of features  section  on the homepage
    
    * more adjustments to new features section; menu opens with hover; responsiveness fixes; other minor tweaks
    
    * reworked the main banner design; also updated the architects section with  diagrams; some responsiveness and other small css issues fixed
    
    * updated diagram for db use case
    
    * changes to Architects section; new diagrams; tweaks on css for features
    
    * implementing accordion
    
    * fixed height for white area under features section
    
    * added accordion markup and reordered sections
    
    * swapped places for features; updates on the banner; added users logos section; added documentationt to navigation;
    
    * fixed small alignment issues; font for features section; added ParticleJS effect to main banner
    
    * multiple changes to layout and homepage
    
    * updated use-cases section on the homepage; list of logos; finished accordion for features section on mobile
    
    * updated the docs navigation with API links; examples; and language selector
    
    * rebuilt docs with the new template
    
    * added dutch railways
    
    * updated users logos; updated DB diagram and fixed alignments; updated footer content
    
    * updated nav for documentation; rebuilt it with new templates
    
    * reordered features and added GA events for tabs; removed shadows; adjusted size for 2nd line on banner; also added icon to button on banner
    
    * adjusted grayscale for logos
    
    * several optimization for mobile screen sizes
    
    * made the links under Example to open on a new tab
    
    * more fixes for responsiveness on small screeens
---
 css/ignite-redesign.css |  2 +-
 index.html              | 15 +++++----------
 scss/homepage.scss      | 13 ++++++++++---
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/css/ignite-redesign.css b/css/ignite-redesign.css
index 2e561a1..69c715d 100644
--- a/css/ignite-redesign.css
+++ b/css/ignite-redesign.css
@@ -1 +1 @@
-@charset "UTF-8";code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=langu [...]
\ No newline at end of file
+@charset "UTF-8";code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=langu [...]
\ No newline at end of file
diff --git a/index.html b/index.html
index 204ae00..7bbf59f 100644
--- a/index.html
+++ b/index.html
@@ -185,12 +185,7 @@ under the License.
         <div class="container">
             <div id="particle-js"></div>
             <div class="txt-wrapper">
-                <h1>
-                    <strong>
-                        APACHE IGNITE<br/>
-                    </strong>
-                    Distributed Database For In-Memory Speed And High-Performance Computing
-                </h1>
+                <h1><strong>APACHE IGNITE</strong> Distributed Database For <span class="nobr">In-Memory</span> Speed And <span class="nobr">High-Performance</span> Computing</h1>
 
                 <div class="buttons">
                     <a href="/docs/latest/index"
@@ -358,7 +353,7 @@ under the License.
                             <div class="tab-pane  active show card" id="feat-vtab-c-sql" role="tabpanel"
                                  aria-labelledby="feat-vtab-sql">
                                 <div class="card-header" role="tab" id="feat-vtab-ch-sql">
-                                    <h3><a class="collapsed" data-toggle="collapse" href="#feat-vtab-cb-sql"
+                                    <h3><a class="collapse" data-toggle="collapse" href="#feat-vtab-cb-sql"
                                         onclick="gtag('event',  'homepage_click', {'event_category':'features_section_tabs', 'event_label': 'distributed_sql'});"
                                            aria-expanded="false" aria-controls="feat-vtab-cb-sql">
                                         <svg>
@@ -368,7 +363,7 @@ under the License.
                                     </a></h3>
                                 </div>
 
-                                <div id="feat-vtab-cb-sql" class="collapse" data-parent="#v-pills-tabContent"
+                                <div id="feat-vtab-cb-sql" class="collapse show" data-parent="#v-pills-tabContent"
                                      role="tabpanel" aria-labelledby="feat-vtab-ch-sql">
                                     <div class="card-body">
 
@@ -414,7 +409,7 @@ under the License.
                             <div class="card tab-pane" id="feat-vtab-c-multitier" role="tabpanel"
                                  aria-labelledby="feat-vtab-multitier">
                                 <div class="card-header" role="tab" id="feat-vtab-ch-multitier">
-                                    <h3><a data-toggle="collapse" href="#feat-vtab-cb-multitier" aria-expanded="true"
+                                    <h3><a class="collapsed" data-toggle="collapse" href="#feat-vtab-cb-multitier" aria-expanded="true"
                                         onclick="gtag('event',  'homepage_click', {'event_category':'features_section_tabs', 'event_label': 'multi_tier_storage'});"
                                            aria-controls="feat-vtab-cb-multitier">
                                         <svg>
@@ -422,7 +417,7 @@ under the License.
                                         </svg>
                                         <span>Multi-Tier Storage</span></a></h3>
                                 </div>
-                                <div id="feat-vtab-cb-multitier" class="collapse show" data-parent="#v-pills-tabContent"
+                                <div id="feat-vtab-cb-multitier" class="collapse" data-parent="#v-pills-tabContent"
                                      role="tabpanel" aria-labelledby="feat-vtab-ch-multitier">
                                     <div class="card-body">
 
diff --git a/scss/homepage.scss b/scss/homepage.scss
index 92b6ddb..6327521 100644
--- a/scss/homepage.scss
+++ b/scss/homepage.scss
@@ -1,3 +1,7 @@
+.nobr	{ 
+    white-space:nowrap; 
+}
+
 #main-banner {
     
 
@@ -43,9 +47,9 @@
         letter-spacing: 0px;
         white-space: nowrap;
         color: #212529;
-        
         margin-bottom: 3rem;
 
+        
         strong {
             text-align: center;
             font: normal normal 600 56px/76px Open Sans;
@@ -765,9 +769,12 @@ section.section-block {
                 }
                 .txt-wrapper, .diagram-wrapper {
                     width: 100%;
-                    padding-left: 0;
-                    padding-right: 0;
+                    padding-left: 0 !important;
+                    padding-right: 0 !important;
                     margin-bottom: 2rem;
+                    text-align: left;
+                }
+                .diagram-wrapper {
                     text-align: center;
                 }