Generate wallpapers at viewport resolution.

web/src/Button.js

@@ -11,9 +11,15 @@ export default class Button extends PureComponent {
       <ColorState>
         { ({ getColor }) => (
           <button
-            className={ `${styles.button} ${this.props.className || ''}` }
+            className={ [
+              styles.button,
+              this.props.small && styles.small,
+              this.props.className,
+            ].filter(Boolean).join(' ') }
             style={{
-              color: this.props.disabled ? getColor('shade3', 'shade0') : getColor('accent4', 'shade6', 'shade7'),
+              color: this.props.disabled ? getColor('shade3', 'shade0') : (
+                this.props.small ? getColor('shade7') : getColor('accent4', 'shade6', 'shade7')
+              ),
               '--button-resting-background-color': getColor('shade1', 'shade0'),
               '--button-hover-background-color': getColor('shade2', 'shade0'),
               '--button-active-background-color': getColor('shade0'),

web/src/Button.module.css

@@ -1,5 +1,4 @@
 .button {
-  padding: var(--size-small-1) var(--size-large-1);
   border-style: solid;
   border-width: var(--border-size);
   border-radius: var(--border-radius-size);
@@ -13,6 +12,12 @@
   background-color: var(--button-resting-background-color);
 }
 
+.small {
+  padding: var(--size-small-4) var(--size-small-1);
+  border-width: var(--small-border-size);
+  font-size: var(--font-size-small);
+}
+
 .button:hover {
   background-color: var(--button-hover-background-color);
 }

web/src/Download.js

@@ -176,6 +176,21 @@ export default class DownloadOptions extends PureComponent {
                   label="“Shirts”"
                   accentSelected
                 />
+                <div
+                  className={ styles.wallpaperHint }
+                  style={{ color: getColor('shade3', 'shade7') }}
+                >
+                  Wallpapers will be rendered at the browser viewport's resolution.
+                </div>
+                { window.document.fullscreenEnabled ? (
+                  <Button
+                    className={ styles.fullscreen }
+                    small
+                    onClick={
+                      () => window.document.documentElement.requestFullscreen()
+                    }
+                  >Go fullscreen</Button>
+                ) : null }
               </fieldset>
               <fieldset style={{ borderColor: getColor('shade2', 'shade7') }}>
                 <legend style={{ color: getColor('shade5', 'shade7') }}>Other</legend>
@@ -215,7 +230,12 @@ export default class DownloadOptions extends PureComponent {
               { ({ rawState }) => (
                 <Button
                   onClick={ async () => {
-                    const zip = await generateZip(this.state, rawState.colors);
+                    const zip = await generateZip(
+                      this.state,
+                      rawState.colors,
+                      window.innerWidth * window.devicePixelRatio,
+                      window.innerHeight * window.devicePixelRatio,
+                    );
                     zip.generateAsync({ type: 'blob' }).then(contents => {
                       saveAs(contents, 'themer.zip');
                     });

web/src/Download.module.css

@@ -28,4 +28,13 @@
 .fieldsetWrapper fieldset legend {
   padding: 0 var(--size-small-2);
   margin-left: var(--size-regular);
-}
+}
+
+.wallpaperHint {
+  font-size: var(--font-size-small);
+}
+
+.wallpaperHint,
+.fullscreen {
+  margin-top: var(--size-small-2);
+}

web/src/generateZip.js

@@ -57,12 +57,25 @@ const templates = {
   xcode: { folderName: 'Xcode', render: renderXcode },
 };
 
-export default async function generateZip(selections, colors) {
+const resolutionOptions = {
+  wallpaperBlockWave: 'themer-wallpaper-block-wave-size',
+  wallpaperOctagon: 'themer-wallpaper-octagon-size',
+  wallpaperShirts: 'themer-wallpaper-shirts-size',
+  wallpaperTriangles: 'themer-wallpaper-triangles-size',
+  wallpaperTrianglify: 'themer-wallpaper-trianglify-size',
+}
+
+export default async function generateZip(selections, colors, width, height) {
   const zip = new JSZip();
   const preparedColors = prepareColors(colors, () => {});
   for (const [key, selected] of Object.entries(selections)) {
     if (selected) {
-      const files = await Promise.all(templates[key].render(preparedColors, {}));
+      const files = await Promise.all(templates[key].render(
+        preparedColors,
+        key in resolutionOptions
+          ? { [resolutionOptions[key]]: `${width}x${height}` }
+          : {},
+      ));
       files.forEach(file => {
         zip.folder(templates[key].folderName).file(file.name, file.contents);
       });

web/src/index.css

@@ -36,8 +36,11 @@ body,
   --size-small-8: calc(var(--size-small-7) * var(--size-ratio));
 
   --border-size: var(--size-small-6);
+  --small-border-size: var(--size-small-8);
   --border-radius-size: var(--size-small-3);
 
+  --font-size-small: var(--size-small-1);
+  
   --line-height: calc(1 / var(--size-ratio));
 
   height: 100%;