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.
|
||||
|
||||
**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/\{\}
|
||||
```
|
||||
```
|
||||
|
||||
## 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>
|
||||
<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>
|
||||
|
||||
|
||||
<body>
|
||||
<%- 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 %>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue