gotosocial/web/template/index.tmpl
tobi 16ddad36b2
[frontend] Redesign / color scheme (#688)
* fix css indentation

* profile styling update

* update status styling to match profile

* empty header fix

* generate random avatars for thread views

* appease the linter gods

* upgrade deps

* turn profile accent into border + $bg background

* upgrade deps

* small accessibility tweaks

* general redesign, clearer css variables

* configure instance.Version for testrig

* footer styling

* add sublte borders to box-shadow for separation

* accessible blues, other tweaks

* background bg_accent

* fix viewport

* change client entry buttons to links

* cw button styling

* status display+username spacing

* small thread view tweaks

* color tweaks for accessible contrasts

* use Noto Sans

* biiit less dark bg

* .info contrast, border

Co-authored-by: f0x <f0x@cthu.lu>
2022-07-04 16:23:59 +02:00

42 lines
1.7 KiB
Cheetah

{{ template "header.tmpl" .}}
<section class="excerpt_top">
home to <span class="count">{{.instance.Stats.user_count}}</span> users
who posted <span class="count">{{.instance.Stats.status_count}}</span> statuses,
federating with <span class="count">{{.instance.Stats.domain_count}}</span> other instances.
</section>
<main class="lightgray">
<section>
<div className="short-description">
{{.instance.ShortDescription |noescape}}
</div>
</section>
<section class="apps">
<p>
GoToSocial does not provide its own webclient, but implements the Mastodon client API.
You can use this server through a variety of other clients:
</p>
<div class="applist">
<div class="entry">
<svg role="img" aria-labelledby="pinaforeTitle pinaforeDesc" class="logo redraw" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10000 10000">
<title id="pinaforeTitle">The Pinafore logo</title>
<desc id="pinaforeDesc">A stylised boat in flat design</desc>
<path d="M9212 5993H5987V823c1053 667 2747 2177 3225 5170zM3100 2690A12240 12240 0 01939 6035h2161zm676 7210h2448a3067 3067 0 003067-3067H5052V627a527 527 0 00-1052 0v6206H709a3067 3067 0 003067 3067z"></path>
</svg>
<div>
<h2>Pinafore</h2>
<p>Pinafore is a web client designed for speed and simplicity.</p>
<a href="https://pinafore.social/settings/instances/add">Use Pinafore</a>
</div>
</div>
<div class="entry">
<img class="logo" src="/assets/tusky.svg" alt="The Tusky mascot, a cartoon elephant tooting happily"/>
<div>
<h2>Tusky</h2>
<p>Tusky is a lightweight mobile client for Android</p>
<a href="https://tusky.app">Get Tusky</a>
</div>
</div>
</div>
</section>
</main>
{{ template "footer.tmpl" .}}