more polish
This commit is contained in:
Talon Poole
parent
3fbfde8567
commit
fc7eeaf04a
24
README.md
24
README.md
|
|
@ -1,15 +1,12 @@
|
|||
# gmi-web
|
||||
|
||||
|
||||
**Vision**: Provide the lowest common denominator between HTML/CSS/JS and Gemini
|
||||
**Vision**: Provide the lowest common denominator between HTML/CSS/JS and Gemini.
|
||||
|
||||
## HTML spec
|
||||
|
||||
Check out the annotated [example.html](./example.html)!
|
||||
|
||||
- [ ] accessibility
|
||||
- [ ] pre alt text
|
||||
|
||||
Due to the ambiguity of HTML several translations from Gemini exist in the wild. I propose the following standard:
|
||||
```
|
||||
<ul> ↔ *
|
||||
|
|
@ -20,7 +17,7 @@ Due to the ambiguity of HTML several translations from Gemini exist in the wild.
|
|||
<p>
|
||||
```
|
||||
|
||||
The `<a>` for a link should be presented without any parent elements. Many implementations use `<div>` to enforce "block" styling as opposed to the default "inline" which renders the link next to the previous block instead of below it. But the nested markup adds an unnecessary layer of indirection in semantics and when parsing. `<a style"display: block;">` has the same effect (gmi.css uses this).
|
||||
The `<a>` for a link should be presented without any parent elements. Many implementations use `<div>` to enforce "block" styling as opposed to the default "inline" which renders the link next to the previous block instead of below it. But the nested markup adds an unnecessary layer of indirection in semantics and when parsing. `<a style="display: block;">` has the same effect (gmi.css uses this).
|
||||
|
||||
### contenteditable
|
||||
|
||||
|
|
@ -39,7 +36,7 @@ This is important mostly for DOM development (as opposed to static HTML generati
|
|||
|
||||
### inline media
|
||||
|
||||
- [ ] TODO
|
||||
Optionally, if a link is consumable by `<img>`, `<audio>` or `<video>` you may insert the media inline. Images and video should be styled to have a max-width so they don't overflow the body. It's a good idea to also include the "controls" attribute for videos and audio. `<audio>` tags require `display: block;` just like <a>.
|
||||
|
||||
## gmi.css
|
||||
|
||||
|
|
@ -55,17 +52,12 @@ The following variables (shown with their defaults) can be customized using the
|
|||
```
|
||||
--foreground: black;
|
||||
--background: white;
|
||||
--line-height: 1.5;
|
||||
--font-size: 1.25rem;
|
||||
--line-height: 1.5;
|
||||
--text-indent: 0rem;
|
||||
--mono: Consolas, monaco, monospace;
|
||||
--serif: font-family: georgia, times, serif;
|
||||
--sans-serif: -apple-system, BlinkMacSystemFont,
|
||||
'avenir next', avenir,
|
||||
helvetica, 'helvetica neue',
|
||||
ubuntu,
|
||||
roboto, noto,
|
||||
'segoe ui', arial,
|
||||
sans-serif;
|
||||
--serif: font-family:georgia, times, serif;
|
||||
--sans-serif: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
|
||||
```
|
||||
|
||||
gmi.css will respect system dark mode preferences by inverting `--foreground` and `--background`.
|
||||
|
|
@ -74,6 +66,7 @@ gmi.css will respect system dark mode preferences by inverting `--foreground` an
|
|||
<html style="style="--foreground:#555555; --background:#9EEBCF;">
|
||||
```
|
||||
|
||||
<!-- TODO
|
||||
### gmi.js
|
||||
|
||||
Manipulate the DOM with a Gemini inspired API.
|
||||
|
|
@ -116,3 +109,4 @@ let background = window.gmi.background
|
|||
window.gmi.foreground = background
|
||||
window.gmi.background = foreground
|
||||
```
|
||||
-->
|
||||
|
|
|
|||
38
example.html
38
example.html
|
|
@ -1,7 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>gmi-web</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<meta name="color-scheme" content="dark light">
|
||||
|
|
@ -17,13 +16,41 @@
|
|||
<h2>heading 2</h2>
|
||||
<h3>heading 3</h3>
|
||||
<p>Quisquam officia expedita provident. Fugit delectus itaque autem tempora voluptatem quam. Aut iure aspernatur ut soluta eum.</p>
|
||||
<blockquote>Error mollitia non veritatis iusto ea voluptas. Consequatur quisquam occaecati inventore quibusdam facilis vel ipsa. Minima dolorum fugiat sunt deserunt et aspernatur. Est eum sit adipisci neque consequatur.</blockquote>
|
||||
<!-- DO NOT wrap this in anything. Use "display: block;" to fix layout issues (gmi.css does this) -->
|
||||
<a href="https://codeberg.org/talon/gmi-web">gmi-web</a>
|
||||
<!--
|
||||
Newlines are respected by <pre> tags however also when you are editing one in a brower
|
||||
the default behavior for "enter" will create a <br> and not a new <p>.
|
||||
-->
|
||||
<pre>
|
||||
preformatted text
|
||||
can have newlines in it
|
||||
innit?
|
||||
</pre>
|
||||
<ul>
|
||||
<li>milk</li>
|
||||
<li><br></li> <!-- empty list item -->
|
||||
<li>bread</li>
|
||||
</ul>
|
||||
<!--
|
||||
Presenting an empty line this way enables flipping contenteditable="true"
|
||||
to possibly add content to it. This is not true for a regular <br>.
|
||||
-->
|
||||
<p><br></p>
|
||||
|
||||
<!--
|
||||
Optionally, if a link is consumable by <img>, <audio> or <video> you may insert the media inline.
|
||||
Images and video should be styled to have a max-width so they don't overflow the body.
|
||||
It's a good idea to also include the "controls" attribute for videos and audio.
|
||||
<audio> tags require "display: block;" just like <a>.
|
||||
-->
|
||||
<img src="https://www.learningcontainer.com/wp-content/uploads/2020/08/Large-Sample-png-Image-download-for-Testing.png"></img>
|
||||
<video controls src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4"></video>
|
||||
<audio controls src="https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3"></audio>
|
||||
|
||||
<!-- The remaining annotations pertain mostly to DOM development. -->
|
||||
<p><br></p>
|
||||
<!--
|
||||
While Gemini does not support newlines on a regular text line when editing a <p> tag in the browser
|
||||
the default behavior for "enter" will create a <br> and not a new <p>.
|
||||
|
|
@ -40,7 +67,6 @@
|
|||
<div>Voluptates eveniet ut dolorum voluptatem repellendus perspiciatis eius. Voluptatem libero repudiandae et asperiores id. Cum harum iste nihil in ratione molestiae eaque reiciendis. Est repellat facere aliquid et dolorem quo maiores nesciunt.</div>
|
||||
<div>Error mollitia non veritatis iusto ea voluptas. Consequatur quisquam occaecati inventore quibusdam facilis vel ipsa. Minima dolorum fugiat sunt deserunt et aspernatur. Est eum sit adipisci neque consequatur.</div>
|
||||
</blockquote>
|
||||
<p><br></p>
|
||||
<!--
|
||||
Newlines are respected by <pre> tags however also when you are editing one in a brower
|
||||
the default behavior for "enter" will create a <br> and not a new <p>.
|
||||
|
|
@ -49,14 +75,8 @@
|
|||
preformatted text
|
||||
can have newlines in it
|
||||
<br>
|
||||
innit?
|
||||
and sometimes it does this :/
|
||||
</pre>
|
||||
<p><br></p>
|
||||
<ul>
|
||||
<li>milk</li>
|
||||
<li><br></li> <!-- empty list item -->
|
||||
<li>bread</li>
|
||||
</ul>
|
||||
</body>
|
||||
<!-- <script src="gmi.min.js></script> -->
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue