Import styles into footer component

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;
+```

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