added functionalities texts and clips
This commit is contained in:
parent
f0573e06cc
commit
fd42a3c5d2
|
@ -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;
|
||||
|
|
|
@ -68,6 +68,7 @@ $link-hover-color: rgb(250, 164, 36);;
|
|||
|
||||
&:hover {
|
||||
color: $link-hover-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -23,15 +23,22 @@
|
|||
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;
|
||||
|
@ -47,3 +54,47 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
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 |
Binary file not shown.
After Width: | Height: | Size: 134 KiB |
|
@ -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>
|
||||
<h2 class="section-clear__big-title">Main Functionalities</h2>
|
||||
|
||||
<h4 class="section-clear__subtitle">Labels</h4>
|
||||
<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__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">Seamless account switch</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">Display globaly, interact precisely</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__subtitle">Autoremove Thread's Content-Warnings</h4>
|
||||
|
||||
<h4 class="section-clear__subtitle">Trustfull and modern</h4>
|
||||
<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.
Loading…
Reference in New Issue