update fonts and content

css/pages/index.css

@@ -3,7 +3,6 @@
 @import "/css/utils/forms.css";
 
 @import "/css/sections/nav.css";
-@import "/css/sections/welcome.css";
 @import "/css/sections/about.css";
 @import "/css/sections/services.css";
 @import "/css/sections/projects.css";

css/sections/about.css

@@ -4,6 +4,7 @@
   align-items: center;
   justify-content: center;
   text-align: center;
+  margin-top: 3rem;
 }
 
 .about h2 {
@@ -15,10 +16,14 @@
   flex-direction: column;
   align-items: center;
   margin-bottom: 2rem;
-  text-align: center;
+  text-align: justify;
   max-width: 80%;
 }
 
 .about h3 {
   margin-bottom: 1.5rem;
+}
+
+.about a.btn {
+  margin-top: 5rem;
 }

css/sections/nav.css

@@ -18,12 +18,19 @@ nav {
   justify-content: center;
   align-items: center;
   display: flex;
+  margin-left: 1rem;
 }
 
 nav .logo img {
-  height: 2.6rem;
+  height: 2.5rem;
-  margin-left: 1rem;
+  margin-left: 0.2rem;
-  margin-right: 1rem;
+  margin-right: 0.2rem;
+  margin-top: -0.3rem;
+}
+
+nav .logo {
+  font-size: 2.5rem;
+  font-family: NeverMind-Bold;
 }
 
 nav ul {

css/sections/projects.css

@@ -16,7 +16,7 @@
 
 .projects .wrapper {
     display: flex;
-    align-items: flex-start;
+    align-items: stretch;
     justify-content: center;
     flex-flow: row wrap;
     margin: 2.5rem 0;
@@ -24,9 +24,9 @@
 
 .projects .project {
     display: flex;
-    text-align: center;
     flex-direction: column;
     align-items: center;
+    justify-content: flex-start;
     max-width: 25rem;
     padding: 2rem;
     margin: 1.5rem;
@@ -52,7 +52,6 @@
     margin: 1rem;
     padding: 0.5rem;
     border-radius: 0.5rem;
-    box-shadow: 0.1rem 0.1rem 0.5rem 0.1rem var(--box-shadow);
 }
 
 .project p.status.hold {

css/sections/services.css

@@ -4,6 +4,7 @@
   align-items: center;
   justify-content: center;
   background-color: var(--background-color-2);
+  text-align: justify;
 }
 
 .services h2 {

css/sections/welcome.css

@@ -1,63 +0,0 @@
-#welcome {
-  margin-top: var(--nav-height);
-  padding: 0;
-  background: url("/media/images/welcome-background-1080p.webp") center;
-  background-size: cover;
-  height: calc(100vh - var(--nav-height));
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-
-#welcome-logo {
-  height: 15rem;
-  width: 15rem;
-}
-
-#welcome h1 {
-  margin: 1rem 20% 1rem 1rem;
-  border: solid 0.25rem #5791FF;
-  border-radius: 50px;
-  padding: 0.5rem 1.25rem;
-  background-color: var(--background-color-1);
-}
-
-#welcome h4 {
-  margin: 0 0 0 20%;
-  border: solid 0.25rem #5791FF;
-  border-radius: 50px;
-  padding: 0.5rem 1.25rem;
-  background-color: var(--background-color-1);
-}
-
-#scroll-down {
-  position: absolute;
-  bottom: 2rem;
-  width: 3rem;
-  height: 2rem;
-}
-
-#scroll-down img {
-  width: 3rem;
-}
-
-@media only screen and (max-width: 1280px) {
-  #welcome {
-      background: url("/media/images/welcome-background-720p.webp") center;
-      background-size: cover;
-  }
-  #welcome h4 {
-      margin: 2rem;
-  }
-  #welcome h1 {
-      margin: 1rem;
-  }
-}
-@media only screen and (max-width: 500px) {
-  #welcome {
-      background: url("/media/images/welcome-background-mobile.webp") center;
-      background-size: cover;
-  }
-}

css/utils/base.css

@@ -1,8 +1,14 @@
 /* FONTS IMPORT */
 
 @font-face {
-    font-family: Friend;
+    font-family: NeverMind;
-    src: url("/media/fonts/Friend-Bold.otf");
+    src: url("/media/fonts/NeverMindRounded-Regular.woff2");
+    font-display: swap;
+}
+
+@font-face {
+    font-family: NeverMind-Bold;
+    src: url("/media/fonts/NeverMindRounded-Bold.woff2");
     font-display: swap;
 }
 
@@ -14,7 +20,7 @@
     box-sizing: border-box;
     border: none;
     text-decoration: none;
-    font-family: Friend, sans-serif;
+    font-family: NeverMind, sans-serif;
     scroll-behavior: smooth;
 }
 
@@ -64,6 +70,7 @@
 }
 
 html {
+
     color: var(--text-color-1);
     background-color: var(--background-color-1);
     scroll-padding-top: var(--nav-height);
@@ -80,23 +87,32 @@ a {
     text-decoration: none;
 }
 
+strong {
+    font-family: NeverMind-Bold, sans-serif;
+}
+
 h1 {
+    font-family: NeverMind-Bold, sans-serif;
     font-size: 3rem;
 }
 
 h2 {
+    font-family: NeverMind-Bold, sans-serif;
     font-size: 2.5rem;
 }
 
 h3 {
+    font-family: NeverMind-Bold, sans-serif;
     font-size: 2rem;
 }
 
 h4 {
+    font-family: NeverMind-Bold, sans-serif;
     font-size: 1.5rem;
 }
 
 h5 {
+    font-family: NeverMind-Bold, sans-serif;
     font-size: 1.4rem;
 }
 
@@ -114,11 +130,13 @@ section {
 /* CUSTOM */
 
 span.in-blk {
+    font-family: NeverMind-Bold, sans-serif;
     display: inline-block;
 }
 
-span.color-1 {
+span.q {
     color: var(--item-color-1);
+    font-family: NeverMind-Bold, sans-serif;
 }
 
 h1 .q {
@@ -160,4 +178,8 @@ p .q {
 .link {
     text-decoration: underline;
     color: var(--text-color-2);
+}
+
+a.btn {
+    font-family: NeverMind-Bold, sans-serif;
 }

pages/en/index.html

@@ -25,45 +25,53 @@
         <img src="/media/images/close.png" alt="Menu Icon">
       </label>
       <a href="#top" class="logo">
-        <img src="/media/images/logo.png" alt="TeleQom Logo">
+        Tele<img class="q" src="/media/images/Q.png" alt="Q">om
       </a>
       <ul id="nav-list">
         <li><a class="btn btn-2" href="#about">About</a></li>
         <li><a class="btn btn-2" href="#services">Services</a></li>
         <li><a class="btn btn-2" href="#projects">Projects</a></li>
         <li><a class="btn btn-2" href="#contact">Contact</a></li>
-        <li><a class="btn btn-2" href="/pages/fr/index.html">FR</a></li>
       </ul>
       <div id="qonsole-btn">
         <a href="https://qonsole.teleqom.org"><img src="/media/images/qonsole.png" alt="Qonsole"></a>
       </div>
     </nav>
   </header>
-  <section id="welcome">
-    <h1>
-      <span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om</span> Project
-    </h1>
-    <h4>
-      Telecommunications with <span class="color-1">Québec</span>'s values
-    </h4>
-    <a href="#about" id="scroll-down">
-      <img src="/media/images/down.png" alt="Icone defilement">
-    </a>
-  </section>
   <section class="about" id="about">
-    <h2>About Us</h2>
     <div>
       <h3>
-        What is <span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om?</span>
+        What is Tele<span class="q">Q</span>om?</span>
+      </h3>
+      <p>The <strong>Tele<span class="q">Q</span>om Project</strong> is NPO based in Quebec, Canada.
+        Our organisation creates software that is privacy respecting, ethical and secure by design.
+        We are funded by the profit generated from the services we offer and public donations.
+        If you believe in digital freedom, you will be amazed by what we do here.</p>
+    </div>
+    <div>
+      <h3>
+        Why Tele<span class="q">Q</span>om?
       </h3>
       <p>
-        The <span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om</span> Project, a Québec non-profit, is an ideal. We are attempting to restore ethics and
+        First, we don't spy on you like they all do.
-        morals within the applications all of us use on a daily basis. From your favorite social platform, online
+        In fact, we created the software in such a way that it is impossible to do so.
-        shopping, email or even messaging, almost all of them contain spying software. Robots read your emails and
+        If we know more about yourself than your mother does, it's a threat to your freedom.
-        your messages, some even listen to you talk. In our opinion, this is unacceptable and should be illegal but
+        You wouldn't allow strangers in your bedroom, would you? Well in truth, you currently do.
-        you accepted these terms before using those applications and devices and that is why the law is powerless at
+        We are here to change that.
-        the moment. Since we don't have viable alternatives, we follow these technology giants with bad intentions. It
+      </p>
-        is in response to this severe lack of humanity that <span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om</span> was born.
+    </div>
+    <div>
+      <h3>
+        In Technical Terms
+      </h3>
+      <p>
+        We design our software with what is called client-side encryption.
+        It means that most data you send out of your computer in encrypted before it is sent.
+        That way, even we cannot see what you are doing.
+        For example, when you upload a file in Dis<span class="q">Q</span>, it is encrypted with a key only you have before it gets sent.
+        So when it is in transit over the internet or when it is stored in our servers, it cannot be read by anyone but you.
+        The information we have access to is the file size, when it was sent to us and who it belongs to.
+        We cannot see the content, the title, or anything else that is private.
       </p>
     </div>
     <div>
@@ -71,47 +79,16 @@
         Libre Software
       </h3>
       <p>
-        <span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om</span> embraces a philosophy that has been around for quite some
+        Software is like a food recipe.
-        time, we use only Libre/Free Software. To make it simple, a program is much like a food recipe. Libre
+        It tells a computer what to do, step by step.
-        Software grants the public access to it's source code (the recipe, that we call our <a
+        Most corporations hide what they tell your computer to do, we do not.
-          href="https://qode.teleqom.org" target="_blank" rel="noreferrer noopener" class="link">Qode</a>) to audit
+        All our projects are distributed under a public license which gives the public access to the recipe, also called the source code.
-        and discover security flaws, modify or improve with the only condition of sharing back what was improved.
+        By doing so, millions of developers around the world can audit the code and improve it.
-        Proprietary software on the other hand, is the complete opposite. They hide how it works, and forbid auditing
+        We will always remain that transparent, especially for code that runs on your machine.
-        their source code. It is obviously much harder to discover what it truly does with your information.
+        Are you a developer? Take a look at our Qode by clicking the following button.
-      </p>
-    </div>
-    <div>
-      <h3>
-        The Real Difference
-      </h3>
-      <p>
-        Our projects are designed in such a way that it is impossible for us to spy on you. What you do in your private
-        life does not concern us. Proprietary artifical intelligence programs can already anticipate your behavior,
-        modifiy your habits and the way you think by simply using this data that we all think harmless. Companies like
-        <a href="https://en.wikipedia.org/wiki/Facebook%E2%80%93Cambridge_Analytica_data_scandal" target="_blank"
-          rel="noreferrer noopener" class="link">Cambridge Analytica</a> already interfered in the United-States
-        elections, and this is only the beginning. <a href="https://en.wikipedia.org/wiki/Pegasus_(spyware)"
-          target="_blank" rel="noreferrer noopener" class="link">Pegasus</a> gives unlimited access to those willing
-        to pay to the complete virtual life of anyone with the help of flaws in software. It is now urgent to get rid
-        of those chains, and that is where <span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om</span> comes in.
-      </p>
-    </div>
-    <div>
-      <h3>
-        Telecommunication
-      </h3>
-      <p>
-        It's not pretty when you take a closer look at how these big corporations use us. But instead of admitting
-        defeat, we chose to remedy this situation with whatever freedom we still have left. We will start by securing
-        our telecommunications (email, social, messaging, videoconference and telephone). Then, 
-        <span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ommerce</span>
-        will help fund the infrastructure and development of our projects. Finally, a voting application, called
-        <span class="in-blk">Politi<img class="q" src="/media/images/Q.png" alt="Q"></span>
-         that will give the power back to the people. Keep in mind, Tele<span>Q</span>om does not
-        sell your data and is a non-profit, so donations are necessary to its survival. We do what we can to offer our
-        projects for free, but it is not easy. All profits generated by the following services are invested in the
-        development of our projects!
       </p>
+      <a class="btn btn-1" target="_blank" href="https://qode.teleqom.org">Qode Repositories</a>
+
     </div>
   </section>
   <section  class="services" id="services">
@@ -123,7 +100,7 @@
         <p>A web site, a mobile application, an online shopping application, name it. Tele<span>Q</span>om uses Libre
           Software as much as possible to build your project. This results in an application that respects its users,
           is safer, more stable and much cheaper.</p>
-        <a class="btn btn-1" href="/pages/en/services/development.html">More</a>
+        <a class="btn btn-1" href="/pages/en/services/development.html">Development Services</a>
       </div>
     </div>
     <div class="service">
@@ -132,7 +109,7 @@
         <h4>Repairs</h4>
         <p>In the same way, we love to give your devices a second life. Broken phone display? Laptop not holding
           charge? Computer doesn't start or is slower than before? We can fix all of that!</p>
-          <a class="btn btn-1" href="/pages/en/services/repairs.html">More</a>
+          <a class="btn btn-1" href="/pages/en/services/repairs.html">Repair Services</a>
         </div>
     </div>
     <div class="service">
@@ -140,11 +117,11 @@
       <div class="service-content">
         <h4>Support</h4>
         <p>Paid support is also available for most technology related issues you may be facing. At
-          Tele<span>Q</span>om, we like to play around with techonology a lot. Could be your wi-fi network, your browser
+          Tele<span class="q">Q</span>om, we like to play around with techonology a lot. Could be your wi-fi network, your browser
           is
           out-of-date, you can't update apps on your phone, anything IT really. Just reach out to us, we might be able
           to help you!</p>
-        <a class="btn btn-1" href="#contact">Contact</a>
+        <a class="btn btn-1" href="#contact">Contact Us</a>
       </div>
     </div>
     <div class="service">
@@ -162,104 +139,101 @@
             rel="noreferrer noopener" class="link">Libre Office</a> is a great alternative for all types of documents.
           For image manipulation, <a href="https://www.gimp.org/" target="_blank" rel="noreferrer noopener"
             class="link">GIMP</a> is also a great choice.</p>
-        <a class="btn btn-1" href="/pages/en/services/installation.html">More</a>
+        <a class="btn btn-1" href="/pages/en/services/installation.html">Installation Services</a>
       </div>
     </div>
   </section>
 
   <section class="projects" id="projects">
       <h2>Our Projets</h2>
-      <p class="overview">The following projects are or will be available from your
+      <p class="overview">The following projects are Apps designed to be integrated in your <span class="q">Q</span>onsole.
-        <span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">onsole</span>.
         Come back later to see if the Status of your favorite project changed!</p>
       <div class="wrapper">
         <div class="project">
           <img src="/media/images/qonsole.png" alt="Qonsole Logo">
           <h4><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">onsole</span></h4>
-          <p class="description">The main dashboard where you can access all of your applications. The
+          <p class="status dev">In Development</p>
-            <span>Q</span>onsole is in charge of displaying all your apps in the same location, in a uniform and simple
+          <p class="description">The main dashboard where you can access all of your applications. The <span class="q">Q</span>onsole is in charge of displaying all your apps in the same location, in a uniform and simple
             way.
           </p>
-          <p class="status dev">In Development</p>
         </div>
         <div class="project">
           <img src="/media/images/disq.png" alt="DisQ Logo">
           <h4><span class="in-blk">Dis<img class="q" src="/media/images/Q.png" alt="Q"></span></h4>
+          <p class="status dev">In Development</p>
           <p class="description">This is where you store all your data, it's your personal hard drive but
             hosted on an external server. All accessible only by you, the server can not see your data.</p>
-          <p class="status dev">In Development</p>
         </div>
         <div class="project">
           <img src="/media/images/interqom.png" alt="InterQom Logo">
           <h4><span class="in-blk">Inter<img class="q" src="/media/images/Q.png" alt="Q">om</span></h4>
-          <p class="description"><span class="in-blk">Inter<img class="q" src="/media/images/Q.png" alt="Q">om</span>
+          <p class="status hold">On Hold</p>
+          <p class="description">Inter<span class="q">Q</span>om
              is the sane alternative to other social networks.
             Your conversations are entirely private and even we don't have access to your data.</p>
-          <p class="status hold">On Hold</p>
         </div>
         <div class="project">
           <img src="/media/images/qommerce.png" alt="Qommerce Logo">
           <h4><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ommerce</span></h4>
+          <p class="status hold">On Hold</p>
           <p class="description">The center of exchange and online commerce. Local businesses and
             individuals can share the fruit of their labour. We will accept cryptocurrencies as well as regular Canadian
             money.</p>
-          <p class="status hold">On Hold</p>
         </div>
         <div class="project">
           <img src="/media/images/qonvo.png" alt="Qonvo Logo">
           <h4><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">onvo</span></h4>
-          <p class="description">Instant messaging is the easiest way we have to communicate with one
-            another. This project includes audio and video calls, all encrypted from you to your recipients.</p>
           <p class="status hold">On Hold</p>
+          <p class="description">Instant messaging, audio and video calls, all end-to-end encrypted from you to your recipients. </p>
         </div>
         <div class="project">
           <img src="/media/images/qourrier.png" alt="Qourrier Logo">
           <h4><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ourier</span></h4>
-          <p class="description">The portal to access your emails, from your <span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">onsole</span>. Emails
-            between users are fully encrypted and we support most providers.</p>
           <p class="status hold">On Hold</p>
+          <p class="description">The portal to access your emails, from your <span class="q">Q</span>onsole. Emails
+            between users are fully encrypted and we support most providers.</p>
         </div>
         <div class="project">
           <img src="/media/images/politiq.png" alt="PolitiQ Logo">
           <h4><span class="in-blk">Politi<img class="q" src="/media/images/Q.png" alt="Q"></span></h4>
-          <p class="description"><span class="in-blk">Tele<img class="q" src="/media/images/Q.png" alt="Q">om</span>
+          <p class="status hold">On Hold</p>
+          <p class="description">Tele<span class="q">Q</span>om
              is a round table where all Quebecers are invited. Your
             opinion will finally be heard in the government. The real democracy at your fingertips!</p>
-          <p class="status hold">On Hold</p>
         </div>
         <div class="project">
           <img src="/media/images/qontact.png" alt="Qontact Logo">
           <h4><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">ontact</span></h4>
+          <p class="status hold">On Hold</p>
           <p class="description">The good old address book. Here you store your contact information, email,
             phone, <span>Q</span>onvo or Inter<span>Q</span>om identifier, and more.</p>
-          <p class="status hold">On Hold</p>
         </div>
         <div class="project">
           <img src="/media/images/qalendrier.png" alt="Qalendrier Logo">
           <h4><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">alender</span></h4>
+          <p class="status hold">On Hold</p>
           <p class="description">We all need a calendar. Here you can manage your personal or professional
             life, schedule an appointment with another user and even see your future events on 
-            <span class="in-blk">Inter<img class="q" src="/media/images/Q.png" alt="Q">om</span>.
+            Inter<span class="q">Q</span>om.
           </p>
-          <p class="status hold">On Hold</p>
         </div>
         <div class="project">
           <img src="/media/images/qable.png" alt="Qable Logo">
           <h4><span class="in-blk"><img class="q" src="/media/images/Q.png" alt="Q">able</span></h4>
+          <p class="status hold">On Hold</p>
           <p class="description">The audio and video content delivery platform, which uses <a
               href="https://en.wikipedia.org/wiki/BitTorrent" target="_blank" rel="noreferrer noopener"
               class="link">Torrent</a> technology to lighten the load on the servers and therefore the resulting costs.
             The more people watching it, the faster it gets!</p>
-          <p class="status hold">On Hold</p>
         </div>
         <div class="project">
           <img src="/media/images/qi.png" alt="Qi Logo">
           <h4><span class="in-blk">i<img class="q" src="/media/images/Q.png" alt="Q"></span></h4>
+          <p class="status hold">On Hold</p>
           <p class="description">
-            Tutorials for everyone! Each page contains the other <span class="in-blk">i<img class="q" src="/media/images/Q.png" alt="Q"></span> necessary or recommended to understand the subject at hand.
+            Tutorials for everyone! Each page contains the other i<span class="q">Q</span> necessary or recommended to understand the subject at hand.
             You will be able to widen your scope of the world, all in private naturally!
           </p>
-          <p class="status hold">On Hold</p>
         </div>
       </div>
   </section>