Ditch bootstrap for bulma

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

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>

View file

@ -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>

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>

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";

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";

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"
)

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;
}
}
}

View file

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