web
HTML
Index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Brief description of page.">
<meta name="keywords" content="keyword, wordkey">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title.</title>
<link rel="stylesheet" href="style/main.css">
<script defer src="script/debug.js"></script>
</head>
<body>
<!-- headers -->
<header id="debug">
</header>
<header>
<img src="images/logo.svg" alt="Logo of the website.">
<nav aria-label="Main navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="some.html">Some</a></li>
<li><a href="other.html">Other</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
<!-- main -->
<main>
<article>
<!-- Comment. -->
<h1>This is some long root heading</h1>
<div class="sectionless">
<p><span class="thing">It</span> is <strong>important</strong>.</p>
<p>Oh yeah, <em>sure</em>…</p>
</div>
<hr>
<progress max="100" value="66">Ongoing</progress>
<hr>
<div class="columns">
<div>
First column to describe the associated
image of a debian landscape debanner.
</div>
<div>
<img src="images/debanner.jpeg" alt="Debian banner.">
</div>
</div>
<div class="wrapper">
<section>
<h2>A Heading</h2>
<ol>Ordered:
<li>Some item</li>
<li>Another item</li>
</ol>
<p>Another paragraph.</p>
</section>
<section>
<h2><span class="thing">Another</span> Heading</h2>
<ul>Unordered:
<li>Some item</li>
<li>Another item</li>
</ul>
<time>Time.</time>
</section>
<section>
<h2>Yet Another Heading</h2>
<h3>Sub Heading</h3>
<p>
1________11________21________31________41<br>
Yet another paragraph that is quite a bit longer than others.
</p>
</section>
</div>
<a href="#debug">#debug</a>
<a href="relative/destination">Go elsewhere…</a>
<abbr title="HTML">HyperText Markup Language</abbr>
<address>
<p>Street</p>
<p>Town</p>
</address>
<blockquote>
<p>Life is like golf.</p>
<cite>Unknown</cite>
</blockquote>
<dl>
<dt>something</dt>
<dd>its description</dd>
<dt>another thing</dt>
<dd>yet another description</dd>
</dl>
<figure>
<!-- or audio or video -->
<img src="rel/dest" alt="figure/image">
<figcaption>Caption for the figure.</figcaption>
</figure>
<form action="/route" method="POST">
<!--
<button type="button" onclick="f()">Hit!</button>
<button type="submit">Send!</button>
<fieldset>
<legend>Caption</legend>
elements…
</fieldset>
<label>Label for checkbox
<input value="" name="cb" type="checkbox" placeholder="Checkbox" required>
</label>
<label>Label for date
<input value="" name="dt" type="date" placeholder="Date" required>
</label>
<label>Label for email
<input value="" name="em" type="email" placeholder="Email" required>
</label>
<label>Label for file
<input value="" name="fl" type="file" placeholder="File" required>
</label>
<label>Label for number
<input value="" name="nb" type="number" placeholder="Number" required>
</label>
<label>Label for password
<input value="" name="pw" type="password" placeholder="Password" required>
</label>
<label>Label for radio
<input value="" name="rd" type="radio" placeholder="Radio" required>
</label>
<label>Label for text
<input value="" name="tt" type="text" placeholder="Text" required>
</label>
<select name="" required>
<option value="1">First</option>
<option value="2" selected>Second</option>
</select>
<textarea name="ta" cols="80" rows="8" maxlength="640" required>
Text
</textarea>
-->
</form>
<kbd>kbd</kbd>
<p><dfn>Def</dfn>Definition</p>
<pre>
This is multiline,
respecting non-br lf.
</pre>
<table>
<caption>Total table</caption>
<thead>
<tr>
<th />
<th>th</th>
<th>th</th>
</tr>
</thead>
<tbody>
<tr>
<th>th</th>
<td>td</td>
<td>td</td>
</tr>
<tr>
<th>th</th>
<td>td</td>
<td>td</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>gross total</th>
<td>td</td>
<td>td</td>
</tr>
<tr>
<th>net total</th>
<td>td</td>
<td>td</td>
</tr>
</tfoot>
</table>
<time datetime="2025-01-01">First 2025 day</time>
<time datetime="PT1H30M">Hour and half</time>
<ul>
<li><strong>strong</strong></li>
<li><em>em</em></li>
<li><sub>sub</sub></li>
<li><sup>sup</sup></li>
<li><mark>mark</mark></li>
<li><del>del</del></li>
<li><ins>ins</ins></li>
</ul>
<audio controls>
<source src="rel/dest">
KO audio
</audio>
<video controls>
<source src="rel/dest">
KO video
</video>
</article>
</main>
<!-- aside -->
<aside>
Related.
</aside>
<aside>
Related.
</aside>
<!-- footers -->
<footer>
<nav aria-label="Extra navigation">
<ul>
<li><a href="legal.html">Legal</a></li>
<li><a href="misc.html">Misc</a></li>
</ul>
</nav>
</footer>
<!-- </> -->
</body>
</html>
CSS
Debug
* {
border-color: magenta;
border-style: dashed;
border-width: 1px;
}
Reset
*::after,
*::before,
* {
box-sizing: border-box;
}
* {
font: inherit;
/*
margin: 0;
padding: 0;
/**/
}
html {
color-scheme: dark light;
font-size: 1rem;
}
body {
hanging-punctuation: first last;
min-height: 100svh;
}
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}
figcaption,
li,
p {
max-width: 79ch;
text-wrap: pretty;
}
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
Main
/*
16 1
17 1.0625
18 1.125
19 1.1875
20 1.25
21 1.3125
22 1.375
phone: 480 px
tablet: 768 px
laptop: 1024 px
desktop: 1366 px
block-size ← height
(border|padding)-block[-start|end]
(border|padding)-inline[-start|end]
inline-size ← width
margin-block ← vspace
*/
/**/
@import "debug.css";
/**/
@import "reset.css";
html {
}
body {
background-color: #111;
background-image: url("../images/logo.svg");
background-position: center;
background-size: cover;
color: #777;
font-family: monospace;
line-height: 1.125;
margin-block: 0;
margin-inline: auto;
max-inline-size: 160ch;
text-align: start;
}
header {
background-color: #300;
display: flex;
gap: 1em;
justify-content: space-between;
padding: 1em 2em;
}
.columns {
display: grid;
gap: 1em;
@media (width > 40rem) {
grid-template-columns: 1fr 2fr;
}
}
.sectionless {
background-color: #630;
padding: .5em 1em;
}
.sectionless .thing {
font-size: 1.5em;
}
.wrapper {
display: flex;
}
main {
}
h1, h2, h3, h4, h5, h6 {
background-color: #222;
}
h1 {
border-color: #fff;
border-radius: .25em;
border-style: solid;
border-width: .1em;
color: #f77;
font-size: 3rem;
text-align: center;
}
img {
display: block;
max-inline-size: 100%;
}
p {
background-color: #330;
}
section {
background-color: #033;
margin-block: 1em;
margin-inline: 1em;
max-inline-size: 40ch;
}
strong {
color: red;
}
ol, ul {
background-color: #303;
}
ol {
list-style: decimal;
}
ul {
list-style: disc;
}
li {
margin-block: .25em;
}
ul li::marker {
content: "×";
}
header nav a {
text-decoration: none;
}
header nav a:focus-visible,
header nav a:hover {
background-color: blue;
}
header nav ul {
display: flex;
font-size: 1.5rem;
gap: 1em;
list-style: none;
padding: 0;
}
header nav li::marker {
content: none;
}
a {
color: inherit;
}
a:visited {
}
a:focus-visible,
a:hover {
}
a:active {
}
h2 {
color: #f77;
}
footer {
background-color: #003;
padding: 1em 2em;
text-align: end;
}
JS
Debug
const body = document.body
const style = window.getComputedStyle(body)
const font_size = style.fontSize
const debug = document.getElementById("debug")
debug.innerHTML = `Font size = ${font_size}`