From ec866e1e5a49c7e60f0e68fb084223d513d7ace8 Mon Sep 17 00:00:00 2001 From: Lucas Date: Wed, 27 Nov 2019 22:10:02 +0700 Subject: [PATCH] Reorganization of Sass files --- docs/css/pico.docs.css | 56 +++-- docs/css/pico.docs.min.css | 2 +- docs/scss/components/_theme-switcher.scss | 4 +- docs/scss/content/_typography.scss | 23 ++ docs/scss/layout/_aside.scss | 72 +++++++ docs/scss/layout/_documentation.scss | 94 +++++++++ docs/scss/layout/_layout.scss | 242 ---------------------- docs/scss/layout/_main.scss | 64 ++++++ docs/scss/pico.docs.scss | 5 +- 9 files changed, 298 insertions(+), 264 deletions(-) create mode 100644 docs/scss/content/_typography.scss create mode 100644 docs/scss/layout/_aside.scss create mode 100644 docs/scss/layout/_documentation.scss delete mode 100644 docs/scss/layout/_layout.scss create mode 100644 docs/scss/layout/_main.scss diff --git a/docs/css/pico.docs.css b/docs/css/pico.docs.css index d51cba6d..e79d521e 100644 --- a/docs/css/pico.docs.css +++ b/docs/css/pico.docs.css @@ -32,22 +32,8 @@ } /** - * Docs: Global layout + * Docs: Main (Grid) */ -section > hgroup { - margin-bottom: 3rem; -} - -section > hgroup p { - color: var(--muted-text); - font-size: 1.125rem; -} - -a[role=button] { - margin-right: 0.25rem; - margin-bottom: 1.5rem; -} - body > main { padding-top: 4.5rem; } @@ -118,6 +104,9 @@ a[name]:not([href])::before { } } +/** + * Docs: Aside + */ main > aside nav { width: 100%; margin-bottom: 2rem; @@ -147,6 +136,14 @@ main > aside li, main > aside summary { font-size: 16px; } +main > aside li a { + padding: 0.375rem 0.5rem; +} + +main > aside li a svg { + vertical-align: middle; +} + main > aside a:focus, main > aside a.secondary:focus { background-color: transparent; @@ -173,6 +170,9 @@ main > aside details summary::after { line-height: 1; } +/** + * Docs: Documentation + */ #customization figure { display: grid; grid-template-columns: repeat(9, 1fr); @@ -248,6 +248,29 @@ main > aside details summary::after { text-align: center; } +/** + * Docs: Typography + */ +section > hgroup { + margin-bottom: 3rem; +} + +section > hgroup p { + color: var(--muted-text); + font-size: 1.125rem; +} + +a[role=button] { + margin-right: 0.25rem; + margin-bottom: 1.5rem; +} + +[role=document] section > h1, +[role=document] section > h2, +[role=document] section > h3 { + line-height: 1; +} + /** * Docs: Code */ @@ -424,7 +447,6 @@ button.switcher { right: 0.5rem; bottom: 1rem; width: auto; - max-width: 3rem; margin-bottom: 0; padding: .75rem; border-radius: 2rem; @@ -457,7 +479,7 @@ button.switcher i { button.switcher:hover, button.switcher:focus { max-width: 100%; - transition: max-width 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; } button.switcher:hover::after { diff --git a/docs/css/pico.docs.min.css b/docs/css/pico.docs.min.css index 041b069a..9da62e4f 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:not([data-theme=dark]),[data-theme=light]{--nav-background:rgba(255, 255, 255, 0.7);--nav-border:rgba(115, 132, 140, 0.2)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--nav-background:rgba(16, 25, 30, 0.8);--nav-border:rgba(115, 132, 140, 0.2)}}[data-theme=dark]{--nav-background:rgba(16, 25, 30, 0.8);--nav-border:rgba(115, 132, 140, 0.2)}section>hgroup{margin-bottom:3rem}section>hgroup p{color:var(--muted-text);font-size:1.125rem}a[role=button]{margin-right:0.25rem;margin-bottom:1.5rem}body>main{padding-top:4.5rem}@media (min-width:576px){body>main{padding-top:4.75rem}}@media (min-width:768px){body>main{padding-top:5rem}}@media (min-width:992px){body>main{grid-column-gap:4rem;display:grid;grid-template-columns:200px auto;padding-top:5.25rem}}@media (min-width:1200px){body>main{padding-top:5.5rem}}body>main>*{min-width:0}a[name]:not([href]):before{display:block;height:4.5rem;margin-top:-4.5rem;content:''}@media (min-width:576px){a[name]:not([href]):before{height:4.75rem;margin-top:-4.75rem}}@media (min-width:768px){a[name]:not([href]):before{height:5rem;margin-top:-5rem}}@media (min-width:992px){a[name]:not([href]):before{height:5.25rem;margin-top:-5.25rem}}@media (min-width:1200px){a[name]:not([href]):before{height:5.5rem;margin-top:-5.5rem}}main>aside nav{width:100%;margin-bottom:2rem}main>aside nav h1{margin-bottom:1.5rem}@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 a.secondary:focus,main>aside a:focus{background-color:transparent;color:var(--primary-hover)}main>aside details{padding-bottom:.25rem;border-bottom:none}main>aside details summary{font-weight:300;text-transform:uppercase}main>aside details summary:after{display:none}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}#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:0.25rem;border-top-left-radius:0.25rem}}#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: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");background-position:center;background-repeat:no-repeat;background-size:.66rem auto;box-shadow:inset 0 0 1rem 0 rgba(0, 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: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='%232c4049' 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")}#customization h4{transition:color 0.2s ease-in-out}#customization pre[data-theme=generated]{border-color:var(--primary)}#grids button{display:inline-block;width:auto;margin-right:.5rem}#grids button svg{stroke:var(--secondary);margin-right:.5rem;border:3px solid currentColor;border-radius:1rem;background:currentColor}#grids .grid>*{padding:0.5rem 0;background:var(--code-background);text-align:center}@media (min-width:576px){pre{padding:2rem 2.5rem}}@media (min-width:768px){pre{padding:2rem 3rem}}@media (min-width:992px){pre{padding:2rem 3.5rem}}@media (min-width:1200px){pre{padding:2rem 4rem}}[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:-1rem;padding:.375rem .75rem;border-radius:0;color:var(--primary-inverse);font-size:14px;line-height:1}@media (min-width:576px){[data-theme=invalid]:before,[data-theme=valid]:before{right:0}}@media (min-width:992px){[data-theme=invalid]:before,[data-theme=valid]:before{top:1rem;right:1rem}}[data-theme=invalid] pre,[data-theme=valid] pre{padding-top:2rem;padding-bottom:2rem}[data-theme=invalid]:before{background:var(--invalid);content:'Bulky'}[data-theme=invalid] pre{border-color:var(--invalid)}[data-theme=valid]:before{background:var(--valid);content:'Great'}[data-theme=valid] pre{border-color:var(--valid)}section[title=love] [data-theme=invalid]:before{content:'Not so 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);box-shadow:0px 1px 0 var(--nav-border)}body>nav li a{border-radius:0}body>nav ul:first-of-type li:first-of-type a{width:3.5rem;height:3.5rem;margin-left:-1rem;padding:0;background:var(--h1);color:var(--background)}body>nav ul:first-of-type li:nth-of-type(2){display:none;margin-left:1rem;color:var(--muted-text)}@media (min-width:992px){body>nav ul:first-of-type li:nth-of-type(2){display:inline}}article pre{margin-top:2rem;margin-bottom:-2rem}@media (min-width:576px){article pre{padding:2rem 2.5rem;margin-bottom:0}}@media (min-width:768px){article pre{padding:2rem 3rem;margin:-3rem;margin-top:3rem}}@media (min-width:992px){article pre{padding:2rem 3.5rem;margin:-3.5rem;margin-top:3.5rem}}@media (min-width:1200px){article pre{padding:2rem 4rem;margin:-4rem;margin-top:4rem}}button.switcher{position:fixed;right:0.5rem;bottom:1rem;width:auto;max-width:3rem;margin-bottom:0;padding:.75rem;border-radius:2rem;line-height:1;text-align:right;box-shadow:var(--card-shadow)}button.switcher:after{display:inline-block;width:1rem;height:1rem;border:2px solid currentColor;border-radius:50%;background:linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);vertical-align:bottom;content:'';transition:transform 0.2s ease-in-out}button.switcher i{display:inline-block;max-width:0;padding:0;overflow:hidden;font-size:.875rem;font-style:normal;white-space:nowrap}button.switcher:focus,button.switcher:hover{max-width:100%;transition:max-width 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out}button.switcher:hover:after{transform:rotate(180deg)}button.switcher:hover i{max-width:100%;padding:0 0.5rem 0 0.25rem;transition:max-width 0.2s ease-in-out, padding 0.2s ease-in-out}button.switcher:focus{box-shadow:var(--card-shadow), 0 0 0 0.2rem var(--secondary-focus)}@media (min-width:576px){button.switcher{right:1rem}} \ No newline at end of file + */:root:not([data-theme=dark]),[data-theme=light]{--nav-background:rgba(255, 255, 255, 0.7);--nav-border:rgba(115, 132, 140, 0.2)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--nav-background:rgba(16, 25, 30, 0.8);--nav-border:rgba(115, 132, 140, 0.2)}}[data-theme=dark]{--nav-background:rgba(16, 25, 30, 0.8);--nav-border:rgba(115, 132, 140, 0.2)}body>main{padding-top:4.5rem}@media (min-width:576px){body>main{padding-top:4.75rem}}@media (min-width:768px){body>main{padding-top:5rem}}@media (min-width:992px){body>main{grid-column-gap:4rem;display:grid;grid-template-columns:200px auto;padding-top:5.25rem}}@media (min-width:1200px){body>main{padding-top:5.5rem}}body>main>*{min-width:0}a[name]:not([href]):before{display:block;height:4.5rem;margin-top:-4.5rem;content:''}@media (min-width:576px){a[name]:not([href]):before{height:4.75rem;margin-top:-4.75rem}}@media (min-width:768px){a[name]:not([href]):before{height:5rem;margin-top:-5rem}}@media (min-width:992px){a[name]:not([href]):before{height:5.25rem;margin-top:-5.25rem}}@media (min-width:1200px){a[name]:not([href]):before{height:5.5rem;margin-top:-5.5rem}}main>aside nav{width:100%;margin-bottom:2rem}main>aside nav h1{margin-bottom:1.5rem}@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:0.375rem 0.5rem}main>aside li a svg{vertical-align:middle}main>aside a.secondary:focus,main>aside a:focus{background-color:transparent;color:var(--primary-hover)}main>aside details{padding-bottom:.25rem;border-bottom:none}main>aside details summary{font-weight:300;text-transform:uppercase}main>aside details summary:after{display:none}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}#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:0.25rem;border-top-left-radius:0.25rem}}#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: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");background-position:center;background-repeat:no-repeat;background-size:.66rem auto;box-shadow:inset 0 0 1rem 0 rgba(0, 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: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='%232c4049' 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")}#customization h4{transition:color 0.2s ease-in-out}#customization pre[data-theme=generated]{border-color:var(--primary)}#grids button{display:inline-block;width:auto;margin-right:.5rem}#grids button svg{stroke:var(--secondary);margin-right:.5rem;border:3px solid currentColor;border-radius:1rem;background:currentColor}#grids .grid>*{padding:0.5rem 0;background:var(--code-background);text-align:center}section>hgroup{margin-bottom:3rem}section>hgroup p{color:var(--muted-text);font-size:1.125rem}a[role=button]{margin-right:0.25rem;margin-bottom:1.5rem}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}@media (min-width:576px){pre{padding:2rem 2.5rem}}@media (min-width:768px){pre{padding:2rem 3rem}}@media (min-width:992px){pre{padding:2rem 3.5rem}}@media (min-width:1200px){pre{padding:2rem 4rem}}[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:-1rem;padding:.375rem .75rem;border-radius:0;color:var(--primary-inverse);font-size:14px;line-height:1}@media (min-width:576px){[data-theme=invalid]:before,[data-theme=valid]:before{right:0}}@media (min-width:992px){[data-theme=invalid]:before,[data-theme=valid]:before{top:1rem;right:1rem}}[data-theme=invalid] pre,[data-theme=valid] pre{padding-top:2rem;padding-bottom:2rem}[data-theme=invalid]:before{background:var(--invalid);content:'Bulky'}[data-theme=invalid] pre{border-color:var(--invalid)}[data-theme=valid]:before{background:var(--valid);content:'Great'}[data-theme=valid] pre{border-color:var(--valid)}section[title=love] [data-theme=invalid]:before{content:'Not so 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);box-shadow:0px 1px 0 var(--nav-border)}body>nav li a{border-radius:0}body>nav ul:first-of-type li:first-of-type a{width:3.5rem;height:3.5rem;margin-left:-1rem;padding:0;background:var(--h1);color:var(--background)}body>nav ul:first-of-type li:nth-of-type(2){display:none;margin-left:1rem;color:var(--muted-text)}@media (min-width:992px){body>nav ul:first-of-type li:nth-of-type(2){display:inline}}article pre{margin-top:2rem;margin-bottom:-2rem}@media (min-width:576px){article pre{padding:2rem 2.5rem;margin-bottom:0}}@media (min-width:768px){article pre{padding:2rem 3rem;margin:-3rem;margin-top:3rem}}@media (min-width:992px){article pre{padding:2rem 3.5rem;margin:-3.5rem;margin-top:3.5rem}}@media (min-width:1200px){article pre{padding:2rem 4rem;margin:-4rem;margin-top:4rem}}button.switcher{position:fixed;right:0.5rem;bottom:1rem;width:auto;margin-bottom:0;padding:.75rem;border-radius:2rem;line-height:1;text-align:right;box-shadow:var(--card-shadow)}button.switcher:after{display:inline-block;width:1rem;height:1rem;border:2px solid currentColor;border-radius:50%;background:linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);vertical-align:bottom;content:'';transition:transform 0.2s ease-in-out}button.switcher i{display:inline-block;max-width:0;padding:0;overflow:hidden;font-size:.875rem;font-style:normal;white-space:nowrap}button.switcher:focus,button.switcher:hover{max-width:100%;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out}button.switcher:hover:after{transform:rotate(180deg)}button.switcher:hover i{max-width:100%;padding:0 0.5rem 0 0.25rem;transition:max-width 0.2s ease-in-out, padding 0.2s ease-in-out}button.switcher:focus{box-shadow:var(--card-shadow), 0 0 0 0.2rem var(--secondary-focus)}@media (min-width:576px){button.switcher{right:1rem}} \ No newline at end of file diff --git a/docs/scss/components/_theme-switcher.scss b/docs/scss/components/_theme-switcher.scss index e36b4b0e..fa7ab321 100644 --- a/docs/scss/components/_theme-switcher.scss +++ b/docs/scss/components/_theme-switcher.scss @@ -7,7 +7,6 @@ button.switcher { right: $spacing-gutter/2; bottom: $spacing-gutter; width: auto; - max-width: 1rem + $spacing-gutter*2; margin-bottom: 0; padding: .75rem; border-radius: 2rem; @@ -40,8 +39,7 @@ button.switcher { &:hover, &:focus { max-width: 100%; - transition: max-width $transition, - background-color $transition, + transition: background-color $transition, color $transition; } diff --git a/docs/scss/content/_typography.scss b/docs/scss/content/_typography.scss new file mode 100644 index 00000000..0d6356a1 --- /dev/null +++ b/docs/scss/content/_typography.scss @@ -0,0 +1,23 @@ +/** + * Docs: Typography + */ + + section > hgroup { + margin-bottom: $spacing-typography*2; + + p { + color: var(--muted-text); + font-size: 1.125rem; + } + } + a[role=button] { + margin-right: $spacing-gutter/4; + margin-bottom: $spacing-typography; + } + [role=document] { + section > h1, + section > h2, + section > h3 { + line-height: 1; + } + } diff --git a/docs/scss/layout/_aside.scss b/docs/scss/layout/_aside.scss new file mode 100644 index 00000000..0bc8af1a --- /dev/null +++ b/docs/scss/layout/_aside.scss @@ -0,0 +1,72 @@ +/** + * Docs: Aside + */ + +main > aside { + + nav { + width: 100%; + margin-bottom: $spacing-block; + + h1 { + margin-bottom: $spacing-typography; + } + + @media (min-width: map-get($breakpoints, "lg")) { + position: fixed; + width: 200px; + max-height: calc(100vh - 5.5rem); + margin-bottom: 0; + overflow-x: hidden; + overflow-y: auto; + + h1 { + display: none; + } + } + } + + li, summary { + padding-top: 0; + padding-bottom: 0; + font-size: 16px; + } + + li a { + padding: 0.375rem 0.5rem; + + svg { + vertical-align: middle; + } + } + + a, + a.secondary { + &:focus { + background-color: transparent; + color: var(--primary-hover); + } + } + + details { + padding-bottom: .25rem; + border-bottom: none; + } + + details summary { + font-weight: 300; + text-transform: uppercase; + + &::after { + display: none; + } + } +} + +[role=document] { + section > h1, + section > h2, + section > h3 { + line-height: 1; + } +} diff --git a/docs/scss/layout/_documentation.scss b/docs/scss/layout/_documentation.scss new file mode 100644 index 00000000..1e4f3d6b --- /dev/null +++ b/docs/scss/layout/_documentation.scss @@ -0,0 +1,94 @@ +/** + * Docs: Documentation + */ + +// Docs: Customization +// –––––––––––––––––––– + +#customization { + + figure { + display: grid; + grid-template-columns: repeat(9, 1fr); + grid-template-rows: repeat(2, 1fr); + margin-bottom: 0; + overflow: hidden; + + @media (min-width: map-get($breakpoints, "sm")) { + grid-template-columns: repeat(18, 1fr); + grid-template-rows: 1fr; + border-top-right-radius: $round; + border-top-left-radius: $round; + } + + ~ article { + margin-top: 0; + border-top-right-radius: 0; + border-top-left-radius: 0; + } + + button { + margin-bottom: 0; + padding: 0; + padding-top: 100%; + border:none; + border-radius: 0; + + &:focus { + box-shadow: none; + } + + &.picked { + // Source: https://feathericons.com/ + 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='%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"); + background-position: center; + background-repeat: no-repeat; + background-size: .66rem auto; + box-shadow: inset 0 0 1rem 0 rgba(0,0,0,0.25); + } + &[data-color="lime"], + &[data-color="yellow"], + &[data-color="amber"] { + &.picked { + // Source: https://feathericons.com/ + 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='%232c4049' 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"); + } + } + } + } + + h4 { + transition: color $transition; + } + + pre[data-theme="generated"] { + border-color: var(--primary); + } +} + + +// Docs: Grids +// –––––––––––––––––––– + +#grids { + + button { + display: inline-block; + width: auto; + margin-right: .5rem; + + svg { + stroke: var(--secondary); + margin-right: .5rem; + border: 3px solid currentColor; + border-radius: 1rem; + background: currentColor; + } + } + + .grid > * { + padding: ($spacing-gutter/2) 0; + background: var(--code-background); + text-align: center; + } +} diff --git a/docs/scss/layout/_layout.scss b/docs/scss/layout/_layout.scss deleted file mode 100644 index b6f593ac..00000000 --- a/docs/scss/layout/_layout.scss +++ /dev/null @@ -1,242 +0,0 @@ -/** - * Docs: Global layout - */ - -$navHeight: 3.5rem; - - -// Docs: Commons -// –––––––––––––––––––– - -section > hgroup { - margin-bottom: $spacing-typography*2; - - p { - color: var(--muted-text); - font-size: 1.125rem; - } -} -a[role=button] { - margin-right: $spacing-gutter/4; - margin-bottom: $spacing-typography; -} - - -// Main (Grid) -// –––––––––––––––––––– - -body > main { - padding-top:map-get($spacing-factor, "xs") + $navHeight; - - @media (min-width: map-get($breakpoints, "sm")) { - padding-top: map-get($spacing-factor, "sm") + $navHeight; - } - - @media (min-width: map-get($breakpoints, "md")) { - padding-top: map-get($spacing-factor, "md") + $navHeight; - } - - @media (min-width: map-get($breakpoints, "lg")) { - grid-column-gap: $spacing-gutter*4; - display: grid; - grid-template-columns: 200px auto; - padding-top: map-get($spacing-factor, "lg") + $navHeight; - } - - @media (min-width: map-get($breakpoints, "xl")) { - padding-top: map-get($spacing-factor, "xl") + $navHeight; - } - - > * { - min-width: 0; // HACK for childs in overflow - } -} - - -// Anchors hacks for internal links -// –––––––––––––––––––– - -a[name]:not([href])::before { - display: block; - height: map-get($spacing-factor, "xs") + $navHeight; - margin-top: -(map-get($spacing-factor, "xs")+ $navHeight); - content: ''; - - - @media (min-width: map-get($breakpoints, "sm")) { - height: map-get($spacing-factor, "sm") + $navHeight; - margin-top: -(map-get($spacing-factor, "sm") + $navHeight); - } - - @media (min-width: map-get($breakpoints, "md")) { - height: map-get($spacing-factor, "md") + $navHeight; - margin-top: -(map-get($spacing-factor, "md") + $navHeight); - } - - @media (min-width: map-get($breakpoints, "lg")) { - height: map-get($spacing-factor, "lg") + $navHeight; - margin-top: -(map-get($spacing-factor, "lg") + $navHeight); - } - - @media (min-width: map-get($breakpoints, "xl")) { - height: map-get($spacing-factor, "xl") + $navHeight; - margin-top: -(map-get($spacing-factor, "xl") + $navHeight); - } -} - - -// Aside -// –––––––––––––––––––– - -main > aside { - - - nav { - width: 100%; - margin-bottom: $spacing-block; - - h1 { - margin-bottom: $spacing-typography; - } - - @media (min-width: map-get($breakpoints, "lg")) { - position: fixed; - width: 200px; - max-height: calc(100vh - 5.5rem); - margin-bottom: 0; - overflow-x: hidden; - overflow-y: auto; - - h1 { - display: none; - } - } - } - - li, summary { - padding-top: 0; - padding-bottom: 0; - font-size: 16px; - } - a, - a.secondary { - &:focus { - background-color: transparent; - color: var(--primary-hover); - } - } - - details { - padding-bottom: .25rem; - border-bottom: none; - } - - details summary { - font-weight: 300; - text-transform: uppercase; - - &::after { - display: none; - } - } -} - -[role=document] { - section > h1, - section > h2, - section > h3 { - line-height: 1; - } -} - - -// Docs: Customization -// –––––––––––––––––––– - -#customization { - - figure { - display: grid; - grid-template-columns: repeat(9, 1fr); - grid-template-rows: repeat(2, 1fr); - margin-bottom: 0; - overflow: hidden; - - @media (min-width: map-get($breakpoints, "sm")) { - grid-template-columns: repeat(18, 1fr); - grid-template-rows: 1fr; - border-top-right-radius: $round; - border-top-left-radius: $round; - } - - ~ article { - margin-top: 0; - border-top-right-radius: 0; - border-top-left-radius: 0; - } - - button { - margin-bottom: 0; - padding: 0; - padding-top: 100%; - border:none; - border-radius: 0; - - &:focus { - box-shadow: none; - } - - &.picked { - // Source: https://feathericons.com/ - 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='%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"); - background-position: center; - background-repeat: no-repeat; - background-size: .66rem auto; - box-shadow: inset 0 0 1rem 0 rgba(0,0,0,0.25); - } - &[data-color="lime"], - &[data-color="yellow"], - &[data-color="amber"] { - &.picked { - // Source: https://feathericons.com/ - 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='%232c4049' 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"); - } - } - } - } - - h4 { - transition: color $transition; - } - - pre[data-theme="generated"] { - border-color: var(--primary); - } -} - - -// Docs: Grids -// –––––––––––––––––––– - -#grids { - - button { - display: inline-block; - width: auto; - margin-right: .5rem; - - svg { - stroke: var(--secondary); - margin-right: .5rem; - border: 3px solid currentColor; - border-radius: 1rem; - background: currentColor; - } - } - - .grid > * { - padding: ($spacing-gutter/2) 0; - background: var(--code-background); - text-align: center; - } -} diff --git a/docs/scss/layout/_main.scss b/docs/scss/layout/_main.scss new file mode 100644 index 00000000..1bb55181 --- /dev/null +++ b/docs/scss/layout/_main.scss @@ -0,0 +1,64 @@ +/** + * Docs: Main (Grid) + */ + +$navHeight: 3.5rem; + +body > main { + padding-top:map-get($spacing-factor, "xs") + $navHeight; + + @media (min-width: map-get($breakpoints, "sm")) { + padding-top: map-get($spacing-factor, "sm") + $navHeight; + } + + @media (min-width: map-get($breakpoints, "md")) { + padding-top: map-get($spacing-factor, "md") + $navHeight; + } + + @media (min-width: map-get($breakpoints, "lg")) { + grid-column-gap: $spacing-gutter*4; + display: grid; + grid-template-columns: 200px auto; + padding-top: map-get($spacing-factor, "lg") + $navHeight; + } + + @media (min-width: map-get($breakpoints, "xl")) { + padding-top: map-get($spacing-factor, "xl") + $navHeight; + } + + > * { + min-width: 0; // HACK for childs in overflow + } +} + + +// Anchors hacks for internal links +// –––––––––––––––––––– + +a[name]:not([href])::before { + display: block; + height: map-get($spacing-factor, "xs") + $navHeight; + margin-top: -(map-get($spacing-factor, "xs")+ $navHeight); + content: ''; + + + @media (min-width: map-get($breakpoints, "sm")) { + height: map-get($spacing-factor, "sm") + $navHeight; + margin-top: -(map-get($spacing-factor, "sm") + $navHeight); + } + + @media (min-width: map-get($breakpoints, "md")) { + height: map-get($spacing-factor, "md") + $navHeight; + margin-top: -(map-get($spacing-factor, "md") + $navHeight); + } + + @media (min-width: map-get($breakpoints, "lg")) { + height: map-get($spacing-factor, "lg") + $navHeight; + margin-top: -(map-get($spacing-factor, "lg") + $navHeight); + } + + @media (min-width: map-get($breakpoints, "xl")) { + height: map-get($spacing-factor, "xl") + $navHeight; + margin-top: -(map-get($spacing-factor, "xl") + $navHeight); + } +} diff --git a/docs/scss/pico.docs.scss b/docs/scss/pico.docs.scss index 8cc94531..9f64fd4c 100644 --- a/docs/scss/pico.docs.scss +++ b/docs/scss/pico.docs.scss @@ -11,9 +11,12 @@ @import "themes/dark"; // Layout -@import "layout/layout"; +@import "layout/main"; +@import "layout/aside"; +@import "layout/documentation"; // Content +@import "content/typography"; @import "content/code"; // Components