typescript(og-website): better mobile experience
Signed-off-by: prescientmoon <git@moonythm.dev>
This commit is contained in:
parent
4ccd98961c
commit
bf7e7308be
13 changed files with 51 additions and 14 deletions
typescript/og-website/src
|
@ -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>
|
||||
`
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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')
|
||||
|
|
|
@ -10,6 +10,7 @@ export const createPageMiddlewareFactory = (
|
|||
request: Request,
|
||||
response: Response
|
||||
) => {
|
||||
console.log(`Serving page ${config.title}`)
|
||||
renderComponent(response, config)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +0,0 @@
|
|||
div#blog-title {
|
||||
font-size: 3rem;
|
||||
font-family: var(--title-font);
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue