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

This commit is contained in:
Robert McGovern 2024-03-07 13:43:32 +00:00
parent 9d0c53cefe
commit 0cb34e45c4
5 changed files with 111 additions and 20 deletions

View File

@ -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.

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

View File

@ -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>
<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 %>

View File

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