#30 Improve Docs Experience - Adding Dark theme and sort Options
Opened 2 years ago by joewest24. Modified 2 years ago
fedora-docs/ joewest24/pages master  into  master

@@ -1,110 +1,5 @@ 

- = Fedora Documentation

- :page-layout: homepage

+ position: relative;

+ width: 1440px;

+ height: 1024px;

  

- ++++

- <div class="homepage-page">

-     <div class="homepage-section homepage-section-user-docs">

-         <h2>User Documentation</h2>

-             <div class="homepage-section-container">

-             <a href="../fedora/f35/" class="homepage-link homepage-link-primary">

-                 <h3>Fedora&nbsp;Linux&nbsp;35</h3>

-                 <p>Documentation covering the most recent release, Fedora Linux 35.</p>

-             </a>

- 

-             <a href="../fedora/f34/" class="homepage-link homepage-link-primary">

-                 <h3>Fedora&nbsp;Linux&nbsp;34</h3>

-                 <p>Documentation covering the Fedora Linux 34 release.</p>

-             </a>

- 

-             <a href="../quick-docs/" class="homepage-link homepage-link-primary">

-                 <h3>Quick Docs</h3>

-                 <p>How tos and tutorials for using and configuring Fedora Linux.</p>

-             </a>

-         </div>

-         <div class="homepage-section-container">

-             <a href="../fedora-server/" class="homepage-link homepage-link-primary">

-                 <h3>Fedora&nbsp;Server</h3>

-                 <p>Are you using Fedora Linux on a server? This section is for you.</p>

-             </a>

-             <a href="../iot/" class="homepage-link homepage-link-primary">

-                 <h3>Fedora&nbsp;IoT</h3>

-                 <p>Strong foundation for IoT projects at home, industrial gateways, smart cities or analytics with AI/ML.</p>

-             </a>

-             <a href="../fedora-silverblue/" class="homepage-link homepage-link-primary">

-                 <h3>Fedora&nbsp;Silverblue</h3>

-                 <p>Immutable desktop variant of Fedora Workstation and an excellent platform for container-focused workflows.</p>

-             </a>

-         </div>

-         <div class="homepage-section-container">

-             <a href="../fedora-coreos/" class="homepage-link homepage-link-primary">

-                 <h3>Fedora&nbsp;CoreOS</h3>

-                 <p>Fedora CoreOS is a minimal, container-focused operating system, designed for clusters but also operable standalone.</p>

-             </a>

-             <a href="../epel/" class="homepage-link homepage-link-primary">

-                 <h3>EPEL</h3>

-                 <p>Documentation for the Extra Packages for Enterprise Linux (EPEL) project.</p>

-             </a>

-             <a href="../fedora-kinoite/" class="homepage-link homepage-link-primary">

-                 <h3>Fedora&nbsp;Kinoite</h3>

-                 <p>Immutable desktop variant of Fedora featuring the KDE Plasma desktop and container-focused workflows.</p>

-             </a>

-         </div>

-         <div class="homepage-section-container">

-             <a href="../fedora/rawhide/" class="homepage-link homepage-link-secondary">

-                 <h3>Fedora&nbsp;Linux&nbsp;Rawhide</h3>

-                 <p>Draft documentation targeting future Fedora Linux releases.</p>

-             </a>

-             <a href="../Fedora/26/html/Release_Notes/index.html" class="homepage-link homepage-link-secondary">

-                 <h3>Older releases</h3>

-                 <p>Older Fedora Linux user documentation.</p>

-             </a>

-         </div>

-     </div>

- 

-     <div class="homepage-section homepage-section-project-docs">

-         <h2>Fedora Project &amp; Community</h2>

-         <div class="homepage-section-container">

-             <a href="../project/" class="homepage-link homepage-link-primary">

-                 <h3>Fedora Project</h3>

-                 <p>Learn how the Fedora Project works.</p>

-             </a>

-             <a href="../council/" class="homepage-link homepage-link-primary">

-                 <h3>Fedora Council</h3>

-                 <p>Learn about the Fedora Project governance.</p>

-             </a>

-         </div>

-         <div class="homepage-section-container">

-             <a href="../engineering/" class="homepage-link homepage-link-primary">

-                 <h3>Engineering Teams</h3>

-                 <p>Learn about FESCo and Engineering subprojects, SIGs, Work Groups, and teams.</p>

-             </a>

-             <a href="../mindshare/" class="homepage-link homepage-link-primary">

-                 <h3>Mindshare Teams</h3>

-                 <p>Learn about Mindshare and its subprojects and teams.</p>

-             </a>

-             <a href="../diversity-inclusion/" class="homepage-link homepage-link-primary">

-                 <h3>Diversity & Inclusion</h3>

-                 <p>The goal of this initiative is to help foster diversity and inclusion in Fedora community.</p>

-             </a>

-             <a href="../program_management/" class="homepage-link homepage-link-primary">

-                 <h3>Program Management</h3>

-                 <p>Release planning, scheduling, and status tracking.</p>

-             </a>

-         </div>

-         <div class="homepage-section-container">

-             <a href="../packaging-guidelines/" class="homepage-link homepage-link-secondary">

-                 <h3>Fedora Packaging Guidelines</h3>

-                 <p>Learn about packaging for Fedora Linux — from both a policy and a technical perspective.</p>

-             </a>

-             <a href="https://fedoraproject.org/wiki/Outreachy/2017" class="homepage-link homepage-link-secondary">

-                 <h3><i class="fas fa-external-link-alt"></i> Fedora's Outreachy Docs</h3>

-                 <p>Outreachy is an internship program for people from group underrepresented in free and open source software.</p>

-             </a>

-             <a href="../mentored-projects/gsoc/2021/" class="homepage-link homepage-link-secondary">

-                 <h3>Fedora's Google Project Participation</h3>

-                 <p>Information about Google Summer of Code (GSoC), Google Code In (GCI), and Google Season of Docs (GSoD).</p>

-             </a>

-         </div>

-     </div>

- </div>

- ++++

+ background: #FFFFFF;

I believe every site should be built to make its constituents easy to access, that's why I would like to propose another adjustment to the fedora docs page.

I did a survey of 5 persons that I specifically handpicked for the sake of the survey due to the rate of use of devices by these 5 persons. I asked if they liked having options for viewing a page and I asked them to state those options. 70% of them mentioned that they'd have also preferred if they were given an option of viewing pages in dark mode as it helps reduce battery consumption and reduces the effect of blue light on the eye(it has been scientifically proven).
The idea of also being able to sort data on the page was also brought up in the survey.

I used the information from the survey to design a new prototype of the fedora docs site.
Note: I added a "night mode" icon at the top right corner, by clicking on it, the page changes to a darker theme and vice versa. A drop-down menu was also added at the top left corner to be able to sort data on the site.

Here's a link to the prototype
https://www.figma.com/proto/opx3qcXcFYIPzaift58Pl7/Fedora-proposed-front-page?page-id=0%3A1&node-id=169%3A643&viewport=241%2C48%2C0.35&scaling=min-zoom&starting-point-node-id=7%3A2&show-proto-sidebar=1

I used Figma as a design tool.

1 new commit added

  • Update homepage/modules/ROOT/pages/index.adoc
2 years ago
Metadata