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

Ditch bootstrap for bulma

Browse source
This commit is contained in:
Tristan Daniël Maat 2022-06-21 12:16:33 +01:00
parent 5c72fe455f
commit abe8ee631e
Signed by: tlater
GPG key ID: 49670FD774E43268
13 changed files with 1107 additions and 4223 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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/ cp -r dist $out/
''; '';
postFixup = ''
${pkgs.rename}/bin/rename 's/.html$/.html.hbs/' $out/browser/*.html
'';
node_modules_attrs = { node_modules_attrs = {
buildInputs = with pkgs; [ buildInputs = with pkgs; [
elmPackages.elm
pkg-config pkg-config
python3 python3
vips vips
@ -55,6 +53,8 @@
src = self; src = self;
node_modules_attrs = { node_modules_attrs = {
buildInputs = with pkgs; [ buildInputs = with pkgs; [
elmPackages.elm
pkg-config pkg-config
python3 python3
vips 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", "license": "MIT",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^5.13.1", "@fontsource/arimo": "^4.5.8",
"bootstrap": "^4.5.0", "@fontsource/nunito": "^4.5.9",
"classnames": "^2.2.6", "@fortawesome/fontawesome-free": "^6.1.1",
"immutability-helper": "^3.1.1", "bulma": "^0.9.4",
"jquery": "^3.5.1", "three": "^0.141.0"
"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"
}, },
"devDependencies": { "devDependencies": {
"@babel/preset-env": "^7.18.2", "@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/transformer-sass": "^2.6.1",
"@parcel/validator-typescript": "^2.6.1", "@types/three": "^0.141.0",
"@types/jquery": "^3.5.14", "js-beautify": "^1.14.3",
"@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",
"parcel": "^2.6.1", "parcel": "^2.6.1",
"posthtml-extend": "^0.6.3", "posthtml-extend": "^0.6.3",
"posthtml-favicons": "^1.3.0", "posthtml-favicons": "^1.3.0",
"posthtml-include": "^1.7.4", "posthtml-include": "^1.7.4",
"posthtml-markdownit": "^1.1.0", "posthtml-markdownit": "^1.3.0",
"sass": "^1.52.3", "sass": "^1.52.3"
"typescript": "^4.7.4",
"typescript-language-server": "^0.4.0"
}, },
"scripts": { "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", "serve": "parcel serve --no-autoinstall src/index.html",
"watch": "parcel watch --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" "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>
<block name="content"> <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> $&nbsp;<span class="typed">Welcome to tlater.net!</span>
</h1> </h1>
<hr /> <hr />
<div class="row"> <div class="columns">
<div class="col-md-6"> <div class="column content">
<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
in order. in order.
@ -33,25 +33,25 @@
If not, well, this is also a great place to "meet" me. Have a If not, well, this is also a great place to "meet" me. Have a
nosey! nosey!
#### This Website ### This Website
There is not a whole lot here at the moment. There is not a whole lot here at the moment.
You may find the following interesting though: You may find the following interesting though:
</markdown> </markdown>
<!-- Parcel isn't smart enough to pick up cross-page links if they're in markdown blocks --> <!-- Parcel isn't smart enough to pick up cross-page links if they're in markdown blocks -->
<ul> <!-- <ul> -->
<li> <!-- <li> -->
A <a href="~/src/music_sample.html">little web app</a> showing off <!-- A <a href="~/src/music_sample.html">little web app</a> showing off -->
what WebGL can do in combination with the JavaScript Audio <!-- what WebGL can do in combination with the JavaScript Audio -->
interface. <!-- interface. -->
</li> <!-- </li> -->
</ul> <!-- </ul> -->
</div> </div>
<div class="col-md-6"> <div class="column content">
<markdown> <markdown>
#### My Work ### My Work
I'm a software consultant working for I'm a software consultant working for
[Codethink](https://www.codethink.co.uk) in Manchester, [Codethink](https://www.codethink.co.uk) in Manchester,
@ -86,7 +86,7 @@
</div> </div>
</block> </block>
<block name="footer"> <!-- <block name="footer"> -->
<script type="module" src="./index.ts" defer></script> <!-- <script type="module" src="./index.ts" defer></script> -->
</block> <!-- </block> -->
</extends> </extends>

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

@ -1,10 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class="no-js" lang="en"> <html class="no-js" lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="description" content="tlater.net web server" /> <meta name="description" content="tlater.net web server" />
<meta name="author" contnet="Tristan Daniël Maat" /> <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="icon" href="./icon.svg" type="image/x-icon" />
<link rel="stylesheet" href="~/src/lib/scss/main.scss" /> <link rel="stylesheet" href="~/src/lib/scss/main.scss" />
@ -13,28 +14,18 @@
<title>tlater.net</title> <title>tlater.net</title>
</head> </head>
<body class="d-flex flex-column"> <body class="is-dark">
<block name="navigation"> <block name="navigation">
<include src="lib/html/navigation.html"></include> <include src="lib/html/navigation.html"></include>
</block> </block>
<!-- <include src="lib/html/message-flash.html"></include> -->
<div class="container floating-container"> <section class="section">
<include src="lib/html/message-flash.html"></include> <div class="container">
<block name="content"></block> <block name="content"></block>
</div> </div>
</section>
<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>
<block name="footer"></block> <block name="footer"></block>
</body> </body>
</html> </html>

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

@ -1,31 +1,23 @@
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <nav class="navbar is-dark" role="navigation" aria-label="main navigation">
<div class="container"> <div class="navbar-brand">
<a class="navbar-brand" 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">
<button <span aria-hidden="true"></span>
class="navbar-toggler" <span aria-hidden="true"></span>
type="button" <span aria-hidden="true"></span>
data-toggle="collapse" </a>
data-target="#navbar" </div>
aria-controls="#navbar" <div id="main-navigation" class="navbar-menu">
aria-expanded="false" <div class="navbar-start">
aria-label="Toggle navigation" <a class="navbar-item" href="~/src/mail.html">
> E-Mail
<span class="navbar-toggler-icon"></span> </a>
</button> <a class="navbar-item" href="https://www.gitlab.com/tlater">
GitLab
<div id="navbar" class="navbar-collapse collapse"> </a>
<ul class="navbar-nav mr-auto"> <a class="navbar-item" href="https://www.github.com/TLATER">
<li class="nav-item"> GitHub
<a class="nav-link" href="~/src/mail.html">E-Mail</a> </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>
</div> </div>
</div> </div>
</nav> </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 */ @use "@fontsource/nunito/scss/mixins" as Nunito;
@font-face { @use "@fontsource/arimo/scss/mixins" as Arimo;
font-family: 'Nunito';
font-style: italic; $weights: 300, 400, 500, 600, 700;
font-weight: 400;
src: url('~/src/lib/fonts/nunito-v9-latin-italic.eot'); /* IE9 Compat Modes */ @each $weight in $weights {
src: local('Nunito Italic'), local('Nunito-Italic'), @include Nunito.fontFace(
url('~/src/lib/fonts/nunito-v9-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ $weight: $weight,
url('~/src/lib/fonts/nunito-v9-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ $display: auto,
url('~/src/lib/fonts/nunito-v9-latin-italic.woff') format('woff'), /* Modern Browsers */ $style: normal,
url('~/src/lib/fonts/nunito-v9-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ $fontDir: "~/node_modules/@fontsource/nunito/files"
url('~/src/lib/fonts/nunito-v9-latin-italic.svg#Nunito') format('svg'); /* Legacy iOS */ );
@include Nunito.fontFace(
$weight: $weight,
$display: auto,
$style: italic,
$fontDir: "~/node_modules/@fontsource/nunito/files"
);
} }
/* nunito-regular - latin */ @include Arimo.fontFace(
@font-face { $weight: 400,
font-family: 'Nunito'; $display: auto,
font-style: normal; $style: normal,
font-weight: 400; $fontDir: "~/node_modules/@fontsource/arimo/files"
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 */
}

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 "./_custom-bulma";
/* @import 'fonts'; */
@import 'headings';
html, body { html, body {
height: 100%; height: 100%;