feat: blockquote

zheeeng · Jul 15, 2022 · 6969d9e · 6969d9e
1 parent 8ba383e
commit 6969d9e
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 21 deletions.
diff --git a/packages/styled-css-base-example/demo/demoSet.tsx b/packages/styled-css-base-example/demo/demoSet.tsx
@@ -35,8 +35,14 @@ export const demoSet = {
     P: () => (
         <p>paragraph</p>
     ),
-    Pre: (code: string) => (
-        <pre>{code}</pre>
+    Code: (code: string) => (
+        <pre><code>{code}</code></pre>
+    ),
+    Quote: () => (
+        <blockquote>
+            {'子在川上曰：“逝者如斯夫！不舍昼夜。”\n'}
+            {'-- 论语《子罕》'}
+        </blockquote>
     ),
     Select: (disabled?: boolean) => (
         <label>
@@ -282,10 +288,11 @@ export const demoSet = {
     )
 }
 
-export const createDemoSet = ({ preCode }: { preCode: string }) => (
+export const createDemoSet = ({ code }: { code: string }) => (
     demoSet.Main(
         <>
-            {demoSet.Section(demoSet.Pre(preCode))}
+            {demoSet.Section(demoSet.Code(code))}
+            {demoSet.Section(demoSet.Quote())}
             {demoSet.Section(demoSet.Article())}
             {demoSet.Section(
                 <>

diff --git a/packages/styled-css-base-example/pages/simple$.tsx b/packages/styled-css-base-example/pages/simple$.tsx
@@ -13,7 +13,7 @@ function Example () {
 
     const className = useMemo(() => `showcase-${preprocessor}`, [preprocessor])
 
-    const preCode = useMemo(() => {
+    const code = useMemo(() => {
         switch (preprocessor) {
             case 'scss': {
                 return '.showcase-scss { @import "styled-css-base/presets/simple/index"; }'
@@ -47,7 +47,7 @@ function Example () {
             </div>
 
             <div className={className}>
-                {createDemoSet({ preCode })}
+                {createDemoSet({ code })}
             </div>
         </div>
     )

diff --git a/packages/styled-css-base/src/simple/index.css b/packages/styled-css-base/src/simple/index.css
@@ -2,6 +2,11 @@
     background-color: rgba(15, 23, 42, 1);
 }
 
+* {
+    box-sizing: border-box;
+    margin: 0;
+}
+
 header {
     font-size: 1.5em;
     text-align: center;
@@ -39,9 +44,6 @@ article {
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.1), 0 0 2px rgba(0, 0, 0, 0.06);
 }
 
-h1, h2, h3, h4, h5, h6, p {
-    margin: 0;
-}
 h1 {
     font-weight: 600;
     font-size: 2em;
@@ -103,7 +105,6 @@ th, td {
 details {
     flex-grow: 1;
     display: block;
-    margin: 0;
     padding: 0.5em;
     background-color: rgba(249, 250, 251, 1);
 }
@@ -115,10 +116,6 @@ summary {
     margin-bottom: 0.5em;
 }
 
-ul, ol, li {
-    margin: 0;
-}
-
 ul, ol {
     padding-inline-start: 2em;
     padding-inline-end: 1em;
@@ -128,10 +125,6 @@ ul li:not(:last-child), ol li:not(:last-child) {
     margin-bottom: 0.25em;
 }
 
-dl, dt, dd {
-    margin: 0;
-}
-
 dl {
     text-indent: 2em;
     margin-bottom: 1em;
@@ -142,18 +135,26 @@ dt:not(:last-child), dd:not(:last-child) {
     margin-bottom: 0.25em;
 }
 
-pre {
+pre, code, blockquote {
     white-space: pre-wrap;
-    margin: 0;
     padding: 0.5em;
+}
+
+blockquote {
+    border-left: 4px solid rgba(15, 23, 42, 0.5);
+    padding-left: 2em;
+}
+
+pre, blockquote {
+    display: block;
+    flex-grow: 1;
     background-color: rgba(249, 250, 251, 1);
 }
 
 label {
     font-weight: 600;
     display: inline-flex;
     align-items: center;
-    margin: 0;
 }
 
 input, select, textarea {
@@ -337,6 +338,7 @@ img, iframe {
     box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
     background-color: rgba(249, 250, 251, 1);
 }
+
 img:hover, iframe:hover {
     box-shadow: 0 0 3px 5px rgba(0, 0, 0, 0.1);
 }