Added class prefix to buttons, Improved intro, Changed sidebar slightly

Update index.php, buttons.php, and 4 more files...

htdocs/index.php

@@ -31,27 +31,8 @@
 
 <header class="w-full p-m pl-s">
     <h1 class="t-size-17 t-w-500">
-        <i class="fa-solid fa-house mr-s"></i><span np-l10n-key="header.title">Homepage</span>
+        <i class="fa-brands fa-css3-alt mr-s"></i>NibbleCSS Documentation
     </h1>
-    <details id="lang-selector" class="b p-mxs px-s bkgd-blank-dark r-m">
-        <summary>
-            <i class="fad fa-language"></i>
-            <span class="mobile-hide t-w-500">&nbsp;Language</span>
-            &nbsp;<i class="fa fa-angle-down"></i>
-        </summary>
-        <div class="p-xs border bkgd-surround r-m t-w-500">
-            <a href="/en/" class="bland-link">
-                <p class="mb-s px-xxs">English</p>
-            </a>
-            <a href="/fr/" class="bland-link">
-                <p class="my-s px-xxs">French</p>
-            </a>
-            <hr class="subtle m-0">
-            <a href="/" class="bland-link">
-                <p class="mt-xs px-xxs">Automatic</p>
-            </a>
-        </div>
-    </details>
 </header>
 
 <main id="main" class="b br-0 p-m rl-m">

htdocs/parts/buttons.php

@@ -46,27 +46,27 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         </p>
         <div class="grid col-2 grid-gap-xs">
             <div>
-                <button class="p-xs r-s border primary">Primary button</button>
+                <button class="p-xs r-s border btn-primary">Primary button</button>
                 <code class="d-block p-xxs border r-s mt-s">
-                    button.p-xs.r-s.border<b>.primary</b>
+                    button.p-xs.r-s.border<b>.btn-primary</b>
                 </code>
             </div>
             <div>
-                <button class="p-xs r-s border success">Success button</button>
+                <button class="p-xs r-s border btn-success">Success button</button>
                 <code class="d-block p-xxs border r-s mt-s">
-                    button.p-xs.r-s.border<b>.success</b>
+                    button.p-xs.r-s.border<b>.btn-success</b>
                 </code>
             </div>
             <div>
-                <button class="p-xs r-s border warning">Warning button</button>
+                <button class="p-xs r-s border btn-warning">Warning button</button>
                 <code class="d-block p-xxs border r-s mt-s">
-                    button.p-xs.r-s.border<b>.warning</b>
+                    button.p-xs.r-s.border<b>.btn-warning</b>
                 </code>
             </div>
             <div>
-                <button class="p-xs r-s border error">Danger/Error button</button>
+                <button class="p-xs r-s border btn-error">Danger/Error button</button>
                 <code class="d-block p-xxs border r-s mt-s">
-                    button.p-xs.r-s.border<b>.error</b>
+                    button.p-xs.r-s.border<b>.btn-error</b>
                 </code>
             </div>
         </div>

htdocs/parts/intro.php

@@ -8,7 +8,7 @@ global $root_path;
 ?>
 
 <div class="p-xs b r-s bkgd-grid">
-    <h2 class="t-w-500 t-size-14">Welcome to <i class="ml-xxs">NibblePoker.com</i></h2>
+    <h2 class="t-w-500 t-size-14">Introduction</h2>
 </div>
 <section class="p-s">
     <h3 class="t-size-12 mb-xxs">About the stylesheet</h3>
@@ -70,7 +70,7 @@ global $root_path;
                        title="Download the minified full stylesheet"
                        class="a-hidden"
                        download>
-                        <button class="success p-xs b r-m">
+                        <button class="btn-success p-xs b r-m">
                             <i class="fa fa-download"></i>
                             nibblepoker.min.css
                             (<?php echo(formatBytes(filesize($root_path . "/css/nibblepoker.min.css"))) ?>)

htdocs/parts/sidebar.php

@@ -12,9 +12,6 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
              alt="Website's logo"
              draggable="false">
     </a>
-    <p class="quantum t-logo-text mb-s mt-xs t-muted ucase">
-        N<span class="t-super-muted">ibble</span>P<span class="t-super-muted">oker</span>
-    </p>
     <hr class="subtle">
 
     <p class="t-bold t-size-14 py-xxs t-half-muted _t-underline t-center">Text</p>

scss/core/overflow.scss

@@ -4,13 +4,13 @@
 
 @mixin overflow-maker($overflow-type) {
 	.o-#{$overflow-type} {
-		overflow: #{$overflow-type};
+		overflow: #{$overflow-type} !important;
 	}
 	.ox-#{$overflow-type} {
-		overflow-x: #{$overflow-type};
+		overflow-x: #{$overflow-type} !important;
 	}
 	.oy-#{$overflow-type} {
-		overflow-y: #{$overflow-type};
+		overflow-y: #{$overflow-type} !important;
 	}
 }
 

scss/site/input.scss

@@ -62,7 +62,7 @@ button {
 		background-color: #{$color-background-button-hover};
 	}
 	
-	&.primary {
+	&.btn-primary {
 		background-color: #{$color-background-button-primary};
 		
 		&:hover {
@@ -70,7 +70,7 @@ button {
 		}
 	}
 	
-	&.success {
+	&.btn-success {
 		background-color: #{$color-background-button-success};
 		
 		&:hover {
@@ -78,7 +78,7 @@ button {
 		}
 	}
 	
-	&.error {
+	&.btn-error {
 		background-color: #{$color-background-button-error};
 		
 		&:hover {
@@ -86,7 +86,7 @@ button {
 		}
 	}
 	
-	&.warning {
+	&.btn-warning {
 		background-color: #{$color-background-button-warning};
 		
 		&:hover {