diff --git a/Rakefile b/Rakefile
index f94c9fe..e3242f4 100644
--- a/Rakefile
+++ b/Rakefile
@@ -14,6 +14,18 @@ task :build do
Jekyll::Commands::Build.build(site, config)
end
+desc 'serve the Jekyll project with live reload'
+task :serve do
+ config = Jekyll.configuration(
+ 'watch' => true,
+ 'serving' => true,
+ 'port' => 4000,
+ 'host' => '127.0.0.1'
+ )
+
+ Jekyll::Commands::Serve.process(config)
+end
+
desc 'run playwright tests'
task :test do
sh 'npx playwright test'
diff --git a/_includes/head.html b/_includes/head.html
index df8146b..9599ed7 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -1,18 +1,51 @@
+
-
-
-
- {% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}
-
+
+
+ {% if page.title %}
+ {{ page.title }}
+ {% else %}
+ {{ site.title }}
+ {% endif %}
+
-
-
-
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/css/main.scss b/css/main.scss
index 40e92dd..86c857a 100755
--- a/css/main.scss
+++ b/css/main.scss
@@ -1,54 +1,49 @@
---
# Only the main Sass file needs front matter (the dashes are enough)
-sitemap_exclude: y
+sitemap_exclude: true
---
-@charset "utf-8";
-@use 'sass:color';
-
+@charset "utf-8";
+@use "sass:color";
-// Our variables
+// Variables
$base-font-family: Helvetica, Arial, sans-serif;
-$base-font-size: 16px;
-$small-font-size: $base-font-size * 0.875;
+$base-font-size: 16px;
+$small-font-size: $base-font-size * 0.875;
$base-line-height: 1.5;
-$spacing-unit: 30px;
+$spacing-unit: 30px;
-$text-color: #111;
+$text-color: #111;
$background-color: #fdfdfd;
-$brand-color: #2a7ae2;
+$brand-color: #2a7ae2;
-$grey-color: #828282;
+$grey-color: #828282;
$grey-color-light: color.scale($grey-color, $lightness: 40%);
-$grey-color-dark: color.scale($grey-color, $lightness: -25%);
+$grey-color-dark: color.scale($grey-color, $lightness: -25%);
// Width of the content area
-$content-width: 800px;
-
-$on-palm: 600px;
-$on-laptop: 800px;
+$content-width: 800px;
+$on-palm: 600px;
+$on-laptop: 800px;
-
-// Using media queries with like this:
+// Media query mixin
+// Usage:
// @include media-query($on-palm) {
-// .wrapper {
-// padding-right: calc($spacing-unit / 2);
-// padding-left: calc($spacing-unit / 2);
-// }
+// .wrapper {
+// padding-right: $spacing-unit / 2;
+// padding-left: $spacing-unit / 2;
+// }
// }
@mixin media-query($device) {
- @media screen and (max-width: $device) {
- @content;
- }
+ @media screen and (max-width: $device) {
+ @content;
+ }
}
-
-
// Import partials from `sass_dir` (defaults to `_sass`)
@import
- "base",
- "layout",
- "syntax-highlighting"
-;
+ "base",
+ "layout",
+ "syntax-highlighting";