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,81 +1,77 @@
<extends src="./lib/html/base.html">
<block name="content">
<h1 class="title has-text-weight-normal is-family-monospace">
$&nbsp;<span id="typed-welcome"></span>
</h1>
<section class="section">
<div class="container">
<h1 class="title has-text-weight-normal is-family-monospace">
$&nbsp;<span id="typed-welcome"></span>
</h1>
<hr />
<hr />
<div class="columns">
<div class="column content">
<markdown>
### About Me
<div class="columns">
<div class="column content">
<markdown>
### About Me
Looks like you found my website. I suppose introductions are
in order.
Looks like you found my website. I suppose introductions are
in order.
My name's Tristan, I'm an avid Dutch-South African software
consultant working in the UK. You probably either met me at an
open source conference, a hackathon, a badminton session or at
a roleplaying table.
My name's Tristan, I'm an avid Dutch-South African software
consultant working in the UK. You probably either met me at an
open source conference, a hackathon, a badminton session or at
a roleplaying table.
If not, well, this is also a great place to "meet" me. Have a
nosey!
If not, well, this is also a great place to "meet" me. Have a
nosey!
### This Website
### This Website
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:
</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> -->
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>
</div>
<div class="column content">
<markdown>
### My Work
I'm a software consultant working for
[Codethink](https://www.codethink.co.uk) in Manchester,
UK. Our specializaiton is open source software, so this has
allowed me to directly contribute to a number of open source
projects, notably
[BuildStream](https://www.gitlab.com/buildstream/buildstream),
an integration tool for large software stacks.
I've given a couple of talks on it, as well:
- Build meetup 2017
- Build meetup 2018
- Build meetup 2019
Outside of work for Codethink, I'm generally interested in
things such as NixOS and other tools that assist maintaining
Linux systems - mostly born out of my pursuit of the perfect
Linux desktop (feel free to have a browse through my
[dotfiles](https://github.com/tlater/dotfiles)).
I also just enjoy Programming, my core languages currently are
Rust, Python, Lisp and JavaScript (including a number of
frameworks and tools for these), although I have hopes to
eventually reduce these to just Rust ;)
If you're interested in seeing these things for yourself,
visit my [Gitlab](https://gitlab.com/tlater) and
[GitHub](https://github.com/tlater) pages.
</markdown>
</div>
</div>
</div>
<div class="column content">
<markdown>
### My Work
I'm a software consultant working for
[Codethink](https://www.codethink.co.uk) in Manchester,
UK. Our specializaiton is open source software, so this has
allowed me to directly contribute to a number of open source
projects, notably
[BuildStream](https://www.gitlab.com/buildstream/buildstream),
an integration tool for large software stacks.
I've given a couple of talks on it, as well:
- Build meetup 2017
- Build meetup 2018
- Build meetup 2019
Outside of work for Codethink, I'm generally interested in
things such as NixOS and other tools that assist maintaining
Linux systems - mostly born out of my pursuit of the perfect
Linux desktop (feel free to have a browse through my
[dotfiles](https://github.com/tlater/dotfiles)).
I also just enjoy Programming, my core languages currently are
Rust, Python, Lisp and JavaScript (including a number of
frameworks and tools for these), although I have hopes to
eventually reduce these to just Rust ;)
If you're interested in seeing these things for yourself,
visit my [Gitlab](https://gitlab.com/tlater) and
[GitHub](https://github.com/tlater) pages.
</markdown>
</div>
</div>
</section>
</block>
<!-- <block name="footer"> -->
<!-- <script type="module" src="./index.ts" defer></script> -->
<!-- </block> -->
</extends>

View file

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

View file

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

View file

@ -1,67 +1,48 @@
<extends src="./lib/html/base.html">
<block name="content">
<h1 class="title has-text-weight-normal">Contact Me</h1>
<section class="section">
<div class="container">
<h1 class="title has-text-weight-normal">Contact Me</h1>
<div class="columns">
<div class="column">
<form id="sendmail" role="form" action="mail.html" method="post">
<div class="field">
<label class="label" for="mail">Email address</label>
<input
id="mail"
class="input"
type="email"
placeholder="Your address"
name="mail"
required
/>
<div class="columns">
<div class="column">
<form id="sendmail" role="form" action="mail.html" method="post">
<div class="field">
<label class="label" for="mail">Email address</label>
<input id="mail" class="input" type="email" placeholder="Your address" name="mail" required />
</div>
<div class="field">
<label class="label" for="subject">Subject</label>
<input id="subject" class="input" type="text" placeholder="E.g. There's a typo on your home page!" name="subject" autocomplete="off" required />
</div>
<div class="field">
<label class="label" for="message">Message</label>
<textarea id="message" class="textarea" type="text" rows="6" name="message" autocomplete="off" required></textarea>
</div>
<div class="field">
<div class="control">
<button class="button is-link">Send</button>
</div>
</div>
</form>
</div>
<div class="field">
<label class="label" for="subject">Subject</label>
<input
id="subject"
class="input"
type="text"
placeholder="E.g. There's a typo on your home page!"
name="subject"
autocomplete="off"
required
/>
</div>
<div class="column content">
<markdown>
Any messages you enter here are directly forwarded to me. I aim to
respond within a day.
<div class="field">
<label class="label" for="message">Message</label>
<textarea
id="message"
class="textarea"
type="text"
rows="6"
name="message"
autocomplete="off"
required
></textarea>
Don't be upset about the form, I want to avoid the spam
publishing your email address brings with it... And minimize
the amount of mail that doesn't reach me, this form is an
exception in all my spam filters, you see ;)
</markdown>
</div>
<div class="field">
<div class="control">
<button class="button is-link">Send</button>
</div>
</div>
</form>
</div>
</div>
<div class="column content">
<markdown>
Any messages you enter here are directly forwarded to me. I aim to
respond within a day.
Don't be upset about the form, I want to avoid the spam
publishing your email address brings with it... And minimize
the amount of mail that doesn't reach me, this form is an
exception in all my spam filters, you see ;)
</markdown>
</div>
</div>
</section>
</block>
</extends>