Use a base page layout that permits better footers
This commit is contained in:
		
							parent
							
								
									7b69e9ad9f
								
							
						
					
					
						commit
						9353b2ff1f
					
				
					 4 changed files with 109 additions and 135 deletions
				
			
		
							
								
								
									
										132
									
								
								src/index.html
									
										
									
									
									
								
							
							
						
						
									
										132
									
								
								src/index.html
									
										
									
									
									
								
							|  | @ -1,81 +1,77 @@ | |||
| <extends src="./lib/html/base.html"> | ||||
|   <block name="content"> | ||||
|     <h1 class="title has-text-weight-normal is-family-monospace"> | ||||
|       $ <span id="typed-welcome"></span> | ||||
|     </h1> | ||||
|     <section class="section"> | ||||
|       <div class="container"> | ||||
|         <h1 class="title has-text-weight-normal is-family-monospace"> | ||||
|           $ <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> | ||||
|  |  | |||
|  | @ -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> | ||||
|  |  | |||
|  | @ -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 { | ||||
|  |  | |||
|  | @ -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> | ||||
|  |  | |||
		Reference in a new issue