mirror of
https://gitea.blesmrt.net/mikaela/gist.git
synced 2024-11-15 07:49:23 +01:00
html-css: initial commit
This commit is contained in:
parent
ccb8613efb
commit
b4f8fd5c5f
SSH Key Fingerprint:
SHA256:CXLULpqNBdUKB6E6fLA1b/4SzG0HvKD19PbIePU175Q
42
html-css/README.md
Normal file
42
html-css/README.md
Normal file
@ -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
|
||||||
49
html-css/index.html
Normal file
49
html-css/index.html
Normal file
@ -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>
|
||||||
89
html-css/style.css
Normal file
89
html-css/style.css
Normal file
@ -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? */
|
||||||
Loading…
Reference in New Issue
Block a user