From a30454a4cef9d52d83e8dde921596614755763ee Mon Sep 17 00:00:00 2001
From: Fabricius Seifert <fabricius.seifert@neuland-bfi.de>
Date: Thu, 13 Jun 2024 15:22:02 +0200
Subject: [PATCH] clean up

---
 src/components/content/Listings.astro         | 106 -----------
 .../content/TechnologicalChallenges.astro     | 173 ------------------
 src/components/content/TodoMVC.astro          |   5 +-
 3 files changed, 4 insertions(+), 280 deletions(-)
 delete mode 100644 src/components/content/Listings.astro

diff --git a/src/components/content/Listings.astro b/src/components/content/Listings.astro
deleted file mode 100644
index 0d92cf9..0000000
--- a/src/components/content/Listings.astro
+++ /dev/null
@@ -1,106 +0,0 @@
----
----
-
-<div class="mb-8">
-  <h3 class="font-bold text-text-heading text-2xl md:text-3xl pt-4 pb-2 w-fit overflow-hidden" data-annotate="underline">
-    What do all implementations have in common?
-  </h3>
-  <ul class="mt-5 unset md:flex md:flex-wrap">
-    <li class="p-3 basis-1/2 md:flex md:flex-row">
-      <svg class="mr-auto ml-auto" xmlns="http://www.w3.org/2000/svg"  width="90" height="32" viewBox="0 0 24 24"><path class="svg-dark" d="M6 11q-2.075 0-3.537-1.463T1 6q0-2.1 1.463-3.55T6 1q2.1 0 3.55 1.45T11 6q0 2.075-1.45 3.538T6 11m8 12v-9h9v9zm3.725-15.3L7.7 17.7q.125.3.212.625T8 19q0 1.25-.862 2.125T5 22q-1.25 0-2.125-.875T2 19q0-1.275.875-2.137T5 16q.35 0 .675.088t.625.212l10-10.025q-.125-.3-.213-.613T16 5q0-1.275.875-2.137T19 2q1.275 0 2.138.863T22 5q0 1.25-.862 2.125T19 8q-.35 0-.663-.088t-.612-.212"/></svg>
-      <div class="pl-2">
-        <strong>Team boundaries</strong>
-        <p>The webshop is divided into three systems. Each owned by a dedicated team.</p>
-      </div>
-    </li>
-    <li class="p-3 basis-1/2 md:flex md:flex-row">
-      <svg class="mr-auto ml-auto"  xmlns="http://www.w3.org/2000/svg"  width="110" height="32" viewBox="0 0 24 24"><path class="svg-light dark:svg-transparent" d="m15.55 11l2.76-5H6.16l2.37 5z"/><path class="svg-dark" d="M15.55 13c.75 0 1.41-.41 1.75-1.03l3.58-6.49A.996.996 0 0 0 20.01 4H5.21l-.94-2H1v2h2l3.6 7.59l-1.35 2.44C4.52 15.37 5.48 17 7 17h12v-2H7l1.1-2zM6.16 6h12.15l-2.76 5H8.53zM7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2s-.9-2-2-2m10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2s2-.9 2-2s-.9-2-2-2"/></svg>
-      <div class="pl-2">
-        <strong>Features & content</strong>
-        <p>From an end-users perspective, all implementations should look and work the same.</p>
-      </div>
-    </li>
-    <li class="p-3 basis-1/2 md:flex md:flex-row">
-      <svg class="mr-auto ml-auto"  xmlns="http://www.w3.org/2000/svg"  width="150" height="32" viewBox="0 0 24 24"><path class="svg-light dark:svg-transparent" d="m19.28 8.6l-.7-1.21l-1.27.51l-1.06.43l-.91-.7c-.39-.3-.8-.54-1.23-.71l-1.06-.43l-.16-1.13L12.7 4h-1.4l-.19 1.35l-.16 1.13l-1.06.44c-.41.17-.82.41-1.25.73l-.9.68l-1.05-.42l-1.27-.52l-.7 1.21l1.08.84l.89.7l-.14 1.13c-.03.3-.05.53-.05.73s.02.43.05.73l.14 1.13l-.89.7l-1.08.84l.7 1.21l1.27-.51l1.06-.43l.91.7c.39.3.8.54 1.23.71l1.06.43l.16 1.13l.19 1.36h1.39l.19-1.35l.16-1.13l1.06-.43c.41-.17.82-.41 1.25-.73l.9-.68l1.04.42l1.27.51l.7-1.21l-1.08-.84l-.89-.7l.14-1.13c.04-.31.05-.52.05-.73c0-.21-.02-.43-.05-.73l-.14-1.13l.89-.7zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4s4 1.79 4 4s-1.79 4-4 4"/><path class="svg-dark" d="M19.43 12.98c.04-.32.07-.64.07-.98c0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46a.5.5 0 0 0-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.488.488 0 0 0 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1a.566.566 0 0 0-.18-.03c-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46a.5.5 0 0 0 .61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03c.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64zm-1.98-1.71c.04.31.05.52.05.73c0 .21-.02.43-.05.73l-.14 1.13l.89.7l1.08.84l-.7 1.21l-1.27-.51l-1.04-.42l-.9.68c-.43.32-.84.56-1.25.73l-1.06.43l-.16 1.13l-.2 1.35h-1.4l-.19-1.35l-.16-1.13l-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7l-1.06.43l-1.27.51l-.7-1.21l1.08-.84l.89-.7l-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13l-.89-.7l-1.08-.84l.7-1.21l1.27.51l1.04.42l.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43l.16-1.13l.2-1.35h1.39l.19 1.35l.16 1.13l1.06.43c.43.18.83.41 1.23.71l.91.7l1.06-.43l1.27-.51l.7 1.21l-1.07.85l-.89.7zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4s4-1.79 4-4s-1.79-4-4-4m0 6c-1.1 0-2-.9-2-2s.9-2 2-2s2 .9 2 2s-.9 2-2 2"/></svg>
-      <div class="pl-2">
-        <strong>Framework-agnostic integration</strong>
-        <p>Although it's common, that adjacent teams use the same technologies, they must be able to evolve or change their tech-stack independently.</p>
-      </div>
-    </li>
-    <li class="p-3 basis-1/2 md:flex md:flex-row">
-      <svg class="mr-auto ml-auto" xmlns="http://www.w3.org/2000/svg"  width="150" height="32" viewBox="0 0 24 24"><path class="svg-light dark:svg-transparent" d="M3 15h.78c.55-.61 1.34-1 2.22-1s1.67.39 2.22 1H15V6H3z"/><path class="svg-dark" d="M17 8V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18c-.55 0-1-.45-1-1s.45-1 1-1s1 .45 1 1s-.45 1-1 1m9-3H8.22c-.55-.61-1.33-1-2.22-1s-1.67.39-2.22 1H3V6h12zm3 3c-.55 0-1-.45-1-1s.45-1 1-1s1 .45 1 1s-.45 1-1 1m-1-6V9.5h2.5l1.96 2.5z"/></svg>
-      <div class="pl-2">
-        <strong>Independent deployment</strong>
-        <p>Teams must be able to develop, test and deliver new features without consulting other teams or touching their code.</p>
-      </div>
-    </li>
-  </ul>
-</div>
-
-<div class="mb-8">
-  <h3 class="font-bold text-text-heading text-2xl md:text-3xl pt-4 pb-2 w-fit overflow-hidden" data-annotate="underline">
-    Technological challenges
-  </h3>
-  <ul class="mt-5 unset md:flex md:flex-wrap">
-    <li class="p-3 basis-1/3">
-      <img src="images/differences/stackCombinations.svg" typeof="foaf:Image" class="mb-5" />
-      <div class="flex flex-row">
-        <img src="images/icons/stackCombinations.svg" typeof="foaf:Image" class="size-10 lg:size-16"/>
-        <div class="pl-2">
-          <strong>Technology stack combinations</strong>
-          <p>Seeing the same app implemented with different JavaScript frameworks was the fascinating core of TodoMVC. Here we zoom out one level and compare how micro frontends built with different tech-stacks can be integrated.</p>
-        </div>
-      </div>
-    </li>
-    <li class="p-3 basis-1/3">
-      <img src="images/differences/shell.svg" typeof="foaf:Image" class="mb-5" />
-      <div class="flex flex-row">
-        <img src="images/icons/shell.svg" typeof="foaf:Image" class="size-10 lg:size-16"/>
-        <div class="pl-2">
-          <strong>Shell or no shell</strong>
-          <p>Having a central application shell is a popular pattern, but it's not a requirement for building a micro frontends applications. Building a  decentralized setup of self-contained systems that adhere to a set of rules is as valid as a meta-framework based solution.</p>
-        </div>
-      </div>
-    </li>
-    <li class="p-3 basis-1/3">
-      <img src="images/differences/rendering.svg" typeof="foaf:Image" class="mb-5" />
-      <div class="flex flex-row">
-        <img src="images/icons/rendering.svg" typeof="foaf:Image" class="size-10 lg:size-16"/>
-        <div class="pl-2">
-          <strong>Server or client rendered</strong>
-          <p>If you render your application on the server, the client or both has a huge impact on your architecture and the required integration techniques.</p>
-        </div>
-      </div>
-    </li>
-    <li class="p-3 basis-1/3">
-      <img src="images/differences/communication.svg" typeof="foaf:Image" class="mb-5" />
-      <div class="flex flex-row">
-        <img src="images/icons/communication.svg" typeof="foaf:Image" class="size-10 lg:size-16"/>
-        <div class="pl-2">
-          <strong>Communication patterns</strong>
-          <p>Browser events, event-bus, URL parameter, shared state, via server or through your application shell? There are many ways to implement inter-team communication across micro frontends.</p>
-        </div>
-      </div>
-    </li>
-    <li class="p-3 basis-1/3 ">
-      <img src="images/differences/deployment.svg" typeof="foaf:Image" class="mb-5" />
-      <div class="flex flex-row">
-        <img src="images/icons/deployment.svg" typeof="foaf:Image" class="size-10 lg:size-16"/>
-        <div class="pl-2">
-          <strong>Deployment technique</strong>
-          <p>The tractor store example is designed in a way that it can be deployed in a containerized, serverless or static way. There are also specialized micro frontend hosting platforms that solve specific architecture-related problems. Being able to compare different deployment variants for the same application is a valuable resource.</p>
-        </div>
-      </div>
-    </li>
-    <li class="p-3 basis-1/3">
-      <img src="images/differences/shared.svg" typeof="foaf:Image" class="mb-5" />
-      <div class="flex flex-row">
-        <img src="images/icons/shared.svg" typeof="foaf:Image" class="size-10 lg:size-16"/>
-        <div class="pl-2">
-          <strong>Bonus: Shared UI components</strong>
-          <p>The tractor store example can also be used to verify how a common design system can be implemented. In many projects, this is a core challenge when migrating to a micro frontends architecture. The "button" component is a suitable first candidate to unify.</p>
-        </div>
-      </div>
-    </li>
-  </ul>
-</div>
\ No newline at end of file
diff --git a/src/components/content/TechnologicalChallenges.astro b/src/components/content/TechnologicalChallenges.astro
index 3ee7184..4a5b328 100644
--- a/src/components/content/TechnologicalChallenges.astro
+++ b/src/components/content/TechnologicalChallenges.astro
@@ -1,117 +1,6 @@
 ---
 ---
 
-<div class="mb-8">
-  <h3
-    class="font-bold text-text-heading text-2xl md:text-3xl pt-4 pb-2 w-fit overflow-hidden"
-    data-annotate="underline"
-  >
-    What do all implementations have in common?
-  </h3>
-  <ul class="mt-5 unset md:flex md:flex-wrap">
-    <li class="p-3 basis-1/2 md:flex md:flex-row">
-      <svg
-        class="mr-auto ml-auto"
-        xmlns="http://www.w3.org/2000/svg"
-        width="90"
-        height="32"
-        viewBox="0 0 24 24"
-      >
-        <path
-          class="svg-dark"
-          d="M6 11q-2.075 0-3.537-1.463T1 6q0-2.1 1.463-3.55T6 1q2.1 0 3.55 1.45T11 6q0 2.075-1.45 3.538T6 11m8 12v-9h9v9zm3.725-15.3L7.7 17.7q.125.3.212.625T8 19q0 1.25-.862 2.125T5 22q-1.25 0-2.125-.875T2 19q0-1.275.875-2.137T5 16q.35 0 .675.088t.625.212l10-10.025q-.125-.3-.213-.613T16 5q0-1.275.875-2.137T19 2q1.275 0 2.138.863T22 5q0 1.25-.862 2.125T19 8q-.35 0-.663-.088t-.612-.212"
-        >
-        </path>
-      </svg>
-      <div class="pl-2">
-        <strong>Team boundaries</strong>
-        <p>
-          The webshop is divided into three systems. Each owned by a dedicated
-          team.
-        </p>
-      </div>
-    </li>
-    <li class="p-3 basis-1/2 md:flex md:flex-row">
-      <svg
-        class="mr-auto ml-auto"
-        xmlns="http://www.w3.org/2000/svg"
-        width="110"
-        height="32"
-        viewBox="0 0 24 24"
-      >
-        <path
-          class="svg-light dark:svg-transparent"
-          d="m15.55 11l2.76-5H6.16l2.37 5z"
-        >
-        </path><path
-          class="svg-dark"
-          d="M15.55 13c.75 0 1.41-.41 1.75-1.03l3.58-6.49A.996.996 0 0 0 20.01 4H5.21l-.94-2H1v2h2l3.6 7.59l-1.35 2.44C4.52 15.37 5.48 17 7 17h12v-2H7l1.1-2zM6.16 6h12.15l-2.76 5H8.53zM7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2s-.9-2-2-2m10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2s2-.9 2-2s-.9-2-2-2"
-        >
-        </path>
-      </svg>
-      <div class="pl-2">
-        <strong>Features & content</strong>
-        <p>
-          From an end-users perspective, all implementations should look and
-          work the same.
-        </p>
-      </div>
-    </li>
-    <li class="p-3 basis-1/2 md:flex md:flex-row">
-      <svg
-        class="mr-auto ml-auto"
-        xmlns="http://www.w3.org/2000/svg"
-        width="150"
-        height="32"
-        viewBox="0 0 24 24"
-      >
-        <path
-          class="svg-light dark:svg-transparent"
-          d="m19.28 8.6l-.7-1.21l-1.27.51l-1.06.43l-.91-.7c-.39-.3-.8-.54-1.23-.71l-1.06-.43l-.16-1.13L12.7 4h-1.4l-.19 1.35l-.16 1.13l-1.06.44c-.41.17-.82.41-1.25.73l-.9.68l-1.05-.42l-1.27-.52l-.7 1.21l1.08.84l.89.7l-.14 1.13c-.03.3-.05.53-.05.73s.02.43.05.73l.14 1.13l-.89.7l-1.08.84l.7 1.21l1.27-.51l1.06-.43l.91.7c.39.3.8.54 1.23.71l1.06.43l.16 1.13l.19 1.36h1.39l.19-1.35l.16-1.13l1.06-.43c.41-.17.82-.41 1.25-.73l.9-.68l1.04.42l1.27.51l.7-1.21l-1.08-.84l-.89-.7l.14-1.13c.04-.31.05-.52.05-.73c0-.21-.02-.43-.05-.73l-.14-1.13l.89-.7zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4s4 1.79 4 4s-1.79 4-4 4"
-        >
-        </path><path
-          class="svg-dark"
-          d="M19.43 12.98c.04-.32.07-.64.07-.98c0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46a.5.5 0 0 0-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.488.488 0 0 0 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1a.566.566 0 0 0-.18-.03c-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46a.5.5 0 0 0 .61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03c.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64zm-1.98-1.71c.04.31.05.52.05.73c0 .21-.02.43-.05.73l-.14 1.13l.89.7l1.08.84l-.7 1.21l-1.27-.51l-1.04-.42l-.9.68c-.43.32-.84.56-1.25.73l-1.06.43l-.16 1.13l-.2 1.35h-1.4l-.19-1.35l-.16-1.13l-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7l-1.06.43l-1.27.51l-.7-1.21l1.08-.84l.89-.7l-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13l-.89-.7l-1.08-.84l.7-1.21l1.27.51l1.04.42l.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43l.16-1.13l.2-1.35h1.39l.19 1.35l.16 1.13l1.06.43c.43.18.83.41 1.23.71l.91.7l1.06-.43l1.27-.51l.7 1.21l-1.07.85l-.89.7zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4s4-1.79 4-4s-1.79-4-4-4m0 6c-1.1 0-2-.9-2-2s.9-2 2-2s2 .9 2 2s-.9 2-2 2"
-        >
-        </path>
-      </svg>
-      <div class="pl-2">
-        <strong>Framework-agnostic integration</strong>
-        <p>
-          Although it's common, that adjacent teams use the same technologies,
-          they must be able to evolve or change their tech-stack independently.
-        </p>
-      </div>
-    </li>
-    <li class="p-3 basis-1/2 md:flex md:flex-row">
-      <svg
-        class="mr-auto ml-auto"
-        xmlns="http://www.w3.org/2000/svg"
-        width="150"
-        height="32"
-        viewBox="0 0 24 24"
-      >
-        <path
-          class="svg-light dark:svg-transparent"
-          d="M3 15h.78c.55-.61 1.34-1 2.22-1s1.67.39 2.22 1H15V6H3z"
-        >
-        </path><path
-          class="svg-dark"
-          d="M17 8V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18c-.55 0-1-.45-1-1s.45-1 1-1s1 .45 1 1s-.45 1-1 1m9-3H8.22c-.55-.61-1.33-1-2.22-1s-1.67.39-2.22 1H3V6h12zm3 3c-.55 0-1-.45-1-1s.45-1 1-1s1 .45 1 1s-.45 1-1 1m-1-6V9.5h2.5l1.96 2.5z"
-        >
-        </path>
-      </svg>
-      <div class="pl-2">
-        <strong>Independent deployment</strong>
-        <p>
-          Teams must be able to develop, test and deliver new features without
-          consulting other teams or touching their code.
-        </p>
-      </div>
-    </li>
-  </ul>
-</div>
-
 <div class="mb-8">
   <h3
     class="font-bold text-text-heading text-2xl md:text-3xl pt-4 pb-2 w-fit overflow-hidden"
@@ -127,17 +16,6 @@
         class="mb-5"
       />
       <div class="md:flex md:items-start">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-          <path
-            class="svg-light dark:svg-transparent"
-            d="M7.02 19c-1.1 0-2-.9-2-2s.9-2 2-2s2 .9 2 2s-.9 2-2 2M19 19h-4v-4h4zM7 6.12L8.6 9H5.4zm10 2.23c-1.45-1.22-3-2.4-3-3.1c0-.43.35-.75.75-.75c.31 0 .52.17.73.37L17 6.3l1.52-1.43c.21-.2.42-.37.73-.37c.4 0 .75.32.75.75c0 .7-1.55 1.88-3 3.1"
-          >
-          </path><path
-            class="svg-dark"
-            d="M7.02 13c-2.21 0-4 1.79-4 4s1.79 4 4 4s4-1.79 4-4s-1.79-4-4-4m0 6c-1.1 0-2-.9-2-2s.9-2 2-2s2 .9 2 2s-.9 2-2 2M13 13v8h8v-8zm6 6h-4v-4h4zM7 2l-5 9h10zm0 4.12L8.6 9H5.4zM19.25 2.5c-1.06 0-1.81.56-2.25 1.17c-.44-.61-1.19-1.17-2.25-1.17C13.19 2.5 12 3.78 12 5.25c0 2 2.42 3.42 5 5.75c2.58-2.33 5-3.75 5-5.75c0-1.47-1.19-2.75-2.75-2.75M17 8.35c-1.45-1.22-3-2.4-3-3.1c0-.43.35-.75.75-.75c.31 0 .52.17.73.37L17 6.3l1.52-1.43c.21-.2.42-.37.73-.37c.4 0 .75.32.75.75c0 .7-1.55 1.88-3 3.1"
-          >
-          </path>
-        </svg>
         <div class="pl-2">
           <strong>Technology stack combinations</strong>
           <p>
@@ -156,13 +34,6 @@
         class="mb-5"
       />
       <div class="md:flex md:items-start">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-          <path
-            class="svg-dark"
-            d="M3 5h2V3c-1.1 0-2 .9-2 2m0 8h2v-2H3zm4 8h2v-2H7zM3 9h2V7H3zm10-6h-2v2h2zm6 0v2h2c0-1.1-.9-2-2-2M5 21v-2H3c0 1.1.9 2 2 2m-2-4h2v-2H3zM9 3H7v2h2zm2 18h2v-2h-2zm8-8h2v-2h-2zm0 8c1.1 0 2-.9 2-2h-2zm0-12h2V7h-2zm0 8h2v-2h-2zm-4 4h2v-2h-2zm0-16h2V3h-2zM7 17h10V7H7zm2-8h6v6H9z"
-          >
-          </path>
-        </svg>
         <div class="pl-2">
           <strong>Shell or no shell</strong>
           <p>
@@ -181,17 +52,6 @@
         class="mb-5"
       />
       <div class="md:flex md:items-start">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
-          <path
-            class="svg-light dark:svg-transparent"
-            d="m15 3l-3 1.29v13.68l3-1.29z"
-          >
-          </path><path
-            class="svg-dark"
-            d="M20 3h-3c0-1.44-1.47-2.4-2.79-1.84l-3 1.29C10.48 2.76 10 3.49 10 4.29V19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-8 1.29L15 3v13.68l-3 1.29zM20 19h-5.33l1.12-.48c.73-.32 1.21-1.04 1.21-1.84V5h3zM2 3h2v2H2zm0 16h2v2H2zm0-4h2v2H2zm0-4h2v2H2zm0-4h2v2H2zm4-4h2v2H6zm0 16h2v2H6z"
-          >
-          </path>
-        </svg>
         <div class="pl-2">
           <strong>Server or client rendered</strong>
           <p>
@@ -209,17 +69,6 @@
         class="mb-5"
       />
       <div class="md:flex md:items-start">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
-          <path
-            class="svg-light dark:svg-transparent"
-            d="m6.6 19.32l-1.06 1.06L2 16.85l1.06-1.06zm2.12-2.12l-1.06 1.06l-3.54-3.54l1.06-1.06zm4.95-4.95l-1.41 1.41l-3.54-3.54l1.41-1.41zm4.59-4.59L17.2 8.72l-3.54-3.54l1.06-1.06zm2.12-2.12L19.32 6.6l-3.54-3.54L16.85 2z"
-          >
-          </path><path
-            class="svg-dark"
-            d="m15.44.59l-3.18 3.18c-.78.78-.78 2.05 0 2.83l1.24 1.24l-.71.71l-1.24-1.25c-.78-.78-2.05-.78-2.83 0L7.3 8.72c-.78.78-.78 2.05 0 2.83l1.24 1.24l-.71.71l-1.23-1.25c-.78-.78-2.05-.78-2.83 0L.59 15.43c-.78.78-.78 2.05 0 2.83l3.54 3.54c.78.78 2.05.78 2.83 0l3.18-3.18c.78-.78.78-2.05 0-2.83L8.9 14.55l.71-.71l1.24 1.24c.78.78 2.05.78 2.83 0l1.41-1.41c.78-.78.78-2.05 0-2.83L13.84 9.6l.71-.71l1.24 1.24c.78.78 2.05.78 2.83 0l3.18-3.18c.78-.78.78-2.05 0-2.83L18.26.58c-.78-.78-2.04-.78-2.82.01M6.6 19.32l-1.06 1.06L2 16.85l1.06-1.06zm2.12-2.12l-1.06 1.06l-3.54-3.54l1.06-1.06zm4.95-4.95l-1.41 1.41l-3.54-3.54l1.41-1.41zm4.59-4.59L17.2 8.72l-3.54-3.54l1.06-1.06zm2.12-2.12L19.32 6.6l-3.54-3.54L16.85 2zM21 14h2a9 9 0 0 1-9 9v-2c3.87 0 7-3.13 7-7m-4 0h2c0 2.76-2.24 5-5 5v-2c1.66 0 3-1.34 3-3"
-          >
-          </path>
-        </svg>
         <div class="pl-2">
           <strong>Communication patterns</strong>
           <p>
@@ -237,17 +86,6 @@
         class="mb-5"
       />
       <div class="md:flex md:items-start">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-          <path
-            class="svg-light dark:svg-transparent"
-            d="m19.21 12.04l-1.53-.11l-.3-1.5A5.484 5.484 0 0 0 12 6C9.94 6 8.08 7.14 7.12 8.96l-.5.95l-1.07.11A3.99 3.99 0 0 0 2 14c0 2.21 1.79 4 4 4h13c1.65 0 3-1.35 3-3c0-1.55-1.22-2.86-2.79-2.96"
-          >
-          </path><path
-            class="svg-dark"
-            d="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5c0-2.64-2.05-4.78-4.65-4.96M19 18H6c-2.21 0-4-1.79-4-4c0-2.05 1.53-3.76 3.56-3.97l1.07-.11l.5-.95A5.469 5.469 0 0 1 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5l1.53.11A2.98 2.98 0 0 1 22 15c0 1.65-1.35 3-3 3"
-          >
-          </path>
-        </svg>
         <div class="pl-2">
           <strong>Deployment technique</strong>
           <p>
@@ -268,17 +106,6 @@
         class="mb-5"
       />
       <div class="md:flex md:items-start">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-          <path
-            class="svg-light dark:svg-transparent"
-            d="m15.91 9.28l-1.3-1.3L5 17.59V19h1.41l9.61-9.61zm-5.08-.35l-1.2-1.2l-1.19 1.19L7.02 7.5l1.19-1.18l-1.27-1.28l-1.9 1.9l3.89 3.89zm5.44 5.45l-1.2-1.21l-1.9 1.9l3.89 3.89l1.9-1.9l-1.27-1.27l-1.19 1.19l-1.42-1.41zm-.25-7.822l1.415-1.414l1.414 1.414l-1.414 1.414z"
-          >
-          </path><path
-            class="svg-dark"
-            d="m20.97 5.86l-2.83-2.83a.996.996 0 0 0-1.41 0l-4.49 4.49l-3.89-3.89c-.78-.78-2.05-.78-2.83 0l-1.9 1.9c-.78.78-.78 2.05 0 2.83l3.89 3.89L3 16.76V21h4.24l4.52-4.52l3.89 3.89c.95.95 2.23.6 2.83 0l1.9-1.9c.78-.78.78-2.05 0-2.83l-3.89-3.89l4.49-4.49a.993.993 0 0 0-.01-1.4M5.04 6.94l1.89-1.9L8.2 6.31L7.02 7.5l1.41 1.41l1.19-1.19l1.2 1.2l-1.9 1.9zM6.41 19H5v-1.41l9.61-9.61l1.3 1.3l.11.11zm10.09-2.02l1.19-1.19l1.27 1.27l-1.9 1.9l-3.89-3.89l1.9-1.9l1.2 1.2l-1.19 1.19zm.94-9l-1.41-1.41l1.41-1.41l1.41 1.41z"
-          >
-          </path>
-        </svg>
         <div class="pl-2">
           <strong>Bonus: Shared UI components</strong>
           <p>
diff --git a/src/components/content/TodoMVC.astro b/src/components/content/TodoMVC.astro
index f31b34a..4eba780 100644
--- a/src/components/content/TodoMVC.astro
+++ b/src/components/content/TodoMVC.astro
@@ -90,9 +90,12 @@
   }
 
   .text {
-    @media (max-width: 999px) {
+    @media (max-width: 499px) {
       grid-column: 1 / -1;
     }
+    @media (min-width: 500px) and (max-width: 999px) {
+      grid-column: 2 / -2;
+    }
     @media (min-width: 1000px) {
       grid-column: 8 / -1;
     }