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

Feat: add a class alternative to hgroup

Browse source
This commit is contained in:
AmiralBl3ndic 2021-12-29 19:15:39 +01:00
parent e7ffe74a05
commit ed120df03b
19 changed files with 90 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

9
css/pico.classless.css
View file

@ -752,13 +752,16 @@ ul ~ h6 {
margin-top: var(--typography-spacing-vertical); margin-top: var(--typography-spacing-vertical);
} }
hgroup { hgroup,
.headings {
margin-bottom: var(--typography-spacing-vertical); margin-bottom: var(--typography-spacing-vertical);
} }
hgroup > * { hgroup > *,
.headings > * {
margin-bottom: 0; margin-bottom: 0;
} }
hgroup > *:last-child { hgroup > *:last-child,
.headings > *:last-child {
--color: var(--muted-color); --color: var(--muted-color);
--font-weight: unset; --font-weight: unset;
font-size: 1rem; font-size: 1rem;

2
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

9
css/pico.css
View file

@ -798,13 +798,16 @@ ul ~ h6 {
margin-top: var(--typography-spacing-vertical); margin-top: var(--typography-spacing-vertical);
} }
hgroup { hgroup,
.headings {
margin-bottom: var(--typography-spacing-vertical); margin-bottom: var(--typography-spacing-vertical);
} }
hgroup > * { hgroup > *,
.headings > * {
margin-bottom: 0; margin-bottom: 0;
} }
hgroup > *:last-child { hgroup > *:last-child,
.headings > *:last-child {
--color: var(--muted-color); --color: var(--muted-color);
--font-weight: unset; --font-weight: unset;
font-size: 1rem; font-size: 1rem;

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

9
css/pico.fluid.classless.css
View file

@ -722,13 +722,16 @@ ul ~ h6 {
margin-top: var(--typography-spacing-vertical); margin-top: var(--typography-spacing-vertical);
} }
hgroup { hgroup,
.headings {
margin-bottom: var(--typography-spacing-vertical); margin-bottom: var(--typography-spacing-vertical);
} }
hgroup > * { hgroup > *,
.headings > * {
margin-bottom: 0; margin-bottom: 0;
} }
hgroup > *:last-child { hgroup > *:last-child,
.headings > *:last-child {
--color: var(--muted-color); --color: var(--muted-color);
--font-weight: unset; --font-weight: unset;
font-size: 1rem; font-size: 1rem;

2
css/pico.fluid.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css.map
View file

File diff suppressed because one or more lines are too long

9
css/pico.slim.css
View file

@ -727,13 +727,16 @@ ul ~ h6 {
margin-top: var(--typography-spacing-vertical); margin-top: var(--typography-spacing-vertical);
} }
hgroup { hgroup,
.headings {
margin-bottom: var(--typography-spacing-vertical); margin-bottom: var(--typography-spacing-vertical);
} }
hgroup > * { hgroup > *,
.headings > * {
margin-bottom: 0; margin-bottom: 0;
} }
hgroup > *:last-child { hgroup > *:last-child,
.headings > *:last-child {
--color: var(--muted-color); --color: var(--muted-color);
--font-weight: unset; --font-weight: unset;
font-size: 1rem; font-size: 1rem;

2
css/pico.slim.css.map
View file

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

2
css/pico.slim.min.css.map
View file

File diff suppressed because one or more lines are too long

75
docs/src/typography.html
View file

@ -1,24 +1,25 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
${require('./_head.html') ${require('./_head.html') title="Typography" description="All typographic
title="Typography" elements are responsive, allowing text to scale gracefully across devices
description="All typographic elements are responsive, allowing text to scale gracefully across devices and viewports." and viewports." canonical="typography.html" }
canonical="typography.html"
}
</head> </head>
<body> <body>
${require('./_nav.html')} ${require('./_nav.html')}
<main class="container" id="docs"> <main class="container" id="docs">
${require('./_sidebar.html') active="typography-link"} ${require('./_sidebar.html') active="typography-link"}
<div role="document"> <div role="document">
<section id="typography"> <section id="typography">
<hgroup> <hgroup>
<h1>Typography</h1> <h1>Typography</h1>
<h2>All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.</h2> <h2>
All typographic elements are responsive, allowing text to scale
gracefully across devices and viewports.
</h2>
</hgroup> </hgroup>
<figure> <figure>
<table role="grid"> <table role="grid">
@ -109,38 +110,48 @@
<h5>Heading 5</h5> <h5>Heading 5</h5>
<h6>Heading 6</h6> <h6>Heading 6</h6>
<footer class="code"> <footer class="code">
<pre><code>&lt;<b>h1</b>&gt;Heading 1&lt;/<b>h1</b>&gt;
<pre><code>&lt;<b>h1</b>&gt;Heading 1&lt;/<b>h1</b>&gt;
&lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt; &lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
&lt;<b>h3</b>&gt;Heading 3&lt;/<b>h3</b>&gt; &lt;<b>h3</b>&gt;Heading 3&lt;/<b>h3</b>&gt;
&lt;<b>h4</b>&gt;Heading 4&lt;/<b>h4</b>&gt; &lt;<b>h4</b>&gt;Heading 4&lt;/<b>h4</b>&gt;
&lt;<b>h5</b>&gt;Heading 5&lt;/<b>h5</b>&gt; &lt;<b>h5</b>&gt;Heading 5&lt;/<b>h5</b>&gt;
&lt;<b>h6</b>&gt;Heading 6&lt;/<b>h6</b>&gt;</code></pre> &lt;<b>h6</b>&gt;Heading 6&lt;/<b>h6</b>&gt;</code></pre>
</footer> </footer>
</article> </article>
<p>Inside a <code>&lt;<b>hgroup</b>&gt;</code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is muted.</p> <p>
Inside a <code>&lt;<b>hgroup</b>&gt;</code> or a
<code>&lt;<b>div class="headings"</b>&gt;</code> all
<code><i>margin-bottom</i></code> are collapsed and the
<code>:last-child</code> is muted.
</p>
<article aria-label="Hgroup example"> <article aria-label="Hgroup example">
<hgroup> <div class="headings">
<h2>Heading 2</h2> <h2>Heading 2</h2>
<h3>Subtitle for heading 2</h3> <h3>Subtitle for heading 2</h3>
</hgroup> </div>
<footer class="code"> <footer class="code">
<pre><code>&lt;<b>hgroup</b>&gt;
<pre><code>&lt;<b>hgroup</b>&gt;
&lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt; &lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
&lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt; &lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt;
&lt;/<b>hgroup</b>&gt;</code></pre> &lt;/<b>hgroup</b>&gt;</code></pre>
<pre><code>&lt;<b>div class="headings"</b>&gt;
&lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
&lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt;
&lt;/<b>div</b>&gt;</code></pre>
</footer> </footer>
</article> </article>
<p>Inline text elements:</p> <p>Inline text elements:</p>
<article aria-label="Inline text examples"> <article aria-label="Inline text examples">
<div class="grid"> <div class="grid">
<div> <div>
<p><abbr title="Abbreviation">Abbr.</abbr> <code>abbr</code></p> <p><abbr title="Abbreviation">Abbr.</abbr> <code>abbr</code></p>
<p><strong>Bold</strong> <code>strong</code> <code>b</code></p> <p><strong>Bold</strong> <code>strong</code> <code>b</code></p>
<p><em>Italic</em> <code>i</code> <code>em</code> <code>cite</code></p> <p>
<em>Italic</em> <code>i</code> <code>em</code>
<code>cite</code>
</p>
<p><del>Deleted</del> <code>del</code></p> <p><del>Deleted</del> <code>del</code></p>
<p><ins>Inserted</ins> <code>ins</code></p> <p><ins>Inserted</ins> <code>ins</code></p>
<p><kbd>Ctrl + S</kbd> <code>kbd</code></p> <p><kbd>Ctrl + S</kbd> <code>kbd</code></p>
@ -155,44 +166,46 @@
</div> </div>
</div> </div>
</article> </article>
<p>Links come with <code>.secondary</code> and <code>.contrast</code> styles.</p> <p>
Links come with <code>.secondary</code> and
<code>.contrast</code> styles.
</p>
<article aria-label="Links examples"> <article aria-label="Links examples">
<a href="#" onclick="event.preventDefault()">Primary</a><br> <a href="#" onclick="event.preventDefault()">Primary</a><br />
<a href="#" onclick="event.preventDefault()" class="secondary">Secondary</a><br> <a href="#" onclick="event.preventDefault()" class="secondary"
<a href="#" onclick="event.preventDefault()" class="contrast">Contrast</a><br> >Secondary</a
><br />
<a href="#" onclick="event.preventDefault()" class="contrast"
>Contrast</a
><br />
<footer class="code"> <footer class="code">
<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Primary&lt;/<b>a</b>&gt;
<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Primary&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;Secondary&lt;/<b>a</b>&gt; &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;Secondary&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre> &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre>
</footer> </footer>
</article> </article>
<p>Blockquote:</p> <p>Blockquote:</p>
<article aria-label="Blockquote example"> <article aria-label="Blockquote example">
<blockquote> <blockquote>
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. "Maecenas vehicula metus tellus, vitae congue turpis hendrerit
Nam at dui sit amet ipsum cursus ornare." non. Nam at dui sit amet ipsum cursus ornare."
<footer> <footer>
<cite>- Phasellus eget lacinia</cite> <cite>- Phasellus eget lacinia</cite>
</footer> </footer>
</blockquote> </blockquote>
<footer class="code"> <footer class="code">
<pre><code>&lt;<b>blockquote</b>&gt;
<pre><code>&lt;<b>blockquote</b>&gt;
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non.
Nam at dui sit amet ipsum cursus ornare." Nam at dui sit amet ipsum cursus ornare."
&lt;<b>footer</b>&gt; &lt;<b>footer</b>&gt;
&lt;<b>cite</b>&gt;- Phasellus eget lacinia&lt;/<b>cite</b>&gt; &lt;<b>cite</b>&gt;- Phasellus eget lacinia&lt;/<b>cite</b>&gt;
&lt;/<b>footer</b>&gt; &lt;/<b>footer</b>&gt;
&lt;/<b>blockquote</b>&gt;</code></pre> &lt;/<b>blockquote</b>&gt;</code></pre>
</footer> </footer>
</article> </article>
</section> </section>
${require('./_footer.html')} ${require('./_footer.html')}
</div> </div>
</main> </main>
<script src="js/commons.min.js"></script> <script src="js/commons.min.js"></script>

11
docs/typography.html
View file

File diff suppressed because one or more lines are too long

3
scss/content/_typography.scss
View file

@ -181,7 +181,8 @@ ul {
} }
// Heading group // Heading group
hgroup { hgroup,
.headings {
margin-bottom: var(--typography-spacing-vertical); margin-bottom: var(--typography-spacing-vertical);
> * { > * {