tweak styles more
This commit is contained in:
parent
c48a7a9ab3
commit
965826a360
|
@ -10,7 +10,6 @@ main {
|
|||
position: relative;
|
||||
max-width: 800px;
|
||||
padding: 25px;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
@ -21,3 +23,29 @@
|
|||
}
|
||||
};
|
||||
</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