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">
<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>
</h1>

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

@ -21,6 +21,9 @@ $link: $green;
$link-hover: color.scale($green, $lightness: +10%);
$link-active: 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;
@ -31,6 +34,7 @@ $family-monospace: Hack, $family-monospace;
$text: $grey-light;
$text-strong: $primary;
$label-color: $text;
$content-heading-color: $text;
$hr-background-color: $grey-light;

34
src/mail.html
View file

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