Commit 1e75fdc1 authored by Tim's avatar Tim

single page for shop & add mastodon app

parent d212b571
Pipeline #30 failed with stage
+++
name = "Mastodon"
description = "Mastodon is a free, open-source social network. Pick a server that you trust — whichever you choose, you can interact with everyone else. Anyone can run their own Mastodon instance and participate in the social network seamlessly."
logo = "/img/logo-mastodon.png"
[[price]]
conditions = "Shared Instance"
amount = "24€"
[[price]]
conditions = "> 10 users"
amount = "125€"
[[price]]
conditions = "< 10 users"
amount = "Contact us"
[[social]]
name = "Facebook"
icon = "icon-facebook"
link = "#"
[[social]]
name = "Twitter"
icon = "icon-twitter "
link = "#"
[[social]]
name = "Github"
icon = "icon-github "
link = "https://github.com/tootsuite/mastodon"
[[social]]
name = "Chat"
icon = "icon-slack "
link = "#"
[[social]]
name = "Forum"
icon = "icon-discourse"
link = "#"
+++
## What is Mastodon?
Mastodon is a free, open-source social network. A decentralized alternative to commercial platforms, it avoids the risks of a single company monopolizing your communication. Pick a server that you trust — whichever you choose, you can interact with everyone else. Anyone can run their own Mastodon instance and participate in the social network seamlessly.
## Features
- Fully interoperable with GNU social and any OStatus platform Whatever implements Atom feeds, ActivityStreams, Salmon, PubSubHubbub and Webfinger is part of the network
- Real-time timeline updates See the updates of people you're following appear in real-time in the UI via WebSockets
- Federated thread resolving If someone you follow replies to a user unknown to the server, the server fetches the full thread so you can view it without leaving the UI
Media attachments like images and WebM Upload and view images and WebM videos attached to the updates
- OAuth2 and a straightforward REST API Mastodon acts as an OAuth2 provider so 3rd party apps can use the API, which is RESTful and simple
- Background processing for long-running tasks Mastodon tries to be as fast and responsive as possible, so all long-running tasks that can be delegated to background processing, are
- Deployable via Docker You don't need to mess with dependencies and configuration if you want to try Mastodon, if you have Docker and Docker Compose the deployment is extremely easy
## See it in action
{{< youtube w7Ft2ymGmfc >}}
+++
name = "Mastodon"
description = "Mastodon is a free, open-source social network. Pick a server that you trust — whichever you choose, you can interact with everyone else. Anyone can run their own Mastodon instance and participate in the social network seamlessly."
price = "75€"
logo = "/img/logo-mastodon.png"
[[social]]
name = "Facebook"
icon = "icon-facebook"
link = "#"
[[social]]
name = "Twitter"
icon = "icon-twitter "
link = "#"
[[social]]
name = "Github"
icon = "icon-github "
link = "https://github.com/tootsuite/mastodon"
[[social]]
name = "Chat"
icon = "icon-slack "
link = "#"
[[social]]
name = "Forum"
icon = "icon-discourse"
link = "#"
+++
{{ partial "header.html" . }}
<section class="shop">
<div class="container">
<div class="row">
<div class="row container">
{{ range .Data.Pages }}
<div class="col-sm-6 col-md-4">
<div class="card card-shop card-small">
......
{{ partial "header.html" . }}
<section class="shop">
<div class="banner-hero">
<div class="container">
<div class="row center">
<img src="/img/logo-mastodon.png">
</div>
<div class="row center">
<img src="/img/hosted.svg">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4">
<div class="card idcard">
<div class="card-content white-text">
<h1 class="card-title">{{ .Params.name }}</h1>
<p> {{ .Description }} </p>
<section>
<h1 class="card-title">Price</h1>
<ul class="price">
{{ range .Params.price}}
<li>{{ .conditions }} : {{ .amount }}</li>
{{ end }}
</ul>
<div class="row center">
<button type="button" class="btn btn-lg center">Order</button>
</div>
</section>
<section class="social">
<h1 class="card-title">Pour plus d'informations</h1>
<ul class="menu_horizontal center">
{{ range .Params.social}}
<li><a href="{{ .url }}"><i class="{{ .icon }}"></i></a></li>
{{ end }}
</ul>
</section>
</div>
</div>
</div>
<div class=" col-md-8">
{{ .Content }}
</div>
</div>
</section>
</div>
{{ partial "footer.html" . }}
......@@ -10,6 +10,21 @@ text: #888888
60cedb
*/
.banner-hero {
margin-top: 75px;
min-height: 240px;
background-color: #f3f3f3
}
.idprice {
background-color: #f3f3f3;
min-width: 105%
}
.idcard i {
color: white;
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
......@@ -45,12 +60,13 @@ p, div {
padding-top: 60px;
padding-bottom: 20px;
}
/*
.container {
max-width: 1000px;
padding-top: 2em;
padding-bottom: 2em
}
*/
.center {
text-align: center
......@@ -548,3 +564,36 @@ blockquote {
.shop-image {
height:180px;
}
.idcard {
margin-top: -50px;
max-width: 340px;
background-color: #0db4c7;
color: white
}
.idcard .price {
font-size: 2rem;
}
.idcard .btn {
background-color: #f3f3f3;
color: #888888
}
.idcard ul {
list-style-type: none;
}
.idcard h1 {
color: white;
}
ul.menu_horizontal li {
display : inline;
padding : 0 0.5em; /* Pour espacer les boutons entre eux */
}
ul.menu_horizontal {
list-style-type : none; /* Car sinon les puces se placent n'importe où */
}
ul.menu_horizontal i {
font-size: 2em;
}
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment