From bf7e7308be97c6c19531b10e43d8f0b6f090a592 Mon Sep 17 00:00:00 2001
From: Matei Adriel <rafaeladriel11@gmail.com>
Date: Sun, 20 Oct 2019 16:27:23 +0300
Subject: [PATCH] typescript(og-website): better mobile experience
Signed-off-by: prescientmoon <git@moonythm.dev>
---
typescript/og-website/nodemon.json | 2 +-
typescript/og-website/package-lock.json | 5 +++++
typescript/og-website/package.json | 1 +
typescript/og-website/src/components/Blog.ts | 4 +++-
typescript/og-website/src/components/Home.ts | 2 +-
typescript/og-website/src/index.ts | 5 ++++-
typescript/og-website/src/middleware/servePage.ts | 1 +
typescript/og-website/src/static/css/blog.css | 4 ----
typescript/og-website/src/static/css/config.css | 11 ++++++++++-
typescript/og-website/src/static/css/home.css | 9 +++++----
typescript/og-website/src/static/css/layout.css | 3 +++
typescript/og-website/src/static/css/nav.css | 12 +++++++++++-
typescript/og-website/src/static/css/utility.css | 6 ++++++
13 files changed, 51 insertions(+), 14 deletions(-)
diff --git a/typescript/og-website/nodemon.json b/typescript/og-website/nodemon.json
index 4780b06..feb14a2 100644
--- a/typescript/og-website/nodemon.json
+++ b/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"]
}
diff --git a/typescript/og-website/package-lock.json b/typescript/og-website/package-lock.json
index 3825341..63ebcc5 100644
--- a/typescript/og-website/package-lock.json
+++ b/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",
diff --git a/typescript/og-website/package.json b/typescript/og-website/package.json
index 6b844e4..4da8208 100644
--- a/typescript/og-website/package.json
+++ b/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"
diff --git a/typescript/og-website/src/components/Blog.ts b/typescript/og-website/src/components/Blog.ts
index 1c39f80..793b5cf 100644
--- a/typescript/og-website/src/components/Blog.ts
+++ b/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>
`
diff --git a/typescript/og-website/src/components/Home.ts b/typescript/og-website/src/components/Home.ts
index a4306c5..8a7af96 100644
--- a/typescript/og-website/src/components/Home.ts
+++ b/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>
diff --git a/typescript/og-website/src/index.ts b/typescript/og-website/src/index.ts
index 313d9d1..716f45c 100644
--- a/typescript/og-website/src/index.ts
+++ b/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')
diff --git a/typescript/og-website/src/middleware/servePage.ts b/typescript/og-website/src/middleware/servePage.ts
index de0fdf0..264b992 100644
--- a/typescript/og-website/src/middleware/servePage.ts
+++ b/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)
}
}
diff --git a/typescript/og-website/src/static/css/blog.css b/typescript/og-website/src/static/css/blog.css
index 4c03b50..e69de29 100644
--- a/typescript/og-website/src/static/css/blog.css
+++ b/typescript/og-website/src/static/css/blog.css
@@ -1,4 +0,0 @@
-div#blog-title {
- font-size: 3rem;
- font-family: var(--title-font);
-}
diff --git a/typescript/og-website/src/static/css/config.css b/typescript/og-website/src/static/css/config.css
index 9992dba..60b92d9 100644
--- a/typescript/og-website/src/static/css/config.css
+++ b/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;
+ }
}
diff --git a/typescript/og-website/src/static/css/home.css b/typescript/og-website/src/static/css/home.css
index 5378ae2..6dee1db 100644
--- a/typescript/og-website/src/static/css/home.css
+++ b/typescript/og-website/src/static/css/home.css
@@ -1,14 +1,15 @@
div#home-title {
- max-width: 80%;
- font-size: 3em;
- text-align: center;
- font-family: var(--title-font);
+ width: 100%;
+ box-sizing: border-box;
+ padding: var(--spacing, 1rem);
}
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 {
diff --git a/typescript/og-website/src/static/css/layout.css b/typescript/og-website/src/static/css/layout.css
index 9421ec7..08f35ed 100644
--- a/typescript/og-website/src/static/css/layout.css
+++ b/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 {
diff --git a/typescript/og-website/src/static/css/nav.css b/typescript/og-website/src/static/css/nav.css
index 828ae5e..3270952 100644
--- a/typescript/og-website/src/static/css/nav.css
+++ b/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;
+ }
+}
diff --git a/typescript/og-website/src/static/css/utility.css b/typescript/og-website/src/static/css/utility.css
index f1bdbd0..791a4c9 100644
--- a/typescript/og-website/src/static/css/utility.css
+++ b/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;
+}