fix css lint errors (#146)

.stylelintrc.json

@@ -7,7 +7,6 @@
         "block-no-empty": true,
         "unit-no-unknown": true,
         "property-no-unknown": true,
-        "no-duplicate-selectors": null,
-        "custom-property-pattern": null
+        "selector-class-pattern": null
     }
 }

docs/README.md

@@ -6,4 +6,4 @@
 - [serviceWorker](serviceWorker.md)
 
 * [Taskbar](taskbar.md)
-* [Menu Bar](menu-bar.md)
+* [Menubar](menubar.md)

docs/menubar.md

@@ -0,0 +1,20 @@
+# Menubar
+The menubar is a horizontal bar located at the top of the screen.
+
+
+## Components
+The menubar is composed of the following components:
+
+* HTML in `index.html`
+* CSS in `/css/menubar.css`
+
+
+
+## Properties
+
+### Variants
+The menubar variant can be changed by adding the following classes to the menubar element:
+
+* `menubar--minimal` - A minimal menubar
+* `menubar--floating` - A floating menubar
+* `menubar--none` - No menubar

docs/taskbar.md

@@ -14,7 +14,7 @@ The taskbar is composed of the following components:
 ## Properties
 
 ### Variants
-The menu bar variant can be changed by adding the following classes to the menu bar element:
+The menubar variant can be changed by adding the following classes to the menubar element:
 
 * `taskbar--floating` - A floating taskbar
 

src/404/style.css

@@ -12,17 +12,14 @@ html {
 }
 
 body {
-    font-family: Arial, sans-serif;
-    font-size: 16px;
-
     display: flex;
     justify-content: center;
     align-items: center;
-
     margin: 0;
     height: 100vh;
     width: 100vw;
-
+    font-family: Arial, sans-serif;
+    font-size: 16px;
     color: var(--text-color);
     background-color: var(--bg-color);
 }
@@ -54,13 +51,13 @@ body {
 
 
 /* MOBILE */
-@media screen and (max-width: 750px) {
+@media screen and (width <= 750px) {
     .bsod__header {
         font-size: 6.25rem;
     }
 }
 
-@media screen and (max-width: 380px){
+@media screen and (width <= 380px){
     .bsod {
         width: 95%;
     }

src/about/style.css

@@ -17,11 +17,12 @@ body {
 
 :root {
     --background: #fff;
-    --text-color: #333333;
+    --text-color: #333;
     --text-color-secondary: #4b5563;
     --primary-color: #3b82f6;
     --secondary-color: #e5e7eb;
 }
+
 @media screen and (prefers-color-scheme: dark) {
     :root {
         --background: #1a202c;
@@ -76,7 +77,7 @@ p {
     border-width: 1px;
     box-sizing: border-box;
     display: inline-block;
-    margin: 0 8px 8px 8px;
+    margin: 0 8px 8px;
     padding: 12px 32px;
     text-transform: uppercase;
     text-decoration: none;
@@ -107,12 +108,9 @@ header {
     justify-content: space-between;
     align-items: center;
     padding: 0 16px;
-
     height: 65px;
     box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
-
     background-color: var(--background);
-
     position: sticky;
     top: 0;
 }
@@ -139,7 +137,7 @@ header nav li {
 }
 
 /* remove "irrelevant-links" when on mobile */
-@media (max-width: 700px) {
+@media (width <= 700px) {
     header nav .irrelevant-link {
         display: none;
     }
@@ -151,7 +149,7 @@ header nav li {
 main {
     margin: 0 auto;
     max-width: 1024px;
-    padding: 0 16px;
+    padding: 16px 0;
 }
 
 /* TITLE & IMG */
@@ -207,7 +205,7 @@ main {
     margin-bottom: 0;
 }
 
-@media (min-width: 1024px) {
+@media (width >= 1024px) {
     .home-features > ul {
         display: flex;
     }
@@ -228,9 +226,4 @@ section.text > h2 {
 
 section.text a {
     color: var(--primary-color);
-}
-
-
-main {
-    padding-bottom: 16px;
 }

src/css/action-menu.css

@@ -34,13 +34,15 @@
     width: 100%;
     margin-bottom: 10px;
 }
+
 #action-menu .notifications h3 {
     color: #fff;
     font-size: 1.2em;
     margin: 0;
     padding: 0;
     user-select: none;
 }
+
 #action-menu .notifications button {
     /* clear all button */
     background-color: #393939;

src/css/context-menu.css

@@ -29,18 +29,14 @@
 
 .context-menu {
     box-sizing: border-box;
-
     user-select: none;
     position: fixed;
     z-index: 9999;
     width: 200px;
-
     border-radius: 4px;
     box-shadow: #5a5353 0 0 5px 0;
-
     padding: 6px;
     background-color: var(--menu-background);
-
     transform: scale(0);
     transform-origin: top left;
 }
@@ -58,13 +54,11 @@
     border-radius: 4px;
     color: var(--text-color);
     background-color: inherit;
-
     display: flex;
     align-items: center;
     justify-content: flex-start;
     padding: 2px;
     margin: 0;
-
     height: 30px;
     width: 100%;
 }
@@ -92,6 +86,7 @@
     justify-content: center;
     width: 25%;
 }
+
 .context-menu .vertical-section button svg {
     width: 80%;
 }

src/css/desktop.css

@@ -1,6 +1,7 @@
 :root {
     /* --desktop-background: url('URL') no-repeat center center / cover; */
-    --desktop-background: linear-gradient(to right, purple, rgb(35, 192, 204));
+    --desktop-background: linear-gradient(to right, purple, rgb(35 192 204));
+
     /* --desktop-background: #494949; */
 }
 

src/css/fix-scrollbar.css

@@ -1,5 +1,7 @@
 /** ------ SCROLL BAR FIX FOR CHROME ------ */
+
 /* chrome scrollbar is still the old blocky one */
+
 /* this is a fix for that */
 
 /* width */

src/css/menu-bar.css → src/css/menubar.css

@@ -1,11 +1,6 @@
-.menu-bar {
+.menubar {
     --bg-color: #212841;
-}
-.menu-bar__container {
-    --bg-color: #131b27;
-}
 
-.menu-bar {
     box-sizing: border-box;
     position: absolute;
     top: 0;
@@ -20,23 +15,25 @@
     padding: 0 10px;
 }
 
-.menu-bar__left,
-.menu-bar__middle,
-.menu-bar__right {
+.menubar__left,
+.menubar__middle,
+.menubar__right {
     display: flex;
     align-items: center;
     gap: 10px;
     height: 100%;
 }
 
 /* make sure middle is always centered */
-.menu-bar__middle {
+.menubar__middle {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
 }
 
-.menu-bar__container {
+.menubar__container {
+    --bg-color: #131b27;
+
     display: flex;
     align-items: center;
     background-color: var(--bg-color);
@@ -46,22 +43,23 @@
     padding: 4px 8px;
 }
 
-.menu-bar__container > * {
+.menubar__container > * {
     height: 100%;
+
     --hover-color: none;
     --active-color: none;
 }
 
 
 
 /* Clock */
-.menu-bar__container--clock {
+.menubar__container--clock {
     padding: 0 10px;
 }
 
 /* Actions */
-.menu-bar__container--actions {
-    gap: 0px;
+.menubar__container--actions {
+    gap: 0;
 }
 
 
@@ -70,56 +68,56 @@
 
 /* ##### Variants ##### */
 
-.menu-bar--none {
+.menubar--none {
     display: none !important;
 }
 
 /* floating */
-.menu-bar--floating {
+.menubar--floating {
     margin: 6px;
     width: calc(100vw - 12px);
     border-radius: 12px;
 }
 
 /* minimal */
-.menu-bar--minimal {
+.menubar--minimal {
     margin: 0;
     height: 36px;
     width: 100vw;
     padding: 0;
-    background-color: rgba(0, 0, 0, 10%)
+    background-color: rgb(0 0 0 / 10%)
 }
 
 @media (prefers-color-scheme: light) {
-    .menu-bar--minimal {
-        background-color: rgba(255, 255, 255, 10%);
+    .menubar--minimal {
+        background-color: rgb(255 255 255 / 10%);
     }
 }
 
 
-.menu-bar--minimal .menu-bar__container {
+.menubar--minimal .menubar__container {
     height: 100%;
     padding: 0;
     background-color: transparent;
 }
 
-.menu-bar--minimal .menu-bar__container--status {
+.menubar--minimal .menubar__container--status {
     display: none;
 }
 
 
 
 
 
-@media screen and (max-width: 1050px) {
-    .menu-bar__container--status applet-network-down,
-    .menu-bar__container--status applet-network-rtt {
+@media screen and (width <= 1050px) {
+    .menubar__container--status applet-network-down,
+    .menubar__container--status applet-network-rtt {
         display: none;
     }
 }
 
-@media screen and (max-width: 900px) {
-    .menu-bar__container--status {
+@media screen and (width <= 900px) {
+    .menubar__container--status {
         display: none;
     }
 }