Rework website with bulma instead of bootstrap #6
|
|
@ -1,9 +1,11 @@
|
|||
# -*- yaml -*-
|
||||
|
||||
tabWidth: 4
|
||||
bracketSameLine: true
|
||||
|
||||
overrides:
|
||||
- files: "**/*.html"
|
||||
options:
|
||||
tabWidth: 2
|
||||
- files: "**/*.scss"
|
||||
options:
|
||||
tabWidth: 2
|
||||
|
|
|
|||
|
|
@ -42,7 +42,8 @@
|
|||
"serve": "parcel serve --no-autoinstall",
|
||||
"watch": "parcel watch --no-autoinstall",
|
||||
"build-dist": "parcel build --no-cache --no-autoinstall && rename '.html' '.html.hbs' dist/*.html",
|
||||
"check": "tsc --noEmit"
|
||||
"check": "tsc --noEmit",
|
||||
"style": "prettier --check src"
|
||||
},
|
||||
"source": "src/index.html",
|
||||
"browserslist": "> 1%, not dead"
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@
|
|||
|
||||
<div class="columns">
|
||||
<div class="column content">
|
||||
<!-- prettier-ignore -->
|
||||
<markdown>
|
||||
|
||||
### About Me
|
||||
|
||||
Looks like you found my website. I suppose introductions are
|
||||
|
|
@ -37,6 +39,7 @@
|
|||
</div>
|
||||
|
||||
<div class="column content">
|
||||
<!-- prettier-ignore -->
|
||||
<markdown>
|
||||
### My Work
|
||||
|
||||
|
|
|
|||
|
|
@ -1,32 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="tlater.net web server" />
|
||||
<meta name="author" contnet="Tristan Daniël Maat" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="./icon.svg" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="~/src/lib/scss/main.scss" />
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="tlater.net web server" />
|
||||
<meta name="author" contnet="Tristan Daniël Maat" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="./icon.svg" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="~/src/lib/scss/main.scss" />
|
||||
<block name="stylesheets"></block>
|
||||
|
||||
<block name="stylesheets"></block>
|
||||
<title>tlater.net</title>
|
||||
</head>
|
||||
|
||||
<title>tlater.net</title>
|
||||
</head>
|
||||
<body>
|
||||
<block name="navigation">
|
||||
<include src="lib/html/navigation.html"></include>
|
||||
</block>
|
||||
|
||||
<body>
|
||||
<block name="navigation">
|
||||
<include src="lib/html/navigation.html"></include>
|
||||
</block>
|
||||
<include src="lib/html/message-flash.html"></include>
|
||||
|
||||
<include src="lib/html/message-flash.html"></include>
|
||||
|
||||
<block name="content"></block>
|
||||
|
||||
<block name="footer">
|
||||
<script type="module" src="lib/js/index.ts"></script>
|
||||
</block>
|
||||
|
||||
</body>
|
||||
<block name="content"></block>
|
||||
|
||||
<block name="footer">
|
||||
<script type="module" src="lib/js/index.ts"></script>
|
||||
</block>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,13 @@
|
|||
<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item has-text-primary is-uppercase" href="/">tlater</a>
|
||||
<a class="navbar-burger" role="button" aria-label="menu" aria-expanded="false" data-target="main-navigation">
|
||||
<a
|
||||
class="navbar-burger"
|
||||
role="button"
|
||||
aria-label="menu"
|
||||
aria-expanded="false"
|
||||
data-target="main-navigation"
|
||||
>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
|
|
@ -9,15 +15,9 @@
|
|||
</div>
|
||||
<div id="main-navigation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item" href="~/src/mail.html">
|
||||
E-Mail
|
||||
</a>
|
||||
<a class="navbar-item" href="https://www.gitlab.com/tlater">
|
||||
GitLab
|
||||
</a>
|
||||
<a class="navbar-item" href="https://www.github.com/TLATER">
|
||||
GitHub
|
||||
</a>
|
||||
<a class="navbar-item" href="~/src/mail.html"> E-Mail </a>
|
||||
<a class="navbar-item" href="https://www.gitlab.com/tlater"> GitLab </a>
|
||||
<a class="navbar-item" href="https://www.github.com/TLATER"> GitHub </a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -30,18 +30,16 @@ $weights: 300, 400, 500, 600, 700;
|
|||
// a release since https://github.com/source-foundry/Hack/issues/467
|
||||
// was resolved.
|
||||
|
||||
$variants:
|
||||
regular 400 normal,
|
||||
bold 700 normal,
|
||||
italic 400 italic,
|
||||
$variants: regular 400 normal, bold 700 normal, italic 400 italic,
|
||||
bolditalic 700 italic;
|
||||
|
||||
@each $name, $weight, $style in $variants {
|
||||
@font-face {
|
||||
font-family: "Hack";
|
||||
src:
|
||||
url("npm:hack-font/build/web/fonts/hack-#{$name}-subset.woff2?sha=3114f1256") format("woff2"),
|
||||
url("npm:hack-font/build/web/fonts/hack-#{$name}-subset.woff?sha=3114f1256") format("woff");
|
||||
src: url("npm:hack-font/build/web/fonts/hack-#{$name}-subset.woff2?sha=3114f1256")
|
||||
format("woff2"),
|
||||
url("npm:hack-font/build/web/fonts/hack-#{$name}-subset.woff?sha=3114f1256")
|
||||
format("woff");
|
||||
font-weight: $weight;
|
||||
font-style: $style;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
}
|
||||
|
||||
& .navbar-start > .navbar-item {
|
||||
color: rgba($white, .75);
|
||||
color: rgba($white, 0.75);
|
||||
|
||||
&:hover {
|
||||
background-color: $dark !important;
|
||||
|
|
|
|||
|
|
@ -119,11 +119,15 @@
|
|||
$delays: 69ms, 83ms, 49ms, 48ms, 52ms, 59ms, 40ms, 71ms, 80ms, 67ms;
|
||||
|
||||
@for $animation from 0 through $number {
|
||||
$out: list.append($out, (
|
||||
type-#{$id}-#{$animation},
|
||||
$animation,
|
||||
_sum(_round_robin($delays, $animation))
|
||||
), $sep);
|
||||
$out: list.append(
|
||||
$out,
|
||||
(
|
||||
type-#{$id}-#{$animation},
|
||||
$animation,
|
||||
_sum(_round_robin($delays, $animation))
|
||||
),
|
||||
$sep
|
||||
);
|
||||
}
|
||||
|
||||
@return $out;
|
||||
|
|
|
|||
|
|
@ -9,17 +9,40 @@
|
|||
<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 />
|
||||
<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 />
|
||||
<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>
|
||||
<textarea
|
||||
id="message"
|
||||
class="textarea"
|
||||
type="text"
|
||||
rows="6"
|
||||
name="message"
|
||||
autocomplete="off"
|
||||
required
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
|
|
@ -31,6 +54,7 @@
|
|||
</div>
|
||||
|
||||
<div class="column content">
|
||||
<!-- prettier-ignore -->
|
||||
<markdown>
|
||||
Any messages you enter here are directly forwarded to me. I aim to
|
||||
respond within a day.
|
||||
|
|
|
|||
|
|
@ -41,7 +41,8 @@ class Indicator extends React.Component<Props, State> {
|
|||
<button
|
||||
type="button"
|
||||
onClick={this.click.bind(this)}
|
||||
className={button_classes}>
|
||||
className={button_classes}
|
||||
>
|
||||
<span className="icon is-medium">
|
||||
<i className={icon_classes}></i>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -197,7 +197,8 @@ class Visualizer extends React.Component<VisualizerProps, State> {
|
|||
ref={this.canvas}
|
||||
style={{
|
||||
display: "block",
|
||||
}}></canvas>
|
||||
}}
|
||||
></canvas>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,14 +22,12 @@ export const setTitle: (_title: Title) => Action<null, null> = createAction(
|
|||
"set currently playing title"
|
||||
);
|
||||
|
||||
export const setPlayTime: (_time: number) => Action<null, null> = createAction(
|
||||
"set the play time"
|
||||
);
|
||||
export const setPlayTime: (_time: number) => Action<null, null> =
|
||||
createAction("set the play time");
|
||||
|
||||
export const toggleMute: () => Action<null, null> = createAction("toggle mute");
|
||||
|
||||
export const togglePlay: () => Action<null, null> = createAction("toggle play");
|
||||
|
||||
export const setSource: (_source: string) => Action<null, null> = createAction(
|
||||
"set the title"
|
||||
);
|
||||
export const setSource: (_source: string) => Action<null, null> =
|
||||
createAction("set the title");
|
||||
|
|
|
|||
Reference in a new issue