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 { :root {
--background: #F8FAF9; /* Sage/Light/2 */ --background: #F8FAF9; /* Sage/Light/2 */
--callout: ##ECEFED; /* Sage/Light/4 */ --callout: #ECEFED; /* Sage/Light/4 */
--stroke: ##D7DCDA; /* Sage/Light/7 */ --stroke: #D7DCDA; /* Sage/Light/7 */
--text-shout: ##164430; /* Green/Dark/6 */ --text-shout: #164430; /* Green/Dark/6 */
--text-murmur: ##113123; /* Green/Dark/4 */ --text-murmur: #113123; /* Green/Dark/4 */
} }
body { body {
@ -18,6 +18,7 @@ body {
} }
h1, h2, h3, h4 { h1, h2, h3, h4 {
color: var(--text-shout);
font-weight: 700; font-weight: 700;
} }
@ -25,6 +26,10 @@ h1 {
font-family: "Redaction", Georgia, 'Times New Roman', Times, serif; font-family: "Redaction", Georgia, 'Times New Roman', Times, serif;
} }
h2, h3, h4 { h2 {
font-family: "Redaction 10", Georgia, 'Times New Roman', Times, serif; 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> <h1 class="text-5xl lg:text-6xl">{{nominative}}/&#8203;{{accusative}}/&#8203;{{pronominalPossessive}}/&#8203;{{predicativePossessive}}/&#8203;{{reflexive}}</h1>
{{nominative}}/{{accusative}}/{{pronominalPossessive}}/{{predicativePossessive}}/{{reflexive}}

6
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="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">
<div class="container mx-auto my-8">
{{> header siteName=siteName }} {{> 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}}} {{{body}}}
</div>
{{> footer }} {{> footer }}
</div> </div>
</body> </body>

19
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> <div>
<li><a href="#">Gaiety</a> who uses fae/faer, she/her</li> <h3 class="leading-9 mb-2">Made by monsters</h3>
<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 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> </ul>
</div>
<p>This site has a license of some sort, and that's linked <a href="#">here.</a></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> <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>