loredarchives/LoredMarkdown
Archived
1
0
Fork 0
Code Issues Pull Requests Activity

Compare commits

merge into: loredarchives:13-lib-banner-object-api
Branches Tags
loredarchives:dev loredarchives:renovate/major-vitest-monorepo loredarchives:renovate/eslint-monorepo loredarchives:renovate/major-commitlint-monorepo loredarchives:renovate/vercel-32.x-lockfile loredarchives:renovate/turbo-monorepo loredarchives:renovate/changesets-cli-2.x-lockfile loredarchives:renovate/commitlint-monorepo loredarchives:renovate/vercel-node-3.x-lockfile loredarchives:renovate/husky-9.x loredarchives:13-lib-banner-object-api loredarchives:renovate/actions-cache-4.x loredarchives:changeset-release/main loredarchives:main
...
pull from: loredarchives:renovate/major-commitlint-monorepo
Branches Tags
loredarchives:renovate/major-vitest-monorepo loredarchives:renovate/eslint-monorepo loredarchives:renovate/major-commitlint-monorepo loredarchives:renovate/vercel-32.x-lockfile loredarchives:renovate/turbo-monorepo loredarchives:renovate/changesets-cli-2.x-lockfile loredarchives:renovate/commitlint-monorepo loredarchives:renovate/vercel-node-3.x-lockfile loredarchives:renovate/husky-9.x loredarchives:13-lib-banner-object-api loredarchives:renovate/actions-cache-4.x loredarchives:changeset-release/main loredarchives:dev loredarchives:main

9 Commits
13-lib-ban ... renovate/m

Author SHA1 Message Date
renovate[bot]
a060d19625 chore(deps): update commitlint monorepo to v19 2024-04-11 16:29:00 +00:00
sxpphickat
c19f4dd646 Merge pull request #18 from LoredDev/10-frontend-form-control 
feat(frontend): form html and css

fim do hiatus
 2023-12-26 19:02:56 -03:00
sxpphickat
31bca044ea fix(front): 🐛 wrapping repo infos 2023-12-07 18:33:04 -03:00
sxpphickat
9d17f06732 fix(front): 🐛 aligning items better 2023-12-06 09:35:07 -03:00
sxpphickat
edd8c7edd1 fix(front): 🐛 layout and background input sizes 2023-12-01 14:20:15 -03:00
sxpphickat
157cc4bb7d feat(front): ✨ responsive design 2023-12-01 12:42:25 -03:00
sxpphickat
0ad8ba8ef8 refactor(front): ♻️ change main design 2023-12-01 10:35:17 -03:00
sxpphickat
14a32d750c feat(front): ✨ style.css base 2023-11-28 21:04:21 -03:00
sxpphickat
71bfabb32f feat(front): ✨ index.html base 2023-11-28 21:02:43 -03:00
4 changed files with 292 additions and 15 deletions
Expand all files Collapse all files

78
index.html
View File

@@ -5,14 +5,84 @@
<title></title> <title></title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet"> <link href="src/css/style.css" rel="stylesheet">
<!-- auto-refresh in dev --> <!-- auto-refresh in dev -->
<!-- <script type="text/javascript" src="https://livejs.com/live.js"></script> --> <script type="text/javascript" src="https://livejs.com/live.js"></script>
<script type="module" src="./packages/banners/src/index.js"></script> <script type="module" src="./packages/banners/src/index.js"></script>
</head> </head>
<body> <body>
<h1> Hello, world </h1> <div class="container">
<div class="banner">
</div>
<div class="centralize-verticaly">
<div class="options">
<h1>Lored's Markdown</h1>
<form class="options-grid-container">
<input class="txt-input" type="text" id="title" name="banner-title" placeholder="Title">
<input class="txt-input" type="text" id="subtitle" name="banner-subtitle" placeholder="Subtitle">
<input class="txt-input" type="url" id="icon" name="icon" placeholder="Icon name or link">
<input class="txt-input" type="url" id="bg-img-link" name="bg-img-link" placeholder="Background Image link">
<div class="style-layout">
<label for="layout">Layout</label>
<select class="txt-input" name="layout" id="layout">
<option value="horizontal">Horizontal</option>
<option value="vertical">Vertical</option>
</select>
<div class="center-txt-vertically">
<input type="checkbox" id="rtl" name="rtl">
<label for="rtl">Right-to-left</label>
</div>
</div>
<div class="style-layout">
<label for="bg-color">Background</label>
<input type="color" id="bg-color" name="bg-color">
</div>
<div class="repo-wrapper">
<label for="repo-url">Repo-Info</label>
<input class="txt-input span-all" type="url" name="repo-url" id="repo-url" placeholder="Repository url">
<div class="list-of-items">
<label for="show-info">Show info:</label>
<div class="center-txt-vertically">
<input type="checkbox" id="issues" value="issues" name="show-info">
<label for="issues">Issues</label><br>
</div>
<div class="center-txt-vertically">
<input type="checkbox" id="prs" value="prs" name="show-info">
<label for="prs">Pull requests</label><br>
</div>
<div class="center-txt-vertically">
<input type="checkbox" id="contributors" value="contributors" name="show-info">
<label for="contributors">Contributors</label><br>
</div>
<br>
</div>
</div>
<div class="list-of-items">
<label for="deco">Event decoration:</label>
<div class="center-txt-vertically">
<input type="radio" id="halloween" value="halloween" name="deco">
<label for="halloween">Halloween</label><br>
</div>
<div class="center-txt-vertically">
<input type="radio" id="christmas" value="christmas" name="deco">
<label for="christmas">Christmas</label><br>
</div>
<div class="center-txt-vertically">
<input type="radio" id="easter" value="easter" name="deco">
<label for="easter">Easter</label><br>
</div>
<div class="center-txt-vertically">
<input type="radio" id="pride" value="pride" name="deco">
<label for="pride">Pride month</label><br>
</div>
</div>
</form>
</div>
</div>
</div>
</body> </body>
</html> </html>

4
package.json
View File

@@ -17,8 +17,8 @@
"license": "ISC", "license": "ISC",
"devDependencies": { "devDependencies": {
"@changesets/cli": "^2.26.2", "@changesets/cli": "^2.26.2",
"@commitlint/config-conventional": "^18.4.3", "@commitlint/config-conventional": "^19.0.0",
"@commitlint/types": "^18.4.3", "@commitlint/types": "^19.0.0",
"@vercel/node": "^3.0.11", "@vercel/node": "^3.0.11",
"eslint": "^8.54.0", "eslint": "^8.54.0",
"husky": "^8.0.0", "husky": "^8.0.0",

31
pnpm-lock.yaml generated
View File

@@ -16,11 +16,11 @@ importers:
specifier: ^2.26.2 specifier: ^2.26.2
version: 2.26.2 version: 2.26.2
'@commitlint/config-conventional': '@commitlint/config-conventional':
specifier: ^18.4.3 specifier: ^19.0.0
version: 18.4.3 version: 19.1.0
'@commitlint/types': '@commitlint/types':
specifier: ^18.4.3 specifier: ^19.0.0
version: 18.4.3 version: 19.0.3
'@vercel/node': '@vercel/node':
specifier: ^3.0.11 specifier: ^3.0.11
version: 3.0.11 version: 3.0.11
@@ -268,18 +268,20 @@ packages:
prettier: 2.8.8 prettier: 2.8.8
dev: true dev: true
/@commitlint/config-conventional@18.4.3: /@commitlint/config-conventional@19.1.0:
resolution: {integrity: sha512-729eRRaNta7JZF07qf6SAGSghoDEp9mH7yHU0m7ff0q89W97wDrWCyZ3yoV3mcQJwbhlmVmZPTkPcm7qiAu8WA==} resolution: {integrity: sha512-KIKD2xrp6Uuk+dcZVj3++MlzIr/Su6zLE8crEDQCZNvWHNQSeeGbzOlNtsR32TUy6H3JbP7nWgduAHCaiGQ6EA==}
engines: {node: '>=v18'} engines: {node: '>=v18'}
dependencies: dependencies:
'@commitlint/types': 19.0.3
conventional-changelog-conventionalcommits: 7.0.2 conventional-changelog-conventionalcommits: 7.0.2
dev: true dev: true
/@commitlint/types@18.4.3: /@commitlint/types@19.0.3:
resolution: {integrity: sha512-cvzx+vtY/I2hVBZHCLrpoh+sA0hfuzHwDc+BAFPimYLjJkpHnghQM+z8W/KyLGkygJh3BtI3xXXq+dKjnSWEmA==} resolution: {integrity: sha512-tpyc+7i6bPG9mvaBbtKUeghfyZSDgWquIDfMgqYtTbmZ9Y9VzEm2je9EYcQ0aoz5o7NvGS+rcDec93yO08MHYA==}
engines: {node: '>=v18'} engines: {node: '>=v18'}
dependencies: dependencies:
chalk: 4.1.2 '@types/conventional-commits-parser': 5.0.0
chalk: 5.3.0
dev: true dev: true
/@cspotcode/source-map-support@0.8.1: /@cspotcode/source-map-support@0.8.1:
@@ -849,6 +851,12 @@ packages:
resolution: {integrity: sha512-qQR1dr2rGIHYlJulmr8Ioq3De0Le9E4MJ5AiaeAETJJpndT1uUNHsGFK3L/UIu+rbkQSdj8J/w2bCsBZc/Y5fQ==} resolution: {integrity: sha512-qQR1dr2rGIHYlJulmr8Ioq3De0Le9E4MJ5AiaeAETJJpndT1uUNHsGFK3L/UIu+rbkQSdj8J/w2bCsBZc/Y5fQ==}
dev: true dev: true
/@types/conventional-commits-parser@5.0.0:
resolution: {integrity: sha512-loB369iXNmAZglwWATL+WRe+CRMmmBPtpolYzIebFaX4YA3x+BEfLqhUAV9WanycKI3TG1IMr5bMJDajDKLlUQ==}
dependencies:
'@types/node': 20.10.0
dev: true
/@types/is-ci@3.0.4: /@types/is-ci@3.0.4:
resolution: {integrity: sha512-AkCYCmwlXeuH89DagDCzvCAyltI2v9lh3U3DqSg/GrBYoReAaWwxfXCqMx9UV5MajLZ4ZFwZzV4cABGIxk2XRw==} resolution: {integrity: sha512-AkCYCmwlXeuH89DagDCzvCAyltI2v9lh3U3DqSg/GrBYoReAaWwxfXCqMx9UV5MajLZ4ZFwZzV4cABGIxk2XRw==}
dependencies: dependencies:
@@ -1664,6 +1672,11 @@ packages:
ansi-styles: 4.3.0 ansi-styles: 4.3.0
supports-color: 7.2.0 supports-color: 7.2.0
/chalk@5.3.0:
resolution: {integrity: sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==}
engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
dev: true
/chardet@0.7.0: /chardet@0.7.0:
resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==} resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
dev: true dev: true

194
src/css/style.css Normal file
View File

@@ -0,0 +1,194 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
:root {
--banner-color: #b1b1b1;
--banner-bgc: #000;
--options-bgc: #0a0a0a;
--border-color: #404040;
--dark-txt-color: #404040;
--light-txt-color: #ffffff;
}
html, body {
font-family: 'Roboto', sans-serif;
height: 100%;
margin: 0;
padding: 0;
}
body {
min-height: 100%;
}
.container {
background-color: var(--banner-bgc);
display: grid;
height: 100%;
grid-template-columns: repeat(2, 50%);
}
.banner {
background-color: var(--banner-color);
height: 100px;
width: 300px;
align-self: center;
justify-self: center;
border-radius: 20px;
box-shadow: 0px 10px 20px 10px rgb(58, 58, 58);
margin: 40px;
}
.options {
/* background-color: var(--options-bgc); */
color: white;
padding: 70px;
overflow: auto;
overflow-x: hidden;
}
input::placeholder {
color: var(--dark-txt-color);
text-shadow: none;
}
label {
color: var(--dark-txt-color);
font-size: 1.5rem;
align-self: center;
}
h1 {
font-size: 2.5rem;
}
h1, input {
text-shadow: 0 0 5px #fff;
}
.txt-input, select, .style-layout > input[type="color"] {
background: var(--options-bgc);
border: solid 1px var(--border-color);
height: 3rem;
border-radius: 6px;
width: 20rem;
padding-left: 1rem;
padding-right: 1rem;
font-size: 1.5rem;
color: var(--light-txt-color);
font-weight: 400;
transition: all .2s ease-in-out;
box-sizing: border-box;
}
input:focus, select:focus, .style-layout > input[type="color"]:focus {
outline: none !important;
border: solid 1px #a3a3a3 ;
box-shadow: 0px 0px 0px 4px #3f3f46;
}
.options-grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
align-items: start;
row-gap: 30px;
}
#layout {
color: var(--dark-txt-color);
}
input[type="radio"], input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
margin: 0;
background-color: #3c3c3c;
font: inherit;
color: currentColor;
width:2rem;
height: 2rem;
border-radius: 50%;
}
input[type="radio"]:focus, input[type="checkbox"]:focus {
border-style: none;
box-shadow: none;
}
input[type="radio"]:checked, input[type="checkbox"]:checked {
background-color: #fff;
transition: all .5s ease-out;
box-shadow: 0 0 10px 5px rgb(100, 100, 100);
}
input[type="radio"]:not(:checked), input[type="checkbox"]:not(:checked) {
transition: all .5s ease-out;
box-shadow: none;
}
.center-txt-vertically {
display: flex;
align-items: center;
gap: 10px;
}
.list-of-items {
display: grid;
align-items: start;
justify-content: start;
gap: 10px;
}
.span-all {
grid-column: 1 / -1;
}
#bg-img-link {
align-self: center;
}
.style-layout, .repo-wrapper {
display: grid;
gap: 15px;
}
.style-layout > input[type="color"] {
padding: 0;
}
@media only screen and (max-width: 800px) {
.container {
grid-template-columns: 100%;
}
.options-grid-container {
justify-items: center;
}
.options {
display: grid;
justify-content: center;
overflow-x: hidden;
}
}
.centralize-verticaly {
display: grid;
align-content: center;
background-color: var(--options-bgc);
overflow: auto;
overflow-x: hidden;
}
.repo-wrapper {
border: solid 1px var(--dark-txt-color);
border-radius: 6px;
padding: 1rem;
width: 20rem;
box-sizing: border-box;
}
.repo-wrapper > input {
width: 100%;
}