added border types, currently two supported. Intend to add more
This commit is contained in:
parent
9d0c53cefe
commit
0cb34e45c4
31
README.md
31
README.md
|
|
@ -2,7 +2,9 @@
|
||||||
|
|
||||||
A project to learn NodeJS, ExpressJS, and whatever else along the way.
|
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
|
To start server
|
||||||
|
|
||||||
|
|
@ -24,4 +26,29 @@ Testing with
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
ab -c 5 -t 15 http://localhost:4000/submit/\{\}
|
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
|
||||||
|
|
||||||
|
* `corner-only-border` a fancy colored border that only goes around the corners. Defaults atm to pink if `borderColor` isn't supplied
|
||||||
|
|
||||||
|
|
||||||
|
## 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 |
|
|
@ -13,27 +13,49 @@
|
||||||
</head>
|
</head>
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
<% if (mpgParams.titleColor) { %>
|
<% if (mpgParams.titleColor) {
|
||||||
--font-color-title: <%=mpgParams.titleColor%>;
|
%>--font-color-title: <%=mpgParams.titleColor%>;
|
||||||
<% } %>
|
<%
|
||||||
<% if (mpgParams.sentenceColor) { %>
|
}
|
||||||
--font-color-sentence: <%=mpgParams.sentenceColor%>;
|
|
||||||
<% } %>
|
%><% if (mpgParams.sentenceColor) {
|
||||||
<% if (mpgParams.borderColor) { %>
|
%>--font-color-sentence: <%=mpgParams.sentenceColor%>;
|
||||||
--border-color: <%=mpgParams.borderColor%>;
|
<%
|
||||||
<% } %>
|
}
|
||||||
<% if (mpgParams.backgroundColor) { %>
|
|
||||||
--background-color: <%=mpgParams.backgroundColor%>;
|
%><% if (mpgParams.borderColor) {
|
||||||
<% } %>
|
%>--border-color: <%=mpgParams.borderColor%>;
|
||||||
|
<%
|
||||||
|
}
|
||||||
|
|
||||||
|
%><% if (mpgParams.backgroundColor) {
|
||||||
|
%>--background-color: <%=mpgParams.backgroundColor%>;
|
||||||
|
<%
|
||||||
|
}
|
||||||
|
|
||||||
|
%>
|
||||||
|
|
||||||
|
<% if (mpgParams.borderType) { %>
|
||||||
|
--border-type: <%=mpgParams.borderType%>;
|
||||||
|
<% } else { %>
|
||||||
|
<%}%>
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<%- include('header.ejs') -%>
|
<%- include('header.ejs') -%>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<img style="width: <%= mpgParams.imageWidth %>" src="<%= mpgParams.imageUrl %>"
|
<div class=
|
||||||
alt="An image supplied for the motivational poster">
|
<% 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> -->
|
<!-- <p>➡️<%= mpgParams.imageUrl %>⬅️</p> -->
|
||||||
<h1>
|
<h1>
|
||||||
<%= mpgParams.title %>
|
<%= mpgParams.title %>
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@ body {
|
||||||
background-color: var(--background-color, #807a00);
|
background-color: var(--background-color, #807a00);
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
/* color: var(--background-colour); */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
|
@ -30,10 +29,12 @@ img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
||||||
border-color: var(--border-color, pink);
|
position: relative;
|
||||||
|
|
||||||
|
/* border-color: var(--border-color, pink);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
border-width: 3px;
|
border-width: 3px;
|
||||||
border-style: solid;
|
border-style: solid; */
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
|
|
@ -41,3 +42,44 @@ footer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
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;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue