2-quarks

q_tables   

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Copy
Edit
<!-- components/2-quarks/q_tables.txp --> <table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> </table>
Copy
Copy
Edit
/* scss/3-quarks/_q_tables.scss */ table { width: 100%; } th, td:first-child { font-weight: 600; } th { padding-bottom: my-bs(1); } td, th { text-align: left; vertical-align: baseline; } tr:first-child { width: max-content; } td { padding-right: var(--base-unit--ss); padding-bottom: my-bs(1); word-break: break-word; }

q_hr   

Copy
Edit
<!-- components/2-quarks/q_hr.txp --> <hr />
Copy
Copy
Edit
/* scss/2-quarks/_q_hr.scss */ hr { border: 0; height: my-bs(.5); background: var(--black); .bg--dark & { background: var(--white); } margin-top: my-bs(-.25); margin-bottom: my-bs(.25); }

q_figure   

Placeholder image

Image caption, with a link.

Copy
Edit
<!-- components/2-quarks/q_figure.txp --> <!-- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/ --> <!-- assumes image is full-width of viewport --> <figure> <img srcset="https://place-hold.it/640x480 640w, https://place-hold.it/1280x960 1280w, https://place-hold.it/2460x1720 2460w" src="https://place-hold.it/640x480" alt="Placeholder image"> <figcaption><p>Image caption, with a <a href="#">link</a>.</p></figcaption> </figure>
Copy
Copy
Edit
/* scss/2-quarks/_q_figure.scss */ figure { > img { color: transparent; } } figcaption { //@extend .u_flow; margin-top: var(--base-unit--s); > p { //@extend small; max-width: var(--type-measure); // https://baymard.com/blog/line-length-readability } a { text-decoration: underline; font-weight: bolder; } }

q_code    

This is a code block
over two lines.
Copy
Edit
<!-- components/2-quarks/q_code.txp --> <pre><code>This is a code block over two lines.</code></pre>
Copy
Copy
Edit
/* scss/2-quarks/_q_code.scss */ code { font-family: Menlo, Courier, monospace; font-size: small; background-color: #f3f3f3; border-radius: 0.3rem; color: var(--grey); pre & { display: inline-block; padding: $base-font-size; } } // Preformatted text. pre { border-radius: 0.3rem; display: block; white-space: pre; white-space: pre-wrap; // word-break: break-all; word-wrap: break-word; margin-bottom: 1rem; }

q_forms   


Copy
Edit
<!-- components/2-quarks/q_forms.txp --> <form> <label>Email</label><input placeholder="Email" /> <label>First Name</label><input placeholder="First Name" /> <label>Last Name</label><input type="text" placeholder="Last Name" /> <input type="submit" value="Subscribe" /> </form> <br /> <button>A pointless Button</button>
Copy
Copy
Edit
/* scss/2-quarks/_q_forms.scss */ button { cursor: pointer; border: 2px solid var(--black); &.plain { border: none; } background: var(--white); &::-moz-focus-inner { //Button height fix for Firefox padding: 0; border: 0 none; } &:focus { //Focus fix for Chrome outline: 0; } } input { border-bottom: 2px solid var(--black); } textarea { border: 2px solid var(--black); } input, textarea { background-color: var(--white); padding: var(--base-unit--ss); } label { display: none; } [type="submit"] { text-align: left; cursor: pointer; } .comThanks, .comError { }

q_lists   

  • Item One
  • Item Two
  • Item Three
  1. Item One
  2. Item Two
  3. Item Three
Definition One
Term One
Definition Two
Term One
Term Two
Copy
Edit
<!-- components/2-quarks/q_lists.txp --> <ul> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> </ul> <ol> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> </ol> <dl> <dt>Definition One</dt> <dd>Term One</dd> <dt>Definition Two</dt> <dd>Term One</dd> <dd>Term Two</dd> </dl>
Copy
Copy
Edit
/* scss/2-quarks/_q_lists.scss */ ul,ol { padding-left: 0; list-style-position: inside; } dl { margin-bottom: $base-line-height; padding-left: 0; } dt { font-weight:500; } dd { text-indent: var(--base-unit); }

q_details   

Congratulations, you played yourself.

It’s on you how you want to live your life.

Copy
Edit
<!-- components/2-quarks/q_details.txp --> <details> <summary>Congratulations, you played yourself.</summary> <p>It’s on you how you want to live your life. </p> </details>
Copy
Copy
Edit
/* scss/2-quarks/_q_details.scss */ summary { cursor: pointer; display: flex; list-style-type: none; //justify-content: space-between; > * { margin-top: 0; } &:focus { outline: none; } &::-webkit-details-marker, &::marker { display: none; } > *:after { content: "+"; font-size: inherit; @extend .a_heading !optional; line-height: 1; transition: transform .2s ease; margin-left: var(--base-unit--b); } &:hover > * :after { transform: scale(120%); } } details[open] summary > *:after { content: "-"; } details[plain] summary> *:after { display: none; }