diff --git a/src/components/README.md b/src/components/README.md
new file mode 100644
index 0000000..db6af4d
--- /dev/null
+++ b/src/components/README.md
@@ -0,0 +1,35 @@
+# Readme
+
+Contains all the applications components.
+
+Instead of including the styling in the component itself you can also use an style import in the component.
+- Upside: you get syntax highlighting
+- Downside: hot-update or hot-reload doesn't work for these styles.
+
+```css
+/* optional: put this in footer.css */
+.footer {
+    position: relative;
+    width: 100%;
+}
+
+.footer-container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+```
+
+```ts
+// and import in the footer.ts component
+import footerCss from './footer.css';
+// console.log(footerCss);
+```
+
+## Read data from the DOM tag
+
+```ts
+// take attribute content and put it inside the info span
+const text = this.getAttribute('data-text');
+const div = document.createElement('div');
+div.textContent = text;
+```
diff --git a/src/components/footer.css b/src/components/footer.css
deleted file mode 100644
index c459dba..0000000
--- a/src/components/footer.css
+++ /dev/null
@@ -1,26 +0,0 @@
-.footer {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    padding: 0.5rem;
-}
-
-.footer-container {
-    max-width: 1200px;
-    margin: 0 auto;
-}
-
-.footer div {
-    padding: 5px 0;
-}
-
-.footer div div a {
-    display: block;
-    width: 280px;
-}
-
-.footer-text {
-    font-size: 0.75rem;
-    color: lightgrey;
-}
diff --git a/src/components/footer.ts b/src/components/footer.ts
index caee2a6..07dbda0 100644
--- a/src/components/footer.ts
+++ b/src/components/footer.ts
@@ -1,4 +1,44 @@
-import footerCss from './footer.css';
+const footerCss = `
+.footer {
+    position: relative;
+    width: 100%;
+}
+
+.footer-container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.footer div {
+    padding: 0.3rem 0;
+}
+
+.footer div div a {
+    display: block;
+    width: 230px;
+}
+
+.footer-text {
+    font-size: 0.75rem;
+    color: lightgrey;
+}
+
+@media only screen and (min-width: 400px) {
+    .footer div div a {
+        width: 350px;
+    }
+}
+
+@media only screen and (min-height: 700px) {
+    .footer {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        padding: 0.5rem;
+        background-color: rgba(255, 255, 255, 0.8);
+    }
+}
+`;
 
 // Create a class for the element
 class Footer extends HTMLElement {
@@ -52,10 +92,6 @@ class Footer extends HTMLElement {
 			footerContainer.appendChild(footerLink);
 		});
 
-		// Take attribute content and put it inside the info span
-		// const text = this.getAttribute('data-text');
-		// info.textContent = text;
-
 		footer.appendChild(footerContainer);
 
 		// Create some CSS to apply to the shadow dom