Bolder blockquotes for zebra layout

center-key · Jun 5, 2024 · b038e12 · b038e12
1 parent e0d008a
commit b038e12
Show file tree

Hide file tree

Showing 6 changed files with 114 additions and 33 deletions.
diff --git a/src/css/layouts/zebra-sections.css b/src/css/layouts/zebra-sections.css
@@ -18,7 +18,10 @@ HTML (<body>):
       section
          h2
             img
+         p
          div
+            blockquote
+               cite
    footer
 */
 body {
@@ -136,9 +139,31 @@ main >section >div {  /* centered flow box */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
+   column-gap: 40px;
+   row-gap: 20px;
    }
-main >section >div >* {
-   margin: 0px 20px 20px 20px;
+main >section >div >blockquote {
+   display: block;
+   width: 100%;
+   font-size: 1.2rem;
+   font-style: italic;
+   text-align: left;
+   border: 1px solid silver;
+   padding: 10px 25px;
+   margin: 0px;
+   }
+main >section >div >blockquote >cite {
+   display: block;
+   font-size: 0.8rem;
+   font-weight: 100;
+   font-style: normal;
+   letter-spacing: 0.05em;
+   text-align: right;
+   padding-top: 5px;
+   }
+main >section >div >blockquote >cite::before {
+   content: "\2014";  /* character: — (em dash) */
+   margin-right: 0.4em;
    }
 main >section >ul {
    width: 80%;
@@ -165,10 +190,13 @@ main >section figure img.popup-image:hover {
 main >section figure figcaption {
    font-style: italic;
    }
-main >section >blockquote {
+main >section code {
+   white-space: normal;
+   }
+main >section >blockquote {       /* deprecated */
    font-style: italic;
    }
-main >section >blockquote cite {
+main >section >blockquote cite {  /* deprecated */
    display: block;
    font-size: 0.8rem;
    font-weight: 100;

diff --git a/src/css/layouts/zebra-sections.html b/src/css/layouts/zebra-sections.html
@@ -71,7 +71,24 @@ <h2>On Fire</h2>
          <img src=https://pilafian.org/dem/gallery/colorful-thailand/~data~/portfolio/005-large.jpg alt=dragon>
          <figcaption>Dragon</figcaption>
       </figure>
-      <p>Stuff goes here.</p>
+      <p>
+         Stuff goes in a paragraph. Stuff goes in a paragraph. Stuff goes in a paragraph.
+         Stuff goes in a paragraph. Stuff goes in a paragraph. Stuff goes in a paragraph.
+      </p>
+      <div>
+         More stuff goes here. More stuff goes here. More stuff goes here. More stuff goes here.
+         More stuff goes here. More stuff goes here. More stuff goes here. More stuff goes here.
+      </div>
+      <div>
+         <blockquote>
+            "No matter where you go, there you are."
+            <cite>Buckaroo Banzai</cite>
+         </blockquote>
+         <blockquote>
+            "No matter where you go, there you are."
+            <cite>Buckaroo Banzai</cite>
+         </blockquote>
+      </div>
    </section>
 
    <section data-background=purple>

diff --git a/src/css/reset.less b/src/css/reset.less
@@ -4,6 +4,8 @@
 /* MIT License                 */
 /*******************************/
 
+@import "reset/utility-box";
+
 // Special font
 @import url(https://fonts.googleapis.com/css?family=Chango);
 
@@ -77,7 +79,7 @@ a figure:hover figcaption { color: black; }
 form, fieldset, label { display: block; max-width: 25em; margin-bottom: 1em; }
 label >span:first-child { display: block; }
 input, textarea, select, fieldset >aside { width: 100%; max-width: 25em; font-size: 1.1em; }
-input, textarea { background-color: mintcream; border: 1px solid silver; border-radius: 5px; padding: 0.3em; }
+input, textarea { border: 1px solid silver; border-radius: 5px; padding: 0.3em; }
 select { font-size: 1.1em; }
 textarea { height: 4.1em; }  //display 3 lines
 label:has(input[type=checkbox],input[type=radio]) { display: flex; align-items: center; padding-left: 1.2em; margin-bottom: 0.1em; }
@@ -92,6 +94,9 @@ input:out-of-range { background-color: pink; }
 form nav, fieldset nav { text-align: right; margin-bottom: 1em; }
 form nav button, fieldset nav button { margin-left: 0.5em; }
 
+// Form colors
+input, textarea { background-color: mintcream; }
+
 // Flat buttons
 button             { font-size: 1.1rem; font-weight: bold; white-space: nowrap; color: white; border: none; border-radius: 0.4em; padding: 0.6em 1.2em; outline: none; transition: all 500ms; }
 button i.font-icon { font-size: 1.2em; vertical-align: top; padding-right: 0.4em; }
@@ -110,7 +115,7 @@ label:has(select) {
    text-align: left;
    padding: 0px;
    &::after {
-      content: "\276F";  //arrow: "❯" (Heavy Right-Pointing Angle Quotation Mark Ornament)
+      content: @symbolAngleRight;  //character: ❯
       position: absolute;
       right: 0.4em;
       bottom: 0.03em;
@@ -269,31 +274,7 @@ figure.video-container-link {
       }
    }
 
-// PERFECT style
-//    <form class=perfect>
-//       <h2>Title</h2>
-//       <label><span>Label:</span><input></label>
-//       <nav>
-//          <small>Powered by <a href=https://centerkey.com/php>PERFECT</a></small>
-//          <button type=submit>Send</button>
-//       </nav>
-//    </form>
-form.perfect { display: flex; flex-direction: column; max-width: 25em; background-color: whitesmoke; color: dimgray; border: 1px solid; border-radius: 2px; padding: 0px; margin: 0px auto 20px auto; }
-form.perfect >* { margin: 0px 20px 20px 20px }
-form.perfect h2 { font-size: 1.2rem; text-align: center; color: white; padding: 0.3em; margin: 0px 0px 20px 0px; }
-form.perfect label { display: block; font-size: 1.0rem; text-align: left; margin-bottom: 20px; }
-form.perfect input, form.perfect select, form.perfect textarea { width: 100%; max-width: 100%; font-size: 1.2rem; margin: 0px; }
-form.perfect textarea { height: 4.1em; }
-form.perfect input, form.perfect textarea { box-sizing: border-box; border: 1px solid silver; border-radius: 5px; padding: 0.3em; }
-form.perfect fieldset { border: none; padding: 0px; }
-form.perfect fieldset legend { font-size: 1.0em; }
-form.perfect fieldset label { display: flex; align-items: center; padding-left: 1.2em; margin-bottom: 0.1em; }
-form.perfect fieldset label input { width: auto; margin-right: 0.3em; }
-form.perfect nav { display: flex; justify-content: space-between; align-items: flex-end; }
-form.perfect nav button { font-size: 1.1rem; font-weight: bold; color: white; background-color: dimgray; border: none; border-radius: 0.4em; padding: 0.6em 1.2em; cursor: pointer; transition: all 500ms; }
-form.perfect nav button:hover:not(:disabled), form.perfect nav button:focus { background-color: black; }
-form.perfect nav small { font-size: 0.6rem; color: gray; }
-form.perfect nav small a { color: gray; background-color: transparent; text-decoration: none; border: none; outline: none; }
+@import "reset/perfect";
 
 // JavaScript libraries
 .reveal-button       { display: inline-block; border: 1px solid; padding: 3px 10px; margin-bottom: 20px; transition: all 500ms; cursor: pointer; }

diff --git a/src/css/reset/perfect.less b/src/css/reset/perfect.less
@@ -0,0 +1,25 @@
+// PERFECT style
+//    <form class=perfect>
+//       <h2>Title</h2>
+//       <label><span>Label:</span><input></label>
+//       <nav>
+//          <small>Powered by <a href=https://centerkey.com/php>PERFECT</a></small>
+//          <button type=submit>Send</button>
+//       </nav>
+//    </form>
+form.perfect { display: flex; flex-direction: column; max-width: 25em; background-color: whitesmoke; color: dimgray; border: 1px solid; border-radius: 2px; padding: 0px; margin: 0px auto 20px auto; }
+form.perfect >* { margin: 0px 20px 20px 20px }
+form.perfect h2 { font-size: 1.2rem; text-align: center; color: white; padding: 0.3em; margin: 0px 0px 20px 0px; }
+form.perfect label { display: block; font-size: 1.0rem; text-align: left; margin-bottom: 20px; }
+form.perfect input, form.perfect select, form.perfect textarea { width: 100%; max-width: 100%; font-size: 1.2rem; margin: 0px; }
+form.perfect textarea { height: 4.1em; }
+form.perfect input, form.perfect textarea { box-sizing: border-box; border: 1px solid silver; border-radius: 5px; padding: 0.3em; }
+form.perfect fieldset { border: none; padding: 0px; }
+form.perfect fieldset legend { font-size: 1.0em; }
+form.perfect fieldset label { display: flex; align-items: center; padding-left: 1.2em; margin-bottom: 0.1em; }
+form.perfect fieldset label input { width: auto; margin-right: 0.3em; }
+form.perfect nav { display: flex; justify-content: space-between; align-items: flex-end; }
+form.perfect nav button { font-size: 1.1rem; font-weight: bold; color: white; background-color: dimgray; border: none; border-radius: 0.4em; padding: 0.6em 1.2em; cursor: pointer; transition: all 500ms; }
+form.perfect nav button:hover:not(:disabled), form.perfect nav button:focus { background-color: black; }
+form.perfect nav small { font-size: 0.6rem; color: gray; }
+form.perfect nav small a { color: gray; background-color: transparent; text-decoration: none; border: none; outline: none; }
diff --git a/src/css/reset/utility-box.less b/src/css/reset/utility-box.less
@@ -0,0 +1,30 @@
+// Style: Constants and Utilities -- Reusable values and mixins
+
+// Layers for z-index
+@layerDialogBox:     500;  //cream of the crop
+@layerModal:         400;  //screen overlays
+@layerFixedPosition: 300;  //sticky elements
+@layerNavigation:    200;  //notifications, menus, and drop-downs
+@layerHover:         100;  //tootips and other hover popups
+@layerBackground:   -100;  //bottom of the barrel
+
+// Character entities
+@symbolAngleRight:   "\276F";  //character: ❯
+@symbolArrowDown:    "\21E9";  //character: ⇩
+@symbolArrowUp:      "\21E7";  //character: ⇧
+@symbolCheckmark:    "\2714";  //character: ✔
+@symbolEmDash:       "\2014";  //character: —
+@symbolTriangleDown: "\25BC";  //character: ▼
+@symbolTriangleUp:   "\25B2";  //character: ▲
+
+// Tools
+
+.Bullseye() {
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   }
+
+.MobileMode(@lessRules) {  //selects iPhone 6/6s/7/8/SE2/SE3 landscape and anything narrower
+   @media (max-width: 667px) { @lessRules(); }
+   }
diff --git a/src/js/spec-js.html b/src/js/spec-js.html
@@ -91,7 +91,7 @@ <h2>Specifications</h2>
          <fieldset>
             <legend>Form</legend>
             <label><input placeholder="Enter key won't submit form."></label>
-            <p><button type=submit>Submit</button></p>
+            <nav><button type=submit>Submit</button></nav>
          </fieldset>
       </form>
       <div>