mirror of
https://github.com/picocss/pico.git
synced 2025-04-25 10:46:14 -04:00
Improvements
- Add .contrast variant - Separate _button-styles.scss - Edit .secondary, mark, figcaption, hgroup, tooltips - Docs: Add More about grids, External links icon, Second theme switcher
This commit is contained in:
Lucas
parent
066c0a04fd
commit
73237bdcd4
26 changed files with 516 additions and 229 deletions
|
|
@ -69,7 +69,7 @@ body > main > * {
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
a[name]:not([href])::before {
|
||||
div[role="document"] > section::before {
|
||||
display: block;
|
||||
height: 4.5rem;
|
||||
margin-top: -4.5rem;
|
||||
|
|
@ -77,33 +77,44 @@ a[name]:not([href])::before {
|
|||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
a[name]:not([href])::before {
|
||||
div[role="document"] > section::before {
|
||||
height: 4.75rem;
|
||||
margin-top: -4.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
a[name]:not([href])::before {
|
||||
div[role="document"] > section::before {
|
||||
height: 5rem;
|
||||
margin-top: -5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
a[name]:not([href])::before {
|
||||
div[role="document"] > section::before {
|
||||
height: 5.25rem;
|
||||
margin-top: -5.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
a[name]:not([href])::before {
|
||||
div[role="document"] > section::before {
|
||||
height: 5.5rem;
|
||||
margin-top: -5.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
div[role="document"] section a[href^="https://"]:not([href*="https://picocss.com"]):not([role])::after {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background-image: 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='%23808080' 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");
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: .66rem auto;
|
||||
content: '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Docs: Aside
|
||||
*/
|
||||
|
|
@ -158,12 +169,17 @@ main > aside details {
|
|||
main > aside details summary {
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
color: var(--h3);
|
||||
}
|
||||
|
||||
main > aside details summary::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
main > aside details[open] summary {
|
||||
color: var(--h3);
|
||||
}
|
||||
|
||||
[role=document] section > h1,
|
||||
[role=document] section > h2,
|
||||
[role=document] section > h3 {
|
||||
|
|
@ -173,6 +189,10 @@ main > aside details summary::after {
|
|||
/**
|
||||
* Docs: Documentation
|
||||
*/
|
||||
#themes button i {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#customization figure {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(9, 1fr);
|
||||
|
|
@ -229,9 +249,17 @@ main > aside details summary::after {
|
|||
}
|
||||
|
||||
#grids button {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin-right: .5rem;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
#grids button {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
#grids button svg {
|
||||
|
|
@ -248,6 +276,10 @@ main > aside details summary::after {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
#grids details {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Docs: Typography
|
||||
*/
|
||||
|
|
@ -386,7 +418,7 @@ body > nav ul:first-of-type li:first-of-type a {
|
|||
body > nav ul:first-of-type li:nth-of-type(2) {
|
||||
display: none;
|
||||
margin-left: 1rem;
|
||||
color: var(--muted-text);
|
||||
color: var(--h1);
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
|
|
|
|||
2
docs/css/pico.docs.min.css
vendored
2
docs/css/pico.docs.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -28,7 +28,7 @@
|
|||
<li><a href="#" class="secondary">Examples</a></li>
|
||||
<li><a href="#docs" class="secondary">Docs</a></li>
|
||||
<li>
|
||||
<a href="https://github.com/picocss/pico" class="secondary" aria-label="Pico GitHub repository">
|
||||
<a href="https://github.com/picocss/pico" class="contrast" aria-label="Pico GitHub repository">
|
||||
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" height="1rem">
|
||||
<path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
|
||||
</svg>
|
||||
|
|
@ -106,7 +106,10 @@
|
|||
</hgroup>
|
||||
<p>1. Download Pico:</p>
|
||||
<p><a href="https://github.com/picocss/pico/archive/master.zip" role="button">Download pico.css</a></p>
|
||||
<p>2. Link the CSS <small>(~5KB minified and gzipped)</small>:</p>
|
||||
<p>
|
||||
2. Link the CSS:<br>
|
||||
<small>(~5KB minified and gzipped)</small>
|
||||
</p>
|
||||
<pre><code><<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>></code></pre>
|
||||
<p>Starter template:</p>
|
||||
|
||||
|
|
@ -124,6 +127,7 @@
|
|||
</<b>main</b>>
|
||||
</<b>body</b>>
|
||||
</<b>html</b>></code></pre>
|
||||
|
||||
</section><!-- ./ Docs: Start -->
|
||||
|
||||
<!-- Docs: Themes -->
|
||||
|
|
@ -133,6 +137,9 @@
|
|||
<h3>Pico is shipped with 2 consistents 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>
|
||||
<article>
|
||||
<button class="contrast theme-switcher">...</button>
|
||||
</article>
|
||||
<p>Themes can be forced on document level <code><<b>html</b> <i>data-theme</i>=<u>"light"</u>></code> or on any HTML element <code><<b>article</b> <i>data-theme</i>=<u>"dark"</u>></code>.</p>
|
||||
<article data-theme="light">
|
||||
<h4>Light theme</h4>
|
||||
|
|
@ -254,10 +261,10 @@
|
|||
<section id="classless">
|
||||
<hgroup>
|
||||
<h2>Class-less version</h2>
|
||||
<h3>For wild HTML purists! 😈</h3>
|
||||
<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>Obviously this version do not include <code>.container</code>, <code>.container-fluid</code>, <code>.grid</code>, <code>.secondary</code> and <code>.outline</code>.</p>
|
||||
<p>Obviously this version do not include <code>.container</code>, <code>.container-fluid</code>, <code>.grid</code>, <code>.secondary</code>, <code>.contrast</code> and <code>.outline</code>.</p>
|
||||
<p>In this version, <code><<b>header</b>></code>, <code><<b>main</b>></code> and <code><<b>footer</b>></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>
|
||||
|
|
@ -344,6 +351,22 @@
|
|||
|
||||
</article>
|
||||
<p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code>.</p>
|
||||
<details>
|
||||
<summary>
|
||||
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="12" y1="16" x2="12" y2="12"></line>
|
||||
<line x1="12" y1="8" x2="12.01" y2="8"></line>
|
||||
</svg>
|
||||
More about grids
|
||||
</summary>
|
||||
<p>As Pico focus on native HTML elements, we kept this grid system very minimalist.</p>
|
||||
<p>A full grid system in flexbox, with all the ordering, offsetting and breakpoints utilities can be +140% of the whole Pico library size. Not really in the <em>Pico spirit</em>.</p>
|
||||
<p>If you need a quick way to prototyping or build a complex layouts, you can look about <strong>Flexbox grid layouts</strong>. For example: <a href="https://getbootstrap.com/docs/4.2/getting-started/contents/">Bootstrap Grid System only</a> or <a href="https://grid.layoutit.com/">Flexbox Grid</a>.</p>
|
||||
<p>If you need a light and custom grid, you can look about <strong>CSS Grid Generators</strong>. For example: <a href="https://cssgrid-generator.netlify.com/">CSS Grid Generator</a>, <a href="https://grid.layoutit.com/">Layoutit!</a> or <a href="https://griddy.io/">Griddy</a>.</p>
|
||||
<p>Alternatively you can <a href="https://learncssgrid.com/">Learn about CSS Grid</a>.</p>
|
||||
</details>
|
||||
|
||||
</section><!-- ./ Docs: Grid -->
|
||||
|
||||
<!-- Docs: Horizontal scroller -->
|
||||
|
|
@ -542,6 +565,17 @@
|
|||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<p>Links come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
|
||||
<article>
|
||||
<a href="#">Primary</a><br>
|
||||
<a href="#"class="secondary">Secondary</a><br>
|
||||
<a href="#"class="contrast">Contrast</a><br>
|
||||
|
||||
<pre><code><<b>a</b> <i>href</i>=<u>"#"</u>>Primary</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>>Secondary</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>>Contrast</<b>a</b>></code></pre>
|
||||
|
||||
</article>
|
||||
</section><!-- ./ Docs: Typography -->
|
||||
|
||||
<!-- Docs: Button -->
|
||||
|
|
@ -567,30 +601,25 @@
|
|||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>>Link</<b>a</b>></code></pre>
|
||||
|
||||
</article>
|
||||
<p>Buttons come with a <code>.secondary</code> neutral style.</p>
|
||||
<p>Buttons come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
|
||||
<article>
|
||||
<a href="#" role="button" class="secondary">Link</a>
|
||||
<button class="secondary" aria-label="Example button">Button</button>
|
||||
<input type="submit" class="secondary">
|
||||
<input type="reset">
|
||||
<a href="#" role="button" class="secondary">Secondary</a>
|
||||
<a href="#" role="button" class="contrast">Contrast</a>
|
||||
|
||||
<pre><code><<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>>Link</<b>a</b>>
|
||||
<<b>button</b>>Button</<b>button</b> <i>class</i>=<u>"secondary"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"submit"</u> <i>class</i>=<u>"secondary"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"reset"</u>></code></pre>
|
||||
<pre><code><<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>>Secondary</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>>Contrast</<b>a</b>></code></pre>
|
||||
|
||||
</article>
|
||||
<p>Also includes the classic <code>.outline</code> style.</p>
|
||||
<p>And a classic <code>.outline</code> variant.</p>
|
||||
<article>
|
||||
<a href="#" role="button" class="outline">Link</a>
|
||||
<a href="#" role="button" class="outline secondary">Link</a>
|
||||
<button class="outline" aria-label="Example button">Button</button>
|
||||
<button class="outline secondary" aria-label="Example button">Button</button>
|
||||
<a href="#" role="button" class="outline">Primary</a>
|
||||
<a href="#" role="button" class="secondary outline">Secondary</a>
|
||||
<a href="#" role="button" class="contrast outline">Contrast</a>
|
||||
|
||||
<pre><code><<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"outline"</u>>Primary</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary outline"</u>>Secondary</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast outline"</u>>Contrast</<b>a</b>></code></pre>
|
||||
|
||||
<pre><code><<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"outline"</u>>Link</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"outline secondary"</u>>Link</<b>a</b>>
|
||||
<<b>button</b> <i>class</i>=<u>"outline"</u>>Button</<b>button</b>>
|
||||
<<b>button</b> <i>class</i>=<u>"outline secondary"</u>>Button</<b>button</b>></code></pre>
|
||||
</article>
|
||||
</section><!-- ./ Docs: Button -->
|
||||
|
||||
|
|
@ -773,7 +802,7 @@
|
|||
<summary>Collapsible elements 1</summary>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet, congue turpis.</p>
|
||||
</details>
|
||||
<details>
|
||||
<details open>
|
||||
<summary>Collapsible elements 2</summary>
|
||||
<ul>
|
||||
<li>Vestibulum id elit quis massa interdum sodales.</li>
|
||||
|
|
@ -961,7 +990,7 @@
|
|||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<p><small>Openly inspired by <a href="https://getbootstrap.com/" class="secondary">Bootstrap</a>, <a href="https://picturepan2.github.io/spectre/" class="secondary">Spectre</a>, <a href=" https://kbrsh.github.io/wing/" class="secondary">Wing</a>, <a href="https://www.cssbed.com/" class="secondary">CSS Bed</a> & <a href="http://necolas.github.io/normalize.css/" class="secondary">Normalize</a>.</small></p>
|
||||
<p><small>Openly inspired by <a href="https://getbootstrap.com/" class="secondary">Bootstrap</a>, <a href="https://picturepan2.github.io/spectre/" class="secondary">Spectre</a>, <a href=" https://kbrsh.github.io/wing/" class="secondary">Wing</a>, <a href="https://www.cssbed.com/" class="secondary">CSS Bed</a> & <a href="https://necolas.github.io/normalize.css/" class="secondary">Normalize</a>.</small></p>
|
||||
</footer><!-- ./ Footer -->
|
||||
|
||||
</div><!-- ./ Document -->
|
||||
|
|
|
|||
2
docs/js/pico.docs.min.js
vendored
2
docs/js/pico.docs.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -14,12 +14,12 @@
|
|||
var switcher = {
|
||||
button: {
|
||||
element: 'BUTTON',
|
||||
class: 'secondary switcher',
|
||||
class: 'contrast switcher theme-switcher',
|
||||
on: '<i>Turn on dark mode</i>',
|
||||
off: '<i>Turn off dark mode</i>'
|
||||
},
|
||||
target: 'body', // Button append in target
|
||||
selector: 'button.switcher', // Button selector in Dom
|
||||
selector: 'button.theme-switcher', // Button selector in Dom
|
||||
currentTheme: systemColorScheme()
|
||||
};
|
||||
|
||||
|
|
@ -65,17 +65,21 @@
|
|||
setTheme(switcher.currentTheme);
|
||||
|
||||
// Click Listener on Switcher
|
||||
document.querySelector(switcher.selector).addEventListener('click', function() {
|
||||
var switchers = document.querySelectorAll(switcher.selector);
|
||||
console.log(switchers);
|
||||
for (var i = 0; i < switchers.length; i++) {
|
||||
switchers[i].addEventListener('click', function(event) {
|
||||
|
||||
// Switch Theme
|
||||
if (switcher.currentTheme == 'light') {
|
||||
setTheme('dark');
|
||||
}
|
||||
else {
|
||||
setTheme('light');
|
||||
}
|
||||
}, false);
|
||||
// Switch Theme
|
||||
if (switcher.currentTheme == 'light') {
|
||||
setTheme('dark');
|
||||
}
|
||||
else {
|
||||
setTheme('light');
|
||||
}
|
||||
|
||||
}, false);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ body > nav {
|
|||
&:nth-of-type(2) {
|
||||
display: none;
|
||||
margin-left: $spacing-gutter;
|
||||
color: var(--muted-text);
|
||||
color: var(--h1);
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
display: inline;
|
||||
|
|
|
|||
|
|
@ -51,14 +51,19 @@ main > aside {
|
|||
details {
|
||||
padding-bottom: .25rem;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
details summary {
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
summary {
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
color: var(--h3);
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&[open] summary {
|
||||
color: var(--h3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,15 @@
|
|||
* Docs: Documentation
|
||||
*/
|
||||
|
||||
// Docs: Themes
|
||||
// ––––––––––––––––––––
|
||||
|
||||
#themes {
|
||||
button i {
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
// Docs: Customization
|
||||
// ––––––––––––––––––––
|
||||
|
||||
|
|
@ -73,9 +82,15 @@
|
|||
#grids {
|
||||
|
||||
button {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin-right: .5rem;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: $spacing-typography/2;
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
stroke: var(--secondary);
|
||||
|
|
@ -91,4 +106,8 @@
|
|||
background: var(--code-background);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
details {
|
||||
margin-top: $spacing-typography*2;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ body > main {
|
|||
// Anchors hacks for internal links
|
||||
// ––––––––––––––––––––
|
||||
|
||||
a[name]:not([href])::before {
|
||||
div[role="document"] > section::before {
|
||||
display: block;
|
||||
height: map-get($spacing-factor, "xs") + $navHeight;
|
||||
margin-top: -(map-get($spacing-factor, "xs")+ $navHeight);
|
||||
|
|
@ -62,3 +62,20 @@ a[name]:not([href])::before {
|
|||
margin-top: -(map-get($spacing-factor, "xl") + $navHeight);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// External links
|
||||
// ––––––––––––––––––––
|
||||
|
||||
div[role="document"] section a[href^="https://"]:not([href*="https://picocss.com"]):not([role])::after {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
// Source: https://feathericons.com/
|
||||
$caret-icon-color: "808080"; // Without '#' !important
|
||||
background-image: 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='%23" + $caret-icon-color + "' 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");
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: .66rem auto;
|
||||
content: '';
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue