html-css: initial commit

2024-12-18 16:22:30 +01:00 · 2024-06-12 09:14:30 +03:00 · 2024-06-12 09:14:30 +03:00 · b4f8fd5c5f
commit b4f8fd5c5f
parent ccb8613efb
3 changed files with 180 additions and 0 deletions
--- a/html-css/README.md
+++ b/html-css/README.md
@ -0,0 +1,42 @@
+# HTML & CSS tricks for future reference
+
+<!-- editorconfig-checker-disable -->
+<!-- prettier-ignore-start -->
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+- [Emmet](#emmet)
+  - [html](#html)
+  - [css](#css)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+<!-- prettier-ignore-end -->
+<!-- editorconfig-checker-enable -->
+
+## Emmet
+
+Emmet are nice shortcuts for HTML integrated in VSCod{e,ium}, just type them and press enter/return and code appears!
+
+### html
+
+- https://docs.emmet.io/abbreviations/
+- https://github.com/emmetio/emmet/tree/v2.4.6/src/snippets
+- ! - boilerplate html with head, body and all
+- link:css - stylesheet link
+- h1 - header 1
+- p - paragraph tags
+- code - code block
+- pre - preformatted code
+- lorem10 - or other number generates that much of Lorem Ipsum
+- ul - generates an unordered list
+- li\*4 - generates 4 list items
+- hr - the horizontal line
+- br - linebreak
+
+### css
+
+At the time of writing I didn't get anything that useful out of Emmet CSS so the `style.css` is work of prior copy-pasting to become where I copy-paste from!
+
+- https://github.com/emmetio/emmet/blob/v2.4.6/src/snippets/css.json
--- a/html-css/index.html
+++ b/html-css/index.html
@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lorem.</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <h1>Lorem, ipsum dolor.</h1>
+    <p>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem eius
+      labore debitis asperiores consequatur porro, laboriosam culpa optio quo
+      quaerat veritatis maxime obcaecati possimus vel corporis nemo facilis
+      provident molestiae nulla. Nemo, soluta nisi laboriosam magnam
+      doloremque dolorem ab explicabo delectus omnis in tempore. Rem
+      accusantium natus nisi ullam obcaecati. Maiores dolorum natus
+      repellendus. Tempora voluptates optio sint veritatis debitis
+      necessitatibus deleniti aspernatur, error, fuga est enim, excepturi
+      inventore nisi laborum explicabo animi laboriosam iusto dignissimos
+      impedit dolorum magni officia! Ipsum autem odio tempora temporibus minus
+      sed expedita, quas quidem aperiam voluptates iste quod vitae maiores
+      recusandae nam! Cum, aliquam!
+    </p>
+
+    <hr />
+
+    <h2>A list? Yes.</h2>
+
+    <ul>
+      <li>Meow</li>
+      <li>Meow</li>
+      <li>Choco</li>
+      <li>Chow</li>
+    </ul>
+
+    <hr />
+
+    <h2>Code and pre</h2>
+
+    <p>This paragraph <code>contains inline code</code>.</p>
+    <pre>
+    #!/usr/bin/env bash
+    echo "Hello World!"
+    echo "This is a code block!"
+</pre
+    >
+  </body>
+</html>
--- a/html-css/style.css
+++ b/html-css/style.css
@ -0,0 +1,89 @@
+/* Declare our style as capable of both styles, defaulting to the former if browser has no configuration. At this point we have a dark theme!
+Also variables will make things easier later on */
+:root {
+  /* FIXME TODO WARNING PROBABLY INACCESSIBLE BAD IN REAL CODE */
+  zoom: 100%;
+  /* see above */
+  color-scheme: dark light;
+  --fonts-sans-serif: ui-sans-serif, "Liberation Sans", "Arimo", "Arial",
+    sans-serif "Noto Emoji", "Noto Color Emoji", emoji;
+  --fonts-serif: ui-serif, "Liberation Serif", Tinos, "Times New Roman", serif,
+    "Noto Emoji", "Noto Color Emoji", emoji;
+  --fonts-mono: ui-monospace, "Liberation Mono", Cousine, "Courier New",
+    monospace, "Noto Emoji", "Noto Color Emoji", emoji;
+}
+
+/* Call the variables through `var(--varnamehere)` by the way */
+
+/* Magic we want for everything. Fonts, breaking words is allowed, but do try to hyphenate */
+* {
+  overflow-wrap: break-word;
+  /* begin https://clagnut.com/blog/2395/ */
+  hyphens: auto;
+  hyphenate-limit-chars: 6 3 3;
+  hyphenate-limit-lines: 2;
+  hyphenate-limit-last: always;
+  hyphenate-limit-zone: 8%;
+  /* end https://clagnut.com/blog/2395/ */
+  /* Experimental, but neat to stop or force emojis (outside of the font list) */
+  font-variant-emoji: text;
+  /* Responsiveness/braille (max-width 78ch), WCAG (margin-bottom, line-height, letter-spacing, word-spacing*/
+  width: 100%;
+  margin-top: 0;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 2;
+  max-width: 78ch;
+  line-height: 1.5;
+  margin-bottom: 2;
+  letter-spacing: 0.12;
+  word-spacing: 0.16;
+  font-family: var(--fonts-sans-serif);
+}
+
+/* We could have different font for headings for constrast and fanciness? */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--fonts-serif);
+}
+
+/* I and my Firefox prefer underlined links and I want to subtly draw attention to homographs like l and I, O and 0, etc. */
+a {
+  text-decoration: underline;
+  font-family: var(--fonts-serif);
+}
+
+/* Monospace fonts for code, keeping code a bit smaller than normal so it will not be bigger */
+code,
+pre {
+  font-family: var(--fonts-mono);
+}
+
+code {
+  font-size: 0.9em;
+}
+
+/* Just a note to self on managing list-styles or specifying more of what list is edited */
+ul li {
+  list-style-type: none;
+}
+
+/* Magic for light and dark color schemes. I try to keep this on bottom for clarity and it having priority? */
+@media (prefers-color-scheme: light) {
+  *:not(a) {
+    border-color: #000000;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  *:not(a) {
+    color: #ffb700;
+    border-color: #ffb700;
+    background-color: #000000;
+  }
+}
+
+/* Aminda, type your changes above the media queries, please? */