Push to lab

sevagh · Sep 22, 2023 · 1c5ac1f · 1c5ac1f
1 parent 30c6552
commit 1c5ac1f
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 25 deletions.
diff --git a/docs/assets/css/style.scss b/docs/assets/css/style.scss
@@ -267,9 +267,20 @@ div.image-container {
   margin-right: 5px;
 }
 
-@media (max-width: 768px) {
+@media (min-width: 1300px) and (max-width: 1500px) {
   .banner-left, .banner-right {
-    transform: scale(0.5);
+    transform: scale(0.85);
+    transform-origin: top left;
+  }
+  .banner-right {
+    transform-origin: top right;
+    right: 5px;
+  }
+}
+
+@media (min-width: 1025px) and (max-width: 1299px) {
+  .banner-left, .banner-right {
+    transform: scale(0.85);
     transform-origin: top left;
   }
   .banner-right {
@@ -289,21 +300,38 @@ div.image-container {
   }
 }
 
+@media (max-width: 768px) {
+  .banner-left, .banner-right {
+    transform: scale(0.6);
+    transform-origin: top left;
+  }
+  .banner-right {
+    transform-origin: top right;
+    right: 5px;
+  }
+}
+
 @media (max-width: 650px) {
   .blog-header {
       width: calc(100vw + (615px - 100%));
   }
 }
 
+@media (max-width: 600px) {
+  .index-header {
+      width: calc(100vw + (600px - 100%));
+  }
+}
+
 @media (max-width: 550px) {
   .about-header {
       width: calc(100vw + (545px - 100%));
   }
-}
-
-@media (max-width: 600px) {
   .index-header {
-      width: calc(100vw + (600px - 100%));
+      width: calc(100vw + (590px - 100%));
+  }
+  .sponsors-header {
+      width: calc(100vw + (475px - 100%));
   }
 }
 
@@ -332,3 +360,32 @@ div.image-container {
 .post-item {
   display: none;
 }
+
+div.category-cloud {
+  padding-bottom: 30px;
+}
+
+div.tag-cloud {
+  padding-bottom: 30px;
+}
+
+
+.blog-post {
+    margin-bottom: 40px;
+}
+
+.blog-post h2 {
+    font-size: 1.5em;
+    margin-bottom: 10px;
+}
+
+.blog-post .meta {
+    font-size: 0.9em;
+    color: #777;
+    margin-bottom: 10px;
+}
+
+.blog-post .description {
+    font-size: 1em;
+    color: #555;
+}
diff --git a/docs/blog.js b/docs/blog.js
@@ -3,15 +3,25 @@ document.addEventListener("DOMContentLoaded", function() {
     let type = urlSegments[2]; // "tag" or "category"
     let value = urlSegments[3];
 
-    let allPosts = document.querySelectorAll(".post-item");
-
+    let allPosts = document.querySelectorAll(".blog-post");
+    
     allPosts.forEach(function(post) {
         if (type === "tag" && post.getAttribute("data-tags").includes(value)) {
             post.style.display = "block";
         } else if (type === "category" && post.getAttribute("data-category").includes(value)) {
             post.style.display = "block";
         } else if (type === undefined || type === "") {
             post.style.display = "block"; // Display all if no filter is applied
+        } else {
+            post.style.display = "none";  // Hide posts that don't match the filter
         }
     });
+
+    // Reset Filters button functionality
+    document.getElementById("resetFilters").addEventListener("click", function() {
+        allPosts.forEach(function(post) {
+            post.style.display = "block";
+        });
+        window.history.pushState({}, "", '/blog/'); // Reset URL to just '/blog/' to clear filters
+    });
 });
diff --git a/docs/blog.md b/docs/blog.md
@@ -4,23 +4,17 @@ header_class: blog
 
 <script src="/blog.js"></script>
 
-# Freemusicdemixer blog
+# Free-music-demixer blog
 
-## Filter by category
-
-<div id="category-cloud">
-{% for category in site.categories %}
+<div class="clouds">
+<span class="tag-size-5">Categories:</span> {% for category in site.categories %}
     <span class="tag-size-5">
         <a class="category-link" href="/blog/category/{{ category[0] | slugify }}" rel="category">{{ category[0] }}</a> ({{ category[1].size }})
     </span>
 {% endfor %}
-</div>
 <br>
-
-## Filter by tag
-
-<div id="tag-cloud">
-{% capture tags %}
+<br>
+ <span class="tag-size-5">Tags:</span> {% capture tags %}
   {% for tag in site.tags %}
     {{ tag[1].size | plus: -10000 }}###{{ tag[0] | replace: ' ', '##' }}###{{ tag[1].size }}
   {% endfor %}
@@ -43,16 +37,22 @@ header_class: blog
     </span>
 {% endfor %}
 </div>
-<br>
 
-## All posts
+<button id="resetFilters" class="btn btn-github">Reset filters</button>
+
+<br>
+## Posts
 
 <div id="posts-container">
-<ul>
 {% for post in site.posts %}
-    <div class="post-item" data-tags="{{ post.tags | join: ',' }}" data-category="{{ post.categories | join: ',' }}">
-        <li><a href="{{ post.url }}">[{{ post.date | date: "%Y-%m-%d" }}] {{ post.title }}</a></li>
+    <div class="blog-post" data-tags="{{ post.tags | join: ',' }}" data-category="{{ post.categories | join: ',' }}">
+        <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
+        <div class="meta">
+            {{ post.date | date: "%Y-%m-%d" }} | Category: {{ post.categories | join: ',' }} | Tags: {{ post.tags | join: ',' }}
+        </div>
+        <div class="description">
+            {{ post.excerpt | truncate: 200 }}
+        </div>
     </div>
 {% endfor %}
-</ul>
 </div>
diff --git a/docs/sponsors.md b/docs/sponsors.md
@@ -1,3 +1,7 @@
+---
+header_class: sponsors
+---
+
 # Our sponsors
 
 We are eagerly establishing partnerships with our friends in pro audio recording, production, and any slice of the music industry related to mixing, remixing, demixing, and stem separation.