Switch to semantic tags where possible

This commit is contained in:
Nycki 2021-09-06 16:57:51 -04:00
parent a3b079dcc8
commit 2cc2d7f005
3 changed files with 63 additions and 46 deletions

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<title>How To Host Minecraft From Scratch</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style-3.css" />
</head>
<body>
<main>
<h1>How To Host Minecraft From Scratch</h1>
<div class="subtitle">A Noob's Guide</div>
</main>
</body>
</html>

View file

@ -1,53 +1,46 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Nupa's Page</title>
<title>Nupa's Page</title> <meta charset='utf-8'/>
<meta charset='utf-8'/> <link rel='stylesheet' href='style-3.css'>
<link rel='stylesheet' href='style-3.css'>
</head> </head>
<body> <body>
<div id='title'> <main>
<h1>Nupa's Page</h1>
<div class='subtitle'>A place to show off my projects.</div>
<h1>Nupa's Page</h1> <article>
<span class='subtitle'>A place to show off my projects.</span> <h2>Braceless Javascript</h2>
2018. A couple of short programs written in a subset of javascript. Specifically, javascript but you can't use anything with curly braces in it, like 'if' or 'for'. Instead, ternaries and lambdas give you all the flow control you need. Has a lispy flavor.
<a href='https://nupanick.github.io/braceless-javascript/fizzbuzz.html'>FizzBuzz</a> (<a href='https://github.com/nupanick/braceless-javascript/blob/master/fizzbuzz.html'>Source</a>),
<a href='https://nupanick.github.io/braceless-javascript/bottles.html'>Bottles</a> (<a href='https://github.com/nupanick/braceless-javascript/blob/master/bottles.html'>Source</a>).
</article>
</div> <article>
<div id='content'> <h2>Flistify</h2>
2018. A script to bulk-resize images for an f-list gallery, using windows batch and imagemagick. <a href='https://github.com/nupanick/flistify'>Source</a>.
</article>
<h3>Braceless Javascript</h3> <article>
<p> <h2>Portal ZZT</h2>
2018. A couple of short programs written in a subset of javascript. Specifically, javascript but you can't use anything with curly braces in it, like 'if' or 'for'. Instead, ternaries and lambdas give you all the flow control you need. Has a lispy flavor. 2008. A portal clone in the ZZT Engine.
<a href='https://nupanick.github.io/braceless-javascript/fizzbuzz.html'>FizzBuzz</a> (<a href='https://github.com/nupanick/braceless-javascript/blob/master/fizzbuzz.html'>Source</a>), </article>
<a href='https://nupanick.github.io/braceless-javascript/bottles.html'>Bottles</a> (<a href='https://github.com/nupanick/braceless-javascript/blob/master/bottles.html'>Source</a>).
</p>
<h3>Flistify</h3> <article>
<p> <h2>ZZT Nanogames</h2>
2018. A script to bulk-resize images for an f-list gallery, using windows batch and imagemagick. <a href='https://github.com/nupanick/flistify'>Source</a>. 2008. A collection of ZZT games that use only one screen each. Also includes <em>Eight Legged Express</em>, which I believe was made in one weekend as a challenge.
</p> </article>
<h3>Portal ZZT</h3> <article>
<p> <h2>Collabyrinth</h2>
2008. A portal clone in the ZZT Engine. 2008. A collaborative labyrinth ZZT game. I made the overworld and recruited other members of the z2 forums to fill it with puzzles and obstacles.
</p> </article>
<h3>ZZT Nanogames</h3> <article>
<p> <h2>Traps and Zoids</h2>
2008. A collection of ZZT games that use only one screen each. Also includes <em>Eight Legged Express</em>, which I believe was made in one weekend as a challenge. 2007. Some hand-drawn cartoons and very old web design. Good old HTML 4.0 Transitional.
</p> </article>
</main>
<h3>Collabyrinth</h3>
<p>
2008. A collaborative labyrinth ZZT game. I made the overworld and recruited other members of the z2 forums to fill it with puzzles and obstacles.
</p>
<h3>Traps and Zoids</h3>
<p>
2007. Some hand-drawn cartoons and very old web design. Good old HTML 4.0 Transitional.
</p>
</div>
</body> </body>
</html> </html>

View file

@ -1,10 +1,11 @@
html {
margin: 0 auto;
max-width: 40rem;
}
body { body {
background-image: url('images/magenta-tile-4.png');
max-width: min(90vw, 40rem);
margin: 1rem auto;
}
main {
font-family: sans-serif; font-family: sans-serif;
background-color: black; background-color: black;
color: hotpink; color: hotpink;
@ -12,10 +13,19 @@ body {
padding: 1rem; padding: 1rem;
} }
#title { h1 {
text-align: center; text-align: center;
} }
.subtitle { .subtitle {
text-align: center;
font-style: italic; font-style: italic;
} }
a:link {
color: skyblue
}
a:visited {
color: gray
}