Merge branch 'revolunet:master' into master

dkdndes · Oct 29, 2022 · 314b41b · 314b41b
2 parents 6854d86 + a8c44ff
commit 314b41b
Show file tree

Hide file tree

Showing 22 changed files with 919 additions and 681 deletions.
diff --git a/README.md b/README.md
@@ -19,7 +19,7 @@ If you find a nice ebook about Python, feel free to fork PythonBooks and add it
 
 Alternatively, you can send us an email with book infos : [email protected]
 
-Thanks per advance !
+Thanks per advance 💙!
 
 
 ## HISTORY

diff --git a/css/pythonbooks.css b/css/pythonbooks.css
@@ -9,7 +9,7 @@
  */
 
 /*
- NOTE FROM REVOLUNET : 
+ NOTE FROM REVOLUNET :
  Only Bootstrap styles needed for PythonBooks are here.
 */
 
@@ -118,6 +118,145 @@ body {
   color: #333333;
   background-color: #ffffff;
 }
+
+/* css for loader */
+#loader-wrapper {
+  position: relative;
+  top:0;
+  left:0;
+  width:100%;
+  height: 100%;
+}
+
+#loader{
+  display: block;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 150px;
+  height: 150px;
+  margin: -75px 0 0 -75px;
+  margin-top: 100px;
+  border: 6px solid transparent;
+  border-radius: 50%;
+  border-top-color:#3498db;
+  z-index: 10001;
+
+  -webkit-animation: spin 1.5s linear infinite;
+  animation: spin 1.5s linear infinite;
+}
+
+#loader::before {
+  content:"";
+  position: absolute;
+  top:5px;
+  left:5px;
+  right:5px;
+  bottom:5px;
+  border:6px solid transparent;
+  border-radius: 50%;
+  border-top-color:#e74c3c;
+
+  -webkit-animation: spin 1.5s linear infinite;
+  animation: spin 1.5s linear infinite;
+}
+
+#loader::after {
+  content:"";
+  position: absolute;
+  top:15px;
+  left:15px;
+  right:15px;
+  bottom:15px;
+  border:6px solid transparent;
+  border-radius: 50%;
+  border-top-color: #f9c922;
+
+  -webkit-animation: spin 1.5s linear infinite;
+  animation: spin 1.5s linear infinite;
+}
+
+@-webkit-keyframes spin{
+  0% {
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spin {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+}
+
+#loader-wrapper .loader-section {
+    position: fixed;
+    top: 0;
+    width: 50%;
+    height: 100%;
+    background-color: #000;
+    z-index: 10000;
+}
+
+#loader-wrapper .loader-section.section-left {
+    left: 0;
+}
+
+#loader-wrapper .loader-section.section-right {
+    right: 0;
+}
+
+/* Loaded */
+.loaded #loader-wrapper .loader-section.section-left {
+    -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
+    -ms-transform: translateX(-100%);  /* IE 9 */
+    transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */
+
+    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+            transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+}
+
+.loaded #loader-wrapper .loader-section.section-right {
+    -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
+    -ms-transform: translateX(100%);  /* IE 9 */
+    transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */
+
+    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+            transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+}
+
+.loaded #loader {
+    opacity: 0;
+    -webkit-transition: all 0.3s ease-out;
+            transition: all 0.3s ease-out;
+}
+
+.loaded #loader-wrapper{
+  visibility: hidden;
+}
+
+.no-js #loader-wrapper {
+    display: none;
+}
+.no-js h1 {
+    color: #222222;
+}
+
+/* end of css for loader */
+
 a {
   color: #0088cc;
   text-decoration: none;
@@ -1292,7 +1431,7 @@ a.jsbookslinks {
   width: 140px;
   height: 184px;
   background: rgba(54, 109, 156,.9) url('../img/view.png') no-repeat center;
-  z-index: 10;
+  z-index: 5;
   -webkit-transition:opacity .2s linear;
   -moz-transition:opacity .2s linear;
   -o-transition:opacity .2s linear;
@@ -1668,7 +1807,7 @@ ul#social_buttons li a:hover {
     width: 140px;
     height: 184px;
   }
-  
+
 }
 
 @media (min-width: 768px) and (max-width: 979px) {

diff --git a/img/Advanced-Machine-Learning-with-Python.jpg b/img/Advanced-Machine-Learning-with-Python.jpg
diff --git a/... Machine Learning Systems with Python.jpg → ...-Machine-Learning-Systems-with-Python.jpg b/... Machine Learning Systems with Python.jpg → ...-Machine-Learning-Systems-with-Python.jpg
diff --git a/img/CrackingCodes_cover.png b/img/CrackingCodes_cover.png
diff --git a/...ing-IPython-for-Interactive-Computing-and-Data-Visualization-Second-Edition.png b/...ing-IPython-for-Interactive-Computing-and-Data-Visualization-Second-Edition.png
diff --git a/img/Learning-OpenCV-3-Computer-Vision-with-Python-Second-Edition.jpg b/img/Learning-OpenCV-3-Computer-Vision-with-Python-Second-Edition.jpg
diff --git a/img/Mastering-Python.jpg b/img/Mastering-Python.jpg
diff --git a/img/What_You_Need_to_Know_about_Python.jpg b/img/What_You_Need_to_Know_about_Python.jpg
diff --git a/img/cover_20_python.png b/img/cover_20_python.png
diff --git a/img/cover_PythonGrow.png b/img/cover_PythonGrow.png
diff --git a/img/cover_bayes.png b/img/cover_bayes.png
diff --git a/img/cover_dsp.jpg b/img/cover_dsp.jpg
diff --git a/img/cover_invent4th_thumb.png b/img/cover_invent4th_thumb.png
diff --git a/img/cover_inventgame.jpg b/img/cover_inventgame.jpg
diff --git a/img/cover_inventgame.png b/img/cover_inventgame.png
diff --git a/img/cover_learnbreak.jpg b/img/cover_learnbreak.jpg
diff --git a/img/cover_makinggame.png b/img/cover_makinggame.png
diff --git a/img/cover_py101.jpg b/img/cover_py101.jpg
diff --git a/img/hackingcyphers.png b/img/hackingcyphers.png
diff --git a/index.html b/index.html
@@ -39,6 +39,13 @@ <h1>The best free Python resources</h1>
         </ul>
     </div>
 
+    <!-- adding loader -->
+    <div id="loader-wrapper">
+      <div id="loader"></div>
+      <div class="loader-section section-left"></div>
+      <div class="loader-section section-right"></div>
+    </div>
+
     <div class="container">
         <!-- ==========================
         JOBS
@@ -127,6 +134,7 @@ <h1>The best free Python resources</h1>
 
 
     $(document).ready(function() {
+      $('body').addClass('loaded');
       $.getJSON('./issues.json?' + Math.random(), function(data) {
         var template = $('#booktpl').html();
         data.books.sort(randOrd);
@@ -146,7 +154,7 @@ <h1>The best free Python resources</h1>
          <div class="span4 booksection {{ level }}">
           <a target="_blank" href="{{url}}">
             <div class="view"></div>
-            <div title="{{ title }}" id="cover" style="background:black url('{{cover}}') no-repeat center;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;">
+            <div title="{{ title }}" id="cover" style="background:black url('{{cover}}') no-repeat center;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover">
             </div>
             <h2 title="{{ title }}">{{title}}</h2>
           </a>