Skip to content

Commit

Permalink
Format fend-web
Browse files Browse the repository at this point in the history
  • Loading branch information
printfn committed Mar 1, 2024
1 parent 2ca3d0d commit 4a967bf
Show file tree
Hide file tree
Showing 9 changed files with 278 additions and 234 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
/telegram-bot/node_modules/
/telegram-bot/package-lock.json

/web/node_modules/
/web/documentation/
/web/fend-icon-128.png
/web/pkg/
Expand Down
1 change: 1 addition & 0 deletions web/.prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
*.html
3 changes: 3 additions & 0 deletions web/build.sh
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
set -euo pipefail
cd "$(dirname "$0")"

npm ci
npm run check

(cd ../wasm && wasm-pack build --target no-modules --out-dir ../web/pkg)

convert -resize "128x128" ../icon/icon.svg fend-icon-128.png
Expand Down
24 changes: 12 additions & 12 deletions web/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,17 @@
</head>
<body>
<main>
<h1 id="about">
<a rel="noreferrer noopener" target="_blank" href="https://printfn.github.io/fend/documentation/">fend</a> is an arbitrary-precision unit-aware calculator.
</h1>
<div id="input">
<div id="text">
<textarea autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" id="input-text" rows="1" autofocus></textarea>
</div>
<p id="input-hint"></p>
</div>
<div id="output">
<p id="examples">&#10;<b>examples:</b>
<h1 id="about">
<a rel="noreferrer noopener" target="_blank" href="https://printfn.github.io/fend/documentation/">fend</a> is an arbitrary-precision unit-aware calculator.
</h1>
<div id="input">
<div id="text">
<textarea autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" id="input-text" rows="1" autofocus></textarea>
</div>
<p id="input-hint"></p>
</div>
<div id="output">
<p id="examples">&#10;<b>examples:</b>
> 5'10" to cm
177.8 cm

Expand All @@ -38,7 +38,7 @@ <h1 id="about">

> 1 lightyear to parsecs
approx. 0.3066013937 parsecs&#10;&#10;<b>give it a go:</b>&#10;</p>
</div>
</div>
</main>
<script src="widget.js"></script>
</body>
Expand Down
31 changes: 31 additions & 0 deletions web/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

29 changes: 29 additions & 0 deletions web/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{
"name": "fend-web",
"private": true,
"version": "0.0.0",
"description": "",
"main": "widget.js",
"scripts": {
"format": "prettier --write .",
"check": "prettier --check ."
},
"repository": {
"type": "git",
"url": "git+https://github.com/printfn/fend.git"
},
"author": "printfn",
"license": "GPL-3.0-or-later",
"bugs": {
"url": "https://github.com/printfn/fend/issues"
},
"homepage": "https://github.com/printfn/fend#readme",
"devDependencies": {
"prettier": "^3.2.5"
},
"prettier": {
"useTabs": true,
"singleQuote": true,
"arrowParens": "avoid"
}
}
106 changes: 53 additions & 53 deletions web/widget.css
Original file line number Diff line number Diff line change
@@ -1,95 +1,95 @@
* {
background: transparent;
color: inherit;
border: none;
font-weight: inherit;
font-size: inherit;
font-style: inherit;
margin: 0;
padding: 0;
background: transparent;
color: inherit;
border: none;
font-weight: inherit;
font-size: inherit;
font-style: inherit;
margin: 0;
padding: 0;
}

body {
background: hsl(30, 15%, 90%);
font: 16px/150% monospace;
color: hsl(30, 25%, 10%);
margin: 0;
background: hsl(30, 15%, 90%);
font: 16px/150% monospace;
color: hsl(30, 25%, 10%);
margin: 0;
}

a {
color: hsl(90, 70%, 30%);
color: hsl(90, 70%, 30%);
}

b {
color: hsl(30, 25%, 40%);
color: hsl(30, 25%, 40%);
}

@media (prefers-color-scheme: dark) {
a {
color: hsl(90, 70%, 70%);
}
a {
color: hsl(90, 70%, 70%);
}

b {
color: hsl(30, 25%, 70%);
}
b {
color: hsl(30, 25%, 70%);
}

body {
background: hsl(30, 25%, 10%);
color: hsl(30, 15%, 90%);
}
body {
background: hsl(30, 25%, 10%);
color: hsl(30, 15%, 90%);
}
}

main {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto auto;
max-width: 60ch;
padding: 3ch;
margin: auto;
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto auto;
max-width: 60ch;
padding: 3ch;
margin: auto;
}

main > * {
grid-column: 1/3;
grid-column: 1/3;
}

#output {
grid-row: 2;
grid-row: 2;
}
#output p {
white-space: pre-wrap;
white-space: pre-wrap;
}

#input {
display: grid;
grid-template-columns: 2ch 1fr;
grid-template-rows: auto auto;
grid-row: 3;
display: grid;
grid-template-columns: 2ch 1fr;
grid-template-rows: auto auto;
grid-row: 3;
}
#input p {
grid-column: 1/3;
grid-row: 2;
grid-column: 1/3;
grid-row: 2;
}
#input:before {
content: ">";
content: '>';
}
#input #text {
display: grid;
grid-column: 2;
grid-row: 1;
display: grid;
grid-column: 2;
grid-row: 1;
}
#input #text textarea {
line-height: inherit;
font-family: inherit;
outline: none;
overflow: hidden;
resize: none;
line-height: inherit;
font-family: inherit;
outline: none;
overflow: hidden;
resize: none;
}
#input #text:after {
content: attr(data-replicated-value) " ";
visibility: hidden;
content: attr(data-replicated-value) ' ';
visibility: hidden;
}
#input #text textarea,
#input #text:after {
grid-area: 1 / 1 / 2 / 2;
white-space: pre-wrap;
}
grid-area: 1 / 1 / 2 / 2;
white-space: pre-wrap;
}
14 changes: 7 additions & 7 deletions web/widget.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@
</head>
<body>
<main>
<div id="input">
<div id="text">
<textarea autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" rows="1" id="input-text" autofocus></textarea>
</div>
<p id="input-hint"></p>
</div>
<div id="output"></div>
<div id="input">
<div id="text">
<textarea autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" rows="1" id="input-text" autofocus></textarea>
</div>
<p id="input-hint"></p>
</div>
<div id="output"></div>
</main>
<script src="widget.js"></script>
</body>
Expand Down
Loading

0 comments on commit 4a967bf

Please sign in to comment.