From 108f4285513d4ce3ff9c92b748ff90b4079b2b89 Mon Sep 17 00:00:00 2001
From: James Shiffer <2191476+scoliono@users.noreply.github.com>
Date: Thu, 4 Jun 2020 19:30:45 -0700
Subject: [PATCH] homepage and articles

---
 src/components/Nav.svelte   | 27 ++++++-----
 src/routes/_error.svelte    |  2 +-
 src/routes/_layout.svelte   | 20 ++++++--
 src/routes/a/[slug].json.js |  6 +--
 src/routes/a/[slug].svelte  | 29 +++++++++--
 src/routes/index.svelte     | 95 +++++++++++++++++++++++++++----------
 static/global.css           | 53 +++++++++++++++++++--
 7 files changed, 177 insertions(+), 55 deletions(-)

diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
index 37f0abc..5f96dac 100644
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@@ -4,40 +4,41 @@
 
 <style>
     nav {
-        border-bottom: 1px solid rgba(255,62,0,0.1);
-        font-weight: 800;
+        font-weight: bold;
         padding: 1rem 0 0 0;
         position: fixed;
         width: 100vw;
         z-index: 100;
         background-color: #fff;
+        top: 0;
     }
     div.items {
         margin: 0;
         padding: 0;
         display: flex;
+        flex-direction: column;
         text-transform: uppercase;
-        padding: 0 1.5rem;
+        padding: 0 1.5rem 0.25rem;
+        align-items: start;
     }
     div.filler {
         flex: 1 0 0;
     }
-    div.items div::after {
-        content: '';
-        display: block;
-        clear: both;
-    }
     div.items div {
         display: block;
     }
     div.link a {
         text-decoration: none;
-        padding: 0.5rem 0;
-        display: block;
-        font-size: 24px;
+        font-size: 2rem;
     }
     img.wordmark {
-        height: 2.5rem;
+        height: 3rem;
+    }
+    @media (min-width: 640px) {
+        div.items {
+            flex-direction: row;
+            align-items: end;
+        }
     }
 </style>
 
@@ -45,6 +46,6 @@
     <div class="items">
         <div><a href="/"><img class="wordmark" src="/logo.png" alt="HowFeed.biz"></a></div>
         <div class="filler"></div>
-        <div class="link"><a href="blog">Contact Us</a></div>
+        <div class="link"><a href="mailto:the_katze@naver.com">Contact Us</a></div>
     </div>
 </nav>
diff --git a/src/routes/_error.svelte b/src/routes/_error.svelte
index 320e587..d115c2c 100644
--- a/src/routes/_error.svelte
+++ b/src/routes/_error.svelte
@@ -20,7 +20,7 @@
 		margin: 1em auto;
 	}
 
-	@media (min-width: 480px) {
+	@media (min-width: 640px) {
 		h1 {
 			font-size: 4em;
 		}
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index abd788a..cf9e77e 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -6,16 +6,28 @@
 
 <style>
     main {
-        position: relative;
-        max-width: 56em;
-        background-color: white;
-        margin: 0 auto;
+        max-width: 100vw;
+        background: #fff;
         box-sizing: border-box;
     }
+    footer {
+        box-sizing: border-box;
+        text-align: center;
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+        background: #fff;
+        padding: 1rem;
+        z-index: 1;
+    }
 </style>
 
 <Nav {segment}/>
 
 <main>
     <slot></slot>
+    <footer>
+        Wholly funded and published by FemboyFinancial, Ltd.
+        Copyright &copy; {new Date().getFullYear()} FemboyFinancial, Ltd. All rights reserved.
+    </footer>
 </main>
diff --git a/src/routes/a/[slug].json.js b/src/routes/a/[slug].json.js
index bc792d4..960a820 100644
--- a/src/routes/a/[slug].json.js
+++ b/src/routes/a/[slug].json.js
@@ -12,17 +12,17 @@ export function get(req, res, next) {
 
     if (lookup.has(slug)) {
         res.writeHead(200, {
-                'Content-Type': 'application/json'
+            'Content-Type': 'application/json'
         });
 
         res.end(lookup.get(slug));
     } else {
         res.writeHead(404, {
-                'Content-Type': 'application/json'
+            'Content-Type': 'application/json'
         });
 
         res.end(JSON.stringify({
-                message: `Not found`
+            message: `Not found`
         }));
     }
 }
diff --git a/src/routes/a/[slug].svelte b/src/routes/a/[slug].svelte
index 6832a34..4325091 100644
--- a/src/routes/a/[slug].svelte
+++ b/src/routes/a/[slug].svelte
@@ -51,14 +51,35 @@
     .content :global(li) {
         margin: 0 0 0.5em 0;
     }
+
+    .content {
+        position: absolute;
+        background: #fff;
+        margin: 8rem;
+        padding: 2rem;
+    }
+
+    figure.article-image {
+        width: auto;
+        margin: 0;
+    }
+
+    div.article-meta {
+        margin: 0;
+        padding: 0;
+    }
 </style>
 
 <svelte:head>
-    <title>{post.title}</title>
+    <title>{post.title} | HOWFEED.BIZ</title>
 </svelte:head>
 
-<h1>{post.title}</h1>
-
-<div class='content'>
+<div class="content">
+    <figure class="article-image">
+        <img alt={post.title} src={`/a/${post.slug}.jpg`}>
+    </figure>
+    <div class="article-meta">
+        <h1 class="article-title">{post.title}</h1>
+    </div>
     {@html post.html}
 </div>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index d1fe8c4..79a1971 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,48 +1,82 @@
+<script context="module">
+    import posts from './a/_posts.js';
+    export async function preload()
+    {
+        return {articles: posts};
+    }
+</script>
+
+<script>
+    export let articles;
+</script>
+
 <style>
-    h1, figure, p {
+    h1, h2 {
         text-align: center;
+    }
+    h1, h2, p {
         margin: 0 auto;
     }
-
     h1 {
-        font-size: 2.8em;
+        font-size: 3rem;
         text-transform: uppercase;
-        font-weight: 700;
-        margin: 0 0 0.5em 0;
     }
-
     figure {
-        margin: 0 0 1em 0;
+        margin: 0;
     }
-
     img {
         width: 100%;
-        max-width: 400px;
-        margin: 0 0 1em 0;
+        max-width: 640px;
+        margin: 1rem;
     }
-
-    p {
-        margin: 1em auto;
-    }
-
-    @media (min-width: 480px) {
-        h1 {
-            font-size: 4em;
+    @media (min-width: 640px) {
+        div.content {
+            padding-top: 5rem !important;
+        }
+        h1.welcome {
+            font-size: 8rem !important;
+        }
+        h2.desc {
+            font-size: 2rem !important;
+        }
+    }
+    @media (min-width: 1280px) {
+        h1.welcome {
+            font-size: 10rem !important;
+        }
+        h2.desc {
+            font-size: 3.5rem !important;
         }
     }
-
     div.background {
         background: url('/cityscape.jpg') no-repeat center;
         background-size: cover;
         position: fixed;
-        height: 16rem;
+        height: 24rem;
         width: 100vw;
         z-index: 0;
         filter: blur(5px);
     }
     div.content {
-        margin-top: 5rem;
+        padding-top: 8rem;
+        position: absolute;
         z-index: 1;
+        margin: 0 auto;
+        width: 100vw;
+    }
+    h1.welcome, h2.desc {
+        color: whitesmoke;
+    }
+    h1.welcome {
+        margin-top: 1rem;
+        font-size: 4rem;
+    }
+    h2 {
+        text-transform: uppercase;
+    }
+    h2.desc {
+        margin-bottom: 1rem;
+        font-size: 1.5rem;
     }
 </style>
 
@@ -52,8 +86,19 @@
 
 <div class="background"></div>
 <div class="content">
-    <h1 class="uppercase">Welcome</h1>
-    <figure>
-        <figcaption>Have fun with Sapper!</figcaption>
-    </figure>
+    <h1 class="welcome">Welcome</h1>
+    <h2 class="desc">Find an Article</h2>
+    <div class="article-list">
+    {#each articles as {title, slug, date}}
+        <a rel="prefetch" href={`/a/${slug}`}>
+            <figure class="article-image">
+                <img src={`/a/${slug}.jpg` || '/logo.png'} alt={title}>
+            </figure>
+            <div class="article-meta">
+                <p class="article-title">{title}</p>
+                <p class="article-date">{new Date(date).toLocaleDateString()}</p>
+            </div>
+        </a>
+    {/each}
+    </div>
 </div>
diff --git a/static/global.css b/static/global.css
index 730a031..6ceeec2 100644
--- a/static/global.css
+++ b/static/global.css
@@ -3,13 +3,13 @@ body {
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 	font-size: 14px;
 	line-height: 1.5;
-	color: #333;
+    color: #000;
+    background-color: rgb(150, 200, 234);
 }
 
 h1, h2, h3, h4, h5, h6 {
-	margin: 0 0 0.5em 0;
-	font-weight: 400;
-	line-height: 1.2;
+	font-weight: bold;
+	line-height: 1.1;
 }
 
 h1 {
@@ -20,6 +20,10 @@ a {
 	color: inherit;
 }
 
+a:hover {
+    color: #508FC3;
+}
+
 code {
 	font-family: menlo, inconsolata, monospace;
 	font-size: calc(1em - 2px);
@@ -29,8 +33,47 @@ code {
 	border-radius: 2px;
 }
 
-@media (min-width: 400px) {
+@media (min-width: 640px) {
 	body {
 		font-size: 16px;
 	}
 }
+
+div.article-list {
+    background: #508FC3;
+    width: 80%;
+    margin: 0 auto;
+    padding: 2rem 1rem;
+}
+div.article-list > a {
+    display: flex;
+    text-decoration: none;
+    flex-direction: row;
+    margin: 2rem;
+    align-items: start;
+}
+figure.article-image {
+    background: white;
+    display: flex;
+    align-self: center;
+    justify-content: center;
+    width: 33.33%;
+}
+figure.article-image img {
+    height: 12rem;
+    width: auto;
+}
+div.article-meta {
+    background: white;
+    margin: 2rem;
+    padding: 0.75rem;
+    line-height: 1;
+    font-weight: bold;
+    flex: 1 0 0;
+}
+.article-title {
+    font-size: 4rem;
+}
+.article-date {
+    font-size: 2rem;
+}