diff --git a/src/_components/shortcodes/tag/tag.css b/src/_components/shortcodes/tag/tag.css index 156b7809..1b1c55b6 100644 --- a/src/_components/shortcodes/tag/tag.css +++ b/src/_components/shortcodes/tag/tag.css @@ -1,31 +1,31 @@ .tag:not(.token) { - position: relative; - display: inline-flex; - justify-content: space-between; - padding: 0.5em 1em; - margin: 0 1em; - background: var(--lilac-light); - font-size: var(--font-size-12); + position: relative; + /* display: inline-flex; */ + /* justify-content: space-between; */ + padding: 0.5em 1em; + margin: 0 1em; + background: var(--lilac-light); + font-size: var(--font-size-12); } /* Angled tags, like with < and > */ .tag-angle { - -webkit-clip-path: url(#button-greater-than); - clip-path: url(#button-greater-than); + -webkit-clip-path: url(#button-greater-than); + clip-path: url(#button-greater-than); } /* Rounded tags, like with ( and ) */ .tag-parentheses { - -webkit-clip-path: url(#button-parentheses); - clip-path: url(#button-parentheses); + -webkit-clip-path: url(#button-parentheses); + clip-path: url(#button-parentheses); } /* Rounded tags, like with { and } */ .tag-curly-braces { - -webkit-clip-path: url(#button-curly-braces); - clip-path: url(#button-curly-braces); + -webkit-clip-path: url(#button-curly-braces); + clip-path: url(#button-curly-braces); } .tag:not(.token) + .tag:not(.token) { - margin-inline-start: 2em; + margin-inline-start: 2em; } diff --git a/src/_includes/layouts/home.liquid b/src/_includes/layouts/home.liquid index 54c1b8cb..72e34e3b 100644 --- a/src/_includes/layouts/home.liquid +++ b/src/_includes/layouts/home.liquid @@ -30,7 +30,7 @@ {%- include partials/homepage/latest-blogs headerlvl:"h2" partialTitle:translations[locale].blockTitles.latestBlogs -%} {%- endif -%} - {%- if members.length > 10 -%} + {%- if members.length > 8 -%} {%- include partials/homepage/proud-members headerlvl:"h2" partialTitle:translations[locale].blockTitles.proudMembers -%} {%- endif -%} diff --git a/src/_includes/partials/blogpost.css b/src/_includes/partials/blogpost.css index b2f6de16..dac1eb7b 100644 --- a/src/_includes/partials/blogpost.css +++ b/src/_includes/partials/blogpost.css @@ -1,209 +1,218 @@ .blog { - background: white; - block-size: 100%; - margin-block-end: var(--spacing-double); + background: white; + block-size: 100%; + margin-block-end: var(--spacing-double); } @media (min-width: 54.875em) { - .blog:has(> .blog-graphic-wrapper) { - margin-block-end: 0; - - display: grid; - grid-template-columns: 300px 1fr max-content; - grid-template-areas: - 'image content content' - 'image byline byline' - 'image . readmore'; - } - - .blog { - max-height: 360px; - margin-block-end: 0; - display: grid; - grid-template-columns: 1fr max-content; - grid-template-areas: - 'content content' - 'byline byline' - '. readmore'; - } + .blog:has(> .blog-graphic-wrapper) { + margin-block-end: 0; + + display: grid; + grid-template-columns: 300px 1fr max-content; + grid-template-areas: + 'image content content' + 'image byline byline' + 'image . readmore'; + } + + .blog { + max-height: 360px; + margin-block-end: 0; + display: grid; + grid-template-columns: 1fr max-content; + grid-template-areas: + 'content content' + 'byline byline' + '. readmore'; + } } .blog .h { - margin: 0; + margin: 0; } .blog-graphic { - block-size: 100%; - inline-size: 100%; - object-fit: cover; - object-position: center; - aspect-ratio: 4 / 2; + block-size: 100%; + inline-size: 100%; + object-fit: cover; + object-position: center; + aspect-ratio: 4 / 2; } @media (min-width: 54.875em) { - .blog-graphic-wrapper { - grid-area: image; - block-size: 200px; - } + .blog-graphic-wrapper { + grid-area: image; + block-size: 200px; + } } .blog-1 .blog-graphic { - -webkit-clip-path: url(#greater-than-down-small); - clip-path: url(#greater-than-down-small); + -webkit-clip-path: url(#greater-than-down-small); + clip-path: url(#greater-than-down-small); } .blog-2 .blog-graphic { - -webkit-clip-path: url(#curly-brace-down-small); - clip-path: url(#curly-brace-down-small); + -webkit-clip-path: url(#curly-brace-down-small); + clip-path: url(#curly-brace-down-small); } .blog-3 .blog-graphic { - -webkit-clip-path: url(#parenthesis-down-small); - clip-path: url(#parenthesis-down-small); + -webkit-clip-path: url(#parenthesis-down-small); + clip-path: url(#parenthesis-down-small); } .blog-content { - padding: var(--spacing); - padding-block-end: 0; - height: 100%; + padding: var(--spacing); + padding-block-end: 0; + height: 100%; - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } @media (min-width: 54.875em) { - .blog-content { - grid-area: content; - } + .blog-content { + grid-area: content; + } } .blog-content p { - margin-block-end: 0; + margin-block-end: 0; } .blog-summary { - display: -webkit-box; - -webkit-box-orient: vertical; - overflow: hidden; - -webkit-line-clamp: 5; - line-clamp: 5; + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + -webkit-line-clamp: 5; + line-clamp: 5; - font-size: var(--font-size-18); - line-height: 1.5; + font-size: var(--font-size-18); + line-height: 1.5; } .blog-meta { -padding-inline: var(--spacing); -padding-block-start: 0; -margin-top: var(--spacing); + padding-inline: var(--spacing); + padding-block-start: 0; + margin-top: var(--spacing); } .blog-author { - padding-inline-end: var(--spacing); + padding-inline-end: var(--spacing); } .blog-time { - padding-inline-end: var(--spacing); + padding-inline-end: var(--spacing); } .blog-readmore { - text-align: right; + text-align: right; } .blog-tags { - list-style-type: none; - margin: 0; - padding: 0; - margin-block-start: var(--spacing); - margin-block-end: var(--spacing); + list-style-type: none; + margin: 0; + padding: 0; + margin-block-start: var(--spacing); + margin-block-end: var(--spacing); } .blog-tags li { -display: inline-block; + display: inline-block; +} + +.blog-tags li:first-child { + margin-inline-start: 0; +} - + li { - margin-left: 1rem; - } +.blog-tags li + li { + margin-inline-start: 1rem; +} + +.blog-tags .tag-link { + margin-block: 0; + transform: translateY(2px); } .accent-block { - background-color: var(--lilac-light); - padding: 1em; + background-color: var(--lilac-light); + padding: 1em; } @media all and (min-width: 46.875rem) { - .blog { - flex-direction: row; - } - - .blog-graphic-wrapper { - block-size: 100%; - inline-size: 100%; - flex: 0 0 300px; - text-align: center; - background-size: cover; - max-width: 300px; - } - - .blog-summary { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 4; - line-clamp: 4; - } - - .blog-meta { - display: flex; - justify-content: flex-start; - flex-wrap: wrap; - align-items: center; - justify-content: flex-start; - padding-block-end: 0; - margin-block-start: var(--spacing); - margin-block-end: var(--spacing); - } - - .blog-readmore { - grid-area: readmore; - } - - .blog-tags { - margin: 0; - } - - .blog-1 .blog-graphic { - -webkit-clip-path: url(#greater-than-right-small); - clip-path: url(#greater-than-right-small); - } - - .blog-2 .blog-graphic { - -webkit-clip-path: url(#curly-brace-right-small); - clip-path: url(#curly-brace-right-small); - } - - .blog-3 .blog-graphic { - -webkit-clip-path: url(#parenthesis-right-small); - clip-path: url(#parenthesis-right-small); - } + .blog { + flex-direction: row; + } + + .blog-graphic-wrapper { + block-size: 100%; + inline-size: 100%; + flex: 0 0 300px; + text-align: center; + background-size: cover; + max-width: 300px; + } + + .blog-summary { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 4; + line-clamp: 4; + } + + .blog-meta { + display: flex; + justify-content: flex-start; + flex-wrap: wrap; + align-items: center; + justify-content: flex-start; + padding-block-end: 0; + margin-block-start: var(--spacing); + margin-block-end: var(--spacing); + } + + .blog-readmore { + grid-area: readmore; + } + + .blog-tags { + margin: 0; + } + + .blog-1 .blog-graphic { + -webkit-clip-path: url(#greater-than-right-small); + clip-path: url(#greater-than-right-small); + } + + .blog-2 .blog-graphic { + -webkit-clip-path: url(#curly-brace-right-small); + clip-path: url(#curly-brace-right-small); + } + + .blog-3 .blog-graphic { + -webkit-clip-path: url(#parenthesis-right-small); + clip-path: url(#parenthesis-right-small); + } } @media all and (min-width: 52.875rem) { - .blog-summary { - -webkit-line-clamp: 4; - line-clamp: 4; - } + .blog-summary { + -webkit-line-clamp: 4; + line-clamp: 4; + } } @media all and (min-width: 54.875rem) { - .blog-summary { - -webkit-line-clamp: 5; - line-clamp: 5; - } + .blog-summary { + -webkit-line-clamp: 5; + line-clamp: 5; + } } @media all and (min-width: 60.875rem) { - .blog-summary { - -webkit-line-clamp: 5; - line-clamp: 5; - } + .blog-summary { + -webkit-line-clamp: 5; + line-clamp: 5; + } } diff --git a/src/_includes/partials/member.css b/src/_includes/partials/member.css index a0abd223..80a03bfb 100644 --- a/src/_includes/partials/member.css +++ b/src/_includes/partials/member.css @@ -1,53 +1,55 @@ .member { - block-size: 100%; + block-size: 100%; } .member-graphic { - inline-size: 150px; - block-size: 150px; - border-radius: 50%; - display: block; - margin: 0px auto; - object-fit: cover; - z-index: 2; + inline-size: 150px; + block-size: 150px; + border-radius: 50%; + display: block; + margin: 0px auto; + object-fit: cover; + z-index: 2; } .member-header { - text-align: center; - position: relative; - z-index: 2; - inline-size: 100%; - display: grid; - grid-template-rows: repeat(3, 75px); + text-align: center; + position: relative; + z-index: 2; + inline-size: 100%; + display: grid; + grid-template-rows: repeat(3, 75px); } .member-name { - grid-column: 1 / 1; - grid-row: 2 / 4; - z-index: 1; - background-color: var(--yellow); - padding-top: 75px; + grid-column: 1 / 1; + grid-row: 2 / 4; + z-index: 1; + background-color: var(--yellow); + padding-top: 75px; } .member-header-1 .member-header-graphic { - background-color: var(--red); + background-color: var(--red); } .member-header-2 .member-header-graphic { - background-color: var(--lilac); + background-color: var(--lilac); } .member-header-3 .member-header-graphic { - background-color: var(--yellow); + background-color: var(--yellow); } .member-content { - background-color: white; - padding: var(--spacing); + background-color: white; + padding: var(--spacing); } .member-content .tag { margin-block-end: var(--spacing-half); + text-align: center; + width: max-content; } .backlinks { @@ -65,27 +67,35 @@ font-style: italic; } +.member-specialties { + display: grid; + grid-auto-flow: dense; + grid-template-columns: max-content min-content; + place-content: space-around; + gap: 1em; +} + @media all and (min-width: 46.875em) { - .member { - background: transparent; - } + .member { + background: transparent; + } - .member-content { - -webkit-clip-path: url(#parenthesis-down-small); - clip-path: url(#parenthesis-down-small); - position: relative; - top: -40px; - padding: calc(var(--spacing) * 2) var(--spacing); - min-height: 200px; - } + .member-content { + -webkit-clip-path: url(#parenthesis-down-small); + clip-path: url(#parenthesis-down-small); + position: relative; + top: -40px; + padding: calc(var(--spacing) * 2) var(--spacing); + min-height: 200px; + } - .member:hover .member-content, - .member:focus .member-content { - z-index: 1; - } + .member:hover .member-content, + .member:focus .member-content { + z-index: 1; + } - /* duplicate, to avoid issues in IE11 */ - .member:focus-within .member-content { - z-index: 1; - } + /* duplicate, to avoid issues in IE11 */ + .member:focus-within .member-content { + z-index: 1; + } } diff --git a/src/en/blog/2024/12/at-the-helm-as-a-front-end-lead-developer.md b/src/en/blog/2024/12/at-the-helm-as-a-front-end-lead-developer.md index ad91e7f9..0bcbd237 100644 --- a/src/en/blog/2024/12/at-the-helm-as-a-front-end-lead-developer.md +++ b/src/en/blog/2024/12/at-the-helm-as-a-front-end-lead-developer.md @@ -4,7 +4,7 @@ date: 2024-12-29 author: Arjan Eising summary: What does it take to be a front-end lead developer? An overview, personal experiences, tips, and tricks. categories: - - Advent calender + - Advent Calendar key: advent-2024-arjan --- diff --git a/src/en/blog/2024/12/microanimations.md b/src/en/blog/2024/12/microanimations.md index 980b81b1..73202b05 100644 --- a/src/en/blog/2024/12/microanimations.md +++ b/src/en/blog/2024/12/microanimations.md @@ -4,7 +4,7 @@ date: 2024-12-30 author: Anke Willems summary: "Add micro animations to your site to give it that little bit extra." categories: - - Adventskalender + - Advent Calendar key: microanimations-awillems-en --- diff --git a/src/en/blog/2024/12/webxr-the-react-way.md b/src/en/blog/2024/12/webxr-the-react-way.md index e4a868a8..96da8911 100644 --- a/src/en/blog/2024/12/webxr-the-react-way.md +++ b/src/en/blog/2024/12/webxr-the-react-way.md @@ -4,7 +4,7 @@ date: 2024-12-25 author: Ruben van der Leun summary: "Discover how to build immersive Virtual and Augmented Reality experiences using WebXR and React. It's easier than you think!" categories: - - Adventskalender + - Advent Calendar key: advent-2024-rvdleun --- It's December again, and so are the holidays. Personally, I’m hoping that some Virtual Reality headsets have made their way under the Christmas tree this year. As a developer, you might be thinking about creating your own immersive experiences. If you’ve searched for tutorials, you’ve probably found plenty about Unity or Unreal—tools that might feel unfamiliar if your background is in web development. diff --git a/src/en/blog/2025/01/complete-your-team.md b/src/en/blog/2025/01/complete-your-team.md index 2d105c68..3e2a5914 100644 --- a/src/en/blog/2025/01/complete-your-team.md +++ b/src/en/blog/2025/01/complete-your-team.md @@ -4,7 +4,7 @@ date: 2025-01-04 author: Tim Severien summary: "When looking at codebases or web-based products, we can learn a lot about their authors, their priorities, which technologies were used, and more. Unfortunately, we can also identify skill gaps and afterthoughts. In fact, you don’t have to be a developer to spot these, as they regularly hinder regular usage. Run some websites through Lighthouse and we find a myriad of issues — often performance and accessibility-related. Why do so many websites have the same flaws?" categories: - - Adventcalendar + - Advent Calendar key: advent-2024-tim --- diff --git a/src/nl/blog/2025/01/autofill-met-het-autocomplete-attribuut.md b/src/nl/blog/2025/01/autofill-met-het-autocomplete-attribuut.md index 02f2b657..d1839a6a 100644 --- a/src/nl/blog/2025/01/autofill-met-het-autocomplete-attribuut.md +++ b/src/nl/blog/2025/01/autofill-met-het-autocomplete-attribuut.md @@ -2,7 +2,7 @@ title: Autofill met het autocomplete attribuut date: 2025-01-06 author: Edwin Martin -summary: "Maak het invullen van formulieren veel gemakkelijker voor de gebruiker met autofill" +summary: "Maak het invullen van formulieren veel gemakkelijker voor de gebruiker met autofill." categories: - Adventskalender key: 12days2024-autofill diff --git a/src/nl/blog/2025/01/goede-voornemens.md b/src/nl/blog/2025/01/goede-voornemens.md new file mode 100644 index 00000000..7833ce97 --- /dev/null +++ b/src/nl/blog/2025/01/goede-voornemens.md @@ -0,0 +1,18 @@ +--- +title: 'Fronteers heeft goede voornemens - en jouw hulp nodig!' +date: 2025-01-07 # jjjj - mm - dd +author: Josee Wouters +summary: 'Een nieuw jaar, nieuwe goede voornemens. Wij hebben er wel eentje: wij willen dit jaar elke maand een Fronteers meetup organiseren. Ambitieus? Ja, absoluut! Daarom hebben wij jouw hulp nodig. ' +categories: + - Vrijwilligers + - Fronteers +key: every-month-meetup-help-wanted +--- +We zoeken mensen die ons willen helpen een meetup te organiseren. Dat kan op verschillende manieren, even in een notendop: +1) Achter de schermen. Jij helpt ons contact leggen met potentiele locaties en sprekers +2) In real life. Jij bent het aanspreekpunt namens Fronteers bij de meetup. +3) Als locatie. Jij verzorgt de ruimte en het eten. + +Dit betekent dat je dus nooit in je eentje verantwoordelijk bent voor de organisatie, er zijn altijd verschillende mensen die je helpen en aan wie je vragen kunt stellen. Hierbij is veel ruimte voor eigen inbreng als je dat wil. + +Spreekt een van deze rollen je aan? Geweldig! Neem dan snel contact met ons op. [E-mail de marketingcommissie](marketing@fronteers.nl) of tag ons in [Slack](https://join.slack.com/t/fronteersnl/shared_invite/zt-1m0mbjbkh-LyrZgCPr1JzWBeASuTcnog) met @marketing ! diff --git a/src/nl/leden/index.md b/src/nl/leden/index.md index f34a9b66..eac1eb81 100644 --- a/src/nl/leden/index.md +++ b/src/nl/leden/index.md @@ -1,5 +1,6 @@ --- title: Leden key: members_overview +excludeFromCollection: true --- Op dit moment heeft Fronteers meer dan {{ members-list.length }} leden. [Ook lid worden](/nl/word-lid)? diff --git a/src/nl/leden/specialiteit.md b/src/nl/leden/specialiteit.md index 50b414e2..cc621d1f 100644 --- a/src/nl/leden/specialiteit.md +++ b/src/nl/leden/specialiteit.md @@ -1,3 +1,4 @@ --- title: Freelancers gesorteerd op specialiteit +excludeFromCollection: true --- diff --git a/utils/collections.js b/utils/collections.js index ac1038ec..c61a6d4e 100644 --- a/utils/collections.js +++ b/utils/collections.js @@ -74,7 +74,8 @@ function published_members(locale) { .filter((post) => Boolean(post.date <= now)) .filter((post) => Boolean(!post.data.draft)) .filter((post) => Boolean(!post.data.excludeFromCollection)) - .filter((post) => Boolean(post.data.locale == locale)); + .filter((post) => Boolean(post.data.locale == locale)) + .sort(() => Math.random() - 0.5); }; function activity_categories(locale) {