diff --git a/images/200px.png b/images/200px.png new file mode 100755 index 0000000..969cfa6 Binary files /dev/null and b/images/200px.png differ diff --git a/images/200px.webp b/images/200px.webp new file mode 100755 index 0000000..f8b95da Binary files /dev/null and b/images/200px.webp differ diff --git a/main.css b/main.css index 8cb6929..1335390 100644 --- a/main.css +++ b/main.css @@ -142,3 +142,55 @@ transition:transform 300ms cubic-bezier(.4,1,.5,1)} .tag{border-color:#555} } +/* Form stuff */ +/* If I do a CSS framework, it'll need to have a reset too... */ +/* e.g. https://github.com/necolas/normalize.css/blob/master/normalize.css +https://byby.dev/normalize-css#:~:text=css%23css%2Dresets-,Normalize.,experience%20for%20each%20web%20browser. +https://www.joshwcomeau.com/css/custom-css-reset/ +*/ +form{ +border:1px solid; +padding: 1rem; +} +input,select,textarea{ +font:1.2rem/1.62 sans-serif;color:#444; +border:1px solid #CCC; +} +textarea{ +resize: vertical; +} + +input,select,textarea{ +background: #EEE; +border: 2px solid #444; +box-sizing: border-box; +color: #444; +display: block; +line-height: 1; +vertical-align: top; +transition-duration:.2s; +} +input,textarea{ +width:100%; +} +input[type="checkbox"]{ +display:inline-block; +} +input:focus,select:focus,textarea:focus { + border-color: #9CF; +} +@media(min-width:720px){ + input,select,textarea{ + display:inline-block; + max-width:50%; /* so half it can be, with margins factored in... */ + max-width:346.8px; + } + input,textarea{ + width:auto; + } +} +@media(prefers-color-scheme:dark){ + input,select,textarea{ + background:#CCC;border-color:#CCC; + } +} diff --git a/test.html b/test.html new file mode 100644 index 0000000..16d9eff --- /dev/null +++ b/test.html @@ -0,0 +1,360 @@ + + + + + + + + + + + + HTML element test page + + + +
+ Jump directly to main content +

HTML element test page (h1)

+ + +
+ +
+
+ +
+
+

HTML element test page (h1)

+

Welcome, you've found my testing page. A page with all HTML elements I could drop in (even if not used on site), that is used for testing my CSS to ensure it's works everywhere I can get it to.

+ +

heading 2 (h2)

+

heading 3 (h3)

+

heading 4 (h4)

+
heading 5 (h5)
+
heading 6 (h6)
+ +

Paragraphs

+

A simple little paragraph.

+

Followed by another with a link home

+ +

Lists

+

ul

+ +

ol

+
    +
  1. List item 1
    2. +
  2. List item 2
    3. +
  3. List item 3
    4. +
+

dl

+
+
Term
+
Description 1
+
Descripton 2
+
+

menu

+ +
    +
  • List item 1
    • +
  • List item 2
    • +
  • List item 3
    • +
+ + +

Code

+ 
<p>Example of code inside a pre.<p>
+ Code alone. +

And heres some code inside a tag, namely a paragraph.

+ +

Tables

+

Each of these are wrapped by an element with .tblcon class.

+
+ + + + + + + + + + + + +
Concern/VMServices1
Production Web ServerNginx
Production Web ServerNginx
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
Concern/VMServices2
Production Web ServerNginxNginxNginx
Production Web ServerNginxNginx
Production Web ServerNginxNginxNginxNginxNginx
+
+
+ + + + + + + + + + +
Concern/VMServices3
Production Web ServerNginx
Production Web ServerNginx
+
+

Table with all elements

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Here's a captioned table
NameEarnedProfit
Mr. Epic£15000£1000
Sludge£35000£19000
Smart fella£69420£50000
£119420£70000
+ +

Blockquotes

+
A section that is quoted from another source
+

Using q tag for inline (short) quotations, as you see. Nifty.

+ +

Form

+

Behold, the mega-form! If you want details check mozilla's form section

+ +

datalist, fieldset, input, legend, meter, output, select, textarea

+

input todo: datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week

+
+ + + + + + + + + + +
+ Answer these yes/nos + + + + + + +
+ + + 55% + + + + + + + + + + + +
+ +

Button

+ + Anchor! + +

Grid System

+

Not using one (curently at least) as it's un-needed. Perhaps if I make my own reset/base CSS file I'll add one for you guys.

+

Utilities

+ +

Tags

+
Tag
+

As a span within w another element.

+

Actual usage Tag 1 Tag 2

+ +

Notecards

+ +

Alerts

+ +

Modals

+ +

Example utils I may want

+ Bootstrap utilities + +

Headers

+ +

Menus

+

Maybe I'll do dropdowns soonish

+ +

Searchbars

+ +

Inline elements

+ +

Unplanned/Dumped for now

+

Address

+
testing
+

Article

+
testing
+ +

Aside

+ +

There's also the class .page-nav

+

Images

+

Webp. If it doesn't load your browser doesn't support it, but the picture below will work.

+ Placeholder image +

Picture

+ + + + Placeholder image + + +

Figure

+
+ + + + Placeholder image + +
+
+ + + + Placeholder image + +
figcaption
+
+ +

hr

+
+ +

misc

+

Here's some examples of inline elements I currently don't use (or didn't up to now).

+

The list consists of abbr for abbr abbreviations, bdi for bidirectional text, bdo (rtl) for changing text direction
Oh there was a br (line break), not a new paragraph tag.

+

If something has been removed, because it's wrong for any reason, the del and ins elements are here!

+ +

todo

+

cite, data, dfn, em, i, kbd, mark, s, samp, small, strong, sub, sup, time, u, var, wbr

+

rp, rt, ruby

+ +

Multimedia

+

area, audio, img(done elsehwere), map, track, video

+ +

Embedded content

+

embed, iframe, object, picture, portal, source

+ +

Svg

+ +

canvas

+

This allows for scripting, animations, games, fancier graphics, etc.

+ + +

Interactive elements

+

details

+
+ Gangnam style + OP OP OP OP, OPPA GANGNAM STYLE +
+

dialog

+

Non-suggested way

+ +

I am a dialog box! You cannot kill me!

+
+ +
+ +

It's recommended to use JS to toggle dialogs, but to still use dialog (without the open attribute) over a div for semantic reasoning. + +

Web components

+

slot, template

+

I've never used these, so I'm not sure 100% about their application, omitting for now.

+
+ +
+

Up to date

+

If you're looking for a complete (and up-to-date) list of HTML elements, look over at the mdn web docs.

+

I'm recommending this, as it's where I yoinked all the elements from on , and it's maintained regularly (unlike this page).

+

+ +
+ #TODO: +

Trivia

+

As of today thiss is the largest webpage on my site, with the HTML taking up ~13KB

+
+
+ + + + +