Ditch bootstrap for bulma
parent
5c72fe455f
commit
abe8ee631e
GPG Key ID:
49670FD774E43268
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"indent_size": 2,
|
||||
"html": {
|
||||
"end_with_newline": true
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
39
package.json
39
package.json
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -11,16 +11,16 @@
|
|||
</block>
|
||||
|
||||
<block name="content">
|
||||
<h1 class="head-line">
|
||||
<h1 class="title head-line has-text-weight-normal is-family-monospace">
|
||||
$ <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>
|
||||
|
|
|
|||
|
|
@ -1,40 +1,31 @@
|
|||
<!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" />
|
||||
<link rel="icon" href="./icon.svg" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="~/src/lib/scss/main.scss" />
|
||||
|
||||
<block name="stylesheets"></block>
|
||||
<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" />
|
||||
|
||||
<title>tlater.net</title>
|
||||
</head>
|
||||
<block name="stylesheets"></block>
|
||||
|
||||
<body class="d-flex flex-column">
|
||||
<block name="navigation">
|
||||
<include src="lib/html/navigation.html"></include>
|
||||
</block>
|
||||
<title>tlater.net</title>
|
||||
</head>
|
||||
|
||||
<div class="container floating-container">
|
||||
<include src="lib/html/message-flash.html"></include>
|
||||
<body class="is-dark">
|
||||
<block name="navigation">
|
||||
<include src="lib/html/navigation.html"></include>
|
||||
</block>
|
||||
<!-- <include src="lib/html/message-flash.html"></include> -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<block name="content"></block>
|
||||
</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>
|
||||
</body>
|
||||
|
||||
<block name="footer"></block>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
@ -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";
|
||||
|
|
@ -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"
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
.head-line {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.tag-line {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,4 @@
|
|||
@import 'custom-bootstrap';
|
||||
/* @import 'fonts'; */
|
||||
@import 'headings';
|
||||
@import "./_custom-bulma";
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
|
|
|
|||
Reference in New Issue