From b40a9277f2342f0889dfddcd33058954512fab4f Mon Sep 17 00:00:00 2001 From: Lucas Larroche Date: Sat, 23 Oct 2021 23:02:36 +0700 Subject: [PATCH] Docs: Adapt the DOM and styles for code blocks #36 --- docs/css/pico.docs.css | 19 +++++++++-- docs/css/pico.docs.min.css | 2 +- docs/index.html | 55 +++++++++++++++++++++++++++++-- docs/scss/content/_code.scss | 17 ++++++++-- docs/scss/themes/_docs.scss | 18 ++++++++++ docs/scss/themes/docs/_dark.scss | 24 +++----------- docs/scss/themes/docs/_light.scss | 1 + 7 files changed, 108 insertions(+), 28 deletions(-) diff --git a/docs/css/pico.docs.css b/docs/css/pico.docs.css index 3da06d87..7bd367bd 100644 --- a/docs/css/pico.docs.css +++ b/docs/css/pico.docs.css @@ -17,6 +17,7 @@ --nav-background-color: rgba(255, 255, 255, 0.7); --nav-border-color: rgba(115, 130, 140, 0.2); --nav-logo-color: #FFF; + --article-code-background-color: #f9fafb; } @media only screen and (prefers-color-scheme: dark) { @@ -26,14 +27,16 @@ --nav-background-color: rgba(16, 24, 30, 0.8); --nav-border-color: rgba(115, 130, 140, 0.2); --nav-logo-color: #0e1419; + --article-code-background-color: var(--code-background-color); } } [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-background-color: rgba(16, 24, 30, 0.8); --nav-border-color: rgba(115, 130, 140, 0.2); --nav-logo-color: #0e1419; + --article-code-background-color: var(--code-background-color); } /** @@ -287,10 +290,20 @@ a[role=button] { /** * Docs: Code */ +article > footer.code { + background: var(--article-code-background-color); +} + +article pre, +article pre code { + background: transparent; + margin-bottom: 0; +} + section > pre { + background: var(--article-code-background-color); margin: var(--block-spacing-vertical) 0; padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal); - background-color: var(--card-sectionning-background-color); box-shadow: var(--card-box-shadow); } @@ -320,7 +333,7 @@ section > pre { } [data-theme=invalid] code, [data-theme=valid] code { - padding: calc(var(--spacing) * 1.625) 0; + padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem) var(--block-spacing-horizontal); } [data-theme=invalid]:before { diff --git a/docs/css/pico.docs.min.css b/docs/css/pico.docs.min.css index a7e0b05d..1135ce62 100644 --- a/docs/css/pico.docs.min.css +++ b/docs/css/pico.docs.min.css @@ -1,3 +1,3 @@ /*! * Pico: Customs styles 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")}: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:#0e1419}}[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:#0e1419}html{scroll-behavior:smooth}body>main{padding-top:calc(var(--block-spacing-vertical) + 3.5rem)}@media (min-width:992px){body>main{--block-spacing-horizontal:calc(var(--spacing) * 1.75);grid-column-gap:calc(var(--block-spacing-horizontal) * 4);display:grid;grid-template-columns:200px auto}}@media (min-width:1200px){body>main{--block-spacing-horizontal:calc(var(--spacing) * 2)}}body>main div[role=document],body>main>aside{min-width:0}div[role=document]>section::before{display:block;height:calc(2rem + 3.5rem - .5rem);margin-top:calc(-2rem - 3.5rem + .5rem);content:""}@media (min-width:576px){div[role=document]>section::before{height:calc(2.5rem + 3.5rem - .5rem);height:calc(-2.5rem - 3.5rem + .5rem)}}@media (min-width:768px){div[role=document]>section::before{height:calc(3rem + 3.5rem - .5rem);margin-top:calc(-3rem - 3.5rem + .5rem)}}@media (min-width:992px){div[role=document]>section::before{height:calc(3.5rem + 3.5rem - .5rem);margin-top:calc(-3.5rem - 3.5rem + .5rem)}}@media (min-width:1200px){div[role=document]>section::before{height:calc(4rem + 3.5rem - .5rem);margin-top:calc(-4rem - 3.5rem + .5rem)}}div[role=document] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after{display:inline-block;width:1rem;height:1rem;background-image:var(--icon-external);background-position:top center;background-repeat:no-repeat;background-size:.66rem auto;content:""}svg{height:1rem}main>aside nav{width:100%;margin-bottom:var(--block-spacing-vertical)}main>aside nav h1{margin-bottom:calc(var(--typography-spacing-vertical)/ 2)}@media (min-width:992px){main>aside nav{position:fixed;width:200px;max-height:calc(100vh - 5.5rem);margin-bottom:0;overflow-x:hidden;overflow-y:auto}main>aside nav h1{display:none}}main>aside li,main>aside summary{padding-top:0;padding-bottom:0;font-size:16px}main>aside li a{padding:.25rem .5rem}main>aside li a svg{vertical-align:middle}main>aside a.secondary:focus{background-color:transparent;color:var(--primary-hover)}main>aside a.active,main>aside a.active:hover{color:var(--primary)}main>aside details{padding-bottom:.25rem;border-bottom:none}main>aside details summary{color:var(--h1-color);font-size:14px;font-weight:300;text-transform:uppercase}main>aside details summary::after{display:none}main>aside details[open]>summary:not(:focus){color:var(--h1-color)}#themes button i{font-style:normal}#customization figure{display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(2,1fr);margin-bottom:0;overflow:hidden}@media (min-width:576px){#customization figure{grid-template-columns:repeat(18,1fr);grid-template-rows:1fr;border-top-right-radius:var(--border-radius);border-top-left-radius:var(--border-radius)}}#customization figure~article{margin-top:0;border-top-right-radius:0;border-top-left-radius:0}#customization figure button{margin-bottom:0;padding:0;padding-top:100%;border:none;border-radius:0}#customization figure button:focus{box-shadow:none}#customization figure button.picked{background-image:var(--icon-check);background-position:center;background-repeat:no-repeat;background-size:.66rem auto;box-shadow:inset 0 0 1rem 0 rgba(0,0,0,.25)}#customization figure button[data-color=amber].picked,#customization figure button[data-color=lime].picked,#customization figure button[data-color=yellow].picked{background-image:var(--icon-check-dark)}#customization h4{transition:color var(--transition)}#customization pre[data-theme=generated]{border-color:var(--primary)}#grids{--grid-spacing-vertical:1rem}#grids button{display:block;width:100%;margin-bottom:var(--spacing)}@media (min-width:576px){#grids button{display:inline-block;width:auto;margin-right:.5rem}}#grids button svg{stroke:var(--secondary);margin-right:.5rem;border:2px solid currentColor;border-radius:1rem;background:currentColor}#grids .grid>*{padding:calc(var(--spacing)/ 2) 0;border-radius:var(--border-radius);background:var(--code-background-color);font-size:87.5%;text-align:center}#grids details{margin-top:calc(var(--typography-spacing-vertical) * 2)}#grids details svg{vertical-align:bottom}#forms div.grid{grid-row-gap:0}section>hgroup{margin-bottom:calc(var(--typography-spacing-vertical) * 2)}a[role=button]{margin-right:calc(var(--typography-spacing-vertical)/ 4);margin-bottom:var(--typography-spacing-vertical)}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}section>pre{margin:var(--block-spacing-vertical) 0;padding:calc(var(--block-spacing-vertical)/ 1.5) var(--block-spacing-horizontal);background-color:var(--card-sectionning-background-color);box-shadow:var(--card-box-shadow)}[data-theme=invalid],[data-theme=valid]{position:relative;margin-bottom:0!important}[data-theme=invalid]:before,[data-theme=valid]:before{display:block;position:absolute;top:0;right:0;padding:.375rem .75rem;border-radius:0;color:var(--primary-inverse);font-size:14px;line-height:1}@media (min-width:992px){[data-theme=invalid]:before,[data-theme=valid]:before{top:var(--spacing);right:var(--spacing)}}[data-theme=invalid] code,[data-theme=valid] code{padding:calc(var(--spacing) * 1.625) 0}[data-theme=invalid]:before{background:var(--invalid-color);content:"Not so great"}[data-theme=valid]:before{background:var(--valid-color);content:"Great"}body>nav{-webkit-backdrop-filter:saturate(180%) blur(20px);z-index:99;position:fixed;top:0;right:0;left:0;backdrop-filter:saturate(180%) blur(20px);background-color:var(--nav-background-color);box-shadow:0 1px 0 var(--nav-border-color)}body>nav a{border-radius:0}body>nav svg{vertical-align:text-bottom}body>nav ul:first-of-type li:first-of-type a{width:3.5rem;height:3.5rem;margin-left:calc(var(--spacing) * -1);padding:0;background:var(--h1-color);color:var(--nav-logo-color)}body>nav ul:first-of-type li:first-of-type a svg{height:3.5rem}body>nav ul:first-of-type li:nth-of-type(2){display:none;margin-left:var(--spacing);color:var(--h1-color)}@media (min-width:992px){body>nav ul:first-of-type li:nth-of-type(2){display:inline}}.switcher{position:fixed;right:calc(var(--spacing)/ 2);bottom:var(--spacing);width:auto;margin-bottom:0;padding:.75rem;border-radius:2rem;box-shadow:var(--card-box-shadow);line-height:1;text-align:right}.switcher::after{display:inline-block;width:1rem;height:1rem;border:.15rem solid currentColor;border-radius:50%;background:linear-gradient(to right,currentColor 0,currentColor 50%,transparent 50%);vertical-align:bottom;content:"";transition:transform var(--transition)}.switcher i{display:inline-block;max-width:0;padding:0;overflow:hidden;font-size:.875rem;font-style:normal;white-space:nowrap}.switcher:focus,.switcher:hover{max-width:100%;transition:background-color var(--transition),border-color var(--transition),color var(--transition),box-shadow var(--transition)}.switcher:hover::after{transform:rotate(180deg)}.switcher:hover i{max-width:100%;padding:0 calc(var(--spacing)/ 2) 0 calc(var(--spacing)/ 4);transition:max-width var(--transition),padding var(--transition)}.switcher:focus{box-shadow:var(--card-box-shadow),0 0 0 .2rem var(--secondary-focus)}@media (min-width:576px){.switcher{right:var(--spacing)}} \ No newline at end of file + */: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;--article-code-background-color:#f9fafb}@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:#0e1419;--article-code-background-color:var(--code-background-color)}}[data-theme=dark]{--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:#0e1419;--article-code-background-color:var(--code-background-color)}html{scroll-behavior:smooth}body>main{padding-top:calc(var(--block-spacing-vertical) + 3.5rem)}@media (min-width:992px){body>main{--block-spacing-horizontal:calc(var(--spacing) * 1.75);grid-column-gap:calc(var(--block-spacing-horizontal) * 4);display:grid;grid-template-columns:200px auto}}@media (min-width:1200px){body>main{--block-spacing-horizontal:calc(var(--spacing) * 2)}}body>main div[role=document],body>main>aside{min-width:0}div[role=document]>section::before{display:block;height:calc(2rem + 3.5rem - .5rem);margin-top:calc(-2rem - 3.5rem + .5rem);content:""}@media (min-width:576px){div[role=document]>section::before{height:calc(2.5rem + 3.5rem - .5rem);height:calc(-2.5rem - 3.5rem + .5rem)}}@media (min-width:768px){div[role=document]>section::before{height:calc(3rem + 3.5rem - .5rem);margin-top:calc(-3rem - 3.5rem + .5rem)}}@media (min-width:992px){div[role=document]>section::before{height:calc(3.5rem + 3.5rem - .5rem);margin-top:calc(-3.5rem - 3.5rem + .5rem)}}@media (min-width:1200px){div[role=document]>section::before{height:calc(4rem + 3.5rem - .5rem);margin-top:calc(-4rem - 3.5rem + .5rem)}}div[role=document] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after{display:inline-block;width:1rem;height:1rem;background-image:var(--icon-external);background-position:top center;background-repeat:no-repeat;background-size:.66rem auto;content:""}svg{height:1rem}main>aside nav{width:100%;margin-bottom:var(--block-spacing-vertical)}main>aside nav h1{margin-bottom:calc(var(--typography-spacing-vertical)/ 2)}@media (min-width:992px){main>aside nav{position:fixed;width:200px;max-height:calc(100vh - 5.5rem);margin-bottom:0;overflow-x:hidden;overflow-y:auto}main>aside nav h1{display:none}}main>aside li,main>aside summary{padding-top:0;padding-bottom:0;font-size:16px}main>aside li a{padding:.25rem .5rem}main>aside li a svg{vertical-align:middle}main>aside a.secondary:focus{background-color:transparent;color:var(--primary-hover)}main>aside a.active,main>aside a.active:hover{color:var(--primary)}main>aside details{padding-bottom:.25rem;border-bottom:none}main>aside details summary{color:var(--h1-color);font-size:14px;font-weight:300;text-transform:uppercase}main>aside details summary::after{display:none}main>aside details[open]>summary:not(:focus){color:var(--h1-color)}#themes button i{font-style:normal}#customization figure{display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(2,1fr);margin-bottom:0;overflow:hidden}@media (min-width:576px){#customization figure{grid-template-columns:repeat(18,1fr);grid-template-rows:1fr;border-top-right-radius:var(--border-radius);border-top-left-radius:var(--border-radius)}}#customization figure~article{margin-top:0;border-top-right-radius:0;border-top-left-radius:0}#customization figure button{margin-bottom:0;padding:0;padding-top:100%;border:none;border-radius:0}#customization figure button:focus{box-shadow:none}#customization figure button.picked{background-image:var(--icon-check);background-position:center;background-repeat:no-repeat;background-size:.66rem auto;box-shadow:inset 0 0 1rem 0 rgba(0,0,0,.25)}#customization figure button[data-color=amber].picked,#customization figure button[data-color=lime].picked,#customization figure button[data-color=yellow].picked{background-image:var(--icon-check-dark)}#customization h4{transition:color var(--transition)}#customization pre[data-theme=generated]{border-color:var(--primary)}#grids{--grid-spacing-vertical:1rem}#grids button{display:block;width:100%;margin-bottom:var(--spacing)}@media (min-width:576px){#grids button{display:inline-block;width:auto;margin-right:.5rem}}#grids button svg{stroke:var(--secondary);margin-right:.5rem;border:2px solid currentColor;border-radius:1rem;background:currentColor}#grids .grid>*{padding:calc(var(--spacing)/ 2) 0;border-radius:var(--border-radius);background:var(--code-background-color);font-size:87.5%;text-align:center}#grids details{margin-top:calc(var(--typography-spacing-vertical) * 2)}#grids details svg{vertical-align:bottom}#forms div.grid{grid-row-gap:0}section>hgroup{margin-bottom:calc(var(--typography-spacing-vertical) * 2)}a[role=button]{margin-right:calc(var(--typography-spacing-vertical)/ 4);margin-bottom:var(--typography-spacing-vertical)}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}article>footer.code{background:var(--article-code-background-color)}article pre,article pre code{background:0 0;margin-bottom:0}section>pre{background:var(--article-code-background-color);margin:var(--block-spacing-vertical) 0;padding:calc(var(--block-spacing-vertical)/ 1.5) var(--block-spacing-horizontal);box-shadow:var(--card-box-shadow)}[data-theme=invalid],[data-theme=valid]{position:relative;margin-bottom:0!important}[data-theme=invalid]:before,[data-theme=valid]:before{display:block;position:absolute;top:0;right:0;padding:.375rem .75rem;border-radius:0;color:var(--primary-inverse);font-size:14px;line-height:1}@media (min-width:992px){[data-theme=invalid]:before,[data-theme=valid]:before{top:var(--spacing);right:var(--spacing)}}[data-theme=invalid] code,[data-theme=valid] code{padding:calc(var(--block-spacing-vertical)/ 1.5 + 14px + .75rem) var(--block-spacing-horizontal)}[data-theme=invalid]:before{background:var(--invalid-color);content:"Not so great"}[data-theme=valid]:before{background:var(--valid-color);content:"Great"}body>nav{-webkit-backdrop-filter:saturate(180%) blur(20px);z-index:99;position:fixed;top:0;right:0;left:0;backdrop-filter:saturate(180%) blur(20px);background-color:var(--nav-background-color);box-shadow:0 1px 0 var(--nav-border-color)}body>nav a{border-radius:0}body>nav svg{vertical-align:text-bottom}body>nav ul:first-of-type li:first-of-type a{width:3.5rem;height:3.5rem;margin-left:calc(var(--spacing) * -1);padding:0;background:var(--h1-color);color:var(--nav-logo-color)}body>nav ul:first-of-type li:first-of-type a svg{height:3.5rem}body>nav ul:first-of-type li:nth-of-type(2){display:none;margin-left:var(--spacing);color:var(--h1-color)}@media (min-width:992px){body>nav ul:first-of-type li:nth-of-type(2){display:inline}}.switcher{position:fixed;right:calc(var(--spacing)/ 2);bottom:var(--spacing);width:auto;margin-bottom:0;padding:.75rem;border-radius:2rem;box-shadow:var(--card-box-shadow);line-height:1;text-align:right}.switcher::after{display:inline-block;width:1rem;height:1rem;border:.15rem solid currentColor;border-radius:50%;background:linear-gradient(to right,currentColor 0,currentColor 50%,transparent 50%);vertical-align:bottom;content:"";transition:transform var(--transition)}.switcher i{display:inline-block;max-width:0;padding:0;overflow:hidden;font-size:.875rem;font-style:normal;white-space:nowrap}.switcher:focus,.switcher:hover{max-width:100%;transition:background-color var(--transition),border-color var(--transition),color var(--transition),box-shadow var(--transition)}.switcher:hover::after{transform:rotate(180deg)}.switcher:hover i{max-width:100%;padding:0 calc(var(--spacing)/ 2) 0 calc(var(--spacing)/ 4);transition:max-width var(--transition),padding var(--transition)}.switcher:focus{box-shadow:var(--card-box-shadow),0 0 0 .2rem var(--secondary-focus)}@media (min-width:576px){.switcher{right:var(--spacing)}} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 2dafdc21..78392ff9 100644 --- a/docs/index.html +++ b/docs/index.html @@ -153,11 +153,13 @@ +

Dark theme

@@ -166,11 +168,13 @@ + 
<article data-theme="dark">
   …
 </article>
+
@@ -197,6 +201,7 @@ +

There are 2 ways to customize your version of Pico.css:

Overriding CSS variables

@@ -368,6 +374,7 @@
3
4
+

Columns intentionally collapses below large devices (992px)

To go further, discover how to merge Pico with the Bootstrap grid system.

@@ -562,6 +570,7 @@

Heading 4

Heading 5
Heading 6
+

Inside a <hgroup> all margin-bottom are collapsed and the :last-child is muted.

@@ -577,12 +587,14 @@

Heading 2

Subtitle for heading 2

+ 
<hgroup>
   <h2>Heading 2</h2>
   <h3>Subtitle for heading 2</h3>
 <hgroup>
+

Inline text elements:

@@ -610,11 +622,13 @@ Primary
Secondary
Contrast
+ 
<a href="#">Primary</a>
 <a href="#" class="secondary">Secondary</a>
 <a href="#" class="contrast">Contrast</a>
+

Blockquote:

@@ -624,6 +638,7 @@ - Phasellus eget lacinia + 
<blockquote>
   "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
@@ -632,6 +647,7 @@
   </footer>
 </blockquote>
+
@@ -644,39 +660,47 @@
+ 
<button>Button</button>
 <input type="submit">
+

Buttons are width: 100%; by default. Use <a role="button"> if you need an inline element.

Link Link + 
<a href="#" role="button">Link</a>
 <a href="#" role="button">Link</a>
+

Buttons come with .secondary and .contrast styles.

Secondary Contrast + 
<a href="#" role="button" class="secondary">Secondary</a>
 <a href="#" role="button" class="contrast">Contrast</a>
+

And a classic .outline variant.

Primary Secondary Contrast + 
<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>
+
@@ -705,6 +729,7 @@ We'll never share your email with anyone else. +

Disabled and validation states:

@@ -743,12 +769,14 @@ + 
<input type="text" placeholder="Valid" aria-invalid="false">
 <input type="text" placeholder="Invalid" aria-invalid="true">
 <input type="text" placeholder="Disabled" disabled>
 <input type="text" value="Readonly" readonly>
+

<fieldset> are unstyled and act as a container for radios and checkboxes providing a consistent margin-bottom for the set.

role="switch" on a type="checkbox" enable a custom switch.

@@ -789,6 +817,7 @@ Publish on my profile +

You can change a checkbox to indeterminate state by setting the indeterminate property to true

@@ -838,11 +868,13 @@ Select all + 
<script>
   document.getElementById('indeterminate-checkbox').indeterminate = true;
 </script>
+

Others input types:

@@ -861,6 +893,7 @@ + 
<!-- File browser -->
 <label for="file">File browser
@@ -887,6 +920,7 @@
   <input type="color" id="color" name="color" value="#0eaaaa">
 </label>
+
@@ -1024,6 +1058,7 @@
  • Cras sed libero aliquet, porta dolor quis, dapibus ipsum.
    • + @@ -1083,6 +1119,7 @@
  • Link
    • +

    <ul> are automatically distributed horizontally.

    <li> are unstyled and inlined.

    @@ -1125,6 +1163,7 @@ +

    Inside <aside>, navs are stacked vertically.

    @@ -1150,6 +1190,7 @@ + 
    <aside>
   <nav>
@@ -1161,6 +1202,7 @@
   </nav>
 </aside>
    +
    @@ -1172,19 +1214,23 @@
    + 
    <progress value="25" max="100"></progress>
    +

    You can change a progress bar to indeterminate state by setting the indeterminate property to true

    + 
    <script>
   document.getElementById('indeterminate-progress').indeterminate = true;
 </script>
    +
    @@ -1197,10 +1243,12 @@
    + 
    <button aria-busy="true">Please wait…</button>
 <button aria-busy="true" class="secondary"></button>
    +

    It can be applied to any block:

    @@ -1208,8 +1256,9 @@

    Or any text element:

    Generating link, please wait… - 
    <a href="#" aria-busy="true">Generating link, please wait…</a>
    - +
    + 
    <a href="#" aria-busy="true">Generating link, please wait…</a>
    +
    @@ -1223,11 +1272,13 @@

    Tooltip on a link

    Tooltip on inline element

    + diff --git a/docs/scss/content/_code.scss b/docs/scss/content/_code.scss index b936e4c1..85b6f806 100644 --- a/docs/scss/content/_code.scss +++ b/docs/scss/content/_code.scss @@ -2,11 +2,22 @@ * Docs: Code */ -// Custom spacings for 
     (Horizontally aligned with 
     content)
+// Code block inside article
+article > footer.code {
+  background: var(--article-code-background-color);
+}
+article pre,
+article pre code {
+  background: transparent;
+  margin-bottom: 0;
+}
+
+// Code block outside article
+// Horizontally aligned with 
     content
 section > pre {
+  background: var(--article-code-background-color);
   margin: var(--block-spacing-vertical) 0;
   padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
-  background-color: var(--card-sectionning-background-color);
   box-shadow: var(--card-box-shadow);
 }
 
@@ -36,7 +47,7 @@ section > pre {
 
   // Spacing for Valid & Invalid badge
   code {
-    padding: calc(var(--spacing) * 1.625) 0;
+    padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem) var(--block-spacing-horizontal);
   }
 }
 
diff --git a/docs/scss/themes/_docs.scss b/docs/scss/themes/_docs.scss
index f64025aa..e422221b 100644
--- a/docs/scss/themes/_docs.scss
+++ b/docs/scss/themes/_docs.scss
@@ -4,5 +4,23 @@
 
 @import "../../../scss/themes/default/colors";
 @import "docs/icons";
+
+// Light theme (Default)
+// Can be forced with data-theme="light"
 @import "docs/light";
+
+
+// Dark theme (Auto)
+// Automatically enabled if user has Dark mode enabled
 @import "docs/dark";
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    @include dark;
+  }
+}
+
+// Dark theme (Forced)
+// Enabled if forced with data-theme="dark"
+[data-theme="dark"] {
+  @include dark;
+}
\ No newline at end of file
diff --git a/docs/scss/themes/docs/_dark.scss b/docs/scss/themes/docs/_dark.scss
index 66483737..21e23671 100644
--- a/docs/scss/themes/docs/_dark.scss
+++ b/docs/scss/themes/docs/_dark.scss
@@ -1,23 +1,9 @@
-// Dark theme (Auto) [Additions for docs]
-// Automatically enabled if user has Dark mode enabled
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]) {
-    --invalid-color: #{rgba($red-900, .5)};
-    --valid-color: #{rgba($green-800, .5)};
-    --nav-background-color: #{rgba(darken($grey-900, 6%), .8)};
-    --nav-border-color: #{rgba($grey-500, .2)};
-    --nav-logo-color: #{mix($black, $grey-900)};
-  }
-}
-
-
-
-// Dark theme (Forced) [Additions for docs]
-// Enabled if forced with data-theme="dark"
-[data-theme="dark"] {
+// Dark theme [Additions for docs]
+@mixin dark {
   --invalid-color: #{rgba($red-900, .5)};
   --valid-color: #{rgba($green-800, .5)};
-  --nav-background: #{rgba(darken($grey-900, 6%), .8)};
+  --nav-background-color: #{rgba(darken($grey-900, 6%), .8)};
   --nav-border-color: #{rgba($grey-500, .2)};
   --nav-logo-color: #{mix($black, $grey-900)};
-}
+  --article-code-background-color: var(--code-background-color);
+}
\ No newline at end of file
diff --git a/docs/scss/themes/docs/_light.scss b/docs/scss/themes/docs/_light.scss
index 4c2f7ee5..6fc0c37d 100644
--- a/docs/scss/themes/docs/_light.scss
+++ b/docs/scss/themes/docs/_light.scss
@@ -7,4 +7,5 @@
   --nav-background-color: #{rgba($white, .7)};
   --nav-border-color: #{rgba($grey-500, .2)};
   --nav-logo-color: #{$white};
+  --article-code-background-color: #{mix($grey-50, $white, 33%)};
 }