diff --git a/README.md b/README.md index 1be600c..03d3ca9 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,9 @@ A project to learn NodeJS, ExpressJS, and whatever else along the way. -**THIS IS ALL WORK IN PROGRESS AND SUBJECT TO CHANGE** +> [!CAUTION] +> **THIS IS ALL WORK IN PROGRESS AND SUBJECT TO CHANGE** + To start server @@ -24,4 +26,29 @@ Testing with ```bash ab -c 5 -t 15 http://localhost:4000/submit/\{\} -``` \ No newline at end of file +``` + +## Supported Arguments + +Arguments with :bangbang: are currently required + +* `title` string that will be used for the H1 under :bangbang: +* `sentence` string that will be presented below the H1 :bangbang: +* `imageURL` url of the image to use :bangbang: +* `imageWidth` px value to constrain the image size :bangbang: +* `titleColor` either the word name of a color that css supports, or the hex value (__note__ if using hex then you need to encode the # as `%23`) +* `sentenceColor` either the word name of a color that css supports, or the hex value (__note__ if using hex then you need to encode the # as `%23`) +* `backgroundColor` either the word name of a color that css supports, or the hex value (__note__ if using hex then you need to encode the # as `%23`) +* `borderColor` either the word name of a color that css supports, or the hex value (__note__ if using hex then you need to encode the # as `%23`). This will only be used in certain border types. +* `borderType` name of the border to use. If not supplied no border is added. + +Currently supported border types: + +* `basic-border` just a simple colored bordered +![](screenshots/corner-only-border.png) +* `corner-only-border` a fancy colored border that only goes around the corners. Defaults atm to pink if `borderColor` isn't supplied +![](screenshots/basic-border-no-color-specified.png) + +## Thanks + +* Ana Tudor for the [corner-only-border](https://codepen.io/thebabydino/pen/QWMaPQb) codepen. \ No newline at end of file diff --git a/screenshots/basic-border-no-color-specified.png b/screenshots/basic-border-no-color-specified.png new file mode 100644 index 0000000..7b747a1 Binary files /dev/null and b/screenshots/basic-border-no-color-specified.png differ diff --git a/screenshots/corner-only-border.png b/screenshots/corner-only-border.png new file mode 100644 index 0000000..d720651 Binary files /dev/null and b/screenshots/corner-only-border.png differ diff --git a/views/poster.ejs b/views/poster.ejs index a18fb03..72f1239 100644 --- a/views/poster.ejs +++ b/views/poster.ejs @@ -13,27 +13,49 @@ - + <%- include('header.ejs') -%>
- An image supplied for the motivational poster +
+ "<%=mpgParams.borderType%>" + <% } else { %> + "" + <%}%> > + + An image supplied for the motivational poster +

<%= mpgParams.title %> diff --git a/www/assets/css/poster.css b/www/assets/css/poster.css index 0c778ca..9809ac9 100644 --- a/www/assets/css/poster.css +++ b/www/assets/css/poster.css @@ -2,7 +2,6 @@ body { background-color: var(--background-color, #807a00); display: grid; place-items: center; - /* color: var(--background-colour); */ } h1 { @@ -30,10 +29,12 @@ img { width: 100%; margin: 0 auto; - border-color: var(--border-color, pink); + position: relative; + + /* border-color: var(--border-color, pink); border-radius: 10px; border-width: 3px; - border-style: solid; + border-style: solid; */ } footer { @@ -41,3 +42,44 @@ footer { width: 100%; text-align: center; } + +.corner-only-border { + --b: 0.5em; /* border width */ + --c: 5em; /* corner size */ + --r: 2em; /* corner rounding */ + + position: relative; + margin: 1em auto; + border: solid var(--b) transparent; + padding: 1em; + + &::before { + position: absolute; + z-index: -1; + inset: calc(-1 * var(--b)); + border: inherit; + border-radius: var(--r); + background: linear-gradient(orange, deeppink, purple) border-box; + --corner: conic-gradient( + from -90deg at var(--c) var(--c), + red 25%, + #0000 0 + ) + 0 0 / calc(100% - var(--c)) calc(100% - var(--c)) border-box; + --inner: conic-gradient(red 0 0) padding-box; + -webkit-mask: var(--corner), var(--inner); + -webkit-mask-composite: source-out; + mask: + var(--corner) subtract, + var(--inner); + content: ""; + } +} + +.basic-border { + border-color: var(--border-color, pink); + border-radius: 10px; + border-width: 3px; + border-style: solid; + padding: 1rem; +}