fix

.gitignore

@@ -1,3 +1 @@
-*.html
-thumbnails/
-*.js
+index.html

README.md

@@ -1,53 +1,10 @@
 # Gruvbox Wallpapers
 A place where to find gruvbox theme wallpapers.
-[https://gruvbox-wallpapers.pages.dev/](https://gruvbox-wallpapers.pages.dev/ 'Gruvbox Wallpapers')
+[https://gruvbox-wallpapers.onrender.com/](https://gruvbox-wallpapers.onrender.com/ 'Gruvbox Wallpapers')
 ## Contributions
 
 1. Fork the project.
 2. Add the wallpapers that you have in their respective folder.
-3. For light variants: Place the light-themed wallpapers in a light/ subfolder within the category.
 3. Make a pull request.
 
-> [!CAUTION]
-> - Use files under 25mb
-> - Avoid spaces in names
-
-> [!TIP]
-> If your wallpaper does not fit in any of the folders we can debate the creation of a new one.
-
-I tend to accept any contributions, but let's keep the site with images that match or look good with the gruvbox's color scheme :').
-
-
-## Nix package
-
-1. **Use [nix flakes](https://wiki.nixos.org/wiki/Flakes)**:
-
-2. Add the following to your `flake.nix` file:
-   
-```nix
-inputs = {
-  gruvbox-wallpapers.url = "github:AngelJumbo/gruvbox-wallpapers";
-  # ...
-};
-```
-
-3. Then, in your Home Manager configuration:
-
-```nix
-{
-  inputs,
-  pkgs,
-  ...
-}: {
-  home.file = {
-    "path/to/dir" = {
-      source = inputs.gruvbox-wallpapers.packages."${pkgs.stdenv.hostPlatform.system}".default;
-      recursive = true;
-    };
-  };
-}
-```
-
-## Disclaimer 
-
-Most of the images shared here are community contributions, and their original sources are often unknown. If you are the rightful owner of any image and would like it removed, please contact me by opening an issue. For any use beyond personal scope, I recommend performing a reverse image search to verify the origin.
+If your wallpaper does not fit in any of the folders we can debate the creation of a new one.

build.sh

@@ -1,506 +1,92 @@
-#!/usr/bin/env bash
+#!/bin/sh
 
-# MIT License
-# Copyright (c) 2022 Angel Jumbo <anarjumb@protonmail.com>
-#
-# Permission is hereby granted, free of charge, to any person obtaining a copy
-# of this software and associated documentation files (the "Software"), to deal
-# in the Software without restriction, including without limitation the rights
-# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-# copies of the Software, and to permit persons to whom the Software is
-# furnished to do so, subject to the following conditions:
-# The above copyright notice and this permission notice shall be included in all
-# copies or substantial portions of the Software.
-#
-# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-# SOFTWARE.
+touch ./index.html
 
-generate_thumbnails() {
-  echo "generate thumbnails ..."
-  mkdir -p thumbnails
-  rm -rf thumbnails/*
-  
-  # Count total number of images
-  total_images=$(find ./wallpapers -type f \( -iname "*.jpg" -o -iname "*.jpeg" -o -iname "*.png" \) | wc -l)
-  current_image=0
-  
-  for section_dir in ./wallpapers/*; do
-    section_name="${section_dir##*/}"
-    mkdir -p "thumbnails/$section_name"
-    
-    # Process dark images (base directory)
-    for img in "$section_dir"/*; do
-      [ -f "$img" ] || continue
-      case "$img" in
-        *.jpg|*.jpeg|*.png|*.JPG|*.JPEG|*.PNG) ;;
-        *) continue ;;
-      esac
-      
-      current_image=$((current_image + 1))
-      local img_filename="${img##*/}"
-      local thumbnail="thumbnails/$section_name/$img_filename"
-      echo "($current_image/$total_images): $img -> $thumbnail"
-      convert "$img" -resize 300x300 "$thumbnail"
-    done
-    
-    # Process light images if light folder exists
-    if [ -d "$section_dir/light" ]; then
-      mkdir -p "thumbnails/$section_name/light"
-      for img in "$section_dir/light"/*; do
-        [ -f "$img" ] || continue
-        case "$img" in
-          *.jpg|*.jpeg|*.png|*.JPG|*.JPEG|*.PNG) ;;
-          *) continue ;;
-        esac
-        
-        current_image=$((current_image + 1))
-        local img_filename="${img##*/}"
-        local thumbnail="thumbnails/$section_name/light/$img_filename"
-        echo "($current_image/$total_images): $img -> $thumbnail"
-        convert "$img" -resize 300x300 "$thumbnail"
-      done
-    fi
-  done
-  
-  echo "Thumbnail generation complete: $total_images images processed"
-}
+echo "<!DOCTYPE html>
+<html lang=\"en\">
 
-check_has_light_folder() {
-  local section_dir=$1
-  [ -d "$section_dir/light" ] && echo "true" || echo "false"
-}
-
-count_images_in_dir() {
-  local dir=$1
-  find "$dir" -maxdepth 1 -type f \( -iname "*.jpg" -o -iname "*.jpeg" -o -iname "*.png" \) | wc -l
-}
-
-create_section_data() {
-  local section=$1
-  local subdir=$2
-  local maxPerPage=8
-  local has_light=$(check_has_light_folder "$subdir")
-  
-  echo "Creating data for section: $section"
-  
-  # Create JSON data file for the section
-  local data_file="${section}_data.js"
-  
-  cat > "$data_file" << EOF
-// Data for $section section
-window.sectionData = window.sectionData || {};
-window.sectionData['$section'] = {
-  hasLight: $has_light,
-  maxPerPage: $maxPerPage,
-  dark: [
-EOF
-
-  # Generate dark images data
-  for wallpaper in "$subdir"/*; do
-    [ -f "$wallpaper" ] || continue
-    case "$wallpaper" in
-      *.jpg|*.jpeg|*.png|*.JPG|*.JPEG|*.PNG) ;;
-      *) continue ;;
-    esac
-    
-    local img_path="${wallpaper#./}"
-    local img_filename="${wallpaper##*/}"
-    local thumbnail_path="thumbnails/$section/$img_filename"
-    echo "    { src: '$img_path', thumb: '$thumbnail_path', alt: '$img_filename' }," >> "$data_file"
-  done
-
-  # Generate light images data if exists
-  echo "  ]," >> "$data_file"
-  if [ "$has_light" = "true" ]; then
-    echo "  light: [" >> "$data_file"
-    for wallpaper in "$subdir/light"/*; do
-      [ -f "$wallpaper" ] || continue
-      case "$wallpaper" in
-        *.jpg|*.jpeg|*.png|*.JPG|*.JPEG|*.PNG) ;;
-        *) continue ;;
-      esac
-      
-      local img_path="${wallpaper#./}"
-      local img_filename="${wallpaper##*/}"
-      local thumbnail_path="thumbnails/$section/light/$img_filename"
-      echo "    { src: '$img_path', thumb: '$thumbnail_path', alt: '$img_filename' }," >> "$data_file"
-    done
-    echo "  ]" >> "$data_file"
-  else
-    echo "  light: []" >> "$data_file"
-  fi
-
-  echo "};" >> "$data_file"
-}
-
-# Clean up old files
-rm -f *.html *.js
-
-# Generate thumbnails
-generate_thumbnails
-
-# Create main index.html
-cat > index.html << 'EOF'
-<!DOCTYPE html>
-<html lang='en'>
 <head>
-  <meta charset='utf-8'>
-  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
-  <link rel='stylesheet' type='text/css' href='style.css'>
+  <meta charset=\"utf-8\">
+  <link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">
   <title>Gruvbox wallpapers</title>
-  <style>
-    .section-content {
-      margin: 20px 0;
-      opacity: 0;
-      visibility: hidden;
-      transition: all 0.3s ease-in-out;
-      transform: translateY(10px);
-    }
-    
-    .section.selected .section-content {
-      opacity: 1;
-      visibility: visible;
-      transform: translateY(0);
-    }
-    
-    /* Theme switcher styles */
-    .section-theme-switcher {
-      text-align: center;
-      margin: 15px 0;
-      opacity: 0;
-      visibility: hidden;
-      transition: all 0.3s ease-in-out;
-      transform: translateY(-10px);
-    }
-    
-    .section.selected .section-theme-switcher {
-      opacity: 1;
-      visibility: visible;
-      transform: translateY(0);
-    }
-    
-    .theme-toggle {
-      display: inline-flex;
-      gap: 0;
-    }
-    
-    .theme-btn {
-      padding: 10px 20px;
-      background-color: var(--bg-color-reverse);
-      color: var(--fg-color-reverse);
-      border: 2px solid transparent;
-      cursor: pointer;
-      transition: border-color 0.3s ease;
-      font-weight: 600;
-      font-size: 14px;
-      argin: 0 5px 0 5px;
-    }
-    
-    .theme-btn:hover {
-      background-color: var(--bg-color-reverse);
-    }
-    
-    .theme-btn.active {
-      border: 4px solid var(--fg-color);
-      background-color: var(--bg-color);
-      color: var(--fg-color);
-    }
-    
-    .subsection-content {
-      display: none;
-    }
-    
-    .subsection-content.active {
-      display: block;
-    }
-    
-    .loading {
-      text-align: center;
-      padding: 40px;
-      color: var(--fg-color);
-    }
-  </style>
 </head>
+
 <body>
-  <div class='float-btns'>
-    <a href='https://github.com/AngelJumbo/gruvbox-wallpapers' target='_blank' class='btn float-btn' title='Source code'>
-      <span>
-       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github-icon lucide-github"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg>
-      </span>
-    </a>
-    <button onclick='switchMainTheme()' class='btn float-btn' title='Switch theme'>
-      <span>
-       <svg id="light-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun-icon lucide-sun"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
-       <svg id="dark-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon-icon lucide-moon"><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"/></svg>
-       
-      </span>
-    </button>
-  </div>
+  <h1>Wallpapers for gruvbox</h1>" > ./index.html
 
-  <main>
-    <h1>Gruvbox Wallpapers</h1>
-EOF
-
-# Generate sections
 color=1
-declare -a sections
-declare -a sections_with_light
+for subdir in ./wallpapers/*
+do
 
-for subdir in ./wallpapers/*; do
-  section="${subdir##*/}"
-  sections+=("$section")
-  has_light=$(check_has_light_folder "$subdir")
+  echo "<h2 id=s"$color">" >> ./index.html
+  echo "${subdir##*/}" | tr a-z A-Z  >> ./index.html
+  echo "</h2>" >> ./index.html
   
-  if [ "$has_light" = "true" ]; then
-    sections_with_light+=("$section")
-  fi
+  echo "<div id=c>" >> ./index.html
   
-  # Create the data file
-  create_section_data "$section" "$subdir"
-  
-  # Add section to main page
-  echo "    <h2 class='s$color clickable' onclick='activeSection(\"$section\")'>" >> index.html
-  echo "      $(echo "$section" | tr a-z A-Z)" >> index.html
-  echo "    </h2>" >> index.html
-  echo "    <div class='section' id='$section'>" >> index.html
-  
-  # Add theme switcher if section has light variant
-  if [ "$has_light" = "true" ]; then
-    echo "      <div class='section-theme-switcher'>" >> index.html
-    echo "        <div class='theme-toggle'>" >> index.html
-    echo "          <button class='theme-btn active' onclick='switchSectionTheme(\"$section\", \"dark\")' id='$section-dark-btn'>Dark</button>" >> index.html
-    echo "          <button class='theme-btn' onclick='switchSectionTheme(\"$section\", \"light\")' id='$section-light-btn'>Light</button>" >> index.html
-    echo "        </div>" >> index.html
-    echo "      </div>" >> index.html
-  fi
-  
-  echo "      <div class='section-content' id='$section-content'>" >> index.html
-  echo "        <div class='loading'>Loading...</div>" >> index.html
-  echo "      </div>" >> index.html
-  echo "    </div>" >> index.html
+  count=1;
+  for wallpaper in ${subdir}/*
+  do
+    if [ "$count" -lt 11 ]; then #limit the amount of images per section in index
+      echo "  <a target=\"_blank\" href=\"$wallpaper\">
+      <img loading=\"lazy\" src=\"$wallpaper\" alt="$wallpaper" width=\"200\"></a>" >> ./index.html
+      count=$((count+1))
+    else #if the limit is exceeded then create a new html with all the images of the section
+      # TODO: make this part cleaner, this is really ugly.
+      subhtml="${subdir##*/}.html"
+      nimgs=$(ls "${subdir}" | wc -l)
+      echo "  <a target=\"_blank\" class = \"showmore\" href=\"${subhtml}\">
+      <div class = \"showmore\">show all ${nimgs} ${subdir##*/} wallpapers </div></a>" >> ./index.html
+      touch "${subhtml}"
+      
+      echo "<!DOCTYPE html>
+<html lang=\"en\">
 
-  color=$((color + 1))
+<head>
+  <meta charset=\"utf-8\">
+  <link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">
+  <title>Gruvbox wallpapers</title>
+</head>
+
+<body>
+  <h1>Wallpapers for gruvbox</h1>" > "${subhtml}"
+      
+      echo "<h2 id=s"$color">" >> "${subhtml}"
+      echo "${subdir##*/}" | tr a-z A-Z  >> "${subhtml}"
+      echo "</h2>" >> "${subhtml}"
+  
+      echo "<div id=c>" >> "${subhtml}"
+
+      for wallpaper2 in ${subdir}/*
+      do
+        echo "  <a target=\"_blank\" href=\"$wallpaper2\">
+      <img loading=\"lazy\" src=\"$wallpaper2\" alt="$wallpaper2" width=\"200\"></a>" >> "${subhtml}"
+      done
+
+      echo "</div>" >> "${subhtml}"
+
+      echo "<p> Contributions <a href=\"https://github.com/AngelJumbo/gruvbox-wallpapers\">here</a>.</p>
+<p> This images are from random sites or contributions so I don't have a way to know who are their original artist.</p>
+<p> I want to keep this site as simple as possible, but if you are the creator of any of these images and you want acknowledgment I will happily add a section with your name. Just open an issue <a href=\"https://github.com/AngelJumbo/gruvbox-wallpapers/issues\">here</a>.</p>
+<p> The same goes, if you want me to remove your art.</p>
+</body>
+</html>" >> "${subhtml}"
+      break
+    fi
+    
+  done
+  
+  echo "</div>" >> ./index.html
+
+  color=$((color+1))
   if [ "$color" -eq 8 ]; then
     color=1
   fi
 done
 
-# Add all section data scripts
-for section in "${sections[@]}"; do
-  echo "  <script src='${section}_data.js'></script>" >> index.html
-done
-
-# Add main JavaScript
-cat >> index.html << 'EOF'
-  <script>
-    // Global state
-    let activeSectionName = null;
-    let sectionStates = {};
-
-    // Initialize section state
-    function initSectionState(section) {
-      if (!sectionStates[section]) {
-        sectionStates[section] = {
-          currentTheme: 'dark',
-          currentPages: { dark: 1, light: 1 },
-          loaded: false
-        };
-      }
-    }
-
-    function activeSection(section) {
-      hideAllSections();
-      const targetSection = document.getElementById(section);
-      
-      targetSection.classList.add('selected');
-      activeSectionName = section;
-      
-      initSectionState(section);
-      
-      // Load content if not already loaded
-      if (!sectionStates[section].loaded) {
-        loadSectionContent(section);
-      }
-      
-      // Reset to dark theme
-      if (window.sectionData[section].hasLight) {
-        switchSectionTheme(section, 'dark');
-      }
-      
-      setTimeout(() => {
-        targetSection.scrollIntoView({ block: 'start', behavior: 'smooth' });
-      }, 100);
-    }
-
-    function hideAllSections() {
-      document.querySelectorAll('.section').forEach(s => {
-        s.classList.remove('selected');
-      });
-      activeSectionName = null;
-    }
-
-    function loadSectionContent(section) {
-      const contentDiv = document.getElementById(section + '-content');
-      const data = window.sectionData[section];
-      
-      if (!data) {
-        contentDiv.innerHTML = '<div class="loading">Error: Section data not found</div>';
-        return;
-      }
-      
-      let html = '';
-      
-      // Dark content
-      if (data.dark.length > 0) {
-        html += `<div class="subsection-content active" id="${section}-dark">`;
-        
-        // Dark pagination
-        const darkPages = Math.ceil(data.dark.length / data.maxPerPage);
-        if (darkPages > 1) {
-          html += '<div class="pager">';
-          for (let i = 1; i <= darkPages; i++) {
-            const selectedClass = i === 1 ? ' selected' : '';
-            html += `<button class="btn pager-btn${selectedClass}" onclick="loadPage('${section}', 'dark', ${i})">${i}</button>`;
-          }
-          html += '</div>';
-        }
-        
-        html += `<div id="${section}-dark-content">`;
-        html += generateImageGrid(data.dark.slice(0, data.maxPerPage));
-        html += '</div>';
-        html += '</div>';
-      }
-      
-      // Light content
-      if (data.hasLight && data.light.length > 0) {
-        html += `<div class="subsection-content" id="${section}-light">`;
-        
-        // Light pagination
-        const lightPages = Math.ceil(data.light.length / data.maxPerPage);
-        if (lightPages > 1) {
-          html += '<div class="pager">';
-          for (let i = 1; i <= lightPages; i++) {
-            const selectedClass = i === 1 ? ' selected' : '';
-            html += `<button class="btn pager-btn${selectedClass}" onclick="loadPage('${section}', 'light', ${i})">${i}</button>`;
-          }
-          html += '</div>';
-        }
-        
-        html += `<div id="${section}-light-content">`;
-        html += generateImageGrid(data.light.slice(0, data.maxPerPage));
-        html += '</div>';
-        html += '</div>';
-      }
-      
-      contentDiv.innerHTML = html;
-      sectionStates[section].loaded = true;
-    }
-
-    function generateImageGrid(images) {
-      let html = '<div class="c">';
-      images.forEach(img => {
-        html += `<a target="_blank" href="${img.src}">
-          <img loading="lazy" src="${img.thumb}" alt="${img.alt}" width="200">
-        </a>`;
-      });
-      html += '</div>';
-      return html;
-    }
-
-    function switchSectionTheme(section, theme) {
-      const darkBtn = document.getElementById(section + '-dark-btn');
-      const lightBtn = document.getElementById(section + '-light-btn');
-      const darkContent = document.getElementById(section + '-dark');
-      const lightContent = document.getElementById(section + '-light');
-      
-      initSectionState(section);
-      sectionStates[section].currentTheme = theme;
-      
-      // Update button states
-      if (darkBtn && lightBtn) {
-        darkBtn.classList.toggle('active', theme === 'dark');
-        lightBtn.classList.toggle('active', theme === 'light');
-      }
-      
-      // Switch content visibility
-      if (darkContent && lightContent) {
-        darkContent.classList.toggle('active', theme === 'dark');
-        lightContent.classList.toggle('active', theme === 'light');
-      }
-      
-      // Load first page of selected theme
-      loadPage(section, theme, 1);
-    }
-
-    function loadPage(section, theme, page) {
-      const data = window.sectionData[section];
-      const images = data[theme];
-      const startIdx = (page - 1) * data.maxPerPage;
-      const endIdx = Math.min(startIdx + data.maxPerPage, images.length);
-      const pageImages = images.slice(startIdx, endIdx);
-      
-      const contentDiv = document.getElementById(`${section}-${theme}-content`);
-      if (contentDiv) {
-        contentDiv.innerHTML = generateImageGrid(pageImages);
-      }
-      
-      // Update pagination buttons
-      const pagerButtons = document.getElementById(`${section}-${theme}`)?.getElementsByClassName('pager-btn');
-      if (pagerButtons) {
-        for (let i = 0; i < pagerButtons.length; i++) {
-          pagerButtons[i].classList.toggle('selected', i === page - 1);
-        }
-      }
-      
-      initSectionState(section);
-      sectionStates[section].currentPages[theme] = page;
-    }
-
-    // Main theme functions
-    const HIDDEN_CLASS = 'hidden';
-
-    function hideThemeSwitcher(currentTheme) {
-      if (currentTheme === 'dark') {
-        document.getElementById('dark-icon')?.classList.add(HIDDEN_CLASS);
-        document.getElementById('light-icon')?.classList.remove(HIDDEN_CLASS);
-      } else {
-        document.getElementById('light-icon')?.classList.add(HIDDEN_CLASS);
-        document.getElementById('dark-icon')?.classList.remove(HIDDEN_CLASS);
-      }
-    }
-
-    function setMainTheme(newTheme) {
-      document.documentElement.style.setProperty('color-scheme', newTheme);
-      hideThemeSwitcher(newTheme);
-    }
-
-    function switchMainTheme() {
-      const current = document.documentElement.style.getPropertyValue('color-scheme');
-      setMainTheme(current === 'dark' ? 'light' : 'dark');
-    }
-
-    // Initialize
-    document.addEventListener('DOMContentLoaded', function() {
-EOF
-
-echo "      activeSection('${sections[0]}');" >> index.html
-
-cat >> index.html << 'EOF'
-      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        setMainTheme('dark');
-      } else {
-        setMainTheme('light');
-      }
-    });
-  </script>
+echo "<p> Contributions <a href=\"https://github.com/AngelJumbo/gruvbox-wallpapers\">here</a>.</p>
+<p> This images are from random sites or contributions so I don't have a way to know who are their original artist.</p>
+<p> I want to keep this site as simple as possible, but if you are the creator of any of these images and you want acknowledgment I will happily add a section with your name. Just open an issue <a href=\"https://github.com/AngelJumbo/gruvbox-wallpapers/issues\">here</a>.</p>
+<p> The same goes, if you want me to remove your art.</p>
 </body>
-</html>
-EOF
-
-echo "Build complete! Generated $(echo ${#sections[@]}) sections with dynamic content loading."
-echo "Sections with light variants: ${sections_with_light[*]}"
+</html>" >> ./index.html

flake.lock

@@ -1,27 +0,0 @@
-{
-  "nodes": {
-    "nixpkgs": {
-      "locked": {
-        "lastModified": 1761907660,
-        "narHash": "sha256-kJ8lIZsiPOmbkJypG+B5sReDXSD1KGu2VEPNqhRa/ew=",
-        "owner": "nixos",
-        "repo": "nixpkgs",
-        "rev": "2fb006b87f04c4d3bdf08cfdbc7fab9c13d94a15",
-        "type": "github"
-      },
-      "original": {
-        "owner": "nixos",
-        "ref": "nixos-unstable",
-        "repo": "nixpkgs",
-        "type": "github"
-      }
-    },
-    "root": {
-      "inputs": {
-        "nixpkgs": "nixpkgs"
-      }
-    }
-  },
-  "root": "root",
-  "version": 7
-}

flake.nix

@@ -1,48 +0,0 @@
-{
-  description = "Gruvbox-inspired wallpaper collection";
-
-  inputs.nixpkgs.url = "github:nixos/nixpkgs/nixos-unstable";
-
-  outputs = {
-    self,
-    nixpkgs,
-  }: let
-    systems = ["x86_64-linux" "aarch64-linux" "x86_64-darwin" "aarch64-darwin"];
-    forAllSystems = f: nixpkgs.lib.genAttrs systems (system: f (import nixpkgs {inherit system;}));
-
-    mkWallpapersPkg = pkgs: name: path:
-      pkgs.stdenv.mkDerivation {
-        pname = "gruvbox-wallpapers-${name}";
-        version = self.shortRev or "dev";
-        src = ./.;
-        installPhase = ''
-          mkdir -p $out
-          ${
-            if name == "default"
-            then "find wallpapers -type f -exec cp {} $out/ \\;"
-            else "cp -r ${path}/* $out/"
-          }
-        '';
-      };
-
-    subdirs = {
-      default = "wallpapers";
-      anime = "wallpapers/anime";
-      brands = "wallpapers/brands";
-      game = "wallpapers/game";
-      minimalistic = "wallpapers/minimalistic";
-      mix = "wallpapers/mix";
-      painting = "wallpapers/painting";
-      photography = "wallpapers/photography";
-      pixelart = "wallpapers/pixelart";
-      renders = "wallpapers/renders";
-    };
-  in {
-    formatter = forAllSystems (pkgs: pkgs.alejandra);
-
-    packages = forAllSystems (
-      pkgs:
-        nixpkgs.lib.mapAttrs (name: path: mkWallpapersPkg pkgs name path) subdirs
-    );
-  };
-}

index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<body>
+<h1>Site will be deleted soon </h1>
+<p>New site: <a href="https://gruvbox-wallpapers.pages.dev/">gruvbox-wallpapers.pages.dev</a></p>
+<p><a href="https://github.com/AngelJumbo/gruvbox-wallpapers">Github</a></p>
+</body>
+</html>
+

layout.css

@@ -1,36 +0,0 @@
-main {
-    display: flex;
-    flex-direction: column;
-    padding: 0 1rem;
-    flex-grow: 1;
-}
-
-@media screen and  (min-width: 640px) {
-    main {
-        padding: 0 4rem;
-    }
-}
-
-@media screen and  (min-width: 768px) {
-    main {
-        padding: 0 8rem;
-    }
-}
-
-@media screen and  (min-width: 1024px) {
-    main {
-        padding: 0 12rem;
-    }
-}
-
-@media screen and  (min-width: 1280px) {
-    main {
-        padding: 0 14rem;
-    }
-}
-
-@media screen and  (min-width: 1536px) {
-    main {
-        padding: 0 18rem;
-    }
-}

style.css

@@ -1,342 +1,98 @@
-@import url("/layout.css");
-
-:root {
-  color-scheme: light dark;
-  --bg-color: light-dark(#fbf1c7, #282828);
-  --fg-color: light-dark(#3c3836, #ebdbb2);
-
-  --bg-color-reverse: light-dark(#3c3836, #ebdbb2);
-  --fg-color-reverse: light-dark(#fbf1c7, #282828);
-
-  --bg-color-3: light-dark(#bdae93, #665c54);
-  --bg-color-3-switch: light-dark(#665c54, #bdae93);
-  --bg-color-hard: light-dark(#f9f5d7, #1d2021);
-  --gray: light-dark(#7c6f64, #a89984);
-
-  --orange: #d65d0e;
-  --red: #cc241d;
-  --green: #98971a;
-  --yellow: #d79921;
-  --blue: #458588;
-  --purple: #b16286;
-  --aqua: #689d6a;
-
-  --orange-dim: light-dark(#af3a03, #fe8019);
-  --red-dim: light-dark(#9d0006, #fb4934);
-  --green-dim: light-dark(#79740e, #b8bb26);
-  --yellow-dim: light-dark(#b57614, #fabd2f);
-  --blue-dim: light-dark(#076678, #83a598);
-  --purple-dim: light-dark(#8f3f71, #d3869d);
-  --aqua-dim: light-dark(#427b58, #8ec07c);
-}
-
 body {
-  background-color: var(--bg-color);
-  /*container-type: inline-size;*/
+  color: #ebdbb2;
+  background-color: #282828;
+  padding-left: 15%;
+  padding-right: 15%;
   font-family: "Curier New", monospace;
-  margin: 0;
-  min-height: 100svh;
-  flex-direction: column;
-  justify-content: space-evenly;
 }
 
-* {
-  color: var(--fg-color);
-  border: none;
-  box-sizing: border-box;
-}
-
-h1,
-h2 {
-  background-color: var(--bg-color-reverse);
-  color: var(--fg-color-reverse);
+h1 {
+  background-color: #ebdbb2;
+  color: #282828;
   text-align: center;
   text-decoration: none;
 }
 
-.s1, .s2, .s3, .s4, .s5, .s6, .s7 {
-  transition: background 0.7s ease-in-out;
-  margin-bottom: 0;
-  &:hover { background-color: var(--dim-color); }
+h2 {
+  background-color: #ebdbb2;
+  color: #282828;
+  text-align: center;
+  text-decoration: none;
 }
 
-.s1 { background-color: var(--orange); --dim-color: var(--orange-dim); }
-.s2 { background-color: var(--red); --dim-color: var(--red-dim); }
-.s3 { background-color: var(--green); --dim-color: var(--green-dim); }
-.s4 { background-color: var(--yellow); --dim-color: var(--yellow-dim); }
-.s5 { background-color: var(--blue); --dim-color: var(--blue-dim); }
-.s6 { background-color: var(--purple); --dim-color: var(--purple-dim); }
-.s7 { background-color: var(--aqua); --dim-color: var(--aqua-dim); }
+a {
+  color: #ebdbb2;
+  /* background-color: #ebdbb2; */
+  /* color: #282828; */
+}
 
-.c {
+.showmore{
+  text-align: center;
+  background-color: #ebdbb2;
+  color: #282828;
+  /* border: 2px solid #ebdbb2; */
+}
+
+#s1 {
+  background-color: #d65d0e;
+}
+#s2 {
+  background-color: #cc241d;
+}
+#s3 {
+  background-color: #98971a;
+}
+#s4 {
+  background-color: #d79921;
+}
+#s5 {
+  background-color: #458588;
+}
+#s6 {
+  background-color: #b16286;
+}
+#s7 {
+  background-color: #689d6a;
+}
+
+/* #c1 { */
+/*   background-color: #fe8019; */
+/* } */
+/* #c2 { */
+/*   background-color: #fb4934; */
+/* } */
+/* #c3 { */
+/*   background-color: #b8bb26; */
+/* } */
+/* #c4 { */
+/*   background-color: #fabd2f; */
+/* } */
+/* #c5 { */
+/*   background-color: #83a598; */
+/* } */
+/* #c6 { */
+/*   background-color: #d3869b; */
+/* } */
+/* #c7 { */
+/*   background-color: #8ec807; */
+/* } */
+
+#c {
   padding: 1em;
-  background-color: var(--bg-color-3);
+  background-color: #665c54;
   text-align: center;
 }
 
 img {
-  transition: all 0.2s ease-in-out;
+  transition: all .2s ease-in-out; 
+  /* border: 2px solid #ebdbb2; */
+  /* padding: 5px; */
 }
-
 img:hover {
-  transform: scale(1.3);
+  transform: scale(2.5); 
   border: none;
-  box-shadow: 5px 4px 10px black;
+  box-shadow: 5px 4px 10px #000000;
+  /* padding: none; */
+
 }
 
-.pager {
-  margin-top: 5px;
-  margin-bottom: 10px;
-  padding: 5px;
-  color: var(--fg-color-reverse);
-  text-align: center;
-}
-
-.btn {
-  transition: background 0.4s ease-in-out;
-
-  cursor: pointer;
-  background-color: var(--bg-color-reverse);
-  color: var(--fg-color-reverse);
-  display: inline-flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  &:hover {
-    background-color: var(--bg-color-3-switch);
-  }
-}
-
-.btn.pager-btn {
-  padding: 10px 20px;
-  font-size: 16px;
-  font-weight: 900;
-  margin: 4px 2px;
-
-  &.selected {
-    background-color: var(--bg-color);
-    color: var(--fg-color);
-
-    border-color: var(--fg-color);
-    border-width: thick;
-    border-style: solid;
-  }
-}
-
-.clickable {
-  cursor: pointer;
-}
-
-.section {
-  display: none;
-
-  &.selected {
-    display: block;
-  }
-}
-
-.float-btns {
-  z-index: 10;
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  margin-bottom: 1rem;
-  margin-right: 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  justify-content: end;
-}
-
-.btn.float-btn {
-  height: 2.5rem;
-  width: 2.5rem;
-  font-size: 1.5rem;
-
-  & i {
-    color: var(--fg-color-reverse);
-  }
-}
-
-.hidden {
-  display: none !important;
-}
-
-/* Add these styles to your existing style.css */
-
-.subsection-theme-switch {
-  text-align: center;
-  margin: 10px 0;
-}
-
-.btn.subsection-theme-btn {
-  padding: 8px 16px;
-  font-size: 14px;
-  font-weight: 700;
-  margin: 0 4px;
-  border-radius: 4px;
-  
-  &.selected {
-    background-color: var(--bg-color);
-    color: var(--fg-color);
-    border: 2px solid var(--fg-color);
-  }
-  
-  &:not(.selected) {
-    opacity: 0.7;
-  }
-}
-
-.subsection-content {
-  transition: opacity 0.3s ease-in-out;
-}
-
-/* Ensure subsection content containers are properly spaced */
-.section .subsection-content + .subsection-content {
-  margin-top: 0;
-}
-
-/* Enhanced theme switch styles - Add to your style.css */
-
-.subsection-theme-switch {
-  text-align: center;
-  margin: 15px 0 20px 0;
-  opacity: 0;
-  visibility: hidden;
-  transition: all 0.3s ease-in-out;
-  transform: translateY(-10px);
-}
-
-/* Show theme switch only when section is selected */
-.section.selected .subsection-theme-switch {
-  opacity: 1;
-  visibility: visible;
-  transform: translateY(0);
-}
-
-/* Theme switch container styled like a toggle */
-.theme-toggle-container {
-  display: inline-flex;
-  background-color: var(--bg-color-3);
-  border-radius: 25px;
-  padding: 4px;
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
-  border: 2px solid var(--fg-color);
-  position: relative;
-  overflow: hidden;
-}
-
-.theme-toggle-container::before {
-  content: '';
-  position: absolute;
-  top: 4px;
-  left: 4px;
-  width: calc(50% - 4px);
-  height: calc(100% - 8px);
-  background: linear-gradient(135deg, var(--bg-color-reverse), var(--bg-color-3-switch));
-  border-radius: 20px;
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-  z-index: 1;
-}
-
-.theme-toggle-container.light-active::before {
-  transform: translateX(100%);
-}
-
-.btn.subsection-theme-btn {
-  padding: 12px 24px;
-  font-size: 14px;
-  font-weight: 700;
-  border: none;
-  background: transparent;
-  color: var(--fg-color);
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  z-index: 2;
-  border-radius: 20px;
-  min-width: 80px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  
-  &:hover {
-    background: transparent;
-  }
-  
-  &.selected {
-    color: var(--fg-color-reverse);
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-  }
-  
-  &:not(.selected) {
-    opacity: 0.7;
-  }
-  
-  /* Add subtle glow effect for selected button */
-  &.selected {
-    position: relative;
-  }
-  
-  &.selected::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: 20px;
-    background: rgba(255, 255, 255, 0.1);
-    pointer-events: none;
-  }
-}
-
-/* Animation for button text */
-.btn.subsection-theme-btn {
-  position: relative;
-  overflow: hidden;
-}
-
-.btn.subsection-theme-btn::before {
-  content: attr(data-text);
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  transition: transform 0.3s ease;
-  opacity: 0;
-}
-
-.btn.subsection-theme-btn.selected::before {
-  opacity: 1;
-  transform: translate(-50%, -50%) scale(1.05);
-}
-
-svg {
-    stroke: var(--fg-color-reverse) !important;
-}
-
-/* Responsive adjustments */
-@media screen and (max-width: 640px) {
-  .btn.subsection-theme-btn {
-    padding: 10px 20px;
-    font-size: 12px;
-    min-width: 70px;
-  }
-  
-  .theme-toggle-container {
-    padding: 3px;
-  }
-}
-
-/* Dark mode specific adjustments */
-@media (prefers-color-scheme: dark) {
-  .theme-toggle-container {
-    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
-  }
-  
-  .theme-toggle-container::before {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
-  }
-}