From bf7e7308be97c6c19531b10e43d8f0b6f090a592 Mon Sep 17 00:00:00 2001 From: Matei Adriel Date: Sun, 20 Oct 2019 16:27:23 +0300 Subject: [PATCH] typescript(og-website): better mobile experience Signed-off-by: prescientmoon --- 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')}
-
This page is still in construction!
+
+ This page is still in construction! +
` 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')}
-
+
Hello! I'm Matei Adriel!
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; +}