added border types, currently two supported. Intend to add more

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
 
@@ -25,3 +27,28 @@ Testing with
 ```bash
 ab -c 5 -t 15 http://localhost:4000/submit/\{\}
 ```
+
+## 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.

views/poster.ejs

@@ -13,18 +13,32 @@
 </head>
 <style>
     :root {
-        <% if (mpgParams.titleColor) { %>
-            --font-color-title: <%=mpgParams.titleColor%>;
-        <% } %>
-        <% if (mpgParams.sentenceColor) { %>
-            --font-color-sentence: <%=mpgParams.sentenceColor%>;
-        <% } %>
-        <% if (mpgParams.borderColor) { %>
-            --border-color: <%=mpgParams.borderColor%>;
-        <% } %>
-        <% if (mpgParams.backgroundColor) { %>
-            --background-color: <%=mpgParams.backgroundColor%>;
-        <% } %>
+        <% if (mpgParams.titleColor) {
+            %>--font-color-title: <%=mpgParams.titleColor%>;
+            <%
+        }
+
+        %><% if (mpgParams.sentenceColor) {
+            %>--font-color-sentence: <%=mpgParams.sentenceColor%>;
+            <%
+        }
+
+        %><% if (mpgParams.borderColor) {
+            %>--border-color: <%=mpgParams.borderColor%>;
+            <%
+        }
+
+        %><% if (mpgParams.backgroundColor) {
+            %>--background-color: <%=mpgParams.backgroundColor%>;
+            <%
+        }
+
+        %>
+
+        <% if (mpgParams.borderType) { %>
+            --border-type: <%=mpgParams.borderType%>;
+        <% } else { %>
+        <%}%>
     }
 </style>
   
@@ -32,8 +46,16 @@
     <%- include('header.ejs') -%>
 
         <main>
-            <img style="width: <%= mpgParams.imageWidth %>" src="<%= mpgParams.imageUrl %>"
-                alt="An image supplied for the motivational poster">
+            <div class=
+            <% if (mpgParams.borderType) { %>
+                "<%=mpgParams.borderType%>"
+            <% } else { %>
+                ""
+            <%}%> >
+
+                <img style="width: <%= mpgParams.imageWidth %>" src="<%= mpgParams.imageUrl %>"
+                    alt="An image supplied for the motivational poster">
+            </div>
             <!-- <p>➡️<%= mpgParams.imageUrl %>⬅️</p> -->
             <h1>
                 <%= mpgParams.title %>

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;
+}