diff --git a/README.md b/README.md index 385c1d4..1be600c 100644 --- a/README.md +++ b/README.md @@ -10,10 +10,10 @@ To start server npm run dev ``` -Make url request to `localhost:4000` with. Not providing all the parameters will cause the render to fail. +Make url request to `localhost:4000` with. Not providing all the parameters will cause the render to fail atm. Have only added optional checking for CSS colors for now with garish defaults so I can see if something failed. ```bash -wget --output-document screenshot.png 'http://localhost:4200/submit/mpgParams?title=A Motivational Poster&sentence=something pithy&imageWidth=450px&imageUrl=https://picsum.photos/seed/1709802270038/300/300' +wget --output-document screenshot.png 'http://localhost:4200/submit/mpgParams?title=A Motivational Poster&sentence=something pithy&imageWidth=600px&imageUrl=https://dj.tdn.wf/image/400x300/282828&titleColor=blue&sentenceColor=orange&borderColor=red&backgroundColor=%23107a00' ``` This generates diff --git a/screenshots/screenshot.png b/screenshots/screenshot.png index 186951b..173e4f1 100644 Binary files a/screenshots/screenshot.png and b/screenshots/screenshot.png differ diff --git a/views/poster.ejs b/views/poster.ejs index 89a6aea..a18fb03 100644 --- a/views/poster.ejs +++ b/views/poster.ejs @@ -11,6 +11,22 @@ + <%- include('header.ejs') -%> diff --git a/www/assets/css/poster.css b/www/assets/css/poster.css index 847489a..0c778ca 100644 --- a/www/assets/css/poster.css +++ b/www/assets/css/poster.css @@ -1,8 +1,22 @@ body { - background-color: black; + background-color: var(--background-color, #807a00); display: grid; place-items: center; - color: white; + /* color: var(--background-colour); */ +} + +h1 { + /* font-size: 3rem; */ + /* text-align: center; */ + color: var(--font-color-title, pink); +} + +p { + color: var(--font-color-sentence, green); +} + +footer p { + color: powderblue; } main { @@ -15,6 +29,11 @@ img { display: block; width: 100%; margin: 0 auto; + + border-color: var(--border-color, pink); + border-radius: 10px; + border-width: 3px; + border-style: solid; } footer {