diff --git a/public/brush-stroke.png b/public/brush-stroke.png
new file mode 100644
index 0000000..587dfda
Binary files /dev/null and b/public/brush-stroke.png differ
diff --git a/public/helsinki-webfont.woff b/public/helsinki-webfont.woff
new file mode 100644
index 0000000..ac21e04
Binary files /dev/null and b/public/helsinki-webfont.woff differ
diff --git a/src/App.css b/src/App.css
index f4bb93a..f07c835 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,21 +1,45 @@
+:root {
+ background: url(data:image/bmp;base64,Qk1aBAAAAAAAADYAAAAoAAAABAAAAAMAAAABABgAAAAAACQAAAATCwAAEwsAAAAAAAAAAAAAYoKGcJCTdI2QZHp3X3h/cYyNeYuOZXp5RmNkZnt3c3p2U2xo);
+ background-size: cover;
+}
+
+@font-face {
+ font-family: 'helsinkiregular';
+ src: url('helsinki-webfont.woff') format('woff');
+ font-weight: normal;
+ font-style: normal;
+}
+
#root {
- max-width: 1280px;
+ position: relative;
margin: 0 auto;
- padding: 2rem;
text-align: center;
+ font-family: 'helsinkiregular', sans-serif;
}
#root::before {
z-index: -1;
content: '';
- position: absolute;
+ position: fixed;
inset: 0;
- background: gray;
- mask-image: url('brush-stroke.jpg');
+ margin: auto;
+ height: min(100vh, 50rem);
+ background-color: #FFF;
+ mask-image: url('brush-stroke.png');
mask-size: cover;
mask-repeat: no-repeat;
+ mask-position: center;
}
.prompt {
font-size: min(3rem, 10vmin);
+ text-shadow: 0 0 0.1em white, 0 0 0.25em white, 0 0 0.5em white, 0 0 1em white;
+ width: min(80vmax, calc(100vw - 2rem));
+ margin: 0 auto;
}
+
+#regenerate {
+ position: fixed;
+ bottom: 1rem;
+ left: 1rem;
+}
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 0d4d364..c3ece3e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -31,9 +31,9 @@ function App() {
return (
<>
- Your Prompt:
+ You should draw {['a','e','i','o','u'].includes(suggestion().charAt(0)) ? 'an' : 'a'}
{suggestion()}
-