diff --git a/index.html b/index.html index 3d3b829..a8f365a 100644 --- a/index.html +++ b/index.html @@ -5,51 +5,19 @@ - +
- -

+ + +

- Save this wallpaper - | - Grab the link to share it - | - Generate a new wallpaper -

+ Save this wallpaper + Grab the link to share it + Generate a new wallpaper +
diff --git a/style.css b/style.css new file mode 100644 index 0000000..7b68fc7 --- /dev/null +++ b/style.css @@ -0,0 +1,58 @@ +body { + padding: 0; + margin: 0; + background-color: #333; + color: #ccc; + font-family: sans-serif; + min-height: 100vh; + } + canvas { + max-height: 70vh; + max-width: 80vw; + width: auto !important; + height: auto !important; + } + p, a { + font-size: 1rem; + color: #ccc; + text-align: center; + } + + #container { + margin: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 1rem; + gap: 1rem; + } + #actions { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + gap: 1rem; + } + + .rounded { + border-radius: 1rem; + } + .button { + padding: 0.6rem 0.5rem 0.4rem; + border: 2px solid #ccc; + text-decoration: none; + } + + @media (min-width: 1280px) { + canvas { + max-height: 80vh; + } + #container { + padding: 2rem; + gap: 2rem; + } + #actions { + gap: 2rem; + } + } \ No newline at end of file diff --git a/wallpaper.js b/wallpaper.js index 58051b9..568264c 100644 --- a/wallpaper.js +++ b/wallpaper.js @@ -34,10 +34,10 @@ function generateValues( width ){ hueIncrement: 20 - ( 40 * ( Math.random() ) ), ampl: ( 0.1 * wl ) + ( 0.9 * wl ) * Math.random(), offset: width * Math.random(), - offsetIncrement: width/20 + (width/10) * Math.random(), + offsetIncrement: width / 20 + ( width / 10 ) * Math.random(), sat: 10 + ( 30 * Math.random() ), light: 15 + ( 45 * Math.random() ), - lightIncrement: ( Math.random() < 0.5 ) ? ( 2 + ( 4 * Math.random() ) ) : -( 2 + ( 4 * Math.random() ) ) + lightIncrement: ( Math.random() < 0.5 ) ? ( 2 + ( 4 * Math.random() ) ) : - ( 2 + ( 4 * Math.random() ) ) }; } @@ -104,6 +104,10 @@ function draw(){ // We could push the query parameter automatically with "window.history.pushState" const shareLink = document.querySelector( 'a#share' ); shareLink.href = "?share=" + encodedValues; + // Allows to refresh the page, no matter where the website is hosted (dev, + // prod, new domain name, etc.) + const newLink = document.querySelector( 'a#new' ); + newLink.href = window.location.pathname; } /**