mirror of
https://gitea.blesmrt.net/mikaela/gist.git
synced 2025-08-17 19:57:38 +02:00
Compare commits
5 Commits
6512330667
...
3ee208d3d8
| Author | SHA1 | Date | |
|---|---|---|---|
3ee208d3d8
|
|||
|
a0a6db945d
|
|||
|
29b3f56363
|
|||
|
b4f8fd5c5f
|
|||
|
ccb8613efb
|
@ -1 +1 @@
|
||||
Subproject commit e9870404b6ffb22bd91d790a82eb1e7bc6f39dc0
|
||||
Subproject commit c7b5995d5ae3f572f839124fced396e5da786003
|
||||
2
food
2
food
@ -1 +1 @@
|
||||
Subproject commit 67a8883ee747992a7c5384f812c0306b9a65101c
|
||||
Subproject commit 12dccb3a235a22dd3e3cde5166c502cdfd392881
|
||||
@ -1 +1 @@
|
||||
Subproject commit 4418569a088556a01cb6018a05f42ac9b175bfa5
|
||||
Subproject commit 0d6e3f102faa6c485cd1a48bfd22720b380ad378
|
||||
1
html-css/.gitignore
vendored
Normal file
1
html-css/.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
usercss
|
||||
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
|
||||
16
html-css/fun.css
Normal file
16
html-css/fun.css
Normal file
@ -0,0 +1,16 @@
|
||||
:root {
|
||||
--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;
|
||||
}
|
||||
|
||||
* {
|
||||
font-variant-emoji: text;
|
||||
margin: 25%;
|
||||
font-family: var(--fonts-serif);
|
||||
background-color: #000000;
|
||||
color: #ffffff;
|
||||
}
|
||||
12
html-css/fun.html
Normal file
12
html-css/fun.html
Normal file
@ -0,0 +1,12 @@
|
||||
<!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="fun.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>MEOW</h1>
|
||||
</body>
|
||||
</html>
|
||||
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>
|
||||
86
html-css/style.css
Normal file
86
html-css/style.css
Normal file
@ -0,0 +1,86 @@
|
||||
/* 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 {
|
||||
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? */
|
||||
1
html-css/usercss
Symbolic link
1
html-css/usercss
Symbolic link
@ -0,0 +1 @@
|
||||
../web-browsers/usercss
|
||||
13
index.html
13
index.html
@ -1,13 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<!-- This is just stupid page to put to web browser homepage to have some
|
||||
content on start page while not being empty or pointing to any external
|
||||
location... -->
|
||||
<title>OK.</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Your browser has loaded this page.</p>
|
||||
</body>
|
||||
</html>
|
||||
@ -1 +1 @@
|
||||
Subproject commit 60637d1b52f5aceb9e15489b8d7cb19065d56e4f
|
||||
Subproject commit 8c5a91caa83ebfa340be9829d47280d9d65e362f
|
||||
@ -1 +1 @@
|
||||
Subproject commit 166a8d09ddc761f6dc20ffe61667f076c1772fbb
|
||||
Subproject commit 3efcd42c27f1ad08b9e9b4894f0044436612dae9
|
||||
@ -1 +1 @@
|
||||
Subproject commit 560cc243a9078172e621fe69ce422ec31bafbefd
|
||||
Subproject commit a2e39104ba65bf3964de1233f737c207ede54cbc
|
||||
@ -1 +1 @@
|
||||
Subproject commit 108d7bf884baadbf480b2ba5f65ae83f70cdf45a
|
||||
Subproject commit 69d95551a85c87feb6643c3fe7ea3821f02fdab3
|
||||
Loading…
x
Reference in New Issue
Block a user