{{ blog.title }}
diff --git a/src/assets/css/blocks/code.css b/src/assets/css/blocks/code.css
index 48b0f71..8e1a7e3 100644
--- a/src/assets/css/blocks/code.css
+++ b/src/assets/css/blocks/code.css
@@ -82,11 +82,11 @@ pre[class*='language-'] {
}
.token.attr-value {
- color: #c3e88d;
+ color: #80cbc4;
}
.token.attribute {
- color: #c3e88d;
+ color: #80cbc4;
}
.token.boolean {
@@ -110,11 +110,11 @@ pre[class*='language-'] {
}
.token.class-name {
- color: #f2ff00;
+ color: #ff8b59;
}
.token.color {
- color: #f2ff00;
+ color: #ff8b59;
}
.token.comment {
@@ -126,7 +126,7 @@ pre[class*='language-'] {
}
.token.deleted {
- color: #f07178;
+ color: #ee979c;
}
.token.doctype {
@@ -134,7 +134,7 @@ pre[class*='language-'] {
}
.token.entity {
- color: #f07178;
+ color: #ee979c;
}
.token.function {
@@ -142,7 +142,7 @@ pre[class*='language-'] {
}
.token.hexcode {
- color: #f2ff00;
+ color: #ff8b59;
}
.token.id {
@@ -181,27 +181,27 @@ pre[class*='language-'] {
}
.token.pseudo-class {
- color: #c3e88d;
+ color: #80cbc4;
}
.token.pseudo-element {
- color: #c3e88d;
+ color: #80cbc4;
}
.token.punctuation {
- color: #89ddff;
+ color: #80cbc4;
}
.token.regex {
- color: #f2ff00;
+ color: #ff8b59;
}
.token.selector {
- color: #f07178;
+ color: #ee979c;
}
.token.string {
- color: #c3e88d;
+ color: #f48ea2;
}
.token.symbol {
@@ -209,11 +209,11 @@ pre[class*='language-'] {
}
.token.tag {
- color: #f07178;
+ color: #ee979c;
}
.token.unit {
- color: #f07178;
+ color: #ee979c;
}
.token.url {
@@ -221,7 +221,7 @@ pre[class*='language-'] {
}
.token.variable {
- color: #f07178;
+ color: #ee979c;
}
.codepen {
diff --git a/src/assets/css/utilities/region.css b/src/assets/css/utilities/region.css
index c19d3e8..de157a7 100644
--- a/src/assets/css/utilities/region.css
+++ b/src/assets/css/utilities/region.css
@@ -1,9 +1,9 @@
/**
- * REGION
- * Add consistent vertical padding to create regions of content
+ * REGION
+ * Add consistent vertical padding to create regions of content
* Can either be configured by setting --region-space or use a default from the space scale
*/
.region {
- padding-top: var(--region-space, var(--space-l-2xl));
- padding-bottom: var(--region-space, var(--space-l-2xl));
+ padding-top: var(--region-space-top, var(--space-l-2xl));
+ padding-bottom: var(--region-space-bottom, var(--space-l-2xl));
}
diff --git a/src/pages/index.md b/src/pages/index.md
index 16ca1c6..4e63388 100644
--- a/src/pages/index.md
+++ b/src/pages/index.md
@@ -5,13 +5,13 @@ description: 'Key principles using modern CSS, fluid type, fluid space, flexible
layout: 'home'
blog:
title: 'Blog'
- intro: "I'm showing the last 4 blog posts!"
+ intro: "I'm showing the last 4 blog posts, but there might be more!"
---
## An Eleventy starter
This (opiniated) [Eleventy](https://www.11ty.dev/) starter is based on [Andy Bell's](https://twitter.com/piccalilli_) talk 'Be the browser’s mentor, not its micromanager' and it's companion website buildexcellentwebsit.es.
-In his words, it's about hinting the browser rather than micromanaging it, using progressive enhancement, CSS layout, fluid type & spaceing, as well as modern CSS features.
+In his words, it's about hinting the browser rather than micromanaging it, using progressive enhancement, CSS layout, fluid type & spacing, as well as modern CSS features.
This way we can shape frontends that look good to everyone, regardless of device, connection speed or context.
diff --git a/src/pages/privacy.md b/src/pages/privacy.md
index edecfd2..e9b1e33 100644
--- a/src/pages/privacy.md
+++ b/src/pages/privacy.md
@@ -9,11 +9,24 @@ layout: page
Edit your details in `_data/meta.js`
+I respect the EU General Data Protection Regulation (GDPR) and this policy document explains how I collect and handle any information you provide to me.
+
+**What background data is collected?**
+This site does not use any third party tracking scripts.
+
+**How do I use the data you provide?**
+This website does not collect any data.
+
+**How secure is your data?**
+Very secure, as this website does not collect any information.
+
+**How secure is this website?**
+This website transmits itself using HTTPS, encrypting all data between the browser and the server. Your network provider can still see that you are downloading assets from this site, but not its content. This also protects you from third parties intercepting data, for example, while browsing on public WiFi, or from network providers injecting advertisements on this site. All relevant response HTTP headers are set for your protection and the Content Security Policy is adjusted to this websites requirements.
+
**Data controller**
{{ meta.address.firma }}
{{ meta.address.street }}
-{{ meta.address.zip }}, {{ meta.address.city }},
-
+{{ meta.address.zip }}, {{ meta.address.city }}
Tel:
{{ meta.address.mobileDisplay }}
Mail:
{{ meta.address.email }}
diff --git a/src/posts/2022-09-01-post-with-code.md b/src/posts/2022-09-01-post-with-code.md
index 05234a0..fec3063 100644
--- a/src/posts/2022-09-01-post-with-code.md
+++ b/src/posts/2022-09-01-post-with-code.md
@@ -7,8 +7,28 @@ date: 2022-09-01
This theme uses 11ty's [Syntax Highlighting Plugin](https://www.11ty.dev/docs/plugins/syntaxhighlight/), a pack of Eleventy plugins for PrismJS syntax highlighting. No browser/client JavaScript, highlight transformations are all done at build-time.
```js
-function myFunction() {
- return true;
+const cards = [...document.querySelectorAll('.card')];
+cards.forEach(card => {
+ card.style.cursor = 'pointer';
+ let down,
+ up,
+ link = card.querySelector('a');
+ card.onmousedown = () => (down = +new Date());
+ card.onmouseup = () => {
+ up = +new Date();
+ if (up - down < 200) {
+ link.click();
+ }
+ };
+});
+```
+
+```css
+form {
+ display: flex;
+ align-items: flex-end;
+ flex-wrap: wrap;
+ gap: 16px;
}
```