tlaternet/tlaternet-templates
Archived
1
0
Fork 0
Code Issues 4 Pull requests Releases Wiki Activity

Style mail page using bulma

Browse source
This commit is contained in:
Tristan Daniël Maat 2022-06-24 09:25:14 +01:00
parent 34ca1b8ae9
commit ec6ff594ae
Signed by: tlater
GPG key ID: 49670FD774E43268
3 changed files with 23 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/index.html
View file

@ -1,6 +1,6 @@
<extends src="./lib/html/base.html"> <extends src="./lib/html/base.html">
<block name="content"> <block name="content">
<h1 class="title head-line 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>

4
src/lib/scss/_custom-bulma.scss
View file

@ -21,6 +21,9 @@ $link: $green;
$link-hover: color.scale($green, $lightness: +10%); $link-hover: color.scale($green, $lightness: +10%);
$link-active: color.scale($green, $lightness: +10%); $link-active: color.scale($green, $lightness: +10%);
$link-focus: color.scale($green, $lightness: +10%); $link-focus: color.scale($green, $lightness: +10%);
$input-color: $grey-darker;
$input-placeholder-color: $grey-darker; // Some opacity is applied to this
$input-focus-color: $black;
$weight-normal: 400; $weight-normal: 400;
@ -31,6 +34,7 @@ $family-monospace: Hack, $family-monospace;
$text: $grey-light; $text: $grey-light;
$text-strong: $primary; $text-strong: $primary;
$label-color: $text;
$content-heading-color: $text; $content-heading-color: $text;
$hr-background-color: $grey-light; $hr-background-color: $grey-light;

34
src/mail.html
View file

@ -1,15 +1,15 @@
<extends src="./lib/html/base.html"> <extends src="./lib/html/base.html">
<block name="content"> <block name="content">
<h1 class="head-line">Contact Me</h1> <h1 class="title has-text-weight-normal">Contact Me</h1>
<div class="row"> <div class="columns">
<div class="col-md-6"> <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="form-group"> <div class="field">
<label div="control-label" for="mail">Email address</label> <label class="label" for="mail">Email address</label>
<input <input
id="mail" id="mail"
class="form-control" class="input"
type="email" type="email"
placeholder="Your address" placeholder="Your address"
name="mail" name="mail"
@ -17,11 +17,11 @@
/> />
</div> </div>
<div class="form-group"> <div class="field">
<label div="control-label" for="subject">Subject</label> <label class="label" for="subject">Subject</label>
<input <input
id="subject" id="subject"
class="form-control" class="input"
type="text" type="text"
placeholder="E.g. There's a typo on your home page!" placeholder="E.g. There's a typo on your home page!"
name="subject" name="subject"
@ -30,11 +30,11 @@
/> />
</div> </div>
<div class="form-group"> <div class="field">
<label div="control-label" for="message">Message</label> <label class="label" for="message">Message</label>
<textarea <textarea
id="message" id="message"
class="form-control" class="textarea"
type="text" type="text"
rows="6" rows="6"
name="message" name="message"
@ -43,13 +43,15 @@
></textarea> ></textarea>
</div> </div>
<button class="btn btn-primary" type="submit" form="sendmail"> <div class="field">
Send <div class="control">
</button> <button class="button is-link">Send</button>
</div>
</div>
</form> </form>
</div> </div>
<div class="col-md-6"> <div class="column content">
<markdown> <markdown>
Any messages you enter here are directly forwarded to me. I aim to Any messages you enter here are directly forwarded to me. I aim to
respond within a day. respond within a day.