added functionalities texts and clips

This commit is contained in:
Nicolas Constant 2019-07-30 23:03:33 -04:00
parent f0573e06cc
commit fd42a3c5d2
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
12 changed files with 172 additions and 17 deletions

View File

@ -103,7 +103,8 @@ body {
font-size: 1.4rem;
text-decoration: none; }
.header__old-releases:hover {
color: #faa424; }
color: #faa424;
text-decoration: underline; }
.download-button {
transition: all .2s;
@ -165,10 +166,15 @@ body {
min-height: 20rem;
background-color: whitesmoke;
padding: 1rem; }
.section-clear__big-title {
font-weight: 400;
font-size: 3rem;
text-align: center; }
.section-clear__title {
font-weight: 400;
font-size: 2.5rem;
color: #141414;
margin-top: 5rem;
margin-left: 15vw; }
.section-clear__subtitle {
font-weight: 400;
@ -181,6 +187,33 @@ body {
background-color: #141414;
background-color: white; }
.functionalities__row {
max-width: 100rem; }
.functionalities__text {
display: block;
margin: auto;
font-weight: 400;
font-size: 2rem;
text-align: center;
padding: 7rem 5rem 0 5rem;
max-width: 50rem; }
.functionalities__conclusion {
max-width: 60rem;
padding: 2rem 5rem 5rem 5rem; }
.functionalities__strong {
font-weight: 400;
font-weight: bold; }
.functionalities__video {
display: block;
margin: 2rem auto; }
.functionalities__video:focus {
border: none;
outline: none; }
.footer {
text-align: center;
background-color: #141414;

View File

@ -68,6 +68,7 @@ $link-hover-color: rgb(250, 164, 36);;
&:hover {
color: $link-hover-color;
text-decoration: underline;
}
}
}

View File

@ -18,20 +18,27 @@
&-clear {
font-weight: 300;
font-family: 'Open Sans', sans-serif;
font-family: 'Open Sans', sans-serif;
min-height: 20rem;
background-color: whitesmoke;
padding: 1rem;
&__big-title {
font-weight: 400;
font-size: 3rem;
text-align: center;
}
&__title {
font-weight: 400;
font-size: 2.5rem;
color: $dark-background;
margin-top: 5rem;
margin-left: 15vw;
// text-align: center;
}
&__subtitle{
&__subtitle {
font-weight: 400;
font-size: 2rem;
color: $dark-background;
@ -46,4 +53,48 @@
background-color: $dark-background;
background-color: rgb(255, 255, 255);
}
}
.functionalities {
&__row {
max-width: 100rem;
}
&__text {
display: block;
margin: auto;
font-weight: 400;
font-size: 2rem;
// height: 30rem;
text-align: center;
padding: 7rem 5rem 0 5rem;
max-width: 50rem;
// outline: 1px solid greenyellow;
}
&__conclusion {
max-width: 60rem;
padding: 2rem 5rem 5rem 5rem;
}
&__strong {
font-weight: 400;
font-weight: bold;
}
&__video {
display: block;
margin: 2rem auto;
&:focus {
border: none;
outline: none;
}
}
}

BIN
docs/images/labels.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 313 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 313 KiB

After

Width:  |  Height:  |  Size: 286 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 286 KiB

BIN
docs/images/timelines.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 134 KiB

View File

@ -75,8 +75,8 @@
</div>
<div>
<a class="header__old-releases" href="https://github.com/NicolasConstant/sengi/releases/">browse
previous releases</a>
<a class="header__old-releases" href="https://github.com/NicolasConstant/sengi/releases/"
title="browse previous releases">browse previous releases</a>
</div>
</div>
</div>
@ -87,9 +87,8 @@
<section class="section-about">
<div class="section-about__about">
<p>Sengi is a multi-account desktop client.<br />
<br />
Its aim is to let you use all your accounts<br /> easily and seamlessly.<br />
<p>
Sengi will let you use all your accounts<br /> easily and seamlessly<br />
</p>
</div>
@ -105,20 +104,91 @@
<section class="section-separator"></section>
<section class="section-clear">
<h3 class="section-clear__title">Functionalities</h3>
<h4 class="section-clear__subtitle">Labels</h4>
<h2 class="section-clear__big-title">Main Functionalities</h2>
<h4 class="section-clear__title">Seamless account switch</h4>
<div class="row functionalities__row">
<div class="col-1-of-2">
<p class="functionalities__text">
Just click on the account's avatar, <br />
and all your next actions will be performed by it.<br/>
Yes, it's powerful.
</p>
</div>
<div class="col-1-of-2">
<video width="326" height="260" controls class="functionalities__video">
<source src="videos/Clip_account_switch.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<h4 class="section-clear__subtitle">Seamless account switch</h4>
<h4 class="section-clear__subtitle">Display globaly, interact precisely</h4>
<h4 class="section-clear__title">All instances timelines in one place</h4>
<div class="row functionalities__row">
<div class="col-1-of-2">
<p class="functionalities__text">
Add the timelines and lists of your account' instances all next to each others in the same
interface.
</p>
</div>
<div class="col-1-of-2">
<img src="images/timelines.png" class="functionalities__video" />
</div>
</div>
<h4 class="section-clear__subtitle">Autoremove Thread's Content-Warnings</h4>
<h4 class="section-clear__title">Don't lose your focus</h4>
<div class="row functionalities__row">
<div class="col-1-of-2">
<p class="functionalities__text">
Opening a profile, thread, hashtag or even just repling to someone will always take place in the
current Timeline.
</p>
</div>
<div class="col-1-of-2">
<video width="326" height="260" controls class="functionalities__video">
<source src="videos/Clip_timelines.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<h4 class="section-clear__subtitle">Trustfull and modern</h4>
<h4 class="section-clear__title">Labels</h4>
<div class="row functionalities__row">
<div class="col-1-of-2">
<p class="functionalities__text">
Get a quick insight if a status is part of a thread, has replies, is from a bot, is old, was
cross-posted (limited to local TL),
etcaetera.
</p>
</div>
<div class="col-1-of-2">
<img src="images/labels.png" class="functionalities__video" />
</div>
</div>
<h4 class="section-clear__title">Autoremove Thread's Content-Warnings</h4>
<div class="row functionalities__row">
<div class="col-1-of-2">
<p class="functionalities__text">
Easily remove all CW from a thread<br />
with one single click!
</p>
</div>
<div class="col-1-of-2">
<video width="326" height="260" controls class="functionalities__video">
<source src="videos/Clip_cw_button.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<h4 class="section-clear__title">And many more!</h4>
<div class="row functionalities__row">
<p class="functionalities__text functionalities__conclusion">
Sengi is for powerusers. There is a lot more things to discover and more to come too!
</p>
</div>
</section>
<section class="section-separator"></section>

Binary file not shown.

Binary file not shown.

Binary file not shown.