Merge branch 'env-and-templates' into 'main'
Env and templates See merge request gaiety/pronoun-monster!1
This commit is contained in:
commit
e1c8dcce36
8 changed files with 79 additions and 13 deletions
1
.tool-versions
Normal file
1
.tool-versions
Normal file
|
@ -0,0 +1 @@
|
||||||
|
nodejs 19.7.0
|
10
app.js
10
app.js
|
@ -14,8 +14,11 @@ app.set('views', './src/views')
|
||||||
|
|
||||||
app.use(express.static('dist'))
|
app.use(express.static('dist'))
|
||||||
|
|
||||||
|
const siteName = "Pronoun Site"
|
||||||
|
|
||||||
app.get('/', () => {
|
app.get('/', () => {
|
||||||
res.render('home')
|
const pageTitle = siteName;
|
||||||
|
res.render('home', { siteName, pageTitle } )
|
||||||
})
|
})
|
||||||
|
|
||||||
app.get('/:nominative/:accusative/:predicative_possessive/:reflexive', (req, res) => {
|
app.get('/:nominative/:accusative/:predicative_possessive/:reflexive', (req, res) => {
|
||||||
|
@ -38,8 +41,11 @@ app.get('/:nominative/:accusative/:pronominal_possessive/:predicative_possessive
|
||||||
predicative_possessive: predicativePossessive,
|
predicative_possessive: predicativePossessive,
|
||||||
reflexive,
|
reflexive,
|
||||||
} = req.params
|
} = req.params
|
||||||
|
|
||||||
|
const pageTitle = [nominative, accusative, pronominalPossessive, predicativePossessive, reflexive].join("/") + " - " + siteName;
|
||||||
|
|
||||||
res.render('individual', {
|
res.render('individual', {
|
||||||
nominative, accusative, pronominalPossessive, predicativePossessive, reflexive
|
siteName, pageTitle, nominative, accusative, pronominalPossessive, predicativePossessive, reflexive
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
32
src/app.css
32
src/app.css
|
@ -1,3 +1,35 @@
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--background: #F8FAF9; /* Sage/Light/2 */
|
||||||
|
--callout: #ECEFED; /* Sage/Light/4 */
|
||||||
|
--stroke: #D7DCDA; /* Sage/Light/7 */
|
||||||
|
--text-shout: #164430; /* Green/Dark/6 */
|
||||||
|
--text-murmur: #113123; /* Green/Dark/4 */
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--background);
|
||||||
|
color: var(--text-murmur);
|
||||||
|
font-family: Manrope, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4 {
|
||||||
|
color: var(--text-shout);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: "Redaction", Georgia, 'Times New Roman', Times, serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: "Redaction 10", Georgia, 'Times New Roman', Times, serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
border-color: var(--stroke);
|
||||||
|
}
|
|
@ -1,4 +1,3 @@
|
||||||
<div class="container mx-auto my-8">
|
<h1 class="text-3xl">This is going to be such a cool site!</h1>
|
||||||
<h1 class="text-3xl">This is going to be such a cool site!</h1>
|
<p>Check the readme!</p>
|
||||||
<p>Check the readme!</p>
|
|
||||||
</div>
|
|
||||||
|
|
|
@ -1,4 +1 @@
|
||||||
<div class="container mx-auto my-8">
|
<h1 class="text-5xl lg:text-6xl">{{nominative}}/​{{accusative}}/​{{pronominalPossessive}}/​{{predicativePossessive}}/​{{reflexive}}</h1>
|
||||||
<h1 class="text-3xl">Individual</h1>
|
|
||||||
{{nominative}}/{{accusative}}/{{pronominalPossessive}}/{{predicativePossessive}}/{{reflexive}}
|
|
||||||
</div>
|
|
||||||
|
|
|
@ -2,10 +2,20 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Example App</title>
|
<title>{{{pageTitle}}}</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;800&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://fonts.cdnfonts.com/css/redaction">
|
||||||
<link rel="stylesheet" href="/app.css">
|
<link rel="stylesheet" href="/app.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="min-h-screen flex flex-col">
|
||||||
{{{body}}}
|
{{> header siteName=siteName }}
|
||||||
|
<div class="mx-10 mt-10 mb-[60px] lg:mx-[90px] lg:mt-[90px] xl:mx-[120px] xl:mt-[120px] grow flex flex-col">
|
||||||
|
<div class="grow flex flex-col">
|
||||||
|
{{{body}}}
|
||||||
|
</div>
|
||||||
|
{{> footer }}
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
18
src/views/partials/footer.handlebars
Normal file
18
src/views/partials/footer.handlebars
Normal file
|
@ -0,0 +1,18 @@
|
||||||
|
<footer class="flex-end border-t mt-10 pt-10 lg:flex lg:flex-row lg:justify-between lg:gap-6">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 class="leading-9 mb-2">Made by monsters</h3>
|
||||||
|
|
||||||
|
<ul class="mb-10">
|
||||||
|
<li><a href="#" class="font-bold">Gaiety</a> who uses fae/faer, she/her</li>
|
||||||
|
<li><a href="#" class="font-bold">Angela</a> who uses it/its, she/her</li>
|
||||||
|
<li><a href="#" class="font-bold">Rizzo</a> who uses he/him, they/them, xier/xies</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-2 lg:text-right">
|
||||||
|
<p>This site has a license of some sort, and that's linked <a href="#" class="font-bold">here.</a></p>
|
||||||
|
|
||||||
|
<p>Thanks for visiting!</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
3
src/views/partials/header.handlebars
Normal file
3
src/views/partials/header.handlebars
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
<div class="p-10 lg:px-[60px]">
|
||||||
|
<h2 class="text-xl"><a href="/">{{{siteName}}}</a></h2>
|
||||||
|
</div>
|
Loading…
Add table
Reference in a new issue