mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-23 01:46:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Typos & clean

Browse source
This commit is contained in:
Lucas Larroche 2021-07-10 10:47:57 +07:00
parent 59c54298d5
commit 7c1e93472f
13 changed files with 31 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

2
docs/css/pico.docs.css
View file

@ -356,7 +356,7 @@ section > pre {
[data-theme="invalid"] code,
[data-theme="valid"] code {
padding: 1rem 0;
padding: calc(var(--spacing) * 1.625) 0;
}
[data-theme="invalid"]:before {

2
docs/css/pico.docs.min.css vendored
View file

File diff suppressed because one or more lines are too long

35
docs/css/themes/docs.css
View file

@ -1,35 +0,0 @@
/**
* Theme: Additions for docs
*/
:root {
--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}
[data-theme="light"],
:root:not([data-theme="dark"]) {
--invalid-color: #C62828;
--valid-color: #388E3C;
--nav-background-color: rgba(255, 255, 255, 0.7);
--nav-border-color: rgba(115, 130, 140, 0.2);
--nav-logo-color: #FFF;
}
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--invalid-color: rgba(183, 28, 28, 0.5);
--valid-color: rgba(46, 125, 50, 0.5);
--nav-background-color: rgba(16, 24, 30, 0.8);
--nav-border-color: rgba(115, 130, 140, 0.2);
--nav-logo-color: #0d1419;
}
}
[data-theme="dark"] {
--invalid-color: rgba(183, 28, 28, 0.5);
--valid-color: rgba(46, 125, 50, 0.5);
--nav-background: rgba(16, 24, 30, 0.8);
--nav-border-color: rgba(115, 130, 140, 0.2);
--nav-logo-color: #0d1419;
}

1
docs/css/themes/docs.min.css vendored
View file

@ -1 +0,0 @@
:root{--icon-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");--icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-check-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}:root:not([data-theme=dark]),[data-theme=light]{--invalid-color:#C62828;--valid-color:#388E3C;--nav-background-color:rgba(255, 255, 255, 0.7);--nav-border-color:rgba(115, 130, 140, 0.2);--nav-logo-color:#FFF}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--invalid-color:rgba(183, 28, 28, 0.5);--valid-color:rgba(46, 125, 50, 0.5);--nav-background-color:rgba(16, 24, 30, 0.8);--nav-border-color:rgba(115, 130, 140, 0.2);--nav-logo-color:#0d1419}}[data-theme=dark]{--invalid-color:rgba(183, 28, 28, 0.5);--valid-color:rgba(46, 125, 50, 0.5);--nav-background:rgba(16, 24, 30, 0.8);--nav-border-color:rgba(115, 130, 140, 0.2);--nav-logo-color:#0d1419}

BIN
docs/img/favicon.ico
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 7.2 KiB

36
docs/index.html
View file

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Pico.css • Graceful & Minimal CSS design system</title>
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="shortcut icon" href="https://picocss.com/favicon.ico">
<link rel="stylesheet" href="../css/pico.min.css">
<link rel="stylesheet" href="css/pico.docs.min.css">
</head>
@ -133,9 +133,9 @@
<section id="themes">
<hgroup>
<h2>Themes</h2>
<h3>Pico is shipped with 2 consistents themes: Light & Dark.</h3>
<h3>Pico is shipped with 2 consistent themes: Light & Dark.</h3>
</hgroup>
<p>The Light theme is used by default. The Dark theme is automatically enabled if user has dark mode enabled <code><i>prefers-color-scheme</i>: <u>dark</u></code></p>
<p>The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled <code><i>prefers-color-scheme</i>: <u>dark</u></code></p>
<article aria-label="Theme switcher">
<button class="contrast theme-switcher">...</button>
</article>
@ -186,7 +186,7 @@
</div>
<fieldset>
<label for="remember">
<input type="checkbox" role="switch" id="remember" name="remember" checked aria-checked="true">
<input type="checkbox" role="switch" id="remember" name="remember" checked>
Remember me
</label>
</fieldset>
@ -245,7 +245,7 @@
<p>You can find all the CSS variables used in the default theme here: <a href="https://github.com/picocss/pico/blob/master/css/themes/default.css">css/themes/default.css</a></p>
<h4>Importing Pico SASS library</h4>
<p>It is recommended to customize Pico by importing SASS source files in your project. This way you can keep Pico up to date without conflicts since Pico code and your custom code are separated.</p>
<p>It is recommended to customize Pico by importing SASS source files into your project. This way you can keep Pico up to date without conflicts since Pico code and your custom code are separated.</p>
<p>Compile the SASS file to CSS to get a custom version of Pico.</p>
<pre><code><em>/* Custom <span class="name"> </span>version */</em>
@ -258,7 +258,7 @@
<em>// Import full Pico source code</em>
<b>@import</b> <u>"path/pico"</u>;</code></pre>
<p>Alternatively, you can create a custom theme and import it in your project with the components you need.</p>
<p>Alternatively, you can create a custom theme and import it into your project with the components you need.</p>
<pre><code><em>/* Custom <span class="name"> </span>version */</em>
@ -271,7 +271,7 @@
<em>...</em>
</code></pre>
<p>This allows to create a lighter version with only the components that are useful to you. Example here: <a href="https://github.com/picocss/pico/blob/master/scss/pico.slim.scss">scss/pico.slim.scss</a>.</p>
<p>This allows you to create a lighter version with only the components that are useful to you. Example here: <a href="https://github.com/picocss/pico/blob/master/scss/pico.slim.scss">scss/pico.slim.scss</a>.</p>
</section><!-- ./ Docs: Customization -->
<!-- Docs: Classless -->
@ -280,8 +280,8 @@
<h2>Class-less version</h2>
<h3>For wild HTML purists!</h3>
</hgroup>
<p>Pico provide a <code>.classless</code> version (<a href="https://picocss.com/examples/classless/">example</a>).</p>
<p>In this version, <code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> act as <a href="#containers">containers</a> to define a centered or a fluid viewport.</p>
<p>Pico provides a <code>.classless</code> version (<a href="https://picocss.com/examples/classless/">example</a>).</p>
<p>In this version, <code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code>, and <code>&lt;<b>footer</b>&gt;</code> act as <a href="#containers">containers</a> to define a centered or a fluid viewport.</p>
<p><strong>Usage:</strong></p>
<p>Use the default <code>.classless</code> version if you need centered viewports:</p>
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.classless.min.css"</u>&gt;</code></pre>
@ -396,9 +396,9 @@
<section id="scroller">
<hgroup>
<h2>Horizontal scroller</h2>
<h3><code>&lt;<b>figure</b>&gt;</code> act as a container to make any content scrollable horizontally.</h3>
<h3><code>&lt;<b>figure</b>&gt;</code> acts as a container to make any content scrollable horizontally.</h3>
</hgroup>
<p>Useful to have responsives <code>&lt;<b>table</b>&gt;</code></p>
<p>Useful to have responsive <code>&lt;<b>table</b>&gt;</code></p>
<figure>
<table role="grid">
<thead>
@ -503,7 +503,7 @@
<th><code>&lt;<b>h2</b>&gt;</code></th>
<td>28<small>px</small></td>
<td>29<small>px</small></td>
<td>31<small><small>.5px</small></td>
<td>31<small>.5px</small></td>
<td>33<small>.25px</small></td>
<td>35<small>px</small></td>
</tr>
@ -680,10 +680,10 @@
<section id="forms">
<hgroup>
<h2>Forms</h2>
<h3>All form elements are in pure semantic HTML and fully responsives, allowing forms to scale gracefully across devices and viewports.</h3>
<h3>All form elements are in pure semantic HTML and fully responsive, allowing forms to scale gracefully across devices and viewports.</h3>
</hgroup>
<p>Input are <code><i>width</i>: <u>100%</u>;</code> by default. You can use <code>.grid</code> inside a form.</p>
<p>All natives form elements are fully customized and themables with CSS variables.</p>
<p>Inputs are <code><i>width</i>: <u>100%</u>;</code> by default. You can use <code>.grid</code> inside a form.</p>
<p>All natives form elements are fully customizable and themable with CSS variables.</p>
<article aria-label="Form example">
<form>
<div class="grid">
@ -781,7 +781,7 @@
</fieldset>
<fieldset>
<label for="switch">
<input type="checkbox" id="switch" name="switch" role="switch" aria-checked="false">
<input type="checkbox" id="switch" name="switch" role="switch">
Publish on my profile
</label>
</fieldset>
@ -1211,7 +1211,7 @@
<section id="love">
<h2>We love <code>.classes</code></h2>
<p>As a starting point, Pico chose to be as neutral and semantic as possible using very few <code>.classes</code></p>
<p>But off course, <code>.classes</code> are not a bad practice at all.</p>
<p>But of course, <code>.classes</code> are not a bad practice at all.</p>
<p>Feel free to use <em>modifiers</em>.</p>
<div data-theme="valid">
<pre><code>&lt;<b>button</b> <i>class</i>=<u>"warning"</u>&gt;Action&lt;/<b>button</b>&gt;<br></code></pre>
@ -1239,7 +1239,7 @@
<!-- JavaScript -->
<script src="https://unpkg.com/most-visible@1.5.0/dist/most-visible.min.js"></script>
<script type="module" src="js/pico.docs.min.js"></script>
<script src="js/pico.docs.min.js"></script>
</body>

4
docs/js/src/color-picker.js
View file

@ -33,7 +33,7 @@ export const colorPicker = {
// Loop colors
for (const color in this.colors) {
// Buttons
innerButtons += '<button data-color="'+ color +'" aria-label="Activate '+ color +' theme"></button>';
innerButtons += '<button data-color="' + color + '" aria-label="Activate ' + color + ' theme"></button>';
// Styles
innerStyles += `
@ -165,7 +165,7 @@ export const colorPicker = {
c = [c[0], c[0], c[1], c[1], c[2], c[2]];
}
c = '0x' + c.join('');
return 'rgba(' + [(c>>16)&255, (c>>8)&255, c&255].join(', ') + ', ' + alpha + ')';
return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(', ') + ', ' + alpha + ')';
}
throw new Error('Bad Hex');
}

6
docs/js/src/grid.js
View file

@ -13,7 +13,7 @@ export const grid = {
add: 'Add column',
remove: 'Remove column'
},
target: '#grids article'
target: '#grids article'
},
grid: {
current: 4,
@ -74,8 +74,8 @@ export const grid = {
// Build
for (let col = 0; col < this.grid.current; col++) {
htmlInner += '<div>' + (col + 1) + '</div>';
codeInner += ' &lt;<b>div</b>&gt;' + (col+1) + '&lt;/<b>div</b>&gt;\n';
htmlInner += '<div>' + (col + 1) + '</div>';
codeInner += ' &lt;<b>div</b>&gt;' + (col + 1) + '&lt;/<b>div</b>&gt;\n';
}
// Display

2
docs/js/src/scrollspy.js
View file

@ -53,7 +53,7 @@ export const scrollspy = {
// Scroll stop
scrollStop() {
let isScrolling;
window.addEventListener('scroll', function (event) {
window.addEventListener('scroll', function(event) {
window.clearTimeout(isScrolling);
isScrolling = setTimeout(function() {
this.setActiveNav();

2
docs/scss/content/_code.scss
View file

@ -36,7 +36,7 @@ section > pre {
// Spacing for Valid & Invalid badge
code {
padding: 1rem 0;
padding: calc(var(--spacing) * 1.625) 0;
}
}