typescript(og-website): better mobile experience

Signed-off-by: prescientmoon <git@moonythm.dev>

typescript/og-website/nodemon.json

@@ -1,6 +1,6 @@
 {
     "$schema": "https://raw.githubusercontent.com/SchemaStore/schemastore/master/src/schemas/json/nodemon.json",
     "exec": "npm start",
-    "ext": "js,json,ts",
+    "ext": "js,json,ts,css",
     "ignore": ["node_modules", ".gitignore", ".vscode"]
 }

typescript/og-website/package-lock.json

@@ -640,6 +640,11 @@
         "is-obj": "^1.0.0"
       }
     },
+    "dotenv": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
+      "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw=="
+    },
     "duplexer3": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",

typescript/og-website/package.json

@@ -14,6 +14,7 @@
     "dependencies": {
         "@popeindustries/lit-html-server": "^1.6.0",
         "@types/express": "^4.17.1",
+        "dotenv": "^8.2.0",
         "express": "^4.17.1",
         "ts-node": "^8.4.1",
         "typescript": "^3.6.4"

typescript/og-website/src/components/Blog.ts

@@ -4,6 +4,8 @@ import { withCss } from '../helpers/withCss'
 export const Blog = () => html`
     ${withCss('blog')}
     <div class="full center">
-        <div id="blog-title">This page is still in construction!</div>
+        <div class="title">
+            This page is still in construction!
+        </div>
     </div>
 `

typescript/og-website/src/components/Home.ts

@@ -10,7 +10,7 @@ export const HomeButton = (config: UrlConfig) => html`
 export const Home = () => html`
     ${withCss('home')}
     <div id="home" class="full center">
-        <div id="home-title">
+        <div id="home-title" class="title">
             Hello! I'm Matei Adriel!
         </div>
 

typescript/og-website/src/index.ts

@@ -3,8 +3,11 @@ import { Layout } from './components/Layout'
 import { resolve } from 'path'
 import { createPageMiddlewareFactory } from './middleware/servePage'
 import { buttons } from './constants/navButtons'
+import { config } from 'dotenv'
 
-const port = process.env.PORT || 8080
+config()
+
+const port = Number(process.env.PORT) || 8080
 const app = express()
 
 const renderComponent = createPageMiddlewareFactory(Layout, 'Matei Adriel')

typescript/og-website/src/middleware/servePage.ts

@@ -10,6 +10,7 @@ export const createPageMiddlewareFactory = (
         request: Request,
         response: Response
     ) => {
+        console.log(`Serving page ${config.title}`)
         renderComponent(response, config)
     }
 }

typescript/og-website/src/static/css/blog.css

@@ -1,4 +0,0 @@
-div#blog-title {
-    font-size: 3rem;
-    font-family: var(--title-font);
-}

typescript/og-website/src/static/css/config.css

@@ -2,7 +2,7 @@
     --spacing: 1rem;
     --on-raised: white;
     --bg-raised: #444444;
-    --bg: #222222;
+    --nav-bg: rgba(79, 79, 79, 0.3);
     --on-bg: white;
     --title-font: 'Permanent Marker', cursive;
     --home-bg: url(https://cdn.discordapp.com/attachments/485859146558865408/635409620537442325/Wallpaper_space_galaxy_planet_4k_Space_8652415352.jpg);
@@ -13,4 +13,13 @@
     --project-var-multiplier: 3;
     --project-thumbail-scale: 1.1;
     --project-thumbail-size: 200px;
+    --title-font-size: 7vw;
+    --font-size: 3vw;
+}
+
+@media screen and (max-width: 800px) {
+    :root {
+        --title-font-size: 3rem;
+        --font-size: 1.4rem;
+    }
 }

typescript/og-website/src/static/css/home.css

@@ -1,14 +1,15 @@
 div#home-title {
-    max-width: 80%;
+    width: 100%;
-    font-size: 3em;
+    box-sizing: border-box;
-    text-align: center;
+    padding: var(--spacing, 1rem);
-    font-family: var(--title-font);
 }
 
 a.home-button {
     background-color: rgba(128, 128, 128, 0.5);
     padding: var(--spacing, 1rem);
     border-radius: var(--spacing, 1rem);
+    font-size: var(--font-size, 1em);
+    font-family: var(--title-font);
 }
 
 div#home-buttons {

typescript/og-website/src/static/css/layout.css

@@ -22,6 +22,9 @@ div#page-content {
     height: 100%;
     color: var(--on-bg, black);
     padding: var(--spacing, 1rem);
+    overflow-y: auto;
+    padding: calc(2 * var(--font-size, 1em) + 4 * var(--spacing, 1rem));
+    box-sizing: border-box;
 }
 
 body {

typescript/og-website/src/static/css/nav.css

@@ -1,7 +1,10 @@
 div#nav {
     width: 100%;
     padding: var(--spacing, 1rem);
-    position: absolute;
+    position: fixed;
+    font-size: var(--font-size);
+    background-color: var(--nav-bg);
+    filter: hue-rotate(180deg);
 }
 
 div#nav-buttons {
@@ -18,3 +21,10 @@ a.nav-button:hover {
         alternate;
     --glow-color-3: red;
 }
+
+@media screen and (min-width: 800px) {
+    div#nav {
+        background-color: transparent;
+        filter: none;
+    }
+}

typescript/og-website/src/static/css/utility.css

@@ -41,3 +41,9 @@
             0 0 80px var(--glow-color-3, white);
     }
 }
+
+.title {
+    font-size: var(--title-font-size, 1em);
+    font-family: var(--title-font);
+    text-align: center;
+}