Skip to content

Commit

Permalink
my own css normalization file
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomoayan
tomoayan committed Oct 20, 2024
1 parent f23e010 commit c2ff27d
Show file tree
Hide file tree
Showing 3 changed files with 339 additions and 0 deletions.
92 changes: 92 additions & 0 deletions base.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
/* color-scheme: auto convert html components to light or dark */
html {
color-scheme: dark light;
-webkit-tap-highlight-color: transparent
}



*,
*::before,
*::after {
box-sizing: border-box;
}

* {
margin: 0;
}



body {
line-height: 1.5;
/* Improve Accessibility */
-webkit-font-smoothing: antialiased;
/* Improve text rendering in safari */
}



img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}

iframe {
display: block;
border: none;
max-width: 100%;
}



input,
button,
textarea,
select {
/* Removes auto zooming in safari */
font-size: inherit;
}



p {
/* "lang" html attribute recommended to use hyphens css property*/
hyphens: auto;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}

a {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}



input,
textarea,
label {
display: block;
}

menu,
ul,
ol {
padding: 0;
}
247 changes: 247 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,247 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Elements Test</title>
<link rel="stylesheet" href="./base.css">
<style>
/* minimal styles to improve visibility */
body {
font-family: Arial, sans-serif;
padding: 1rem;
}

section,
header {
margin-bottom: 5rem;
}

dl,
figure,
video,
audio {
margin-bottom: .7rem;
}


/* Note Styling */
.note {
background-color: hsla(50, 100%, 50%, 0.25);
padding: 1rem;
border-radius: .4rem;
margin-bottom: 2rem;
}

.note ul {
padding-left: 1rem;
}

@media (prefers-color-scheme: dark) {
.note {
background-color: hsla(60, 100%, 50%, .25);

}
}
</style>
</head>

<body>

<div class="note">
<p><b>Added few styling to improve the visibility (only in this page)</b></p>
<ul>
<li><code>body {
font-family: Arial, sans-serif;
padding: 1rem;
}</code></li>
<li><code>section,
header {
margin-bottom: 5rem;
}</code></li>
<li><code>dl,
figure,
video,
audio {
margin-bottom: .7rem;
}</code></li>
</ul>
</div>

<header>
<h3><em>Header</em> with a <em>Nav</em> and link <em>List</em></h3>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
</header>



<main>

<section>
<h1>Heading 1 (h1)</h1>
<h2>Heading 2 (h2)</h2>
<h3>Heading 3 (h3)</h3>
<h4>Heading 4 (h4)</h4>
<h5>Heading 5 (h5)</h5>
<h6>Heading 6 (h6)</h6>
</section>

<section>
<h2>Texts</h2>
<p>This is a Paragraph.
<br>
<strong>This is a Strong (strong) text. (Good for SEO)</strong>
<br>
<b>This is a Bold (b) text.</b>
<br>
<em>This is a Emphasize (em) text. (Good for SEO)</em>
<br>
<i>This is an Italics (i) text.</i>
<br>
this is a <mark>mark</mark> text.
<br>
this is a <sub>sub</sub> text.
<br>
this is a <sup>sup</sup> text.
<blockquote>This is a blockquote.</blockquote>
<pre>This is preformatted text.</pre>
<code>
<p>This is inline code.</p>
</code>
<p>This is an <abbr title="The &lt;abbr&gt; tag defines an abbreviation.">abbr</abbr>.</p>

<dl>
<dt>Definition Term</dt>
<dd>Definition description goes here.</dd>
</dl>
<address>This is an address element. (never heard of it)</address>
</section>

<section>
<h2>Lists</h2>
<ul>
<li>Unordered list item</li>
<li>Another unordered list item</li>
</ul>
<ol>
<li>Ordered list item</li>
<li>Another ordered list item</li>
</ol>
<menu>
<li>menu: Unordered list item</li>
<li>menu: Another unordered list item</li>
</menu>
<details>
<summary>Details element with summary (toggle it)</summary>
This is some hidden content inside the details element.
</details>
</section>

<section>
<h2>Tables</h2>
<table border="1">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
</tr>
<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>
</tr>
</tbody>
</table>
</section>

<section>
<h2>Forms</h2>
<form action="#">
<label for="text-input">Text Input:</label>
<input type="text" id="text-input" placeholder="Enter text here">

<label for="password-input">Password Input:</label>
<input type="password" id="password-input">

<label for="checkbox-input">Checkbox Input:</label>
<input type="checkbox" id="checkbox-input">

<label for="radio-input">Radio Button:</label>
<input type="radio" id="radio-input" name="example">

<label for="select-input">Select Dropdown:</label>
<select id="select-input">
<option>Option 1</option>
<option>Option 2</option>
<optgroup label="group name">
<option>Option 1</option>
<option>Option 2</option>
</optgroup>
</select>

<label for="textarea-input">Textarea:</label>
<textarea id="textarea-input" rows="4"></textarea>

<button type="submit">Submit Button</button>
</form>
</section>

<section>
<h2>Media & iframe</h2>
<figure>
<img src="/megumin_loves_explosion" alt="[korigengi] Megumin Konosuba from deviantart">
<figcaption>This is a figure with an image and a figcaption.</figcaption>
</figure>

<video controls>
<source
src="//upload.wikimedia.org/wikipedia/commons/transcoded/3/36/Amelia_-cat_purrs_and_kneads.webm/Amelia_-cat_purrs_and_kneads.webm.480p.vp9.webm"
type="video/webm">
Your browser does not support the video tag.
</video>

<audio controls>
<source src="//upload.wikimedia.org/wikipedia/commons/d/d4/Beethoven_Moonlight_3rd_movement.ogg"
type="audio/ogg">
Your browser does not support the audio element.
</audio>
<iframe src="//example.com" width="300" height="200"></iframe>
</section>

<section>
<article>
article
</article>

<aside>
aside
</aside>
</section>

<section>
<dialog open>This is an open dialog window</dialog>
</section>

<!-- <progress value="50" max="100">50%</progress>
<meter value="0.6">60%</meter> -->
</main>

<footer>
<p>This is the footer.</p>
</footer>

</body>

</html>
Binary file added megumin_loves_explosion
View file
Binary file not shown.

0 comments on commit c2ff27d

Please sign in to comment.