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

Rework website with bulma instead of bootstrap #6

Manually merged
tlater merged 43 commits from tlater/bulma2 into master 2022-08-14 00:26:49 +01:00
Conversation 0 Commits 43 Files changed 60 +88 -59
12 changed files with 88 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 75c4ff6a80 - Show all commits

4
.prettierrc
View file

@ -1,9 +1,11 @@
# -*- yaml -*- # -*- yaml -*-
tabWidth: 4 tabWidth: 4
bracketSameLine: true
overrides: overrides:
- files: "**/*.html" - files: "**/*.html"
options: options:
tabWidth: 2 tabWidth: 2
- files: "**/*.scss"
options:
tabWidth: 2

3
package.json
View file

@ -42,7 +42,8 @@
"serve": "parcel serve --no-autoinstall", "serve": "parcel serve --no-autoinstall",
"watch": "parcel watch --no-autoinstall", "watch": "parcel watch --no-autoinstall",
"build-dist": "parcel build --no-cache --no-autoinstall && rename '.html' '.html.hbs' dist/*.html", "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", "source": "src/index.html",
"browserslist": "> 1%, not dead" "browserslist": "> 1%, not dead"

3
src/index.html
View file

@ -10,7 +10,9 @@
<div class="columns"> <div class="columns">
<div class="column content"> <div class="column content">
<!-- prettier-ignore -->
<markdown> <markdown>
### About Me ### About Me
Looks like you found my website. I suppose introductions are Looks like you found my website. I suppose introductions are
@ -37,6 +39,7 @@
</div> </div>
<div class="column content"> <div class="column content">
<!-- prettier-ignore -->
<markdown> <markdown>
### My Work ### My Work

43
src/lib/html/base.html
View file

@ -1,32 +1,29 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <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> <block name="stylesheets"></block>
<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> <title>tlater.net</title>
</head>
<title>tlater.net</title> <body>
</head> <block name="navigation">
<include src="lib/html/navigation.html"></include>
</block>
<body> <include src="lib/html/message-flash.html"></include>
<block name="navigation">
<include src="lib/html/navigation.html"></include>
</block>
<include src="lib/html/message-flash.html"></include> <block name="content"></block>
<block name="content"></block>
<block name="footer">
<script type="module" src="lib/js/index.ts"></script>
</block>
</body>
<block name="footer">
<script type="module" src="lib/js/index.ts"></script>
</block>
</body>
</html> </html>

20
src/lib/html/navigation.html
View file

@ -1,7 +1,13 @@
<nav class="navbar is-dark" role="navigation" aria-label="main navigation"> <nav class="navbar is-dark" role="navigation" aria-label="main navigation">
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item has-text-primary is-uppercase" href="/">tlater</a> <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> <span aria-hidden="true"></span>
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
@ -9,15 +15,9 @@
</div> </div>
<div id="main-navigation" class="navbar-menu"> <div id="main-navigation" class="navbar-menu">
<div class="navbar-start"> <div class="navbar-start">
<a class="navbar-item" href="~/src/mail.html"> <a class="navbar-item" href="~/src/mail.html"> E-Mail </a>
E-Mail <a class="navbar-item" href="https://www.gitlab.com/tlater"> GitLab </a>
</a> <a class="navbar-item" href="https://www.github.com/TLATER"> GitHub </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>
</div> </div>
</nav> </nav>

12
src/lib/scss/_fonts.scss
View file

@ -30,18 +30,16 @@ $weights: 300, 400, 500, 600, 700;
// a release since https://github.com/source-foundry/Hack/issues/467 // a release since https://github.com/source-foundry/Hack/issues/467
// was resolved. // was resolved.
$variants: $variants: regular 400 normal, bold 700 normal, italic 400 italic,
regular 400 normal,
bold 700 normal,
italic 400 italic,
bolditalic 700 italic; bolditalic 700 italic;
@each $name, $weight, $style in $variants { @each $name, $weight, $style in $variants {
@font-face { @font-face {
font-family: "Hack"; font-family: "Hack";
src: src: url("npm:hack-font/build/web/fonts/hack-#{$name}-subset.woff2?sha=3114f1256")
url("npm:hack-font/build/web/fonts/hack-#{$name}-subset.woff2?sha=3114f1256") format("woff2"), format("woff2"),
url("npm:hack-font/build/web/fonts/hack-#{$name}-subset.woff?sha=3114f1256") format("woff"); url("npm:hack-font/build/web/fonts/hack-#{$name}-subset.woff?sha=3114f1256")
format("woff");
font-weight: $weight; font-weight: $weight;
font-style: $style; font-style: $style;
} }

2
src/lib/scss/_navbar.scss
View file

@ -11,7 +11,7 @@
} }
& .navbar-start > .navbar-item { & .navbar-start > .navbar-item {
color: rgba($white, .75); color: rgba($white, 0.75);
&:hover { &:hover {
background-color: $dark !important; background-color: $dark !important;

14
src/lib/scss/_typed.scss
View file

@ -119,11 +119,15 @@
$delays: 69ms, 83ms, 49ms, 48ms, 52ms, 59ms, 40ms, 71ms, 80ms, 67ms; $delays: 69ms, 83ms, 49ms, 48ms, 52ms, 59ms, 40ms, 71ms, 80ms, 67ms;
@for $animation from 0 through $number { @for $animation from 0 through $number {
$out: list.append($out, ( $out: list.append(
type-#{$id}-#{$animation}, $out,
$animation, (
_sum(_round_robin($delays, $animation)) type-#{$id}-#{$animation},
), $sep); $animation,
_sum(_round_robin($delays, $animation))
),
$sep
);
} }
@return $out; @return $out;

30
src/mail.html
View file

@ -9,17 +9,40 @@
<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 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>
<div class="field"> <div class="field">
<label class="label" for="subject">Subject</label> <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>
<div class="field"> <div class="field">
<label class="label" for="message">Message</label> <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>
<div class="field"> <div class="field">
@ -31,6 +54,7 @@
</div> </div>
<div class="column content"> <div class="column content">
<!-- prettier-ignore -->
<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.

3
src/music/components/indicator.tsx
View file

@ -41,7 +41,8 @@ class Indicator extends React.Component<Props, State> {
<button <button
type="button" type="button"
onClick={this.click.bind(this)} onClick={this.click.bind(this)}
className={button_classes}> className={button_classes}
>
<span className="icon is-medium"> <span className="icon is-medium">
<i className={icon_classes}></i> <i className={icon_classes}></i>
</span> </span>

3
src/music/components/visualizer.tsx
View file

@ -197,7 +197,8 @@ class Visualizer extends React.Component<VisualizerProps, State> {
ref={this.canvas} ref={this.canvas}
style={{ style={{
display: "block", display: "block",
}}></canvas> }}
></canvas>
); );
} }

10
src/music/store/music/types.ts
View file

@ -22,14 +22,12 @@ export const setTitle: (_title: Title) => Action<null, null> = createAction(
"set currently playing title" "set currently playing title"
); );
export const setPlayTime: (_time: number) => Action<null, null> = createAction( export const setPlayTime: (_time: number) => Action<null, null> =
"set the play time" createAction("set the play time");
);
export const toggleMute: () => Action<null, null> = createAction("toggle mute"); export const toggleMute: () => Action<null, null> = createAction("toggle mute");
export const togglePlay: () => Action<null, null> = createAction("toggle play"); export const togglePlay: () => Action<null, null> = createAction("toggle play");
export const setSource: (_source: string) => Action<null, null> = createAction( export const setSource: (_source: string) => Action<null, null> =
"set the title" createAction("set the title");
);