feat(design): base code and pre

2 files changed, 39 insertions, 2 deletions

diff --git a/design/index.html b/design/index.html
index 313544f..e43ec28 100644
--- a/design/index.html
+++ b/design/index.html
@@ -19,7 +19,7 @@
         </figure>
         <h2>A. Section</h2>
         <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri <em>tamen</em> permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. <a href="">Quod idem licet transferre</a>.
+            Lorem ipsum dolor sit amet, <code>consectetur adipiscing elit</code>, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri <em>tamen</em> permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. <a href="">Quod idem licet transferre</a>.
         </p>
         <figure>
             <img src="https://placehold.co/600x400" alt="placeholder">
@@ -57,6 +57,13 @@
             <li>Item B</li>
             <li>Item C</li>
         </ul>
+        <pre><code>package main
+
+import "fmt"
+
+func main() {
+    fmt.Printf("Hey %s!", "you")
+}</code></pre>
         <p>
             Lorem ipsum dolor sit amet, consectetur <em>adipiscing</em> elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. <b>Quod idem licet transferre in voluptatem</b>, ut postea variari voluptas distinguique possit, augeri amplificarique non possit. At etiam Athenis.
         </p>
diff --git a/design/style.css b/design/style.css
index 73eed40..c2dd3f5 100644
--- a/design/style.css
+++ b/design/style.css
@@ -5,7 +5,7 @@
     --color-rose: #F2B5D4; /* link accent */
     --color-light-rose: hsl(330, 55%, 70%, 0.2); /* link accent hover and highlight */
 
-    --font-size-tiny: 0.85rem; /* quote, legend */
+    --font-size-tiny: 0.85rem; /* quote, legend, code */
 
     font-size: 20px;
 }
@@ -136,3 +136,33 @@ figcaption {
     color: var(--color-gray);
 }
 
+code, pre {
+    background: rgba(0, 0, 0, 0.4);
+}
+
+code {
+    padding: 0.05em 0.1em;
+
+    font-family: monospace;
+    font-size: var(--font-size-tiny);
+
+    color: var(--color-gray);
+    border: var(--color-light) 1px solid;
+}
+
+pre {
+    border: var(--color-light) 2px solid;
+
+    margin-bottom: 1.5rem;
+    padding: 0.5rem 1rem;
+    margin-left: -1rem;
+    margin-right: -1rem;
+
+    & code {
+        padding: 0;
+
+        background: none;
+        border: none;
+    }
+}
+