alexristinmaa · alexristinmaa · Mar 30, 2024 · Mar 30, 2024
diff --git a/alexanderristinmaa/app/(homepage)/layout.module.css b/alexanderristinmaa/app/(homepage)/layout.module.css
@@ -1,38 +1,60 @@
 #nav {
-    background-color: aliceblue;
-    padding: 20px;
+  background-color: var(--header-rgb);
+  color: var(--header-foreground);
+  padding: 20px;
+  flex-shrink: 0;
 }
-  
+
 #navLine {
-    display: flex;
-    flex-direction: row;
-    height: auto;   
-}
-
-  .navLink {
-    padding: 8px;
-    display: inline-block;
-    margin: auto 0 auto 0;
-  }
-
-  .navLeft {
-    display: flex;
-    justify-content: center;
-  }
-
-  .navRight {
-    display: flex;
-    justify-content: center;
-    margin-left: auto;
-  }
-
-  #navTitle {
-    font-size: 20px;
-    font-weight: bold;
-    padding: 8px;
-    display: inline-block;
-  }
-
-  .main {
-    padding: 20px 80px;
-  }
+  display: flex;
+  flex-direction: row;
+  height: auto;   
+}
+
+.navLink {
+  padding: 8px;
+  display: inline-block;
+  margin: auto 0 auto 0;
+}
+
+.navLeft {
+  display: flex;
+  justify-content: center;
+}
+
+.navRight {
+  display: flex;
+  justify-content: center;
+  margin-left: auto;
+}
+
+#navTitle {
+  font-size: 20px;
+  font-weight: bold;
+  padding: 8px;
+  display: inline-block;
+  color: var(--highlight);
+}
+
+#body {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+#main {
+  padding: 20px 100px;
+  flex: 1 0 auto;
+}
+
+#footer {
+  flex-shrink: 0;
+  height: 100px;
+  background-color: var(--highlight-weak);
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  white-space: pre-line;
+}
diff --git a/alexanderristinmaa/app/(homepage)/layout.tsx b/alexanderristinmaa/app/(homepage)/layout.tsx
@@ -20,7 +20,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="sv">
-      <body className={inter.className}>
+      <body className={inter.className} id={styles.body}>
         <nav id={styles.nav}>
           <div id={styles.navLine}>
             <div className={styles.navLeft}>
@@ -32,9 +32,13 @@ export default function RootLayout({
             </div>
           </div>
         </nav>
-        <main className={styles.main}>
+        <main id={styles.main}>
         {children}
         </main>
+        <footer id={styles.footer}>
+          <span>Made with <Link href='/hemligt'><span className='icon heartIcon'></span></Link></span>
+          <span>av Alexander Ristinmaa 2024</span>
+        </footer>
       </body>
     </html>
   );

diff --git a/alexanderristinmaa/app/(homepage)/varfor/page.tsx b/alexanderristinmaa/app/(homepage)/varfor/page.tsx
@@ -1,6 +1,3 @@
-// nextjs
-import Link from 'next/link'
-
 // style
 import styles from './page.module.css';
 

diff --git a/alexanderristinmaa/app/globals.css b/alexanderristinmaa/app/globals.css
@@ -1,5 +1,12 @@
+@import './icons.css';
+
 :root {
-  --foreground-rgb: 240, 240, 240;
+  --black: #0a0908ff;
+  --white: #f2f4f3ff;
+  --highlight: #EA9010;
+  --highlight-weak: #e5b065;
+  --beaver: #a9927dff;
+  --walnut-brown: #5e503fff;
 }
 
 * {
@@ -12,9 +19,11 @@ html,
 body {
   max-width: 100vw;
   overflow-x: hidden;
+  background-color: var(--white);
+  color: var(--black);
 }
 
 a {
   color: inherit;
   text-decoration: none;
-}
+}
diff --git a/alexanderristinmaa/app/hemligt/layout.tsx b/alexanderristinmaa/app/hemligt/layout.tsx
@@ -0,0 +1,16 @@
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/alexanderristinmaa/app/hemligt/page.module.css b/alexanderristinmaa/app/hemligt/page.module.css
diff --git a/alexanderristinmaa/app/hemligt/page.tsx b/alexanderristinmaa/app/hemligt/page.tsx
@@ -0,0 +1,8 @@
+// style
+import styles from './page.module.css';
+
+export default function Home() {
+  return (
+    <p>Arvid luktar bajs</p>
+  );
+}
diff --git a/alexanderristinmaa/app/icons.css b/alexanderristinmaa/app/icons.css
@@ -0,0 +1,10 @@
+.icon {
+    background-size: contain;
+    display: inline-block;
+}
+
+.heartIcon {
+    background-image: url('../images/heart-icon.svg');
+    width: 1em;
+    height: 0.9em;
+}
diff --git a/alexanderristinmaa/images/heart-icon.svg b/alexanderristinmaa/images/heart-icon.svg