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 +1107 -4223
13 changed files with 1107 additions and 4223 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit abe8ee631e - Show all commits

6
.jsbeautifyrc Normal file
View file

@ -0,0 +1,6 @@
{
"indent_size": 2,
"html": {
"end_with_newline": true
}
}

8
flake.nix
View file

@ -33,12 +33,10 @@
cp -r dist $out/
'';
postFixup = ''
${pkgs.rename}/bin/rename 's/.html$/.html.hbs/' $out/browser/*.html
'';
node_modules_attrs = {
buildInputs = with pkgs; [
elmPackages.elm
pkg-config
python3
vips
@ -55,6 +53,8 @@
src = self;
node_modules_attrs = {
buildInputs = with pkgs; [
elmPackages.elm
pkg-config
python3
vips

5084
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

39
package.json
View file

@ -6,43 +6,28 @@
"license": "MIT",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-free": "^5.13.1",
"bootstrap": "^4.5.0",
"classnames": "^2.2.6",
"immutability-helper": "^3.1.1",
"jquery": "^3.5.1",
"popper.js": "^1.16.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
"redux-act": "^1.8.0",
"three": "^0.127.0"
"@fontsource/arimo": "^4.5.8",
"@fontsource/nunito": "^4.5.9",
"@fortawesome/fontawesome-free": "^6.1.1",
"bulma": "^0.9.4",
"three": "^0.141.0"
},
"devDependencies": {
"@babel/preset-env": "^7.18.2",
"@babel/preset-typescript": "^7.17.12",
"@elm-tooling/elm-language-server": "^2.4.1",
"@parcel/transformer-elm": "^2.6.1",
"@parcel/transformer-sass": "^2.6.1",
"@parcel/validator-typescript": "^2.6.1",
"@types/jquery": "^3.5.14",
"@types/react": "^16.14.28",
"@types/react-dom": "^17.0.17",
"@types/react-redux": "^7.1.24",
"@types/three": "^0.127.1",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"eslint": "^7.32.0",
"@types/three": "^0.141.0",
"js-beautify": "^1.14.3",
"parcel": "^2.6.1",
"posthtml-extend": "^0.6.3",
"posthtml-favicons": "^1.3.0",
"posthtml-include": "^1.7.4",
"posthtml-markdownit": "^1.1.0",
"sass": "^1.52.3",
"typescript": "^4.7.4",
"typescript-language-server": "^0.4.0"
"posthtml-markdownit": "^1.3.0",
"sass": "^1.52.3"
},
"scripts": {
"build": "parcel build --no-autoinstall src/index.html",
"build": "parcel build --no-autoinstall src/index.html && rename '.html' '.html.hbs' dist/browser/*.html",
"serve": "parcel serve --no-autoinstall src/index.html",
"watch": "parcel watch --no-autoinstall src/index.html",
"build-dist": "parcel build --no-cache --no-autoinstall src/index.html; rename '.html' '.html.hbs' dist/browser/*.html"

34
src/index.html
View file

@ -11,16 +11,16 @@
</block>
<block name="content">
<h1 class="head-line">
<h1 class="title head-line has-text-weight-normal is-family-monospace">
$&nbsp;<span class="typed">Welcome to tlater.net!</span>
</h1>
<hr />
<div class="row">
<div class="col-md-6">
<div class="columns">
<div class="column content">
<markdown>
#### About Me
### About Me
Looks like you found my website. I suppose introductions are
in order.
@ -33,25 +33,25 @@
If not, well, this is also a great place to "meet" me. Have a
nosey!
#### This Website
### This Website
There is not a whole lot here at the moment.
You may find the following interesting though:
</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>
<!-- <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 class="col-md-6">
<div class="column content">
<markdown>
#### My Work
### My Work
I'm a software consultant working for
[Codethink](https://www.codethink.co.uk) in Manchester,
@ -86,7 +86,7 @@
</div>
</block>
<block name="footer">
<script type="module" src="./index.ts" defer></script>
</block>
<!-- <block name="footer"> -->
<!-- <script type="module" src="./index.ts" defer></script> -->
<!-- </block> -->
</extends>

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

@ -1,10 +1,11 @@
<!DOCTYPE html>
<html class="no-js" 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" />
<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" />
@ -13,28 +14,18 @@
<title>tlater.net</title>
</head>
<body class="d-flex flex-column">
<body class="is-dark">
<block name="navigation">
<include src="lib/html/navigation.html"></include>
</block>
<div class="container floating-container">
<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>
</div>
<script
type="text/javascript"
src="~/node_modules/jquery/dist/jquery.min.js"
defer
></script>
<script
type="module"
src="~/node_modules/bootstrap/dist/js/bootstrap.min.js"
defer
></script>
<script type="module" src="~/src/lib/js/main.ts" defer></script>
</section>
<block name="footer"></block>
</body>
</html>

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

@ -1,31 +1,23 @@
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="/">tlater</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbar"
aria-controls="#navbar"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbar" class="navbar-collapse collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="~/src/mail.html">E-Mail</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.gitlab.com/tlater">GitLab</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.github.com/TLATER">GitHub</a>
</li>
</ul>
<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">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</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>
</div>
</div>
</nav>

99
src/lib/scss/_custom-bootstrap.scss
View file

@ -1,99 +0,0 @@
@import "~/node_modules/bootstrap/scss/_functions";
@import "~/node_modules/bootstrap/scss/_variables";
@import "~/node_modules/bootstrap/scss/_mixins";
// Theme colors
$green: #2aa889;
$cyan: #99d1ce;
$dark: #11151c;
$colors: (
"green": $green,
"cyan": $cyan
);
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $green,
"info": $cyan,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
// Site colors
$body-bg: #0f0f0f;
$body-color: #dddddd;
// Headers
$headings-font-family: "Nunito", $font-family-base;
h1 {
color: $cyan !important;
}
// Links
$link-hover-color: $green;
a:visited {
color: $green;
}
// hr
$hr-border-color: #dddddd;
// Navbar
$navbar-dark-color: rgba($white, .75);
$navbar-dark-hover-color: rgba($white, 90);
.navbar-dark {
border: 1px solid #080808;
}
.navbar-dark .navbar-brand {
color: $cyan !important;
text-transform: uppercase;
font-family: $headings-font-family;
&:hover {
color: $white !important;
}
}
// Optional
@import "~/node_modules/bootstrap/scss/_root";
@import "~/node_modules/bootstrap/scss/_reboot";
@import "~/node_modules/bootstrap/scss/_type";
@import "~/node_modules/bootstrap/scss/_images";
@import "~/node_modules/bootstrap/scss/_code";
@import "~/node_modules/bootstrap/scss/_grid";
@import "~/node_modules/bootstrap/scss/_tables";
@import "~/node_modules/bootstrap/scss/_forms";
@import "~/node_modules/bootstrap/scss/_buttons";
@import "~/node_modules/bootstrap/scss/_transitions";
@import "~/node_modules/bootstrap/scss/_dropdown";
@import "~/node_modules/bootstrap/scss/_button-group";
@import "~/node_modules/bootstrap/scss/_input-group";
@import "~/node_modules/bootstrap/scss/_custom-forms";
@import "~/node_modules/bootstrap/scss/_nav";
@import "~/node_modules/bootstrap/scss/_navbar";
@import "~/node_modules/bootstrap/scss/_card";
@import "~/node_modules/bootstrap/scss/_breadcrumb";
@import "~/node_modules/bootstrap/scss/_pagination";
@import "~/node_modules/bootstrap/scss/_badge";
@import "~/node_modules/bootstrap/scss/_jumbotron";
@import "~/node_modules/bootstrap/scss/_alert";
@import "~/node_modules/bootstrap/scss/_progress";
@import "~/node_modules/bootstrap/scss/_media";
@import "~/node_modules/bootstrap/scss/_list-group";
@import "~/node_modules/bootstrap/scss/_close";
@import "~/node_modules/bootstrap/scss/_toasts";
@import "~/node_modules/bootstrap/scss/_modal";
@import "~/node_modules/bootstrap/scss/_tooltip";
@import "~/node_modules/bootstrap/scss/_popover";
@import "~/node_modules/bootstrap/scss/_carousel";
@import "~/node_modules/bootstrap/scss/_spinners";
@import "~/node_modules/bootstrap/scss/_utilities";
@import "~/node_modules/bootstrap/scss/_print";

39
src/lib/scss/_custom-bulma.scss Normal file
View file

@ -0,0 +1,39 @@
@use "sass:color";
@use "./_fonts";
@import "bulma/sass/utilities/initial-variables.sass";
@import "bulma/sass/utilities/functions.sass";
$black: #0f0f0f;
$grey-darker: #11151c;
$grey-light: #dddddd;
$white: #ffffff;
$red: #dc322f;
$orange: #d26937;
$yellow: #b58900;
$blue: #195466;
$cyan: #599cab;
$green: #2aa889;
$primary: #99d1ce;
$link: $green;
$link-hover: color.scale($green, $lightness: +10%);
$link-active: color.scale($green, $lightness: +10%);
$link-focus: color.scale($green, $lightness: +10%);
$weight-normal: 400;
$body-background-color: $black;
$family-sans-serif: Nunito, $family-sans-serif;
$text: $grey-light;
$text-strong: $primary;
$content-heading-color: $text;
$hr-background-color: $grey-light;
$hr-height: 1px;
@import "bulma";
@import "./_navbar";

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

@ -1,27 +1,27 @@
/* nunito-italic - latin */
@font-face {
font-family: 'Nunito';
font-style: italic;
font-weight: 400;
src: url('~/src/lib/fonts/nunito-v9-latin-italic.eot'); /* IE9 Compat Modes */
src: local('Nunito Italic'), local('Nunito-Italic'),
url('~/src/lib/fonts/nunito-v9-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('~/src/lib/fonts/nunito-v9-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
url('~/src/lib/fonts/nunito-v9-latin-italic.woff') format('woff'), /* Modern Browsers */
url('~/src/lib/fonts/nunito-v9-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('~/src/lib/fonts/nunito-v9-latin-italic.svg#Nunito') format('svg'); /* Legacy iOS */
@use "@fontsource/nunito/scss/mixins" as Nunito;
@use "@fontsource/arimo/scss/mixins" as Arimo;
$weights: 300, 400, 500, 600, 700;
@each $weight in $weights {
@include Nunito.fontFace(
$weight: $weight,
$display: auto,
$style: normal,
$fontDir: "~/node_modules/@fontsource/nunito/files"
);
@include Nunito.fontFace(
$weight: $weight,
$display: auto,
$style: italic,
$fontDir: "~/node_modules/@fontsource/nunito/files"
);
}
/* nunito-regular - latin */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400;
src: url('~/src/lib/fonts/nunito-v9-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Nunito Regular'), local('Nunito-Regular'),
url('~/src/lib/fonts/nunito-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('~/src/lib/fonts/nunito-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('~/src/lib/fonts/nunito-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
url('~/src/lib/fonts/nunito-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('~/src/lib/fonts/nunito-v9-latin-regular.svg#Nunito') format('svg'); /* Legacy iOS */
}
@include Arimo.fontFace(
$weight: 400,
$display: auto,
$style: normal,
$fontDir: "~/node_modules/@fontsource/arimo/files"
)

7
src/lib/scss/_headings.scss
View file

@ -1,7 +0,0 @@
.head-line {
margin-top: 1rem;
}
.tag-line {
font-size: 1rem;
}

21
src/lib/scss/_navbar.scss Normal file
View file

@ -0,0 +1,21 @@
.navbar.is-dark {
border: 1px solid #000000;
& .navbar-brand > .navbar-item {
font-family: Arimo;
&:hover {
background-color: $dark !important;
color: $white !important;
}
}
& .navbar-start > .navbar-item {
color: rgba($white, .75);
&:hover {
background-color: $dark !important;
color: $white !important;
}
}
}

4
src/lib/scss/main.scss
View file

@ -1,6 +1,4 @@
@import 'custom-bootstrap';
/* @import 'fonts'; */
@import 'headings';
@import "./_custom-bulma";
html, body {
height: 100%;