copyleftie/pinafore
1
0
Fork 0
Code Issues Pull requests Releases Activity

tweak styles more

Browse source
This commit is contained in:
Nolan Lawson 2018-01-07 16:12:11 -08:00
parent c48a7a9ab3
commit 965826a360
3 changed files with 32 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
assets/global.css
View file

@ -10,7 +10,6 @@ main {
position: relative;
max-width: 800px;
padding: 25px;
margin: 0 auto;
box-sizing: border-box;
}

3
routes/_components/Nav.html
View file

@ -2,8 +2,7 @@
<ul>
<li>
<a class='{{page === "home" ? "selected" : ""}}' href='/'>
<!-- home.svg -->
<svg alt="Home" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1472 992v480q0 26-19 45t-45 19h-384v-384H768v384H384q-26 0-45-19t-19-45V992q0-1 .5-3t.5-3l575-474 575 474q1 2 1 6zm223-69l-62 74q-8 9-21 11h-3q-13 0-21-7L896 424l-692 577q-12 8-24 7-13-2-21-11l-62-74q-8-10-7-23.5t11-21.5l719-599q32-26 76-26t76 26l244 204V288q0-14 9-23t23-9h192q14 0 23 9t9 23v408l219 182q10 8 11 21.5t-7 23.5z"/></svg>
<svg alt="Home" class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M92.12 59.93H59.87V8.23C70.4 14.9 87.34 30 92.12 59.93zM31 26.9A122.4 122.4 0 0 1 9.39 60.35H31zM37.76 99h24.48a30.67 30.67 0 0 0 30.67-30.67H50.52V6.27a5.27 5.27 0 0 0-10.52 0v62.06H7.09A30.67 30.67 0 0 0 37.76 99z" fill="#fff"/></svg>
<span>Home</span>
</a>
</li>

34
routes/index.html
View file

@ -3,8 +3,10 @@
</:Head>
<Layout page='home'>
<h1>Pinafore for Mastodon</h1>
<div class="banner">
<svg alt="Pinafore logo" class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M92.12 59.93H59.87V8.23C70.4 14.9 87.34 30 92.12 59.93zM31 26.9A122.4 122.4 0 0 1 9.39 60.35H31zM37.76 99h24.48a30.67 30.67 0 0 0 30.67-30.67H50.52V6.27a5.27 5.27 0 0 0-10.52 0v62.06H7.09A30.67 30.67 0 0 0 37.76 99z"/></svg>
<h1>Pinafore</h1>
</div>
<p>Pinafore is a web client for <a href="https://joinmastodon.org">Mastodon</a>, optimized for performance and simplicity.</p>
<p>To get started, <a href="/settings/add-instance">log in to an instance</a>.</p>
@ -20,4 +22,30 @@
Layout
}
};
</script>
</script>
<style>
.banner {
display: flex;
align-items: center;
}
svg {
width: 70px;
height: 70px;
fill: royalblue;
display: inline-block;
}
h1 {
color: royalblue;
display: inline-block;
font-size: 3em;
margin: auto 15px;
}
@media (max-width: 767px) {
h1 {
font-size: 2.7em;
}
}
</style>