Removed minification

cnoss · Jul 15, 2024 · 4b43d3a · 4b43d3a
1 parent 896f7c3
commit 4b43d3a
Show file tree

Hide file tree

Showing 19 changed files with 146 additions and 19 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -72,6 +72,9 @@ module.exports = function (eleventyConfig) {
 
  // Copy asset images
  eleventyConfig.addPassthroughCopy({'src/assets/images': 'assets/images'});
+
+  // Copy asset icons
+  eleventyConfig.addPassthroughCopy({'src/assets/icons': 'assets/icons'});
 
  // Copy images
  eleventyConfig.addPassthroughCopy('src/presentations/**/images/*.{jpg,png,svg,jpeg, gif}');
@@ -85,6 +88,9 @@ module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy({'src/assets/scripts': 'assets/scripts'});
  eleventyConfig.addWatchTarget("./src/assets/scripts");
 
+ // Copy Manifest
+ eleventyConfig.addPassthroughCopy({'src/manifest.json': 'manifest.json'});
+
  /* Functions
  ########################################################################## */
 
@@ -154,7 +160,7 @@ module.exports = function (eleventyConfig) {
   const dataBackgroundTransition = propData && propData.backgroundTransition ? `data-background-transition="${propData.backgroundTransition}"` : '';
   const classes = propData && propData.classes ? propData.classes : '';
   const buCreditHtml = propData && propData.credit ? `<p class="credit">${propData.credit}</p>` : '';
-  const buHtml = propData && propData.bu ? `<div class="bu"><p>${insertMarkup(propData.bu)}</p></div>` : '';
+  const buHtml = propData && propData.bu ? `<div class="bu"><p>${insertMarkup(md.render(propData.bu))}</p></div>` : '';
   return `<section data-slide-shortcode-class="screenshot" class="image is-fullscreen ${classes}" data-background="${imgSrc}" ${dataTransition} ${dataBackgroundTransition}>${buHtml}</section>`;
  });
 
@@ -255,6 +261,7 @@ module.exports = function (eleventyConfig) {
  if (process.env.ELEVENTY_ENV === 'production') {
   eleventyConfig.addTransform('htmlmin', (content, outputPath) => {
    if (outputPath.endsWith('.html')) {
+    return content;
     return minified = htmlmin.minify(content, {
      collapseInlineTagWhitespace: false,
      collapseWhitespace: true,

diff --git a/src/_layouts/documents.11ty.js b/src/_layouts/documents.11ty.js
@@ -7,6 +7,7 @@ exports.render = function (data) {
       ${this.meta()}
       <link rel="stylesheet" href="${this.url('/assets/main.css')}">
       <link rel="icon" type="image/svg" href="${this.url('/assets/images/preview_black_24dp.svg')}">
+      <link rel="manifest" href="${this.url('/manifest.json')}">
     </head>
     <body class="document">
       <main>

diff --git a/src/assets/icons/android-chrome-192x192.png b/src/assets/icons/android-chrome-192x192.png
diff --git a/src/assets/icons/android-chrome-512x512.png b/src/assets/icons/android-chrome-512x512.png
diff --git a/src/assets/icons/apple-touch-icon.png b/src/assets/icons/apple-touch-icon.png
diff --git a/src/assets/icons/favicon-16x16.png b/src/assets/icons/favicon-16x16.png
diff --git a/src/assets/icons/favicon-32x32.png b/src/assets/icons/favicon-32x32.png
diff --git a/src/assets/icons/favicon.ico b/src/assets/icons/favicon.ico
diff --git a/src/assets/icons/site.webmanifest b/src/assets/icons/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/src/assets/scripts/main.js b/src/assets/scripts/main.js
@@ -15,7 +15,7 @@ const addCopyToClipboard = () => {
     button.textContent = "assignment";
 
     button.addEventListener("click", (ev) => {
-      const text = codeBlock.textContent.replace(/assignment/, "");
+      const text = codeBlock.textContent.replace(/assignment/g, "");
       navigator.clipboard.writeText(text);
     });
     codeBlock.appendChild(button);
@@ -33,6 +33,10 @@ const reorderFooter = () => {
   if(!footer) return;
 
   presentChild.appendChild(footer);
+
+  const bu = presentChild.querySelector(".bu");
+  if(bu) return;
+
   footer.classList.add("is-active");
 }
 

diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css
diff --git a/src/assets/styles/scss/_layouts.scss b/src/assets/styles/scss/_layouts.scss
@@ -492,11 +492,17 @@
     ul{
       li{
         display: block;
+        margin-left: var(--m);
+        line-height: var(--lh-tight);
+        margin-bottom: var(--xs);
+
         &::before{
           content: "–";
           display: inline-block;
           padding-right: var(--half);
           margin-bottom: var(--quat);
+          width: var(--m);
+          margin-left: calc(var(--m) * -1);
         }
       }
     }
@@ -524,7 +530,7 @@
       margin-bottom: var(--xl);
       color: var(--darker);
       font-size: var(--l);
-      line-height: var(--lh-tight);
+      line-height: var(--lh-normal);
       padding-right: var(--s);
 
       & + ul{

diff --git a/src/manifest.json b/src/manifest.json
@@ -0,0 +1,25 @@
+{
+  "id": "cn-slides",
+  "name": "CN Slides",
+  "short_name": "Slides",
+  "start_url": "http://localhost:8080/",
+  "theme_color": "#000000",
+  "background_color": "#000000",
+  "lang": "de-DE",
+  "orientation": "landscape",
+  "display": "standalone",
+  "icons": [
+    {
+      "purpose": "maskable",
+      "sizes": "512x512",
+      "src": "assets/icons/android-chrome-512x512.png",
+      "type": "image/png"
+    },
+    {
+      "purpose": "any",
+      "sizes": "512x512",
+      "src": "assets/icons/android-chrome-512x512.png",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/src/presentations/misc/css-2024/001-ziele.md b/src/presentations/misc/css-2024/001-ziele.md
@@ -3,10 +3,21 @@ title: Das Web
 layout: presentation.11ty.js
 slideClasses: images
 status: ok
+
+ziele: |
+  - kleiner Denkanstoß zum Thema «Lean Web Development» und Web Standards
+  - Einblicke in neue CSS Features mit Gewicht auf «Feel»
+  - neue Features in einen konzeptionellen und kompositorischen Zusammenhang bringen
+  - bissl Spaß haben 👻
+
+disclaimer: |
+  <div class="fragment">Wir werden die meisten Themen, Konzepte & Techniken nur sehr oberflächlich behandeln.</div>
+  <div class="fragment">Viele Technologien sind noch nicht flächendeckend verfügbar und laufen nur auf Chrome.</div>
+  <div class="fragment">Die Inhalte für das Anwendungsbeispiel sind nur für diesen Workshop bestimmt.</div>
 ---
 
 {% interlude "Ziele des Workshops", "", '{"transition":"none"}'  %}
-{% interlude "Web as a Plattform", "", '{"transition":"none"}'  %}
-{% interlude "Web as a Medium", "", '{"transition":"none"}'  %}
+{% simpleText "Ziele des Workshops", ziele, '{"transition":"none"}'  %}
+{% simpleText "Disclaimer ⚠️", disclaimer, '{"transition":"none"}'  %}
 
 
diff --git a/src/presentations/misc/css-2024/020-web.md b/src/presentations/misc/css-2024/020-web.md
@@ -5,8 +5,10 @@ slideClasses: images
 status: ok
 ---
 
-{% interlude "Web as a Technology", "", '{"transition":"none"}'  %}
-{% interlude "Web as a Plattform", "", '{"transition":"none"}'  %}
-{% interlude "Web as a Medium", "", '{"transition":"none"}'  %}
+{% interlude "Web as a Technology?", "", '{"transition":"rotate"}'  %}
+{% interlude "Web as a Plattform?", "", '{"transition":"none"}'  %}
+{% interlude "Web as a Medium?", "", '{"transition":"none"}'  %}
+{% interlude "Web of Functionalities?", "", '{"transition":"none"}'  %}
+{% interlude "Web of Content?", "", '{"transition":"none"}'  %}
 
 
diff --git a/src/presentations/misc/css-2024/700-broken-grid.md b/src/presentations/misc/css-2024/700-broken-grid.md
@@ -0,0 +1,51 @@
+---
+title: Broken Grid via CSS Grid
+layout: presentation.11ty.js
+slideClasses: wrap
+status: ok
+footer: |
+  - [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/)
+
+introtext: |
+  The CSS grid layout module excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives. Like tables, grid layout enables an author to align elements into columns and rows. 
+
+text1: |
+  Outline of a simple grid.
+
+text2: |
+  Adding «brokeability».
+
+
+codeExample1: |
+  .grid{
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 1rem;
+  }
+
+codeExample2: |
+  .grid{
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 1rem;
+    
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-auto-rows: auto;
+  }
+
+  .element-1{
+    grid-column: 1 / 3;
+    grid-row: 1 / 3;
+  }
+
+---
+
+{% interlude "Broken Grid via CSS Grid", "[Global Availability > 97%](https://caniuse.com/css-grid)" %}
+{% screenshotFs "./images/broken-grid-00.jpg", '{"transition":"fade", "classes":"no-shadow", "bu":"[Broken Grid](https://blog.hubspot.com/website/broken-grid-layouts) Example"}', 'fade' %}
+{% simpleText "CSS Grid Layout", introtext %}
+{% codeSmall "CSS Grid Layout", text1, codeExample1, "css", "fade" %}
+{% codeSmall "CSS Grid Layout", text2, codeExample2, "css", "fade" %}
+{% simpleText "🕺🏼", "" %}
+
+
diff --git a/src/presentations/misc/css-2024/900-ausblick.md b/src/presentations/misc/css-2024/900-ausblick.md
@@ -0,0 +1,19 @@
+---
+title: Wie geht's weiter?
+layout: presentation.11ty.js
+slideClasses: wrap
+status: ok
+text: |
+  <ul class="colored-list">
+    <li>Checkout <a href="https://leanweb.dev">The Lean Web</a></li>
+    <li>Checkout <a href="https://io.google/2024/explore/6d6b2a35-ae3a-4f73-b40d-9dc4a8cf0df4/">What's new in the Web, Google I/O Talk from Rachel Andrew</a></li>
+    <li>Checkout <a href="https://io.google/2024/explore/8ae18b72-028e-4722-9a05-4a480048e629/">Multi-page application View Transitions are here, Google I/O Talk from Bramus Van Damme</a></li>
+    <li>Checkout <a href="https://io.google/2024/explore/83764202-1ca2-4491-a731-c4d3701624d4/">The state of CSS and Web UI, Google I/O Talk from Una Kravets</a></li>
+  </ul>
+
+---
+
+{% interlude "Wie geht's weiter?", "" %}
+{% simpleText "Diggin Deeper", text %}
+
+
diff --git a/src/presentations/misc/css-2024/images/broken-grid-00.jpg b/src/presentations/misc/css-2024/images/broken-grid-00.jpg
diff --git a/src/presentations/misc/css-2024/images/broken-grid-01.jpg b/src/presentations/misc/css-2024/images/broken-grid-01.jpg