diff --git a/README.md b/README.md index 449f0f7..d133f78 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,8 @@ A place where to find gruvbox theme wallpapers. 2. Add the wallpapers that you have in their respective folder. 3. Make a pull request. +Please avoid the spaces in the names of the images!!! + 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 well with gruvbox's color scheme :). diff --git a/build.sh b/build.sh index 2cb42a0..a286d4c 100755 --- a/build.sh +++ b/build.sh @@ -1,4 +1,4 @@ -#!/bin/sh +#!/usr/bin/env bash # MIT License # Copyright (c) 2022 Angel Jumbo @@ -20,8 +20,7 @@ # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE # SOFTWARE. - -#not really a header, it's just the begining of the page. +# Write the header write_header(){ echo " @@ -30,96 +29,128 @@ write_header(){ Gruvbox wallpapers + -

Wallpapers for gruvbox

" > $1 +

Wallpapers for Gruvbox

" > $1 } write_section_header(){ - echo "

" >> $3 + echo "

" >> $3 echo "$2" | tr a-z A-Z >> $3 echo "

" >> $3 } write_img(){ echo " -$1" >> $2 +\"$1\"" >> $2 } -#not really a footer, it's just the end of the page. write_footer(){ - echo "

Contributions!! here.

+ echo "

Contributions!! here.

" >> $1 - } -#create index file touch ./index.html -#write the begining of the index file write_header ./index.html -#color of the section headers -#there are 7 colors and these are defined in the style.css -#with the ids: s1, s2 .... s7 color=1 +maxPerPage=8 + +declare -a sections + for subdir in ./wallpapers/* do - #for each folder in the wallpapers directory we first write a section header - write_section_header $color "${subdir##*/}" ./index.html - - echo "
" >> ./index.html - - count=1; + section="${subdir##*/}" + sections+=("$section") + write_section_header $color "$section" ./index.html + + + page=1 + img_count=0 + subhtml="${section}_page${page}.html" + touch ./$subhtml + + echo "
" >> ./index.html + + echo "
" >> ./index.html + countImgs=$(find "$subdir" -type f | wc -l) + countImgs=$((countImgs - 1)) + for i in $(seq 1 $((( $countImgs / $maxPerPage)+1))); do + echo "" >> ./index.html + done + echo "
" >> ./index.html + echo "
" >> ./index.html + echo "
" >> ./$subhtml for wallpaper in ${subdir}/* do - #write each image of each folder in the Wallpapers directory - if [ "$count" -lt 9 ]; then #limit the amount of images per section in index - write_img $wallpaper ./index.html - count=$((count+1)) - else #if the limit is exceeded then create a new html with all the images of the section - - subhtml="${subdir##*/}.html" - #count the amount of images in the folder - nimgs=$(ls "${subdir}" | wc -l) - #make a link to the new page - echo " -
show all ${nimgs} ${subdir##*/} wallpapers
" >> ./index.html - - touch "$subhtml" - - write_header $subhtml + if [ "$img_count" -ge $maxPerPage ]; then - write_section_header $color "${subdir##*/}" $subhtml + echo "
" >> ./$subhtml + page=$((page + 1)) + subhtml="${section}_page${page}.html" + touch ./$subhtml - echo "
" >> "${subhtml}" - #write all the images of the current section - for wallpaper2 in ${subdir}/* - do - write_img $wallpaper2 $subhtml - done - - echo "
" >> "${subhtml}" - - write_footer $subhtml - #break current loop and continue to the next section - break + echo "
" >> ./$subhtml + img_count=0 fi - + + write_img $wallpaper ./$subhtml + img_count=$((img_count + 1)) done - + + echo "
" >> ./$subhtml + + echo "
" >> ./index.html echo "
" >> ./index.html - color=$((color+1)) - #there are only 7 colors, if there are more than 7 folders in the wallpapers folder - #then repeat the colors + color=$((color + 1)) if [ "$color" -eq 8 ]; then color=1 fi done +echo "" >> ./index.html + + write_footer ./index.html diff --git a/style.css b/style.css index 1cd6354..8bfd709 100644 --- a/style.css +++ b/style.css @@ -63,9 +63,30 @@ img { } img:hover { - transform: scale(2.5); + transform: scale(1.5); border: none; box-shadow: 5px 4px 10px #000000; } +.pager { + margin-top: 20px; + margin-bottom: 20px; +} + +.pager button { + background-color: #ebdbb2; + border: none; + color: #282828; + padding: 10px 20px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + font-weight: 900; + margin: 4px 2px; + cursor: pointer; + border-radius: 8px; +} + + diff --git a/wallpapers/light/Demon Child.png b/wallpapers/light/DemonChild.png similarity index 100% rename from wallpapers/light/Demon Child.png rename to wallpapers/light/DemonChild.png diff --git a/wallpapers/minimalistic/Ubuntu X GNOME stripped @4x.png b/wallpapers/minimalistic/UbuntuGnome.png similarity index 100% rename from wallpapers/minimalistic/Ubuntu X GNOME stripped @4x.png rename to wallpapers/minimalistic/UbuntuGnome.png