diff --git a/_diary/2024-07-29.md b/_diary/2024-07-29.md
new file mode 100644
index 0000000..9a10b4a
--- /dev/null
+++ b/_diary/2024-07-29.md
@@ -0,0 +1,6 @@
+---
+title: Juli 2024
+---
+Oha, schon wieder ein halbes Jahr rum. Die Reakkreditierung der [Medieninformatik Studiengänge](https://www.medieninformatik.th-koeln.de) ist nun wirklich fertig. Danke an alle, die fleißig mitgeholfen haben, allen voran [@matboehmer](https://twitter.com/matboehmer). Wir haben in der Medieninformatik endlich eine ausgiebige Fotosession gemacht. Danke an alle, die mitgewirkt haben, allen voran [Monika Probst](https://monikaprobst.de).
+
+Bei Klickmeister haben wir [ERCO](https://www.erco.com/de/) beim Produkteinführungsprozess unterstützt und der Deutschen Bahn bei der Reisendeninformation geholfen. Ansonsten checken wir gerade die OpenAI API mit verschiedensten kleinen und größeren Tools aus. Macht schon Spaß.
diff --git a/_layouts/default.html b/_layouts/default.html
index 6e7e410..570cf06 100755
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -1,6 +1,6 @@
-
+{% assign description = page.description | default: site.data.settings.basic_settings.description %}
{{ site.data.settings.basic_settings.site_title }} // {{ site.data.settings.basic_settings.site_tagline }}
@@ -14,22 +14,24 @@
<!-- Page Info -->
<link rel="shortcut icon" href="{{ site.data.settings.basic_settings.favicon_image | relative_url }}">
<meta charset="utf-8">
- <meta name="description" content="{{ site.data.settings.basic_settings.description | strip_html | xml_escape }}">
+ <meta name="description" content="{{ description | strip_html | xml_escape }}">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{% if page.url == " /" %}{{ site.data.settings.basic_settings.site_title }} – {{
page.title }}{% else %}{{ page.title }} – {{ site.data.settings.basic_settings.site_title }}{% endif %}">
<meta name="twitter:description"
- content="{{ site.data.settings.basic_settings.description | strip_html | xml_escape }}">
+ content="{{ descriptionn | strip_html | xml_escape }}">
<meta name="twitter:image:src" content="{{ site.data.settings.basic_settings.featured_image | absolute_url }}">
<!-- Facebook OpenGraph -->
<meta property="og:title" content="{% if page.url == " /" %}{{ site.data.settings.basic_settings.site_title }} – {{
page.title }}{% else %}{{ page.title }} – {{ site.data.settings.basic_settings.site_title }}{% endif %}" />
<meta property="og:description"
- content="{{ site.data.settings.basic_settings.description | strip_html | xml_escape }}" />
+ content="{{ description | strip_html | xml_escape }}" />
<meta property="og:image" content="{{ site.data.settings.basic_settings.featured_image | absolute_url }}" />
+
+
</head>
<body class="layout-{{ page.layout }}">
diff --git a/_thoughts/2024-07-28-state-of-css.md b/_thoughts/2024-07-28-state-of-css.md
index fb6dd3b..373a8d7 100644
--- a/_thoughts/2024-07-28-state-of-css.md
+++ b/_thoughts/2024-07-28-state-of-css.md
@@ -2,11 +2,13 @@
title: CSS Features & Concepts in 2024
date: 28-07-2024
layout: text
+description: |
+ Video Workshop zu einigen neuen (und alten) CSS-Features u.A. Scroll Driven Animations, View Transitions & CSS Animations.
---
<div class="section herotext">
- <p>In diesem Workshop werden neue CSS-Features und Konzepte für das Jahr 2024 vorgestellt … nagut, auch ein paar ältere 😉. Dabei liegt der Fokus auf der Verbesserung des <i>Feels</i> einer Website. Wir befassen uns u.A. mit Web Standards & Lean Web Development, Custom Properties, Scroll Driven Animations, View Transitions, CSS Nesting, der Popover API
-und Broken Grid via CSS Grid.</p>
+ <p>In diesem Workshop werden einige neue CSS-Features und Konzepte für das Jahr 2024 vorgestellt … nagut, auch ein paar ältere 😉. Dabei liegt der Fokus auf der Verbesserung des <i>Feels</i> einer Website. Wir befassen uns u.A. mit Web Standards & Lean Web Development, Custom Properties, Scroll Driven Animations, View Transitions, CSS Nesting, der Popover API und Broken Grid via CSS Grid. Dazu gibt es Videos, <a href="https://cnoss.github.io/slides/presentations/misc/css-2024/">Slides</a> und ein <a href="https://github.com/cnoss/state-of-css-2024">Repo mit einer Demo und Challenges zum Üben</a>. </p>
+ <p>Viel Spaß!</p>
</div>
@@ -86,4 +88,62 @@ und Broken Grid via CSS Grid.</p>
## Material
- [Repo mit Demo und Challenges zum üben](https://github.com/cnoss/state-of-css-2024)
-- [Slides zu den Inhalten](https://cnoss.github.io/slides/presentations/misc/css-2024/)
\ No newline at end of file
+<<<<<<< HEAD
+- [Slides zu den Inhalten](https://cnoss.github.io/slides/presentations/misc/css-2024/)
+=======
+- [Slides zu den Inhalten](https://cnoss.github.io/slides/presentations/misc/css-2024/)
+
+## Playgrounds
+Folgende Playgrounds zum Workshop sind auf Codepen verfügbar:
+- [CSS Broken Grid Demo](https://codepen.io/cnoss/pen/poXJXeV)
+- [CSS Popover Demo](https://codepen.io/cnoss/pen/PorqvmY)
+- [CSS Scroll Driven View Timeline Demo](https://codepen.io/cnoss/pen/QWXbVRw)
+- [CSS Scroll Driven Animation Demo](https://codepen.io/cnoss/pen/VwJLxNB)
+- [CSS Transition Demo](https://codepen.io/cnoss/pen/YzoXeXR)
+
+### Weitere Infos & Anregungen
+
+#### Baseline
+- [https://mdn/baseline-unified-view-stable-web-features/](https://developer.mozilla.org/en-US/blog/baseline-unified-view-stable-web-features/)
+- [https://web.dev/baseline](https://web.dev/baseline?hl=de)
+
+#### Custom Properties
+- [Using CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
+- [A Complete Guide to Custom Properties](https://css-tricks.com/a-complete-guide-to-custom-properties/)
+
+#### CSS Nesting
+- [CSS Nesting Module, W3C, 25/06/2024](https://drafts.csswg.org/css-nesting/)
+- [CSS Nesting, MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting)
+- [& nesting selector, MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector)
+
+#### CSS Grid
+- [CSS Grid Layouts, MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout)
+- [A Complete Guide to CSS Grid, CSS Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/)
+
+#### Motion in UI
+- [UI Animation, Interaction Design Foundation](https://www.interaction-design.org/literature/topics/ui-animation#:~:text=Animations%20draw%20attention%20and%20provide,cognitive%20load%20and%20prevent%20disorientation.)
+- [The Role of Animation and Motion in UX, NNg](https://www.nngroup.com/articles/animation-purpose-ux/)
+
+#### CSS Transitions & Keyframe Animations
+- [Using CSS transitions, MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)
+- [An Interactive Guide to CSS Transitions](https://www.joshwcomeau.com/animation/css-transitions/)
+- [Using CSS animations, MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)
+
+#### Scroll Driven Animations
+- [Scroll Driven Animations, Bramus Demo](https://scroll-driven-animations.style/)
+- [CSS scroll-driven animations, MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations)
+
+#### View Transitions
+- [View Transitions API, MDN](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
+- [Explainer Document, WICG](https://github.com/WICG/view-transitions/blob/main/explainer.md)
+
+#### Popover API
+- [Popover API, MDN](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+- [Introducing the popover API, Chrome for Developers](https://developer.chrome.com/blog/introducing-popover-api)
+
+#### Mehr zum Themenblock
+- [The Lean Web](https://leanweb.dev)
+- [What's new in the Web, Google I/O Talk from Rachel Andrew](https://io.google/2024/explore/6d6b2a35-ae3a-4f73-b40d-9dc4a8cf0df4/)
+- [Multi-page application View Transitions are here, Google I/O Talk from Bramus Van Damme](https://io.google/2024/explore/8ae18b72-028e-4722-9a05-4a480048e629/)
+- [The state of CSS and Web UI, Google I/O Talk from Una Kravets](https://io.google/2024/explore/83764202-1ca2-4491-a731-c4d3701624d4/)
+>>>>>>> 844915bff40086548dc80c8dd3e194d5ae49d983
diff --git a/admin/config.yml b/admin/config.yml
index 682f06f..b2ff488 100644
--- a/admin/config.yml
+++ b/admin/config.yml
@@ -27,6 +27,14 @@ collections:
folder: '_checkItOut/'
slug: "{{year}}-{{month}}-{{day}}-{{title}}"
create: true
+ fields:
+ - { label: 'Title', name: 'title', widget: 'string' }
+ - {label: 'Content', name: 'body', widget: 'text'}
+ - name: 'diary'
+ label: 'Diary'
+ folder: '_diary/'
+ slug: "{{year}}-{{month}}-{{day}}"
+ create: true
fields:
- { label: 'Title', name: 'title', widget: 'string' }
- {label: 'Content', name: 'body', widget: 'text'}
\ No newline at end of file