diff --git a/dist/style.min.css b/dist/style.min.css index 9b41532..66db30a 100644 --- a/dist/style.min.css +++ b/dist/style.min.css @@ -1 +1 @@ -:root{--ll-font-family:"Comic Neue",-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,Ubuntu,roboto,noto,segoe ui,arial,sans-serif;--ll-border-radius:16rem 1rem 14rem 1rem/1rem 14rem 1rem 16rem;--ll-border-color:var(--ll-theme-border-color,#000);--ll-text-color:var(--ll-theme-text-color,#000);--ll-link-color:var(--ll-theme-link-color,var(--ll-text-color));--ll-link-visited-color:var(--ll-theme-link-visited-color,var(--ll-link-color));--ll-accent-color:var(--ll-theme-accent-color,#4169e1);--ll-background-color:var(--ll-theme-background-color,#fff);--ll-input-focus-box-shadow:0 0 0 0.125rem var(--ll-background-color),0 0 0 0.25rem var(--ll-accent-color);--ll-link-focus-box-shadow:0 0 0 0.25rem var(--ll-accent-color);--ll-border-thin:0.0625rem solid var(--ll-border-color);--ll-border-medium:0.125rem solid var(--ll-border-color);--ll-border-thick:0.1875rem solid var(--ll-border-color);--fluid-min-width:320;--fluid-max-width:1140;--fluid-screen:100vw;--fluid-bp:calc((var(--fluid-screen) - var(--fluid-min-width)/16*1rem)/(var(--fluid-max-width) - var(--fluid-min-width)));--f--5-min:8.04;--f--5-max:7.86;--step--5:calc(var(--f--5-min)/16*1rem + (var(--f--5-max) - var(--f--5-min))*var(--fluid-bp));--f--4-min:9.65;--f--4-max:9.83;--step--4:calc(var(--f--4-min)/16*1rem + (var(--f--4-max) - var(--f--4-min))*var(--fluid-bp));--f--3-min:11.57;--f--3-max:12.29;--step--3:calc(var(--f--3-min)/16*1rem + (var(--f--3-max) - var(--f--3-min))*var(--fluid-bp));--f--2-min:13.89;--f--2-max:15.36;--step--2:calc(var(--f--2-min)/16*1rem + (var(--f--2-max) - var(--f--2-min))*var(--fluid-bp));--f--1-min:16.67;--f--1-max:19.2;--step--1:calc(var(--f--1-min)/16*1rem + (var(--f--1-max) - var(--f--1-min))*var(--fluid-bp));--f-0-min:20;--f-0-max:24;--step-0:calc(var(--f-0-min)/16*1rem + (var(--f-0-max) - var(--f-0-min))*var(--fluid-bp));--f-1-min:24;--f-1-max:30;--step-1:calc(var(--f-1-min)/16*1rem + (var(--f-1-max) - var(--f-1-min))*var(--fluid-bp));--f-2-min:28.8;--f-2-max:37.5;--step-2:calc(var(--f-2-min)/16*1rem + (var(--f-2-max) - var(--f-2-min))*var(--fluid-bp));--f-3-min:34.56;--f-3-max:46.88;--step-3:calc(var(--f-3-min)/16*1rem + (var(--f-3-max) - var(--f-3-min))*var(--fluid-bp));--f-4-min:41.47;--f-4-max:58.59;--step-4:calc(var(--f-4-min)/16*1rem + (var(--f-4-max) - var(--f-4-min))*var(--fluid-bp));--f-5-min:49.77;--f-5-max:73.24;--step-5:calc(var(--f-5-min)/16*1rem + (var(--f-5-max) - var(--f-5-min))*var(--fluid-bp))}@media screen and (min-width:1140px){:root{--fluid-screen:calc(var(--fluid-max-width)*1px)}}body{background-color:var(--ll-background-color);color:var(--ll-text-color);font-family:var(--ll-font-family);font-size:var(--step-0)}::-moz-selection{background-color:var(--ll-accent-color);color:var(--ll-background-color)}::selection{background-color:var(--ll-accent-color);color:var(--ll-background-color)}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.wrapper{margin:0 auto;max-width:65ch;padding:var(--step-0)}.flow>*+*{-webkit-margin-before:1em;margin-block-start:1em}.align-center{text-align:center}.align-start{text-align:start}.align-end{text-align:end}h1{font-size:var(--step-3)}h1,h2{font-weight:700}h2{font-size:var(--step-2)}h3{font-size:var(--step-1);font-weight:700}hr{border:none;display:block;height:1em;-webkit-margin-after:0;margin-block-end:0;position:relative}hr:after{content:"***";position:absolute;text-align:center;width:100%}a{color:var(--ll-link-color)}a[aria-current=page]{-webkit-text-decoration-style:double;text-decoration-style:double}a:visited{color:var(--ll-link-visited-color)}a:focus{background-color:var(--ll-background-color);outline:none}a:active,a:focus{border-radius:var(--ll-border-radius);box-shadow:var(--ll-link-focus-box-shadow)}a:active{background-color:var(--ll-accent-color);color:var(--ll-background-color)}a.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--ll-background-color);border:var(--ll-border-medium);border-radius:var(--ll-border-radius);color:var(--ll-text-color);display:inline-block;font-family:inherit;font-size:100%;font-weight:700;line-height:inherit;padding:var(--step--5) var(--step--4);text-decoration:none}a.button:focus{box-shadow:var(--ll-input-focus-box-shadow);outline:none}a.button:active{background:var(--ll-text-color);color:var(--ll-background-color)}[type=reset],[type=submit],button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:var(--ll-border-medium);border-radius:var(--ll-border-radius);border-style:solid;border-width:.125rem;display:inline-block;font-family:inherit;font-size:100%;font-weight:700;line-height:inherit;padding:var(--step--5) var(--step--4)}[type=submit],button{background:var(--ll-text-color);color:var(--ll-background-color)}[type=reset]{background:var(--ll-background-color);color:var(--ll-text-color)}[type=reset]:focus,[type=submit]:focus,button:focus{box-shadow:var(--ll-input-focus-box-shadow);outline:none}[type=submit]:active,button:active{background:var(--ll-background-color);color:var(--ll-text-color)}[type=reset]:active{background:var(--ll-text-color);color:var(--ll-background-color)}button.link{all:unset;text-decoration:underline}button.link:focus{outline:none}button.link:active,button.link:focus{background-color:var(--ll-accent-color);border-radius:var(--ll-border-radius);box-shadow:var(--ll-link-focus-box-shadow);color:var(--ll-background-color)}label{display:block;font-weight:700}label+*{-webkit-margin-before:var(--step--5);margin-block-start:var(--step--5)}input,textarea{background-color:var(--ll-background-color);border:var(--ll-border-medium);border-radius:var(--ll-border-radius);color:var(--ll-text-color);display:block;width:100%}input,textarea{padding:var(--step--5) var(--step--4)}textarea{min-height:calc(var(--step-0)*12);padding:var(--step--2);resize:vertical}input:focus,textarea:focus{box-shadow:var(--ll-input-focus-box-shadow);outline:none}input[type=checkbox]{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}input[type=checkbox]+label:before{align-items:center;border:var(--ll-border-medium);border-radius:var(--ll-border-radius);content:"\00a0";display:inline-flex;height:var(--step-1);justify-content:center;-webkit-margin-after:calc(var(--step--5)*-1);margin-block-end:calc(var(--step--5)*-1);-webkit-margin-end:var(--step--5);margin-inline-end:var(--step--5);width:var(--step-1)}input[type=checkbox]:active+label:before,input[type=checkbox]:focus+label:before{box-shadow:var(--ll-input-focus-box-shadow)}input[type=checkbox]:checked+label:before{content:"\2713"}input[type=radio]{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}input[type=radio]+label:before{align-items:center;border:var(--ll-border-medium);border-radius:50%;content:"\00a0";display:inline-flex;height:var(--step-1);justify-content:center;-webkit-margin-after:calc(var(--step--5)*-1);margin-block-end:calc(var(--step--5)*-1);-webkit-margin-end:var(--step--5);margin-inline-end:var(--step--5);width:var(--step-1)}input[type=radio]:active+label:before,input[type=radio]:focus+label:before{box-shadow:var(--ll-input-focus-box-shadow)}input[type=radio]:checked+label:before{background-color:var(--ll-text-color);box-shadow:0 0 0 .25rem var(--ll-background-color) inset}input[type=radio]:checked:active+label:before,input[type=radio]:checked:focus+label:before{background-color:var(--ll-text-color);box-shadow:var(--ll-input-focus-box-shadow),0 0 0 .25rem var(--ll-background-color) inset}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--ll-text-color);background-image:var(--ll-theme-select-icon,url('data:image/svg+xml;utf8,'));background-position:right var(--step--4) center;background-repeat:no-repeat;border:var(--ll-border-medium);border-radius:var(--ll-border-radius);color:var(--ll-background-color);font-family:inherit;font-size:100%;font-weight:700;line-height:inherit;padding:var(--step--5) var(--step-3) var(--step--5) var(--step--4)}[dir=rtl] select{background-position:0 var(--step--4)}select:focus{box-shadow:var(--ll-input-focus-box-shadow);outline:none}fieldset{border:none;padding:0}fieldset>*+*{-webkit-margin-before:.5em;margin-block-start:.5em}legend{font-weight:700;padding:0}[role=banner],aside,main{width:100%}aside{margin:0 auto;max-width:65ch;padding:var(--step-0)}@media (min-width:200ch){aside{float:left;inset-block-start:var(--step-0);-webkit-margin-start:calc(50% - 52.5ch);margin-inline-start:calc(50% - 52.5ch);position:-webkit-sticky;position:sticky;width:20ch}}[role=contentinfo]{width:100%}form>*+*{-webkit-margin-before:2em;margin-block-start:2em} \ No newline at end of file +:root{--ll-font-family:"Comic Neue",-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,Ubuntu,roboto,noto,segoe ui,arial,sans-serif;--ll-border-radius:16rem 1rem 14rem 1rem/1rem 14rem 1rem 16rem;--ll-border-color:var(--ll-theme-border-color,#000);--ll-text-color:var(--ll-theme-text-color,#000);--ll-link-color:var(--ll-theme-link-color,var(--ll-text-color));--ll-link-visited-color:var(--ll-theme-link-visited-color,var(--ll-link-color));--ll-accent-color:var(--ll-theme-accent-color,#4169e1);--ll-background-color:var(--ll-theme-background-color,#fff);--ll-input-focus-box-shadow:0 0 0 0.125rem var(--ll-background-color),0 0 0 0.25rem var(--ll-accent-color);--ll-link-focus-box-shadow:0 0 0 0.25rem var(--ll-accent-color);--ll-border-thin:0.0625rem solid var(--ll-border-color);--ll-border-medium:0.125rem solid var(--ll-border-color);--ll-border-thick:0.1875rem solid var(--ll-border-color);--fluid-min-width:320;--fluid-max-width:1140;--fluid-screen:100vw;--fluid-bp:calc((var(--fluid-screen) - var(--fluid-min-width)/16*1rem)/(var(--fluid-max-width) - var(--fluid-min-width)));--f--5-min:8.04;--f--5-max:7.86;--step--5:calc(var(--f--5-min)/16*1rem + (var(--f--5-max) - var(--f--5-min))*var(--fluid-bp));--f--4-min:9.65;--f--4-max:9.83;--step--4:calc(var(--f--4-min)/16*1rem + (var(--f--4-max) - var(--f--4-min))*var(--fluid-bp));--f--3-min:11.57;--f--3-max:12.29;--step--3:calc(var(--f--3-min)/16*1rem + (var(--f--3-max) - var(--f--3-min))*var(--fluid-bp));--f--2-min:13.89;--f--2-max:15.36;--step--2:calc(var(--f--2-min)/16*1rem + (var(--f--2-max) - var(--f--2-min))*var(--fluid-bp));--f--1-min:16.67;--f--1-max:19.2;--step--1:calc(var(--f--1-min)/16*1rem + (var(--f--1-max) - var(--f--1-min))*var(--fluid-bp));--f-0-min:20;--f-0-max:24;--step-0:calc(var(--f-0-min)/16*1rem + (var(--f-0-max) - var(--f-0-min))*var(--fluid-bp));--f-1-min:24;--f-1-max:30;--step-1:calc(var(--f-1-min)/16*1rem + (var(--f-1-max) - var(--f-1-min))*var(--fluid-bp));--f-2-min:28.8;--f-2-max:37.5;--step-2:calc(var(--f-2-min)/16*1rem + (var(--f-2-max) - var(--f-2-min))*var(--fluid-bp));--f-3-min:34.56;--f-3-max:46.88;--step-3:calc(var(--f-3-min)/16*1rem + (var(--f-3-max) - var(--f-3-min))*var(--fluid-bp));--f-4-min:41.47;--f-4-max:58.59;--step-4:calc(var(--f-4-min)/16*1rem + (var(--f-4-max) - var(--f-4-min))*var(--fluid-bp));--f-5-min:49.77;--f-5-max:73.24;--step-5:calc(var(--f-5-min)/16*1rem + (var(--f-5-max) - var(--f-5-min))*var(--fluid-bp))}@media screen and (min-width:1140px){:root{--fluid-screen:calc(var(--fluid-max-width)*1px)}}body{background-color:var(--ll-background-color);color:var(--ll-text-color);font-family:var(--ll-font-family);font-size:var(--step-0)}::-moz-selection{background-color:var(--ll-accent-color);color:var(--ll-background-color)}::selection{background-color:var(--ll-accent-color);color:var(--ll-background-color)}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.wrapper{margin:0 auto;max-width:65ch;padding:var(--step-0)}.flow>*+*{-webkit-margin-before:1em;margin-block-start:1em}.align-center{text-align:center}.align-start{text-align:start}.align-end{text-align:end}h1{font-size:var(--step-3)}h1,h2{font-weight:700}h2{font-size:var(--step-2)}h3{font-weight:700}blockquote,h3{font-size:var(--step-1)}blockquote{border-left:var(--ll-border-medium);border-top-left-radius:.125em 100%;-webkit-padding-start:var(--step-0);padding-inline-start:var(--step-0)}cite{font-size:var(--step-0);font-style:normal;-webkit-padding-start:2ch;padding-inline-start:2ch}cite:before{content:"–"}hr{border:none;display:block;height:1em;-webkit-margin-after:0;margin-block-end:0;position:relative}hr:after{content:"***";position:absolute;text-align:center;width:100%}a{color:var(--ll-link-color)}a[aria-current=page]{-webkit-text-decoration-style:double;text-decoration-style:double}a:visited{color:var(--ll-link-visited-color)}a:focus{background-color:var(--ll-background-color);outline:none}a:active,a:focus{border-radius:var(--ll-border-radius);box-shadow:var(--ll-link-focus-box-shadow)}a:active{background-color:var(--ll-accent-color);color:var(--ll-background-color)}a.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--ll-background-color);border:var(--ll-border-medium);border-radius:var(--ll-border-radius);color:var(--ll-text-color);display:inline-block;font-family:inherit;font-size:100%;font-weight:700;line-height:inherit;padding:var(--step--5) var(--step--4);text-decoration:none}a.button:focus{box-shadow:var(--ll-input-focus-box-shadow);outline:none}a.button:active{background:var(--ll-text-color);color:var(--ll-background-color)}[type=reset],[type=submit],button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:var(--ll-border-medium);border-radius:var(--ll-border-radius);border-style:solid;border-width:.125rem;display:inline-block;font-family:inherit;font-size:100%;font-weight:700;line-height:inherit;padding:var(--step--5) var(--step--4)}[type=submit],button{background:var(--ll-text-color);color:var(--ll-background-color)}[type=reset]{background:var(--ll-background-color);color:var(--ll-text-color)}[type=reset]:focus,[type=submit]:focus,button:focus{box-shadow:var(--ll-input-focus-box-shadow);outline:none}[type=submit]:active,button:active{background:var(--ll-background-color);color:var(--ll-text-color)}[type=reset]:active{background:var(--ll-text-color);color:var(--ll-background-color)}button.link{all:unset;text-decoration:underline}button.link:focus{outline:none}button.link:active,button.link:focus{background-color:var(--ll-accent-color);border-radius:var(--ll-border-radius);box-shadow:var(--ll-link-focus-box-shadow);color:var(--ll-background-color)}label{display:block;font-weight:700}label+*{-webkit-margin-before:var(--step--5);margin-block-start:var(--step--5)}input,textarea{background-color:var(--ll-background-color);border:var(--ll-border-medium);border-radius:var(--ll-border-radius);color:var(--ll-text-color);display:block;width:100%}input,textarea{padding:var(--step--5) var(--step--4)}textarea{min-height:calc(var(--step-0)*12);padding:var(--step--2);resize:vertical}input:focus,textarea:focus{box-shadow:var(--ll-input-focus-box-shadow);outline:none}input[type=checkbox]{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}input[type=checkbox]+label:before{align-items:center;border:var(--ll-border-medium);border-radius:var(--ll-border-radius);content:"\00a0";display:inline-flex;height:var(--step-1);justify-content:center;-webkit-margin-after:calc(var(--step--5)*-1);margin-block-end:calc(var(--step--5)*-1);-webkit-margin-end:var(--step--5);margin-inline-end:var(--step--5);width:var(--step-1)}input[type=checkbox]:active+label:before,input[type=checkbox]:focus+label:before{box-shadow:var(--ll-input-focus-box-shadow)}input[type=checkbox]:checked+label:before{content:"\2713"}input[type=radio]{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}input[type=radio]+label:before{align-items:center;border:var(--ll-border-medium);border-radius:50%;content:"\00a0";display:inline-flex;height:var(--step-1);justify-content:center;-webkit-margin-after:calc(var(--step--5)*-1);margin-block-end:calc(var(--step--5)*-1);-webkit-margin-end:var(--step--5);margin-inline-end:var(--step--5);width:var(--step-1)}input[type=radio]:active+label:before,input[type=radio]:focus+label:before{box-shadow:var(--ll-input-focus-box-shadow)}input[type=radio]:checked+label:before{background-color:var(--ll-text-color);box-shadow:0 0 0 .25rem var(--ll-background-color) inset}input[type=radio]:checked:active+label:before,input[type=radio]:checked:focus+label:before{background-color:var(--ll-text-color);box-shadow:var(--ll-input-focus-box-shadow),0 0 0 .25rem var(--ll-background-color) inset}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--ll-text-color);background-image:var(--ll-theme-select-icon,url('data:image/svg+xml;utf8,'));background-position:right var(--step--4) center;background-repeat:no-repeat;border:var(--ll-border-medium);border-radius:var(--ll-border-radius);color:var(--ll-background-color);font-family:inherit;font-size:100%;font-weight:700;line-height:inherit;padding:var(--step--5) var(--step-3) var(--step--5) var(--step--4)}[dir=rtl] select{background-position:0 var(--step--4)}select:focus{box-shadow:var(--ll-input-focus-box-shadow);outline:none}fieldset{border:none;padding:0}fieldset>*+*{-webkit-margin-before:.5em;margin-block-start:.5em}legend{font-weight:700;padding:0}[role=banner],aside,main{width:100%}aside{margin:0 auto;max-width:65ch;padding:var(--step-0)}@media (min-width:200ch){aside{float:left;inset-block-start:var(--step-0);-webkit-margin-start:calc(50% - 52.5ch);margin-inline-start:calc(50% - 52.5ch);position:-webkit-sticky;position:sticky;width:20ch}}[role=contentinfo]{width:100%}form>*+*{-webkit-margin-before:2em;margin-block-start:2em} \ No newline at end of file diff --git a/fractal.config.js b/fractal.config.js index 378cf7d..1a1a6f0 100644 --- a/fractal.config.js +++ b/fractal.config.js @@ -1,6 +1,6 @@ const fractal = module.exports = require("@frctl/fractal").create(); -fractal.set("project.title", "Looseleaf Prototyping Library"); +fractal.set("project.title", "Looseleaf Framework"); fractal.components.engine("@frctl/nunjucks"); fractal.components.set("ext", ".njk"); fractal.components.set("path", __dirname + "/src/components"); diff --git a/src/components/elements/03-blockquote/README.md b/src/components/elements/03-blockquote/README.md new file mode 100644 index 0000000..d0cb209 --- /dev/null +++ b/src/components/elements/03-blockquote/README.md @@ -0,0 +1,5 @@ +# Blockquote + +Blockquotes can include a citation, which should be wrapped in a [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite). +The em dash that precedes a citation is added using generated content, so only +the name or work cited needs to be include within the `` element. diff --git a/src/components/elements/03-blockquote/blockquote.config.js b/src/components/elements/03-blockquote/blockquote.config.js new file mode 100644 index 0000000..be634de --- /dev/null +++ b/src/components/elements/03-blockquote/blockquote.config.js @@ -0,0 +1,9 @@ +const faker = require("faker"); + +module.exports = { + status: "ready", + context: { + quote: faker.lorem.sentence(9), + citation: "Anonymous" + } +}; diff --git a/src/components/elements/03-blockquote/blockquote.njk b/src/components/elements/03-blockquote/blockquote.njk new file mode 100644 index 0000000..ede550d --- /dev/null +++ b/src/components/elements/03-blockquote/blockquote.njk @@ -0,0 +1,4 @@ +
+ {% render "@p", {content: quote} %} + {% if citation %}{{ citation }}{% endif %} +
diff --git a/src/css/elements/_blockquote.css b/src/css/elements/_blockquote.css new file mode 100644 index 0000000..1f16c4c --- /dev/null +++ b/src/css/elements/_blockquote.css @@ -0,0 +1,16 @@ +blockquote { + border-left: var(--ll-border-medium); + border-top-left-radius: 0.125em 100%; + font-size: var(--step-1); + padding-inline-start: var(--step-0); +} + +cite { + font-size: var(--step-0); + font-style: normal; + padding-inline-start: 2ch; +} + +cite::before { + content: "–"; +} diff --git a/src/css/style.css b/src/css/style.css index 13df580..a340e98 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -2,6 +2,7 @@ @import "./base/base.css"; @import "./base/utilities.css"; @import "./base/typography.css"; +@import "./elements/blockquote.css"; @import "./elements/thematic-break.css"; @import "./elements/link.css"; @import "./elements/button.css";