gaiety/pronoun-monster
gaiety/pronoun-monster
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

header, footer, whitespace for all responsive breakpoints, text styling

Browse source
This commit is contained in:
Angela Quinton 2023-03-12 01:16:08 -05:00
parent 154f301a23
commit fe2eda5729
5 changed files with 35 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/app.css
View file

@ -4,10 +4,10 @@
: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 */
--callout: #ECEFED; /* Sage/Light/4 */
--stroke: #D7DCDA; /* Sage/Light/7 */
--text-shout: #164430; /* Green/Dark/6 */
--text-murmur: #113123; /* Green/Dark/4 */
}
body {
@ -18,6 +18,7 @@ body {
}
h1, h2, h3, h4 {
color: var(--text-shout);
font-weight: 700;
}
@ -25,6 +26,10 @@ h1 {
font-family: "Redaction", Georgia, 'Times New Roman', Times, serif;
}
h2, h3, h4 {
h2 {
font-family: "Redaction 10", Georgia, 'Times New Roman', Times, serif;
}
footer {
border-color: var(--stroke);
}

3
src/views/individual.handlebars
View file

@ -1,2 +1 @@
<h1 class="text-3xl">Individual</h1>
{{nominative}}/{{accusative}}/{{pronominalPossessive}}/{{predicativePossessive}}/{{reflexive}}
<h1 class="text-5xl lg:text-6xl">{{nominative}}/&#8203;{{accusative}}/&#8203;{{pronominalPossessive}}/&#8203;{{predicativePossessive}}/&#8203;{{reflexive}}</h1>

10
src/views/layouts/main.handlebars
View file

@ -9,10 +9,12 @@
<link rel="stylesheet" href="https://fonts.cdnfonts.com/css/redaction">
<link rel="stylesheet" href="/app.css">
</head>
<body>
<div class="container mx-auto my-8">
{{> header siteName=siteName }}
{{{body}}}
<body class="min-h-screen flex flex-col">
{{> 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>

23
src/views/partials/footer.handlebars
View file

@ -1,11 +1,18 @@
<h3>Made by monsters</h3>
<footer class="flex-end border-t mt-10 pt-10 lg:flex lg:flex-row lg:justify-between lg:gap-6">
<ul>
<li><a href="#">Gaiety</a> who uses fae/faer, she/her</li>
<li><a href="#">Angela</a> who uses it/its, she/her</li>
<li><a href="#">Rizzo</a> who uses he/him, they/them, xier/xies</li>
</ul>
<div>
<h3 class="leading-9 mb-2">Made by monsters</h3>
<p>This site has a license of some sort, and that's linked <a href="#">here.</a></p>
<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>
<p>Thanks for visiting!</p>
<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>

4
src/views/partials/header.handlebars
View file

@ -1 +1,3 @@
<h2>{{{siteName}}}</h2>
<div class="p-10 lg:px-[60px]">
<h2 class="text-xl"><a href="/">{{{siteName}}}</a></h2>
</div>