Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Voeg adventskalenderartikel en ledenpagina van Kilian toe #474

Merged
merged 9 commits into from
Dec 26, 2024
Merged
3 changes: 3 additions & 0 deletions .eleventy.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const { DateTime } = require("luxon");
const pluginAddIdToHeadings = require("@orchidjs/eleventy-plugin-ids");
const pluginRss = require("@11ty/eleventy-plugin-rss");
const brokenLinksPlugin = require("eleventy-plugin-broken-links");
const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");

module.exports = function (eleventyConfig) {
const quick = Boolean(process.env.BUILD_QUICK);
Expand Down Expand Up @@ -80,6 +81,8 @@ module.exports = function (eleventyConfig) {

eleventyConfig.addPlugin(pluginRss);

eleventyConfig.addPlugin(syntaxHighlight);

/**
* Rebuild when any of the files are changed, but exclude css because that is
* handled by the asset pipeline.
Expand Down
1 change: 1 addition & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

202 changes: 202 additions & 0 deletions src/_assets/css/common/code.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,202 @@
pre:has(code) {
position: relative;
display: block;
margin: 1rem -20px;
padding: 20px;

code {
background-color: transparent;
}

&::before {
position: absolute;
right: 20px;
top: 0px;
padding: 0.5rem 0.5rem 0.75rem;
line-height: 1;
font-size: 0.875rem;
content: "";
display: block;
text-align: right;
background: var(--lilac);
color: black;
font-weight: bold;
clip-path: polygon(
0 0,
100% 0,
100% calc(100% - 0.5rem),
50% 100%,
0 calc(100% - 0.5rem)
);
}

&:has(code.language-html)::before {
content: "HTML";
}
&:has(code.language-css)::before {
content: "CSS";
}
&:has(code.language-js)::before {
content: "JS";
}
}

/**
* a11y-dark theme for JavaScript, CSS, and HTML
* Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
* @author ericwbailey
*/

code[class*="language-"],
pre[class*="language-"] {
color: #f8f8f2;
background: none;
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
text-align: left;
white-space: pre;
word-spacing: normal;

word-break: normal;
word-wrap: normal;
line-height: 1.5;

-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;

-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #2b2b2b;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
padding: 0.1em;
border-radius: 0.3em;
white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #d4d0ab;
}

.token.punctuation {
color: #fefefe;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
color: #ffa07a;
}

.token.boolean,
.token.number {
color: #00e0e0;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #abe338;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
color: #00e0e0;
}

.token.atrule,
.token.attr-value,
.token.function {
color: #ffd700;
}

.token.keyword {
color: #00e0e0;
}

.token.regex,
.token.important {
color: #ffd700;
}

.token.important,
.token.bold {
font-weight: bold;
}

.token.italic {
font-style: italic;
}

.token.entity {
cursor: help;
}

@media screen and (-ms-high-contrast: active) {
code[class*="language-"],
pre[class*="language-"] {
color: windowText;
background: window;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: window;
}

.token.important {
background: highlight;
color: window;
font-weight: normal;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.keyword,
.token.operator,
.token.selector {
font-weight: bold;
}

.token.attr-value,
.token.comment,
.token.doctype,
.token.function,
.token.keyword,
.token.operator,
.token.property,
.token.string {
color: highlight;
}

.token.attr-value,
.token.url {
font-weight: normal;
}
}
1 change: 1 addition & 0 deletions src/_assets/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
@import "./common/layout.css";
@import "./common/skiplink.css";
@import "./common/forms.css";
@import "./common/code.css";

@import "./elements/button.css";
@import "./elements/page-navigation.css";
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions src/_components/shortcodes/tag/tag.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.tag {
.tag:not(.token) {
position: relative;
display: inline-flex;
justify-content: space-between;
Expand All @@ -22,10 +22,10 @@

/* Rounded tags, like with { and } */
.tag-curly-braces {
-webkit-clip-path: url(#button-curly-braces);
-webkit-clip-path: url(#button-curly-braces);
clip-path: url(#button-curly-braces);
}

.tag + .tag {
.tag:not(.token) + .tag:not(.token) {
margin-inline-start: 2em;
}
30 changes: 30 additions & 0 deletions src/en/members/kilian-valkhof.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
---
published: true
draft: false
# Jouw naam
title: Kilian Valkhof
# Maak van de key een unieke slug (je voor en achternaam bijvoorbeeld). Hiermee wordt de Nederlandse aan de Engelse versie van deze pagina gekoppeld.
key: kilian-valkhof
date: 2020-11-10
# Als je een afbeelding toevoegt, link dan hier naar de juiste plek:
graphic:
src: /assets/images/member-avatars/kilian-valkhof.jpg
alt: Kilian Valkhof
# Jouw functietitel
jobtitle: 'Product developer'
# Eventueel: jouw huidige werk- of opdrachtgever
employer: 'Polypane browser for developers'
specialties:
- accessibility
- responsive design
- product development
- developer tools
- ux design
---

Kilian is the creator of Polypane, a browser for developers. He has a passion for building tools that make developers' lives easier and more productive.

- [Kilianvalkhof.com](https://kilianvalkhof.com)
- [Polypane.app](https://polypane.app)
- [Superposition.design](https://superposition.design)
- [Fixa11y.com](https://fixa11y.com)
Loading