added functionalities texts and clips

docs/assets/css/main.css

@@ -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;

docs/assets/sass/layout/_header.scss

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

docs/assets/sass/layout/_section.scss

@@ -23,10 +23,17 @@
         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;
         }
@@ -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;
+        }
+    }
+
+}

docs/index.html

@@ -75,8 +75,8 @@
 
                     </div>
                     <div>
-                        <a class="header__old-releases" href="https://github.com/NicolasConstant/sengi/releases/">browse
+                        <a class="header__old-releases" href="https://github.com/NicolasConstant/sengi/releases/"
-                            previous releases</a>
+                            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 />
+                <p>
-                    <br />
+                    Sengi will let you use all your accounts<br /> easily and seamlessly<br />
-                    Its aim is to 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__title">Autoremove Thread's Content-Warnings</h4>
-
+            <div class="row functionalities__row">
-            <h4 class="section-clear__subtitle">Trustfull and modern</h4>
+                <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>