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"> <extends src="./lib/html/base.html">
<block name="content"> <block name="content">
<h1 class="title has-text-weight-normal is-family-monospace"> <section class="section">
$&nbsp;<span id="typed-welcome"></span> <div class="container">
</h1> <h1 class="title has-text-weight-normal is-family-monospace">
$&nbsp;<span id="typed-welcome"></span>
</h1>
<hr /> <hr />
<div class="columns"> <div class="columns">
<div class="column content"> <div class="column content">
<markdown> <markdown>
### About Me ### About Me
Looks like you found my website. I suppose introductions are Looks like you found my website. I suppose introductions are
in order. in order.
My name's Tristan, I'm an avid Dutch-South African software My name's Tristan, I'm an avid Dutch-South African software
consultant working in the UK. You probably either met me at an consultant working in the UK. You probably either met me at an
open source conference, a hackathon, a badminton session or at open source conference, a hackathon, a badminton session or at
a roleplaying table. a roleplaying table.
If not, well, this is also a great place to "meet" me. Have a If not, well, this is also a great place to "meet" me. Have a
nosey! 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: 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 --> - A [little web app](~/src/music_sample.html) showing
<!-- <ul> --> off what WebGL can do in combination with the JavaScript
<!-- <li> --> Audio interface.
<!-- A <a href="~/src/music_sample.html">little web app</a> showing off --> </markdown>
<!-- what WebGL can do in combination with the JavaScript Audio --> </div>
<!-- interface. -->
<!-- </li> --> <div class="column content">
<!-- </ul> --> <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>
</section>
<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>
</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"> <block name="content"></block>
<div class="container">
<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,67 +1,48 @@
<extends src="./lib/html/base.html"> <extends src="./lib/html/base.html">
<block name="content"> <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="columns">
<div class="column"> <div class="column">
<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" </div>
class="input"
type="email" <div class="field">
placeholder="Your address" <label class="label" for="subject">Subject</label>
name="mail" <input id="subject" class="input" type="text" placeholder="E.g. There's a typo on your home page!" name="subject" autocomplete="off" required />
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>
<div class="field"> <div class="column content">
<label class="label" for="subject">Subject</label> <markdown>
<input Any messages you enter here are directly forwarded to me. I aim to
id="subject" respond within a day.
class="input"
type="text"
placeholder="E.g. There's a typo on your home page!"
name="subject"
autocomplete="off"
required
/>
</div>
<div class="field"> Don't be upset about the form, I want to avoid the spam
<label class="label" for="message">Message</label> publishing your email address brings with it... And minimize
<textarea the amount of mail that doesn't reach me, this form is an
id="message" exception in all my spam filters, you see ;)
class="textarea" </markdown>
type="text"
rows="6"
name="message"
autocomplete="off"
required
></textarea>
</div> </div>
</div>
<div class="field">
<div class="control">
<button class="button is-link">Send</button>
</div>
</div>
</form>
</div> </div>
</section>
<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>
</block> </block>
</extends> </extends>