Merge pull request #1 from VentGrey/webhint-compliance

Webhint compliance

Author: Omar Jair Purata Funes

css.css

@@ -1,3 +1,7 @@
+:root {
+    --cereus-dark: #232323;
+}
+
 * {
  margin: 0px;
  padding: 0px;
@@ -11,7 +15,7 @@ nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
- background-color: #232323;
+ background-color: var(--cereus-dark);
 }
 
 nav img {
@@ -69,7 +73,7 @@ nav img:hover {
  left: 6%;
  margin-top: 6px;
  padding: 4vh 4vh 4vh 2vh;
- background: #232323;
+ background: var(--cereus-dark);
  border-radius: 16px;
 }
 
@@ -144,7 +148,7 @@ nav img:hover {
  font-size: 20px;
  font-weight: bold;
  padding: 8px 25px;
- background-color: #232323;
+ background-color: var(--cereus-dark);
  color: #f2f2f2;
  transition: 0.6s;
 }
@@ -221,6 +225,17 @@ nav img:hover {
  text-decoration: none;
 }
 
+
+.features-desk h3 {
+ padding-top: 10px;
+ color: #FAFAFA;
+}
+
+.features-desk p {
+ padding: 10px 0px; 
+ color: #FAFAFA;
+}
+
 /* --- tarjetas --- */ 
 .tarjeta-basics {
  flex-basis: 32%;
@@ -411,7 +426,7 @@ nav img:hover {
  width: 100%;
  min-height: 10vh;
  text-align: center;
- background-color: #232323;
+ background-color: var(--cereus-dark);
  color: #f2f2f2;
 }
 
@@ -507,7 +522,7 @@ nav img:hover {
 
 @media (prefers-color-scheme: dark) {
  body {
-  background-color: #232323;
+  background-color: var(--cereus-dark);
   color: #f2f2f2;
  }
 
@@ -524,11 +539,11 @@ nav img:hover {
 @media (prefers-color-scheme: light) {
  body {
   background-color: #f2f2f2;
-  color: #232323;
+  color: var(--cereus-dark);
  }
 
  .footer {
- background-color: #232323;
+ background-color: var(--cereus-dark);
  } 
 
  .intro-contenido h1:hover {

index.html

@@ -1,10 +1,12 @@
 <!DOCTYPE html>
- <html lang=eng>
+ <html lang="EN">
+  <meta charset="utf-8">
  <!--HEADERS-->
   <head>
    <!--TITLE-->
-  <link rel="shortcut icon" type="" href="../res/DE/cereus-icon.png">
-  <title> Cereus Linux</title>
+  <link rel="shortcut icon" type="image/png" href="../res/DE/cereus-icon.png">
+  <title>Cereus Linux</title>
+  <meta name="description" content="Cereus Linux it's a Gnu/Linux distribution derived from Void Linux thar focuses on delivering a user friendly experience.">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="css.css">
   <script src="navbar.js"></script>
@@ -49,7 +51,7 @@ <h3>Secure</h3>
      </div>
      <div class="tarjeta-repos">
       <h3>Added software</h3>
-      <p>Find everything you need with the <br><a href="https://sourceforge.net/projects/cereus-linux/files/repos/"  target="_blank">Cereus repos</a></p>
+      <p>Find everything you need with the <br><a rel="noopener" href="https://sourceforge.net/projects/cereus-linux/files/repos/"  target="_blank">Cereus repos</a></p>
      </div>
     </div>
    </section>
@@ -59,22 +61,22 @@ <h3>Added software</h3>
        <h1>Choose<br>What do you want</h1>
        <p>Cereus Linux offers some desktops options</p>
       </div>
-      <div class="features">
+      <div class="features features-desk">
        <div class="lxqt">
-        <h3 style="color:#ffffff;">LXQt</h3>
-        <p style="color:#e6e6e6;">Lightweight Desktop based on Qt</p>
+        <h3>LXQt</h3>
+        <p>Lightweight Desktop based on Qt</p>
        </div>
        <div class="xfce">
-        <h3 style="color:#ffffff;">Xfce</h3>
-        <p style="color:#e6e6e6;">Lightweight Desktop based on GTK</p>
+        <h3>Xfce</h3>
+        <p>Lightweight Desktop based on GTK</p>
        </div>
        <div class="plasma">
-        <h3 style="color:#ffffff;">Plasma</h3>
-        <p style="color:#e6e6e6;">Modern and highly customizable desktop based on QT</p>
+        <h3>Plasma</h3>
+        <p>Modern and highly customizable desktop based on QT</p>
        </div>
        <div class="cinnamon">
-        <h3 style="color:#ffffff;">Cinnamon</h3>
-        <p style="color:#e6e6e6;">Modern and Classic Desktop based on GTK</p>
+        <h3>Cinnamon</h3>
+        <p>Modern and Classic Desktop based on GTK</p>
        </div>
       </div>
      </section>

navbar.html

@@ -1,18 +1,19 @@
 <nav>
-    <a href="index.html"><img src="res/ui/logo.svg"></a>
-     <div class="navbar">
-      <ul class="nav" border: 1px solid white;>
-        
-          <li><a href="index.html">HOME</a>        
-        <li><a href="downloads.html">DOWNLOADS</a><ul>
-
-            <li><a href="pages/lxqt.html">LXQT</a>
-            <li><a href="pages/xfce.html">XFCE</a>
-            <li><a href="pages/plasma.html">PLASMA</a>
-            <li><a href="pages/cinnamon.html">CINNAMON</a></ul>
-        <li><a href="https://sourceforge.net/p/cereus-linux/blog/" target="_blank" rel="noopener noreferrer">BLOG</a>       
-        <li><a href="about.html">ABOUT</a>
-
-        </ul>
-     </div>
-   </nav>
+  <a aria-label="Inicio" href="index.html"><img height="48" width="48" alt="Logo de Cereus Linux" src="res/ui/logo.svg"></a>
+  <div class="navbar">
+    <ul class="nav" border: 1px solid white;>
+      
+      <li><a href="index.html">HOME</a>        
+      <li><a href="downloads.html">DOWNLOADS</a><ul>
+          
+      <li><a href="pages/lxqt.html">LXQT</a>
+      <li><a href="pages/xfce.html">XFCE</a>
+      <li><a href="pages/plasma.html">PLASMA</a>
+      <li><a href="pages/cinnamon.html">CINNAMON</a></ul>
+      <li><a href="https://sourceforge.net/p/cereus-linux/blog/" target="_blank" rel="noopener noreferrer">BLOG</a>       
+                    
+      <li><a href="about.html">ABOUT</a>
+                      
+    </ul>
+  </div>
+</nav>