Rework website with bulma instead of bootstrap #6
|
@ -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">
|
||||||
$ <span id="typed-welcome"></span>
|
$ <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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Reference in a new issue