Merge branch 'refacto' into 'master'

Creates a CSS for tiles and removes old stuff

See merge request !44

_data/nav.yml

-- name: Using Frama-C
-  link: /html/using-frama-c.html
+#- name: Using Frama-C
+#  link: /html/using-frama-c.html
+#  id  : using
 - name: Features
   link: /html/kernel-plugin.html
+  id  : features
 - name: Documentation
   link: /html/documentation.html
+  id  : documentation
 - name: Blog
   link: /blog/index.html
-# - name: Careers
-  # link: /html/careers.html
+  id  : blog
+#- name: Careers
+#  link: /html/careers.html
+#  id  : careers
 - name: Contact
   link: /html/contact.html
+  id  : contact

_fc-plugins/wp.md

@@ -10,7 +10,7 @@ additional:
     short: "ACSL by Example"
     link:  https://fraunhoferfokus.github.io/acsl-by-example
   - name:  "Introduction to C program proof with Frama-C and WP, by Allan Blanchard"
-    short: "Tutorial on Frama-C and WP"
+    short: "Tutorial on Frama-C/WP"
     link:  https://github.com/AllanBlanchard/tutoriel_wp
 ---
 

_fc-versions/magnesium.md

@@ -33,7 +33,7 @@ releases:
         - name: WP manual
           link: /download/wp-manual-Magnesium-20151002.pdf
     - name: External Plug-ins
-      file:
+      files:
         - name: E-ACSL version 0.6
           link: /download/e-acsl/e-acsl-0.6.tar.gz
 ---
\ No newline at end of file

_fc-versions/neon.md

@@ -33,7 +33,7 @@ releases:
         - name: WP 0.8 manual
           link: /download/wp-manual-Neon-20140301.pdf
     - name: External Plug-ins
-      file:
+      files:
         - name: E-ACSL version 0.4.1
           link: /download/e-acsl/e-acsl-0.4.1.tar.gz
 ---
\ No newline at end of file

_fc-versions/nitrogen.md

@@ -6,7 +6,7 @@ releases:
   - number: 0
     changelog: 20111001
     categories:
-    - name: Frama-C v18.0 Argon
+    - name: Frama-C v7.0 Nitrogen
       files:
         - name: Source distribution
           link: /download/frama-c-Nitrogen-20111001.tar.gz

_fc-versions/silicon.md

@@ -33,7 +33,7 @@ releases:
         - name: WP manual
           link: /download/wp-manual-Silicon-20161101.pdf
     - name: External Plug-ins
-      file:
+      files:
         - name: E-ACSL version 0.8
           link: /download/e-acsl/e-acsl-0.8.tar.gz
 ---
\ No newline at end of file

_fc-versions/sodium.md

@@ -33,7 +33,7 @@ releases:
         - name: WP manual
           link: /download/wp-manual-Sodium-20150201.pdf
     - name: External Plug-ins
-      file:
+      files:
         - name: E-ACSL version 0.5
           link: /download/e-acsl/e-acsl-0.5.tar.gz
 ---
\ No newline at end of file

_includes/headers.html

@@ -2,13 +2,13 @@
   <div id="header_iv_point" class="inviewTop"></div>
   <span class="brandLogo"><a href="/index.html" rel="home" title=
   "Frama-C"><img src="/assets/img/framac.gif" alt=""><span>Frama-C</span></a></span><a role="button" id=
-  "menu_toggle" class="menuToggle"><span class="open"><i></i><i></i><i></i></span><span class="close"><i></i><i></i></span></a>
+  "menu_toggle" class="menuToggle"><span class="open" onclick="openMenu()"><i></i><i></i><i></i></span><span class="close" onclick="closeMenu()"><i></i><i></i></span></a>
 
   <nav id="menu" role="navigation">
 	<div class="menu-primary-meny-container">
 	  <ul id="menu-primary-meny" class="menu">
 	  {% for item in site.data.nav %}
-	  {% if forloop.index == include.header %}
+	  {% if item.id == include.header %}
 	  <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item current_page_item">
 	  {% else %}	  
 	  <li class="menu-item menu-item-type-post_type menu-item-object-page">		
@@ -22,3 +22,15 @@
 	"icon icon-curly-left"></i><i class="icon icon-download-arrow"></i><i class="icon icon-curly-right"></i></span></a>
   </nav>
 </header>
+
+<script>
+function openMenu(){
+  var x = document.getElementById("site_header");
+  x.classList.add("menuOpen");
+}
+
+function closeMenu(){
+  var x = document.getElementById("site_header");
+  x.classList.remove("menuOpen");
+}
+</script>
\ No newline at end of file

_layouts/blog.html

@@ -7,7 +7,7 @@ css: blog
 <div id="wrapper" class="hfeed">
 
   <!-- TODO after new website is online: uncomment below and comment after
-	{% include headers.html header=4 title=Blog %}
+	{% include headers.html header="blog" title=Blog %}
 -->
 	{% include blog-headers-standalone.html %}
 

_layouts/clean_page.html

@@ -6,7 +6,7 @@ css: wiki
 
 <body class="page-template page-template-page-kernel page-template-page-kernel-php page nonTouch">
 <div id="wrapper" class="hfeed">
-{% include headers.html header=3 %}
+{% include headers.html header="documentation" %}
 
 <div id="container" class="mainContainer">
   <div class="defaultPage wikiPage pages textLeft" id="content" role="main">

_layouts/default.html

@@ -17,6 +17,8 @@
   <link rel="stylesheet" href="/assets/css/default.css">
   <link rel="stylesheet" href="/assets/css/blog.css">
   <link rel="stylesheet" href="/assets/css/documentation.css">
+  <link rel="stylesheet" href="/assets/css/tiles.css">
+  <link rel="stylesheet" href="/assets/css/swiper.css">
   {% if layout.css !=null %}
     <link rel="stylesheet" href="/assets/css/{{ layout.css }}.css">
   {% endif %}
@@ -24,18 +26,10 @@
     <link rel="stylesheet" href="/assets/css/{{ page.css }}.css">
   {% endif %}
   <link rel="shortcut icon" href="/assets/img/favicon.ico" type="image/x-icon">
-</head>
 
-  {{ content }}
 
-  
-  <script type='text/javascript' src='/assets/js/manifest.js'></script>
-  <script type='text/javascript' src='/assets/js/lib.js'></script>
-  <script type='text/javascript'>
-	var ajax = {"url":"http:\/\/localhost:8000\/wp\/wp-admin\/admin-ajax.php","ajax_var":{"template_directory_uri":"http:\/\/localhost:8000\/app\/themes\/frama"},"apikey":"AIzaSyDwKjbfd43-rY5muMW76XUdAFMb7mL9kU8","nonce":"eb10361e5c"};
-  </script>
-  <script type='text/javascript' src='/assets/js/main.js'></script>
- 
+</head>
 
+  {{ content }}
   </body>
 </html>

_layouts/feature.html

@@ -8,7 +8,7 @@ title: Kernel & Plugins - Frama-C
   <div id="wrapper" class="hfeed">
 
 
-    {% include headers.html header=2 %}
+    {% include headers.html header="features" %}
 
     <div id="container" class="mainContainer">
       <div class="tabs">

_layouts/plugin.html

@@ -6,7 +6,7 @@ css: plugin
 <body class="page-template page-template-page-kernel page-template-page-kernel-php page nonTouch">
   <div id="wrapper" class="hfeed">
 
-    {% include headers.html header=2 %}
+    {% include headers.html header="features" %}
 
     <div id="container" class="mainContainer">
       <div class="tabs">

_layouts/post.html

@@ -5,7 +5,7 @@ layout: default
   <div id="wrapper" class="hfeed">
     
   <!-- TODO after new website is online: uncomment below
-	{% include headers.html header=4 title=Blog %}
+	{% include headers.html header="blog" title=Blog %}
 -->
 
     <div id="container" class="mainContainer">

assets/css/documentation.css

@@ -2,49 +2,6 @@
 /* Colors */
 /* Global Media Queries */
 /* Direction */
-.documentDetail .bgTextbig,
-.pageDocumentation .bgTextbig {
-  left: 0;
-  transform: translate(0, -50%);
-}
-@media (min-width:  768px) {
-  .documentDetail .bgTextbig,
-  .pageDocumentation .bgTextbig {
-    font-size: 170px;
-  }
-}
-@media (min-width: 1024px) {
-  .documentDetail .bgTextbig,
-  .pageDocumentation .bgTextbig {
-    font-size: 220px;
-  }
-}
-@media (min-width: 1280px) {
-  .documentDetail .bgTextbig,
-  .pageDocumentation .bgTextbig {
-    font-size: 280px;
-  }
-}
-@media (min-width: 1600px) {
-  .documentDetail .bgTextbig,
-  .pageDocumentation .bgTextbig {
-    font-size: 300px;
-  }
-}
-.documentDetail {
-  padding-top: 30px;
-  min-height: 100%;
-  box-sizing: border-box;
-  padding-bottom: 130px;
-}
-@media (min-width:  768px) {
-  .documentDetail {
-    padding-top: 70px;
-  }
-}
-.documentDetail .pages {
-  padding-bottom: 0;
-}
 .pageDocumentation {
   padding-top: 40px;
 }
@@ -53,89 +10,13 @@
     padding-top: 70px;
   }
 }
-.pageDocumentation .pageBanner {
-  background-size: cover;
-}
-.pageDocumentation .listItem {
+.pageDocumentation .tile {
   cursor: default;
 }
-.otherDocuments {
+.pageDocumentation > .wrap {
   position: relative;
-  background-color: #f6f6f6;
-  padding: 30px 15px;
-}
-@media (min-width: 1280px) {
-  .otherDocuments {
-    padding: 60px 0;
-  }
-}
-.otherDocuments ul {
-  list-style-type: none;
-  padding: 0;
-}
-.otherDocuments > div {
   max-width: 1260px;
   margin: 0 auto;
-}
-.otherDocuments h4 {
-  margin-top: 0;
-  font-size: 18px;
-}
-@media (min-width:  768px) {
-  .otherDocuments h4 {
-    font-size: 20px;
-    padding: 0 17% 0 25%;
-  }
-}
-@media (min-width: 1280px) {
-  .otherDocuments h4 {
-    font-size: 24px;
-  }
-}
-.otherDocuments ul {
-  overflow: hidden;
-}
-@media (min-width:  768px) {
-  .otherDocuments ul {
-    padding: 0 17% 30px 25%;
-  }
-}
-.otherDocuments ul li {
-  position: relative;
-  padding-left: 20px;
-  margin-bottom: 5px;
-  font-size: 14px;
-  box-sizing: border-box;
-}
-@media (min-width:  768px) {
-  .otherDocuments ul li {
-    width: 50%;
-    padding: 0 20px;
-    float: left;
-  }
-}
-.otherDocuments ul li a {
-  display: block;
-  color: inherit;
-}
-.otherDocuments ul li i {
-  position: absolute;
-  top: 0;
-  left: 0;
-  color: #f7931c;
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 700;
-}
-.defnitionList dd p a {
-  display: inline-block;
-  padding: 0;
-  border: none;
-  box-shadow: none;
-  margin: 0;
-}
-.defnitionList dd p a:hover {
-  background-color: transparent !important;
-  color: #f7931c !important;
-  text-decoration: underline;
+  padding: 0 25px;
+  z-index: 2;
 }

assets/css/get-framac.css

@@ -15,7 +15,6 @@
   left: 0;
   right: 0;
   height: 1px;
-  background-color: #acacac;
 }
 .getFramaC .wrap {
   position: relative;
@@ -117,8 +116,8 @@
   }
 }
 .getFramaC .notebook {
-  width: 300px;
-  height: 175px;
+  width: 80%;
+  height: 20%;
   margin-bottom: 20px;
   margin-left: auto;
   margin-right: auto;
@@ -127,81 +126,16 @@
   border: 0;
   background: transparent;
 }
-@media only screen and (min-width: 481px) {
-  .getFramaC .notebook {
-    width: 400px;
-    height: 233px;
-  }
-}
-@media (min-width:  768px) {
-  .getFramaC .notebook {
-    width: 600px;
-    height: 349px;
-  }
-}
-@media (min-width: 1024px) {
-  .getFramaC .notebook {
-    width: 720px;
-    height: 422px;
-  }
-}
-@media (min-width: 1280px) {
-  .getFramaC .notebook {
-    width: 800px;
-    height: 466px;
-  }
-}
+
+
 .getFramaC .notebook > div {
   background: transparent url('../img/laptop.png') no-repeat;
-  background-size: 100%;
-  padding: 15px 36px 20px;
+  background-size: 100% 100%;
+  padding: 4.8% 12.5% 4.6% 12.5%;
   border: 0;
   border-radius: 0;
 }
-@media only screen and (min-width: 481px) {
-  .getFramaC .notebook > div {
-    padding: 22px 48px 24px;
-  }
-}
-@media (min-width:  768px) {
-  .getFramaC .notebook > div {
-    padding: 32px 74px 36px;
-  }
-}
-@media (min-width: 1024px) {
-  .getFramaC .notebook > div {
-    padding: 44px 93px 20px;
-  }
-}
-@media (min-width: 1280px) {
-  .getFramaC .notebook > div {
-    padding: 43px 100px 47px;
-  }
-}
-.getFramaC .notebook > div .codeScreen {
-  min-height: 100px;
-  height: 140px;
-}
-@media only screen and (min-width: 481px) {
-  .getFramaC .notebook > div .codeScreen {
-    height: 186px;
-  }
-}
-@media (min-width:  768px) {
-  .getFramaC .notebook > div .codeScreen {
-    height: 280px;
-  }
-}
-@media (min-width: 1024px) {
-  .getFramaC .notebook > div .codeScreen {
-    height: 360px;
-  }
-}
-@media (min-width: 1280px) {
-  .getFramaC .notebook > div .codeScreen {
-    height: 374px;
-  }
-}
+
 @keyframes lineGrow {
   0% {
     width: 0;
@@ -228,10 +162,10 @@
 }
 .shell-win {
   color:#ffffff;
-  background:#000080;
+  background:#0078D7;
 }
 .shell-win-comment {
-  color:#c0c0c0;
+  color:#f0f090;
 }
 
 @media (min-width:  1024px) {

assets/css/home.css

@@ -152,6 +152,11 @@
 .home p br {
   display: none;
 }
+
+.banner-desc {
+	text-align: center;
+}
+
 .home .banner-title {
   max-width: 280px;
   margin: 0 auto 20px;
@@ -1491,10 +1496,17 @@ a.goDown .icon {
   padding-right: 20px;
 }
 .eventDetailsBlock .contentBlk {
-  display: inline-flex;
+  display: flex;
+  flex-direction: column;
   text-align: left;
   font-size: 13px;
 }
+@media (min-width:  800px) {
+  .eventDetailsBlock .contentBlk {
+    display: inline-flex;
+    flex-direction: row;
+  }
+}  
 .eventDetailsBlock .contentBlk > div {
   margin-left: 16px;
 }
@@ -1512,36 +1524,38 @@ a.goDown .icon {
 }
 .eventDetailsBlock time {
   color: #e74643;
-  font-size: 32px;
   line-height: 1.1;
+  width: 100%;
+  text-align: center;
+  margin-bottom: 30px;
 }
 .eventDetailsBlock time b,
 .eventDetailsBlock time small {
-  display: block;
   font-weight: 600;
+  font-size: 36px;
+}
+.eventDetailsBlock time b + b:after {
+  content: ',';
 }
 .eventDetailsBlock time b:first-child {
   line-height: 40px;
 }
-.eventDetailsBlock time b + b {
-  font-size: 18px;
-  margin-top: -1px;
-}
-.eventDetailsBlock time small {
-  font-size: 16px;
-}
 @media (min-width:  800px) {
   .eventDetailsBlock time {
-    font-size: 42px;
+    display: block;
+    text-align: right;
+    width: auto;
     display: inline-flex;
     flex-direction: column;
     flex: 0 0 auto;
   }
   .eventDetailsBlock time b + b {
     font-size: 30px;
-    order: -1;
     margin-top: 0;
   }
+  .eventDetailsBlock time b + b:after {
+    content: '';
+  }
   .eventDetailsBlock time small {
     font-size: 18px;
   }

assets/css/main.css

@@ -459,13 +459,12 @@ div#wpadminbar:hover div#wp-toolbar {
   width: 100%;
   left: 0;
   top: 0;
-  height: 70px;
+  height: 64px;
   z-index: 51;
 }
 @media (min-width:  768px) {
   .siteHeader {
     height: 60px;
-    border-bottom: 1px solid #f7f7f7;
   }
 }
 @media (min-width: 1280px) {
@@ -576,7 +575,6 @@ div#wpadminbar:hover div#wp-toolbar {
     position: static;
     width: auto;
     max-width: none;
-    display: block;
     float: left;
   }
   .siteHeader nav ul {
@@ -597,7 +595,13 @@ div#wpadminbar:hover div#wp-toolbar {
   }
   .siteHeader nav li.current-menu-item a {
     color: #f26521;
+	border-bottom: #f26521 1px solid;
+  }  
+  
+  .siteHeader nav li a:hover {
+	border-bottom: #f26521 1px solid;
   }
+  
   .siteHeader .btnDownload {
     float: right;
     display: block;
@@ -605,7 +609,7 @@ div#wpadminbar:hover div#wp-toolbar {
     background: #f7931c;
     color: #fff;
     font-size: 20px;
-    height: 60px;
+    height: 58px;
     width: 68px;
     text-align: center;
     line-height: 62px;
@@ -679,7 +683,7 @@ div#wpadminbar:hover div#wp-toolbar {
   }
   .siteHeader .btnDownload {
     font-size: 23px;
-    height: 65px;
+    height: 64px;
     width: 80px;
     line-height: 67px;
   }
@@ -701,24 +705,24 @@ div#wpadminbar:hover div#wp-toolbar {
 }
 .brandLogo {
   position: absolute;
-  top: 6px;
-  left: 6px;
+  top: 0px;
+  left: 10px;
   display: block;
 }
 .brandLogo span {
   display: none;
 }
 .brandLogo img {
-  width: 128px;
+  height: 64px;
 }
 @media (min-width:  768px) {
   .brandLogo {
     position: static;
-    padding: 6px;
+    padding-left: 10px;
     float: left;
   }
   .brandLogo img {
-    width: 104px;
+    height: 60px;
   }
 }
 @media (min-width: 1280px) {
@@ -726,14 +730,13 @@ div#wpadminbar:hover div#wp-toolbar {
     padding: 0;
   }
   .brandLogo img {
-    width: 145px;
+    height: 65px;
   }
 }
 .menuToggle {
   position: absolute;
-  right: 10px;
-  top: 10px;
-  padding: 6px 8px;
+  right: 15px;
+  top: 15px;
   z-index: 62;
   backface-visibility: hidden;
 }
@@ -823,173 +826,6 @@ div#wpadminbar:hover div#wp-toolbar {
     transform: translateY(0px);
   }
 }
-.pageDocumentation .btnPdfDownload {
-  background: #f7931c;
-  border-radius: 80px;
-  border: 0 none;
-  box-shadow: 0 8px 16px rgba(244, 116, 31, 0.5);
-  outline: 0 none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-size: 18px;
-  font-weight: 300;
-  padding: 16px 34px;
-  position: relative;
-  overflow: hidden;
-  transition: transform 0.4s, box-shadow 0.4s;
-  backface-visibility: hidden;
-  z-index: 1;
-  position: absolute;
-  bottom: 20px;
-  right: 20px;
-  padding: 15px 25px !important;
-  font-size: 20px;
-  border-radius: 40px;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.3s;
-}
-.pageDocumentation .btnPdfDownload span {
-  position: relative;
-  z-index: 2;
-}
-.pageDocumentation .btnPdfDownload span span {
-  margin-left: 8px;
-}
-.pageDocumentation .btnPdfDownload span i {
-  top: 2px;
-}
-.pageDocumentation .btnPdfDownload span .icon-download-arrow {
-  font-size: 17px;
-  margin: 0 7px;
-  top: 1px;
-}
-.pageDocumentation .btnPdfDownload i {
-  position: relative;
-  z-index: 2;
-}
-.pageDocumentation .btnPdfDownload small {
-  position: relative;
-  text-transform: uppercase;
-  z-index: 2;
-  font-size: 70%;
-  font-weight: 600;
-  line-height: 1;
-  display: block;
-  margin: 0 15px;
-}
-@media (min-width: 1024px) {
-  .pageDocumentation .btnPdfDownload small {
-    margin: 0 25px;
-  }
-}
-.pageDocumentation .btnPdfDownload b {
-  font-weight: 700;
-}
-.pageDocumentation .btnPdfDownload:before,
-.pageDocumentation .btnPdfDownload:after {
-  content: '';
-  display: block;
-  border-radius: 80px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  transition: opacity 0.3s;
-}
-.pageDocumentation .btnPdfDownload:before {
-  background: #f26521;
-  background: -moz-linear-gradient(-150deg, #f26521 0%, #f7931c 80%);
-  background: -webkit-linear-gradient(-150deg, #f26521 0%, #f7931c 80%);
-  background: linear-gradient(-150deg, #f26521 0%, #f7931c 80%);
-}
-.pageDocumentation .btnPdfDownload:after {
-  background: #f7931c;
-  background: -moz-linear-gradient(-150deg, #f7931c 0%, #f26521 80%);
-  background: -webkit-linear-gradient(-150deg, #f7931c 0%, #f26521 80%);
-  background: linear-gradient(-150deg, #f7931c 0%, #f26521 80%);
-  opacity: 0;
-}
-.nonTouch .pageDocumentation .btnPdfDownload:hover:after {
-  opacity: 1;
-}
-.nonTouch .pageDocumentation .btnPdfDownload:hover .icon-download-arrow {
-  animation: intimateDownload 0.8s ease;
-}
-@media (min-width: 1280px) {
-  .pageDocumentation .btnPdfDownload {
-    font-size: 22px;
-    padding: 20px 45px;
-    box-shadow: 0 10px 20px rgba(244, 112, 32, 0.5);
-  }
-  .pageDocumentation .btnPdfDownload span .icon-download-arrow {
-    font-size: 19px;
-    margin: 0 8px;
-  }
-}
-.pageDocumentation .btnPdfDownload.btnCancel {
-  background: #f3f3f3;
-  box-shadow: none;
-  color: rgba(0, 0, 0, 0.5);
-}
-.pageDocumentation .btnPdfDownload.btnCancel:before {
-  display: none;
-}
-.nonTouch .pageDocumentation .btnPdfDownload.btnCancel:hover {
-  color: #fff;
-}
-.pageDocumentation .btnPdfDownload.btnCancel.active {
-  color: #fff;
-}
-.pageDocumentation .btnPdfDownload.btnCancel.active:before {
-  display: block;
-}
-.pageDocumentation .btnPdfDownload.cta-download span i {
-  transition: transform 0.4s;
-}
-.nonTouch .pageDocumentation .btnPdfDownload.cta-download:hover span i:first-child {
-  transform: translateX(-2px);
-}
-.nonTouch .pageDocumentation .btnPdfDownload.cta-download:hover span i:last-child {
-  transform: translateX(2px);
-}
-.nonTouch .pageDocumentation .btnPdfDownload.cta-download:hover span i.icon-download-arrow {
-  animation: intimateDownload 0.8s ease;
-}
-.pageDocumentation .btnPdfDownload.btnSmall {
-  font-size: 15px;
-  padding: 13px 25px;
-}
-.pageDocumentation .btnPdfDownload.btnSmall span .icon-download-arrow {
-  font-size: 90%;
-  margin-right: 0;
-}
-@media (max-width:  767px) {
-  .pageDocumentation .btnPdfDownload {
-    display: none;
-  }
-}
-.touch .pageDocumentation .btnPdfDownload {
-  opacity: 1;
-  display: block;
-  font-size: 18px;
-  padding: 13px 23px 12px !important;
-  bottom: 18px;
-  right: 18px;
-}
-.pageDocumentation .btnPdfDownload:before,
-.pageDocumentation .btnPdfDownload:after {
-  border-radius: 40px;
-}
-.pageDocumentation .btnPdfDownload i {
-  position: relative;
-}
-.pageDocumentation .listItem:hover .btnPdfDownload {
-  opacity: 1;
-  pointer-events: all;
-}
 /*---------------------------- 5. Common button ------------------------------*/
 .btn {
   background: #f7931c;
@@ -1457,190 +1293,6 @@ h2 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-.pluginListwrap {
-  padding: 0;
-}
-.pluginListwrap > section {
-  margin-bottom: 35px;
-}
-@media (min-width:  600px) {
-  .pluginListwrap > section {
-    display: flex;
-    flex-wrap: wrap;
-    margin-bottom: 130px;
-  }
-}
-@media (min-width:  768px) {
-  .pluginListwrap > section {
-    padding: 0 10px;
-  }
-}
-@media (min-width: 1280px) {
-  .pluginListwrap > section {
-    padding: 0;
-  }
-}
-.pluginListwrap > section > div,
-.pluginListwrap > section .listItem {
-  box-sizing: border-box;
-}
-@media (min-width:  600px) {
-  .pluginListwrap > section > div,
-  .pluginListwrap > section .listItem {
-    width: 49%;
-    margin: 0 0.5% 1%;
-  }
-}
-@media (min-width:  768px) {
-  .pluginListwrap > section > div,
-  .pluginListwrap > section .listItem {
-    width: 32.66%;
-    margin: 0 0.25% 0.5%;
-    box-sizing: border-box;
-  }
-  .pluginListwrap > section > div:nth-child(4):nth-last-child(1),
-  .pluginListwrap > section .listItem:nth-child(4):nth-last-child(1) {
-    width: 32.66%;
-    margin: auto;
-    position: relative;
-    left: -0.25%;
-  }
-}
-.pluginListwrap > section > div.pluginListTitle,
-.pluginListwrap > section .listItem.pluginListTitle {
-  align-self: center;
-}
-@media (min-width:  768px) {
-  .pluginListwrap > section > div.pluginListTitle,
-  .pluginListwrap > section .listItem.pluginListTitle {
-    width: 32.66%;
-  }
-}
-.pluginListTitle {
-  font-weight: 700;
-  margin-bottom: 25px;
-  font-size: 26px;
-  padding: 0 30px;
-  word-break: break-word;
-}
-@media (min-width:  768px) {
-  .pluginListTitle {
-    font-size: 30px;
-  }
-}
-.pageDocumentation > .wrap {
-  position: relative;
-  max-width: 1260px;
-  margin: 0 auto;
-  padding: 0 25px;
-  z-index: 2;
-}
-@media (min-width:  768px) {
-  pageDocuu.pageDocumentation > .wrap {
-    height: 90px;
-    padding: 28px 10px 0;
-  }
-}
-@media only screen and (min-width: 900px) {
-  pageDocuu.pageDocumentation > .wrap {
-    padding: 28px 25px 0;
-  }
-}
-@media only screen and (min-width: 1260px) {
-  pageDocuu.pageDocumentation > .wrap {
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-
-.docListwrap {
-  padding: 20px 0 0;
-}
-.docListwrap > section {
-  margin-bottom: 35px;
-}
-@media (min-width:  600px) {
-  .docListwrap > section {
-    display: flex;
-    flex-wrap: wrap;
-    padding: 0;
-  }
-}
-@media (min-width:  768px) {
-  .docListwrap > section {
-    margin-bottom: 70px;
-  }
-}
-.docItem:before {
-  content: "> ";
-  color:#f36521;
-}
-.docListwrap > section > div,
-.docListwrap > section .listItem {
-  box-sizing: border-box;
-  padding: 35px 30px 30px;
-}
-@media (min-width:  600px) {
-  .docListwrap > section > div,
-  .docListwrap > section .listItem {
-    width: 47%;
-    margin: 0 0.5% 1%;
-  }
-}
-.docListwrap > section > div:nth-last-child(1),
-.docListwrap > section .listItem:nth-last-child(1) {
-  position: relative;
-}
-@media (min-width:  768px){
-  .docListwrap > section > div,
-  .docListwrap > section .listItem {
-    width: 32.66%;
-    margin: 0 0.25% 0.5%;
-  }
-}
-@media (min-width:  900px) {
-  .docListwrap > section > div,
-  .docListwrap > section .listItem {
-    width: 24%;
-    margin: 0 0.25% 0.5%;
-    box-sizing: border-box;
-  }
-}
-.docListwrap > section > div.docListTitle,
-.docListwrap > section .listItem.docListTitle {
-  align-self: center;
-}
-@media (min-width:  600px) {
-  .docListwrap > section > div.docListTitle,
-  .docListwrap > section .listItem.docListTitle {
-    width: 47%;
-  }
-}
-@media (min-width:  768px) {
-  .docListwrap > section > div.docListTitle,
-  .docListwrap > section .listItem.docListTitle {
-    width: 32.66%;
-  }
-}
-@media (min-width:  900px) {
-  .docListwrap > section > div.docListTitle,
-  .docListwrap > section .listItem.docListTitle {
-    width: 24%;
-  }
-}
-.docListTitle {
-  font-weight: 700;
-  margin-bottom: 25px;
-  font-size: 26px;
-  padding: 0 30px;
-  height: auto;
-  word-break: break-word;
-}
-@media (min-width:  768px) {
-  .docListTitle {
-    font-size: 30px;
-  }
-}
 .linkReadmore {
   position: absolute;
   top: 0;
@@ -1650,40 +1302,6 @@ h2 {
   cursor: pointer;
   display: block;
 }
-.docReadMore {
-  position: relative;
-  display: inline-block;
-  color: #d6be98;
-  padding-bottom: 2px;
-  /*@media @uptoSmallScreen {
-        display: none;
-    }*/
-}
-.docReadMore:before,
-.docReadMore:after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  background-color: currentColor;
-  transition: 0.2s;
-}
-.docReadMore:before {
-  left: -5px;
-  width: 1px;
-  height: 0;
-}
-.docReadMore:after {
-  left: 0;
-  width: 100%;
-  height: 1px;
-}
-.listItem:hover .docReadMore:before {
-  height: 100%;
-}
-.listItem:hover .docReadMore:after {
-  left: -5px;
-  width: 20px;
-}
 .defnitionList {
   max-width: 1260px;
   margin: 0 auto;
@@ -1909,7 +1527,7 @@ h2 {
   background: #f6f8ff;
 }
 .codeScreen .codeTab.tab-windows {
-  background: #000080;
+  background: #0078D7;
 }
 .codeScreen .codeTab.tab-demo {
   background: #202020;
@@ -2018,7 +1636,6 @@ footer .copyright li + li {
 }
 footer .copyright a {
     color: #333;
-    opacity: 0.5;
     border-bottom: 1px solid #bbb;
     display: inline-block;
     padding: 0 2px;
@@ -2033,7 +1650,6 @@ footer .copyright a {
 @media (min-width:  768px) {
   footer {
     background: #fff;
-    border-top: 1px solid #f7f7f7;
     overflow: hidden;
     padding: 32px 5% 0;
     margin-top: -120px;

assets/css/page.css

@@ -203,7 +203,7 @@
   .authorList .authorInfo {
     text-align: left;
     display: inline-block;
-    width: 152px;
+    width: 252px;
     vertical-align: top;
     padding: 0 8px 12px;
   }
@@ -213,7 +213,7 @@
 }
 @media (min-width: 1024px) {
   .authorList .authorInfo {
-    width: 190px;
+    width: 350px;
     padding: 0 14px 12px;
   }
 }

assets/css/swiper.css

+/**
+ * Swiper 6.1.1
+ * Most modern mobile touch slider and framework with hardware accelerated transitions
+ * http://swiperjs.com
+ *
+ * Copyright 2014-2020 Vladimir Kharlampidi
+ *
+ * Released under the MIT License
+ *
+ * Released on: July 31, 2020
+ */
+
+@font-face {
+  font-family: 'swiper-icons';
+  src: url('data:application/font-woff;charset=utf-8;base64, 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') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+:root {
+  --swiper-theme-color: #007aff;
+}
+.swiper-container {
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  overflow: hidden;
+  list-style: none;
+  padding: 0;
+  /* Fix of Webkit flickering */
+  z-index: 1;
+}
+.swiper-container-vertical > .swiper-wrapper {
+  flex-direction: column;
+}
+.swiper-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  display: flex;
+  transition-property: transform;
+  box-sizing: content-box;
+}
+.swiper-container-android .swiper-slide,
+.swiper-wrapper {
+  transform: translate3d(0px, 0, 0);
+}
+.swiper-container-multirow > .swiper-wrapper {
+  flex-wrap: wrap;
+}
+.swiper-container-multirow-column > .swiper-wrapper {
+  flex-wrap: wrap;
+  flex-direction: column;
+}
+.swiper-container-free-mode > .swiper-wrapper {
+  transition-timing-function: ease-out;
+  margin: 0 auto;
+}
+.swiper-slide {
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transition-property: transform;
+}
+.swiper-slide-invisible-blank {
+  visibility: hidden;
+}
+/* Auto Height */
+.swiper-container-autoheight,
+.swiper-container-autoheight .swiper-slide {
+  height: auto;
+}
+.swiper-container-autoheight .swiper-wrapper {
+  align-items: flex-start;
+  transition-property: transform, height;
+}
+/* 3D Effects */
+.swiper-container-3d {
+  perspective: 1200px;
+}
+.swiper-container-3d .swiper-wrapper,
+.swiper-container-3d .swiper-slide,
+.swiper-container-3d .swiper-slide-shadow-left,
+.swiper-container-3d .swiper-slide-shadow-right,
+.swiper-container-3d .swiper-slide-shadow-top,
+.swiper-container-3d .swiper-slide-shadow-bottom,
+.swiper-container-3d .swiper-cube-shadow {
+  transform-style: preserve-3d;
+}
+.swiper-container-3d .swiper-slide-shadow-left,
+.swiper-container-3d .swiper-slide-shadow-right,
+.swiper-container-3d .swiper-slide-shadow-top,
+.swiper-container-3d .swiper-slide-shadow-bottom {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 10;
+}
+.swiper-container-3d .swiper-slide-shadow-left {
+  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+.swiper-container-3d .swiper-slide-shadow-right {
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+.swiper-container-3d .swiper-slide-shadow-top {
+  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+.swiper-container-3d .swiper-slide-shadow-bottom {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+/* CSS Mode */
+.swiper-container-css-mode > .swiper-wrapper {
+  overflow: auto;
+  scrollbar-width: none;
+  /* For Firefox */
+  -ms-overflow-style: none;
+  /* For Internet Explorer and Edge */
+}
+.swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
+  display: none;
+}
+.swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
+  scroll-snap-align: start start;
+}
+.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
+  scroll-snap-type: x mandatory;
+}
+.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
+  scroll-snap-type: y mandatory;
+}
+:root {
+  --swiper-navigation-size: 44px;
+  /*
+  --swiper-navigation-color: var(--swiper-theme-color);
+  */
+}
+.swiper-button-prev,
+.swiper-button-next {
+  position: absolute;
+  top: 50%;
+  width: calc(var(--swiper-navigation-size) / 44 * 27);
+  height: var(--swiper-navigation-size);
+  margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
+  z-index: 10;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--swiper-navigation-color, var(--swiper-theme-color));
+}
+.swiper-button-prev.swiper-button-disabled,
+.swiper-button-next.swiper-button-disabled {
+  opacity: 0.35;
+  cursor: auto;
+  pointer-events: none;
+}
+.swiper-button-prev:after,
+.swiper-button-next:after {
+  font-family: swiper-icons;
+  font-size: var(--swiper-navigation-size);
+  text-transform: none !important;
+  letter-spacing: 0;
+  text-transform: none;
+  font-variant: initial;
+  line-height: 1;
+}
+.swiper-button-prev,
+.swiper-container-rtl .swiper-button-next {
+  left: 10px;
+  right: auto;
+}
+.swiper-button-prev:after,
+.swiper-container-rtl .swiper-button-next:after {
+  content: 'prev';
+}
+.swiper-button-next,
+.swiper-container-rtl .swiper-button-prev {
+  right: 10px;
+  left: auto;
+}
+.swiper-button-next:after,
+.swiper-container-rtl .swiper-button-prev:after {
+  content: 'next';
+}
+.swiper-button-prev.swiper-button-white,
+.swiper-button-next.swiper-button-white {
+  --swiper-navigation-color: #ffffff;
+}
+.swiper-button-prev.swiper-button-black,
+.swiper-button-next.swiper-button-black {
+  --swiper-navigation-color: #000000;
+}
+.swiper-button-lock {
+  display: none;
+}
+:root {
+  /*
+  --swiper-pagination-color: var(--swiper-theme-color);
+  */
+}
+.swiper-pagination {
+  position: absolute;
+  text-align: center;
+  transition: 300ms opacity;
+  transform: translate3d(0, 0, 0);
+  z-index: 10;
+}
+.swiper-pagination.swiper-pagination-hidden {
+  opacity: 0;
+}
+/* Common Styles */
+.swiper-pagination-fraction,
+.swiper-pagination-custom,
+.swiper-container-horizontal > .swiper-pagination-bullets {
+  bottom: 10px;
+  left: 0;
+  width: 100%;
+}
+/* Bullets */
+.swiper-pagination-bullets-dynamic {
+  overflow: hidden;
+  font-size: 0;
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  transform: scale(0.33);
+  position: relative;
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
+  transform: scale(1);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
+  transform: scale(1);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
+  transform: scale(0.66);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
+  transform: scale(0.33);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
+  transform: scale(0.66);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
+  transform: scale(0.33);
+}
+.swiper-pagination-bullet {
+  width: 8px;
+  height: 8px;
+  display: inline-block;
+  border-radius: 100%;
+  background: #000;
+  opacity: 0.2;
+}
+button.swiper-pagination-bullet {
+  border: none;
+  margin: 0;
+  padding: 0;
+  box-shadow: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+.swiper-pagination-clickable .swiper-pagination-bullet {
+  cursor: pointer;
+}
+.swiper-pagination-bullet-active {
+  opacity: 1;
+  background: var(--swiper-pagination-color, var(--swiper-theme-color));
+}
+.swiper-container-vertical > .swiper-pagination-bullets {
+  right: 10px;
+  top: 50%;
+  transform: translate3d(0px, -50%, 0);
+}
+.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
+  margin: 6px 0;
+  display: block;
+}
+.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+  top: 50%;
+  transform: translateY(-50%);
+  width: 8px;
+}
+.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  display: inline-block;
+  transition: 200ms transform, 200ms top;
+}
+.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
+  margin: 0 4px;
+}
+.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+}
+.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  transition: 200ms transform, 200ms left;
+}
+.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  transition: 200ms transform, 200ms right;
+}
+/* Progress */
+.swiper-pagination-progressbar {
+  background: rgba(0, 0, 0, 0.25);
+  position: absolute;
+}
+.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+  background: var(--swiper-pagination-color, var(--swiper-theme-color));
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  transform: scale(0);
+  transform-origin: left top;
+}
+.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+  transform-origin: right top;
+}
+.swiper-container-horizontal > .swiper-pagination-progressbar,
+.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
+  width: 100%;
+  height: 4px;
+  left: 0;
+  top: 0;
+}
+.swiper-container-vertical > .swiper-pagination-progressbar,
+.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
+  width: 4px;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+.swiper-pagination-white {
+  --swiper-pagination-color: #ffffff;
+}
+.swiper-pagination-black {
+  --swiper-pagination-color: #000000;
+}
+.swiper-pagination-lock {
+  display: none;
+}
+/* Scrollbar */
+.swiper-scrollbar {
+  border-radius: 10px;
+  position: relative;
+  -ms-touch-action: none;
+  background: rgba(0, 0, 0, 0.1);
+}
+.swiper-container-horizontal > .swiper-scrollbar {
+  position: absolute;
+  left: 1%;
+  bottom: 3px;
+  z-index: 50;
+  height: 5px;
+  width: 98%;
+}
+.swiper-container-vertical > .swiper-scrollbar {
+  position: absolute;
+  right: 3px;
+  top: 1%;
+  z-index: 50;
+  width: 5px;
+  height: 98%;
+}
+.swiper-scrollbar-drag {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 10px;
+  left: 0;
+  top: 0;
+}
+.swiper-scrollbar-cursor-drag {
+  cursor: move;
+}
+.swiper-scrollbar-lock {
+  display: none;
+}
+.swiper-zoom-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+.swiper-zoom-container > img,
+.swiper-zoom-container > svg,
+.swiper-zoom-container > canvas {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+.swiper-slide-zoomed {
+  cursor: move;
+}
+/* Preloader */
+:root {
+  /*
+  --swiper-preloader-color: var(--swiper-theme-color);
+  */
+}
+.swiper-lazy-preloader {
+  width: 42px;
+  height: 42px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -21px;
+  margin-top: -21px;
+  z-index: 10;
+  transform-origin: 50%;
+  animation: swiper-preloader-spin 1s infinite linear;
+  box-sizing: border-box;
+  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
+  border-radius: 50%;
+  border-top-color: transparent;
+}
+.swiper-lazy-preloader-white {
+  --swiper-preloader-color: #fff;
+}
+.swiper-lazy-preloader-black {
+  --swiper-preloader-color: #000;
+}
+@keyframes swiper-preloader-spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+/* a11y */
+.swiper-container .swiper-notification {
+  position: absolute;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  opacity: 0;
+  z-index: -1000;
+}
+.swiper-container-fade.swiper-container-free-mode .swiper-slide {
+  transition-timing-function: ease-out;
+}
+.swiper-container-fade .swiper-slide {
+  pointer-events: none;
+  transition-property: opacity;
+}
+.swiper-container-fade .swiper-slide .swiper-slide {
+  pointer-events: none;
+}
+.swiper-container-fade .swiper-slide-active,
+.swiper-container-fade .swiper-slide-active .swiper-slide-active {
+  pointer-events: auto;
+}
+.swiper-container-cube {
+  overflow: visible;
+}
+.swiper-container-cube .swiper-slide {
+  pointer-events: none;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  z-index: 1;
+  visibility: hidden;
+  transform-origin: 0 0;
+  width: 100%;
+  height: 100%;
+}
+.swiper-container-cube .swiper-slide .swiper-slide {
+  pointer-events: none;
+}
+.swiper-container-cube.swiper-container-rtl .swiper-slide {
+  transform-origin: 100% 0;
+}
+.swiper-container-cube .swiper-slide-active,
+.swiper-container-cube .swiper-slide-active .swiper-slide-active {
+  pointer-events: auto;
+}
+.swiper-container-cube .swiper-slide-active,
+.swiper-container-cube .swiper-slide-next,
+.swiper-container-cube .swiper-slide-prev,
+.swiper-container-cube .swiper-slide-next + .swiper-slide {
+  pointer-events: auto;
+  visibility: visible;
+}
+.swiper-container-cube .swiper-slide-shadow-top,
+.swiper-container-cube .swiper-slide-shadow-bottom,
+.swiper-container-cube .swiper-slide-shadow-left,
+.swiper-container-cube .swiper-slide-shadow-right {
+  z-index: 0;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+}
+.swiper-container-cube .swiper-cube-shadow {
+  position: absolute;
+  left: 0;
+  bottom: 0px;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  opacity: 0.6;
+  -webkit-filter: blur(50px);
+  filter: blur(50px);
+  z-index: 0;
+}
+.swiper-container-flip {
+  overflow: visible;
+}
+.swiper-container-flip .swiper-slide {
+  pointer-events: none;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  z-index: 1;
+}
+.swiper-container-flip .swiper-slide .swiper-slide {
+  pointer-events: none;
+}
+.swiper-container-flip .swiper-slide-active,
+.swiper-container-flip .swiper-slide-active .swiper-slide-active {
+  pointer-events: auto;
+}
+.swiper-container-flip .swiper-slide-shadow-top,
+.swiper-container-flip .swiper-slide-shadow-bottom,
+.swiper-container-flip .swiper-slide-shadow-left,
+.swiper-container-flip .swiper-slide-shadow-right {
+  z-index: 0;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+}