Continue work on elements

src/assets/css/elements.css

@@ -1,4 +1,4 @@
-/* Generic elements */
+/* Layout elements */
 
 main {
     max-width: var(--article);
@@ -7,12 +7,6 @@ main {
     margin-right: auto; 
 }
 
-pre, code {
-    background-color: var(--black);
-    padding: 5px;
-    font-family: 'Fira Code', monospace;
-}
-
 footer {
     background-color: var(--black);
     position: fixed;
@@ -26,7 +20,52 @@ footer {
     text-align: center;
 }
 
-/* Blog */
+/* Generic elements */
+
+p {
+    font-size: 16px;
+    line-height: 22px;
+}
+
+code {
+    background-color: var(--black);
+    padding: 5px;
+    font-family: 'Fira Code', monospace;
+}
+
+pre {
+    overflow: auto;
+    word-break: break-all;
+    background-color: var(--black);
+    padding: 20px;
+    font-family: 'Fira Code', monospace;
+    margin-top: var(--smallmargin);
+    margin-bottom: var(--smallmargin);
+}
+
+blockquote {
+    border-left: 3px solid var(--green);
+    padding: var(--smallpadding);
+    margin-top: var(--smallmargin);
+    margin-bottom: var(--smallmargin);
+    font-style: italic;
+
+}
+
+button {
+    background-color: var(--green);
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin-top: var(--smallmargin);
+    margin-bottom: var(--smallmargin);
+}
+
+/* Page specific: blog */
 
 .blogmeta {
     font-weight: 400;

src/assets/css/variables.css

@@ -6,8 +6,15 @@
     --gray: #85888C;
     --lightblue: #2fbef2;
     --darkblue: #00324a;
+    --green: #04AA6D;
     --mute: #bbbbbb;
     /* Breakpoints */
     --fullwidth: 100%;
     --article: 53rem;
+    /* Padding */
+    --smallpadding: 20px;
+    --largepadding: 50px;
+    /* Margin */
+    --smallmargin: 20px;
+    --largemargin: 50px;
 }