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

Update index.php, buttons.php, and 4 more files...
This commit is contained in:
Herwin Bozet (NibblePoker) 2024-11-16 17:36:38 +01:00
parent 8fa4b6cd2e
commit 967b17100a
6 changed files with 18 additions and 40 deletions

View File

@ -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">

View File

@ -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>

View File

@ -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"))) ?>)

View File

@ -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>

View File

@ -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;
}
}

View File

@ -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 {