merged the last changes by Mauricio
git-svn-id: https://svn.apache.org/repos/asf/ignite/site/branches/ignite-redisign@1874817 13f79535-47bb-0310-9956-ffa450edef68
diff --git a/css/ignite-redesign.css b/css/ignite-redesign.css
index 9711795..37964df 100644
--- a/css/ignite-redesign.css
+++ b/css/ignite-redesign.css
@@ -7401,22 +7401,30 @@
strong {
font-weight: 600; }
+.sticky-top {
+ box-shadow: 0px 4px 8px 0px #E5E2E5;
+ background-color: #ffffff; }
+
/** start header */
#header #nav {
padding: 0.5rem 0;
margin-bottom: 0 !important; }
#header #nav .navbar-brand img {
- width: 12rem; }
+ width: 12rem;
+ transition: all 0.5s ease; }
#header #nav .navbar-nav {
position: absolute;
right: 0; }
#header #nav .navbar-nav > li.nav-item {
- font-size: 16px; }
+ font-size: 16px;
+ transition: width 0.2 ease, font-size 0.5s ease;
+ width: 130px; }
#header #nav .navbar-nav li.nav-item a {
display: inline-block;
padding-right: 1.3em;
padding-left: 1.3em;
- cursor: pointer; }
+ cursor: pointer;
+ transition: padding 0.5s ease; }
#header #nav .navbar-nav li.nav-item .dropdown-toggle:after {
display: none; }
#header #nav .navbar-nav li.nav-item ul.dropdown-menu {
@@ -7445,9 +7453,17 @@
padding-bottom: 1em;
margin-bottom: -5px; }
#header #nav .navbar-nav li.nav-item.show > a.dropdown-toggle {
- font-weight: 700;
- padding-right: 1.15em;
- padding-left: 1.15em; }
+ font-weight: 700; }
+
+#header.shrink #nav .navbar-nav > li.nav-item {
+ font-size: 15px !important;
+ width: 120px; }
+
+#header.shrink .btn-secondary {
+ padding: 0.3rem 1.2rem 0.4rem !important; }
+
+#header.shrink img {
+ width: 8rem !important; }
#footer {
box-shadow: inset 0px 15px 8px -10px #e5e5e5, inset 0px -15px 8px -10px #e5e5e5; }
@@ -7480,13 +7496,13 @@
box-shadow: inset 0px 15px 8px -10px #e5e5e5, inset 0px -15px 8px -10px #e5e5e5; }
#main-banner .wrapper {
background: #187ccc;
- background: -moz-linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%);
- background: -webkit-linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%);
- background: linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#187ccc",endColorstr="#f2f2f2",GradientType=1);
+ background: -moz-linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%, rgba(242, 242, 242, 0) 80%, #0a5a9a 80%, #187ccc 100%);
+ background: -webkit-linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%, rgba(242, 242, 242, 0) 80%, #0a5a9a 80%, #187ccc 100%);
+ background: linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%, rgba(242, 242, 242, 0) 80%, #0a5a9a 80%, #187ccc 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#187ccc",endColorstr="#187ccc",GradientType=1);
padding: 3em 0; }
#main-banner h1 {
- font-weight: 400;
+ font-weight: 300;
font-size: 30px;
line-height: 1.4em;
margin-bottom: 1.5em; }
@@ -7528,58 +7544,55 @@
padding: 4rem 0;
background-color: #ffffff;
box-shadow: inset 0px 15px 8px -10px #e5e5e5; }
- #home-use-cases h2 {
- margin-bottom: 4.5rem; }
- #home-use-cases #use-cases-tabs {
- display: flex;
- justify-content: space-between;
- width: 62%;
- margin: 0 auto; }
- #home-use-cases #use-cases-tabs li {
- width: 45%; }
- #home-use-cases #use-cases-tabs .btn {
+ #home-use-cases #intro-text {
+ margin-bottom: 50px; }
+ #home-use-cases #intro-text p {
background-color: #f2f2f2;
+ border-radius: 5px;
+ padding: 40px 90px;
font-size: 18px;
- width: 100%;
- padding: 1em 0.8em; }
- #home-use-cases #use-cases-tabs .btn.active {
- color: #b02032;
- font-weight: 600; }
- #home-use-cases #use-cases-tabs .active:after {
- content: "";
- width: 0;
- height: 0;
- border-left: 15px solid transparent;
- border-right: 15px solid transparent;
- display: block;
- border-top: 15px solid #b02032;
- left: calc(34% - 15px);
- top: 3.2em;
- position: absolute; }
- #home-use-cases #use-cases-tabs li:last-child .active:after {
- left: calc(67% - 15px); }
- #home-use-cases #use-cases-tabs .btn:focus, #home-use-cases #use-cases-tabs .btn:active {
- outline: none !important;
- box-shadow: none !important; }
- #home-use-cases #tabsContent {
+ line-height: 2em; }
+ #home-use-cases #intro-text:after {
+ content: "";
+ width: 25vw;
+ height: 6px;
+ background-color: #f2f2f2;
+ display: block;
+ margin: 40px auto 50px;
+ border-radius: 5px; }
+ #home-use-cases .container .row {
+ margin-bottom: 25px; }
+ #home-use-cases .container h2 {
+ margin-bottom: 4.5rem; }
+ #home-use-cases .container a.simplified-img-a {
+ cursor: zoom-in; }
+ #home-use-cases .container img {
+ max-width: 100%;
+ margin: 30px auto;
+ display: block;
+ max-height: 300px; }
+ #home-use-cases .container .txt-wrapper {
+ display: block;
padding: 30px; }
- #home-use-cases #tabsContent img {
- max-width: 45rem;
- margin: 0 auto;
- display: block; }
- #home-use-cases #tabsContent .txt-wrapper {
- background-color: #f2f2f2;
- width: 45vw;
- display: block;
- margin: 20px auto 0;
- text-align: center;
- padding: 30px; }
- #home-use-cases #tabsContent .txt-wrapper p {
- font-size: 15px;
- line-height: 2em;
- margin-bottom: 20px; }
- #home-use-cases #tabsContent .txt-wrapper .btn {
- padding: 8px 15px; }
+ #home-use-cases .container .txt-wrapper h3 {
+ font-size: 20px;
+ margin-bottom: 15px;
+ font-weight: 600; }
+ #home-use-cases .container .txt-wrapper p {
+ font-size: 16px;
+ line-height: 2em;
+ margin-bottom: 20px; }
+ #home-use-cases .container .txt-wrapper .btn {
+ padding: 8px 15px; }
+ #home-use-cases #diagramModal .modal-dialog {
+ max-width: 90vw !important; }
+ #home-use-cases #diagramModal .modal-dialog .modal-content button.close {
+ width: 40px;
+ position: absolute;
+ right: 10px;
+ top: 10px; }
+ #home-use-cases #diagramModal .modal-dialog .modal-content img {
+ height: 90vh; }
section.section-block h2 {
text-align: center;
@@ -7662,7 +7675,7 @@
font-weight: 600; }
#home-extras #home-links ul li a:hover {
background-color: #f2f2f2 !important;
- border-radius: 10px;
+ border-radius: 5px;
text-decoration: none; }
#home-extras #home-links ul li a:hover svg {
background-color: #055799; }
@@ -7735,6 +7748,11 @@
display: none; }
@media (max-width: 1199.98px) {
+ #main-banner .wrapper {
+ background: -moz-linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%, rgba(242, 242, 242, 0) 90%, #0a5a9a 90%, #187ccc 100%);
+ background: -webkit-linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%, rgba(242, 242, 242, 0) 90%, #0a5a9a 90%, #187ccc 100%);
+ background: linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%, rgba(242, 242, 242, 0) 90%, #0a5a9a 90%, #187ccc 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#187ccc",endColorstr="#187ccc",GradientType=1); }
#home-use-cases #use-cases-tabs {
width: 85%; }
#home-use-cases #use-cases-tabs .active:after {
@@ -7785,6 +7803,11 @@
@media (max-width: 767.98px) {
.twitter-follow {
display: none; }
+ #main-banner .wrapper {
+ background: -moz-linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%, rgba(242, 242, 242, 0) 95%, #0a5a9a 95%, #187ccc 100%);
+ background: -webkit-linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%, rgba(242, 242, 242, 0) 95%, #0a5a9a 95%, #187ccc 100%);
+ background: linear-gradient(45deg, #187ccc 0%, #0a5a9a 5%, rgba(242, 242, 242, 0) 5%, rgba(242, 242, 242, 0) 95%, #0a5a9a 95%, #187ccc 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#187ccc",endColorstr="#187ccc",GradientType=1); }
#home-use-cases #tabsContent {
padding: 0; }
#home-use-cases #tabsContent .txt-wrapper {
diff --git a/includes/footer.html b/includes/footer.html
index 28ae1e2..5df54ac 100644
--- a/includes/footer.html
+++ b/includes/footer.html
@@ -9,6 +9,7 @@
<li><a href="/docs-and-apis.html">Documentation</a></li>
<li><a href="/community/resources.html">Ask Question</a></li>
<li><a href="/download.cgi">Download</a></li>
+ <li><a href="/community/resources.html">Contact Info</a></li>
</ul>
<ul class="social-networks list-unstyled">
diff --git a/includes/header.html b/includes/header.html
index 5ab812b..f52c0a6 100644
--- a/includes/header.html
+++ b/includes/header.html
@@ -1,8 +1,8 @@
<!-- REMEMBER TO COPY ALL CHANGES TO download.html -->
- <header id="header" class="affix header" data-spy="affix" data-offset-top="0">
+ <header id="header" class="affix header sticky-top " data-spy="affix" data-offset-top="0">
<div class="container">
- <nav id="nav" class="navbar navbar-expand-lg d-flex bd-highlight mb-3" role="navigation">
+ <nav id="nav" class=" navbar navbar-expand-lg d-flex bd-highlight mb-3" role="navigation">
<a href="/" class="mr-auto p-2 bd-highlight navbar-brand" aria-label="Ignite Homepage"><img src="/images/ignite_logo_full.svg" alt="Apache Ignite Logo"></a>
@@ -127,7 +127,7 @@
<li class="dropdown-item"><a href="/docs-and-apis.html#docs">Technical Docs</a></li>
<li class="dropdown-subtitle" role="presentation">Learning Ignite</li>
- <li class="dropdown-item"><a href="/screencasts.html">Videos</a></li>
+ <li class="dropdown-item"><a href="/screencasts.html">Video Tutorials</a></li>
<li class="dropdown-item"><a href="https://github.com/apache/ignite/tree/master/examples" target="_blank" rel="noopener">
Examples <i class="fa fa-external-link" style="padding-left:5px;"></i></a></li>
<li class="dropdown-item"><a href="/events.html">Upcoming Events</a></li>
diff --git a/includes/scripts.html b/includes/scripts.html
index 9dde7cb..9f7a056 100644
--- a/includes/scripts.html
+++ b/includes/scripts.html
@@ -23,6 +23,17 @@
);
document.querySelector('head').appendChild(msViewportStyle)
}
+
+ const onScroll = function(){
+ if(jQuery(document).scrollTop() > 110) {
+ jQuery('#header').addClass('shrink');
+ }else {
+ jQuery('#header').removeClass('shrink');
+ }
+ };
+
+ jQuery(window).scroll(onScroll);
+ jQuery(document).ready(onScroll);
</script>
diff --git a/index.html b/index.html
index c6a585a..bd7f1f7 100644
--- a/index.html
+++ b/index.html
@@ -195,71 +195,87 @@
</section>
<section id="home-use-cases" class="section-block">
+
+ <div id="intro-text" class="container">
+
+ <p>Apache Ignite® is an in-memory computing platform for transactional, analytical, and streaming workloads
+delivering in-memory speeds at petabyte scale. Can be deployed as an in-memory data grid or an
+in-memory database for transactional, analytical, hybrid transactional/analytical, and streaming workloads.</p>
+
+ </div>
+
+
<h2>Apache Ignite <strong>Use Cases</strong></h2>
<div class="container">
<div class="row">
- <div class="col-12">
- <ul id="use-cases-tabs" class="nav">
- <li class="">
- <a href="#tab-datagrid" data-toggle="tab" role="tab" aria-controls="datagrid"
- aria-selected="true" id="datagrid-tab" class="btn active">In-Memory Data Grid and
- Cache</a>
- </li>
+ <div class="col-md-6">
+
+
+ <div class="txt-wrapper">
+ <h3>In-Memory Data Grid and Cache</h3>
- <li class="">
- <a href="#tab-database"
- data-toggle="tab" role="tab" aria-controls="database"
- aria-selected="true" class="btn ">In-Memory Database</a>
- </li>
+ <p>
+ Accelerate existing services and databases with Apache Ignite® deployed as an
+ in-memory data grid or cache that keeps your underlying stores in sync and supports
+ ANSI SQL, ACID transactions, co-located computations with machine learning.
+ </p>
- </ul>
-
- <div id="tabsContent" class="tab-content">
- <div id="tab-datagrid" class="tab-pane fade active show" role="tabpanel"
- aria-labelledby="datagrid-tab">
- <img src="/images/svg-diagrams/in-memory-data-grid.svg"/>
-
- <div class="txt-wrapper">
- <p>
- Accelerate existing services and databases with Apache Ignite® deployed as an
- in-memory data grid or cache that keeps your underlying stores in sync and supports
- ANSI SQL, ACID transactions, co-located computations with machine learning.
- </p>
-
- <a href="/use-cases/datagrid.html" class="btn btn-primary"
- onclick="ga('send', 'event', 'apache_ignite_use_cases', 'homepage_click', 'data_grid');">
- Learn About In-Memory Data Grid</a>
- </div>
- </div>
- <div id="tab-database" class="tab-pane fade" role="tabpanel" aria-labelledby="database-tab">
-
- <img src="/images/svg-diagrams/in-memory-database.svg"/>
- <div class="txt-wrapper">
- <p>
- Combine advantages of in-memory and disk-based systems deploying Apache Ignite®
- as an in-memory database that treats disk as an active storage layer. Cache a
- subset of the data in memory, execute advanced queries including SQL over both
- in-memory and disk-only records, and skip time-consuming memory warm-ups on
- startup.
- </p>
-
- <a href="/use-cases/in-memory-database.html" class="btn btn-primary"
- onclick="ga('send', 'event', 'apache_ignite_use_cases', 'homepage_click', 'database');">
- Learn About In-Memory Database</a>
- </div>
- </div>
-
+ <a href="/use-cases/datagrid.html" class="btn btn-primary"
+ onclick="ga('send', 'event', 'apache_ignite_use_cases', 'homepage_click', 'data_grid');">
+ Learn About In-Memory Data Grid</a>
</div>
+ </div>
+ <div class="col-md-6">
+ <a href="#" class="simplified-img-a" data-target="#diagramModal" data-toggle="modal" data-diagram="data-grid"><img src="/images/svg-diagrams/in-memory-data-grid--simplified.svg"/></a>
+ </div>
+
+ </div>
+ <div class="row">
+ <div class="col-md-6 order-last order-md-first">
+ <a href="#" class="simplified-img-a" data-target="#diagramModal" data-toggle="modal" data-diagram="database"><img src="/images/svg-diagrams/in-memory-database--simplified.svg"/></a>
+ </div>
+ <div class="col-md-6 order-first order-md-last">
+
+ <div class="txt-wrapper">
+ <h3>In-Memory Database</h3>
+
+ <p>
+ Combine advantages of in-memory and disk-based systems deploying Apache Ignite®
+ as an in-memory database that treats disk as an active storage layer. Cache a
+ subset of the data in memory, execute advanced queries including SQL over both
+ in-memory and disk-only records, and skip time-consuming memory warm-ups on
+ startup.
+ </p>
+
+ <a href="/use-cases/in-memory-database.html" class="btn btn-primary"
+ onclick="ga('send', 'event', 'apache_ignite_use_cases', 'homepage_click', 'database');">
+ Learn About In-Memory Database</a>
+ </div>
</div>
</div>
</div>
+
+ <div class="modal fade" id="diagramModal" tabindex="-1" role="dialog" aria-labelledby="diagramModal" aria-hidden="true">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </button>
+
+ <img src="" />
+
+ </div>
+ </div>
+ </div>
+
</section>
<section id="home-features" class="section-block bg-gray-shadow">
@@ -267,7 +283,7 @@
<div class="container">
<h2>Apache Ignite <strong>Features</strong></h2>
<div class="row">
- <div class="col-md-4 feature">
+ <div class="col-sm-6 col-md-4 feature">
<a href="/arch/multi-tier-storage.html"
onclick="ga('send', 'event', 'apache_ignite_features', 'homepage_click', 'multi-tier-storage');"
title="Apache Ignite Multi-Tier Storage"
@@ -368,7 +384,7 @@
<div class="container">
<div class="row">
- <section id="home-links" class="col-sm-6">
+ <section id="home-links" class="col-sm-8">
<h2>Quick <strong>Links</strong></h2>
<ul>
<li><a href="/docs-and-apis.html#docs">
@@ -381,24 +397,24 @@
<svg>
<use xlink:href="#index-icons--API"></use>
</svg>
- <span>API<br/>References</span>
+ <span>API References</span>
</a></li>
<li><a href="/events.html">
<svg>
<use xlink:href="#index-icons--Community"></use>
</svg>
- <span>Community<br/>Events</span>
+ <span>Community Events</span>
</a></li>
<li><a href="/use-cases/provenusecases.html">
<svg>
<use xlink:href="#index-icons--Company"></use>
</svg>
- <span>Companies<br/>Using Ignite</span>
+ <span>Companies Using Ignite</span>
</a></li>
</ul>
</section>
- <section id="home-twitter" class="col-sm-6">
+ <section id="home-twitter" class="col-sm-4">
<!--Ignite events -->
<h2>Latest <strong>Tweets</strong></h2>
@@ -420,5 +436,11 @@
<!--#include virtual="/includes/scripts.html" -->
+<script type="text/javascript">
+ jQuery('#diagramModal').on('show.bs.modal', function(event){
+ const diagram = jQuery(event.relatedTarget).data('diagram');
+ jQuery(this).find('img').attr('src', '/images/svg-diagrams/in-memory-'+diagram+'.svg');
+ });
+</script>
</body>
</html>
diff --git a/scss/ignite-redesign.scss b/scss/ignite-redesign.scss
index 6ddc679..4c95fc2 100644
--- a/scss/ignite-redesign.scss
+++ b/scss/ignite-redesign.scss
@@ -51,6 +51,12 @@
+.sticky-top {
+ box-shadow: 0px 4px 8px 0px #E5E2E5;
+ background-color: #ffffff;
+}
+
+
/** start header */
#header {
@@ -61,6 +67,7 @@
.navbar-brand {
img {
width: 12rem;
+ transition: all 0.5s ease;
}
}
.navbar-nav {
@@ -69,6 +76,10 @@
> li.nav-item {
font-size: 16px;
+ transition: width 0.2 ease, font-size 0.5s ease;
+ width:130px;
+
+
}
@@ -80,6 +91,7 @@
padding-right: 1.3em;
padding-left: 1.3em;
cursor: pointer;
+ transition: padding 0.5s ease;
}
.dropdown-toggle:after {
@@ -129,13 +141,26 @@
li.nav-item.show {
> a.dropdown-toggle {
font-weight: 700;
- padding-right: 1.15em;
- padding-left: 1.15em;
+
}
}
}
}
}
+#header.shrink {
+
+ #nav .navbar-nav > li.nav-item {
+ font-size: 15px !important;
+ width: 120px;
+ }
+ .btn-secondary {
+ padding: 0.3rem 1.2rem 0.4rem !important;
+ }
+
+ img {
+ width: 8rem !important;
+ }
+}
#footer {
@@ -206,18 +231,25 @@
inset 0px -15px 8px -10px #e5e5e5;
.wrapper {
+
background: rgb(24,124,204);
- background: -moz-linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%);
- background: -webkit-linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%);
- background: linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#187ccc",endColorstr="#f2f2f2",GradientType=1);
+ background: -moz-linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%, rgba(242,242,242,0) 80%, rgba(10,90,154,1) 80%, rgba(24,124,204,1) 100%);
+ background: -webkit-linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%, rgba(242,242,242,0) 80%, rgba(10,90,154,1) 80%, rgba(24,124,204,1) 100%);
+ background: linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%, rgba(242,242,242,0) 80%, rgba(10,90,154,1) 80%, rgba(24,124,204,1) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#187ccc",endColorstr="#187ccc",GradientType=1);
+
+ // background: rgb(24,124,204);
+ // background: -moz-linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%);
+ // background: -webkit-linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%);
+ // background: linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%);
+ // filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#187ccc",endColorstr="#f2f2f2",GradientType=1);
padding: 3em 0;
}
h1 {
- font-weight: 400;
+ font-weight: 300;
font-size: 30px;
line-height: 1.4em;
margin-bottom: 1.5em;
@@ -283,75 +315,63 @@
#home-use-cases {
padding: 4rem 0;
background-color: #ffffff;
- box-shadow:
- inset 0px 15px 8px -10px #e5e5e5;
+ box-shadow: inset 0px 15px 8px -10px #e5e5e5;
- h2 {
- margin-bottom: 4.5rem;
+ #intro-text {
+
+ margin-bottom: 50px;
+
+ p {
+ background-color: theme-color('gray');
+ border-radius: 5px;
+ padding: 40px 90px;
+ font-size: 18px;
+ line-height: 2em;
+ }
+ }
+ #intro-text:after {
+ content: "";
+ width: 25vw;
+ height: 6px;
+ background-color: theme-color('gray');
+ display: block;
+ margin: 40px auto 50px;
+ border-radius: 5px;;
}
- #use-cases-tabs {
- display: flex;
- justify-content: space-between;
- width: 62%;
- margin: 0 auto;
+ .container {
+ .row {
+ margin-bottom: 25px;
+ }
- li {
- width: 45%;
+ h2 {
+ margin-bottom: 4.5rem;
+ }
+
+ a.simplified-img-a {
+ cursor: zoom-in;
}
- .btn {
- background-color: theme-color('gray');
- font-size: 18px;
- width: 100%;
- padding: 1em 0.8em;
- }
- .btn.active {
- color: theme-color('secondary');
- font-weight: 600;
- }
- .active:after {
- content: "";
- width: 0;
- height: 0;
- border-left: 15px solid transparent;
- border-right: 15px solid transparent;
- display: block;
- border-top: 15px solid theme-color('secondary');
- left: calc(34% - 15px);
- top: 3.2em;
- position: absolute;
- }
- li:last-child {
- .active:after {
- left: calc(67% - 15px);
- }
- }
- .btn:focus,.btn:active {
- outline: none !important;
- box-shadow: none !important;
- }
- }
- #tabsContent {
- padding: 30px;
+
img {
- max-width: 45rem;
- margin: 0 auto;
+ max-width: 100%;
+ margin: 30px auto;
display: block;
-
+ max-height: 300px;
}
.txt-wrapper {
- background-color: theme-color('gray');
- width: 45vw;
+ h3 {
+ font-size: 20px;
+ margin-bottom: 15px;
+ font-weight: 600;
+ }
display: block;
- margin: 20px auto 0;
- text-align: center;
padding: 30px;
p {
- font-size: 15px;
+ font-size: 16px;
line-height: 2em;
margin-bottom: 20px;
}
@@ -359,9 +379,26 @@
padding: 8px 15px;
}
}
- }
+ }
-
+ #diagramModal {
+ .modal-dialog {
+ max-width: 90vw !important;
+
+ .modal-content {
+ button.close {
+ width: 40px;
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ }
+
+ img {
+ height: 90vh;
+ }
+ }
+ }
+ }
@@ -489,7 +526,7 @@
}
a:hover {
background-color: theme-color('gray') !important;
- border-radius: 10px;
+ border-radius: 5px;
text-decoration: none;
svg {
@@ -604,6 +641,18 @@
// Large devices (desktops, less than 1200px)
// @media (max-width: 1199.98px) { ... }
@include media-breakpoint-down(lg) {
+ #main-banner {
+
+
+ .wrapper {
+
+ background: -moz-linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%, rgba(242,242,242,0) 90%, rgba(10,90,154,1) 90%, rgba(24,124,204,1) 100%);
+ background: -webkit-linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%, rgba(242,242,242,0) 90%, rgba(10,90,154,1) 90%, rgba(24,124,204,1) 100%);
+ background: linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%, rgba(242,242,242,0) 90%, rgba(10,90,154,1) 90%, rgba(24,124,204,1) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#187ccc",endColorstr="#187ccc",GradientType=1);
+ }
+ }
+
#home-use-cases {
#use-cases-tabs {
width: 85%;
@@ -646,6 +695,7 @@
.navbar-nav {
position: relative;
li.nav-item {
+
a.btn {
margin-left: 1.3em;
}
@@ -724,6 +774,14 @@
.twitter-follow {
display: none;
}
+ #main-banner {
+ .wrapper {
+ background: -moz-linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%, rgba(242,242,242,0) 95%, rgba(10,90,154,1) 95%, rgba(24,124,204,1) 100%);
+ background: -webkit-linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%, rgba(242,242,242,0) 95%, rgba(10,90,154,1) 95%, rgba(24,124,204,1) 100%);
+ background: linear-gradient(45deg, rgba(24,124,204,1) 0%, rgba(10,90,154,1) 5%, rgba(242,242,242,0) 5%, rgba(242,242,242,0) 95%, rgba(10,90,154,1) 95%, rgba(24,124,204,1) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#187ccc",endColorstr="#187ccc",GradientType=1);
+ }
+ }
#home-use-cases {
#tabsContent {
padding: 0;
@@ -795,6 +853,7 @@
h1 {
font-size: 26px;
text-align: center;
+
}
.buttons {
text-align: center;
