tweak styles more
This commit is contained in:
parent
c48a7a9ab3
commit
965826a360
|
@ -10,7 +10,6 @@ main {
|
||||||
position: relative;
|
position: relative;
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
padding: 25px;
|
padding: 25px;
|
||||||
margin: 0 auto;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -2,8 +2,7 @@
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a class='{{page === "home" ? "selected" : ""}}' href='/'>
|
<a class='{{page === "home" ? "selected" : ""}}' href='/'>
|
||||||
<!-- home.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>
|
||||||
<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>
|
|
||||||
<span>Home</span>
|
<span>Home</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
@ -3,8 +3,10 @@
|
||||||
</:Head>
|
</:Head>
|
||||||
|
|
||||||
<Layout page='home'>
|
<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>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>
|
<p>To get started, <a href="/settings/add-instance">log in to an instance</a>.</p>
|
||||||
|
@ -21,3 +23,29 @@
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</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>
|
Loading…
Reference in a new issue