Added flexbox head, body, footer.

gwicho38 · Feb 18, 2024 · bd02526 · bd02526
1 parent 2804405
commit bd02526
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 30 deletions.
diff --git a/public/index.html b/public/index.html
@@ -13,10 +13,8 @@
   <script src="javascript/components/main-component.js" defer></script>
 </head>
 
-<body class="flex flex-col h-screen">
-
+<body class="root">
   <main-component>
-
   </main-component>
 </body>
 

diff --git a/public/javascript/components/body-component.js b/public/javascript/components/body-component.js
@@ -0,0 +1,15 @@
+class BodyComponent extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    const template = document.createElement('template');
+    template.innerHTML = `
+          <style>
+              @import "../../stylesheets/body-component.css";
+          </style>
+          <h1>Hello</h1>
+        `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+}
+customElements.define('body-component', BodyComponent);
diff --git a/public/javascript/components/footer-component.js b/public/javascript/components/footer-component.js
@@ -1,18 +1,20 @@
-
 class FooterComponent extends HTMLElement {
-    constructor() {
-        super();
-        this.attachShadow({ mode: 'open' });
-        const template = document.createElement('template');
-        template.innerHTML = `
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    const template = document.createElement('template');
+    template.innerHTML = `
             <head>
               <link href="https://cdn.jsdelivr.net/npm/tailwindcss@^2.0/dist/tailwind.min.css" rel="stylesheet">
             </head>
+            <style>
+              @import "../../stylesheets/footer-component.css"
+            </style>
             <footer class="flex justify-center items-center bg-gray-700 text-white p-4">
                 <p>© 2024 My Website. All rights reserved.</p>
             </footer>
         `;
-        this.shadowRoot.appendChild(template.content.cloneNode(true));
-    }
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
 }
 customElements.define('footer-component', FooterComponent);
diff --git a/public/javascript/components/header-component.js b/public/javascript/components/header-component.js
@@ -1,18 +1,20 @@
-
 class HeaderComponent extends HTMLElement {
-    constructor() {
-        super();
-        this.attachShadow({ mode: 'open' });
-        const template = document.createElement('template');
-        template.innerHTML = `
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    const template = document.createElement('template');
+    template.innerHTML = `
             <head>
               <link href="https://cdn.jsdelivr.net/npm/tailwindcss@^2.0/dist/tailwind.min.css" rel="stylesheet">
             </head>
-            <header class="flex justify-center items-center bg-blue-500 text-white p-4">
+            <style>
+              @import "../../stylesheets/header-component.css"
+            </style>
+            <header class="justify-center items-center bg-blue-500 text-white p-4">
                 <h1>Welcome to My Website</h1>
             </header>
         `;
-        this.shadowRoot.appendChild(template.content.cloneNode(true));
-    }
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
 }
 customElements.define('header-component', HeaderComponent);
diff --git a/public/javascript/components/main-component.js b/public/javascript/components/main-component.js
@@ -1,15 +1,17 @@
-
 class MainComponent extends HTMLElement {
-    constructor() {
-        super();
-        this.attachShadow({ mode: 'open' });
-        const template = document.createElement('template');
-        template.innerHTML = `
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    const template = document.createElement('template');
+    template.innerHTML = `
+          <style>
+              @import "../../stylesheets/main-component.css";
+          </style>
           <header-component></header-component>
           <body-component></body-component>
           <footer-component></footer-component>
         `;
-        this.shadowRoot.appendChild(template.content.cloneNode(true));
-    }
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
 }
 customElements.define('main-component', MainComponent);
diff --git a/public/javascript/main.js b/public/javascript/main.js
@@ -91,7 +91,7 @@
   })
 
   /**
-   * Scrool with ofset on links with a class name .scrollto
+   * Scroll with ofset on links with a class name .scrollto
    */
   on('click', '.scrollto', function(e) {
     if (select(this.hash)) {
@@ -255,4 +255,4 @@
     })
   });
 
-})()
+})()
diff --git a/public/stylesheets/body-component.css b/public/stylesheets/body-component.css
@@ -0,0 +1,6 @@
+:host {
+  flex: 1 1 auto;
+  /* Grow to fill available space */
+  overflow-y: auto;
+  /* Add scroll if content overflows */
+}
diff --git a/public/stylesheets/footer-component.css b/public/stylesheets/footer-component.css
@@ -0,0 +1,3 @@
+:host {
+  flex: 0 1 auto;
+}
diff --git a/public/stylesheets/header-component.css b/public/stylesheets/header-component.css
@@ -0,0 +1,3 @@
+:host {
+  flex: 0 1 auto;
+}
diff --git a/public/stylesheets/main-component.css b/public/stylesheets/main-component.css
@@ -0,0 +1,6 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  /* Full viewport height */
+}
diff --git a/public/stylesheets/theme.css b/public/stylesheets/theme.css
@@ -0,0 +1,6 @@
+/* theme.css */
+:root {
+  --background-color: #333;
+  --text-color: #fff;
+  --padding: 10px;
+}