Use a base page layout that permits better footers

This commit is contained in:
Tristan Daniël Maat 2022-07-30 17:51:20 +01:00
parent 7b69e9ad9f
commit 9353b2ff1f
Signed by: tlater
GPG key ID: 49670FD774E43268
4 changed files with 109 additions and 135 deletions

View file

@ -1,5 +1,7 @@
<extends src="./lib/html/base.html"> <extends src="./lib/html/base.html">
<block name="content"> <block name="content">
<section class="section">
<div class="container">
<h1 class="title has-text-weight-normal is-family-monospace"> <h1 class="title has-text-weight-normal is-family-monospace">
$&nbsp;<span id="typed-welcome"></span> $&nbsp;<span id="typed-welcome"></span>
</h1> </h1>
@ -27,15 +29,11 @@
There is not a whole lot here at the moment. There is not a whole lot here at the moment.
You may find the following interesting though: You may find the following interesting though:
- A [little web app](~/src/music_sample.html) showing
off what WebGL can do in combination with the JavaScript
Audio interface.
</markdown> </markdown>
<!-- Parcel isn't smart enough to pick up cross-page links if they're in markdown blocks -->
<!-- <ul> -->
<!-- <li> -->
<!-- A <a href="~/src/music_sample.html">little web app</a> showing off -->
<!-- what WebGL can do in combination with the JavaScript Audio -->
<!-- interface. -->
<!-- </li> -->
<!-- </ul> -->
</div> </div>
<div class="column content"> <div class="column content">
@ -73,9 +71,7 @@
</markdown> </markdown>
</div> </div>
</div> </div>
</div>
</section>
</block> </block>
<!-- <block name="footer"> -->
<!-- <script type="module" src="./index.ts" defer></script> -->
<!-- </block> -->
</extends> </extends>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class="no-js" lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
@ -14,16 +14,12 @@
<title>tlater.net</title> <title>tlater.net</title>
</head> </head>
<body class="is-dark"> <body>
<block name="navigation"> <block name="navigation">
<include src="lib/html/navigation.html"></include> <include src="lib/html/navigation.html"></include>
</block> </block>
<!-- <include src="lib/html/message-flash.html"></include> --> <!-- <include src="lib/html/message-flash.html"></include> -->
<section class="section">
<div class="container">
<block name="content"></block> <block name="content"></block>
</div>
</section>
<block name="footer"></block> <block name="footer"></block>
</body> </body>

View file

@ -1,9 +1,10 @@
@import "./_custom-bulma"; @import "./_custom-bulma";
@import "./_typed"; @import "./_typed";
html, body { body {
height: 100%; display: flex;
width: 100%; flex-direction: column;
min-height: 100vh;
} }
#typed-welcome { #typed-welcome {

View file

@ -1,5 +1,7 @@
<extends src="./lib/html/base.html"> <extends src="./lib/html/base.html">
<block name="content"> <block name="content">
<section class="section">
<div class="container">
<h1 class="title has-text-weight-normal">Contact Me</h1> <h1 class="title has-text-weight-normal">Contact Me</h1>
<div class="columns"> <div class="columns">
@ -7,40 +9,17 @@
<form id="sendmail" role="form" action="mail.html" method="post"> <form id="sendmail" role="form" action="mail.html" method="post">
<div class="field"> <div class="field">
<label class="label" for="mail">Email address</label> <label class="label" for="mail">Email address</label>
<input <input id="mail" class="input" type="email" placeholder="Your address" name="mail" required />
id="mail"
class="input"
type="email"
placeholder="Your address"
name="mail"
required
/>
</div> </div>
<div class="field"> <div class="field">
<label class="label" for="subject">Subject</label> <label class="label" for="subject">Subject</label>
<input <input id="subject" class="input" type="text" placeholder="E.g. There's a typo on your home page!" name="subject" autocomplete="off" required />
id="subject"
class="input"
type="text"
placeholder="E.g. There's a typo on your home page!"
name="subject"
autocomplete="off"
required
/>
</div> </div>
<div class="field"> <div class="field">
<label class="label" for="message">Message</label> <label class="label" for="message">Message</label>
<textarea <textarea id="message" class="textarea" type="text" rows="6" name="message" autocomplete="off" required></textarea>
id="message"
class="textarea"
type="text"
rows="6"
name="message"
autocomplete="off"
required
></textarea>
</div> </div>
<div class="field"> <div class="field">
@ -63,5 +42,7 @@
</markdown> </markdown>
</div> </div>
</div> </div>
</div>
</section>
</block> </block>
</extends> </extends>